/* TRP Brand Guide 2026, applied to the SIGNED-IN app only.
 *
 * Loaded by templates/base.html AFTER tokens.css, and by nothing else. The 11
 * standalone templates (login + every public form: provisions, supplies,
 * fivefold, spiritualgifts, agreement, prayer feedback, devotional join/member/
 * unsub, onboard confirm) link tokens.css directly and never see this file, so
 * they keep the original teal/navy look. That is deliberate - Mike scoped the
 * rebrand to staff-facing pages. To roll the whole thing back, delete the one
 * <link> in base.html; nothing else needs touching.
 *
 * Palette (TRP Brand Guide 2026, p.17 - these five hexes are the church's):
 *   Midnight Presence #262626 · Deep Water #2F3849 · Sanctified #A68046
 *   Altar Dust #6F6A5F · Light Stone #D8CDBB
 * Fonts (p.22): Cormorant Garamond (wordmark + headings), Inter (body/UI).
 *
 * The status colours further down are NOT from the guide - it doesn't define
 * any. They're derived to sit with the palette, and gold can't serve as one
 * because it's already the accent. Swap them if the church specifies its own.
 */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600;700&family=Inter:wght@400;500;600;700&family=Playfair+Display:wght@500;600;700&display=swap');

:root {
  --trp-navy: #262626;        /* headings */
  --trp-navy-deep: #262626;   /* header bar - dark in BOTH themes */
  --trp-teal: #a68046;        /* the single accent: button fills, active states */
  --trp-teal-dark: #8a6a38;   /* hover, and text-on-light where gold needs contrast */
  --trp-ink: #262626;
  --trp-bg: #fbf9f5;          /* Light Stone tinted right back for a large ground */
  --trp-surface: #f0eadd;
  --trp-border: #e4dccc;
  --trp-panel: #ffffff;
  --trp-periwinkle: #d8cdbb;  /* nav secondary text */
  --trp-font-heading: 'Cormorant Garamond', Georgia, serif;
  --trp-font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --trp-font-accent: 'Inter', system-ui, -apple-system, sans-serif;
  --trp-shadow: 0 1px 2px rgba(38,38,38,.06), 0 8px 24px rgba(38,38,38,.06);
}

html[data-theme="dark"] {
  --trp-navy: #ede8dc;        /* headings must go LIGHT here - tokens.css does the same */
  --trp-navy-deep: #161616;   /* header sits darker than the page ground */
  --trp-teal: #c39c5c;        /* gold lifted so it reads on dark without glowing */
  --trp-teal-dark: #a68046;
  --trp-ink: #ede8dc;
  --trp-bg: #1c1c1c;
  --trp-surface: #39424f;
  --trp-border: #3c4453;
  --trp-panel: #2f3849;       /* Deep Water */
  --trp-periwinkle: #d8cdbb;
  --trp-shadow: 0 1px 2px rgba(0,0,0,.45), 0 8px 24px rgba(0,0,0,.35);
}

/* ---- Top bar (design handoff "Refined two rows" 1b, 2026-07-18) ---------
 * The old single-row .trp-header markup is gone from base.html; this section
 * IS the header now, on new "tb-" and "topbar-" prefixed class names so it can
 * never collide with tokens.css's legacy header rules (those are now
 * referenced only by the design-system preview mocks - no live template
 * renders .trp-header). NB: never write a star-slash class glob inside this
 * comment - it TERMINATES the comment and the stray prose then swallows the
 * @keyframes below (a real shipped bug, caught by Codex).
 * Palette + metrics come from the handoff mock and are FIXED in both themes -
 * the bar was dark in both themes before, so nothing here varies by theme.
 * Wordmarks use Playfair Display per the mock; UI text stays Inter.
 */
@keyframes trpMenuIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

