/* MKE Mental Health, version 2. Ellie brand palette on the Legacy platform structure.
   Brand Standards Manual p.29 (core) + p.51 (duotone). See docs/DESIGN.md section 7. */

:root {
  /* Ellie palette */
  --navy: #245970;
  --primary-dark: #1a4357;
  --teal-deep: #327d9b;
  --teal: #0fe0d9;
  --mint: #a9fff8;
  --mint-soft: #e8fffd;
  --coral: #ff6352;
  --coral-dark: #e8513f;
  --green: #ced92b;
  --purple: #cc61c7;
  --ink: #364952;
  --muted: #5e7178;
  --line: #cfe6e3;
  --white: #ffffff;
  /* Platform names kept working: every structural rule below still reads these */
  --plum: var(--navy);
  --plum-dark: var(--primary-dark);
  --plum-light: var(--teal-deep);
  --cream: #ffffff;
  --sand: var(--mint-soft);
  --ink-soft: var(--muted);
  --green-soft: var(--mint-soft);
  --sage: var(--teal);
  --blue: var(--teal-deep);
  --blue-soft: var(--mint-soft);
  --amber: var(--navy);
  --amber-soft: var(--mint-soft);
  /* Focus ring: navy on light surfaces, mint on dark ones (set per dark surface below) */
  --focus: var(--navy);
  --text-on-dark: #cdeae6;
  --radius: 14px;
  --shadow: 0 2px 14px rgba(36, 89, 112, 0.08);
  --shadow-lg: 0 8px 30px rgba(36, 89, 112, 0.14);
  --font-display: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
  font-size: 18px;
}

img { max-width: 100%; display: block; }

a { color: var(--plum-light); }

h1, h2, h3, .display { font-family: var(--font-display); font-weight: 600; line-height: 1.15; letter-spacing: -.01em; color: var(--plum-dark); }

.container { max-width: 1120px; margin: 0 auto; padding: 0 24px; }


/* ---------- Header / nav ---------- */
header.site-header {
  background: var(--white);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 50;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  max-width: 1120px;
  margin: 0 auto;
}
/* v2/v3 six-group nav needs a wider bar than the 1120 content column */

.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; flex: 0 0 auto; min-width: 0; }
/* ---------- v3 two-row header: brand lockup row + full-width sticky nav row ---------- */
.brand-wordmark { height: 72px; width: auto; display: block; flex: 0 0 auto; }
.brand-tagline {
  font-family: var(--font-body); font-size: 18px; font-weight: 500; color: var(--ink-soft);
  letter-spacing: 0.01em; white-space: nowrap;
  /* the wordmark's tall L-loop puts the readable word ~5.5px below the image's
     geometric centre; nudge the tagline to the word's optical centre line */
  transform: translateY(6px);
}
/* brand row shares the nav row's width and left edge so the lockup reads as one unit */
.site-header:has(+ .nav-bar) .header-inner { max-width: 1200px; padding: 10px 24px 12px; justify-content: center; }
.site-header:has(+ .nav-bar) .brand { gap: 16px; }
.nav-bar {
  position: sticky; top: 0; z-index: 50;
  background: var(--white); border-bottom: 1px solid var(--line); box-shadow: 0 1px 8px rgba(36, 89, 112,0.05);
}
.nav-bar > .nav-v2 { max-width: 1200px; margin: 0 auto; padding: 0 24px; justify-content: space-between; }
/* the brand row scrolls away; only the nav bar follows you down the page */
.site-header:has(+ .nav-bar) { position: static; }
.footer-brand { margin-bottom: 34px; max-width: 520px; }
.footer-brand p { font-size: 14px; opacity: 0.9; }
.footer-wordmark { height: 56px; width: auto; max-width: 100%; display: block; margin-bottom: 10px; }
.brand-mark {
  width: 42px; height: 42px; border-radius: 12px;
  background: linear-gradient(135deg, var(--plum) 0%, var(--plum-light) 100%);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-family: var(--font-display); font-size: 21px; font-weight: 700;
}
.brand-name { font-family: var(--font-display); font-size: 17px; color: var(--plum-dark); font-weight: 600; line-height: 1.2; }
.brand-name small { display: block; font-family: var(--font-body); font-size: 11px; color: var(--ink-soft); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; }

nav.main-nav { display: flex; align-items: center; gap: 26px; }
nav.main-nav a {
  text-decoration: none; color: var(--ink-soft); font-size: 14.5px; font-weight: 500;
  padding: 6px 2px; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s;
}
nav.main-nav a:hover { color: var(--plum); }
nav.main-nav a.active { color: var(--plum); border-bottom-color: var(--coral); }
.nav-cta {
  background: var(--coral); color: #fff !important; padding: 9px 18px !important;
  border-radius: 999px; font-weight: 700 !important; font-size: 19px !important;
  min-height: 44px; display: inline-flex; align-items: center;
  border-bottom: none !important; transition: background .15s;
}
.nav-cta:hover { background: var(--coral-dark); }
.nav-portal {
  border: 1.5px solid var(--plum-light) !important; border-radius: 999px;
  padding: 8px 16px !important; color: var(--plum) !important; border-bottom-width: 1.5px !important;
  min-height: 44px; display: inline-flex; align-items: center;
}
/* Featured nav item: Resource Hub is one of the site's main attractions, so it
   carries the same outlined-pill affordance as the Caregiver Portal rather than
   sitting flat among the other section labels. It KEEPS its dropdown -- this is a
   prominence change, not a structural one, so the six-group nav the client agreed
   to in the navigation recommendation is untouched. */
.nav-feature {
  border: 1.5px solid var(--plum-light) !important; border-radius: 999px;
  padding: 8px 16px !important; color: var(--plum) !important;
  border-bottom-width: 1.5px !important; font-weight: 600;
}
.nav-feature.active { background: var(--sand); }
.nav-v2 .nav-item.has-drop > .nav-feature + .drop-toggle { margin-left: 2px; }

.nav-toggle { display: none; background: none; border: none; font-size: 26px; color: var(--plum); cursor: pointer; min-width: 44px; min-height: 44px; }

