/* =============================================================================
   ECMN Property Database — Theme Tokens (Sprint 1A)
   shiny-app/www/theme.css

   Source of truth for every color, type, space, radius, shadow, and
   component class used by the application chrome. Every downstream
   sprint reads from these tokens — never hard-code a hex or px value
   when a variable below covers it.

   Inter is loaded via <link> tags in ui_main.R::ecmn_top_head() (see
   the canonical lines in docs/UI_REDESIGN_SKETCH.md §6).
   ============================================================================= */

:root {
  /* ── Color: ECMN brand (confirmed June 17, 2026) ─────── */
  --ecmn-blue:        #00449F;   /* primary — title bars, links, icons */
  --ecmn-blue-dark:   #003478;   /* hover/active */
  --ecmn-blue-tint:   #E5EDF7;   /* subtle fills */
  --ecmn-gold:        #C9A227;   /* accent only — pull-quotes, hero */
  --ecmn-gold-tint:   #F6EFD3;

  /* ── Color: monotone neutrals (warm grey) ────────────── */
  --neutral-50:  #FAFAF8;
  --neutral-100: #F2F2EE;
  --neutral-200: #E2E2DC;        /* table borders */
  --neutral-300: #CFCFC8;
  --neutral-500: #8A8A82;        /* body secondary */
  --neutral-700: #4A4A45;        /* body primary */
  --neutral-900: #1F1F1C;        /* headings */

  /* ── Color: score bands ──────────────────────────────── */
  --score-asset:     #4E8C5C;
  --score-moderate:  #C99A2A;
  --score-challenge: #B33F3F;

  /* ── Typography ──────────────────────────────────────── */
  /* ECMN brand pattern: serif display headlines + sans body. EB Garamond
     mirrors the transitional serif used on ecmn.org; Inter for body. */
  --font-display: 'EB Garamond', 'Source Serif Pro', Georgia, serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --text-xs:  12px;
  --text-sm:  14px;
  --text-base: 16px;
  --text-lg:   18px;
  --text-xl:   22px;
  --text-2xl:  28px;
  --text-3xl:  40px;
  --text-4xl:  56px;   /* hero display */

  /* ── Four Priorities card themes (inspired by ecmn.org) ──
     Pale tinted background + matching accent foreground + bottom bar.
     Order in the rotation: justice (blue), innovation (lavender),
     discipleship (peach), vitality (gold). */
  --card-justice-bg:        #E5EDF7;
  --card-justice-fg:        #00449F;
  --card-justice-fg-soft:   #1F62B6;

  --card-innovation-bg:     #ECE7F4;
  --card-innovation-fg:     #5B2C8C;
  --card-innovation-fg-soft:#7A4FB0;

  --card-discipleship-bg:   #F4E5D9;
  --card-discipleship-fg:   #A8392E;
  --card-discipleship-fg-soft: #C75645;

  --card-vitality-bg:       #FBEFD4;
  --card-vitality-fg:       #9C7800;
  --card-vitality-fg-soft:  #BD9418;

  --card-stewardship-bg:    #DDE9E4;
  --card-stewardship-fg:    #2F6E5C;
  --card-stewardship-fg-soft:#4A8E7B;

  /* Teal — a cool, muted blue-green (used by the Database card). Distinct from
     the Dashboard's sky-blue and Settings' sage. */
  --card-teal-bg:           #D3E7E9;
  --card-teal-fg:           #1A6470;
  --card-teal-fg-soft:      #388592;

  /* ── Space (4px scale) ───────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;

  /* ── Radii ───────────────────────────────────────────── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  /* ── Shadow ──────────────────────────────────────────── */
  --shadow-card:       0 1px 2px rgba(15,20,25,0.06), 0 2px 8px rgba(15,20,25,0.04);
  --shadow-card-hover: 0 2px 4px rgba(15,20,25,0.08), 0 4px 16px rgba(15,20,25,0.06);
}

/* =============================================================================
   Base typography & body
   ============================================================================= */

html, body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--neutral-700);
  background: var(--neutral-50);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--neutral-900);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.15;
}

