/* =============================================================================
   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.

   Fonts (Inter + EB Garamond) and this stylesheet are loaded via the
   <link> tags in R/theme.R::ecmn_theme_head().
   ============================================================================= */

: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:     #00449F;
  --score-moderate:  #5B8AC9;
  --score-challenge: #C3D8F0;
  --score-challenge-ink: #2B4C6F;
  --score-moderate-ink:  #33608F;

  /* ── 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 two-tier navigation (echoes episcopalmn.org)
   Tier 1 (.ecmn-supernav): thin royal-blue strip of small right-aligned
   utility links. Tier 2 (.ecmn-mainnav): white bar, ECMN wordmark left,
   primary destinations right. Both tiers are inside the one sticky wrapper
   so ui_main.R's --ecmn-nav-h keeps measuring the full stack.
   ============================================================================= */

.ecmn-topnav {
  position: sticky;
  top: 0;
  z-index: 2000;       /* defended against absolute-positioned decor + carousel */
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(15,20,25,0.05);
}

/* ── Tier 1: super nav ──────────────────────────────────────── */
.ecmn-supernav {
  background: var(--ecmn-blue);
}

.ecmn-supernav-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-1);
  padding: 5px var(--space-8);
}

.ecmn-supernav-link {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.86);
  background: none;
  border: none;
  padding: 3px var(--space-3);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: color 0.12s ease, background 0.12s ease;
}

.ecmn-supernav-link:hover,
.ecmn-supernav-link:focus {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.14);
  text-decoration: none;
  outline: none;
}

.ecmn-supernav-sep {
  width: 1px;
  height: 14px;
  margin: 0 4px;
  background: rgba(255, 255, 255, 0.28);
}

.ecmn-supernav-link--signout { color: rgba(255, 255, 255, 0.72); }

/* ── Tier 2: main nav ───────────────────────────────────────── */
.ecmn-mainnav {
  background: #ffffff;
  border-bottom: 1px solid var(--neutral-200);
}

.ecmn-mainnav-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-3) var(--space-8);
}

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

.ecmn-mainnav-logo {
  height: 42px;          /* 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-mainnav-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-mainnav-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 2px;
}

.ecmn-mainnav-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-3);
  cursor: pointer;
  border-radius: var(--radius-sm);
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: color 0.12s ease, background 0.12s ease;
}

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

.ecmn-mainnav-link--active,
.ecmn-mainnav-link--active:hover {
  color: var(--ecmn-blue);
  box-shadow: inset 0 -2px 0 var(--ecmn-blue);
  border-radius: 0;
  background: none;
}

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

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

/* =============================================================================
   Two-column app shell + report switcher rail (Sprint 16)
   page_shell() wraps the switcher rail and the page body in .ecmn-shell-body.
   The rail column is `auto` (0-width when the server renders nothing, e.g. on
   non-report pages) and the body takes the rest, so ordinary pages are
   unaffected. On a report page with a congregation selected, the rail is a
   sticky left sidebar of sibling-report links.
   ============================================================================= */
.ecmn-shell-body {
  display: grid;
  grid-template-columns: auto 1fr;
  width: 100%;
}
/* width:100% forces the page to FILL its 1fr track. Without it, .ecmn-page's
   `margin: 0 auto` makes a grid item shrink to its content — which collapses
   the whole app on the map page, whose only in-flow content (the leaflet) is
   0-width because the map overlays are position:absolute. */
.ecmn-shell-body > .ecmn-page { min-width: 0; width: 100%; }

.ecmn-rsw-rail {
  position: sticky;
  top: var(--ecmn-nav-h, 64px);
  width: 216px;
  box-sizing: border-box;
  background: #ffffff;
  border-right: 1px solid var(--neutral-200);
  padding: var(--space-6) var(--space-4) var(--space-8);
  min-height: calc(100vh - var(--ecmn-nav-h, 64px));
}
.ecmn-rsw-railhead {
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-3);
  border-bottom: 1px solid var(--neutral-200);
}
.ecmn-rsw-eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-xs, 12px);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--neutral-500, #8A8A82);
}
.ecmn-rsw-name {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-top: var(--space-1);
}
.ecmn-rsw-icon { color: var(--ecmn-blue); flex-shrink: 0; }
.ecmn-rsw-nametext {
  font-family: var(--font-display);
  font-size: var(--text-md, 17px);
  font-weight: 600;
  color: var(--neutral-900);
  line-height: 1.2;
}
.ecmn-rsw-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.ecmn-rsw-item {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm, 6px);
  border-left: 3px solid transparent;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--neutral-700);
  cursor: pointer;
  user-select: none;
  transition: background 0.12s, color 0.12s;
}
.ecmn-rsw-item:hover,
.ecmn-rsw-item:focus {
  background: var(--ecmn-blue-tint);
  color: var(--ecmn-blue);
  outline: none;
}
.ecmn-rsw-item--active,
.ecmn-rsw-item--active:hover {
  background: var(--ecmn-blue);
  color: #ffffff;
  cursor: default;
}

