/* Shepherd design system — application stylesheet (see design/DESIGN-SYSTEM.md) */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:100 900;src:url(/fonts/fraunces.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;src:url(/fonts/inter.woff2) format('woff2')}

:root{
  --ground:#F3F2EE; --card:#FFFFFF; --card-tint:#FAF9F6;
  --ink:#24233B; --ink-soft:#605E78; --line:#E4E2DA;
  --indigo:#3E4291; --indigo-ink:#353979; --indigo-mark:#4A4FA3; --indigo-tint:#EEEFF8;
  --gold:#B98A2E; --gold-tint:#F8F1E2; --gold-mark:#C79A3B;
  --good:#2E7D5B; --good-tint:#E7F2ED;
  --bad:#B8432F; --bad-tint:#F9ECE9;
  --warn:#9A6B15; --warn-tint:#F7F0DF;
  --shadow:0 1px 2px rgb(20 19 31/.05),0 4px 14px rgb(20 19 31/.04);
}
@media (prefers-color-scheme: dark){:root{
  --ground:#14131F; --card:#201F36; --card-tint:#252441;
  --ink:#ECEAF6; --ink-soft:#A3A1BC; --line:#33324B;
  --indigo:#8B90E4; --indigo-ink:#A6AAEC; --indigo-mark:#7E84DE; --indigo-tint:#2A2950;
  --gold:#E0B45C; --gold-tint:#38301C; --gold-mark:#B0862E;
  --good:#5BBD94; --good-tint:#1E3229;
  --bad:#E37E6C; --bad-tint:#3A2320;
  --warn:#D9A94E; --warn-tint:#352B15;
  --shadow:0 1px 2px rgb(0 0 0/.3);
}}
:root[data-theme="light"]{
  --ground:#F3F2EE; --card:#FFFFFF; --card-tint:#FAF9F6;
  --ink:#24233B; --ink-soft:#605E78; --line:#E4E2DA;
  --indigo:#3E4291; --indigo-ink:#353979; --indigo-mark:#4A4FA3; --indigo-tint:#EEEFF8;
  --gold:#B98A2E; --gold-tint:#F8F1E2; --gold-mark:#C79A3B;
  --good:#2E7D5B; --good-tint:#E7F2ED;
  --bad:#B8432F; --bad-tint:#F9ECE9;
  --warn:#9A6B15; --warn-tint:#F7F0DF;
  --shadow:0 1px 2px rgb(20 19 31/.05),0 4px 14px rgb(20 19 31/.04);
}
:root[data-theme="dark"]{
  --ground:#14131F; --card:#201F36; --card-tint:#252441;
  --ink:#ECEAF6; --ink-soft:#A3A1BC; --line:#33324B;
  --indigo:#8B90E4; --indigo-ink:#A6AAEC; --indigo-mark:#7E84DE; --indigo-tint:#2A2950;
  --gold:#E0B45C; --gold-tint:#38301C; --gold-mark:#B0862E;
  --good:#5BBD94; --good-tint:#1E3229;
  --bad:#E37E6C; --bad-tint:#3A2320;
  --warn:#D9A94E; --warn-tint:#352B15;
  --shadow:0 1px 2px rgb(0 0 0/.3);
}

/* ---- The alias names, which had never been defined at all ----------------
   Eight names were in use across the stylesheet and 30-odd views — `--pri`,
   `--border`, `--crit` — and not one of them existed. Where a fallback was
   written (`var(--crit,#B3261E)`) the page got a LIGHT-MODE colour that could
   never re-tint; where none was (`outline:2px solid var(--pri)` on every chart
   hit-target) the declaration was invalid and simply did nothing, which is how
   the keyboard focus ring on the charts came to be invisible.

   Defined ONCE, and BY REFERENCE: the value of --pri is the token stream
   `var(--indigo)`, resolved against the element it is used on — so these follow
   whichever block above set the real token, in all four theme states, with no
   fourth copy to keep in step. */
:root{
  --pri:var(--indigo);
  --brand:var(--indigo);
  --border:var(--line);
  --panel:var(--card-tint);
  --crit:var(--bad);
  --crit-bg:var(--bad-tint);
  --warn-bg:var(--warn-tint);
  --display:'Fraunces',Georgia,serif;
}

/* ---- D-103: THE MINISTRY STANDARD ----------------------------------------
   The deep royal ground the global ministry stands on. The navy pair is the
   command chrome (the top bar, the hero bands, the phone bar); gold-bright is
   the lamplight that reads on it. The chrome is deep in BOTH themes — light
   pages sit under a dark crown the way a sanctuary sits under its roof — so
   only the navy pair itself re-tints, a shade quieter in the dark so the bar
   does not glow against a dark ground.
   --wash-bg exists because --wash is a unitless OPACITY for chart fills, yet
   three rules had been using it as a background and silently painting
   nothing. The tint those rules wanted now has its own name. */
:root{
  --navy:#182352; --navy-2:#273579;
  --hero-ink:#F6F3EA; --hero-soft:rgba(246,243,234,.68); --hero-line:rgba(246,243,234,.16);
  --gold-bright:#E7C566;
  --wash-bg:color-mix(in srgb,var(--ink) 7%,transparent);
}
@media (prefers-color-scheme: dark){:root{--navy:#131A3B; --navy-2:#1F2A5E}}
:root[data-theme="light"]{--navy:#182352; --navy-2:#273579}
:root[data-theme="dark"]{--navy:#131A3B; --navy-2:#1F2A5E}

*{box-sizing:border-box}
/* D-089b — `hidden` must actually hide.
   The browser's own `[hidden]{display:none}` is the weakest rule there is, and
   ANY class that sets a display beats it — this stylesheet has 85 that do. So a
   `<button class="btn" hidden>` rendered as an empty coloured box: visible to
   every reader on first paint before the script runs, and permanently whenever
   the script cannot decide what to show. Found by looking at a screenshot of
   the notifications panel, where it was a purple square sitting beside a real
   button. Five views rely on this attribute. */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font:400 15px/1.55 'Inter',system-ui,sans-serif;padding-bottom:76px}
h1,h2,h3{font-family:'Fraunces',Georgia,serif;font-weight:600;margin:0;text-wrap:balance}
a{color:var(--indigo);text-decoration:none}
a:hover{text-decoration:underline}
button{font:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--indigo);outline-offset:2px;border-radius:8px}
svg{display:block}
@media (prefers-reduced-motion:no-preference){
  .btn,.card,.nav-item,.rowline{transition:background .15s ease-out,box-shadow .15s ease-out,border-color .15s ease-out}
}

.wrap{max-width:1180px;margin:0 auto;padding:0 16px}
.eyebrow{font-size:11.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-soft)}
.hint{font-size:12.5px;color:var(--ink-soft)}
.page-title{font-size:clamp(23px,4vw,30px);margin:22px 0 4px}

/* topbar — D-103: the ministry's crown. Deep navy in both themes, a gold
   hairline underlining it, the emblem standing where a letter used to. */
.topbar{background:linear-gradient(180deg,var(--navy-2),var(--navy));border-bottom:1px solid color-mix(in srgb,var(--gold) 55%,var(--navy));position:sticky;top:0;z-index:20}
.topbar-in{display:flex;align-items:center;gap:12px;height:60px;max-width:1400px;margin:0 auto;padding:0 16px}
.topbar-in>.church{min-width:0}
.top-actions{flex:none}
.logo{width:42px;height:42px;display:grid;place-items:center;position:relative;flex:none;text-decoration:none}
.logo img{width:40px;height:auto;display:block;filter:drop-shadow(0 1px 2px rgb(0 0 0/.4))}
.church b{font-size:15px;font-weight:600;display:block;line-height:1.15;color:var(--hero-ink)}
.church span{font-size:12px;color:var(--hero-soft)}
.top-actions{margin-left:auto;display:flex;align-items:center;gap:8px}
.top-nav{display:none;gap:2px;margin-left:18px;align-items:center;flex-wrap:nowrap}
.top-nav>a{padding:8px 12px;border-radius:8px;font-size:13.5px;font-weight:500;color:var(--hero-soft);white-space:nowrap}
.top-nav>a:hover{background:rgba(255,255,255,.08);text-decoration:none}
.top-nav>a.on{color:var(--gold-bright);background:rgba(255,255,255,.10)}
@media(min-width:1200px){.top-nav{display:flex}}

/* D-068 — grouped nav drawers. Pure CSS <details>; no JavaScript anywhere.
   D-103: drawers hang only from navy chrome (the top bar, the sign-in
   corner), so their summaries wear the crown's ivory and gold. The menus
   they drop stay card-coloured — a dropdown is a page surface, not chrome. */
.drawer{position:relative}
.drawer>summary{list-style:none;cursor:pointer;padding:8px 10px 8px 12px;border-radius:8px;
  font-size:13.5px;font-weight:500;color:var(--hero-soft);white-space:nowrap;user-select:none}
.drawer>summary::-webkit-details-marker{display:none}
.drawer>summary::after{content:"";display:inline-block;margin-left:6px;vertical-align:middle;
  border:4px solid transparent;border-top-color:currentColor;transform:translateY(2px)}
.drawer>summary:hover{background:rgba(255,255,255,.08)}
.drawer>summary.on{color:var(--gold-bright);background:rgba(255,255,255,.10)}
.drawer[open]>summary{background:rgba(255,255,255,.08);color:var(--hero-ink)}
.drawer-menu{position:absolute;z-index:70;top:calc(100% + 5px);left:0;min-width:190px;
  display:flex;flex-direction:column;padding:6px;gap:1px;
  background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 32px rgba(16,18,44,.15)}
.drawer-menu a{padding:8px 11px;border-radius:7px;font-size:13px;color:var(--ink);white-space:nowrap}
.drawer-menu a:hover{background:var(--ground);text-decoration:none}
.me{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.07);color:var(--gold-bright);display:grid;place-items:center;font-weight:600;font-size:14px;border:1.5px solid var(--gold-bright);flex:none}
/* the sign-out button sits on the crown; every other quiet button sits on card */
.topbar .btn-quiet{color:var(--hero-soft)}
.topbar .btn-quiet:hover{background:rgba(255,255,255,.08);color:var(--hero-ink)}