h1 { font-size: var(--text-3xl); font-weight: 500; }
h2 { font-size: var(--text-2xl); font-weight: 500; }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }
h5 { font-size: var(--text-base); }
h6 { font-size: var(--text-sm); }

a {
  color: var(--ecmn-blue);
  text-decoration: none;
}
a:hover, a:focus { color: var(--ecmn-blue-dark); text-decoration: underline; }

/* =============================================================================
   .ecmn-topnav — persistent top navigation bar
   ECMN logo LEFT-aligned (matches ecmn.org), About/Home/Help right-aligned.
   ============================================================================= */

.ecmn-topnav {
  position: sticky;
  top: 0;
  z-index: 2000;       /* defended against absolute-positioned decor + carousel */
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  border-bottom: 1px solid var(--neutral-200);
  padding: var(--space-3) var(--space-8);
  box-shadow: 0 1px 2px rgba(15,20,25,0.04);
}

.ecmn-topnav-left {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-shrink: 0;
}

.ecmn-topnav-right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.ecmn-topnav-logo {
  height: 40px;          /* explicit — SVG without intrinsic px sizing needs this */
  width: auto;
  cursor: pointer;
  display: block;
  flex-shrink: 0;        /* defend against flex squeeze on narrow viewports */
}

.ecmn-topnav-page-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--neutral-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ecmn-topnav-link {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--neutral-700);
  background: none;
  border: none;
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
  border-radius: var(--radius-sm);
  letter-spacing: 0.01em;
}

.ecmn-topnav-link:hover,
.ecmn-topnav-link:focus {
  color: var(--ecmn-blue);
  background: var(--ecmn-blue-tint);
  text-decoration: none;
  outline: none;
}

/* =============================================================================
   .ecmn-page — page wrapper
   ============================================================================= */

.ecmn-page {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-6);
}

.ecmn-page-header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--neutral-200);
}

.ecmn-page-header h1 {
  margin: 0;
  font-size: var(--text-2xl);
  color: var(--neutral-900);
}

/* =============================================================================
   .ecmn-back-arrow — top-left back-arrow on every interior page
   ============================================================================= */

.ecmn-back-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  color: var(--neutral-700);
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}

.ecmn-back-arrow:hover,
.ecmn-back-arrow:focus {
  color: var(--ecmn-blue);
  background: var(--ecmn-blue-tint);
  outline: none;
}

.ecmn-back-arrow svg {
  width: 20px;
  height: 20px;
  display: block;
}

/* =============================================================================
   .ecmn-card — card wrapper
   ============================================================================= */

.ecmn-card {
  background: #ffffff;
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
}

/* =============================================================================
   .ecmn-gallery — GSAP seamless-loop carousel
   Ported from GreenSock CodePen `qEWKyrL`. The gallery container holds
   an absolutely-positioned <ul.cards> at center; each <li> is one card
   that GSAP scrubs across the X axis with scale + opacity yoyo.

   Layout:
     <div.ecmn-gallery>
       <ul.cards>
         <li.ecmn-gallery-card.ecmn-card-{theme}>
           <div.ecmn-gallery-card-inner>
             <div.ecmn-gallery-card-icon><img/></div>
             <span.ecmn-gallery-card-title>...</span>
           </div>
         </li>
         ...
       </ul>
       <div.actions>
         <button.ecmn-gallery-chevron.prev/>
         <button.ecmn-gallery-chevron.next/>
       </div>
     </div>
     <div.drag-proxy/>
   ============================================================================= */

.ecmn-gallery {
  position: relative;
  width: 100%;
  height: 520px;          /* enough room for the card + chevrons */
  overflow: hidden;
  z-index: 1;
}

.ecmn-gallery .cards {
  position: absolute;
  width: 14rem;
  height: 18rem;
  top: 32%;                    /* raises cards within the gallery box */
  left: 50%;
  transform: translate(-50%, -50%);
  list-style: none;
  padding: 0;
  margin: 0;
}

.ecmn-gallery-card {
  list-style: none;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 14rem;
  aspect-ratio: 9 / 16;
  border-radius: var(--radius-md);
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(15, 20, 25, 0.18), 0 2px 6px rgba(15, 20, 25, 0.08);
  overflow: hidden;
  /* GSAP drives transform / opacity — no CSS transitions here, they'd fight. */
}

