/* Shared layer for the four demo pages (planner, triage, cardiovascular risk, Brevai).
   Loaded last on each page so they share one palette, one type scale, one primary
   button and one "about this demo" block, matching the home page. */

:root {
  --d-bg: #F4F6F3; --d-surface: #FFFFFF; --d-tint: #EAEEEA; --d-line: #DCE2DE;
  --d-ink: #14211F; --d-ink-2: #44524F; --d-muted: #5F6B68;
  --d-accent: #8B2635; --d-safe: #2F6B5E;
  --d-btn: #14211F; --d-btn-ink: #FFFFFF; --d-btn-hover: #2A3A37;
  --d-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --d-text: 'Instrument Sans', system-ui, sans-serif;
}
:root[data-theme="dark"] {
  --d-bg: #0E1513; --d-surface: #16201D; --d-tint: #1B2724; --d-line: #2A3833;
  --d-ink: #E7EEEB; --d-ink-2: #BAC6C2; --d-muted: #9AA7A3;
  --d-accent: #E07C8A; --d-safe: #6CC2A9;
  --d-btn: #E7EEEB; --d-btn-ink: #0E1513; --d-btn-hover: #FFFFFF;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --d-bg: #0E1513; --d-surface: #16201D; --d-tint: #1B2724; --d-line: #2A3833;
  --d-ink: #E7EEEB; --d-ink-2: #BAC6C2; --d-muted: #9AA7A3;
  --d-accent: #E07C8A; --d-safe: #6CC2A9;
  --d-btn: #E7EEEB; --d-btn-ink: #0E1513; --d-btn-hover: #FFFFFF;
} }

/* Planner: map its own tokens onto the site palette (it used indigo and blue-grey). */
:root, :root[data-theme="light"] {
  --paper: var(--d-bg); --ink-soft: var(--d-ink-2);
  --action: var(--d-ink); --action-ink: var(--d-btn-ink); --action-wash: var(--d-tint);
  --focus: var(--d-safe);
}
:root[data-theme="dark"] { --paper: var(--d-bg); --action: var(--d-ink); --action-ink: var(--d-btn-ink); --action-wash: var(--d-tint); --focus: var(--d-safe); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --paper: var(--d-bg); --action: var(--d-ink); --action-ink: var(--d-btn-ink); --action-wash: var(--d-tint); --focus: var(--d-safe); } }
body.demo-page { font-family: var(--d-text) !important; }
body.demo-page h1, body.demo-page h2 { font-family: var(--d-display) !important; font-weight: 500 !important; letter-spacing: -0.01em; }

/* One primary button everywhere */
body.demo-page #go, body.demo-page #run, body.demo-page .btn-calculate, body.demo-page .btn-summarize {
  background: var(--d-btn) !important; color: var(--d-btn-ink) !important; border: 0 !important;
  border-radius: 10px !important; padding: 12px 22px !important; box-shadow: none !important;
  font: 600 1rem/1.2 var(--d-text) !important; letter-spacing: normal !important; text-transform: none !important;
  background-image: none !important; cursor: pointer;
}
body.demo-page #go:hover, body.demo-page #run:hover, body.demo-page .btn-calculate:hover:not([disabled]), body.demo-page .btn-summarize:hover:not([disabled]) { background: var(--d-btn-hover) !important; }
body.demo-page #go svg, body.demo-page .btn-calculate svg, body.demo-page .btn-summarize svg { display: none; }

/* Readable intro text and labels (16 px minimum, full-contrast secondary ink) */
body.demo-page .subtitle, body.demo-page .lede { font-size: 1.15rem !important; line-height: 1.55 !important; color: var(--d-ink-2) !important; max-width: 62ch; }
body.demo-page .eyebrow { color: var(--d-accent) !important; font-weight: 700 !important; font-size: .95rem !important; }
body.demo-page .field > label, body.demo-page .section-title { color: var(--d-ink) !important; font-size: 1rem !important; }
body.demo-page .section-title { font-weight: 700 !important; }

/* One back link style */
.d-back, body.demo-page .back { display: inline-flex; align-items: center; gap: 6px; color: var(--d-ink-2) !important; text-decoration: none; font-weight: 600; font-size: .95rem; }
.d-back:hover, body.demo-page .back:hover { color: var(--d-accent) !important; }

/* Field hints on the calculator */
.hint { display: block; margin-top: 6px; font-size: .9rem; line-height: 1.4; color: var(--d-muted); }
.form-err { margin: 14px 0 0; padding: 10px 12px; border-left: 3px solid #B42318; background: color-mix(in srgb, #B42318 8%, transparent); color: var(--d-ink); border-radius: 6px; font-size: .95rem; }
.form-err[hidden] { display: none; }

/* About this demo: reviewer, date, privacy, sources */
.d-trust { max-width: 760px; margin: 48px 0 8px; padding: 18px 20px; background: var(--d-surface); border: 1px solid var(--d-line); border-radius: 12px; color: var(--d-ink); font: 400 .95rem/1.55 var(--d-text); }
.d-trust h2 { font: 600 1rem/1.3 var(--d-text) !important; margin: 0 0 10px !important; color: var(--d-ink); letter-spacing: normal; }
.d-trust dl { display: grid; grid-template-columns: 110px 1fr; gap: 6px 14px; margin: 0; }
.d-trust dt { font-weight: 600; color: var(--d-ink); }
.d-trust dd { margin: 0; color: var(--d-ink-2); }
.d-trust a { color: var(--d-accent); }
.d-trust .d-note { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--d-line); color: var(--d-ink-2); }
@media (max-width: 560px) { .d-trust dl { grid-template-columns: 1fr; gap: 2px; } .d-trust dd { margin-bottom: 8px; } }

/* Language switch on the calculator, styled like the other demos' switches */
.d-lang { background: var(--d-surface) !important; color: var(--d-ink) !important; border: 1px solid var(--d-line) !important; border-radius: 8px !important; font: 600 .9rem/1 var(--d-text) !important; padding: 8px 12px !important; cursor: pointer; }
.d-lang:hover { border-color: var(--d-ink) !important; }