/* ============================================================
   ONCOLOGY NAVIGATOR · BRAND THEME (the template)
   ============================================================
   This file is the single source of truth for the product's look:
   the design signed off on the simulation-workbench catalog
   (2026-10-06) — white page, navy authority color, white tiles
   defined by borders + soft shadow, 2px navy section rules, a
   compact top bar that carries the page title, and one bold
   centered search.

   HOW TO USE ON A NEW PAGE
     <link rel="stylesheet" href="/onav-brand.css">
   then build chrome from the .onav-* components below and colors
   ONLY from the --onav-* tokens. Do not restate hex values in page
   CSS; a page that needs a new color adds a token here, with a
   contrast note, so every surface moves together.

   WHERE THE TOKENS FAN OUT TODAY
   - apps/trainer/tw-input.css   :root  (compiled into /tw.css for
     the 61 trainer pages + dataset/classification) mirrors these
     values; its legacy names (--teal, --indigo, --ink) are kept
     because generated JSX references them. Change values HERE and
     THERE together — the comment at its :root says so too.
   - apps/trainer/index.html     .wb block consumes --onav-* vars
     directly (the workbench is this template's reference
     implementation).
   - care-plan.html / care-summary.html keep local token blocks
     (care-summary is deliberately self-contained for offline use);
     their values mirror these.

   CONTRAST FACTS (all on white):
     --onav-navy  #002856  14.70:1   headings, rules, primary buttons
     --onav-text  #0B1A2B  17.85:1   body/content text
     --onav-text-2 #2B3744 12.12:1   secondary text (AAA)
     --onav-link-hover #005AA3 7.09:1 links/hover (AAA for UI text)
   ============================================================ */

@font-face {
  font-family: "IBM Plex Sans"; font-style: normal; font-weight: 100 700;
  font-display: swap; src: url(/fonts/IBMPlexSans-var.woff2) format("woff2");
  unicode-range: u+0000-00ff, u+0131, u+0152-0153, u+02bb-02bc, u+02c6, u+02da, u+02dc,
    u+0304, u+0308, u+0329, u+2000-206f, u+20ac, u+2122, u+2191, u+2193, u+2212, u+2215, u+feff, u+fffd;
}

:root {
  /* color */
  --onav-navy: #002856;          /* brand authority: headings, rules, primary actions */
  --onav-bg: #FFFFFF;            /* page background — white, tiles carry the definition */
  --onav-surface: #FFFFFF;       /* card/tile background */
  --onav-text: #0B1A2B;          /* primary content text */
  --onav-text-2: #2B3744;        /* secondary text — still AAA on white */
  --onav-link-hover: #005AA3;    /* hover/active accent */
  --onav-focus: #0072CE;         /* focus ring */
  --onav-border: #D2DAE5;        /* tile and divider borders */
  --onav-chip-bg: #E9EDF3;       /* qualifier chips, soft fills, icon-circle fills */
  --onav-input-border: #8A96A3;  /* form-control borders (3:1 non-text contrast) */

  /* elevation */
  --onav-shadow-card: 0 1px 2px rgba(11, 26, 43, 0.06), 0 3px 10px -4px rgba(11, 26, 43, 0.10);
  --onav-shadow-lift: 0 12px 28px -14px rgba(0, 40, 86, 0.28);

  /* shape & type */
  --onav-radius: 12px;
  --onav-radius-pill: 999px;
  --onav-font: "IBM Plex Sans", -apple-system, "Segoe UI", sans-serif;
}

/* ---- top bar: brand left, page title dead-center, actions right ----
   The title is absolutely centered so uneven side widths cannot pull
   it off true center (the workbench pattern). The host page supplies
   the h1 text. */