.ecmn-gallery-card:focus-visible {
  outline: 3px solid var(--ecmn-blue);
  outline-offset: 3px;
}

.ecmn-gallery-card-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  width: 100%;
  height: 100%;
  padding: var(--space-6);
  text-align: center;
}

.ecmn-gallery-card-icon {
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ecmn-gallery-card-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ecmn-gallery-card-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: currentColor;
}

/* Card themes (background + currentColor accent) */
.ecmn-gallery-card.ecmn-card-justice       { background: var(--card-justice-bg);       color: var(--card-justice-fg); }
.ecmn-gallery-card.ecmn-card-innovation    { background: var(--card-innovation-bg);    color: var(--card-innovation-fg); }
.ecmn-gallery-card.ecmn-card-discipleship  { background: var(--card-discipleship-bg);  color: var(--card-discipleship-fg); }
.ecmn-gallery-card.ecmn-card-vitality      { background: var(--card-vitality-bg);      color: var(--card-vitality-fg); }
.ecmn-gallery-card.ecmn-card-stewardship   { background: var(--card-stewardship-bg);   color: var(--card-stewardship-fg); }
.ecmn-gallery-card.ecmn-card-teal          { background: var(--card-teal-bg);          color: var(--card-teal-fg); }

/* Frame wrapper — relative-positioned parent so chevrons can absolute-
   position to its edges while sitting OUTSIDE the gallery's overflow
   clip. Constrained narrower than the carousel-home so the chevrons
   (at left/right: -48px) stay well inside the page edge instead of
   leaking and producing horizontal overflow. */
.ecmn-carousel-frame {
  position: relative;
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
}

/* Chevron glyphs — blue SVGs nudged DOWN and OUTSIDE the gallery's
   visible card range. They live in .ecmn-carousel-frame (sibling of
   .ecmn-gallery) so they aren't subject to the gallery's overflow:
   hidden. No round button background — the chevron itself reads as
   the control. */
.ecmn-gallery-chevron {
  position: absolute;
  top: 42%;                        /* nudged down from cards' 32% center */
  width: 56px;
  height: 56px;
  background: transparent;
  color: var(--ecmn-blue);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transform: translateY(-50%);
  transition: color 0.15s ease, transform 0.15s ease;
  z-index: 200;
}

/* Pull chevrons OUTSIDE the .ecmn-gallery boundary by 48px so they sit
   clear of the receded cards' visual range without leaking off-page. */
.ecmn-gallery-chevron.prev { left: -48px; }
.ecmn-gallery-chevron.next { right: -48px; }

.ecmn-gallery-chevron:hover {
  color: var(--ecmn-blue-dark);
  transform: translateY(-50%) scale(1.18);
}

.ecmn-gallery-chevron:focus-visible {
  outline: 3px solid var(--ecmn-gold);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}

.ecmn-gallery-chevron svg {
  width: 44px;
  height: 44px;
  display: block;
}

/* Draggable's proxy is hidden but mounted — Draggable needs a real DOM
   target for `type: "x"`. The `trigger: .cards` config makes the user
   feel like they're dragging the cards directly. */
.drag-proxy {
  visibility: hidden;
  position: absolute;
  width: 0;
  height: 0;
}

/* =============================================================================
   Carousel home page chrome — intro block + decorative frame
   ============================================================================= */

.ecmn-carousel-home {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-8) var(--space-8);
  overflow: visible;
}

/* Decorative shape frame + cross pattern behind the carousel — echoes the
   ECMN.org hero treatment where a blue rectangle anchors the photo. */
.ecmn-carousel-decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* Decorative blue rectangle retired per user feedback — kept the class
   so future iterations can reintroduce it without re-plumbing markup. */
.ecmn-carousel-decor-frame {
  display: none;
}

.ecmn-carousel-decor-pattern {
  position: absolute;
  inset: 0;
  background-image:
    /* Subtle ECMN cross repeated diagonally — kept very faint */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'><g fill='none' stroke='%2300449F' stroke-opacity='0.05' stroke-width='1'><path d='M40 12v56M12 40h56M40 30l4 4-4 4-4-4z'/></g></svg>");
  background-repeat: repeat;
  opacity: 0.7;
}