/* Vitality / Viability group header in the rail — all-caps blue, echoing the
   snapshot's accordion group-rules. */
.ecmn-rsw-group {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ecmn-blue);
  padding: 12px 0 4px var(--space-1);
}
.ecmn-rsw-nav > .ecmn-rsw-group:first-child { padding-top: 2px; }

/* Breadcrumb doorstep at the top of a sibling report: "Snapshot › <report>". */
.ecmn-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-sm);
}
.ecmn-crumb--link {
  color: var(--ecmn-blue);
  cursor: pointer;
  text-decoration: underline dotted;
}
.ecmn-crumb--link:hover,
.ecmn-crumb--link:focus { color: var(--ecmn-blue-dark); outline: none; }
.ecmn-crumb-sep { color: var(--neutral-400); }
.ecmn-crumb--current { color: var(--neutral-700); font-weight: 600; }

/* Breadcrumb when it lives in the nav header (sibling report pages). */
.ecmn-mainnav-inner .ecmn-breadcrumb { margin: 0; font-size: var(--text-base); }
.ecmn-mainnav-inner .ecmn-crumb--current { font-weight: 700; color: var(--neutral-800); }

/* Vitality report deep-link support: land domain anchors below the sticky top
   nav; trailing space so the LAST domain can still reach the top; and an
   unlabeled back-to-top arrow (bottom-center) shown once scrolled past the header. */
.vr-section-header { scroll-margin-top: 96px; }
/* Mission is the first domain, directly under the table's column header, so land
   it a little lower than the others to keep the Leadership/Congregation header
   in view. */
#vr-domain-mission_strategy { scroll-margin-top: 145px; }
.vr-scroll-spacer  { height: 55vh; }
#vr-to-top {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%) translateY(8px);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--ecmn-blue);
  background: #ffffff;
  color: var(--ecmn-blue);
  box-shadow: 0 2px 8px rgba(15, 20, 25, 0.15);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 500;
}
#vr-to-top.show { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
#vr-to-top:hover,
#vr-to-top:focus { background: var(--ecmn-blue); color: #ffffff; outline: none; }

/* Muted row-selection highlight for DataTables — the default bright blue was too
   dark to read the cell data against (and read as "actionable" when it isn't).
   A light tint with dark text keeps every cell legible. */
table.dataTable tbody > tr.selected > td,
table.dataTable tbody > tr.selected > th {
  background-color: #e6edf7 !important;
  color: var(--neutral-900) !important;
  box-shadow: none !important;
}

/* The congregation picker moved to the rail (Sprint 16). In each report the old
   selector shared a fluidRow(col-6 | col-6) with the Download button. Hide the
   selector's WHOLE column (so there's no leftover 'ghost' gap) and let the
   Download column span the row, keeping the button in a stable right-aligned
   position no matter the selection state. */
/* Report toolbar: a flex row that pins the Download button to the right, with
   the (sidebar-relocated) congregation picker kept in the DOM but visually
   hidden and OUT OF FLOW — so the button holds a stable position and there's no
   leftover column 'ghost'. The button itself only renders once a congregation
   is selected (conditionalPanel in report_toolbar()). */
.ecmn-report-toolbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin: 4px 0 18px;
  position: relative;
  min-height: 34px;
}
/* When no Download button is rendered (no congregation selected — e.g. the
   diocesan snapshot landing), collapse the toolbar so it reserves no vertical
   space above the content. The hidden picker is out of flow, so an empty
   toolbar has no visible content to keep. */
.ecmn-report-toolbar:not(:has(.btn)) {
  min-height: 0;
  margin: 0;
}
.ecmn-report-picker-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  pointer-events: none;
}

/* On report pages (the rail is present) keep the content CENTERED within the
   space that remains after the rail — a slightly wider cap than the default so
   reports use more horizontal room without hugging the sidebar. */
.ecmn-shell-body:has(.ecmn-rsw-rail) > .ecmn-page {
  margin: 0 auto;
  max-width: 1400px;
}