.onav-bar { border-bottom: 1px solid var(--onav-border); background: var(--onav-surface); font-family: var(--onav-font); }
.onav-bar-in { position: relative; height: 64px; display: flex; align-items: center; gap: 14px; padding: 0 80px; }
.onav-bar-title { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; font-size: 20px; font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; color: var(--onav-navy); white-space: nowrap; font-family: var(--onav-font); }
.onav-bar-btn { min-height: 36px; padding: 0 18px; border: 0; border-radius: 8px; background: var(--onav-navy); color: #FFFFFF; font-size: 14px; font-weight: 600; cursor: pointer; font-family: var(--onav-font); }
.onav-bar-btn:hover { background: var(--onav-link-hover); }

/* ---- section head: icon badge · uppercase title · count pill · 2px navy rule ---- */
.onav-sec-head { display: flex; align-items: center; gap: 12px; font-family: var(--onav-font); }
.onav-sec-head::after { content: ""; flex: 1 1 auto; height: 2px; background: var(--onav-navy); margin-left: 6px; border-radius: 1px; }
.onav-sec-ic { flex: none; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--onav-navy); color: #FFFFFF; }
.onav-sec-head h2, .onav-sec-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--onav-navy); margin: 0; font-family: var(--onav-font); }
.onav-sec-count { font-size: 13px; padding: 2px 10px; border-radius: var(--onav-radius-pill); background: var(--onav-chip-bg); color: var(--onav-text-2); font-variant-numeric: tabular-nums; }

/* ---- tile: white card, border + soft shadow, navy name, black body ---- */
.onav-card { background: var(--onav-surface); border: 1px solid var(--onav-border); border-radius: var(--onav-radius); box-shadow: var(--onav-shadow-card); padding: 18px; font-family: var(--onav-font); transition: border-color 0.15s, box-shadow 0.15s; }
.onav-card:hover { border-color: var(--onav-navy); box-shadow: var(--onav-shadow-lift); }
.onav-card-name { font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--onav-navy); }
.onav-card-body { font-size: 14px; line-height: 1.5; color: var(--onav-text); }
.onav-chip { display: inline-block; font-size: 13px; line-height: 1.4; color: var(--onav-text-2); background: var(--onav-chip-bg); padding: 4px 10px; border-radius: 6px; }

/* ---- search: one bold centered bar, no card frame around it ---- */
.onav-search { position: relative; width: 100%; max-width: 760px; margin: 0 auto; font-family: var(--onav-font); }
.onav-search input { width: 100%; height: 54px; padding: 0 16px 0 46px; border: 2px solid var(--onav-navy); border-radius: 10px; background: var(--onav-surface); color: var(--onav-text); font-size: 17px; font-weight: 500; box-shadow: var(--onav-shadow-card); font-family: var(--onav-font); }
.onav-search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--onav-text-2); pointer-events: none; }

/* ---- shared a11y helpers ---- */
.onav-vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.onav-focusable:focus-visible { outline: 2px solid var(--onav-focus); outline-offset: 2px; }

/* ---- app header: the workbench bar as a shared component (2026-10-07) ----
   brand mark + wordmark │ section label · page title dead-center · actions.
   Owner ask: "use this as header across all screens". Used by index.html
   (landing, worksheet, home), dataset, classification, care-plan and
   care-summary. The workbench keeps its own .wb-head (the reference); the 61
   trainer pages are not on it yet.

   Light by default, like the rest of this template. Pages that support dark
   mode add .onav-hdr--themed and get the dark values below; pages that are
   light-only (care-plan, care-summary) do not, so a dark OS cannot put a dark
   bar on a white page.

   Layout rules:
   - the title is absolutely centered (as .onav-bar-title) and drops out
     below 1100px, where the two sides would reach it;
   - the section label and its divider drop out below 760px;
   - hidden in print: the printable pages carry their own masthead. */
.onav-hdr {
  --onav-hdr-bg: var(--onav-surface); --onav-hdr-line: var(--onav-border);
  --onav-hdr-ink: var(--onav-navy); --onav-hdr-text: var(--onav-text); --onav-hdr-text-2: var(--onav-text-2);
  --onav-hdr-hover: var(--onav-link-hover); --onav-hdr-btn-bg: var(--onav-navy); --onav-hdr-btn-ink: #FFFFFF;
  position: relative; z-index: 20; background: var(--onav-hdr-bg); border-bottom: 1px solid var(--onav-hdr-line);
  font-family: var(--onav-font);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .onav-hdr--themed {
    --onav-hdr-bg: #12243A; --onav-hdr-line: #294263; --onav-hdr-ink: #F2F5F9; --onav-hdr-text: #F2F5F9;
    --onav-hdr-text-2: #A6B5C9; --onav-hdr-hover: #8DB8F5; --onav-hdr-btn-bg: #2F6FCB; --onav-hdr-btn-ink: #FFFFFF;
  }
}
:root[data-theme="dark"] .onav-hdr--themed {
  --onav-hdr-bg: #12243A; --onav-hdr-line: #294263; --onav-hdr-ink: #F2F5F9; --onav-hdr-text: #F2F5F9;
  --onav-hdr-text-2: #A6B5C9; --onav-hdr-hover: #8DB8F5; --onav-hdr-btn-bg: #2F6FCB; --onav-hdr-btn-ink: #FFFFFF;
}
.onav-hdr--sticky { position: sticky; top: 0; }
/* landscape phones: a pinned 64px bar would hold a sixth of a 390px-tall
   screen and sit over the content scrolling beneath it, so it scrolls away */