/* Lift content above the decorative layer */
.ecmn-carousel-home > .ecmn-carousel-intro,
.ecmn-carousel-home > .ecmn-carousel-frame,
.ecmn-carousel-home > .ecmn-carousel-bullets-wrap,
.ecmn-carousel-home > .ecmn-carousel-footer {
  position: relative;
  z-index: 1;
}

.ecmn-carousel-intro {
  text-align: center;
  margin-bottom: var(--space-3);
  padding: 0 var(--space-6);
}

.ecmn-carousel-intro h1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  margin: 0;
  font-weight: 500;
}

.ecmn-carousel-intro-eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ecmn-blue);
}

.ecmn-carousel-intro-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 500;
  font-style: normal;
  letter-spacing: -0.01em;
  color: var(--neutral-900);
  line-height: 1.05;
}

/* Home footer — light-touch close to the carousel page. Thin top border,
   muted small text; a small brand wordmark opposite the navigation. */
.ecmn-carousel-footer {
  margin-top: var(--space-12);
  padding: var(--space-6) var(--space-2) var(--space-2);
  border-top: 1px solid var(--neutral-200);
}

.ecmn-home-footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.ecmn-home-footer-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.ecmn-home-footer-mark {
  flex: none;
  width: 20px;
  height: 20px;
  opacity: 0.5;
}

.ecmn-home-footer-wordmark {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  min-width: 0;
}

.ecmn-home-footer-eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--neutral-500);
}

.ecmn-home-footer-title {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--neutral-700);
}

.ecmn-home-footer-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
}

.ecmn-home-footer-link {
  appearance: none;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--neutral-500);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  transition: color 0.15s ease, background 0.15s ease;
}

.ecmn-home-footer-link:hover {
  color: var(--ecmn-blue);
  background: var(--ecmn-blue-tint);
}

.ecmn-home-footer-link:focus-visible {
  color: var(--ecmn-blue);
  background: var(--ecmn-blue-tint);
  outline: 2px solid var(--ecmn-blue);
  outline-offset: 2px;
}

/* =============================================================================
   .ecmn-table — clean, no-banding table
   ============================================================================= */

.ecmn-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #ffffff;
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.ecmn-table thead th {
  background: var(--neutral-50);
  color: var(--neutral-900);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--neutral-200);
}

.ecmn-table tbody td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--neutral-200);
  font-size: var(--text-sm);
  color: var(--neutral-700);
}

.ecmn-table tbody tr:last-child td { border-bottom: none; }
.ecmn-table tbody tr:hover { background: var(--neutral-50); }

/* DT table — pull DataTables output into the ecmn token system */
table.dataTable {
  font-family: var(--font-body);
  font-size: var(--text-sm);
}

table.dataTable thead th {
  background: var(--neutral-50);
  color: var(--neutral-900);
  border-bottom: 1px solid var(--neutral-200) !important;
}

table.dataTable.no-footer { border-bottom-color: var(--neutral-200) !important; }

/* Kill default row banding — sketch §5 calls for no banded rows */
table.dataTable.stripe tbody tr.odd,
table.dataTable.display tbody tr.odd { background-color: #ffffff; }

/* DataTables — custom filter row (second <thead> row of <select>s
   wired via initComplete). Same aesthetic as the legacy at-risk table
   on the dashboard; applies anywhere DT renders our 2-row header
   pattern (Properties page AND the embedded dashboard Properties). */
table.dataTable thead tr.dt-filter-row th {
  background: var(--neutral-50);
  border-top: 1px solid var(--neutral-200);
  border-bottom: 1px solid var(--neutral-200);
  padding: 4px 6px;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
}

table.dataTable thead tr.dt-filter-row th.sorting,
table.dataTable thead tr.dt-filter-row th.sorting_asc,
table.dataTable thead tr.dt-filter-row th.sorting_desc,
table.dataTable thead tr.dt-filter-row th.sorting_disabled {
  background-image: none !important;
  cursor: default;
}

table.dataTable thead tr.dt-filter-row .dt-custom-filter {
  width: 100%;
  min-width: 80px;
  height: 26px;
  padding: 2px 6px;
  font-size: 11.5px;
  line-height: 1.2;
  background: #ffffff;
  border: 1px solid var(--neutral-300);
  border-radius: var(--radius-sm);
  color: var(--neutral-700);
}

table.dataTable thead tr.dt-filter-row .dt-custom-filter:focus {
  outline: none;
  border-color: var(--ecmn-blue);
  box-shadow: 0 0 0 2px var(--ecmn-blue-tint);
}

/* =============================================================================
   Properties table — in-body actions row (toggle on left, Export on right).
   Scoped to the actions row, not the box header — Export is now
   visually inside the table area.
   ============================================================================= */

.ecmn-properties-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) 0 var(--space-4);
  margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--neutral-100);
}