/* Rail congregation picker + the no-selection hint. */
.ecmn-rsw-eyebrow { margin-bottom: var(--space-1); }
.ecmn-rsw-railhead .form-group,
.ecmn-rsw-railhead .selectize-control { margin-bottom: 0; }
.ecmn-rsw-railhead .selectize-input {
  font-size: var(--text-sm);
  padding: 6px 8px;
  border: 1px solid var(--neutral-200);
  box-shadow: none;
}
.ecmn-rsw-hint {
  font-size: var(--text-xs, 12px);
  color: var(--neutral-500, #8A8A82);
  margin: var(--space-2) 2px 0;
  line-height: 1.4;
}

/* Narrow screens: the rail collapses to a full-width horizontal strip above
   the page body instead of a left sidebar. */
@media (max-width: 860px) {
  .ecmn-shell-body { grid-template-columns: 1fr; }
  .ecmn-rsw-rail {
    position: static;
    width: auto;
    min-height: 0;
    border-right: none;
    border-bottom: 1px solid var(--neutral-200);
    padding: var(--space-3) var(--space-4);
  }
  .ecmn-rsw-railhead {
    border-bottom: none;
    padding-bottom: var(--space-2);
    margin-bottom: var(--space-2);
  }
  .ecmn-rsw-nav { flex-direction: row; flex-wrap: wrap; }
  .ecmn-rsw-item { border-left: none; }
}

/* =============================================================================
   .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: 480px;          /* room for the card + chevrons with air below */
  overflow: hidden;
  z-index: 1;
}

/* .cards height is kept EQUAL to a card's height (15rem width * 4/3 = 20rem)
   so a card's vertical CENTER lands exactly at `top` — the chevrons share that
   same `top` and line up with the card center. */
.ecmn-gallery .cards {
  position: absolute;
  width: 15rem;
  height: 20rem;
  top: 46%;
  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: 15rem;
  aspect-ratio: 3 / 4;   /* calmer portrait than the old 9/16 */
  border-radius: var(--radius-lg);
  cursor: pointer;
  box-shadow: 0 12px 32px rgba(15, 20, 25, 0.13);  /* single soft lift */
  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: -56px) stay well inside the page edge instead of
   leaking and producing horizontal overflow. */
.ecmn-carousel-frame {
  position: relative;
  width: 100%;
  /* Wide enough to clear the outermost (2-steps-out) cards, whose visual edges
     sit ~±470px from center — 820px clipped them at ±410px — while staying snug
     so the far loop cards don't peek. Bounded by .ecmn-carousel-home (max-width
     1120px minus padding) so it never forces page overflow. */
  max-width: 960px;
  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: 46%;                        /* aligned to the card vertical 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 so they sit clear of the
   (now fully-visible) outer cards without leaking off-page. */
.ecmn-gallery-chevron.prev { left: -56px; }
.ecmn-gallery-chevron.next { right: -56px; }

.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: 1120px;
  margin: 0 auto;
  padding: var(--space-12) 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-footer {
  position: relative;
  z-index: 1;
}

.ecmn-carousel-intro {
  text-align: center;
  margin-bottom: var(--space-6);
  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-3xl);
  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);
}

/* =============================================================================
   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 15px;   /* 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); color: #1F3A5F; }

.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). */
/* Wider dialog (shorter overall — the measure clauses wrap onto fewer lines)
   and a capped body height so the acknowledgment footer stays in view without
   scrolling down to it. */
.modal-dialog:has(.guide-body) { max-width: 900px; }
.modal-body:has(.guide-body) { max-height: 80vh; overflow-y: auto; padding-bottom: 8px; }
/* The page title is gone, so the first line shouldn't carry a top rule. */
.guide-body > .guide-intro:first-child { border-top: none; padding-top: 0; }
.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;
}

/* =============================================================================
   About modal (.ecmn-about) — a landscape, two-panel dialog sized to fit
   WITHOUT scrolling on common screens: a royal-blue brand panel carrying the
   ECMN cross mark beside the statement and a compact credits/version strip.
   ============================================================================= */

.modal-dialog:has(.ecmn-about) { max-width: 960px; }
/* .ecmn-about paints its own surfaces — strip the default modal chrome. */
.modal-content:has(.ecmn-about) {
  border: none;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.modal-body:has(.ecmn-about) { padding: 0; overflow: visible; }

.ecmn-about {
  position: relative;
  display: grid;
  grid-template-columns: 300px 1fr;
  min-height: 620px;
  font-family: var(--font-body);
  color: var(--neutral-700);
}

.ecmn-about-close {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 2;
  background: transparent;
  border: none;
  font-size: 26px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  padding: 0 6px;
  border-radius: var(--radius-sm);
  transition: color 0.12s ease, background 0.12s ease;
}
.ecmn-about-close:hover,
.ecmn-about-close:focus {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.18);
  outline: none;
}