@media (max-height: 500px) { .onav-hdr--sticky { position: relative; } }
.onav-hdr-in { position: relative; min-height: 64px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; row-gap: 6px; padding: 0 clamp(16px, 4vw, 56px); }
/* wraps rather than overflows when a page carries many actions: the action group drops to its own row, right-aligned */
.onav-hdr-brand { display: inline-flex; align-items: center; gap: 9px; color: var(--onav-hdr-ink); text-decoration: none; flex-shrink: 0; }
.onav-hdr-brand:hover { color: var(--onav-hdr-hover); text-decoration: none; }
.onav-hdr-mark { flex: none; }
.onav-hdr-word { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; }
.onav-hdr-div { width: 1px; height: 22px; background: var(--onav-hdr-line); flex-shrink: 0; }
.onav-hdr-sub { font-size: 15px; color: var(--onav-hdr-text-2); white-space: nowrap; }
.onav-hdr-title { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; font-family: var(--onav-font); font-size: 20px; font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; color: var(--onav-hdr-ink); white-space: nowrap; pointer-events: none; }
.onav-hdr-r { margin-left: auto; display: flex; align-items: center; gap: 20px; }
.onav-hdr-session { display: inline-flex; align-items: center; gap: 7px; font-size: 15px; color: var(--onav-hdr-text-2); white-space: nowrap; }
.onav-hdr-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.onav-hdr-link { font-size: 15px; font-weight: 500; color: var(--onav-hdr-text); text-decoration: none; white-space: nowrap; background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; }
.onav-hdr-link:hover { color: var(--onav-hdr-hover); text-decoration: none; }
.onav-hdr-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 18px; border: 0; border-radius: 8px; background: var(--onav-hdr-btn-bg); color: var(--onav-hdr-btn-ink); font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; text-decoration: none; font-family: inherit; }
.onav-hdr-btn:hover { background: var(--onav-hdr-hover); color: var(--onav-hdr-btn-ink); text-decoration: none; }
/* A class display beats the UA's [hidden] { display: none }, so the hidden
   education opener painted a ghost button over the centered title on every
   condition without authored pages (found 2026-10-08, introduced with the
   unified header). The attribute must win. */
.onav-hdr-btn[hidden] { display: none; }
.onav-hdr :focus-visible { outline: 2px solid var(--onav-focus); outline-offset: 2px; border-radius: 4px; }
@media (max-width: 1100px) { .onav-hdr-title { display: none; } }
@media (max-width: 760px) {
  .onav-hdr-in { min-height: 56px; gap: 10px; padding-top: 8px; padding-bottom: 8px; }
  .onav-hdr-div, .onav-hdr-sub { display: none; }
  .onav-hdr-r { gap: 8px 14px; flex-wrap: wrap; justify-content: flex-end; max-width: 100%; }
  .onav-hdr-word { font-size: 17px; }
}
@media print { .onav-hdr { display: none; } }

/* ---- trainer variant: long titles + the audience switch ----
   Trainer titles run to ~55 characters, so the title is a flexible middle
   column (two lines: title, version) that truncates instead of being
   absolutely centered over the brand and the switch. */