.topbar { background: #1a1613; position: relative; z-index: 50; }
.topbar-row1 {
  display: flex; align-items: center; height: 80px; padding: 0 40px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.tb-brand {
  font-family: 'Playfair Display', serif; font-size: 30px; letter-spacing: .06em;
  color: #f2ede3; line-height: 1; flex: none; text-decoration: none;
}
.tb-brand:hover { text-decoration: none; color: #ffffff; }
.tb-divider { width: 2px; height: 34px; background: #c39a5b; flex: none; margin: 0 22px 0 20px; border-radius: 1px; }
/* Centered in the gap between the TRP mark and the utilities cluster (flex:1),
   NOT in the whole bar - an explicit requirement of the handoff. */
.tb-wordmark {
  flex: 1; text-align: center; font-family: 'Playfair Display', serif;
  font-size: 21px; font-weight: 600; letter-spacing: .34em; color: #e9e2d6;
  white-space: nowrap; overflow: hidden; min-width: 0;
}
.tb-gold { color: #c39a5b; }
/* margin-left:auto is load-bearing below 1240px: the wordmark (the flex:1
   spacer) is hidden there, and without the auto margin the whole cluster -
   bell included - slides LEFT, hanging its right-anchored menus off-screen. */
.tb-utils { display: flex; align-items: center; gap: 14px; flex: none; margin-left: auto; padding-left: 16px; }
.tb-date { font-size: 13px; color: #a99871; white-space: nowrap; }
.tb-vline { width: 1px; height: 24px; background: rgba(255,255,255,.13); }

.tb-iconbtn {
  position: relative; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.15); background: transparent; color: #d5cec1;
  display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
}
.tb-iconbtn:hover { background: rgba(255,255,255,.06); }
.tb-notifdot {
  position: absolute; top: 7px; right: 8px; width: 7px; height: 7px;
  border-radius: 50%; background: #c96b4a; border: 1.5px solid #1a1613;
}

.tb-pill {
  display: flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 20px;
  border: 1px solid rgba(255,255,255,.18); background: transparent; color: #e7e1d5;
  font-size: 13.5px; cursor: pointer; font-family: var(--trp-font-body); white-space: nowrap;
}
.tb-pill:hover { background: rgba(255,255,255,.06); }
.tb-viewas { gap: 9px; padding: 7px 13px; border-color: rgba(255,255,255,.14); background: #241e18; }
.tb-viewas-cur { color: #c39a5b; font-weight: 600; }

.tb-acct {
  display: flex; align-items: center; gap: 10px; padding: 5px 11px 5px 5px;
  border-radius: 24px; border: 1px solid rgba(255,255,255,.14); background: transparent;
  cursor: pointer; font-family: var(--trp-font-body);
}
.tb-acct:hover { background: rgba(255,255,255,.06); }
.tb-avatar {
  width: 30px; height: 30px; border-radius: 50%; background: #2a2219;
  border: 1.5px solid #c39a5b; color: #c39a5b; font-family: 'Playfair Display', serif;
  font-size: 14px; display: flex; align-items: center; justify-content: center; flex: none;
}
.tb-email { font-size: 13px; color: #e7e1d5; }

/* Shared dropdown chrome (bell / View as / account). Fixed dark in both themes
   like the bar itself, so these do NOT use the --trp-panel variables. */
.notif-wrap, .viewas-wrap { position: relative; }
.topbar .who-wrap { position: relative; margin-left: 0; padding-left: 0; border-left: 0; }
.tb-menu {
  position: absolute; top: calc(100% + 14px); right: 0; background: #221c16;
  border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: 8px;
  box-shadow: 0 18px 44px rgba(0,0,0,.5); z-index: 60; animation: trpMenuIn .16s ease;
}
.tb-menu-h { padding: 8px 12px; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: #9c9184; }
.tb-menu-row {
  display: flex; align-items: center; width: 100%; padding: 10px 12px; border-radius: 8px;
  border: none; background: transparent; color: #e7e1d5; font-size: 14px; cursor: pointer;
  font-family: var(--trp-font-body); text-align: left; gap: 10px; text-decoration: none;
}
.tb-menu-row:hover { background: rgba(255,255,255,.05); color: #e7e1d5; text-decoration: none; }
.tb-menu-split { justify-content: space-between; }
.tb-check { color: #c39a5b; flex: none; }
.tb-menu-div { height: 1px; background: rgba(255,255,255,.09); margin: 2px 4px 6px; }
.viewas-menu { width: 236px; }
.acct-menu { width: 262px; }
.tb-seg { display: flex; gap: 6px; padding: 0 8px 8px; }
.tb-segbtn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 0; border-radius: 8px; font-size: 13px; cursor: pointer; border: none;
  font-family: var(--trp-font-body); background: rgba(255,255,255,.05); color: #b3aa9c;
}
.tb-segbtn.active { background: #c39a5b; color: #201a12; font-weight: 600; }

/* Bell menu: fixed-size list - at most ~10 rows tall, then it scrolls in place
   (Mike's spec 2026-07-18). A measured title+meta row is ~60px (rows carrying
   a detail line run taller and show fewer - the cap is "no MORE than 10"), so
   10 x 60 = 600px, clamped for short viewports. */
.notif-menu { width: 320px; }
.notif-list { max-height: min(600px, 65vh); overflow-y: auto; }
.notif-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 8px; }
.notif-item:hover { background: rgba(255,255,255,.05); }
.notif-dot { width: 8px; height: 8px; border-radius: 50%; background: #c39a5b; margin-top: 6px; flex: none; }
.notif-dot.read { background: rgba(255,255,255,.14); }
.notif-body { flex: 1; min-width: 0; text-decoration: none; }
.notif-body:hover { text-decoration: none; }
.notif-title { font-size: 14px; color: #eee7db; }
.notif-detail { font-size: 12.5px; color: #b3aa9c; margin-top: 2px; }
.notif-meta { font-size: 12px; color: #948a7c; margin-top: 2px; }
.notif-x {
  border: none; background: transparent; color: #948a7c; cursor: pointer;
  font-size: 16px; line-height: 1; padding: 2px 4px; border-radius: 6px; flex: none;
}
.notif-x:hover { color: #eee7db; background: rgba(255,255,255,.08); }
.notif-empty { padding: 12px; font-size: 13px; color: #948a7c; }
.notif-empty[hidden] { display: none; }

/* Row 2: primary nav - items distribute across the full width (mock).
   overflow-x:auto at EVERY width: an admin's 10 nowrap items outgrow the row
   in the 700-1000px tablet band, and without this the whole PAGE scrolls
   sideways with links spilling off the dark bar. The scrollbar CHROME is
   hidden (Mike 2026-07-18: a visible bar on the nav is bad) - the row still
   pans by touch-swipe / trackpad / shift+wheel when it overflows. */
.topbar-nav {
  display: flex; align-items: center; justify-content: space-between;
  height: 54px; padding: 0 40px; gap: 14px;
  /* overflow-y pinned: setting only overflow-x silently computes overflow-y
     to auto, and the moment the (previously visible) horizontal bar ate into
     the 54px row the links "overflowed" vertically too - Mike saw a VERTICAL
     scrollbar on desktop. The strip must never scroll vertically. */
  overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;             /* Firefox */
}
.topbar-nav::-webkit-scrollbar { display: none; height: 0; }  /* Chromium/WebKit */
.topbar-nav a {
  padding: 16px 2px; color: #c7bfb1; font-weight: 500; font-size: 14.5px;
  /* line-height pinned: tokens.css body sets 1.6, which makes each link
     ~57.7px - TALLER than the 54px row - so overflow-y:hidden would clip the
     active underline (and this height overflow, not just the horizontal bar,
     was what spawned the desktop vertical scrollbar). 1.2 -> ~51.9px, fits. */
  line-height: 1.2;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  border-bottom: 2.5px solid transparent;
}
.topbar-nav a:hover { color: #f2ede3; text-decoration: none; }
.topbar-nav a.active { color: #c39a5b; font-weight: 600; border-bottom-color: #c39a5b; }

/* Progressive trimming so the bar degrades cleanly before the phone layout. */
@media (max-width: 1240px) { .tb-wordmark { display: none; } .tb-divider { display: none; } }
@media (max-width: 980px) { .tb-date { display: none; } .tb-vline { display: none; } .tb-email { display: none; } .tb-acct { padding: 4px; border-radius: 50%; } }
@media (max-width: 700px) {
  .topbar-row1 { height: auto; min-height: 56px; padding: 8px 14px; flex-wrap: wrap; gap: 8px; }
  .tb-brand { font-size: 24px; }
  /* the cluster itself must wrap too: bell + Feedback + View-as + account have
     a ~390px min-content width, wider than small phones. flex-wrap alone is
     NOT enough - the base rule's flex:none keeps the container at max-content
     width, so it must also be allowed to shrink (flex:0 1 auto + max-width)
     before its children can actually wrap. */
  .tb-utils {
    gap: 8px; margin-left: auto; flex-wrap: wrap; justify-content: flex-end;
    flex: 1 1 100%; max-width: 100%; min-width: 0; padding-left: 0;
  }
  /* the admin cluster is the widest thing on a phone - drop the pill's
     "View as:" prefix (the gold role name + chevron still read fine) */
  .tb-viewas-label { display: none; }
  .tb-pill { padding: 6px 10px; font-size: 12.5px; }
  .topbar-nav { height: auto; padding: 0 14px; justify-content: flex-start; gap: 18px; }
  .topbar-nav a { padding: 12px 2px; font-size: 13.5px; }
  /* The bell sits at the LEFT end of the utils cluster on phones, so a
     right-anchored absolute menu would hang off the left viewport edge - and
     a fixed viewport offset would overlap its own trigger once the header
     wraps to 2-3 lines. Instead, make the wrapper static so the menu resolves
     against .topbar (position:relative) and opens BELOW the whole rendered
     header, full-ish width, whatever height the header wrapped to. */
  .notif-wrap { position: static; }
  .notif-menu {
    left: 12px; right: 12px; top: calc(100% + 6px); width: auto;
    animation: none;
  }
}

/* ---- Check/Update PCO (assessment results pages) ------------------------
 * Compact per-row buttons + the popup content rendered into the shared
 * detail modal. Themed via the --trp vars so dark mode holds. */
.pco-btns .trp-btn { padding: 5px 11px; font-size: 12.5px; }
.pco-pop-h { font-weight: 600; margin: 10px 0 4px; }
.pco-pop-note { margin: 4px 0; }
.pco-pop-err { color: #9b4a3a; font-weight: 600; }
html[data-theme="dark"] .pco-pop-err { color: #d39587; }
.pco-pop-row { display: flex; gap: 8px; padding: 2px 0; }
.pco-pop-label { min-width: 165px; font-weight: 500; }
.pco-pop-empty { color: #6a655c; font-style: italic; }
html[data-theme="dark"] .pco-pop-empty { color: #a8a294; }
/* GH #176: per-field "current -> after update" diff rows */
.pco-pop-arrow { color: #6a655c; }
html[data-theme="dark"] .pco-pop-arrow { color: #a8a294; }
.pco-pop-new { font-weight: 600; }
.pco-pop-kept { color: #6a655c; font-style: italic; }
html[data-theme="dark"] .pco-pop-kept { color: #a8a294; }

/* ---- Grouped assessment results (retakes: latest = face row) ----------- */
.assess-tools { display: flex; gap: 8px; align-items: center; margin: 0 0 12px; }
.assess-tools input[type="search"] { flex: 0 1 280px; min-width: 160px; }
.assess-toggle { background: none; border: 0; cursor: pointer; padding: 0 4px 0 0;
                 font-size: 13px; color: inherit; display: inline-block;
                 transition: transform .15s ease; }
.assess-toggle.open { transform: rotate(90deg); }
tr.assess-history td { background: rgba(38, 38, 38, .05); color: #6a655c; }
html[data-theme="dark"] tr.assess-history td { background: rgba(216, 205, 187, .06); color: #a8a294; }
.assess-pager { display: flex; gap: 14px; align-items: center; margin-top: 12px; }

/* ---- Cohort "Hide closed windows" toggle (GH #174) --------------------- */
.coh-open { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; white-space: nowrap; cursor: pointer; }
.coh-open input { accent-color: var(--trp-teal); }

/* ---- Feedback-panel pager (GH #172) ------------------------------------ */
.fb-pager { display: flex; align-items: center; gap: 16px; margin: 10px 2px 0; font-size: 13.5px; }
.fb-pager-off { color: #a8a294; opacity: .55; }

/* ---- typography --------------------------------------------------------
 * Cormorant is a small-x-height serif: at UI sizes it reads lighter than
 * Oswald did, so headings carry a touch more weight and tighter tracking.
 */
h1, h2, h3, h4 { font-weight: 700; letter-spacing: .005em; }

/* Cormorant ships OLDSTYLE figures by default - 1,4,7,9 drop below the
   baseline. Beautiful in prose, wrong for a reporting tool: "$1,061" reads
   ragged and a column of them doesn't align. Force lining + tabular wherever
   digits carry meaning. */
.stat .value, .stat .sub, .trp-table td, .trp-table th, .num, .money {
  font-variant-numeric: lining-nums tabular-nums;
}

/* ---- accent legibility --------------------------------------------------
 * THE systemic one. --trp-teal is used for both FILLS and small TEXT. The old
 * teal was dark enough to pass as body text; Sanctified #a68046 is only 3.62:1
 * on white - so redefining the variable silently broke EVERY text usage of the
 * accent. There are 13 such selectors in tokens.css and I had patched three.
 *
 * Fills stay brand gold (dark ink on them passes). Text takes a darker gold in
 * light and a lighter one in dark, each chosen against the WORST ground it can
 * land on - #f0eadd in light, #39424f in dark - not against white/black. My
 * first link value passed on white and still failed at 4.17 on the warm surface.
 */
a, .fb-back, .linklike, .trp-btn.ghost, .settings-tabs a:hover, .email-preview a,
.soc-tag, .soc-name a:hover, .who-item.active, .br-viewbtn, .form-pill,
.br-mnote[data-note-id]:hover, .br-addnote:hover { color: #7f6132; }   /* worst 4.79:1 */

/* tokens.css:358-359 set dark links with HIGHER specificity (`main a:not(.trp-btn)`),
   so a bare `a` rule loses. Match that specificity rather than using !important. */
html[data-theme="dark"] a, html[data-theme="dark"] main a:not(.trp-btn),
html[data-theme="dark"] .fb-back, html[data-theme="dark"] .linklike,
html[data-theme="dark"] .trp-btn.ghost, html[data-theme="dark"] .settings-tabs a:hover,
html[data-theme="dark"] .soc-tag, html[data-theme="dark"] .who-item.active,
html[data-theme="dark"] .br-viewbtn, html[data-theme="dark"] .form-pill,
html[data-theme="dark"] .br-mnote[data-note-id]:hover,
html[data-theme="dark"] .br-addnote:hover { color: #d8b77f; }          /* worst 5.32:1 */

/* .email-preview is deliberately EXCLUDED from the dark rule above. It renders a
 * preview of an outgoing email, so its background is a fixed white regardless of
 * theme - the dark-mode gold lands on it at 1.91:1. It keeps the light value in
 * both themes because the surface never changes. */
html[data-theme="dark"] .email-preview a { color: #7f6132; }

/* .form-pill-path is a hardcoded #6b7280 in tokens.css - 4.83:1 on white but
   only 2.44:1 on the Deep Water panel, and it is 12px text. The same trap as
   every other hardcoded grey: fine on the ground it was written for, illegible
   on the other one. */
html[data-theme="dark"] .form-pill-path { color: #b3ada2; }            /* 5.28:1 */
html[data-theme="dark"] .form-pill { border-color: #3c4453; }

/* White on gold measures 3.0:1; dark ink on gold is 4.76:1. Hover is the awkward
 * one: tokens.css swaps in --trp-teal-dark, and dark ink on THAT is only 3.44:1.
 * Any gold dark enough to pass with dark ink is visually identical to the base,
 * so hover goes LIGHTER instead - 5.99:1, and an obvious state change. */
.trp-btn { color: #1b1b1b; font-weight: 600; }
.trp-btn:hover { background: #b8925a; color: #1b1b1b; }
.trp-btn.ghost:hover { background: var(--trp-teal); color: #1b1b1b; }

/* (The old .nav/.who-btn/.feedback-btn header recolors are gone - the two-row
   top bar above replaced that markup entirely; tokens.css's header rules now
   serve only the public pages, which never load this file.) */

/* ---- dark-mode leftovers ------------------------------------------------
 * tokens.css hardcodes the old teal #6cc3d5 in these dark-mode rules rather
 * than going through a variable, so redefining --trp-teal doesn't reach them.
 * Each needs an explicit counterpart or the UI ends up half-rebranded: bright
 * teal ghost buttons and toggles against the new gold everywhere else.
 */
html[data-theme="dark"] .trp-btn.ghost { border-color: #7a6238; }
html[data-theme="dark"] .trp-btn.ghost:hover {
  background: var(--trp-teal); color: #1b1b1b; border-color: var(--trp-teal);
}
.fb-cat:hover { background: var(--trp-surface); }        /* was a teal wash #eef7f9 */
html[data-theme="dark"] .fb-cat:hover { background: #39424f; border-color: #c39c5c; }
html[data-theme="dark"] .br-views { border-color: #7a6238; }
html[data-theme="dark"] .br-viewbtn:hover { background: #39424f; }
html[data-theme="dark"] .br-viewbtn.on,
html[data-theme="dark"] .br-viewbtn.on:hover { background: var(--trp-teal); color: #1b1b1b; }
/* light mode: the hover tint was a teal wash - warm it to match the palette */
.br-viewbtn:hover { background: var(--trp-surface); }
.br-viewbtn.on, .br-viewbtn.on:hover { color: #1b1b1b; }

/* ---- watermark ----------------------------------------------------------
 * tokens.css paints a faint mark behind every page - and it's the OLD (R) badge
 * in old navy #000f2b. That's brand chrome, not a neutral, and I'd wrongly
 * bucketed it with the greys. Swapped for the letters-only wordmark in Midnight
 * Presence. The dark-mode `filter: invert(1)` in tokens.css still works: on a
 * near-black ink it yields near-white, and hue-rotate is a no-op on a neutral.
 */
body::before { background-image: url("/static/watermark-trp.png?v=1"); }

/* ---- cool tints on a warm palette --------------------------------------
 * tokens.css hardcodes a handful of blue-tinted surfaces that were invisible
 * against the old teal but read cold next to Sanctified gold. Warmed to match.
 *
 * Where I STOPPED, deliberately: tokens.css has ~80 other hardcoded values.
 * The overwhelming majority are neutral greys (#6b7280, #4b5563, #9aa3ab) that
 * carry no brand identity and sit fine on either ground; the rest are the
 * .br-cat-* calendar legend (see below) and the Socials feature, which is
 * hidden behind SOCIALS_ENABLED. Chasing every grey would be churn, not brand
 * work. What's handled here is everything that carried the OLD identity - teal,
 * navy, periwinkle - plus the semantic status colours.
 */
.trp-table tr.row-total td { background: #f7f3ea; }
.trp-table td.row-group { background: #f2ede3; }
.br-day.out { background: #f7f5f0; }
.br-day.drop-target { background: #f0e6cf; }
html[data-theme="dark"] .trp-table tr.row-total td,
html[data-theme="dark"] .trp-table td.row-group { background: #39424f; }
html[data-theme="dark"] .br-day.out { background: #232323; }
html[data-theme="dark"] .br-day.drop-target { background: #4a4433; }

/* Warming those surfaces broke three things sitting ON them - the accent-gold
 * date number and the row-group count no longer had enough contrast against
 * their new grounds. Fixed against the actual new backgrounds, not the old. */
/* A day can be BOTH today and a drop target. The today pill is a gold fill, so
 * the drop-target ink (tuned for cream) lands on gold at 2.36:1 unless it's
 * excluded. And the pill's own white-on-gold was already only 3.62:1 for a small
 * date number - dark ink fixes the pill and the collision together. */
.br-day.today .br-num { color: #1b1b1b; }                                          /* 4.76:1 on gold */
.br-day.drop-target:not(.today) .br-num { color: #5c4a1e; }                        /* 6.90:1 on cream */
html[data-theme="dark"] .br-day.drop-target:not(.today) .br-num { color: #e6d3a8; }/* 6.58:1 */
.br-day.out .br-num { color: #6a655c; }                                            /* 5.31:1, was 4.44 */
.trp-table td.row-group .count { color: #5f5a52; }                                 /* 5.86:1, was 4.14 */
html[data-theme="dark"] .trp-table td.row-group .count { color: #c8c2b6; }         /* 5.73:1 */
/* higher-specificity old rules that still won */
html[data-theme="dark"] .br-err { background: #34211d; color: #d39587; }           /* 6.09:1 */
html[data-theme="dark"] .reqcard > summary:hover { background: #39424f; }          /* was #182c3a */

/* ---- status colours (DERIVED, not from the guide - see header comment) ---
 * Every value below was measured against the ground it actually sits on (white
 * in light, Deep Water #2f3849 in dark) and tuned until it cleared 4.5:1. My
 * first pass eyeballed them and three failed: warn-on-white 3.84, ok-on-dark
 * 4.19, bad-on-dark 3.64. Re-tune with a contrast check, not by eye.
 */
.txt-ok,   .stat .value.txt-ok   { color: #4f6f52; }   /* 5.63:1 on white */
.txt-bad,  .stat .value.txt-bad  { color: #9b4a3a; }   /* 6.11:1 */
/* Warn is the hard one. In a palette whose only accent IS gold, an amber warning
 * sits right on top of it: my first pick was 3 degrees of hue from the accent,
 * indistinguishable side by side. Pushed toward orange - 9 degrees off the
 * accent, still 17 off the brick red used for "bad", so the three read apart.
 * They are NOT maximally separable and can't be while gold is the accent; the
 * mitigation is that every badge also carries a word ("Waiting", "Retrying"),
 * so colour is never the only signal. Worth a designer's eye if it grates. */
.txt-warn, .stat .value.txt-warn { color: #a85a1b; }   /* 5.07:1 */
html[data-theme="dark"] .txt-ok,   html[data-theme="dark"] .stat .value.txt-ok   { color: #8aab8e; }
html[data-theme="dark"] .txt-bad,  html[data-theme="dark"] .stat .value.txt-bad  { color: #d39587; }
html[data-theme="dark"] .txt-warn, html[data-theme="dark"] .stat .value.txt-warn { color: #e69a55; }

/* ---- error / success surfaces ------------------------------------------
 * Same semantic roles as .txt-bad / .txt-ok, so they follow the same values.
 * These reach signed-in pages (the feedback modal, flash errors, Big Rocks),
 * and left alone they'd be the old red/green against a warm palette.
 *
 * NOT touched, deliberately: the eight .br-cat-* Big Rocks categories. Those
 * are a legend inherited from the church's physical wall calendar - staff read
 * them by colour - so they're a taxonomy, not brand chrome. Recolouring them
 * would break recognition and nobody asked for it.
 */
.fb-err, .err, .br-err { background: #f7ece9; color: #9b4a3a; }
.fb-ok { background: #eaf0e9; color: #4f6f52; }
.btn-danger-link { color: #9b4a3a; }
html[data-theme="dark"] .err, html[data-theme="dark"] .fb-err { background: #34211d; color: #d39587; }
html[data-theme="dark"] .fb-ok { background: #232c25; color: #8aab8e; }
html[data-theme="dark"] .btn-danger-link { color: #d39587; }

/* Badges are 11px UPPERCASE - small text, so 4.5:1 applies. My first pass put
 * two of these BELOW what they replaced (dark parked 3.97 vs the old 5.48, dark
 * live 4.48 vs 6.74, light parked 4.49). Measured against their own backgrounds. */
.badge.live    { background: #e7efe6; color: #41613f; }   /* 5.95:1 */
.badge.parked  { background: #f0eadd; color: #68635a; }   /* 4.98:1, was 4.49 */
.badge.pending { background: #f6ecdb; color: #8c5f22; }
.badge.role    { background: #ece4d6; color: #6b5a35; }
html[data-theme="dark"] .badge.live    { background: #2a3630; color: #96b89a; }   /* 5.76:1, was 4.48 */
html[data-theme="dark"] .badge.parked  { background: #39424f; color: #c8c2b6; }   /* 5.73:1, was 3.97 */
html[data-theme="dark"] .badge.pending { background: #3b3220; color: #d2a05a; }
html[data-theme="dark"] .badge.role    { background: #37342c; color: #c8bfa8; }