/* ---------- Hero ---------- */
.hero {
  background: linear-gradient(160deg, var(--primary-dark) 0%, var(--navy) 55%, var(--teal-deep) 100%);
  color: #fff;
  padding: 84px 0 96px;
  position: relative;
  overflow: hidden;
  --focus: var(--mint);
}
/* Ellie rounded graphic-shape motif (Brand Standards p.46), from v1: decorative, never in the way */
.hero::after {
  content: '';
  position: absolute; right: -90px; top: -70px;
  width: 300px; height: 300px;
  border-radius: 42% 58% 57% 43% / 45% 45% 55% 55%;
  background: radial-gradient(circle at 35% 35%, var(--teal), var(--mint));
  opacity: .22; pointer-events: none; z-index: 0;
}
.hero::before {
  content: '';
  position: absolute; left: -140px; bottom: -160px;
  width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle, rgba(169, 255, 248, 0.14) 0%, transparent 70%);
}
.hero .container { position: relative; z-index: 1; }
/* Primary CTA stays coral on the navy hero; white text at 19px/700 holds AA (large-text) */
.hero .btn-coral { background: var(--coral); color: #fff; }
.hero .btn-coral:hover { background: var(--coral-dark); }
.hero h1 { color: #fff; font-size: clamp(34px, 5vw, 54px); max-width: 640px; margin-bottom: 20px; }
.hero p.lede { font-size: 19px; max-width: 560px; color: var(--text-on-dark); margin-bottom: 34px; }
.hero .btn-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.btn-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

/* ---------- Hero video (Shanelle's community footage, 2026-08) ----------
   Source is 720x1280 PORTRAIT phone video. A full-bleed landscape background would
   crop to a narrow centre band AND upscale ~2.7x on desktop, so the treatment is
   resolution-honest instead:
     - phones  : the video is the background, which is its native orientation
     - desktop : the video is inset to the right at a size close to native, with the
                 existing gradient still carrying the left side behind the copy
   The gradient in .hero remains the base layer, so if the video fails to load or the
   user has reduced-motion on, the hero looks exactly as it did before. */
.hero.has-video .hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 30%;
  z-index: 0;
  /* Jacob 2026-08-21: lighter, i.e. MORE of the footage visible. The darkening
     layer is what got halved -- see .hero-scrim -- not the video. */
  opacity: 0.62;
}
.hero.has-video .hero-scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg,
    rgba(26, 67, 87, 0.78) 0%,
    rgba(36, 89, 112, 0.52) 42%,
    rgba(36, 89, 112, 0.30) 72%,
    rgba(36, 89, 112, 0.22) 100%);
}
.hero.has-video .hero-content { position: relative; z-index: 2; }
/* keep the decorative blobs above the video but below the copy */
.hero.has-video::before, .hero.has-video::after { z-index: 1; }

@media (min-width: 900px) {
  /* Centred behind the copy at every width -- same treatment as mobile, per Jacob
     2026-08-21. The earlier right-inset panel protected sharpness (720px source,
     no upscale) but pushed the footage off to one side of a wide screen; behind a
     scrim at low opacity the softness is not visible and the centred read is better. */
  .hero.has-video .hero-video {
    inset: 0;
    width: 100%;
    opacity: 0.58;
    /* 50%, not the usual "upper third": on a wide screen the cover-crop shows only
       ~19% of this portrait source, and at 32% that band landed on ceiling, wall and
       window blinds with the faces cut off below it. Verified by extracting the exact
       visible rows at 1920px and looking at them. 50% centres the band on the group. */
    object-position: center 50%;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .hero.has-video .hero-scrim {
    /* symmetric wash so the centre stays legible without a directional gradient */
    background:
      radial-gradient(ellipse 120% 90% at 50% 45%, rgba(26, 67, 87, 0.34) 0%, rgba(26, 67, 87, 0.52) 70%, rgba(26, 67, 87, 0.72) 100%);
  }
  .hero.has-video h1, .hero.has-video p.lede { max-width: 720px; }
}

/* Respect reduced-motion: show the poster frame, never an autoplaying loop. */
@media (prefers-reduced-motion: reduce) {
  .hero.has-video .hero-video { display: none; }
}

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; font-weight: 600; font-size: 16px; line-height: 1.25;
  min-height: 48px; padding: 12px 26px; border-radius: 999px;
  border: 1.5px solid transparent; cursor: pointer; font-family: var(--font-body);
  transition: transform .12s, background .15s, color .15s, border-color .15s, box-shadow .15s;
  box-sizing: border-box; vertical-align: middle;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
/* Coral CTAs carry white text - kept >=18px/bold so AA holds at this contrast (WCAG large-text exception) */
.btn-coral {
  background: var(--coral); color: #fff; font-size: 19px; font-weight: 700;
  padding: 10px 26px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}
.btn-coral:hover {
  background: var(--coral-dark);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
}
.btn-coral:active {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14);
}
.btn-plum {
  background: var(--plum); color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}
.btn-plum:hover {
  background: var(--plum-dark);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
}
.btn-plum:active {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14);
}
.btn-outline-light {
  border: 1.5px solid rgba(255, 255, 255, 0.6); color: #fff; background: transparent;
}
.btn-outline-light:hover,
.btn-outline-light:focus,
.btn-outline-light:focus-visible {
  background: #fff; color: var(--plum); border-color: #fff;
}
.btn-outline {
  border: 1.5px solid var(--plum-light); color: var(--plum); background: transparent;
}
.btn-outline:hover,
.btn-outline:focus,
.btn-outline:focus-visible {
  background: var(--plum); color: #fff; border-color: var(--plum);
}
.btn:focus-visible, a:focus-visible, button:focus-visible { outline: 2.5px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.btn-sm, .btn-coral.btn-sm {
  padding: 8px 18px; font-size: 13.5px; font-weight: 600; min-height: 36px; line-height: 1.25;
}
/* Phones: 44px tap-target floor for the small buttons (portal Sign out, card
   CTAs). .btn already centres vertically via inline-flex; desktop keeps 36px. */
@media (max-width: 768px) {
  .btn-sm, .btn-coral.btn-sm { min-height: 44px; }
}

/* ---------- Sections ---------- */
section { padding: 64px 0; }
.section-head { max-width: 620px; margin-bottom: 40px; }
.section-head h2 { font-size: clamp(26px, 3.4vw, 36px); margin-bottom: 12px; }
.section-head h2::after {
  content: '';
  display: block; width: 44px; height: 3.5px; border-radius: 999px;
  margin-top: 14px;
  background: linear-gradient(90deg, var(--teal) 0%, var(--navy) 100%);
}
.section-head p { color: var(--ink-soft); font-size: 16.5px; }
.eyebrow {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--coral-dark); margin-bottom: 10px;
}

/* ---------- Cards ---------- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; }
.card {
  background: var(--white); border-radius: var(--radius); padding: 28px;
  box-shadow: 0 4px 16px rgba(36, 89, 112, 0.09); border: 1px solid var(--line);
  border-top: 3px solid transparent;
  transition: transform .15s, box-shadow .15s, border-color .15s;
  position: relative;
}
.card:hover, .card:focus-within {
  transform: translateY(-3px); box-shadow: var(--shadow-lg); border-top-color: var(--sage);
}
.card .icon {
  width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 22px; margin-bottom: 16px;
  background: linear-gradient(145deg, var(--green-soft) 0%, var(--sage) 100%);
  border: 1px solid var(--sage);
}
.card h3 { font-size: 20px; margin-bottom: 10px; }
.card p { color: var(--ink-soft); font-size: 16px; margin-bottom: 14px; }
.card a.more { font-weight: 600; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; color: var(--coral-dark); }
.card:hover a.more, .card:focus-within a.more { color: var(--coral); }

/* Whole-tile click target (agreed with Shanelle 2026-08-21).
   The small "more" link was the only hit area; the tile now carries it. This is as
   much an accessibility change as a usability one - a large target is easier for an
   older or unsteady hand than a 14px link.
   The ::after overlay is scoped to real destinations: cards whose only link is a
   placeholder (href="#", awaiting a client URL) are excluded, because a tile that
   invites a click and then does nothing is worse than a plain tile. */