.onav-hdr-mid { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 6px 8px; }
.onav-hdr-mid-title { margin: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--onav-font); font-size: 17px; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; color: var(--onav-hdr-ink); }
.onav-hdr-meta { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; line-height: 1.3; color: var(--onav-hdr-text-2); }
.onav-seg { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--onav-hdr-line); border-radius: 10px; }
.onav-seg-btn { padding: 6px 12px; border: 0; border-radius: 7px; background: none; color: var(--onav-hdr-text-2); font-family: inherit; font-size: 13.5px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.onav-seg-btn:hover { color: var(--onav-hdr-text); }
.onav-seg-btn.on { background: var(--onav-hdr-btn-bg); color: var(--onav-hdr-btn-ink); }
@media (max-width: 1280px) { .onav-hdr--trainer .onav-hdr-div, .onav-hdr--trainer .onav-hdr-sub { display: none; } }
/* below 1180 the brand, title and switch no longer share one row: the title
   takes its own row under the brand + switch, left-aligned */
@media (max-width: 1180px) {
  .onav-hdr--trainer .onav-hdr-in { padding-top: 8px; padding-bottom: 8px; }
  .onav-hdr--trainer .onav-hdr-mid { order: 3; flex-basis: 100%; align-items: flex-start; text-align: left; padding: 0; }
}
/* the trainer title shares its line with the highlighted Education-only badge
   (patch-toolbar-slim.mjs); the title keeps its ellipsis, the badge never
   shrinks, and the pair follows the title's centre / left alignment */
.onav-hdr-mid-row { display: flex; align-items: center; justify-content: center; gap: 10px; max-width: 100%; min-width: 0; }
.onav-hdr-mid-row .onav-hdr-mid-title { min-width: 0; }
@media (max-width: 1180px) { .onav-hdr--trainer .onav-hdr-mid-row { justify-content: flex-start; } }

/* ---- trainer sticky stack: header → view tabs → app chrome ----
   See scripts/patch-header-above-tabs.mjs. --hdr-h and --tabs-h are measured
   and published by each trainer's chrome effect; the fallbacks are the
   desktop heights. The header is pinned only from md up on screens taller
   than 500px — on phones it scrolls away and the tabs pin at the very top. */
.onav-trainer-hdr { position: relative; z-index: 37; }
.sticky.onav-trainer-tabs { top: var(--hdr-h, 0px); }
@media (min-width: 768px) {
  .onav-trainer-hdr { position: sticky; top: 0; }
  .onav-trainer-chrome { position: sticky; top: calc(var(--hdr-h, 65px) + var(--tabs-h, 48px)); }
}
@media (min-width: 768px) and (max-height: 500px) { .onav-trainer-hdr { position: relative; } }
/* phones: the three audience buttons span the row instead of overflowing it */
@media (max-width: 560px) {
  .onav-hdr--trainer .onav-hdr-r { width: 100%; }
  .onav-hdr--trainer .onav-seg { width: 100%; }
  .onav-hdr--trainer .onav-seg-btn { flex: 1; padding: 6px 4px; font-size: 13px; }
}

/* ---- the Education-only badge, for pages without Tailwind ----
   The same amber pill the trainers render (src/tools-dock.jsx EduBadge
   highlight), beside the title in .onav-hdr-mid-row: the ONE disclaimer
   surface in the shared header. The full sentence is the accessible name and
   a hover/focus tooltip. Owner (2026-10-15): "keep same header across all the
   pages" — the twins, export, shared case and symptom pages carry it too. */
.onav-edu-badge { position: relative; display: inline-flex; flex-shrink: 0; align-items: center; gap: 4px; padding: 4px 12px; border: 1px solid #fbbf24; border-radius: 999px; background: #fef3c7; color: #78350f; font-family: var(--onav-font); font-size: 12px; font-weight: 700; line-height: 1.2; letter-spacing: .04em; text-transform: uppercase; box-shadow: 0 1px 2px rgba(15, 23, 42, .06); cursor: help; }
.onav-edu-badge:focus { outline: none; }
.onav-edu-badge:focus-visible { box-shadow: 0 0 0 2px #d97706; }
.onav-edu-tip { display: none; position: absolute; left: 0; top: 100%; z-index: 60; margin-top: 6px; width: 20rem; max-width: calc(100vw - 2rem); padding: 10px; border: 1px solid #b9d3f7; border-radius: 8px; background: #fff; color: #124178; font-size: 12px; font-weight: 400; line-height: 1.4; letter-spacing: 0; text-transform: none; text-align: left; box-shadow: 0 10px 15px -3px rgba(15, 23, 42, .12); pointer-events: none; }
.onav-edu-badge:hover .onav-edu-tip, .onav-edu-badge:focus .onav-edu-tip { display: block; }
/* "Patient & caregiver" in a trainer opens the guided patient pages
   (patch-patient-guide-link.mjs); the arrow is drawn here so the button's
   text stays exactly its label. */
.onav-seg-btn.onav-seg-out::after { content: " ↗"; font-weight: 600; }