/* Visto — design system · "Real Earth"
   Deep, saturated naturals — the deliberate anti-mint. Recognition feels like rich dug
   soil, not a clean clinic. Serif DISPLAY voice over a calm sans body; organic varied
   radii; near-flat depth from tonal layering + hairline keylines, never glass or glow.
   Color roles: canopy green = the app, honey gold = RECOGNITION (points/streak),
   fired clay = CRISIS/help ONLY. */

:root{
  --bg:#F4ECD9;            /* aged warm paper */
  --surface:#FBF6EA;       /* cream tile */
  --surface-2:#EAD9B8;     /* wheat inset / recessed */
  --ink:#2B2415;           /* warm bark near-black */
  --muted:#5E5340;         /* secondary text, eyebrows */
  --faint:#766848;         /* hints, placeholders (decorative weight) */
  --line:#E0CFA8;          /* tilled hairline keyline */
  --primary:#2B3A22;       /* deep canopy green */
  --primary-d:#1E2B17;     /* pressed */
  --primary-soft:#E3EAD7;  /* fern tint */
  --on-primary:#F4ECD9;    /* paper-cream knockout on canopy */
  --accent:#E7C24E;        /* honey gold — RECOGNITION only */
  --accent-soft:#F6E9C9;   /* honey tint */
  --accent-ink:#5A4408;    /* text on honey */
  --danger:#8C3B1E;        /* fired clay — CRISIS / help only */
  --danger-soft:#F3DED2;
  --danger-ink:#6E2D15;

  --r:16px; --r-lg:20px; --r-sm:11px;   /* intentionally non-uniform, hand-made */
  --pad:18px; --gap:12px;
  --shadow:0 1px 0 0 var(--line);       /* a keyline, not a float */
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,system-ui,sans-serif;
  --font-display:Georgia,"Iowan Old Style","Palatino Linotype",Palatino,"Times New Roman",serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:var(--font); color:var(--ink);
  background:#cdbf9c; -webkit-font-smoothing:antialiased; line-height:1.5;
  display:flex; align-items:center; justify-content:center;
}

.phone{
  width:100%; max-width:430px; height:100vh; max-height:920px;
  background:var(--bg); overflow:hidden; position:relative;
  box-shadow:0 10px 50px rgba(40,30,10,.28); border-radius:0;
}
@media (min-width:480px){ .phone{ border-radius:34px; border:1px solid rgba(40,30,10,.12); } }

.app{ height:100%; display:flex; flex-direction:column; background:var(--bg); }

/* ---- App chrome ---- */
.appbar{
  flex:0 0 auto; display:flex; align-items:center; gap:10px;
  padding:max(14px,env(safe-area-inset-top)) var(--pad) 10px; background:var(--bg);
}
.appbar h1{ font-family:var(--font-display); font-size:21px; margin:0; letter-spacing:-.01em;
  font-weight:600; color:var(--primary); }
.appbar .spacer{ flex:1 }
.appbar .pill{
  display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600;
  background:var(--accent-soft); color:var(--accent-ink); padding:5px 11px; border-radius:999px;
}
.appbar .pill svg{ color:var(--accent-ink) }

.screen{ flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:4px var(--pad) 22px; }
.screen::-webkit-scrollbar{ width:0 }

/* Bottom tab bar */
.tabbar{
  flex:0 0 auto; display:flex; align-items:center; background:var(--surface);
  border-top:1px solid var(--line); padding:7px 8px max(7px,env(safe-area-inset-bottom));
}
.tabbar button{
  flex:1; border:0; background:none; cursor:pointer; color:var(--faint);
  display:flex; flex-direction:column; align-items:center; gap:3px; padding:6px 0;
  font-size:11px; font-weight:600; font-family:inherit; border-radius:12px; min-height:44px;
}
.tabbar button svg{ width:23px; height:23px }
.tabbar button.active{ color:var(--primary) }
.tabbar button.log-fab svg{
  background:var(--primary); color:var(--on-primary); width:46px; height:46px; border-radius:15px;
  padding:11px; margin-top:-12px;
}