/* Blue brand panel with the full ECMN logo, centered. */
.ecmn-about-brand {
  background: linear-gradient(160deg, var(--ecmn-blue) 0%, var(--ecmn-blue-dark) 100%);
  color: #ffffff;
  padding: var(--space-8) var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-4);
}
.ecmn-about-logo {
  width: 200px;
  max-width: 82%;
  height: auto;
  display: block;
  /* The ECMN logo is blue+gold; render it white on the blue panel to match
     ECMN's own footer treatment (white lockup on royal blue). */
  filter: brightness(0) invert(1);
}
.ecmn-about-brand-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
  line-height: 1.1;
  color: rgba(255, 255, 255, 0.92);
}

/* Statement + meta. */
.ecmn-about-body {
  padding: var(--space-8) var(--space-8) var(--space-6);
}
.ecmn-about-body p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--neutral-700);
  margin: 0 0 var(--space-4);
}
.ecmn-about-lede {
  font-family: var(--font-display);
  font-size: 23px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  color: var(--neutral-900) !important;
}
.ecmn-about-body p:last-of-type { margin-bottom: 0; }

.ecmn-about-meta {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--neutral-200);
}
.ecmn-about-credit {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--neutral-500);
  margin-bottom: var(--space-3);
}
.ecmn-about-credit strong { color: var(--neutral-700); font-weight: 600; }
.ecmn-about-meta-row {
  display: flex;
  gap: var(--space-8);
  flex-wrap: wrap;
}
.ecmn-about-meta-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.ecmn-about-meta-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--neutral-500);
}
.ecmn-about-meta-value {
  font-size: 13px;
  font-weight: 500;
  color: var(--neutral-700);
  font-variant-numeric: tabular-nums;
}

/* Narrow screens: the brand panel becomes a top strip. */
@media (max-width: 620px) {
  .ecmn-about { grid-template-columns: 1fr; min-height: auto; }
  .ecmn-about-brand {
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: var(--space-4);
    padding: var(--space-6);
  }
  .ecmn-about-logo { width: 150px; }
  .ecmn-about-body { padding: var(--space-6); }
}

/* =============================================================================
   .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(0, 68, 159, 0.08);
  color: var(--score-asset);
}
.ecmn-pill-asset::before { background: var(--score-asset); }

.ecmn-pill-moderate {
  background: rgba(91, 138, 201, 0.12);
  color: var(--score-moderate-ink);
}
.ecmn-pill-moderate::before { background: var(--score-moderate); }

.ecmn-pill-challenge {
  background: rgba(0, 68, 159, 0.06);
  color: var(--score-challenge-ink);
}
.ecmn-pill-challenge::before { background: var(--score-challenge); }

/* =============================================================================
   Shared modal chrome (About / Assessment Guide / FAQ)
   ============================================================================= */

/* ── 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;
}

/* Token-driven primary button (used by report hub, modals, in-app CTAs). */
.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-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
   ============================================================================= */

/* Card widths are kept divisible so .cards height (width * 4/3) stays exact
   and a card's vertical center lines up with the chevrons.
   Threshold raised to 1160px so the wider 1020px frame + outward chevrons only
   apply where the viewport has room for them; narrower screens tuck back in. */
@media (max-width: 1160px) {
  .ecmn-mainnav-inner,
  .ecmn-supernav-inner { padding-left: var(--space-6); padding-right: var(--space-6); }
  .ecmn-gallery { height: 460px; }
  .ecmn-gallery .cards { width: 13.5rem; height: 18rem; }
  .ecmn-gallery-card { width: 13.5rem; }
  .ecmn-gallery-card-icon { width: 84px; height: 84px; }
  .ecmn-gallery-card-title { font-size: var(--text-xl); }
  /* 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-gallery { height: 420px; }
  .ecmn-gallery .cards { width: 12rem; height: 16rem; }
  .ecmn-gallery-card { width: 12rem; }
  .ecmn-gallery-card-icon { width: 72px; height: 72px; }
  .ecmn-gallery-chevron { width: 44px; height: 44px; }
  .ecmn-gallery-chevron svg { width: 18px; height: 18px; }
}

@media (max-width: 640px) {
  .ecmn-supernav-inner { padding: 4px var(--space-3); }
  .ecmn-mainnav-inner {
    padding: var(--space-2) var(--space-3);
    gap: var(--space-2);
    flex-wrap: wrap;
  }
  .ecmn-mainnav-link { font-size: var(--text-xs); padding: var(--space-1) var(--space-2); }
  .ecmn-supernav-link { font-size: 11.5px; padding: 3px var(--space-2); }
  .ecmn-carousel-intro-title { font-size: var(--text-2xl); }
  .ecmn-page { padding: var(--space-4) var(--space-3); }
  .ecmn-carousel-home { padding: var(--space-8) var(--space-3) var(--space-6); }
  .ecmn-gallery { height: 380px; }
  /* 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; }
}