.card:has(> a.more:not([href="#"]):not([href=""])) {
  cursor: pointer; border-top-color: var(--line);
}
.card > a.more::after {
  content: ''; position: absolute; inset: 0;
  border-radius: inherit; z-index: 1;
}
.card > a.more[href="#"]::after,
.card > a.more[href=""]::after { content: none; }
/* The anchor itself must stay position:static. If it is positioned, it becomes the
   containing block for its own ::after and the overlay collapses to the width of the
   link text instead of covering the tile. */
/* Keyboard users get the same affordance the mouse hover gives. */
.card:focus-within a.more { outline: 2px solid var(--coral-dark); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .btn, .card { transition: none; transform: none !important; }
  .btn:hover, .btn:active, .card:hover, .card:focus-within { transform: none !important; }
}

/* ---------- Stats band ---------- */
.stats-band { background: var(--plum-dark); --focus: var(--mint); }
.stats-band .eyebrow { color: #fff; }
.stats-band h2 { color: #fff; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 20px; text-align: center; }
.stat .num { font-family: var(--font-display); font-size: 42px; font-weight: 700; color: var(--teal); }
.stat .label { font-size: 15px; color: var(--text-on-dark); font-weight: 500; }

.quote-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; }
.quote-card {
  background: var(--white); border-radius: var(--radius); padding: 28px;
  box-shadow: var(--shadow); border-left: 4px solid var(--plum);
}
.quote-card blockquote {
  font-family: var(--font-display); font-size: 20px; line-height: 1.35;
  color: var(--ink); margin-bottom: 0;
}
.band-teal {
  background: var(--plum-dark); color: #fff; text-align: center; --focus: var(--mint);
}
.band-teal h2 { color: #fff; }
.band-teal p { color: var(--text-on-dark); max-width: 640px; margin-left: auto; margin-right: auto; }
.band-teal .eyebrow { color: #fff; }

/* ---------- Event cards ---------- */
.event-card { display: flex; gap: 20px; align-items: flex-start; }
.event-date {
  flex-shrink: 0; width: 64px; text-align: center; background: var(--plum);
  color: #fff; border-radius: 12px; padding: 10px 6px;
}
.event-date .month { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; opacity: .85; }
.event-date .day { font-family: var(--font-display); font-size: 26px; font-weight: 700; line-height: 1.1; }
.event-meta { font-size: 13px; color: var(--ink-soft); margin-bottom: 8px; }
.badge {
  display: inline-block; font-size: 11.5px; font-weight: 600; padding: 3px 10px;
  border-radius: 999px; letter-spacing: .02em;
}
.badge-green { background: var(--green-soft); color: var(--green); }
.badge-amber { background: var(--amber-soft); color: var(--coral-dark); }
.badge-blue { background: var(--blue-soft); color: var(--blue); }
.badge-plum { background: var(--mint-soft); color: var(--plum); }

/* ---------- Resource hub ---------- */
.filter-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 30px; }
.filter-chip {
  border: 1.5px solid var(--line); background: var(--white); color: var(--ink-soft);
  padding: 8px 18px; border-radius: 999px; font-size: 13.5px; font-weight: 600;
  cursor: pointer; transition: all .15s; font-family: var(--font-body);
}
.filter-chip:hover { border-color: var(--plum-light); color: var(--plum); }
.filter-chip.active { background: var(--plum); border-color: var(--plum); color: #fff; }
.resource-search {
  width: 100%; max-width: 420px; padding: 12px 18px; border-radius: 999px;
  border: 1.5px solid var(--line); font-size: 15px; margin-bottom: 18px; font-family: var(--font-body);
  background: var(--white);
}
.resource-search:focus { outline: 2px solid var(--plum-light); border-color: var(--plum-light); }
.resource-tag { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--coral-dark); margin-bottom: 8px; display: block; }

/* ---------- Split / feature rows ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.split .visual {
  background: linear-gradient(150deg, var(--sand), #fff);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow);
}

/* ---------- Portal / app UI mock ---------- */
.app-shell { background: var(--mint-soft); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
.app-topbar {
  background: var(--plum-dark); color: #fff; --focus: var(--mint); padding: 12px 20px;
  display: flex; align-items: center; justify-content: space-between; font-size: 13.5px;
}
.app-topbar .dot { display: inline-block; width: 8px; height: 8px; background: #7ee2a8; border-radius: 50%; margin-right: 7px; }
.app-body { padding: 24px; }
.panel { background: #fff; border-radius: 12px; padding: 20px; border: 1px solid var(--line); margin-bottom: 16px; }
.panel h4 { font-size: 15px; color: var(--plum-dark); margin-bottom: 12px; font-family: var(--font-body); font-weight: 700; }
.kv-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: 14px; }
.kv-row:last-child { border-bottom: none; }
.kv-row .k { color: var(--ink-soft); }
.kv-row .v { font-weight: 600; }

.timeline-item { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--line); font-size: 13.5px; }
.timeline-item:last-child { border-bottom: none; }
.timeline-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--coral); margin-top: 6px; flex-shrink: 0; }
.timeline-item .when { color: var(--ink-soft); font-size: 12px; }

/* ---------- Login mock ---------- */
.login-wrap { max-width: 430px; margin: 0 auto; }
.login-card { background: #fff; border-radius: var(--radius); padding: 38px; box-shadow: var(--shadow-lg); border: 1px solid var(--line); }
.login-card h2 { font-size: 26px; margin-bottom: 6px; }
.login-card .sub { color: var(--ink-soft); font-size: 14px; margin-bottom: 24px; }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--ink); }
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 10px;
  font-size: 15px; font-family: var(--font-body); background: #fff;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--plum-light); border-color: var(--plum-light); }
.hint { font-size: 12px; color: var(--ink-soft); margin-top: 6px; }