.ecmn-properties-actions .ecmn-properties-toggle {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.ecmn-properties-toggle-caption {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--neutral-700);
  min-width: 48px;
  text-align: center;
}

.ecmn-properties-export-btn {
  background: #ffffff;
  color: var(--ecmn-blue);
  border: 1px solid var(--neutral-300);
  font-weight: 500;
}
.ecmn-properties-export-btn:hover,
.ecmn-properties-export-btn:focus {
  background: var(--ecmn-blue-tint);
  color: var(--ecmn-blue-dark);
  border-color: var(--ecmn-blue);
}

/* =============================================================================
   Modal close X — absolute-positioned in the upper-right of the title.
   Bootstrap's data-dismiss="modal" handles the close itself.
   ============================================================================= */

.modal-header { position: relative; }

.ecmn-modal-x {
  position: absolute;
  top: 12px;
  right: 14px;
  background: transparent;
  border: 0;
  font-size: 26px;
  line-height: 1;
  font-weight: 400;
  color: var(--neutral-500);
  cursor: pointer;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  transition: color 0.15s ease, background 0.15s ease;
}
.ecmn-modal-x:hover,
.ecmn-modal-x:focus {
  color: var(--neutral-900);
  background: var(--neutral-100);
  outline: none;
}

.ecmn-modal-title-text {
  display: inline-block;
  padding-right: 32px;        /* clear the X */
}

/* =============================================================================
   Assessment Guide — the interpretive key. Solid color category chips +
   measure table. Compact enough to read and close without scrolling.
   ============================================================================= */

.guide-body {
  font-family: var(--font-body);
  color: var(--neutral-700);
}

/* Category legend at the very top — the interpretive anchor. Three solid
   color chips, white text, soft shadow; colorful so closing into the
   dashboard isn't a stark transition. */
.guide-cat-legend {
  display: flex;
  gap: var(--space-3);
  margin: 0 0 22px;   /* generous whitespace beneath the color boxes */
}

.guide-cat-chip {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 10px 14px;
  border-radius: var(--radius-md, 8px);
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(31, 31, 28, 0.15);
}
.guide-cat-asset     { background: var(--score-asset); }
.guide-cat-moderate  { background: var(--score-moderate); }
.guide-cat-challenge { background: var(--score-challenge); }

/* "At-risk" definition callout — anchors the term to the Challenge category. */
.guide-atrisk {
  margin: 0 0 18px;
  padding: 10px 14px;
  border-left: 3px solid var(--score-challenge);
  background: rgba(179, 63, 63, 0.06);
  border-radius: var(--radius-sm, 6px);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--neutral-700);
}
.guide-atrisk-tag { font-weight: 700; color: var(--score-challenge); }

.guide-cat-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.1;
}
.guide-cat-meta {
  font-size: 11.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  font-variant-numeric: tabular-nums;
}

/* Explanation sits below the colors and refers back to them. A thin rule
   above it is the single visual break between the colors and the text. */
.guide-intro {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--neutral-700);
  border-top: 1px solid var(--neutral-100);
  padding-top: 16px;
  margin: 0 0 14px;
}

/* Five measures: names lead (display serif), descriptions lighter. */
.guide-measure-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
}

.guide-measure-row td {
  padding: 6px 0;
  border-top: 1px solid var(--neutral-100);
  vertical-align: baseline;
}
.guide-measure-row:first-child td { border-top: none; padding-top: 0; }