/* D-089 — the reader's own light. A drawer like any other, minus the caret:
   the glyph IS the affordance, and a triangle beside it only adds width to a
   header that D-079 already had to fight for room in. The menu hangs from the
   RIGHT edge because this control sits at the end of the row and a left-hung
   menu would leave the window. */
.theme-pick>summary{padding:8px;color:var(--hero-soft);display:grid;place-items:center;min-width:34px;min-height:34px}
.theme-pick>summary::after{display:none}
.theme-pick .drawer-menu{left:auto;right:0;min-width:172px}
.theme-opt{appearance:none;background:none;border:0;text-align:left;cursor:pointer;
  padding:9px 11px;border-radius:7px;font:inherit;font-size:13px;color:var(--ink);white-space:nowrap;min-height:38px}
.theme-opt:hover{background:var(--ground)}
.theme-opt.on{color:var(--indigo);background:var(--indigo-tint);font-weight:600}
/* the chosen one is marked with a tick rather than colour alone, so the state
   survives a reader who cannot tell the indigo from the ink */
.theme-opt.on::after{content:" ✓";float:right;margin-left:10px}
.auth-theme{position:fixed;top:14px;right:14px;z-index:80}

/* D-091 — the invitation to install. Quiet on purpose: a bar that shouts is a
   bar people learn to close without reading. It appears once, and once closed
   it is gone for good. */