/* ---------- Chat agent mock ---------- */
.chat-shell { background: #fff; border-radius: 12px; border: 1px solid var(--line); overflow: hidden; }
.chat-head { background: var(--plum); color: #fff; padding: 12px 18px; font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 9px; }
.chat-head .bot-dot { width: 9px; height: 9px; background: #7ee2a8; border-radius: 50%; }
.chat-body { padding: 18px; display: flex; flex-direction: column; gap: 12px; max-height: 460px; overflow-y: auto; }
.msg { max-width: 82%; padding: 11px 15px; border-radius: 14px; font-size: 13.8px; line-height: 1.5; }
.msg.user { align-self: flex-end; background: var(--plum); color: #fff; border-bottom-right-radius: 4px; }
.msg.bot { align-self: flex-start; background: var(--sand); color: var(--ink); border-bottom-left-radius: 4px; }
.msg.bot .preview {
  background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 12px; margin-top: 10px; font-size: 13px;
}
.msg.bot .preview .p-title { font-weight: 700; color: var(--plum-dark); margin-bottom: 4px; }
.msg .confirm-row { display: flex; gap: 8px; margin-top: 10px; }
.chip-btn {
  font-size: 12.5px; font-weight: 600; padding: 6px 14px; border-radius: 999px; border: none; cursor: pointer;
  font-family: var(--font-body);
}
.chip-confirm { background: var(--green); color: #fff; }
.chip-cancel { background: #eee; color: var(--ink-soft); }
.chat-input-row { display: flex; border-top: 1px solid var(--line); }
.chat-input-row input { flex: 1; border: none; padding: 14px 18px; font-size: 14px; font-family: var(--font-body); }
.chat-input-row input:focus { outline: none; background: var(--mint-soft); }
.chat-input-row button { background: var(--coral); border: none; color: #fff; padding: 0 22px; font-weight: 700; cursor: pointer; }

/* ---------- Tables (staff console) ---------- */
table.data { width: 100%; border-collapse: collapse; font-size: 13.8px; background: #fff; }
table.data th {
  text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-soft); padding: 10px 14px; border-bottom: 2px solid var(--line); font-weight: 700;
}
table.data td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.data tr:hover td { background: var(--mint-soft); }

/* ---------- Footer ---------- */
footer {
  background: var(--plum-dark); color: var(--text-on-dark); padding: 54px 0 30px; margin-top: 40px; font-size: 14px; --focus: var(--mint);
}
footer h4 { color: #fff; font-size: 15px; margin-bottom: 14px; font-family: var(--font-body); }
footer a { color: var(--text-on-dark); text-decoration: none; display: block; padding: 3px 0; }
footer a:hover { color: #fff; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 36px; margin-bottom: 36px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.12); padding-top: 22px; font-size: 12.5px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }

/* ---------- Modal ---------- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(26,67,87,0.6); z-index: 100;
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.modal-overlay.open { display: flex; }
.modal {
  background: #fff; border-radius: var(--radius); max-width: 520px; width: 100%;
  padding: 34px; box-shadow: var(--shadow-lg); max-height: 90vh; overflow-y: auto;
}
.modal h3 { font-size: 23px; margin-bottom: 6px; }
.modal .sub { color: var(--ink-soft); font-size: 14px; margin-bottom: 22px; }
.modal-close { float: right; background: none; border: none; font-size: 22px; cursor: pointer; color: var(--ink-soft); }
.success-note {
  background: var(--green-soft); color: var(--green); border-radius: 10px; padding: 14px 18px;
  font-size: 14px; font-weight: 600; display: none; margin-top: 6px;
}
.error-note {
  background: #fff2ef; color: var(--coral-dark); border-radius: 10px; padding: 14px 18px;
  font-size: 14px; font-weight: 600; display: none; margin-top: 8px;
}
.routing-note { font-size: 12.5px; color: var(--ink-soft); margin-top: 12px; display: none; }
.privacy-line { font-size: 12.5px; color: var(--ink-soft); line-height: 1.45; margin: 4px 0 14px; }

/* ---------- Utility ---------- */
.mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; }
.mb-8 { margin-bottom: 8px; } .mb-16 { margin-bottom: 16px; } .mb-24 { margin-bottom: 24px; }
.text-center { text-align: center; }
.muted { color: var(--ink-soft); }
.small { font-size: 13px; }

@media (max-width: 860px) {
  nav.main-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: #fff; flex-direction: column; padding: 18px 24px; gap: 14px;
    border-bottom: 1px solid var(--line); box-shadow: var(--shadow);
  }
  nav.main-nav.open { display: flex; }
  .nav-toggle { display: block; }
  .split { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* ---------- v2 navigation (slice 12): click-open one-level dropdowns ---------- */
.nav-v2 { display: flex; align-items: center; gap: 2px; flex-wrap: nowrap; }
.nav-v2 .nav-item { position: relative; display: flex; align-items: center; white-space: nowrap; }
.nav-v2 .nav-item > a { padding: 10px 2px 10px 5px; font-size: 16px; white-space: nowrap; }
.nav-v2 .drop-toggle {
  background: none; border: none; cursor: pointer; font-size: 16px; line-height: 1;
  color: var(--plum); opacity: 0.75; padding: 10px 3px 10px 0; min-height: 44px; min-width: 17px; font-size: 14px;
}
.nav-v2 .drop-toggle:hover { opacity: 1; }
.nav-v2 .drop-toggle:hover, .nav-v2 .drop-toggle[aria-expanded="true"] { color: var(--plum); }
.nav-v2 .drop {
  display: none; position: absolute; top: 100%; left: 0; z-index: 60;
  background: var(--white); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow-lg); padding: 10px; min-width: 260px;
}
.nav-v2 .nav-item.open .drop { display: block; }
.nav-v2 .drop a {
  display: block; padding: 12px 14px; font-size: 18px; border-radius: 8px;
  border-bottom: none; min-height: 44px;
}
.nav-v2 .drop a:hover { background: var(--sand); color: var(--plum); }

/* Landing-page card grids reuse .card-grid/.card. Phase-2 stub badge: */
.badge-phase2 {
  display: inline-block; font-size: 12.5px; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--ink-soft); background: var(--sand);
  border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; margin-top: 10px;
}

/* Footer sitemap */
.footer-sitemap { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 24px; margin-bottom: 28px; }
.footer-sitemap h4 { margin-bottom: 8px; }
.footer-sitemap a { display: block; padding: 4px 0; font-size: 14.5px; }

/* v2 collapses to the hamburger earlier than v1 (six items need the room), and
   dropdowns become an always-expanded accordion list under it */
@media (max-width: 1150px) {
  .site-header:has(+ .nav-bar) { position: sticky; top: 0; }
  .site-header:has(+ .nav-bar) .header-inner { justify-content: space-between; padding: 14px 24px; }
  .brand { flex-direction: column; align-items: flex-start; gap: 1px; }
  .brand-wordmark { height: 44px; }
  .brand-tagline { font-size: 9.5px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; }
  .nav-bar { position: static; border-bottom: none; box-shadow: none; }
  .nav-bar > .nav-v2 { padding: 0; }
  nav.main-nav.nav-v2 {
    /* REGRESSION FIX 2026-08-21. The v1 rule above sets `position: absolute; top: 100%`,
       written when .main-nav lived INSIDE the sticky .site-header, so 100% meant "just
       below the header". The two-row header moved the nav into .nav-bar, which is
       position: static at this width -- so 100% began resolving against a full-height
       containing block and the open menu rendered at y=812 on a 812px viewport: entirely
       below the fold. The hamburger and the chevrons both worked; the menu was simply
       off-screen. Put it back in normal flow, directly under the header. */
    position: static; top: auto; left: auto; right: auto;
    display: none; flex-direction: column; padding: 12px 24px 18px; gap: 0;
    background: #fff; border-bottom: 1px solid var(--line); box-shadow: var(--shadow);
  }
  nav.main-nav.nav-v2.open { display: flex; }
  .site-header:has(.nav-v2) .nav-toggle { display: block; }
  .nav-v2 { align-items: stretch; gap: 0; }
  /* Each section is one row: label link (navigates) + big chevron (expands). Sub-links
     stay COLLAPSED until tapped, so the open menu is 8 rows, not 3 screens of links. */
  .nav-v2 .nav-item {
    flex-direction: row; flex-wrap: wrap; align-items: center;
    justify-content: space-between; white-space: normal;
    border-bottom: 1px solid var(--line);
  }
  .nav-v2 .nav-item > a { flex: 1; padding: 12px 8px; }
  .nav-v2 .drop-toggle {
    display: block; font-size: 20px; opacity: 0.85;
    min-width: 52px; min-height: 48px; text-align: center;
    transition: transform .15s;
  }
  .nav-v2 .nav-item.open .drop-toggle { transform: rotate(180deg); }
  .nav-v2 .drop {
    display: none; position: static; border: none; box-shadow: none;
    padding: 0 0 8px 16px; min-width: 0; background: transparent; flex-basis: 100%;
  }
  .nav-v2 .drop a { font-size: 17px; padding: 11px 12px; }
}

/* ---------- Photo carousel ---------- */
/* Promised to Shanelle 2026-07-31. Scrolling is native scroll-snap so the component
   works with JavaScript off; the arrows are enhancement and stay hidden until JS
   reveals them. No autoplay by design - see the note in templates/_carousel.html.j2. */
.carousel { position: relative; margin-top: 24px; }
.carousel-track {
  display: flex; gap: 18px; overflow-x: auto; list-style: none; margin: 0; padding: 4px;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: thin;
}
.carousel-track:focus-visible { outline: 2px solid var(--coral-dark); outline-offset: 4px; }
.carousel-item {
  flex: 0 0 auto; width: min(420px, 82vw); scroll-snap-align: start;
  background: var(--white); border-radius: var(--radius);
  box-shadow: var(--shadow); border: 1px solid var(--line); overflow: hidden;
}
.carousel-link {
  display: block; text-decoration: none; color: inherit; cursor: pointer;
}
.carousel-link:focus-visible {
  outline: 2px solid var(--coral-dark); outline-offset: -2px;
}
.carousel-link:hover img {
  opacity: 0.96;
}
.carousel-item img {
  display: block; width: 100%; height: 280px; object-fit: cover; background: var(--green-soft);
  user-select: none; -webkit-user-drag: none;
}
.carousel-caption { font-size: 14px; color: var(--ink-soft); margin: 0; padding: 12px 16px; }
.carousel-nav {
  position: absolute; top: 140px; transform: translateY(-50%); z-index: 3;
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--sage); background: var(--white); color: var(--ink);
  font-size: 20px; line-height: 1; box-shadow: var(--shadow);
}
.carousel-nav:hover { background: var(--green-soft); }
.carousel-nav:focus-visible { outline: 2px solid var(--coral-dark); outline-offset: 3px; }
.carousel-prev { left: -12px; }
.carousel-next { right: -12px; }
/* Arrows overlap the edge on a phone, where the thumb scrolls instead. */
@media (max-width: 720px) { .carousel-nav { display: none; } }
@media (prefers-reduced-motion: reduce) { .carousel-track { scroll-behavior: auto; } }

/* ---------- Photo gallery + lightbox ---------- */
.gallery-grid {
  list-style: none; margin: 28px 0 0; padding: 0;
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.gallery-cell { margin: 0; }
/* The whole thumbnail is the control - same large-target reasoning as the tiles. */
.gallery-open {
  display: block; width: 100%; padding: 0; cursor: pointer;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow); transition: transform .15s, box-shadow .15s;
}
.gallery-open:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.gallery-open:focus-visible { outline: 2px solid var(--coral-dark); outline-offset: 3px; }
.gallery-open img { width: 100%; height: 220px; object-fit: cover; background: var(--green-soft); }
.gallery-caption { font-size: 14px; color: var(--ink-soft); margin: 8px 2px 0; }

/* The dialog fills the viewport and centres its contents with flex rather than leaning on
   the UA `inset: 0; margin: auto` trick. That trick silently stops centring the moment the
   content is taller than the dialog box, which is exactly what a portrait photograph plus a
   two- or three-line caption does on a phone - the figure pinned to the top instead.
   dvh, not vh: on mobile browsers vh is measured against the viewport with the URL bar
   retracted, so a vh-sized dialog is taller than what the reader can actually see. */
.lightbox {
  border: none; padding: 0; background: transparent;
  width: 100vw; max-width: 100vw;
  height: 100vh; max-height: 100vh;
  height: 100dvh; max-height: 100dvh;
  overflow: visible;
}
/* Only when open - a bare `display: flex` would defeat `dialog:not([open]) { display: none }`. */
.lightbox[open] { display: flex; align-items: center; justify-content: center; }
.lightbox::backdrop { background: rgba(36, 89, 112, 0.86); }
.lightbox-figure {
  margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  max-height: 100%; min-height: 0; padding: 16px; box-sizing: border-box;
}
.lightbox-figure img {
  max-width: 90vw; max-height: 74dvh; width: auto; height: auto; min-height: 0;
  object-fit: contain;
  border-radius: 10px; box-shadow: var(--shadow-lg); background: var(--plum-dark);
}
.lightbox-caption {
  color: #fff; font-size: 15px; margin-top: 12px; text-align: center; max-width: 70ch;
  overflow-y: auto; flex-shrink: 0;
}
.lightbox-close, .lightbox-nav {
  position: fixed; z-index: 2; cursor: pointer;
  background: rgba(255,255,255,0.92); color: var(--ink); border: none; border-radius: 50%;
  width: 48px; height: 48px; font-size: 22px; line-height: 1; box-shadow: var(--shadow);
}
.lightbox-close:hover, .lightbox-nav:hover { background: #fff; }
.lightbox-close:focus-visible, .lightbox-nav:focus-visible { outline: 3px solid var(--coral); outline-offset: 2px; }
.lightbox-close { top: 18px; right: 18px; font-size: 26px; }
.lightbox-prev { left: 18px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 18px; top: 50%; transform: translateY(-50%); }
@media (max-width: 720px) {
  .lightbox-prev { left: 8px; } .lightbox-next { right: 8px; }
  .gallery-open img { height: 180px; }
  /* The close and nav buttons are fixed overlays; give the photo headroom so it is not
     sitting underneath them on a small screen. */
  .lightbox-figure { padding: 76px 12px 24px; }
  .lightbox-figure img { max-width: 94vw; max-height: 62dvh; }
}
/* Link out of the carousel into the full library. */
.carousel-more { margin-top: 16px; }

/* Gallery folder selector (folder-driven gallery, 2026-09-15) */
.gallery-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 22px; }
.gallery-head h1 { margin-bottom: 6px; }
.gallery-head .muted { margin: 0; }
.gallery-filter select { min-height: 44px; padding: 8px 40px 8px 14px; border: 1.5px solid var(--plum-light); border-radius: 999px; background: #fff; color: var(--plum); font-family: var(--font-body); font-size: 15px; font-weight: 600; cursor: pointer; }
.gallery-filter select:focus-visible { outline: 2.5px solid var(--focus); outline-offset: 2px; }
.gallery-cell[hidden] { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Area header photo (folder-driven media, 2026-09-15): same treatment as the home video */
.hero.has-media { position: relative; overflow: hidden; }
.hero.has-media .hero-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; z-index: 0; opacity: 0.62; }
.hero.has-media .hero-scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(100deg, rgba(26, 67, 87,0.78) 0%, rgba(36, 89, 112,0.52) 42%, rgba(36, 89, 112,0.30) 72%, rgba(36, 89, 112,0.22) 100%); }
.hero.has-media .hero-content { position: relative; z-index: 2; }
.hero.has-media::before, .hero.has-media::after { z-index: 1; }
/* SEC-5b-2: former inline styles */
.section-sand { background: var(--sand); }
.measure-640 { max-width: 640px; }
.measure-620 { max-width: 620px; }
.hero-title-clamp { font-size: clamp(30px, 4vw, 44px); }
.py-56-64 { padding: 56px 0 64px; }
/* Half-height page banner (caregiver portal): same media and scrim as .hero.has-media, about half the height. */
.hero.hero-half { padding: 24px 0 28px; min-height: 0; }
.hero.hero-half .lede { margin-bottom: 0; }
@media (max-width: 768px) { .hero.hero-half { padding: 20px 0 24px; } }
.text-sand-light { color: var(--text-on-dark); }
.mb-14 { margin-bottom: 14px; }
.w-100 { width: 100%; }
.fs-18-mb-14 { font-size: 18px; margin-bottom: 14px; }
.m-0 { margin: 0; }
.hero-title { font-family: var(--font-display); font-size: 42px; font-weight: 700; color: var(--teal); }
.mt-40 { margin-top: 40px; }
.py-40-8 { padding: 40px 0 8px; }
.card-sand-dashed { background: var(--sand); border-style: dashed; }
.bg-coral { background: var(--coral); }
.flex-center-gap-12 { display: flex; align-items: center; gap: 12px; }
.d-inline-block { display: inline-block; }
.flex-1 { flex: 1; }
.fs-19-m-8-0-4 { font-size: 19px; margin: 8px 0 4px; }
.grid-autofit-240 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.mb-28 { margin-bottom: 28px; }
.bg-white { background: #fff; }
.bg-green { background: var(--green); }
.mt-48 { margin-top: 48px; }
.measure-620-italic { max-width: 620px; font-style: italic; }
.fs-18-m-8-0-4 { font-size: 18px; margin: 8px 0 4px; }
.text-center-aligned { text-align: center; }
.measure-540-center-mb-28 { max-width: 540px; margin: 0 auto 28px; }
.p-0 { padding: 0; }
.mt-12 { margin-top: 12px; }
.pos-rel-z2 { position: relative; z-index: 2; }
.mx-auto { margin-left: auto; margin-right: auto; }
.measure-560 { max-width: 560px; }
.mb-12 { margin-bottom: 12px; }
.measure-560-center-mb-28 { max-width: 560px; margin: 0 auto 28px; }
.bg-blue { background: var(--blue); }
.measure-660 { max-width: 660px; }
.bg-amber { background: var(--amber); }
.flex-wrap-center-gap-24 { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.m-0-flex-shrink-0 { margin: 0; flex-shrink: 0; }
.flex-1-min-260 { flex: 1; min-width: 260px; }
.fs-20-m-8-0-6 { font-size: 20px; margin: 8px 0 6px; }
.align-start { align-items: start; }
.measure-none { max-width: none; }
.fs-24 { font-size: 24px; }
.fs-26-mb-18 { font-size: 26px; margin-bottom: 18px; }
.grid-autofit-280 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.d-none { display: none; }
.cursor-pointer { cursor: pointer; }
.row-selected { background: var(--mint-soft); font-weight: bold; }
.btn-compact-mr { padding: 4px 8px; font-size: 11px; margin-right: 4px; }
.text-white-underline { color: #fff; text-decoration: underline; }
.py-70 { padding: 70px 0; }
.alert-inline-banner { display: none; padding: 10px; border-radius: 4px; font-size: 13.5px; text-align: center; }
.cursor-pointer-underline { cursor: pointer; text-decoration: underline; }
.d-none-py-44 { display: none; padding: 44px 0; }
.portal-head-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 26px; }
.fs-30 { font-size: 30px; }
.grid-autofit-320 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.mt-16-util { margin-top: 16px; }
.mt-24-util { margin-top: 24px; }
.d-flex { display: flex; }
.py-44 { padding: 44px 0; }
.split-align-start-12-1 { align-items: start; grid-template-columns: 1.2fr 1fr; }
.d-none-mt-24 { display: none; margin-top: 24px; }
.chat-hint-right { margin-left: auto; font-size: 11px; opacity: .8; }
.border-top-none-pt-0 { border-top: none; padding-top: 0; }
.btn-compact-ml { padding: 4px 10px; font-size: 11px; margin-left: 8px; }
.btn-compact { padding: 4px 8px; font-size: 11px; }
.my-20 { margin: 20px 0; }
.chat-confirm-published { font-size: 12.5px; font-weight: 700; color: var(--green); }
.chat-confirm-discarded { font-size: 12.5px; font-weight: 700; color: var(--ink-soft); }

/* Staff notes and forms (D2) */
.note-section-summary { font-weight: 600; color: var(--plum-dark); }
.record-form-panel { margin-top: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--mint-soft); }
.form-label-small { font-size: 12px; font-weight: 600; display: block; margin-bottom: 4px; }
.form-textarea-full { padding: 6px 10px; border-radius: 6px; font-size: 13px; width: 100%; box-sizing: border-box; border: 1.5px solid var(--line); font-family: inherit; }
.form-error-banner { color: var(--coral-dark); background: #fff8ee; margin-bottom: 8px; padding: 6px; border-radius: 4px; font-size: 12.5px; }
.mb-8 { margin-bottom: 8px; }
.note-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); gap: 8px; }
.note-row:last-child { border-bottom: none; margin-bottom: 0; }
.note-content { flex: 1; word-break: break-word; }
.note-list { margin-top: 4px; }

/* Governed agent data changes (D7-S1) */
.chat-area-bar { display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: var(--mint-soft); border-bottom: 1px solid var(--line); }
.chat-area-label { font-size: 12px; font-weight: 600; color: var(--plum-dark); }
.chat-area-select { padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; font-size: 13px; background: #fff; color: var(--ink); }
.diff-container { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.diff-box { background: var(--mint-soft); border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; }
.diff-header { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 4px; }
.diff-content { font-family: monospace; font-size: 12px; white-space: pre-wrap; word-break: break-all; margin: 0; color: var(--ink); }

/* Break-glass Site Content & Recent Changes (D10) */
.flex-between-center { display: flex; justify-content: space-between; align-items: center; }
.content-type-group { margin-bottom: 18px; }
.content-type-title { font-size: 13px; font-weight: 700; text-transform: uppercase; color: var(--plum-dark); margin-bottom: 6px; letter-spacing: 0.04em; }
.content-item-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background: #fff; border: 1px solid var(--line); border-radius: 6px; margin-bottom: 6px; gap: 8px; }
.content-item-row:hover { border-color: var(--coral); }
.content-item-info { flex: 1; min-width: 0; }
.content-item-label { font-weight: 600; font-size: 14px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.content-item-id { font-size: 11.5px; color: var(--ink-soft); font-family: monospace; }
.editor-box { background: var(--mint-soft); border: 1.5px solid var(--line); border-radius: 8px; padding: 16px; margin-top: 12px; }
.editor-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.editor-field { margin-bottom: 12px; }
.editor-label { font-size: 12.5px; font-weight: 600; display: block; margin-bottom: 4px; color: var(--plum-dark); }
.editor-input { width: 100%; padding: 6px 10px; border: 1.5px solid var(--line); border-radius: 6px; font-size: 13.5px; font-family: inherit; box-sizing: border-box; background: #fff; }
.editor-textarea { width: 100%; min-height: 80px; padding: 6px 10px; border: 1.5px solid var(--line); border-radius: 6px; font-size: 13.5px; font-family: inherit; box-sizing: border-box; background: #fff; resize: vertical; }
.editor-textarea-json { font-family: monospace; min-height: 120px; font-size: 12px; }
.editor-checkbox-row { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.editor-actions { display: flex; gap: 8px; margin-top: 16px; }
.recent-change-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--line); gap: 8px; }
.recent-change-row:last-child { border-bottom: none; }
.recent-change-meta { flex: 1; min-width: 0; }
.recent-change-action { font-weight: 600; font-size: 13px; color: var(--ink); }
.recent-change-detail { font-size: 11.5px; color: var(--ink-soft); }
.recent-change-time { font-size: 11px; color: var(--muted); }

/* Event Management (D7-S2A) */
.field-row { display: flex; gap: 12px; }
.field-col { flex: 1; min-width: 0; }
.mb-16 { margin-bottom: 16px; }
.mt-16 { margin-top: 16px; }
.event-actions { display: flex; gap: 4px; align-items: center; }
.badge-draft { background: var(--line); color: var(--ink-soft); }
.badge-published { background: var(--green-soft); color: var(--green); }
.badge-archived { background: #fff2ef; color: var(--coral-dark); }

/* Staff console styles & utilities (CSP enforcement) */
.staff-search-controls { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.staff-search-input { flex: 1; min-width: 160px; padding: 6px 10px; border: 1.5px solid var(--line); border-radius: 8px; font-size: 13.5px; }
.staff-search-select { padding: 6px 10px; border: 1.5px solid var(--line); border-radius: 8px; font-size: 13.5px; }
.staff-paging-bar { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
.staff-btn-group { display: flex; gap: 6px; }
.staff-panel-header-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.mb-0 { margin-bottom: 0; }
.mt-6 { margin-top: 6px; }
.mt-14 { margin-top: 14px; }
.staff-filter-select-sm { padding: 4px 8px; border: 1.5px solid var(--line); border-radius: 8px; font-size: 13px; }
.grant-row { padding: 10px; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 8px; background: #fff; }
.grant-actions { margin-top: 6px; }
.grant-error-banner { display: none; color: var(--coral-dark); background: #fff8ee; margin-top: 6px; padding: 6px; border-radius: 4px; font-size: 12.5px; }
.staff-section-title { font-weight: 700; color: var(--plum-dark); }
.form-row-compact { display: flex; gap: 8px; margin-bottom: 8px; }
.form-col-flex { flex: 1; margin-bottom: 0; }
.form-input-compact { padding: 6px 10px; border-radius: 6px; font-size: 13px; }
.form-textarea-compact { padding: 6px 10px; border-radius: 6px; font-size: 13px; width: 100%; box-sizing: border-box; }

/* Standalone holding page (coming-soon) */
.cs-wrap { min-height: 100vh; display: flex; flex-direction: column; }
.cs-main { flex: 1; display: flex; align-items: center; }
.cs-card { max-width: 640px; }
.cs-logo { height: 84px; width: auto; margin-bottom: 28px; }
.cs-foot { padding: 22px 0 30px; font-size: 14px; color: var(--text-on-dark); }
.cs-foot a { color: #fff; }
@media (max-width: 600px) { .cs-logo { height: 62px; } }

/* Portal error page (htmlErrorPage) */
.portal-error-body { font-family: system-ui, -apple-system, sans-serif; display: flex; align-items: center; justify-content: center; height: 100vh; margin: 0; background: #f9fafb; color: #111827; }
.portal-error-card { padding: 2rem; background: #fff; border-radius: 8px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); text-align: center; max-width: 400px; width: 100%; border: 1px solid #e5e7eb; }
.portal-error-title { font-size: 1.5rem; margin-bottom: 1rem; color: #dc2626; }
.portal-error-text { color: #4b5563; line-height: 1.5; margin-bottom: 1.5rem; }
.portal-error-link { display: inline-block; padding: 0.5rem 1rem; background: #2563eb; color: #fff; text-decoration: none; border-radius: 4px; font-weight: 500; }
.portal-error-link:hover { background: #1d4ed8; }

/* Staff console status header, segments, mic, and plain states */
.staff-header-status { margin-bottom: 24px; }
.staff-header-status h2 { margin: 0 0 6px 0; font-family: var(--font-display); font-size: 28px; color: var(--plum-dark); }
.staff-status-line { font-size: 15px; color: var(--ink-soft); font-weight: 500; margin: 0; line-height: 1.4; }

.segment-tag-btn {
  display: inline-block;
  font-family: inherit;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--mint-soft);
  color: var(--ink);
  border: 1px solid var(--line);
  cursor: pointer;
  margin: 2px 4px 2px 0;
  line-height: 1.3;
  transition: background-color 0.15s, border-color 0.15s;
}
.segment-tag-btn:hover {
  background: var(--mint);
  border-color: var(--plum);
}
.segment-tag-btn:focus,
.segment-tag-btn:focus-visible {
  outline: 2px solid var(--plum);
  outline-offset: 1px;
}

.chat-empty-state {
  padding: 16px;
  color: var(--ink-soft);
  font-size: 13.5px;
  line-height: 1.5;
  background: var(--mint-soft);
  border: 1px dashed var(--line);
  border-radius: 8px;
  margin: 8px 0;
}

.chat-input-row .btn-mic {
  background: var(--mint-soft);
  color: var(--plum);
  border: none;
  border-left: 1px solid var(--line);
  padding: 0 16px;
  font-size: 16px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background-color 0.2s, color 0.2s;
}
.chat-input-row .btn-mic:hover {
  background: var(--mint);
}
.chat-input-row .btn-mic:focus,
.chat-input-row .btn-mic:focus-visible {
  outline: 2px solid var(--plum);
  outline-offset: -2px;
}
.chat-input-row .btn-mic.recording {
  background: #dc2626;
  color: #fff;
  animation: pulse-mic 1.5s infinite;
}
.mic-status-msg {
  padding: 6px 14px;
  background: var(--mint-soft);
  border-top: 1px solid var(--line);
  font-size: 12.5px;
}
@keyframes pulse-mic {
  0% { opacity: 1; }
  50% { opacity: 0.7; }
  100% { opacity: 1; }
}


/* ---------- My Wellness check-in (portal) and chart (staff) ---------- */
.wellness-trend svg { width: 100%; max-width: 280px; height: 60px; margin-top: 8px; }
.wellness-line { fill: none; stroke: var(--plum); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.wellness-q { border: 0; padding: 0; margin: 0 0 14px; }
.wellness-q legend { font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.wellness-scale { display: flex; gap: 6px; }
.wellness-scale label { flex: 1; min-height: 44px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; position: relative; }
.wellness-scale input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.wellness-scale label:has(input:checked) { background: var(--plum); border-color: var(--plum); color: #fff; font-weight: 700; }
.wellness-scale label:has(input:focus-visible) { outline: 2px solid var(--coral); outline-offset: 2px; }
.wellness-ends { display: flex; justify-content: space-between; margin-top: 4px; }
.wellness-note { width: 100%; min-height: 60px; margin-top: 4px; padding: 8px; border-radius: 10px; border: 1px solid var(--line); font: inherit; }
.wellness-chart svg { width: 100%; height: 220px; }
.wellness-chart .axis { stroke: var(--line); stroke-width: 1; }
.wellness-chart .axis-label { font-size: 11px; fill: var(--muted); }
.wellness-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.wellness-controls select[multiple] { min-width: 220px; min-height: 88px; }
.wellness-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.wellness-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: middle; }

/* ---------- MKE v2 chrome and v1 components ---------- */
/* Skip link (v1): off-screen until focused */
.skip { position: absolute; left: -9999px; top: 8px; z-index: 200; }
.skip:focus { left: 8px; background: #fff; color: var(--navy); padding: 10px 14px; border-radius: 8px; border: 2px solid var(--navy); font-weight: 700; text-decoration: none; }
/* Crisis bar: the first thing on every page, tap-to-call, 44px floor */
.crisis-bar {
  background: var(--navy); color: #fff; min-height: 44px; --focus: var(--mint);
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 6px 16px; font-size: 16px; line-height: 1.4; gap: 4px; flex-wrap: wrap;
}
.crisis-bar a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; }
.crisis-bar .num { color: var(--teal); white-space: nowrap; }
.crisis-bar .sep { opacity: .6; padding: 0 2px; }
/* Brand lockup: elephant mark + text wordmark + tagline */
.brand-mark-img { height: 60px; width: auto; display: block; flex: 0 0 auto; }
.brand-lockup { display: flex; flex-direction: column; min-width: 0; }
.brand-lockup .brand-name { font-size: 26px; line-height: 1.1; color: var(--navy); font-weight: 700; letter-spacing: -.01em; }
.brand-lockup .brand-tagline { transform: none; font-size: 15px; white-space: normal; margin-top: 2px; }
/* Callout (v1 .note) and the inline dashed "to confirm" tag (v1 .ph-inline) */
.note { background: var(--mint-soft); border-left: 4px solid var(--teal); padding: 14px 18px; border-radius: 0 10px 10px 0; margin: 18px 0; font-size: 16px; }
.note-coral { border-left-color: var(--coral); }
.ph-inline { display: inline-block; background: #fff8ee; border: 1px dashed #e0b878; color: #7a4a10; font-size: 13px; line-height: 1.4; padding: 1px 7px; border-radius: 6px; margin-left: 4px; }
.placeholder { background: #fff8ee; border: 1px dashed #e0b878; border-radius: 10px; padding: 14px 18px; color: #7a4a10; font-size: 15px; margin: 16px 0; }
/* Spotlight (v1): switchable monthly; photo shape from the brand */
.spotlight { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); }
.spotlight-photo { flex: 0 0 120px; width: 120px; height: 120px; border-radius: 50% 50% 50% 8px; background: linear-gradient(135deg, var(--mint), var(--teal)); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.spotlight-photo img { width: 100%; height: 100%; object-fit: cover; }
.spotlight-body { flex: 1; min-width: 240px; }
.spotlight-body h3 { margin: 0 0 6px; color: var(--navy); font-size: 22px; }
.spotlight-body p { margin: 0 0 14px; color: var(--muted); }
/* Section icon chips (v1): a brand glyph anchors a heading */
h2.sec, h3.sec { display: flex; align-items: center; gap: 12px; }
.sec-ico { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--mint-soft); border: 1px solid var(--line); color: var(--navy); }
.sec-ico svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
/* Prose panels (interior pages) */
.prose { max-width: 760px; }
.prose h2 { font-size: clamp(24px, 3vw, 32px); margin: 32px 0 10px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 21px; margin: 24px 0 8px; }
.prose p, .prose li { margin-bottom: 12px; }
.prose ul { padding-left: 22px; }
.section-head p.lede-inline { margin-bottom: 0; }
.card .card-img { max-width: 100%; height: auto; border-radius: 12px; margin-bottom: 12px; }
.card .card-img-sm { width: 160px; height: auto; border-radius: 12px; margin-bottom: 12px; }
.card .card-logo { max-height: 56px; width: auto; margin-bottom: 10px; }
.card .btn-row { margin-top: 12px; }
.event-tbd .event-date { background: var(--teal-deep); }
.quote-card blockquote { font-family: var(--font-display); font-size: 20px; line-height: 1.35; }
.quote-card .author { color: var(--muted); margin-top: 8px; }
.tile-sponsor { border-top-color: var(--teal); }
.tile-sponsor .resource-tag { color: var(--teal-deep); }
@media (max-width: 1150px) {
  .brand { flex-direction: row; align-items: center; gap: 10px; }
  .brand-mark-img { height: 44px; }
  .brand-lockup .brand-name { font-size: 20px; }
  .brand-lockup .brand-tagline { font-size: 12px; text-transform: none; letter-spacing: 0; font-weight: 500; }
}
@media (max-width: 600px) {
  .brand-lockup .brand-tagline { display: none; }
  .crisis-bar { font-size: 15px; }
}