.guide-measure-name-cell {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  color: var(--neutral-900);
  white-space: nowrap;
  padding-right: var(--space-4) !important;
  width: 1%;
}

.guide-measure-clause {
  font-size: 13px;
  line-height: 1.4;
  color: var(--neutral-600);
}

/* Tighten the space between the last measure and the footer. The single
   divider is the modal-footer's own top border (we don't add a second). */
.modal-body:has(.guide-body) { padding-bottom: 8px; }
.modal-footer:has(.guide-footer) { padding: 10px 15px 12px; }

/* Footer: acknowledgment and don't-show stacked on the left, OK on the
   right. No border here — the modal-footer border is the only divider. */
.guide-footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
}
.guide-footer-left {
  display: flex;
  flex-direction: column;
  text-align: left;
}
.guide-footer .shiny-input-container { margin-bottom: 0; width: auto; }
.guide-footer .checkbox { margin: 0; }
.guide-footer-left .checkbox label { font-size: 13.5px; color: var(--neutral-800); }

.guide-dontshow { margin-top: 1px; }
.guide-dontshow .checkbox label {
  font-size: 11.5px;
  color: var(--neutral-500);
}

/* OK button: muted grey while disabled, ECMN blue with white text once the
   acknowledgment checkbox enables it (server toggles the disabled attr). */
.guide-ok-btn {
  min-width: 84px;
  padding: 6px 22px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  background: var(--ecmn-blue, #00449F);
  color: #ffffff;
  border: 1px solid var(--ecmn-blue, #00449F);
}
.guide-ok-btn:hover,
.guide-ok-btn:focus {
  background: #00337A;
  border-color: #00337A;
  color: #ffffff;
}
.guide-ok-btn:disabled,
.guide-ok-btn[disabled] {
  background: var(--neutral-100);
  color: var(--neutral-500);
  border-color: var(--neutral-200);
  cursor: not-allowed;
  opacity: 1;
}

/* =============================================================================
   .ecmn-pill-* — small inline dot/pill for score bands
   ============================================================================= */

.ecmn-pill-asset,
.ecmn-pill-moderate,
.ecmn-pill-challenge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.4;
}

.ecmn-pill-asset::before,
.ecmn-pill-moderate::before,
.ecmn-pill-challenge::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.ecmn-pill-asset {
  background: rgba(78, 140, 92, 0.10);
  color: var(--score-asset);
}
.ecmn-pill-asset::before { background: var(--score-asset); }

.ecmn-pill-moderate {
  background: rgba(201, 154, 42, 0.10);
  color: var(--score-moderate);
}
.ecmn-pill-moderate::before { background: var(--score-moderate); }

.ecmn-pill-challenge {
  background: rgba(179, 63, 63, 0.10);
  color: var(--score-challenge);
}
.ecmn-pill-challenge::before { background: var(--score-challenge); }

/* =============================================================================
   .ecmn-modal — Help / Assessment Guide modal chrome
   ============================================================================= */

/* ── Bootstrap modal — pulled above the sticky topnav and centered ──
   The default modal drops in from the top with `transform: translate(0, -50px)`.
   With our sticky topnav at z-index 2000, the modal's title was disappearing
   under the topnav while the dialog animated. Two fixes:
     1. Raise the modal z-index above the topnav so nothing covers it.
     2. Use flex centering so the dialog appears in the viewport center
        and grow it with a scale animation instead of the from-top translate. */

.modal {
  z-index: 2100 !important;
}

.modal-backdrop {
  z-index: 2090 !important;
}

/* Shown state: flex-center the dialog in the viewport. Bootstrap 3
   uses `.in`, Bootstrap 5 uses `.show` — handle both. */
.modal.in,
.modal.show {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

.modal-dialog {
  margin: 0 auto !important;
  max-height: 90vh;
}

.modal-content {
  max-height: 90vh;
  overflow-y: auto;
}

/* Scale-from-center grow animation. Override Bootstrap's translate(0,-50px). */
.modal.fade .modal-dialog {
  transform: scale(0.92) !important;
  transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.3, 1),
              opacity   0.25s ease-out !important;
}

.modal.in .modal-dialog,
.modal.show .modal-dialog {
  transform: scale(1) !important;
}

.ecmn-modal .modal-dialog {
  max-width: 720px;
}

.ecmn-modal .modal-content {
  border: none;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card-hover);
  font-family: var(--font-body);
}