/* ---- Building blocks ---- */
.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:15px 16px; margin:0 0 var(--gap); }
.muted{ color:var(--muted) } .faint{ color:var(--faint) }
.h2{ font-family:var(--font-display); font-size:18px; font-weight:600; margin:0 0 8px; letter-spacing:-.01em }
.eyebrow{ font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:0 0 6px }
.center{ text-align:center }
.stack > * + *{ margin-top:var(--gap) }

/* The canopy recognition card — recognition leads, accounting follows. */
.hero-card{ background:var(--primary); color:var(--on-primary); border-radius:var(--r-lg);
  padding:16px 16px 17px; margin:0 0 var(--gap); position:relative; overflow:hidden; }
.hero-card .eyebrow{ color:var(--accent) }
.hero-card .big{ font-family:var(--font-display); font-size:25px; font-weight:600; letter-spacing:-.01em; margin:2px 0 1px }
.hero-card .sub{ font-size:12.5px; color:#CDBF9C }
.hero-card .frond{ position:absolute; right:-8px; bottom:-10px; color:#3A4A2E; opacity:.9 }
.pips{ display:flex; gap:5px; margin:11px 0 0 }
.pips span{ width:9px; height:9px; border-radius:50%; background:#5C6B4D }
.pips span.on{ background:var(--accent) }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  width:100%; border:0; cursor:pointer; font-family:inherit; font-weight:700; font-size:16px;
  padding:15px 18px; border-radius:var(--r); background:var(--surface); color:var(--ink);
  border:1px solid var(--line); transition:transform .06s ease;
}
.btn:active{ transform:scale(.985) }
.btn svg{ width:20px; height:20px }
.btn-primary{ background:var(--primary); color:var(--on-primary); border-color:var(--primary) }
.btn-primary:disabled{ background:#CBD3C0; border-color:#CBD3C0; color:#46523C; cursor:not-allowed }
.btn-ghost{ background:transparent; border:1.5px solid var(--line); color:var(--ink) }
.btn-danger{ background:var(--danger); color:#fff; border-color:var(--danger) }
.btn-sm{ width:auto; padding:9px 14px; font-size:14px; border-radius:11px; min-height:44px }   /* 44px tap target on budget phones (covers the quiet 'need to talk?' mood links + back/turn-off buttons) */

/* Native <select> styled to match the form language (the plain .input border read as a broken text field
   on a dropdown). appearance:none + an inline SVG caret; keeps a real, accessible native select. */
.select{
  width:100%; border:1.5px solid var(--line); background:var(--surface); color:var(--ink);
  font:inherit; font-size:16px; padding:14px 40px 14px 14px; border-radius:var(--r-sm); outline:none;
  -webkit-appearance:none; appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%235E5340' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;
}
.select:focus{ border-color:var(--primary); outline:2px solid var(--primary); outline-offset:1px }

.input{
  width:100%; border:1.5px solid var(--line); background:var(--surface); color:var(--ink);
  font:inherit; font-size:16px; padding:14px; border-radius:var(--r-sm); outline:none;
}
.input:focus{ border-color:var(--primary); outline:2px solid var(--primary); outline-offset:1px }
/* Consistent, visible keyboard-focus ring on the custom controls (focus is restored across re-render) */
.cattoggle:focus-visible, .preset:focus-visible, .av:focus-visible, .facecell:focus-visible, .opt:focus-visible,
.stepbtn:focus-visible, .seg button:focus-visible, .tabbar button:focus-visible, .btn:focus-visible,
.sprout-tile:focus-visible, .slotseg button:focus-visible, .talk-chips button:focus-visible{
  outline:2px solid var(--primary); outline-offset:2px;
}
.helpdot:focus-visible{ outline:2px solid var(--danger); outline-offset:3px }   /* the crisis door gets the crisis color, not canopy */

/* Single-select option rows (CDC item, etc.) */
.opt{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  border:1.5px solid var(--line); background:var(--surface); color:var(--ink);
  font:inherit; font-size:15.5px; font-weight:500; padding:14px; border-radius:var(--r-sm);
  cursor:pointer; margin-bottom:9px;
}
.opt .dot{ flex:0 0 auto; width:20px; height:20px; border-radius:50%; border:2px solid var(--line); }
.opt.sel{ border-color:var(--primary); background:var(--primary-soft) }
.opt.sel .dot{ border-color:var(--primary); background:var(--primary); box-shadow:inset 0 0 0 3px var(--surface) }

.chip{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600;
  background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:6px 11px; }

/* "Today I feel…" — our own diverse generated faces, a 4-wide grid like the chart */
.facegrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px 4px }
.facecell{ border:0; background:none; cursor:pointer; display:flex; flex-direction:column; align-items:center;
  gap:5px; padding:7px 2px; border-radius:14px; font-family:inherit }
.facecell:active{ background:var(--surface) }
.facecell svg{ width:100%; max-width:60px; height:auto }
.fcl{ font-size:11px; font-weight:600; color:var(--muted); text-align:center; line-height:1.1 }
.facebubble{ width:96px; height:96px; border-radius:50%; background:var(--surface); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; margin:0 auto }
.facebubble svg{ width:78px; height:78px }

/* Avatar picker / buddy */
.avatars{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center }
.av{ width:54px; height:54px; border-radius:50%; border:2px solid var(--line); background:var(--surface);
  font-size:28px; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.av.sel{ border-color:var(--primary); background:var(--primary-soft) }

/* Onboarding hero */
.hero{ padding:30px 4px 10px; text-align:center }
.hero .mark{ color:var(--primary); display:flex; justify-content:center }
.hero h1{ font-family:var(--font-display); font-size:28px; font-weight:600; letter-spacing:-.02em; margin:12px 0 6px; color:var(--primary) }
.hero p{ color:var(--muted); margin:0 auto; max-width:30ch }

.langtoggle{ position:absolute; top:max(14px,env(safe-area-inset-top)); right:16px; z-index:5 }
.langtoggle button{ display:inline-flex; align-items:center; gap:6px; font:inherit; font-weight:700; font-size:12px;
  border:1px solid var(--line); background:var(--surface); color:var(--muted); border-radius:999px; padding:6px 11px; cursor:pointer }
.langtoggle button svg{ width:15px; height:15px }

/* Always-on help — a warm fired-clay tile, never alarming */
.helpdot{ position:absolute; right:14px; bottom:80px; z-index:8;
  width:46px; height:46px; border-radius:14px; background:var(--danger); color:#fff;
  display:flex; align-items:center; justify-content:center; border:0;
  box-shadow:0 4px 14px rgba(140,59,30,.35); cursor:pointer; }
.helpdot svg{ width:22px; height:22px }
/* crisis contacts: each is a self-contained two-line button (bold action + a plain-language subtitle,
   since a kid may not know what 988 / 741741 are) so the buttons stay evenly spaced blocks. */
.crisis-btn{ flex-direction:column; gap:3px; height:auto; padding:12px 16px; line-height:1.3; text-decoration:none }
.crisis-btn .crisis-main{ display:inline-flex; align-items:center; gap:8px; font-weight:700 }
.crisis-btn .crisis-sub{ font-size:11.5px; font-weight:500; line-height:1.35; opacity:.82; white-space:normal; text-align:center }
/* warm "reach a real person" card — only shown after a repeated run of hard days, offered not forced */
.mood-reach{ background:var(--accent-soft); border-color:transparent }

.eyebrow-ochre{ color:var(--muted) }

/* ---- Log capture ---- */
textarea.input{ line-height:1.5 }
.catgrid{ display:flex; flex-wrap:wrap; gap:8px }
.cattoggle{ display:inline-flex; align-items:center; gap:7px; padding:8px 12px; min-height:44px;
  border:1.5px solid var(--line); border-radius:999px; background:var(--surface);
  font-size:13px; font-weight:600; color:var(--ink); cursor:pointer; font-family:inherit }
.cattoggle .ci{ display:flex; color:var(--faint) }
.cattoggle.on{ border-color:var(--primary); background:var(--primary-soft); color:var(--primary) }
.cattoggle.on .ci{ color:var(--primary) }
.stepper{ display:flex; align-items:center; justify-content:center; gap:18px; margin:8px 0 12px }
.stepbtn{ width:44px; height:44px; border-radius:50%; border:1.5px solid var(--line);
  background:var(--surface); color:var(--ink); font-size:22px; cursor:pointer; font-family:inherit; line-height:1 }
.steptime{ font-family:var(--font-display); font-size:22px; font-weight:600; min-width:104px; text-align:center }
.presets{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap }   /* wrap: chip groups now range from 2 to 8 chips (gender/ethnicity/care-circle) */
.preset{ flex:1 1 auto; padding:9px 12px; min-height:44px; border:1.5px solid var(--line); border-radius:11px;
  background:var(--surface); color:var(--ink); font-size:13px; font-weight:600; cursor:pointer; font-family:inherit }
.preset.on{ border-color:var(--primary); background:var(--primary-soft); color:var(--primary) }

/* ---- Hours / submission / staff / certificate ---- */
.card.center{ text-align:center }
.lorbadge{ text-align:right; font-family:var(--font-display); font-weight:600; font-size:15px; color:var(--primary) }
.lorbadge span{ display:inline-block; font-family:var(--font); font-weight:700; font-size:11.5px; color:var(--accent-ink);
  background:var(--accent-soft); border-radius:8px; padding:2px 8px; margin-top:5px }
.statusdot{ width:12px; height:12px; border-radius:50%; display:inline-block; margin:0 0 8px }
.statusdot.pending{ background:var(--accent) } .statusdot.ok{ background:var(--primary) }
.monthmini{ display:flex; gap:8px; margin:9px 0 2px }
.monthmini > div{ flex:1; background:var(--surface-2); border-radius:10px; padding:7px 6px; text-align:center; font-size:11px; color:var(--muted) }
.monthmini b{ display:block; font-size:13px; color:var(--primary); margin:2px 0 }
.aisummary{ background:var(--primary-soft); border-radius:12px; padding:10px 12px; margin-top:11px; font-size:13px; line-height:1.5; color:var(--ink) }

.idcard{ background:var(--primary); color:var(--on-primary); border-radius:var(--r-lg); padding:16px }
.idcard .muted{ color:#CDBF9C }
.qrgrid{ width:50px; height:50px; display:grid; grid-template-columns:repeat(7,1fr); gap:1px;
  background:var(--on-primary); padding:3px; border-radius:7px }
.qrgrid span{ background:transparent } .qrgrid span.on{ background:var(--ink); border-radius:1px }

.staffwrap{ height:100%; display:flex; flex-direction:column; background:var(--bg) }
.staffbar{ display:flex; align-items:center; gap:10px; flex:0 0 auto;
  padding:max(14px,env(safe-area-inset-top)) var(--pad) 12px; background:var(--surface); border-bottom:1px solid var(--line) }

.certificate{ background:var(--surface); border:2px solid var(--primary); border-radius:var(--r-lg);
  padding:26px 22px; text-align:center; position:relative; margin-top:8px }
.cert-frond{ color:var(--primary); display:flex; justify-content:center; margin-bottom:6px }
.cert-name{ font-family:var(--font-display); font-size:26px; font-weight:600; color:var(--primary); margin:6px 0 2px }
.cert-hours{ font-family:var(--font-display); font-size:48px; font-weight:600; color:var(--accent-ink); line-height:1.05 }
.cert-meta{ font-size:12.5px; color:var(--muted); line-height:1.7; margin-top:16px }

/* ---- Staff dashboards ---- */
.seg{ display:flex; background:var(--surface-2); border-radius:12px; padding:3px; margin-bottom:6px }
.seg button{ flex:1; border:0; background:none; font:inherit; font-weight:600; font-size:12px; color:var(--muted);
  padding:8px 0; border-radius:9px; cursor:pointer; min-width:0 }   /* 12px + min-width:0: "Aprobaciones" must fit 4-up at 375px */
.seg button.on{ background:var(--surface); color:var(--primary) }
.statgrid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:var(--gap) }
.stat{ background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:13px 14px }
.statn{ font-family:var(--font-display); font-size:25px; font-weight:600; color:var(--primary); line-height:1 }
.statl{ font-size:11.5px; color:var(--muted); margin-top:6px; line-height:1.3 }
.bar{ display:flex; align-items:center; gap:9px; margin:7px 0 }
.bl{ width:116px; font-size:12px; color:var(--ink); line-height:1.2; flex:0 0 auto; overflow-wrap:anywhere }
.bt{ flex:1; height:8px; background:var(--surface-2); border-radius:4px; overflow:hidden }
.bf{ display:block; height:100%; background:var(--primary); border-radius:4px }
.bf.gold{ background:var(--accent) } .bf.clay{ background:var(--danger) }
.bv{ font-size:12px; font-weight:700; color:var(--muted); min-width:38px; text-align:right; flex:0 0 auto }
.reachrow{ font-size:13.5px; color:var(--ink); padding:4px 0 } .reachrow b{ color:var(--primary); font-size:15px }
.privacy{ display:flex; align-items:center; font-size:12.5px; color:var(--muted); background:var(--primary-soft); border-color:transparent }

/* ---- Sprout (the companion tab) ---- */
.terrarium{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:22px 16px 18px; display:flex; flex-direction:column; align-items:center; gap:2px; text-align:center; }
.sprout-stage{ width:200px; max-width:70%; }
.sprout-stage svg{ width:100%; height:auto; }

.slotseg{ display:flex; gap:7px; overflow-x:auto; padding:2px 0 5px; margin-bottom:2px; scrollbar-width:none;
  -webkit-mask-image:linear-gradient(to right, #000 88%, transparent);   /* right-edge fade hints 'more slots →' */
  mask-image:linear-gradient(to right, #000 88%, transparent); }
.slotseg::-webkit-scrollbar{ height:0 }
.slotseg button{ flex:0 0 auto; border:1.5px solid var(--line); background:var(--surface); color:var(--muted);
  font:inherit; font-weight:600; font-size:12.5px; padding:7px 14px; min-height:44px; display:inline-flex; align-items:center;
  border-radius:999px; cursor:pointer; }
.slotseg button.on{ border-color:var(--primary); background:var(--primary-soft); color:var(--primary) }

.sprout-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.sprout-tile{ border:1.5px solid var(--line); background:var(--surface); border-radius:var(--r-sm);
  padding:9px 6px 8px; display:flex; flex-direction:column; align-items:center; gap:5px; cursor:pointer;
  font:inherit; min-height:116px; }
.sprout-tile.on{ border-color:var(--primary); background:var(--primary-soft) }
.sprout-tile[disabled], .sprout-tile.locked{ opacity:.55 }   /* locked = unaffordable but still tappable (shows the "you're {n} away" explainer) */
.sprout-tile svg{ width:60px; height:60px; border-radius:9px; background:var(--bg) }
.sprout-name{ font-size:12px; font-weight:600; color:var(--ink); text-align:center; line-height:1.15 }
.sprout-tile.on .sprout-name{ color:var(--primary) }
.sprout-act{ display:inline-flex; align-items:center; gap:3px; font-size:11px; font-weight:700; color:var(--muted); margin-top:auto }
.sprout-act.on{ color:var(--primary) }
.sprout-act.price{ color:var(--accent-ink) }
.sprout-act.price svg{ color:var(--accent-ink) }

/* Sprout is the ONLY thing that ever moves here — a slow, calm sway; never a demand for attention. */
.sprout-leaves{ transform-origin:32px 45px; animation:sproutSway 6s ease-in-out infinite; }
@keyframes sproutSway{ 0%,100%{ transform:rotate(-1.5deg) } 50%{ transform:rotate(1.5deg) } }
.firefly-glow{ animation:fireflyTwinkle 3s ease-in-out infinite; }
@keyframes fireflyTwinkle{ 0%,100%{ opacity:.35 } 50%{ opacity:.9 } }
/* cloud-reply "typing" pulse — conveys 'reply in flight' better than a static ellipsis */
.typing{ animation:typingPulse 1.4s ease-in-out infinite; }
@keyframes typingPulse{ 0%,100%{ opacity:.35 } 50%{ opacity:1 } }
@media (prefers-reduced-motion:reduce){
  .sprout-leaves{ animation:none } .firefly-glow{ animation:none; opacity:.7 } .typing{ animation:none; opacity:.7 }
}

/* ---- Talk to your sprout (curated, on-device companion) ---- */
.talk-log{ display:flex; flex-direction:column; gap:10px; margin:4px 0 }
.talk-turn{ display:flex; flex-direction:column; align-self:flex-start; max-width:88% }
.talk-bubble{ padding:10px 13px; border-radius:16px; font-size:14px; line-height:1.5; overflow-wrap:anywhere }
.talk-kid{ align-self:flex-end; max-width:82%; background:var(--primary-soft); color:var(--ink); border-bottom-right-radius:5px }
.talk-sprout{ background:var(--surface-2); border:1px solid var(--line); color:var(--ink); border-bottom-left-radius:5px; display:flex; gap:8px; align-items:flex-start }
.talk-sprout svg{ flex:0 0 auto }
.talk-chips{ display:flex; flex-wrap:wrap; gap:8px; margin:4px 0 2px }
.talk-chips button{ border:1.5px solid var(--line); background:var(--surface); border-radius:999px; padding:8px 13px;
  min-height:44px; flex:0 0 auto; display:inline-flex; align-items:center; font-size:13px; font-weight:600; font-family:inherit; cursor:pointer; color:var(--ink) }
.talk-chips button.talk-chip-help{ border-color:var(--danger); color:var(--danger-ink); background:var(--danger-soft) }
.talk-res{ margin-top:8px; border:1px solid var(--line); border-radius:12px; padding:10px 12px; font-size:13px; background:var(--surface) }
.talk-res a{ font-weight:700; color:var(--primary); text-decoration:none }
.talk-res .talk-res-note{ display:block; margin-top:5px; color:var(--faint); font-size:11px }

/* ---- Print: the certificate is a school-facing document, not a phone screenshot ---- */
@media print{
  body{ background:#fff; display:block; -webkit-print-color-adjust:exact; print-color-adjust:exact }
  .phone{ box-shadow:none; border:0; width:auto; max-width:none; height:auto; max-height:none; overflow:visible; border-radius:0 }
  .app, .staffwrap, .screen{ height:auto; overflow:visible }
  .appbar, .staffbar, .tabbar, .helpdot{ display:none !important }
  /* Force the light-theme ink so the cert is legible even when printed from a dark-mode OS */
  .certificate{ border:2px solid #2B3A22; margin:0; background:#fff }
  .certificate, .cert-meta, .certificate .eyebrow-ochre{ color:#5E5340 }
  .cert-name{ color:#2B3A22 }
  .cert-hours{ color:#5A4408 }
}

/* ---- Dark mode (night check-ins) — remap the Real Earth tokens to a warm dark scheme ---- */
@media (prefers-color-scheme:dark){
  :root{
    --bg:#15120C; --surface:#211C14; --surface-2:#2E281C;
    --ink:#ECE3CF; --muted:#B4A98F; --faint:#897D64; --line:#36301F;
    --primary:#86B06F; --primary-d:#9CC084; --primary-soft:#26301C; --on-primary:#0F1209;
    --accent:#E7C24E; --accent-soft:#36301C; --accent-ink:#EAD491;
    --danger:#D6754F; --danger-soft:#3A241B; --danger-ink:#EFB89D;
  }
  body{ background:#0C0A06 }
  .hero-card, .idcard{ background:var(--surface-2) }
  .hero-card .big, .idcard{ color:var(--ink) }
  .hero-card .sub, .idcard .muted{ color:var(--muted) }
  .talk-res .talk-res-note{ color:var(--muted) }   /* --faint fails WCAG AA on --surface in dark; --muted clears it */
}