.install-bar,.install-panel{display:flex;gap:12px;align-items:center;flex-wrap:wrap;
  background:var(--indigo-tint);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.install-bar{margin:0 0 16px}
.install-panel{margin:12px 0 0;background:var(--card-tint)}
.install-say{display:flex;gap:10px;align-items:flex-start;flex:1 1 260px;min-width:0}
.install-say svg{color:var(--indigo);flex:none;margin-top:2px}
.install-say b{font-size:14px}
.install-do{display:flex;gap:8px;align-items:center;flex:none}
.install-steps{flex:1 1 100%;margin:4px 0 0;padding-left:22px;font-size:13px;color:var(--ink-soft);line-height:1.7}
@media print{.install-bar,.install-panel{display:none}}

/* buttons */
.btn{border-radius:8px;padding:11px 16px;font-weight:600;font-size:14px;border:1px solid transparent;min-height:44px;display:inline-flex;align-items:center;gap:7px;text-decoration:none}
.btn:hover{text-decoration:none}
.btn-pri{background:var(--indigo);color:#fff}
.btn-pri:hover{background:var(--indigo-ink)}
:root[data-theme="dark"] .btn-pri{color:#14131F}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .btn-pri{color:#14131F}}
.btn-sec{background:var(--card);border-color:var(--line);color:var(--ink)}
.btn-sec:hover{border-color:var(--indigo);color:var(--indigo)}
.btn-quiet{background:none;border:none;color:var(--indigo);font-weight:600;padding:8px 10px;border-radius:8px}
.btn-quiet:hover{background:var(--indigo-tint);text-decoration:none}
.btn-danger{background:var(--bad-tint);color:var(--bad);border-color:transparent}

/* cards */
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:18px;margin-top:16px}
.card-h{display:flex;align-items:baseline;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.card-h h2{font-size:18px}
.card-h .btn-quiet,.card-h .push{margin-left:auto}

/* stat tiles */
.grid-kpi{display:grid;gap:12px;grid-template-columns:minmax(0,1fr);margin-top:16px}
@media(min-width:480px){.grid-kpi{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.grid-kpi{grid-template-columns:repeat(4,1fr);gap:16px}}
.tile{background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:16px;display:flex;flex-direction:column;gap:2px}
.tile .lbl{font-size:13px;font-weight:500;color:var(--ink-soft)}
.tile .val{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:32px;line-height:1.1}
.tile .val small{font:600 14px 'Inter',sans-serif;color:var(--ink-soft)}
.tile .sub{font-size:12.5px;color:var(--ink-soft)}

/* tables */
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{text-align:left;font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft);padding:8px 10px;border-bottom:1px solid var(--line)}
.tbl td{padding:10px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tr:last-child td{border-bottom:none}
.tbl tbody tr:hover{background:var(--card-tint)}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums}
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* D-079 — a table can never push the PAGE sideways.
   Most tables sit in a .tbl-scroll card, but three did not, and a 730px table
   on a 367px phone dragged the whole page with it. Below the desktop layout a
   table becomes its own scroll container, so the row scrolls and the page does
   not. Rows and cells keep table layout; only the table box becomes a block. */
@media(max-width:1023px){
  .tbl{display:block;overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}
}

/* forms */
.field{display:flex;flex-direction:column;gap:5px;margin-bottom:14px}
.field label{font-size:13px;font-weight:600}
.field .err{color:var(--bad);font-size:12.5px}
.in{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:11px 12px;font:inherit;color:var(--ink);min-height:44px;width:100%}
.in:focus{outline:2px solid var(--indigo);outline-offset:0;border-color:var(--indigo)}
select.in{appearance:auto}
.form-grid{display:grid;gap:0 18px;grid-template-columns:1fr}
@media(min-width:760px){.form-grid{grid-template-columns:1fr 1fr}}
.fieldset{border:1px solid var(--line);border-radius:10px;padding:16px;margin:0 0 16px}
.fieldset legend{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:15px;padding:0 8px}

/* pills, tags, chips */
.tag{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;border-radius:6px;padding:2px 7px;white-space:nowrap}
.t-good{color:var(--good);background:var(--good-tint)}
.t-warn{color:var(--warn);background:var(--warn-tint)}
.t-crit{color:var(--bad);background:var(--bad-tint)}
.t-info{color:var(--indigo);background:var(--indigo-tint)}
.t-gold{color:var(--gold);background:var(--gold-tint)}
.t-mut{color:var(--ink-soft);background:var(--wash-bg)}
.t-ok{color:var(--good);background:var(--good-tint)}
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:12.5px;background:var(--card)}
.pill{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft);border:1px solid var(--line);border-radius:999px;padding:2px 8px}

/* avatars */
.av{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:600;flex:none;overflow:hidden}
.av img{width:100%;height:100%;object-fit:cover}
.av-lg{width:44px;height:44px;font-size:15px}
.av-xl{width:76px;height:76px;font-size:24px}
.a1{background:#E3E5F5;color:#3E4291}.a2{background:#DDEEE7;color:#206147}.a3{background:#F3E4E0;color:#8F3B2A}
.a4{background:#EFE7D8;color:#7C5B12}.a5{background:#E4E9EF;color:#33526E}.a6{background:#EAE0EF;color:#6B3E82}
/* D-089b — the avatars in the dark.
   Every member on every list wears one of these six, keyed off their name, and
   all six were light pastels with dark ink: in dark mode the roll became rows
   of bright discs glaring off a dark card — the most visible thing wrong with
   the whole theme, and on the most-used screen in the platform.
   Inverted the way the palette above already inverts (dark tint, light ink),
   and written with the two-rule pattern this file uses everywhere: the explicit
   choice, then auto-dark for anyone who has not made one. */
:root[data-theme="dark"] .a1{background:#2A2950;color:#8B90E4}
:root[data-theme="dark"] .a2{background:#1E3229;color:#5BBD94}
:root[data-theme="dark"] .a3{background:#3A2320;color:#E37E6C}
:root[data-theme="dark"] .a4{background:#38301C;color:#E0B45C}
:root[data-theme="dark"] .a5{background:#22303D;color:#7FA8CE}
:root[data-theme="dark"] .a6{background:#2F2440;color:#B48ACB}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .a1{background:#2A2950;color:#8B90E4}
  :root:not([data-theme="light"]) .a2{background:#1E3229;color:#5BBD94}
  :root:not([data-theme="light"]) .a3{background:#3A2320;color:#E37E6C}
  :root:not([data-theme="light"]) .a4{background:#38301C;color:#E0B45C}
  :root:not([data-theme="light"]) .a5{background:#22303D;color:#7FA8CE}
  :root:not([data-theme="light"]) .a6{background:#2F2440;color:#B48ACB}
}
.gold-ring{box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--gold-mark)}

/* rows & lists */
.rowline{display:flex;gap:12px;align-items:center;padding:10px 0;flex-wrap:wrap}
.rowline + .rowline{border-top:1px solid var(--line)}
.rowline .rb{flex:1;min-width:150px}
.rowline .rb b{font-size:14px;font-weight:600;display:block}
.rowline .rb span{font-size:12.5px;color:var(--ink-soft)}

/* meters */
.meter{height:10px;border-radius:5px;background:var(--indigo-tint);overflow:hidden;margin:8px 0 4px}
.meter i{display:block;height:100%;background:var(--indigo-mark);border-radius:5px 0 0 5px}
.lg-meter{height:8px;border-radius:4px;background:var(--indigo-tint);overflow:hidden;min-width:70px}
.lg-meter i{display:block;height:100%;background:var(--indigo-mark)}

/* banner + flash */
.banner{display:flex;align-items:center;gap:14px;background:var(--indigo-tint);border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin-top:16px;flex-wrap:wrap}
.banner .btn{margin-left:auto}
.flash{position:fixed;left:50%;bottom:86px;transform:translateX(-50%);background:var(--ink);color:var(--ground);padding:11px 18px;border-radius:10px;font-size:14px;font-weight:500;z-index:60;box-shadow:var(--shadow)}
@media(min-width:1024px){.flash{bottom:24px}}
.errbox{background:var(--bad-tint);color:var(--bad);border-radius:8px;padding:11px 14px;font-size:13.5px;margin-top:14px}

/* bottom nav (mobile) */
/* D-079 — thumbs, not cursors.
   The reads under every chart, the legend entries and the little "See who →"
   doors are inline links about 15px tall. That is comfortable with a mouse and
   awkward with a thumb (WCAG 2.2 asks for 24px). Vertical padding on an INLINE
   element enlarges the hit area without affecting the line box, so the target
   grows and not one pixel of the layout moves. Applied only where the pointer
   is actually coarse, so desktop spacing is untouched. */
@media (pointer: coarse), (max-width: 720px) {
  .card a:not(.btn):not(.btn-pri):not(.btn-sec):not(.btn-quiet):not(.chip),
  .ch-read a, .ch-legend a, .find-eg a { padding-block: 6px; }
  .chip { min-height: 36px; }
}
/* D-079 — THE PHONE BAR. Five columns, and it can never overflow.
   It used to emit one item per room (up to TEN for a Pastor) in a row that
   neither wrapped nor scrolled, so on a 390px phone the later rooms ran off
   the screen and dragged the page sideways with them. Now: four fixed rooms
   plus More, each an equal fraction of the width, labels truncating rather
   than pushing. */
.nav{position:fixed;bottom:0;left:0;right:0;background:var(--navy);border-top:1px solid color-mix(in srgb,var(--gold) 40%,var(--navy));
  display:flex;padding:6px 4px calc(6px + env(safe-area-inset-bottom));z-index:40}
.nav-item{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;font-size:10.5px;font-weight:500;color:var(--hero-soft);border:none;background:none;
  border-radius:10px;padding:6px 2px;min-height:48px;text-decoration:none;position:relative;cursor:pointer}
.nav-item>span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-item>svg{flex:none}
.nav-item.on{color:var(--gold-bright);background:rgba(255,255,255,.10)}
.nav-item:hover{text-decoration:none}
.nav-dot{position:absolute;top:5px;right:calc(50% - 16px);width:8px;height:8px;border-radius:50%;
  background:var(--bad);border:1.5px solid var(--navy)}

/* More — the sheet. Pure CSS <details>, same pattern as the header drawers. */
.nav-more{flex:1 1 0;min-width:0;display:flex}
.nav-more>summary{list-style:none;width:100%}
.nav-more>summary::-webkit-details-marker{display:none}
.nav-more[open]>summary{color:var(--gold-bright);background:rgba(255,255,255,.10)}
.nav-sheet{position:fixed;left:0;right:0;bottom:0;top:0;z-index:39;
  background:rgb(20 19 31/.45);display:flex;align-items:flex-end}
.nav-sheet-in{width:100%;max-height:70vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:var(--card);border-top:1px solid var(--line);border-radius:14px 14px 0 0;
  padding:16px 16px calc(78px + env(safe-area-inset-bottom));box-shadow:0 -12px 32px rgb(16 18 44/.18)}
.nav-sheet-find{display:flex;align-items:center;gap:8px;padding:11px 12px;margin-bottom:12px;
  border:1px solid var(--line);border-radius:999px;background:var(--ground);color:var(--ink-soft);font-size:13.5px}
.nav-sheet-group{margin-bottom:14px}
.nav-sheet-group>b{display:block;font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:6px}
.nav-sheet-group>a{display:block;padding:11px 12px;border-radius:9px;font-size:15px;color:var(--ink);
  min-height:44px;line-height:22px}
.nav-sheet-group>a:hover{background:var(--ground);text-decoration:none}
@media(min-width:1200px){.nav{display:none} body{padding-bottom:32px}}

/* auth screens — D-103: arrival happens under the ministry's own sky. The
   backdrop is the command navy with a faint gold dawn; the emblem stands
   above the card the way it stands above the work. */
.auth-wrap{min-height:100dvh;display:grid;place-items:center;padding:20px}
/* Only the standalone arrival pages (login) stand under the navy sky — the
   in-app walls (the two-factor check) already sit beneath the crown. */
body>.auth-wrap{background:radial-gradient(90% 60% at 50% -12%,color-mix(in srgb,var(--gold) 26%,var(--navy-2)),var(--navy-2) 34%,var(--navy) 78%)}
.auth-emblem{display:block;margin:0 auto 16px;width:96px;height:auto;filter:drop-shadow(0 6px 18px rgb(0 0 0/.45))}
.auth-word{display:block;text-align:center;font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:15px;
  letter-spacing:.34em;text-indent:.34em;text-transform:uppercase;color:var(--gold-bright);margin:0 0 18px}
.auth-card{background:var(--card);border:1px solid color-mix(in srgb,var(--gold) 26%,var(--line));border-radius:16px;
  box-shadow:0 18px 50px rgb(0 0 0/.35);padding:30px 26px;width:100%;max-width:400px}
.auth-card .logo{margin:0 auto 14px}
.auth-card h1{font-size:22px;text-align:center}
.auth-card .sub{text-align:center;color:var(--ink-soft);font-size:13.5px;margin:6px 0 20px}
.qr-box{display:grid;place-items:center;background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px;margin:0 auto 14px;max-width:240px}
.qr-box svg,.qr-box img{width:100%;height:auto}
.codes{display:grid;grid-template-columns:1fr 1fr;gap:8px;font-family:ui-monospace,monospace;font-size:13px;margin:14px 0}
.codes span{background:var(--ground);border:1px solid var(--line);border-radius:6px;padding:7px 10px;text-align:center}

/* misc */
.grid-2{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
@media(min-width:1024px){.grid-2{grid-template-columns:minmax(0,1fr) 380px;align-items:start}}
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:14px}
.filters .in{width:auto;min-width:140px}
.filters input[type=search].in{flex:1;min-width:200px}
.pagination{display:flex;gap:6px;margin:18px 0;flex-wrap:wrap}
.pagination a,.pagination span{padding:8px 13px;border:1px solid var(--line);border-radius:8px;font-size:13.5px;background:var(--card)}
.pagination .current{background:var(--indigo);color:#fff;border-color:var(--indigo)}
.pagination a:hover{border-color:var(--indigo);text-decoration:none}
.tree{list-style:none;padding-left:0;margin:0}
.tree ul{list-style:none;padding-left:22px;border-left:1px solid var(--line);margin:6px 0 6px 15px}
.tree li{padding:5px 0}
.muted{color:var(--ink-soft)}
.mt0{margin-top:0}

/* ============ pictures of the house (D-064) ============
   The categorical palette. Charts never hardcode a colour: they ask for
   --c1…--c10 so light and dark re-tint every picture at once. */
:root{
  --c1:#3E4291; --c2:#B98A2E; --c3:#2E7D5B; --c4:#B8432F; --c5:#33526E;
  --c6:#6B3E82; --c7:#A8632B; --c8:#206147; --c9:#8F3B5C; --c10:#5B6180;
  --wash:.16;
}
@media (prefers-color-scheme: dark){:root{
  --c1:#8B90E4; --c2:#E0B45C; --c3:#5BBD94; --c4:#E37E6C; --c5:#7FA8CE;
  --c6:#B48ACB; --c7:#DDA06A; --c8:#6FC0A0; --c9:#D98BAB; --c10:#A0A6C4;
  --wash:.26;
}}
:root[data-theme="light"]{
  --c1:#3E4291; --c2:#B98A2E; --c3:#2E7D5B; --c4:#B8432F; --c5:#33526E;
  --c6:#6B3E82; --c7:#A8632B; --c8:#206147; --c9:#8F3B5C; --c10:#5B6180;
  --wash:.16;
}
:root[data-theme="dark"]{
  --c1:#8B90E4; --c2:#E0B45C; --c3:#5BBD94; --c4:#E37E6C; --c5:#7FA8CE;
  --c6:#B48ACB; --c7:#DDA06A; --c8:#6FC0A0; --c9:#D98BAB; --c10:#A0A6C4;
  --wash:.26;
}

.grid-ch{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
@media(min-width:860px){.grid-ch{grid-template-columns:1fr 1fr}}

.ch-fig{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.ch-fig>svg{flex:0 1 auto;max-width:100%;height:auto}
.ch-legend{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px;min-width:160px;max-width:320px;flex:1;font-size:12.5px}
.ch-legend li{display:flex;align-items:center;gap:8px;line-height:1.35}
.ch-legend .sw{width:10px;height:10px;border-radius:3px;flex:none}
.ch-legend .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ch-legend .vl{font-variant-numeric:tabular-nums;font-weight:600}
.ch-legend .pc{color:var(--ink-soft);font-variant-numeric:tabular-nums;min-width:36px;text-align:right}
.ch-legend a{color:inherit}
.ch-legend a:hover{color:var(--indigo)}

.ch-bars{display:flex;flex-direction:column;gap:9px}
.ch-bar{display:grid;grid-template-columns:minmax(80px,32%) minmax(0,1fr) auto;gap:10px;align-items:center;font-size:13px}
.ch-bar .nm{overflow:hidden}
.ch-bar .nm b{font-weight:600;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ch-bar .nm span{display:block;font-size:11.5px;color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ch-bar .track{display:block;height:12px;border-radius:6px;background:var(--indigo-tint);overflow:hidden}
.ch-bar .fill{display:block;height:100%;border-radius:6px;min-width:3px}
.ch-bar .vl{font-variant-numeric:tabular-nums;font-weight:600;min-width:3.2ch;text-align:right;font-size:13px}
.ch-bar .vl small{display:block;font-weight:400;font-size:11px;color:var(--ink-soft)}
/* D-099: a bar with a door is the door — the whole row responds, and says so on hover */
a.ch-bar:hover .nm b,a.ch-bar:focus-visible .nm b{color:var(--pri);text-decoration:underline}
a.ch-bar:hover .fill{filter:brightness(1.12)}

.ch-stack{display:flex;height:18px;border-radius:9px;overflow:hidden;background:var(--line)}
.ch-stack i{display:block;height:100%;min-width:2px}
.ch-stack-key{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px;font-size:12.5px}
.ch-stack-key span{display:inline-flex;align-items:center;gap:6px}
.ch-stack-key i{width:10px;height:10px;border-radius:3px;display:inline-block}

.ch-read{display:flex;gap:9px;align-items:flex-start;margin-top:11px;font-size:12.5px;color:var(--ink-soft);border-top:1px dashed var(--line);padding-top:9px}
.ch-read .ic{font-size:14px;line-height:1.25;flex:none}
.ch-read b{color:var(--ink);font-weight:600}
.ch-empty{font-size:12.5px;color:var(--ink-soft);padding:16px;text-align:center;border:1px dashed var(--line);border-radius:8px}

.ch-heat{display:grid;gap:3px}
.ch-heat .cell{border-radius:3px;height:15px}
.ch-heat .hd{font-size:10px;color:var(--ink-soft);text-align:center;white-space:nowrap;overflow:hidden}
.ch-heat .rw{font-size:11.5px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:4px}

.ch-pyr{display:flex;flex-direction:column;gap:4px}
.ch-pyr .row{display:grid;grid-template-columns:1fr 68px 1fr;gap:8px;align-items:center;font-size:12px}
.ch-pyr .l{display:flex;justify-content:flex-end;align-items:center;gap:6px}
.ch-pyr .r{display:flex;align-items:center;gap:6px}
.ch-pyr i{display:block;height:14px;border-radius:3px;min-width:2px}
.ch-pyr .band{text-align:center;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.ch-pyr .n{font-size:11px;color:var(--ink-soft);font-variant-numeric:tabular-nums}

.ch-axis{font-size:10.5px;fill:var(--ink-soft)}
.ch-grid{stroke:var(--line);stroke-width:1;stroke-dasharray:2 4}
.ch-dot{stroke:var(--card);stroke-width:2}
.ch-wafl rect{shape-rendering:crispEdges}
/* D-068 — a chart segment that is also a door */
.ch-hit{cursor:pointer}
.ch-hit:hover rect,.ch-hit:hover path,.ch-hit:focus rect,.ch-hit:focus path{opacity:.78}
.ch-hit:focus-visible{outline:2px solid var(--pri);outline-offset:1px}

/* D-068 — the glossary's quiet ⓘ. No JavaScript: opens on hover AND on focus,
   so a keyboard reaches it; never printed; flips to the left near the edge. */
.ex{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:15px;height:15px;flex:none;margin-left:5px;vertical-align:middle;cursor:help;outline:none}
.ex>i{display:grid;place-items:center;width:15px;height:15px;border-radius:50%;
  border:1px solid var(--line);background:var(--wash-bg);color:var(--ink-soft);
  font-family:Georgia,serif;font-style:italic;font-size:10px;font-weight:700;line-height:1}
.ex:hover>i,.ex:focus>i{border-color:var(--pri);color:var(--pri);background:var(--card)}
.ex:focus-visible>i{box-shadow:0 0 0 2px var(--indigo-tint)}
.ex-pop{position:absolute;z-index:60;left:50%;transform:translateX(-50%);top:calc(100% + 7px);
  width:min(290px,72vw);display:none;flex-direction:column;gap:5px;
  background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 11px;
  box-shadow:0 10px 30px rgba(16,18,44,.16);text-align:left;
  font-size:11.5px;line-height:1.5;color:var(--ink);font-weight:400;white-space:normal;letter-spacing:0}
.ex:hover .ex-pop,.ex:focus .ex-pop,.ex:focus-within .ex-pop{display:flex}
.ex-pop b{font-size:12px;letter-spacing:.01em}
.ex-pop em{font-style:normal;font-weight:600;color:var(--ink-soft)}
.ex-how,.ex-act{color:var(--ink-soft);font-size:11px;border-top:1px dashed var(--line);padding-top:5px}
.grid-kpi .tile:nth-last-child(-n+2) .ex-pop,.rowline:last-child .ex-pop{top:auto;bottom:calc(100% + 7px)}

/* D-072 — the rhythms sheet */
.gather-grid{display:grid;gap:9px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.gather-tile{border:1px solid var(--line);border-radius:9px;padding:8px 9px;background:var(--card);display:grid;gap:6px}
.gather-head{display:flex;gap:7px;align-items:center}
.gather-head .in{font-size:12.5px;padding:5px 7px}
.gather-tile textarea{font-size:11.5px;line-height:1.5;font-family:inherit}

/* D-072 — the week ahead: seven days of ground worth taking */
.week-plan{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-top:10px}
.wp-day{border:1px solid var(--line);border-radius:10px;padding:9px 10px;background:var(--card);display:flex;flex-direction:column;gap:7px}
.wp-day.on{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold-tint)}
.wp-date{font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--ink-soft);display:flex;gap:6px;align-items:center}
.wp-spot{border-top:1px dashed var(--line);padding-top:6px;display:flex;flex-direction:column;gap:2px}
.wp-spot:first-of-type{border-top:0;padding-top:0}
.wp-spot b{font-size:12.5px;font-variant-numeric:tabular-nums;color:var(--pri)}
.wp-name{font-size:13px;font-weight:600;line-height:1.25}
.wp-why{font-size:11px;color:var(--ink-soft);line-height:1.4}
.wp-tags{display:flex;gap:4px;flex-wrap:wrap;margin-top:3px}
.wp-tags .tag{font-size:10px;padding:1px 6px}

/* D-069 — a row of small pictures side by side, wrapping on narrow screens */
.ch-row{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));align-items:start}
details.card>summary{list-style:none}
details.card>summary::-webkit-details-marker{display:none}
details.card>summary::after{content:"▾";float:right;color:var(--ink-soft);font-size:12px}
details.card[open]>summary::after{content:"▴"}

/* D-068 — the glossary page */
.gl-group{margin-bottom:6px}
.gl-item{border:1px solid var(--line);border-radius:10px;padding:11px 13px;margin-bottom:8px;background:var(--card)}
.gl-item h3{margin:0 0 4px;font-size:14px}
.gl-item p{margin:0 0 5px;font-size:12.5px;line-height:1.55}
.gl-item .m{color:var(--ink-soft);font-size:11.5px;line-height:1.5;margin:0 0 4px}
.gl-item .m b{color:var(--ink)}

/* D-067 — the switchboard of the whole house */
.mod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:10px}
.mod-tile{border:1px solid var(--line);border-radius:10px;padding:11px 12px;background:var(--card);display:flex;flex-direction:column;gap:8px}
.mod-tile.resting{background:var(--wash-bg);border-style:dashed}
.mod-tile.resting .mod-head>span>b{color:var(--ink-soft)}
.mod-head{display:flex;gap:9px;align-items:flex-start;margin:0;cursor:pointer;font-size:13.5px}
.mod-head input{margin-top:3px;flex:none}
.mod-head .hint{font-size:11.5px;line-height:1.45}
.mod-subs{display:grid;gap:6px;padding-left:23px;border-left:2px solid var(--line);margin-left:5px}
.mod-subs .hint{font-size:11.5px}
.mod-foot{font-size:10.5px;margin:0;color:var(--ink-soft);border-top:1px dashed var(--line);padding-top:7px}

/* D-078 — the browser's share of the work.
   A dashboard is a tall column of cards, and the browser lays out and paints
   every one of them — including the twenty screens nobody has scrolled to.
   content-visibility lets it skip the off-screen ones until they approach the
   viewport; contain-intrinsic-size gives it a size to reserve meanwhile, so
   the scrollbar does not jump as they come into view.

   Deliberately NOT applied to the first card (a dashboard's first screen must
   paint immediately) and not to anything inside a <details> drawer, whose
   height is already zero when closed. Unsupported browsers simply ignore it.
   No JavaScript, and nothing about the page changes when printing. */
@supports (content-visibility: auto) {
  @media screen {
    .card + .card { content-visibility: auto; contain-intrinsic-size: auto 420px; }
  }
}

/* D-073 — THE FINDER. One box in the header on every page, and the room it opens. */
/* THE HEADER, MEASURED. Four links, five drawers, the glossary, the search
   box, sign-out and the avatar come to roughly 1,350px — more than the 1,180px
   the page body uses, which is why the bar was already pushing the page
   sideways between 1024px and 1350px before the search box existed. Each piece
   now steps aside at the width where it stops fitting, in order of how little
   it is missed: the church name, then the full box (an icon takes its place),
   then the whole top nav (the bottom bar takes over). Verified by measuring
   scrollWidth at every tier — the page never scrolls sideways. */
.find-box{display:none;align-items:center;gap:7px;background:rgba(255,255,255,.08);border:1px solid var(--hero-line);
  border-radius:999px;padding:0 12px;height:34px;flex:0 1 168px;min-width:0}
.find-box:focus-within{flex-basis:250px}
.church{display:none}
@media(min-width:1500px){.church{display:block}}
@media(max-width:1499px){.top-nav>a,.top-nav .drawer>summary{padding:8px 8px;font-size:12.5px}}
.find-box svg{color:var(--hero-soft);flex:none}
.find-box input{border:0;background:transparent;color:var(--hero-ink);font-size:13px;font-family:inherit;
  width:100%;padding:0;outline:none}
.find-box input::placeholder{color:var(--hero-soft)}
.find-box:focus-within{border-color:var(--gold-bright);background:rgba(255,255,255,.12)}
.find-mini{display:grid;place-items:center;width:34px;height:34px;border-radius:999px;color:var(--hero-soft);
  border:1px solid var(--hero-line);background:rgba(255,255,255,.06)}
.find-mini:hover{color:var(--gold-bright);text-decoration:none}
@media(min-width:1400px){.find-box{display:flex}.find-mini{display:none}}

.find-here{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:12px 0}
.find-here .in{flex:1;min-width:180px;max-width:420px}
.find-big{display:flex;gap:8px;margin-top:14px}
.find-big .in{flex:1;font-size:15px}
.find-eg{margin:8px 0 0;padding-left:18px;font-size:13px;line-height:1.9}
.find-list{display:grid;gap:2px}
.find-row{padding:10px 0;border-top:1px solid var(--line);display:grid;gap:8px}
.find-row:first-child{border-top:0;padding-top:2px}
.find-main{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px}
.find-title{font-size:14.5px;font-weight:600;color:var(--ink)}
a.find-title:hover{color:var(--indigo)}
.find-badge{flex:none}
.find-sub{width:100%;margin:0;line-height:1.55}
.find-edit{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-start;
  background:var(--card-tint);border:1px solid var(--line);border-radius:10px;padding:9px 10px}
.find-edit .in{flex:1;min-width:200px;font-size:13px}
.find-edit .btn{flex:none}
.find-note{width:100%;margin:0;font-size:11.5px;line-height:1.5}

/* Settings, arrived at from a search: the card that matched glows, and so does
   the exact box, so a thirty-screen page still lands you on one input. */
.set-hit{outline:2px solid var(--indigo);outline-offset:3px;border-radius:10px}
.in:target,.set-field:target .in{outline:2px solid var(--indigo);outline-offset:2px;background:var(--indigo-tint)}
.set-found{background:var(--indigo-tint);border:1px solid var(--indigo);border-radius:10px;
  padding:10px 13px;font-size:13px;margin:12px 0}
.set-found a{font-weight:600}

@media print{
  .nav,.topbar .top-actions,.btn-quiet,.filters,.ex,
  .find-box,.find-mini,.find-big,.find-edit,.find-here{display:none!important}
  .card{break-inside:avoid;box-shadow:none}
  body{background:#fff;padding-bottom:0}
  /* D-103: the crown and the hero band print as ink on paper, not slabs of navy */
  .topbar{background:#fff;border-bottom:1px solid #ccc}
  .topbar .church b{color:#000}
  .topbar .church span{color:#444}
  .hero{background:none;color:#000;border:1px solid #ccc;break-inside:avoid}
  .hero .eyebrow,.hero .hint,.hero p{color:#444}
  .hero-kpis .hk span{color:#444}
  .hero-emblem{display:none}
}

/* D-081 — the "How this works" door a room shows into its own chapter. */
.page-help{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;
  color:var(--ink-soft);background:var(--card);border:1px solid var(--line);border-radius:999px;
  padding:5px 12px;margin:8px 0 0;min-height:32px}
.page-help:hover{color:var(--indigo);border-color:var(--indigo);text-decoration:none}
/* On a phone it is a thing you tap, so it obeys the platform's 44px rule. */
@media (pointer: coarse), (max-width: 720px){.page-help{min-height:44px;padding:8px 14px}}
@media print{.page-help{display:none}}

/* D-092 — the usher's one line. Same shape as the install invitation so a new
   person meets one visual idea, not two, and gold rather than indigo so the
   two are never mistaken for each other. */
.wiz-strip{background:var(--gold-tint);border-color:color-mix(in srgb,var(--gold) 32%,var(--line))}
.wiz-strip .install-say svg{color:var(--gold-mark)}
@media print{.wiz-strip{display:none}}

/* D-092c — the walk bar. It sits above the real room it is describing, so it
   has to be unmistakably not part of that room: gold, full width, and gone the
   moment the walk ends. */
.walk-bar{display:flex;gap:14px;align-items:center;flex-wrap:wrap;
  background:var(--gold-tint);border:1px solid color-mix(in srgb,var(--gold) 40%,var(--line));
  border-radius:12px;padding:12px 14px;margin:0 0 16px}
.walk-say{display:flex;gap:10px;align-items:flex-start;flex:1 1 300px;min-width:0}
.walk-say b{font-size:14px}
.walk-say .hint{margin:2px 0 0;font-size:12.5px;line-height:1.5}
.walk-do{display:flex;gap:8px;align-items:center;flex:none;flex-wrap:wrap}
@media (max-width:720px){
  .walk-do{flex:1 1 100%}
  .walk-do .btn,.walk-do .btn-quiet{min-height:44px;display:inline-flex;align-items:center}
}
@media print{.walk-bar{display:none}}

/* ---- D-101 Wave 3: the visiting posture ---- */
/* The banner an overseer wears while reading someone else's house: whose
   house, the reading-only promise, and the way home. Gold like the wizard
   strip — present, never alarming. */
.visit-banner{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 14px;padding:10px 14px;border-radius:12px;
  background:var(--gold-tint);border:1px solid color-mix(in srgb,var(--gold) 40%,var(--line));font-size:14px;font-weight:500}
.visit-banner span{flex:1 1 240px;min-width:0}
.visit-banner form{margin:0;flex:none}
@media print{.visit-banner{display:none}}
/* The attendance trail on the level dashboard — a hand-drawn line, no libs. */
.spark{color:var(--gold-mark);display:block}
/* THE WATCH — the field's counsel list: one sentence per finding, its door on the right. */
.watch-list{list-style:none;margin:0;padding:0}
.watch-list li{display:flex;align-items:baseline;gap:10px;padding:8px 0;border-top:1px solid var(--line);font-size:14px}
.watch-list li:first-child{border-top:none}
.watch-list li span{flex:1 1 auto;min-width:0}
/* a TAG in the row is a badge, never the sentence — it must not stretch */
.watch-list li>.tag,.watch-list li span.tag{flex:0 0 auto}
.watch-list li a{flex:none;font-weight:600;white-space:nowrap}

/* ---- D-101 Wave 4: THE WORLD GARRISON ---- */
/* Pure SVG, no script: countries are links, tooltips are native titles.
   Gold ground is held; grey ground waits; pins are the lampstands. */
.wm-frame{overflow:hidden;border-radius:12px;background:color-mix(in srgb,var(--indigo) 4%,var(--ground));border:1px solid var(--line)}
.wm-svg{display:block;width:100%;height:auto}
/* the country frame letterboxes inside a capped height instead of towering */
.wm-svg-country{height:auto;max-height:460px;margin:0 auto}
.wm-c.wm-solo{stroke-width:1.5px}
.wm-c{fill:color-mix(in srgb,var(--ink) 13%,var(--ground));stroke:var(--ground);stroke-width:.6;transition:filter .15s}
.wm-c.wm-held{fill:var(--gold-tint);stroke:var(--gold);stroke-width:.8}
.wm-c.wm-dot{stroke:none}
a:hover .wm-c{filter:brightness(1.12)}
/* D-104: a picked state burns brighter; count heat replaces pins at scale */
.wm-picked{fill:color-mix(in srgb,var(--gold) 45%,var(--gold-tint));stroke:var(--gold);stroke-width:1.2}
.wm-count{font:700 11px 'Inter',sans-serif;fill:var(--indigo);paint-order:stroke;stroke:var(--card);stroke-width:2.5px}
.wm-pin{fill:var(--gold-mark);stroke:var(--card);stroke-width:1.2}
.wm-pin-mine{fill:var(--indigo);stroke:var(--gold);stroke-width:1.4}
.wm-pin-dim{opacity:.3}
/* every colour above rides the theme variables — dark mode needs no override */

/* THE GROUND LADDER — one church's command, rung by rung, each with the
   exact streets it holds. Gold rails carry the eye down the chain. */
.lad-pcf{margin:0 0 18px}
.lad-pcf:last-child{margin-bottom:4px}
.lad-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:7px 10px;border-radius:10px}
.lad-row:hover{background:color-mix(in srgb,var(--gold) 6%,transparent)}
.lad-row b{font-size:14px}
.lad-top{background:color-mix(in srgb,var(--indigo) 5%,transparent)}
.lad-kind{flex:none;width:76px;font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-soft);line-height:1.2}
.lad-kids{margin-left:14px;padding-left:12px;border-left:2px solid color-mix(in srgb,var(--gold) 38%,var(--line))}
.lad-ground{display:flex;flex-wrap:wrap;gap:5px;padding:2px 10px 8px 96px}
.lad-spot{font-size:12px;font-weight:600;padding:2px 8px;border-radius:7px;white-space:nowrap}
.lad-street{color:var(--gold);background:var(--gold-tint)}
.lad-bldg{color:var(--indigo);background:var(--indigo-tint)}
.gbar{display:inline-block;width:64px;height:6px;border-radius:4px;background:var(--line);overflow:hidden;flex:none}
.gbar i{display:block;height:100%;background:var(--gold-mark)}
@media (max-width:720px){.lad-ground{padding-left:12px}.lad-kind{width:auto}}

/* The field's greeting — one true breath before the numbers. */
.field-hello{font-size:15px;font-weight:500;margin:2px 0 4px}
/* The honours — gold-edged, because recognition is the point. */
.honours-card{border:1px solid color-mix(in srgb,var(--gold) 45%,var(--line));background:linear-gradient(180deg,color-mix(in srgb,var(--gold) 7%,var(--card)),var(--card) 60%)}
/* The lampstands breathe — a church's charge is alive, not a dot on paper. */
@keyframes wm-breathe{0%,100%{opacity:1}50%{opacity:.55}}
.wm-pin-mine{animation:wm-breathe 2.8s ease-in-out infinite}
@media (prefers-reduced-motion: reduce){.wm-pin-mine{animation:none}}

/* ---- D-101 Wave 5: LEVEL VERBS ---- */
/* The command room's field rows — two or three inputs abreast, none squeezed. */
.fgrid{display:grid;gap:10px 16px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
/* The word from above — indigo-edged: authority speaking, not an alarm. */
.word-card{border:1px solid color-mix(in srgb,var(--indigo) 35%,var(--line));background:linear-gradient(180deg,color-mix(in srgb,var(--indigo) 6%,var(--card)),var(--card) 60%)}
.word-card blockquote{margin:6px 0 2px;padding:0 0 0 12px;border-left:3px solid color-mix(in srgb,var(--indigo) 45%,var(--line));white-space:pre-line}

/* ---- D-103: THE HERO BAND — the room's own proclamation. -----------------
   Every command room (and the pastor's own morning) opens with a navy band:
   the level's name in Fraunces, the emblem watermarked at its shoulder, and
   the vital numbers standing in gold-lit ivory. One component, worn by HQ
   and a group pastor alike — the same cloth at every level of the chain. */
.hero{position:relative;overflow:hidden;border-radius:14px;margin-top:16px;padding:20px 22px 18px;
  background:radial-gradient(130% 200% at 92% -40%,var(--navy-2) 0%,var(--navy) 58%);
  color:var(--hero-ink);border:1px solid color-mix(in srgb,var(--gold) 30%,var(--navy));box-shadow:var(--shadow)}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,transparent 4%,var(--gold-bright) 50%,transparent 96%);opacity:.75}
.hero .eyebrow{color:var(--gold-bright)}
.hero h1{color:inherit;font-size:clamp(23px,4vw,31px);margin:2px 0 0}
.hero p{margin:6px 0 0}
.hero .hint,.hero p{color:var(--hero-soft)}
.hero a{color:var(--gold-bright)}
.hero .tag{background:rgba(255,255,255,.12);color:var(--hero-ink)}
.hero-emblem{position:absolute;right:-18px;top:50%;transform:translateY(-50%);width:190px;height:auto;
  opacity:.16;pointer-events:none;user-select:none}
@media(max-width:720px){.hero-emblem{width:130px;right:-26px}}
.hero-kpis{display:flex;gap:10px 26px;flex-wrap:wrap;margin-top:14px;position:relative}
.hero-kpis .hk{display:flex;flex-direction:column;gap:2px;min-width:80px}
.hero-kpis .hk b{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:25px;line-height:1.1;font-variant-numeric:tabular-nums}
.hero-kpis .hk span{font-size:10.5px;color:var(--hero-soft);letter-spacing:.06em;text-transform:uppercase;font-weight:600}

/* The delta pill — which way a number moved, said in one breath. On card it
   wears the semantic tints; on the navy band it wears lamplight versions. */
.delta{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:700;border-radius:6px;
  padding:1px 6px;font-variant-numeric:tabular-nums;white-space:nowrap}
.d-up{color:var(--good);background:var(--good-tint)}
.d-down{color:var(--bad);background:var(--bad-tint)}
.d-flat{color:var(--ink-soft);background:var(--wash-bg)}
.hero .d-up{color:#93E2BE;background:rgba(94,190,148,.18)}
.hero .d-down{color:#F4A896;background:rgba(227,126,108,.18)}
.hero .d-flat{color:var(--hero-soft);background:rgba(255,255,255,.10)}

/* THE INTELLIGENCE — the field speaking in sentences. A gold-ruled cousin of
   the watch list: each finding one line, its evidence bold, its door at hand. */
.intel-card{border-left:3px solid var(--gold-mark)}
.intel-list{list-style:none;margin:0;padding:0}
.intel-list li{display:flex;align-items:baseline;gap:10px;padding:8px 0;border-top:1px dashed var(--line);font-size:13.5px;line-height:1.5}
.intel-list li:first-child{border-top:none}
.intel-list li>span:not(.intel-ic){flex:1 1 auto;min-width:0}
.intel-list li>a{flex:none;font-weight:600;white-space:nowrap}
.intel-list b{font-variant-numeric:tabular-nums}
.intel-ic{flex:none;font-size:14px;line-height:1.4}

/* The podium — the league's first three, celebrated the way honours are. */
.podium{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-top:4px}
.podium .step{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--card-tint);
  display:flex;flex-direction:column;gap:3px;min-width:0}
.podium .step:first-child{border-color:color-mix(in srgb,var(--gold) 55%,var(--line));
  background:linear-gradient(180deg,color-mix(in srgb,var(--gold) 12%,var(--card)),var(--card) 70%)}
.podium .medal{font-size:18px;line-height:1}
.podium b{font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.podium .hint{font-size:11.5px}

/* ==========================================================================
   D-105 — THE HEAT OF THE FIELD. The choropleth's five golds, the lens
   chips, the sleek tip, the living frame's zoom, the boards' heat cells,
   movement arrows, sparks, and the month matrix. Every colour is mixed
   from the theme's own variables, so all four theme states stand.
   ========================================================================== */

/* the lenses — the same map, repainted by the figure you ask it for */
.lens-row{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.lens-chip{font-size:12px;font-weight:600;padding:5px 11px;border-radius:999px;border:1px solid var(--line);
  color:var(--ink-soft);text-decoration:none;background:var(--card-tint);white-space:nowrap;
  transition:border-color .15s,color .15s}
.lens-chip:hover{border-color:var(--gold);color:var(--ink);text-decoration:none}
.lens-chip.on{background:color-mix(in srgb,var(--gold) 18%,var(--card));border-color:var(--gold);color:var(--ink)}

/* the five golds — quantile steps, cooler to stronger */
.wm-c.wm-h1{fill:color-mix(in srgb,var(--gold) 16%,var(--ground))}
.wm-c.wm-h2{fill:color-mix(in srgb,var(--gold) 32%,var(--ground))}
.wm-c.wm-h3{fill:color-mix(in srgb,var(--gold) 50%,var(--ground))}
.wm-c.wm-h4{fill:color-mix(in srgb,var(--gold) 72%,var(--ground))}
.wm-c.wm-h5{fill:color-mix(in srgb,var(--gold) 94%,var(--ground))}
.wm-legend{display:flex;align-items:center;gap:5px;margin-top:8px;flex-wrap:wrap}
.wm-legend i{width:26px;height:10px;border-radius:3px;border:1px solid var(--line)}
.wm-legend i.wm-h1{background:color-mix(in srgb,var(--gold) 16%,var(--ground))}
.wm-legend i.wm-h2{background:color-mix(in srgb,var(--gold) 32%,var(--ground))}
.wm-legend i.wm-h3{background:color-mix(in srgb,var(--gold) 50%,var(--ground))}
.wm-legend i.wm-h4{background:color-mix(in srgb,var(--gold) 72%,var(--ground))}
.wm-legend i.wm-h5{background:color-mix(in srgb,var(--gold) 94%,var(--ground))}

/* the finer frame: a quiet ocean wash, a gold hairline, hovered ground lifts */
.wm-frame{position:relative;
  background:radial-gradient(120% 90% at 50% 8%,color-mix(in srgb,var(--indigo) 9%,var(--ground)),
    color-mix(in srgb,var(--indigo) 3%,var(--ground)) 62%);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--gold) 14%,transparent)}
.wm-svg a:hover .wm-c{stroke:var(--gold);stroke-width:1.1}

/* the sleek tip — one floating card that follows the pointer */
.wm-tip{position:fixed;z-index:120;pointer-events:none;max-width:280px;padding:8px 11px;border-radius:10px;
  background:var(--navy);color:#F4F2EA;font-size:12.5px;line-height:1.45;
  border:1px solid color-mix(in srgb,var(--gold) 55%,transparent);box-shadow:0 8px 24px rgba(0,0,0,.35)}

/* D-111: an out-of-scope pin is visible but click-transparent — it must
   never block the state door beneath it */
.wm-pin-quiet{pointer-events:none;opacity:.55}

/* the living frame — zoom buttons and the grab of a map you can pull */
.wm-zoom{position:absolute;top:10px;right:10px;display:flex;flex-direction:column;gap:5px;z-index:5}
.wm-zoom button{width:30px;height:30px;border-radius:9px;border:1px solid var(--line);background:var(--card);
  color:var(--ink);font-size:15px;font-weight:700;line-height:1;cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.12)}
.wm-zoom button:hover{border-color:var(--gold)}
.wm-svg.wm-can-zoom{touch-action:pan-y;cursor:grab}
.wm-svg.wm-dragging{cursor:grabbing}

/* heat cells on the tier boards — gold is strength, red is burden */
td.hcell{font-variant-numeric:tabular-nums}
td.hcell.hg1{background:color-mix(in srgb,var(--gold) 7%,transparent)}
td.hcell.hg2{background:color-mix(in srgb,var(--gold) 13%,transparent)}
td.hcell.hg3{background:color-mix(in srgb,var(--gold) 20%,transparent)}
td.hcell.hg4{background:color-mix(in srgb,var(--gold) 28%,transparent)}
td.hcell.hg5{background:color-mix(in srgb,var(--gold) 38%,transparent)}
td.hcell.hb1{background:color-mix(in srgb,var(--bad) 6%,transparent)}
td.hcell.hb2{background:color-mix(in srgb,var(--bad) 11%,transparent)}
td.hcell.hb3{background:color-mix(in srgb,var(--bad) 17%,transparent)}
td.hcell.hb4{background:color-mix(in srgb,var(--bad) 24%,transparent)}
td.hcell.hb5{background:color-mix(in srgb,var(--bad) 32%,transparent)}

/* movement against the thirty days before */
.delta{font-size:11px;font-weight:700;white-space:nowrap}
.delta-up{color:var(--good)}
.delta-down{color:var(--bad)}
.delta-flat{color:var(--ink-soft)}

/* the six-month spark beside every unit */
.trend-spark{display:inline-flex;align-items:flex-end;gap:2px;height:18px;width:54px;vertical-align:middle}
.trend-spark i{flex:1 1 0;background:var(--gold-mark);border-radius:1.5px;min-height:2px;opacity:.85}

/* the month heat matrix — six months of harvest, unit by unit */
.hm{border-collapse:separate;border-spacing:3px;width:100%}
.hm th{font-size:11px;color:var(--ink-soft);font-weight:600;text-align:left;padding:2px 6px;white-space:nowrap}
.hm thead th{text-align:center}
.hm td.hmc{min-width:44px;text-align:center;font-size:11.5px;font-weight:700;padding:6px 4px;border-radius:6px;
  background:color-mix(in srgb,var(--ink) 5%,transparent);color:var(--ink-soft);font-variant-numeric:tabular-nums}
.hm td.hmc.hg1{background:color-mix(in srgb,var(--gold) 14%,var(--card));color:var(--ink)}
.hm td.hmc.hg2{background:color-mix(in srgb,var(--gold) 28%,var(--card));color:var(--ink)}
.hm td.hmc.hg3{background:color-mix(in srgb,var(--gold) 45%,var(--card));color:var(--ink)}
.hm td.hmc.hg4{background:color-mix(in srgb,var(--gold) 66%,var(--card));color:#182352}
.hm td.hmc.hg5{background:color-mix(in srgb,var(--gold) 88%,var(--card));color:#182352}

/* D-106 — the street-to-house journey: stat tiles joined by pass-through
   gauges. A funnel would be crushed flat by its own honest drops. */
.fj{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;padding:6px 0}
.fj-tile{display:flex;flex-direction:column;align-items:center;min-width:74px;padding:10px 12px;
  border:1px solid var(--line);border-radius:12px;background:var(--card-tint)}
.fj-tile b{font-size:22px;font-variant-numeric:tabular-nums;line-height:1.1}
.fj-tile span{font-size:11px;color:var(--ink-soft);text-align:center;line-height:1.3;margin-top:2px}
.fj-tile.fj-gold{border-color:color-mix(in srgb,var(--gold) 55%,var(--line));
  background:color-mix(in srgb,var(--gold) 14%,var(--card))}
.fj-step{display:flex;flex-direction:column;align-items:center;gap:1px}
.fj-step i{font-style:normal;font-size:11px;font-weight:700;color:var(--ink-soft);
  border:1px solid var(--line);border-radius:999px;padding:2px 7px;background:var(--card)}
.fj-step::after{content:'→';color:var(--gold-mark);font-weight:700;font-size:14px;line-height:1}

/* ================= D-114 — THE FIELD IN THEIR POCKET ================= */
/* The offline chip: the one honest line about what this device still owes
   the house. Fixed above the phone bar; never covers the page's own work. */
.oq-chip{position:fixed;left:10px;bottom:calc(64px + env(safe-area-inset-bottom));z-index:60;
  max-width:min(92vw,420px);padding:8px 14px;border-radius:999px;cursor:pointer;
  background:var(--navy,#182352);color:#f5f3ec;border:1px solid rgba(255,255,255,.25);
  font-size:12.5px;font-weight:600;box-shadow:0 4px 14px rgba(0,0,0,.25)}
@media(min-width:1200px){.oq-chip{bottom:14px}}
/* A record queued with no signal answers with this banner in place of the redirect */
.oq-note{margin:8px 0}
/* A queued tick wears its state on its own row */
.q-tag{font-size:10.5px;font-weight:700;color:var(--gold-mark,#8a6d1f);margin-left:6px;white-space:nowrap}

/* ================= D-121 — THE MEMBER'S OWN DOOR ================= */
/* A house of its own: warm navy, generous type, four calm destinations. */
.md-body{margin:0;background:var(--wash,#f3f2ee);min-height:100vh;
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  padding-bottom:calc(74px + env(safe-area-inset-bottom))}
.md-top{display:flex;gap:10px;align-items:center;background:#182352;color:#f5f3ec;padding:12px 16px}
.md-top img{width:34px;height:34px}
.md-top b{display:block;font-size:14.5px;line-height:1.15}
.md-top span{font-size:11px;color:#c9a44a}
.md-banner{margin:10px 14px 0;border-left:3px solid #c9a44a}
.md-main{max-width:560px;margin:0 auto;padding:14px}
.md-hero{background:linear-gradient(160deg,#182352,#232f66);color:#f5f3ec;border-radius:18px;
  padding:20px 18px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.md-eyebrow{font-size:12px;color:#c9a44a;letter-spacing:.4px}
.md-hero h1{margin:2px 0 0;font-size:30px}
.md-birthday{margin:6px 0 0;font-size:13px;color:#ffd98a}
.md-ring{display:flex;flex-direction:column;align-items:center;gap:2px}
.md-ring span{font-size:10.5px;color:#ded9c9}
.md-card{background:var(--card,#fff);border:1px solid var(--line,#e5e2da);border-radius:16px;
  padding:14px 16px;margin-top:12px;display:flex;flex-direction:column;gap:3px}
.md-card b{font-size:15.5px}
.md-card > span{font-size:12.5px;color:var(--ink-soft,#6b675e)}
.md-k{font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:#8a6d1f}
.md-next{border-left:4px solid #c9a44a}
.md-count{font-variant-numeric:tabular-nums;font-weight:700;color:#182352}
.md-grid{display:grid;grid-template-columns:1fr;gap:0}
@media(min-width:520px){.md-grid{grid-template-columns:1fr 1fr;gap:12px}.md-grid .md-card{margin-top:12px}}
.md-bar{height:8px;border-radius:99px;background:var(--line,#e5e2da);overflow:hidden;margin-top:6px}
.md-bar i{display:block;height:100%;background:linear-gradient(90deg,#c9a44a,#e3c983);border-radius:99px}
.md-cards{display:flex;gap:10px;overflow-x:auto;padding:4px 0}
.md-ecard{flex:0 0 128px;border:1px solid var(--line,#e5e2da);border-radius:13px;padding:12px;
  text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:2px;background:var(--card-tint,#faf9f5)}
.md-ecard span{font-size:20px}
.md-ecard b{font-size:12.5px;line-height:1.25}
.md-ecard i{font-style:normal;font-size:10.5px;color:var(--ink-soft,#6b675e)}
.md-in{width:100%;box-sizing:border-box;padding:11px 12px;border-radius:10px;border:1px solid var(--line,#d8d4ca);
  background:var(--card,#fff);color:inherit;font-size:15px;font-family:inherit}
.md-btn{margin-top:8px;padding:12px 18px;border:0;border-radius:11px;background:#182352;color:#f5f3ec;
  font-weight:700;font-size:14px;cursor:pointer}
.md-lbl{font-size:12px;color:var(--ink-soft,#6b675e);display:flex;flex-direction:column;gap:4px}
.md-quiet{font-size:11.5px;color:var(--ink-soft,#6b675e)}
.md-nav{position:fixed;left:0;right:0;bottom:0;display:flex;background:#182352;color:#ded9c9;
  padding-bottom:env(safe-area-inset-bottom);border-top:1px solid rgba(255,255,255,.12)}
.md-nav a,.md-nav button{flex:1 1 0;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:9px 4px 7px;font-size:10.5px;text-decoration:none;color:inherit;background:none;border:0;
  font-family:inherit;cursor:pointer;min-height:48px}
.md-nav .on{color:#c9a44a}
.md-nav form{flex:1 1 0;display:flex}
.md-nav form button{flex:1}
/* the card a member is proud to show */
.md-idcard{background:linear-gradient(150deg,#182352,#2a3a7a);color:#f5f3ec;border-radius:20px;
  padding:26px 22px;margin-top:14px;display:flex;flex-direction:column;align-items:center;gap:5px;
  border:1px solid rgba(201,164,74,.5);box-shadow:0 10px 30px rgba(24,35,82,.35)}
.md-idemblem{width:44px;height:44px}
.md-idchurch{font-size:11.5px;letter-spacing:1.2px;text-transform:uppercase;color:#c9a44a}
.md-idav{width:64px;height:64px;font-size:22px;margin-top:8px;border:2px solid #c9a44a}
.md-idname{font-size:21px;margin-top:6px;text-align:center}
.md-idstatus{font-size:12px;color:#c9a44a;font-weight:700;letter-spacing:.6px;text-transform:uppercase}
.md-idline{font-size:12.5px;color:#ded9c9;text-align:center}
.md-idrule{width:60px;height:3px;background:#c9a44a;border-radius:2px;margin:12px 0 8px}
.md-idverse{font-size:12px;color:#ded9c9;text-align:center;font-style:italic;max-width:300px;line-height:1.5}
/* the staff-side standing card (members.show) */
.fold-card{border-left:4px solid #8a6d1f}

/* ================= D-122 — THE LIVING INTERFACE ================= */
/* Motion is a gift, never a need: everything here sits behind the reader's
   own preference, and a page with no JS is simply still, never broken. */
@media (prefers-reduced-motion: no-preference){
  /* bars grow the first time a chart is seen — staggered, bounded */
  svg[role="img"]:not(.ch-live) rect{transform:scaleY(1)}
  .ch-live rect{transform-box:fill-box;transform-origin:bottom;
    animation:chGrow .55s cubic-bezier(.22,.9,.35,1) both}
  .ch-live rect:nth-of-type(2){animation-delay:.03s}.ch-live rect:nth-of-type(3){animation-delay:.06s}
  .ch-live rect:nth-of-type(4){animation-delay:.09s}.ch-live rect:nth-of-type(5){animation-delay:.12s}
  .ch-live rect:nth-of-type(6){animation-delay:.15s}.ch-live rect:nth-of-type(7){animation-delay:.18s}
  .ch-live rect:nth-of-type(8){animation-delay:.21s}.ch-live rect:nth-of-type(9){animation-delay:.24s}
  .ch-live rect:nth-of-type(10){animation-delay:.27s}.ch-live rect:nth-of-type(n+11){animation-delay:.3s}
  /* lines and arcs draw themselves */
  .ch-draw{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .9s cubic-bezier(.22,.9,.35,1)}
  .ch-drawn{stroke-dashoffset:0}
  /* KPI tiles arrive with a breath */
  .grid-kpi .tile{animation:tileIn .45s ease-out both}
  .grid-kpi .tile:nth-child(2){animation-delay:.06s}.grid-kpi .tile:nth-child(3){animation-delay:.12s}
  .grid-kpi .tile:nth-child(4){animation-delay:.18s}
  /* the good-news banner wears one pass of gold light */
  .banner{position:relative;overflow:hidden}
  .banner::after{content:'';position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(105deg,transparent 30%,rgba(201,164,74,.28) 50%,transparent 70%);
    transform:translateX(-100%);animation:bannerShine 1.1s ease-out .25s 1 both}
  /* a graduate's gold ring breathes once */
  .gold-ring{animation:goldBreath 1.2s ease-out .3s 1}
}
@keyframes chGrow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes tileIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@keyframes bannerShine{to{transform:translateX(100%)}}
@keyframes goldBreath{0%{box-shadow:0 0 0 0 rgba(201,164,74,.55)}100%{box-shadow:0 0 0 14px rgba(201,164,74,0)}}
/* the empty state, dressed — a hand of line-art instead of a bare sentence */
.empty-art{display:flex;flex-direction:column;align-items:center;gap:8px;padding:22px 12px;text-align:center}
.empty-art svg{width:74px;height:74px;opacity:.9}
.empty-art b{font-size:13.5px;color:var(--ink,#2c2a25)}
.empty-art span{font-size:12px;color:var(--ink-soft,#6b675e);max-width:340px;line-height:1.5}

/* ================= D-123 — THE TIME MACHINE ================= */
.tm-row{display:flex;align-items:center;gap:12px;margin-top:12px;padding:10px 12px;
  border:1px solid var(--line,#e5e2da);border-radius:12px;background:var(--card-tint,#faf9f5)}
.tm-play{width:38px;height:38px;border-radius:50%;border:1px solid var(--line,#d8d4ca);cursor:pointer;
  background:var(--navy,#182352);color:#f5f3ec;font-size:14px;flex:0 0 auto}
.tm-slider{flex:1;accent-color:#c9a44a;min-width:0}
.tm-label{font-variant-numeric:tabular-nums;font-size:13px;color:var(--ink,#2c2a25);
  min-width:64px;text-align:right}

/* ================= D-124 — PEACE OF MIND ================= */
.sp-green .sp-dot{color:var(--good,#3f7d4e)}
.sp-amber .sp-dot{color:var(--gold,#c9a44a)}
.sp-red .sp-dot{color:var(--bad,#c4544a)}
.sp-red{border-color:var(--bad,#c4544a)}
.sp-amber{border-color:var(--gold,#c9a44a)}
.sp-cmd{background:var(--card-tint,#faf9f5);border:1px solid var(--line,#e5e2da);border-radius:10px;
  padding:10px 14px;font-size:13px;overflow-x:auto}

/* ================= D-125 — DATA HEALTH ================= */
.hl-gap{border-color:var(--gold,#c9a44a)}
.tile[href]:hover{box-shadow:0 3px 12px rgba(24,35,82,.12)}