.ecmn-modal .modal-header {
  background: #ffffff;
  border-bottom: 1px solid var(--neutral-200);
  padding: var(--space-4) var(--space-6);
  border-top-left-radius: var(--radius-md);
  border-top-right-radius: var(--radius-md);
}

.ecmn-modal .modal-title {
  font-family: var(--font-display);
  color: var(--neutral-900);
  font-size: var(--text-xl);
  font-weight: 600;
}

.ecmn-modal .modal-body {
  padding: var(--space-6);
  color: var(--neutral-700);
  font-size: var(--text-base);
  line-height: 1.6;
  max-height: 65vh;
  overflow-y: auto;
}

.ecmn-modal .modal-body h3,
.ecmn-modal .modal-body h4 {
  margin-top: var(--space-6);
  margin-bottom: var(--space-2);
}

.ecmn-modal .modal-body dl dt {
  font-weight: 600;
  color: var(--neutral-900);
  margin-top: var(--space-3);
}

.ecmn-modal .modal-body dl dd {
  margin-left: 0;
  margin-bottom: var(--space-3);
  color: var(--neutral-700);
}

.ecmn-modal .modal-footer {
  border-top: 1px solid var(--neutral-200);
  padding: var(--space-4) var(--space-6);
}

/* Buttons inside ecmn-modal — token-driven primary button */
.ecmn-modal .btn-primary,
.ecmn-btn-primary {
  background: var(--ecmn-blue);
  border-color: var(--ecmn-blue);
  color: #ffffff;
  font-family: var(--font-body);
  font-weight: 500;
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-4);
}

.ecmn-modal .btn-primary:hover,
.ecmn-btn-primary:hover {
  background: var(--ecmn-blue-dark);
  border-color: var(--ecmn-blue-dark);
  color: #ffffff;
}

/* =============================================================================
   Forms / inputs (lightly themed; ECMN form classes inherited from custom.css)
   ============================================================================= */

.form-control:focus {
  border-color: var(--ecmn-blue);
  box-shadow: 0 0 0 3px var(--ecmn-blue-tint);
}

/* =============================================================================
   Responsive
   ============================================================================= */

@media (max-width: 1100px) {
  .ecmn-gallery { height: 480px; }
  .ecmn-gallery .cards { width: 12rem; height: 16rem; }
  .ecmn-gallery-card { width: 12rem; }
  .ecmn-gallery-card-icon { width: 80px; height: 80px; }
  .ecmn-gallery-card-title { font-size: var(--text-xl); }
  .ecmn-carousel-decor-frame { width: 160px; height: 240px; top: 220px; }
  /* Chevrons tuck back to the gallery edges (no room beyond at this width). */
  .ecmn-gallery-chevron.prev { left: 0; }
  .ecmn-gallery-chevron.next { right: 0; }
}

@media (max-width: 768px) {
  .ecmn-carousel-intro-title { font-size: var(--text-3xl); }
  .ecmn-gallery { height: 440px; }
  .ecmn-gallery .cards { width: 11rem; height: 15rem; }
  .ecmn-gallery-card { width: 11rem; }
  .ecmn-gallery-card-icon { width: 72px; height: 72px; }
  .ecmn-carousel-decor-frame { display: none; }
  .ecmn-gallery-chevron { width: 44px; height: 44px; }
  .ecmn-gallery-chevron svg { width: 18px; height: 18px; }
}

@media (max-width: 640px) {
  .ecmn-topnav { padding: var(--space-2) var(--space-3); }
  .ecmn-topnav-right { gap: var(--space-1); }
  .ecmn-topnav-link { font-size: var(--text-xs); padding: var(--space-1) var(--space-2); }
  .ecmn-page { padding: var(--space-4) var(--space-3); }
  .ecmn-carousel-home { padding: var(--space-6) var(--space-3); }
  .ecmn-gallery { height: 400px; }
  /* Footer stacks: brand above, navigation below, both left-aligned. */
  .ecmn-home-footer-inner { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  .ecmn-home-footer-nav { margin-left: -6px; }
}