/* Legacy Home & Respite Care Foundation — Caregiver Wellness & Resource Hub
   Demo site · X-Centric Managed Hosted Hub · DEMO DATA ONLY */

:root {
  /* v3 palette — client brand browns (#764835 / #9b5426 from their kit), coral CTAs, cream surfaces */
  --plum: #764835;
  --plum-dark: #5a3526;
  --plum-light: #9b5426;
  --coral: #d86b4d;
  --coral-dark: #a84a32;
  --cream: #faf6f1;
  --sand: #f7e6d5;
  --ink: #1e0b09;
  --ink-soft: #5c4038;
  --white: #ffffff;
  --green: #5f8a58;
  --green-soft: #e8f0e6;
  --sage: #a7c4a0;
  --amber: #e3a75d;
  --amber-soft: #f9efdc;
  --blue-soft: #e7eef8;
  --blue: #3c6fb0;
  --radius: 14px;
  --shadow: 0 2px 14px rgba(30, 11, 9, 0.08);
  --shadow-lg: 0 8px 30px rgba(30, 11, 9, 0.14);
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', -apple-system, 'Segoe UI', 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; 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 #eee5da;
  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 #eee5da; box-shadow: 0 1px 8px rgba(30,11,9,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: 62px; width: auto; max-width: 100%; display: block; margin-bottom: 10px;
  filter: brightness(0) invert(1); opacity: 0.92; }
.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;
}
/* 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; }

/* ---------- Hero ---------- */
.hero {
  background: linear-gradient(160deg, var(--plum-dark) 0%, var(--plum) 55%, var(--plum-light) 100%);
  color: #fff;
  padding: 84px 0 96px;
  position: relative;
  overflow: hidden;
}
.hero::after {
  content: '';
  position: absolute; right: -120px; top: -80px;
  width: 480px; height: 480px; border-radius: 50%;
  background: radial-gradient(circle, rgba(242, 190, 136, 0.32) 0%, transparent 70%);
}
.hero::before {
  content: '';
  position: absolute; left: -140px; bottom: -160px;
  width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle, rgba(217, 191, 174, 0.18) 0%, transparent 70%);
}
/* Primary CTA stays coral on teal hero for WCAG AA (white on #d86b4d) */
.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: #eeddd2; 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(90, 53, 38, 0.78) 0%,
    rgba(94, 50, 38, 0.52) 42%,
    rgba(94, 50, 38, 0.30) 72%,
    rgba(94, 50, 38, 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(90, 53, 38, 0.34) 0%, rgba(90, 53, 38, 0.52) 70%, rgba(90, 53, 38, 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 { outline: 2.5px solid var(--amber); 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;
}

/* ---------- 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(--amber) 0%, var(--plum) 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(30, 11, 9, 0.09); border: 1px solid #f0e8dd;
  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: #dbe8d8;
}
.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 ---------- */
/* Dark surface so amber numerals never render as text-on-light (client hard rule) */
.stats-band { background: var(--plum-dark); }
.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(--amber); }
.stat .label { font-size: 15px; color: #eeddd2; 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;
}
.band-teal h2 { color: #fff; }
.band-teal p { color: #eeddd2; 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: #f3e6dc; color: var(--plum); }

/* ---------- Resource hub ---------- */
.filter-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 30px; }
.filter-chip {
  border: 1.5px solid #ddd0c2; 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 #ddd0c2; 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 #eee2d4; border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow);
}

/* ---------- Portal / app UI mock ---------- */
.app-shell { background: #f7eee7; border-radius: var(--radius); overflow: hidden; border: 1px solid #e9d5c7; box-shadow: var(--shadow-lg); }
.app-topbar {
  background: var(--plum-dark); color: #fff; 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 #efdfd3; 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 #efdfd3; 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 #efdfd3; 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 #efdfd3; }
.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 #ddd0c2; 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 #e9d5c7; 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 #e5d9cb; 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 #efdfd3; }
.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: #fcf7f3; }
.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 #efdfd3; font-weight: 700;
}
table.data td { padding: 12px 14px; border-bottom: 1px solid #f4ede4; vertical-align: middle; }
table.data tr:hover td { background: #fcf7f3; }

/* ---------- Footer ---------- */
footer {
  background: var(--plum-dark); color: #eeddd2; padding: 54px 0 30px; margin-top: 40px; font-size: 14px;
}
footer h4 { color: #fff; font-size: 15px; margin-bottom: 14px; font-family: var(--font-body); }
footer a { color: #eeddd2; 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(43,35,51,0.55); 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 #eee5da; 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 #e5ddd4; 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 #e5ddd4; 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 #eee5da; 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 #f0e9e0;
  }
  .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 #f0e8dd; 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 #f0e8dd; 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(30, 11, 9, 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(--amber); 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(90,53,38,0.78) 0%, rgba(94,50,38,0.52) 42%, rgba(94,50,38,0.30) 72%, rgba(94,50,38,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; }
.text-sand-light { color: #eeddd2; }
.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(--coral); }
.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: #fbf6f0; 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 #efdfd3; border-radius: 8px; background: #faf6f1; }
.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 #ddd0c2; font-family: inherit; }
.form-error-banner { color: #a84a32; background: #f9efdc; 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 #f0e6dc; 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: #fbf5ef; border-bottom: 1px solid #eee2d7; }
.chat-area-label { font-size: 12px; font-weight: 600; color: var(--plum-dark); }
.chat-area-select { padding: 4px 8px; border: 1px solid #ddd0c2; 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: #fbf8f5; border: 1px solid #ebdcd0; 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 #ebdcd0; 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: #faf6f1; border: 1.5px solid #dfcfc2; 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 #eee2d7; }
.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 #ddd0c2; 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 #ddd0c2; 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 #eee5da; 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: #88746d; }

/* 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: #eee5da; color: var(--ink-soft); }
.badge-published { background: var(--green-soft); color: var(--green); }
.badge-archived { background: #fbeae5; color: #a84a32; }

/* 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 #ddd0c2; border-radius: 8px; font-size: 13.5px; }
.staff-search-select { padding: 6px 10px; border: 1.5px solid #ddd0c2; 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 #ddd0c2; border-radius: 8px; font-size: 13px; }
.grant-row { padding: 10px; border: 1px solid #efdfd3; border-radius: 8px; margin-bottom: 8px; background: #fff; }
.grant-actions { margin-top: 6px; }
.grant-error-banner { display: none; color: #a84a32; background: #f9efdc; 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; filter: brightness(0) invert(1); opacity: .95; }
.cs-foot { padding: 22px 0 30px; font-size: 14px; color: #eeddd2; }
.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: #f3ede2;
  color: var(--ink);
  border: 1px solid #d9d0c1;
  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: #e8dfcf;
  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: #fbf7f2;
  border: 1px dashed #e5d9cb;
  border-radius: 8px;
  margin: 8px 0;
}

.chat-input-row .btn-mic {
  background: #f7f1e9;
  color: var(--plum);
  border: none;
  border-left: 1px solid #efdfd3;
  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: #ede3d7;
}
.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: #fdf6f0;
  border-top: 1px solid #f0e2d8;
  font-size: 12.5px;
}
@keyframes pulse-mic {
  0% { opacity: 1; }
  50% { opacity: 0.7; }
  100% { opacity: 1; }
}