/* Fonts are self-hosted so the app works offline and makes no outside requests.
   Inter (latin) for English; Noto Sans TC cut down to the characters HerbBridge uses
   (regenerate with tools/make-font-subset.py whenever data or interface text changes). */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/inter-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/inter-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/inter-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'Noto Sans TC HS'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/noto-sans-tc-herbbridge-400.woff2) format('woff2'); }
@font-face { font-family: 'Noto Sans TC HS'; font-style: normal; font-weight: 500 700; font-display: swap; src: url(../fonts/noto-sans-tc-herbbridge-700.woff2) format('woff2'); }

/* HerbBridge 中西通: friendly consumer-health design. Warm neutral background, large rounded white
   cards, one Ink accent for the main action and selected picker items. Risk colours keep their meaning, and every colour comes with a text
   label and an icon. Two modes on <html data-mode>: "simple" (default) and "full". */

:root {
  color-scheme: light;

  --bg: #F5F4F0;
  --surface: #FFFFFF;
  --sunken: #EFEDE7;
  --ink: #16181D;
  --ink-2: #4B515C;
  --line: #E6E4DE;
  --line-strong: #8A8E95;

  --accent: #1E2430;
  --accent-hover: #303A49;
  --accent-soft: #E8EBEF;
  --focus: #626B7B;
  --focus-glow: rgba(98, 107, 123, .2);

  --high: #D92D20;      --high-ink: #FFFFFF;   --high-soft: #FDE8E7;  --high-text: #9F1D16;
  --moderate: #E8890C;  --moderate-ink: #241500; --moderate-soft: #FDEFD9; --moderate-text: #844700;
  --low: #D9B70F;       --low-ink: #262000;    --low-soft: #FBF3C4;   --low-text: #5E4C00;
  --none: #1F7A4A;      --none-ink: #FFFFFF;   --none-soft: #E3F4EA;  --none-text: #14532D;
  --unknown: #EDEDEA;   --unknown-ink: #393C42;  --unknown-line: #8A8D93;
  --official: #2E5AAC;  --official-ink: #FFFFFF;  --official-soft: #E6EEFB; --official-text: #1C4597;

  --radius: 24px;
  --radius-sm: 14px;
  --gutter: 16px;
  --pad: min(1.375rem, 6vw); /* card padding: generous, but never squeezes large text at 320px */
  --shadow: 0 1px 2px rgba(22, 24, 40, .05), 0 10px 28px rgba(22, 24, 40, .07);
  --font: 'Inter', 'Noto Sans TC HS', system-ui, -apple-system, 'Segoe UI', 'PingFang TC', 'Microsoft JhengHei', sans-serif;
  --font-zh: 'Noto Sans TC HS', 'Inter', system-ui, -apple-system, 'PingFang TC', 'Microsoft JhengHei', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 106.25%; /* Full details: 17px base */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  line-height: 1.6;
  font-weight: 400;
  overflow-wrap: break-word;
}

img, svg { display: block; max-width: 100%; }

a { color: var(--ink); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--ink); text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; box-shadow: 0 0 0 6px var(--focus-glow); }
h1:focus, h1:focus-visible, h2[tabindex]:focus:not(:focus-visible), h3[tabindex]:focus:not(:focus-visible) { outline: none; }

p { margin: 0 0 0.75rem; }
h1, h2, h3, h4 { margin: 0; line-height: 1.25; }
/* The page never shifts sideways when a scrollbar appears or disappears (desktop; phones overlay theirs). */
@media (min-width: 48rem) { html { scrollbar-gutter: stable; } }

.wrap {
  width: 100%;
  max-width: min(68rem, 1200px); /* same column in Simple (20px text) and Full; centred on wide screens */
  margin: 0 auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 8px; top: 8px; z-index: 10; transform: translateY(-300%);
  background: var(--ink); color: #fff; padding: 0.75rem 1rem; border-radius: var(--radius-sm);
}
.skip-link:focus { transform: none; color: #fff; }

.muted { color: var(--ink-2); }
.strong { font-weight: 700; }

.icon { display: inline-flex; width: 1.25em; height: 1.25em; flex: none; }
.icon svg { width: 100%; height: 100%; }

/* ---------- header and footer ---------- */

.site-header { background: var(--surface); border-bottom: 1px solid var(--line); }
.header-inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0 1.5rem; min-height: 64px;
}
.brand {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 48px; margin-right: auto; padding: 0.15em 0;
  color: var(--ink); text-decoration: none; font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.01em;
}
.brand:hover { color: var(--ink); }
.brand-mark {
  width: 1.75rem; height: 1.75rem; border-radius: 7px; background: var(--ink); position: relative; flex: none;
}
.brand-mark::before, .brand-mark::after {
  content: ''; position: absolute; background: #fff; border-radius: 2px;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
}
.brand-mark::before { width: 56%; height: 14%; }
.brand-mark::after { width: 14%; height: 56%; }
.brand-zh { font-weight: 500; color: var(--ink-2); margin-left: 0.1em; white-space: nowrap; }

.site-nav { display: flex; flex-wrap: wrap; gap: 0 0.25rem; }
.site-nav a {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0.2em 0.75rem;
  color: var(--ink-2); text-decoration: none; font-weight: 500; font-size: 1rem; line-height: 1.3;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--ink); font-weight: 700; border-bottom-color: var(--ink); }

.lang-toggle {
  min-height: 44px; padding: 0.2em 0.8em; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
  font: inherit; font-size: 0.9444rem; font-weight: 700; line-height: 1.3; cursor: pointer; white-space: nowrap;
}
.lang-toggle:hover { border-color: var(--ink); }

/* Phones: logo and language button on the first row, the menu (always visible) on the second. */
@media (max-width: 47.99rem) {
  .header-inner { column-gap: 0.5rem; padding-top: 0.5rem; }
  .brand { font-size: 1rem; }
  .lang-toggle { order: 2; }
  .site-nav { order: 3; width: 100%; margin: 0 0 0 -8px; }
  .site-nav a { padding: 0.2em 8px; font-size: 0.9444rem; min-height: 46px; margin-right: 0.25rem; }
}
@media (min-width: 48rem) {
  .site-nav { order: 2; }
  .lang-toggle { order: 3; }
}

.site-footer {
  margin-top: 3.5rem; padding: 2rem 0 calc(2rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line); font-size: 0.9444rem; color: var(--ink-2);
}
.site-footer p { max-width: 46rem; }
.site-footer p:first-child { color: var(--ink); }
.zh-note { font-size: 0.9444rem; }

main { padding-bottom: 1rem; }
main:focus { outline: none; }
.loading { padding: 3rem 0; color: var(--ink-2); }

/* ---------- type ---------- */

.page-head { padding: clamp(1.5rem, 5vw, 3.5rem) 0 1.5rem; }
.page-head h1 {
  font-size: clamp(2.125rem, 1.5rem + 2.6vw, 3.25rem);
  line-height: 1.08; font-weight: 700; letter-spacing: -0.03em; margin-bottom: 0.75rem;
}
:lang(zh-HK) .page-head h1 { letter-spacing: 0.01em; line-height: 1.2; }
.lede { font-size: 1rem; color: var(--ink-2); max-width: 36rem; margin-bottom: 0; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 3.25rem; padding: 0.5rem 1.5rem; border-radius: var(--radius-sm);
  font: inherit; font-size: 1.0556rem; font-weight: 700; line-height: 1.3; text-decoration: none; cursor: pointer;
  border: 1px solid transparent; text-align: center;
}
.btn .icon { width: 1.25rem; height: 1.25rem; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); color: #fff; }
.btn-primary:disabled { background: #D5D7DB; color: #4A4F57; cursor: not-allowed; }
.btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.btn-secondary:hover { color: var(--ink); border-color: var(--ink); }
.btn-quiet {
  background: none; color: var(--ink-2); padding: 0.25rem 0.5rem; min-height: 2.75rem;
  font-weight: 500; font-size: 1rem; text-decoration: underline; text-underline-offset: 0.2em;
}
.btn-quiet:hover { color: var(--ink); }
.btn-small { min-height: 2.875rem; padding: 0.375rem 1.125rem; font-size: 1rem; }

/* ---------- Check screen: the dashboard ---------- */

.dash { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 2rem; }
.dash-main { min-width: 0; }
.dash-side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-content: start; }
@media (min-width: 60rem) {
  .dash { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .dash-side { padding-top: clamp(1.75rem, 5vw, 3.5rem); }
}

/* Status tile: one sentence on what needs attention. */
.status {
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.25rem var(--pad); margin: 0 0 1rem;
}
.status::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: transparent; }
.status-high::before { background: var(--high); }
.status-moderate::before { background: var(--moderate); }
.status-low::before { background: var(--low); }
.status-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.75rem 0.875rem; }
.status h2 { flex: 1 1 10rem; min-width: 0; overflow-wrap: anywhere; font-size: 1.2778rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; padding-top: 0.2rem; }
.status-icon { width: 2.5rem; height: 2.5rem; padding: 0.45rem; border-radius: 50%; flex: none; }
.status-icon.tone-high { background: var(--high); color: var(--high-ink); }
.status-icon.tone-moderate { background: var(--moderate); color: var(--moderate-ink); }
.status-icon.tone-low { background: var(--low); color: var(--low-ink); }
.status-text { color: var(--ink-2); margin: 0.75rem 0 0; }
.demo-start { margin-top: 0.25rem; }
/* First visit: one big next step */
.btn-step { width: 100%; min-height: 3.75rem; justify-content: center; margin-top: 1rem; font-size: 1.2222rem; }
.btn-step .icon { width: 1.5rem; height: 1.5rem; }
.step-then { margin: 0.75rem 0 0; color: var(--ink-2); }
.link-button {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0; background: none; border: 0;
  font: inherit; color: var(--ink); text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; text-align: left;
}
.link-button:hover { color: var(--ink); }
.check-bar[hidden] { display: none; }
/* Grey cards: a next step under the required wording */
.unknown-next { margin-top: 1rem; padding-top: 0.75rem; border-top: 1px dashed var(--unknown-line); }
.unknown-next p { margin: 0.25rem 0 0.75rem; }

.status-list { list-style: none; margin: 1rem 0 0; padding: 0; border-top: 1px solid var(--line); }
.status-row {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.75rem;
  min-height: 3.75rem; padding: 0.75rem 2.25rem 0.75rem 0;
  border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none;
}
.status-row:hover { color: var(--ink); }
.status-row:hover .clash-pair { text-decoration: underline; text-underline-offset: 0.2em; }
.row-go { position: absolute; right: 0.25rem; top: 50%; transform: translateY(-50%); color: var(--ink-2); }
.clash-pair { font-weight: 700; font-size: 1.0556rem; overflow-wrap: anywhere; }
.pair-plus { color: var(--ink-2); font-weight: 400; margin: 0 0.1em; }

.status-unknown {
  display: flex; gap: 0.625rem; align-items: flex-start; margin: 1rem 0 0;
  background: var(--sunken); border: 1.5px dashed var(--unknown-line); border-radius: var(--radius-sm);
  padding: 0.75rem 0.875rem; font-size: 1rem; color: var(--unknown-ink);
}
.status-unknown .icon { margin-top: 0.15em; }
.status-unknown span { min-width: 0; overflow-wrap: anywhere; }
.status-more { margin-top: 1.25rem; }
.storage-off { font-weight: 700; border-left: 3px solid var(--high); padding-left: 0.75rem; margin: 1rem 0 0; }

/* Herb and medicine cards */
.cab-card {
  min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.25rem var(--pad);
}
.cab-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.125rem 1rem;
  padding-bottom: 0.875rem; margin-bottom: 1rem; border-bottom: 1px solid var(--line);
}
.cab-head h2 { min-width: 0; font-size: 1.2222rem; font-weight: 700; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.cab-count { margin: 0; color: var(--ink-2); font-size: 0.9444rem; }

.chips { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip {
  display: inline-flex; align-items: center; gap: 0.625rem; min-height: 3rem; max-width: 100%;
  padding: 0.375rem 0.5rem 0.375rem 1rem; border-radius: 999px;
  border: 1px solid #D3D2CD; background: var(--bg); color: var(--ink);
  font: inherit; font-size: 1rem; line-height: 1.3; cursor: pointer; text-align: left; overflow-wrap: anywhere;
}
.chip:hover { border-color: var(--ink); }
.chip .name-primary { font-weight: 600; }
.chip .name-secondary { color: var(--ink-2); }
.chip-x {
  width: 1.75rem; height: 1.75rem; padding: 0.3rem; border-radius: 50%;
  background: var(--surface); color: var(--ink); border: 1px solid #D3D2CD;
}

.btn-add {
  width: 100%; min-height: 3.5rem; justify-content: center; padding: 0.5rem 1rem;
  background: var(--surface); color: var(--ink); border: 1.5px solid var(--ink);
  font-size: 1.1111rem;
}
.btn-add:hover { background: var(--sunken); color: var(--ink); }
.btn-add .icon { width: 1.375rem; height: 1.375rem; }

/* Sticky Check bar */
.check-bar {
  position: sticky; bottom: 0; z-index: 5;
  margin: 1.5rem calc(-1 * var(--gutter)) 0;
  padding: 0.75rem var(--gutter) calc(0.75rem + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.97);
  /* Full-width white bar with a 1px line on top, even inside the centred page. */
  box-shadow: 0 0 0 100vmax rgba(255, 255, 255, 0.97), 0 -1px 0 100vmax var(--line);
  clip-path: inset(-1px -100vmax 0);
}
.check-bar-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; }
.check-status { margin: 0; font-size: 1rem; line-height: 1.35; color: var(--ink-2); flex: 1 1 7rem; }
.btn-check { min-width: min(7.5rem, 100%); font-size: 1.1667rem; flex: none; }
.check-bar.is-static { position: static; }
.below-bar { padding: 1rem 0 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; }
html[data-route="check"] { scroll-padding-bottom: calc(var(--check-bar-h, 9rem) + 0.5rem); }
/* Short screens (or browser zoom): the bar stops being sticky so it never covers the page. */
@media (max-height: 34em) { .check-bar { position: static; } }

.bar-notice {
  flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.75rem; min-height: 2.75rem;
  padding: 0.25rem 0; background: none; border: 0; color: var(--ink); cursor: pointer;
  font: inherit; font-weight: 700; font-size: 1rem; line-height: 1.35; text-align: left;
}
.bar-notice[hidden] { display: none; }
.bar-notice-text { text-decoration: underline; text-underline-offset: 0.2em; }
.bar-notice .badge { font-size: 0.9444rem; padding: 0.25rem 0.625rem 0.25rem 0.5rem; }
.bar-notice > .icon { width: 1.375rem; height: 1.375rem; }
.check-bar .bar-notice { flex-wrap: nowrap; }

/* Clash warning: builds up as clashes are found and stays until closed, one line per pair. */
.clash-alert {
  margin: 0 0 1rem; padding: 1.125rem var(--pad) 1.25rem;
  background: var(--surface); border: 2px solid var(--ink); border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(17, 19, 22, 0.10);
  scroll-margin-top: 1rem;
}
.clash-alert[hidden] { display: none; }
.clash-alert:focus { outline: none; }
.clash-alert:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.clash-alert h2 { font-size: 1.2222rem; font-weight: 700; margin-bottom: 0.25rem; }
.warning-list { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.clash-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.75rem;
  padding: 0.75rem 0; border-bottom: 1px solid var(--line);
}
.warning-list .clash-row:last-child { border-bottom: 0; }
.alert-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin-top: 0.75rem; }

/* Demo: Mr Wong */
.demo-banner {
  border: 1px solid var(--ink); background: var(--sunken); border-radius: var(--radius);
  padding: 1.125rem var(--pad); margin: 0 0 1rem;
}
.demo-banner h2 { font-size: 1.0556rem; font-weight: 700; margin-bottom: 0.375rem; color: var(--ink); }
.demo-banner p { margin-bottom: 0.875rem; }
.demo-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }

/* ---------- Picker sheet ---------- */

html.sheet-open, html.sheet-open body { overflow: hidden; }
.sheet {
  position: fixed; inset: 0; z-index: 50;
  display: flex; justify-content: center; align-items: stretch;
  background: rgba(17, 19, 22, 0.45);
}
.sheet-panel {
  display: flex; flex-direction: column; width: 100%; max-width: 42rem; height: 100%;
  background: var(--surface);
}
@media (min-width: 48rem) {
  .sheet { padding: 2.5rem 1.5rem; }
  .sheet-panel { border-radius: var(--radius); overflow: hidden; }
}
.sheet-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: calc(1.25rem + env(safe-area-inset-top)) max(var(--gutter), env(safe-area-inset-right)) 1.5rem max(var(--gutter), env(safe-area-inset-left));
}
@media (min-width: 48rem) { .sheet-body { padding: 2rem 2rem 1.5rem; } }
.sheet-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1rem; margin-bottom: 1.25rem; }
.sheet-head h2 { font-size: clamp(1.625rem, 1.3rem + 1.4vw, 2rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.sheet-head h2:focus { outline: none; }
.sheet-count { margin: 0; color: var(--ink-2); font-size: 0.9444rem; }
.sheet-foot {
  flex: none; display: flex; flex-direction: column; gap: 0.5rem;
  padding: 0.75rem max(var(--gutter), env(safe-area-inset-right)) calc(0.75rem + env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left));
  border-top: 1px solid var(--line); background: var(--surface);
}
@media (min-width: 48rem) { .sheet-foot { padding: 1rem 2rem; } }
.btn-done { width: 100%; min-height: 3.5rem; font-size: 1.1667rem; }

.search-label { display: block; font-weight: 700; font-size: 1rem; margin: 0; }
.search-hint { color: var(--ink-2); font-size: 0.9444rem; margin: 0 0 0.5rem; }
.search {
  width: 100%; min-height: 3.5rem; padding: 0.75rem 1rem 0.75rem 3rem;
  font: inherit; font-size: 1.1111rem; color: var(--ink);
  background: var(--bg) no-repeat 1rem 50% / 1.25rem
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5' fill='none' stroke='%234B5058' stroke-width='2.2'/%3E%3Cpath d='M15.5 15.5 21 21' stroke='%234B5058' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  -webkit-appearance: none; appearance: none;
}
.search::placeholder { color: #6B7078; }
.search:focus { border-color: var(--focus); background-color: var(--surface); outline: 3px solid var(--focus); outline-offset: 1px; }

.options { list-style: none; margin: 1rem 0 0; padding: 0; border-top: 1px solid var(--line); }
.options li { border-bottom: 1px solid var(--line); }
.option {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem;
  width: 100%; min-height: 4rem; padding: 0.75rem 0.25rem;
  background: none; border: 0; color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
.option:hover { background: var(--bg); }
.option .name { min-width: 0; overflow-wrap: anywhere; }
.option .name-primary { font-size: 1.1111rem; font-weight: 600; }
.option .name-secondary { color: var(--ink-2); margin-left: 0.25rem; }
.option-state {
  display: inline-flex; align-items: center; gap: 0.375rem; flex: none;
  min-height: 2.5rem; padding: 0 0.875rem 0 0.625rem; border-radius: 999px;
  border: 1.5px solid var(--ink); color: var(--ink); font-weight: 700; font-size: 0.9444rem;
}
.option-state .icon { width: 1.125rem; height: 1.125rem; }
.option.is-on .option-state { background: var(--ink); color: #fff; }
.no-match { padding: 1rem 0.25rem; color: var(--ink-2); }
.where-tip { color: var(--ink-2); font-size: 0.9444rem; margin: 1.25rem 0 0; }

/* ---------- badges (colour + icon + text, always) ---------- */

.badge {
  display: inline-flex; align-items: center; gap: 0.4rem; justify-self: start; margin: 0;
  padding: 0.3rem 0.75rem 0.3rem 0.55rem; border-radius: 6px;
  font-weight: 700; font-size: 0.9444rem; line-height: 1.3;
}
.badge .icon { width: 1.15em; height: 1.15em; }
.badge-high { background: var(--high); color: var(--high-ink); }
.badge-moderate { background: var(--moderate); color: var(--moderate-ink); }
.badge-low { background: var(--low); color: var(--low-ink); }
.badge-none_reported { background: var(--none); color: var(--none-ink); }
.badge-not_in_database { background: var(--unknown); color: var(--unknown-ink); border: 1.5px dashed var(--unknown-line); }

/* ---------- Results screen ---------- */

.results-head { max-width: 46rem; padding-bottom: 0.75rem; }
.tally { list-style: none; padding: 0; margin: 1rem 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; font-weight: 700; }
.tally li { display: flex; align-items: center; gap: 0.5rem; }
.tally li::before { content: ''; width: 0.75rem; height: 0.75rem; border-radius: 3px; flex: none; }
.tally-flagged::before { background: var(--ink); }
.tally-unknown::before { background: var(--unknown); border: 1.5px dashed var(--unknown-line); }

.disclaimer-box {
  border-left: 3px solid var(--ink); background: var(--surface);
  padding: 0.875rem 1rem; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; max-width: 46rem; font-size: 1rem; margin: 0;
}

.group { margin-top: 2rem; max-width: 46rem; }
.group-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem;
  font-size: 1.1111rem; font-weight: 700; letter-spacing: -0.005em;
  padding-bottom: 0.75rem; margin-bottom: 1rem; border-bottom: 1px solid var(--ink);
}
.group-mark { width: 0.875rem; height: 0.875rem; border-radius: 3px; flex: none; }
.group-high .group-mark { background: var(--high); }
.group-moderate .group-mark { background: var(--moderate); }
.group-low .group-mark { background: var(--low); outline: 1px solid #C9AE00; outline-offset: -1px; }
.group-none_reported .group-mark { background: var(--none); }
.group-not_in_database .group-mark { background: var(--unknown); border: 1.5px dashed var(--unknown-line); }
.group-count {
  margin-left: auto; display: inline-flex; align-items: center; justify-content: center;
  min-width: 2rem; min-height: 2rem; padding: 0 0.5rem; border-radius: 999px;
  border: 1px solid var(--line-strong); font-size: 0.9444rem; font-weight: 700; color: var(--ink);
}

.cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.875rem; }

.card {
  position: relative; overflow: hidden; min-width: 0; overflow-wrap: anywhere;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.125rem var(--pad) 1rem calc(var(--pad) + 4px);
  scroll-margin-top: 1rem;
}
.card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--line-strong); }
.card-high::before { background: var(--high); }
.card-moderate::before { background: var(--moderate); }
.card-low::before { background: var(--low); }
.card-none_reported::before { background: var(--none); }

.card-head { display: grid; gap: 0.625rem; margin-bottom: 0.75rem; }
.pair { font-size: clamp(1.1667rem, 1.05rem + 0.6vw, 1.3333rem); font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; scroll-margin-top: 1rem; }
.pair .name-secondary { font-weight: 500; color: var(--ink-2); }
.pair:focus { outline: none; }

.effect { font-size: 1.0556rem; font-weight: 500; line-height: 1.5; margin-bottom: 0.875rem; }

.facts { margin: 0; display: grid; gap: 0.625rem; }
.facts > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.125rem; }
.facts dt, .block-label {
  font-size: 0.8889rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-2);
}
:lang(zh-HK) .facts dt, :lang(zh-HK) .block-label { text-transform: none; letter-spacing: 0.06em; font-size: 0.8889rem; }
.facts dd { margin: 0; }

.evidence { list-style: none; margin: 0.125rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.375rem; }
.evidence li {
  border: 1px solid var(--line-strong); border-radius: 999px; padding: 0.0625rem 0.75rem; font-size: 0.9444rem;
}

.main-source { font-size: 1rem; }
.main-source a, .sources a { display: inline; padding: 0.6rem 0; overflow-wrap: anywhere; line-height: 1.6; }
.main-source { padding: 0.5rem 0; }
.sources li { padding-top: 0.375rem; padding-bottom: 0.375rem; }
.main-source .ext, .sources .ext { width: 0.9em; height: 0.9em; margin-left: 0.3em; vertical-align: -0.1em; }

.card-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  width: calc(100% + 2 * var(--pad) + 4px); margin: 0.75rem calc(-1 * var(--pad)) 0 calc(-1 * var(--pad) - 4px);
  padding: 0.75rem var(--pad) 0.75rem calc(var(--pad) + 4px);
  min-height: 3.25rem; border: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: none;
  color: var(--ink); font: inherit; font-size: 1.0556rem; font-weight: 700; text-align: left; cursor: pointer;
}
.card-toggle:hover { background: var(--sunken); }
.card-toggle:focus-visible { outline-offset: -3px; }
.toggle-chev { transform: rotate(90deg); }
.card-toggle[aria-expanded="true"] .toggle-chev { transform: rotate(-90deg); }

.card-details { padding: 0.5rem 0 0; }
.card-details[hidden] { display: none; }
.level-meaning { margin: 0.5rem 0 0; font-weight: 600; font-size: 1rem; color: var(--ink); }
.block { padding-top: 0.875rem; margin-top: 0.875rem; border-top: 1px solid var(--line); }
.block p:last-child { margin-bottom: 0; }
.block-label { margin-bottom: 0.375rem; }
.block-action { background: var(--bg); border-top: 0; border-radius: var(--radius-sm); padding: 0.875rem 1rem; }
.action { font-weight: 500; }
.main-finding { font-weight: 500; }

.pro { margin-top: 0.5rem; }
.pro summary {
  display: inline-flex; align-items: center; gap: 0.375rem; min-height: 2.75rem; cursor: pointer;
  color: var(--ink); font-weight: 700; font-size: 1rem; list-style: none;
}
.pro summary::-webkit-details-marker { display: none; }
.pro summary::before {
  content: ''; width: 0.5rem; height: 0.5rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); margin-right: 0.375rem;
}
.pro[open] summary::before { transform: rotate(45deg); }
.pro p { font-size: 0.9444rem; background: var(--bg); padding: 0.75rem 1rem; border-radius: var(--radius-sm); }

.sources { margin: 0; padding-left: 1.25rem; font-size: 1rem; }
.sources li { margin: 0.125rem 0; padding-left: 0.25rem; }

.card-disclaimer {
  margin: 0; padding-top: 0.75rem; border-top: 1px solid var(--line);
  font-size: 0.9444rem; line-height: 1.5; color: var(--ink-2);
}
.card-toggle + .card-details[hidden] + .card-disclaimer { border-top: 0; padding-top: 0.875rem; }
.card-details:not([hidden]) + .card-disclaimer { margin-top: 1.25rem; }

/* "Not in our database": neutral grey, dashed outline, its own icon, no rating colours at all. */
.card-unknown { background: var(--sunken); border: 1.5px dashed var(--unknown-line); padding-left: var(--pad); }
.card-unknown::before { display: none; }
.unknown-text { font-size: 1.0556rem; font-weight: 500; margin: 0 0 1rem; max-width: 40rem; }
.card-unknown .card-disclaimer { border-top-color: #D3D2CC; }

.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2.5rem; max-width: 46rem; }
@media (max-width: 34rem) { .actions .btn { flex: 1 1 100%; } }
.head-action { margin-top: 1.25rem; }

.notice { padding: 2rem 0; }
.notice-error { border-top: 4px solid var(--high); margin-top: 2rem; }
.notice-error h1 { font-size: 1.5rem; margin-bottom: 0.75rem; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---------- Doctor summary ---------- */

.summary { padding: clamp(1.75rem, 5vw, 3.5rem) 0 0; max-width: 52rem; }
.summary-kicker { font-size: 0.8889rem; font-weight: 700; letter-spacing: 0.02em; /* the name keeps its own capitals: "HerbBridge 中西通 · Doctor summary" */ color: var(--ink); margin-bottom: 0.5rem; }
.summary-head h1 { font-size: clamp(1.75rem, 1.3rem + 2.2vw, 2.75rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; margin-bottom: 0.75rem; }
.summary-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.5rem 0 0.5rem; }
@media (max-width: 34rem) { .summary-actions .btn { flex: 1 1 100%; } }
.summary h2 { font-size: 1.2222rem; font-weight: 700; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.25rem; }
.summary-lists {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem;
  border-top: 1px solid var(--ink); margin-top: 1.5rem; padding-top: 1.25rem;
}
@media (min-width: 40rem) { .summary-lists { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.summary-items { margin: 0; padding-left: 1.25rem; }
.summary-items li { margin: 0.25rem 0; }
.si-en { font-weight: 700; }
.si-latin { display: block; font-style: italic; color: var(--ink-2); font-size: 0.9444rem; }
.summary-section { border-top: 1px solid var(--ink); margin-top: 1.5rem; padding-top: 1.25rem; }
.summary-row {
  position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface);
  padding: 1rem 1rem 1rem 1.25rem; margin-bottom: 0.75rem;
}
.summary-row::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--line-strong); }
.summary-high::before { background: var(--high); }
.summary-moderate::before { background: var(--moderate); }
.summary-low::before { background: var(--low); }
.summary-none_reported::before { background: var(--none); }
.summary-row-head { display: grid; gap: 0.5rem; margin-bottom: 0.5rem; }
.summary-pair { font-size: 1.1111rem; font-weight: 700; margin: 0; overflow-wrap: anywhere; }
.summary-dl { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; }
.summary-dl dt { font-size: 0.8889rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-2); margin-top: 0.625rem; }
:lang(zh-HK) .summary-dl dt { text-transform: none; letter-spacing: 0.04em; font-size: 0.8889rem; }
.summary-dl dd { margin: 0.125rem 0 0; }
@media (min-width: 40rem) {
  .summary-dl { grid-template-columns: 9rem minmax(0, 1fr); column-gap: 1rem; }
  .summary-dl dt { margin-top: 0.5rem; }
  .summary-dl dd { margin-top: 0.4rem; }
}
.summary-unknown { background: var(--sunken); border: 1.5px dashed var(--unknown-line); border-radius: var(--radius-sm); padding: 1rem; }
.summary-unknown-list { margin: 0; padding-left: 1.25rem; }
.summary-unknown-list .summary-pair { font-size: 1rem; }
.summary-disclaimer { margin-top: 1.5rem; }
.print-url { display: none; }

/* ---------- About ---------- */

.about { max-width: 46rem; }
.about-section { border-top: 1px solid var(--ink); padding: 1.5rem 0 0.5rem; }
.about-section h2 { font-size: clamp(1.3333rem, 1.15rem + 1vw, 1.75rem); font-weight: 700; letter-spacing: -0.015em; margin-bottom: 0.75rem; }
.scale { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: 0.625rem; counter-reset: lvl; }
.scale li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; counter-increment: lvl; }
.scale li::before { content: counter(lvl); font-weight: 700; color: var(--ink-2); width: 1.25rem; }
.scale .level-meaning { flex: 1 1 14rem; color: var(--ink-2); font-weight: 400; margin: 0; }
.about-dl { margin: 0; }
.about-dl dt { font-weight: 700; margin-top: 0.75rem; }
.about-dl dd { margin: 0.125rem 0 0; color: var(--ink-2); }
.about-sources li { margin-bottom: 0.5rem; }
.source-pairs { display: block; color: var(--ink-2); font-size: 0.9444rem; overflow-wrap: anywhere; }
.about-next { padding-left: 1.25rem; }
.about-next li { margin: 0.375rem 0; }
.install-steps { padding-left: 1.25rem; }
.install-steps li { margin: 0.375rem 0; }

/* ---------- Print: one clean page for the doctor ---------- */

@page { size: A4; margin: 14mm 14mm 16mm; }

@media print {
  html { font-size: 10pt; }
  body { background: #fff; color: #000; }
  .site-header, .skip-link, .no-print, .check-bar, .below-bar, .site-footer, .ext, .visually-hidden,
  .actions, .pro summary, .clash-alert, .demo-banner, .sheet, .card-toggle { display: none !important; }
  .wrap { max-width: none; padding: 0; }
  main { padding: 0; }
  a { color: #000; text-decoration: none; }
  .summary { max-width: none; padding: 0; line-height: 1.32; } /* keeps Mr Wong on one A4 page */
  .summary-head h1 { font-size: 16pt; margin-bottom: 2pt; }
  .summary-kicker { color: #000; margin-bottom: 2pt; }
  .summary-lists, .summary-section { border-top: 1pt solid #000; margin-top: 5pt; padding-top: 4pt; }
  .summary-lists { grid-template-columns: 1fr 1fr; gap: 12pt; }
  .summary h2 { font-size: 11pt; margin-bottom: 3pt; }
  .summary-row { break-inside: avoid; page-break-inside: avoid; padding: 5pt 8pt 5pt 10pt; margin-bottom: 5pt; border: 1pt solid #999; border-radius: 0; }
  .summary-row::before { width: 4pt; }
  .summary-row-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4pt 8pt; margin-bottom: 2pt; }
  .summary-pair { font-size: 10.5pt; }
  .summary-dl { grid-template-columns: 22mm minmax(0, 1fr); column-gap: 6pt; }
  .summary-dl dt { font-size: 7.5pt; margin-top: 3pt; color: #333; }
  .summary-dl dd { margin-top: 2.5pt; }
  .badge { font-size: 8.5pt; padding: 1pt 6pt 1pt 4pt; border: 1pt solid #000;
    -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .sources { padding-left: 12pt; font-size: 8pt; }
  .sources li { margin: 0; padding: 0; }
  .main-source { padding: 0; }
  .sources a, .main-source a { display: inline; min-height: 0; padding: 0; }
  .print-url { display: block; color: #333; word-break: break-all; }
  .summary-unknown { background: #fff; border: 1pt dashed #666; padding: 6pt 8pt; break-inside: avoid; }
  .summary-unknown-list { columns: 2; column-gap: 16pt; }
  .summary-unknown-list li { break-inside: avoid; }
  .disclaimer-box { background: #fff; border: 1pt solid #000; border-left-width: 3pt; padding: 5pt 8pt; font-size: 9pt; }
  .summary-row, .summary-row::before, .summary-unknown, .disclaimer-box { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .level-meaning { font-size: 8.5pt; }
}
.about .results-head { padding-bottom: 1.5rem; }

/* ---------- From the live test (18 Oct) ---------- */

/* Names never split mid-name (e.g. 華法 / 林): every name is its own span. */
.name-primary, .name-secondary { word-break: keep-all; }
/* Chinese names stay on one line in the summary. Elsewhere they keep whole (keep-all) and break
   only when a long one (單硝酸異山梨酯) would otherwise run off the screen: see "names never split". */
.summary-pair span:lang(zh-HK), .si-zh { white-space: nowrap; overflow-wrap: normal; }
/* Cabinet chips are narrow: there a Chinese name may wrap, but only as a last resort, so an
   extreme text size never makes the page scroll sideways. Card titles keep names whole. */
.chip .name-primary:lang(zh-HK), .chip .name-secondary:lang(zh-HK) { white-space: normal; overflow-wrap: anywhere; }
/* Page headings never break inside a word ("medicin / e"): no automatic hyphens or mid-word
   wrapping, and on narrow screens the size is capped so the longest word always fits. */
#app h1, #app h2, .sheet-head h2 { overflow-wrap: normal; word-break: normal; hyphens: manual; -webkit-hyphens: manual; }
@media (max-width: 26rem) {
  #app h1 { font-size: min(2.25rem, calc((100vw - 2rem) / 5.5)); }
  #app h2, .sheet-head h2 { font-size: min(1.625rem, calc((100vw - 2rem) / 7.5)); }
}

/* One grey box for several "not in our database" pairs */
.unknown-pairs { list-style: none; margin: 0.75rem 0 0; padding: 0; border-top: 1px dashed var(--unknown-line); }
.unknown-pairs li { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.625rem 0; border-bottom: 1px dashed var(--unknown-line); font-weight: 700; }
.unknown-pairs .unknown-mark { width: 1.25rem; height: 1.25rem; margin-top: 0.15em; color: var(--unknown-ink); flex: none; }
.unknown-pairs .name-secondary { font-weight: 500; color: var(--ink-2); }
.unknown-pair { min-width: 0; overflow-wrap: anywhere; }

/* Clear my list: in-page confirmation */
.clear-question { font-weight: 700; margin: 0.5rem 0; }
.clear-actions { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; }
.btn-danger { background: var(--high); color: #fff; }
.btn-danger:hover { background: #8F1E18; color: #fff; }

/* Very narrow screens (a phone zoomed to 200% is about 195px wide): compact header so the
   page content starts on the first screen. Every tap target stays at least 44px. */
@media (max-width: 16.25rem) {
  .header-inner { gap: 0 0.5rem; padding-top: 0.25rem; }
  .brand { min-height: 2.75rem; gap: 0.375rem; font-size: 1rem; }
  .brand-mark { width: 1.375rem; height: 1.375rem; }
  .brand-zh { display: none; } /* the brand link's label still says HerbBridge 中西通 */
  .lang-toggle { padding: 0 0.75rem; font-size: 0.9375rem; }
  .site-nav { gap: 0; }
  .site-nav a { min-height: 2.75rem; padding: 0 0.375rem; font-size: 0.9375rem; }
  #app h1, .display { line-height: 1.15; }
}

/* ---------- Heart-disease focus (Challenge 4: cardiovascular disease) ---------- */
.subtitle { font-size: 1.125rem; font-weight: 500; color: var(--ink); margin: 0.375rem 0 0.5rem; max-width: 38rem; }
.option-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 9rem; }
.option-sub { font-size: 0.9375rem; font-weight: 400; color: var(--ink-2); margin-top: 0.125rem; }
.option-group { list-style: none; border: 0; }
.option-group-head {
  font-size: 0.9375rem; font-weight: 700; color: var(--ink); letter-spacing: 0.01em;
  margin: 1.25rem 0 0.25rem; padding-bottom: 0.375rem; border-bottom: 1px solid var(--ink);
}
.option-group:first-child .option-group-head { margin-top: 0.5rem; }
.option-group-list { margin: 0; border-top: 0; }
.heart-impact {
  display: flex; gap: 0.625rem; align-items: flex-start;
  background: var(--surface-2, #F7F7F4); border-left: 3px solid var(--ink);
  border-radius: 0 var(--radius-sm, 6px) var(--radius-sm, 6px) 0;
  padding: 0.75rem 0.875rem; margin: 0 0 1rem;
}
.heart-impact p { margin: 0; font-size: 1.0556rem; line-height: 1.5; }
.heart-lines { min-width: 0; }
.heart-impact .heart-note { margin-top: 0.375rem; color: var(--ink-2); }
.heart-impact .heart-icon { width: 1.375rem; height: 1.375rem; flex: none; margin-top: 0.1em; color: var(--ink); }
@media print { .heart-impact { border-left-width: 2pt; padding: 3pt 6pt; margin-bottom: 4pt; } .heart-impact .heart-icon { display: none; } }
.about-heart { padding-left: 1.25rem; margin: 0; }
.about-heart li { margin: 0.5rem 0; }
.inline-source { white-space: normal; }
.about-subhead { font-size: 1.0556rem; font-weight: 700; margin: 1.25rem 0 0.5rem; }

/* ---------- Official cautions (government agencies' own words) ---------- */
.badge-official { background: var(--official); color: var(--official-ink); }
.status-official::before, .card-official::before, .summary-official::before { background: var(--official); }
.status-icon.tone-official { background: var(--official); color: var(--official-ink); }
.group-official .group-mark { background: var(--official); }
.official-box { background: var(--official-soft); border: 1px solid #C9D6EE; border-radius: var(--radius-sm); padding: 0.875rem 1rem; margin: 0.75rem 0 1rem; }
.official-intro { margin: 0 0 0.75rem; font-weight: 700; }
.official-statement { margin: 0 0 0.875rem; }
.official-quote { margin: 0; padding: 0.375rem 0 0.375rem 0.75rem; border-left: 3px solid var(--official); background: var(--surface); font-style: italic; overflow-wrap: anywhere; }
.official-quote:lang(zh-HK) { font-style: normal; }
.official-original { margin: 0.375rem 0 0; font-size: 0.9444rem; color: var(--ink-2); overflow-wrap: anywhere; }
.official-source { margin-top: 0.375rem; font-size: 0.9444rem; overflow-wrap: anywhere; }
.official-body { font-weight: 700; }
.official-action { margin: 0; }
.studies-head { border-top: 1px solid var(--line); padding-top: 0.75rem; margin-top: 0.25rem; }
.team-rating { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.5rem; margin: 0 0 0.5rem; color: var(--ink-2); }
@media print {
  .official-box { background: #fff; border: 1pt solid #000; padding: 4pt 6pt; margin: 4pt 0; }
  .official-quote { background: #fff; }
}

/* Extra official statements fold away behind one big button (all of them print). */
.official-more-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; width: 100%; min-height: 3rem;
  margin: 0 0 0.875rem; padding: 0.5rem 0.875rem; background: var(--surface); color: var(--ink);
  border: 1.5px solid var(--official); border-radius: var(--radius-sm); font: inherit; font-weight: 700; text-align: left; cursor: pointer;
}
.official-more-toggle:hover { background: var(--sunken); }
.official-more-toggle > span { min-width: 0; overflow-wrap: anywhere; }
.official-more-toggle .toggle-chev { flex: none; width: 1.25rem; height: 1.25rem; transform: rotate(90deg); }
.official-more-toggle[aria-expanded="true"] .toggle-chev { transform: rotate(-90deg); }
@media print {
  .official-more-toggle { display: none !important; }
  .official-more[hidden] { display: block !important; }
}

/* General Hospital Authority advice (leaflets for groups of medicines): quoted, never a rating. */
.advice-box { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--ink); border-radius: var(--radius-sm); padding: 0.75rem 0.875rem; margin: 0.875rem 0 0; }
.advice-title { margin: 0 0 0.5rem; font-size: 1rem; font-weight: 700; overflow-wrap: anywhere; }
.advice-quote { margin: 0; overflow-wrap: anywhere; }
.advice-list .advice-box + .advice-box { margin-top: 0.625rem; }
@media print { .advice-box { border: 1pt solid #000; border-left-width: 2pt; padding: 3pt 6pt; margin-top: 4pt; } }

/* Read aloud: big tap target, quiet style */
.read-row { margin: 0.25rem 0 0.75rem; }
.read-aloud { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0.375rem 0.875rem;
  background: var(--surface); color: var(--ink); border: 1.5px solid var(--ink); border-radius: 999px; font: inherit; font-weight: 700; cursor: pointer; }
.read-aloud .icon { width: 1.375rem; height: 1.375rem; }
.read-aloud[aria-pressed="true"] { background: var(--sunken); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.read-msg { margin: 0.5rem 0 0; color: var(--ink-2); }
@media print { .read-row { display: none !important; } }

/* =====================================================================================
   REDESIGN (Oct 2026): friendly consumer-health look, two display modes.
   Placed last on purpose: it restyles the components above without changing their markup.
   ===================================================================================== */

body { font-family: var(--font); line-height: 1.55; }
:lang(zh-HK) { font-family: var(--font-zh); }
html[data-mode="simple"] { font-size: 125%; }           /* Simple: 20px base, very large text */
html[data-mode="simple"] { --ink-2: #33373E; }          /* higher contrast for secondary text */

/* ---------- header ---------- */
.site-header { background: var(--bg); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; }
.header-inner { gap: 0.25rem 0.75rem; padding-top: 0.375rem; padding-bottom: 0.375rem; }
.brand { font-size: 1.125rem; }
.brand-mark { width: 2rem; height: 2rem; border-radius: 10px; background: var(--ink); }
.brand-zh { color: var(--ink); font-weight: 700; }
.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
/* The slogan shows on every page, so the header (and the menu) is the same size everywhere. */
.brand-slogan { display: block; font-size: min(0.8125rem, 4.75vw); /* fits 320px in Simple */ font-weight: 500; color: var(--ink-2); letter-spacing: 0; }
/* Each half is a block, so the slogan breaks after its comma. Only when one half is wider than the
   screen on its own (very large text) does it wrap inside, instead of running off the page. */
.slogan-part { display: inline-block; max-width: 100%; }
.header-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.mode-toggle { display: inline-flex; background: #E9E7E1; border-radius: 999px; padding: 3px; }
.mode-toggle button {
  font: inherit; font-size: 0.9375rem; font-weight: 600; border: 0; background: transparent; color: var(--ink-2);
  min-height: 2.75rem; padding: 0 0.875rem; border-radius: 999px; cursor: pointer; white-space: nowrap;
}
.mode-toggle button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .14); }
.lang-toggle { border: 0; background: var(--surface); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); min-height: 2.75rem; font-size: 0.9375rem; }
.site-nav { gap: 0.25rem; }
.site-nav a { border-bottom: 0; border-radius: 999px; min-height: 2.75rem; padding: 0.2em 0.875rem; font-weight: 600; }
.site-nav a[aria-current="page"] { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }
@media (max-width: 47.99rem) {
  .header-tools { order: 2; width: 100%; }
  .site-nav { order: 3; margin: 0; }
}

/* ---------- page headings: one big headline per screen ---------- */
main#main { padding-bottom: 2rem; }
.page-head { padding-top: 0.75rem; }
.kicker { font-size: 0.9375rem; font-weight: 700; color: var(--ink); margin: 0.75rem 0 0.25rem; }
#app h1 { font-size: clamp(1.75rem, 1.4rem + 2.2vw, 2.5rem); line-height: 1.15; letter-spacing: -0.02em; margin-bottom: 0.75rem; }
:lang(zh-HK) #app h1, #app h1:lang(zh-HK) { letter-spacing: 0; }
/* Headings never break inside a word: the size is capped so the longest word (13 letters) fits. */
@media (max-width: 30rem) { #app h1 { font-size: min(2.25rem, calc((100vw - 2rem) / 8.2)); } }
html[data-mode="simple"] #app h1 { font-size: clamp(1.875rem, 1.6rem + 2vw, 2.5rem); }
@media (max-width: 30rem) { html[data-mode="simple"] #app h1 { font-size: min(2.4rem, calc((100vw - 2rem) / 7.6)); } }
.subtitle { font-size: 1.0625rem; font-weight: 600; }
.lede { color: var(--ink-2); }

/* Steps (Full details) */
.steps { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; margin: 0.25rem 0 0.75rem; font-size: 0.875rem; font-weight: 600; color: var(--ink-2); }
.steps li { display: inline-flex; align-items: center; gap: 0.375rem; background: var(--surface); padding: 0.3125rem 0.75rem 0.3125rem 0.3125rem; border-radius: 999px; }
.step-n { width: 1.5rem; height: 1.5rem; border-radius: 50%; display: grid; place-items: center; background: #ECEAE4; font-size: 0.8125rem; }
.steps .done .step-n { background: var(--sunken); color: var(--ink); }
.steps .now { background: var(--sunken); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
.steps .now .step-n { background: var(--surface); color: var(--ink); }
html[data-mode="full"] .hero { background: linear-gradient(160deg, var(--sunken) 0%, var(--bg) 72%); border-radius: 0 0 32px 32px; margin: 0 calc(-1 * var(--gutter)) 1.25rem; padding: 0 var(--gutter) 0.5rem; }
.result-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; margin: 0 0 1rem; }
.result-chips li { background: var(--surface); border-radius: 999px; padding: 0.375rem 0.875rem; font-weight: 600; font-size: 0.9375rem; box-shadow: var(--shadow); }

/* ---------- buttons ---------- */
.btn { border-radius: 999px; min-height: 3.25rem; font-weight: 700; border-width: 0; }
.btn-primary { background: var(--accent); color: #fff; box-shadow: 0 6px 18px rgba(30, 36, 48, .16); }
.btn-primary:hover { background: var(--accent-hover); color: #fff; }
.btn-secondary { background: var(--surface); color: var(--ink); border: 2px solid var(--ink); }
.btn-secondary:hover { background: var(--sunken); color: var(--ink); border-color: var(--ink); }
.btn-quiet { color: var(--ink); }
.btn-add { border-radius: 999px; border: 2px dashed var(--line-strong); background: var(--sunken); color: var(--ink); }
.actions-stack { display: grid; gap: 0.75rem; margin-top: 1.75rem; }
.actions-stack .btn { width: 100%; justify-content: center; }
html[data-mode="simple"] .btn { min-height: 3.75rem; font-size: 1.1rem; }

/* ---------- badges: soft pill, coloured round icon, always a text label ---------- */
.badge { border: 0; border-radius: 999px; gap: 0.5rem; padding: 0.3125rem 0.875rem 0.3125rem 0.3125rem; font-weight: 700; line-height: 1.25; }
.badge .icon { width: 1.625em; height: 1.625em; padding: 0.3em; border-radius: 50%; }
.badge-high { background: var(--high-soft); color: var(--high-text); }           .badge-high .icon { background: var(--high); color: #fff; }
.badge-moderate { background: var(--moderate-soft); color: var(--moderate-text); } .badge-moderate .icon { background: var(--moderate); color: var(--moderate-ink); }
.badge-low { background: var(--low-soft); color: var(--low-text); }              .badge-low .icon { background: var(--low); color: var(--low-ink); }
.badge-none_reported { background: var(--none-soft); color: var(--none-text); }   .badge-none_reported .icon { background: var(--none); color: #fff; }
.badge-official { background: var(--official-soft); color: var(--official-text); } .badge-official .icon { background: var(--official); color: #fff; }
.badge-not_in_database { background: var(--unknown); color: var(--unknown-ink); box-shadow: inset 0 0 0 1.5px var(--unknown-line); }
.badge-not_in_database .icon { background: transparent; color: var(--unknown-ink); box-shadow: inset 0 0 0 1.5px var(--unknown-line); }

/* ---------- results: compact pair cards ---------- */
.pair-cards { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.pair-card {
  position: relative; display: block; overflow: hidden; color: var(--ink); text-decoration: none;
  background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.25rem var(--pad) 1.125rem calc(var(--pad) + 6px);
}
a.pair-card:hover { color: var(--ink); }
.pair-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; }
.tone-high::before { background: var(--high); } .tone-moderate::before { background: var(--moderate); }
.tone-low::before { background: var(--low); } .tone-official::before { background: var(--official); }
.tone-none_reported::before { background: var(--none); }
/* Grey never looks "clear": muted card, dashed edge, question icon, the required wording in bold. */
.pair-card.tone-not_in_database { background: #FAFAF8; box-shadow: inset 0 0 0 1.5px #C9C9C4; }
.tone-not_in_database::before { background: repeating-linear-gradient(180deg, var(--unknown-line) 0 6px, transparent 6px 11px); }
.pair-card-top { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; }
.tag-official { font-size: 0.8125rem; font-weight: 600; color: var(--official-text); background: var(--official-soft); border-radius: 999px; padding: 0.25rem 0.625rem; }
.pair-card-names { display: flex; flex-wrap: wrap; align-items: center; gap: 0.125rem 0.5rem; font-size: 1.25rem; font-weight: 700; line-height: 1.3; margin-bottom: 0.5rem; }
.pair-card-names .name-secondary { font-weight: 400; color: var(--ink-2); }
.name-with-icon { display: inline-flex; align-items: center; gap: 0.375rem; }
.kind-icon { width: 1.375rem; height: 1.375rem; color: var(--ink-2); }
.pair-plus { color: var(--ink-2); font-weight: 400; }
/* "anywhere": Health Canada's "practitioner/health care provider/…" has no space to break at. */
.pair-line { margin: 0; color: var(--ink-2); overflow-wrap: anywhere; }
.pair-line strong { color: var(--ink); }
.pair-line-quote { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pair-line-unknown { color: var(--ink); font-weight: 700; }
.pair-card-go { display: inline-flex; align-items: center; gap: 0.25rem; margin-top: 0.875rem; font-weight: 700; color: var(--ink); }
.pair-card-go .icon { width: 1.125rem; height: 1.125rem; }
.unknown-links { list-style: none; margin: 0.75rem 0 0; padding: 0; border-top: 1.5px dashed #C9C9C4; }
.unknown-links a { display: flex; align-items: center; gap: 0.5rem; min-height: 3rem; padding: 0.5rem 0; color: var(--ink); text-decoration: none; font-weight: 700; border-bottom: 1.5px dashed #C9C9C4; }
.unknown-links .unknown-mark { width: 1.25rem; height: 1.25rem; color: var(--unknown-ink); }
.unknown-links .unknown-pair { flex: 1; min-width: 0; }
.unknown-links .row-go { width: 1.125rem; height: 1.125rem; color: var(--ink); }
html[data-mode="simple"] .pair-card { box-shadow: inset 0 0 0 2px #D3D1CA; }
html[data-mode="simple"] .pair-card.tone-not_in_database { box-shadow: inset 0 0 0 2px #9A9A95; }
html[data-mode="simple"] .pair-card-names { font-size: 1.375rem; }
html[data-mode="simple"] .pair-line { color: var(--ink); }

/* ---------- boxes ---------- */
.disclaimer-box { background: var(--surface); border: 0; border-left: 0; border-radius: var(--radius-sm); box-shadow: inset 0 0 0 1.5px var(--line); padding: 0.875rem 1rem; color: var(--ink-2); }
html[data-mode="simple"] .disclaimer-box { color: var(--ink); box-shadow: inset 0 0 0 2px #D3D1CA; }
.status, .cab-card, .card, .clash-alert, .demo-banner { border: 0; border-radius: var(--radius); box-shadow: var(--shadow); }
html[data-mode="simple"] .status, html[data-mode="simple"] .cab-card, html[data-mode="simple"] .card { box-shadow: inset 0 0 0 2px #D3D1CA; }
.card.card-unknown { background: #FAFAF8; box-shadow: inset 0 0 0 1.5px #C9C9C4; }
.chip { border-radius: 999px; }
.official-box { border-radius: var(--radius-sm); border: 0; }
.advice-box { border-radius: var(--radius-sm); border: 0; border-left: 4px solid var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.heart-impact { border-radius: var(--radius-sm); }
.check-bar { background: rgba(255, 255, 255, .96); box-shadow: 0 -6px 24px rgba(22, 24, 40, .10); border-top: 0; }
.sheet-panel { border-radius: var(--radius) var(--radius) 0 0; }
.options { border-top: 0; }
.options li { border-bottom: 0; }
.option { border-radius: var(--radius-sm); }

/* ---------- pair detail screen ---------- */
.back-link { display: inline-flex; align-items: center; gap: 0.25rem; min-height: 2.75rem; font-weight: 700; text-decoration: none; margin-top: 0.5rem; }
.back-link .icon { width: 1.25rem; height: 1.25rem; }
#app h1.pair-h1 { font-size: clamp(1.625rem, 1.3rem + 2vw, 2.25rem); }
.pair-h1 .name-secondary { font-weight: 400; color: var(--ink-2); }
.pair-simple { position: relative; overflow: hidden; background: var(--surface); border-radius: var(--radius); box-shadow: inset 0 0 0 2px #D3D1CA; padding: 1.25rem var(--pad) 0.5rem calc(var(--pad) + 6px); margin-bottom: 1rem; }
.pair-simple::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; }
.pair-simple.tone-not_in_database { background: #FAFAF8; box-shadow: inset 0 0 0 2px #9A9A95; }
.pair-simple-badge { margin-bottom: 0.75rem; }
.todo { background: var(--sunken); border-radius: var(--radius-sm); padding: 1rem 1.125rem; margin: 0.75rem 0 1rem; }
.todo h2 { font-size: 1.125rem; margin-bottom: 0.25rem; }
.todo p { margin: 0; font-size: 1.125rem; }
.pair-simple .btn { width: 100%; justify-content: center; margin-bottom: 1rem; }
.more-btn { width: 100%; justify-content: space-between; padding: 0 1.25rem; margin-bottom: 1rem; }
.more-btn .toggle-chev { transform: rotate(90deg); }
.more-btn[aria-expanded="true"] .toggle-chev { transform: rotate(-90deg); }

/* ---------- names never split mid-name (華法 / 林) ---------- */
/* A long name (單硝酸異山梨酯) may still break at 200% text rather than run off the screen. */
.name-primary:lang(zh-HK), .name-secondary:lang(zh-HK), .unknown-pair:lang(zh-HK) { word-break: keep-all; overflow-wrap: anywhere; }
.pair-card-names .name, .pair-h1 .name { display: inline-flex; flex-wrap: wrap; gap: 0 0.35em; min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.pair-card-names .name > span, .pair-h1 .name > span { min-width: 0; max-width: 100%; }

/* ---------- motion: cabinet chips and home/About cards only ---------- */
/* Visible without JavaScript. Pending is applied only by the home/About observer. */
@media screen and (prefers-reduced-motion: no-preference) {
  html[data-mode="full"] .reveal-card { transition: opacity .22s ease, transform .22s ease; }
  html[data-mode="full"] .reveal-card.is-reveal-pending { opacity: 0; transform: translateY(8px); }
  html[data-mode="full"] .chip-motion { transition: opacity .14s ease, transform .14s ease; }
  html[data-mode="full"] .chip-enter-from { opacity: 0; transform: translateY(6px); }
  html[data-mode="full"] .chip-leave { opacity: 0; transform: translateY(-6px); }
}
.chip-motion { list-style: none; }
.chip-leave { position: fixed; z-index: 51; margin: 0; pointer-events: none; }
html[data-mode="simple"] *, html[data-mode="simple"] *::before, html[data-mode="simple"] *::after { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* ---------- print: plain black and white ---------- */
@media print {
  html, html[data-mode="simple"] { font-size: 10pt; }
  .header-tools, .back-link, .more-btn, .steps { display: none !important; }
  #app h1, html[data-mode="simple"] #app h1 { font-size: 15pt !important; letter-spacing: -0.01em; margin-bottom: 2pt; }
  .disclaimer-box { padding: 4pt 7pt !important; }
  .summary { line-height: 1.24; }
  .summary .sources { font-size: 7.5pt; }
  .summary-row::before { background: #000 !important; }
  .badge { padding: 1pt 6pt 1pt 3pt !important; gap: 3pt; }
  .badge .icon { width: 1.15em !important; height: 1.15em !important; padding: 0 !important; }
  .badge, .badge-high, .badge-moderate, .badge-low, .badge-official, .badge-not_in_database, .badge-none_reported { background: #fff !important; color: #000 !important; box-shadow: none !important; border: 1pt solid #000 !important; }
  .badge .icon { background: none !important; color: #000 !important; box-shadow: none !important; }
  .summary-row, .summary-unknown, .disclaimer-box, .advice-box, .official-box { box-shadow: none !important; }
}

/* Simple mode cabinet: one main action ("Check my list"). The pair rows and the intro paragraph
   live on the Results screen instead, so they are not repeated here. */
html[data-mode="simple"] .status-list,
html[data-mode="simple"] .status-more,
html[data-mode="simple"][data-route="check"] .page-head .lede { display: none; }

/* Very large text (200%) and narrow screens: controls wrap instead of running off the screen. */
.header-tools { max-width: 100%; }
.mode-toggle { flex-wrap: wrap; max-width: 100%; border-radius: 1.5rem; }
.mode-toggle button { white-space: normal; flex: 1 1 auto; line-height: 1.2; padding-top: 0.25rem; padding-bottom: 0.25rem; }
.lang-toggle { white-space: normal; max-width: 100%; }
.check-bar-inner { flex-wrap: wrap; }
.btn-check { white-space: normal; max-width: 100%; text-align: center; }
/* Very narrow (a phone at 200% zoom): names shrink with the screen so a long one ("Amlodipine")
   still fits whole; a name never breaks in the middle. */
@media (max-width: 22rem) {
  .pair-card-names, html[data-mode="simple"] .pair-card-names { font-size: min(1.375rem, calc((100vw - 3.5rem) / 6.6)); }
  #app h1.pair-h1 { font-size: min(1.625rem, calc((100vw - 2rem) / 7)); }
}
.pair-card, .pair-simple { min-width: 0; }
.summary-unknown h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.25em; }
/* Chinese headings break only at spaces and punctuation, never inside a word (虛構人 / 物). */
:lang(zh-HK) #app h1, :lang(zh-HK) #app h2, :lang(zh-HK) .sheet-head h2 { word-break: keep-all; overflow-wrap: anywhere; }
.keep-end { white-space: nowrap; }

/* Simple cabinet (owner, 20 Oct): once both lists have items, only the clash pop-up card and the
   sticky "Check my list" button remain. */
html[data-mode="simple"] .status.status-ready,
html[data-mode="simple"] .check-bar .bar-notice { display: none !important; }
/* Demo entry near the top of the cabinet */
.demo-top { margin: 0 0 0.875rem; }
/* Official-only cards: the main "What to do" sits above the official quotes */
.card > .todo { margin: 0.5rem 0 0.75rem; }
.card > .todo .block-label { margin-bottom: 0.25rem; }
/* Phones: mode toggle and language button share one row (owner, 20 Oct). Tap targets stay 44px+;
   at very large text they may still wrap rather than run off the screen. */
@media (max-width: 47.99rem) {
  .header-tools { flex-wrap: wrap; gap: 0.375rem; }
  .mode-toggle button { padding: 0 0.625rem; font-size: 0.875rem; }
  .lang-toggle { padding: 0 0.75rem; font-size: 0.875rem; }
  html[data-mode="simple"] .mode-toggle button, html[data-mode="simple"] .lang-toggle { font-size: 0.75rem; min-height: 44px; }
}

/* Read aloud is hidden when the only voices for this language are online ones (text would leave the phone). */
html.no-voice .read-row { display: none !important; }

/* ---------- Mode strip: one slim line saying which mode is on, with a small switch ---------- */
.mode-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.375rem; min-height: 44px; padding: 0 0.125rem 0 0.625rem; margin: 0 0 0.75rem; border-radius: var(--radius-sm); font-size: max(10px, min(0.8125rem, 3.3vw)); line-height: 1.3; }
.mode-strip-simple { background: var(--sunken); color: var(--ink); }
.mode-strip-full { background: var(--sunken); color: var(--ink); }
.mode-strip .mode-strip-icon { flex: none; width: 1.125em; height: 1.125em; }
.mode-strip-text { flex: 0 1 auto; min-width: 0; margin: 0; font-weight: 600; }
.mode-strip-btn { flex: none; min-height: 44px; margin-left: auto; padding: 0 0.375rem; border: 0; background: none; color: var(--ink); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; }
.mode-strip-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; border-radius: 6px; }
/* Very narrow screens (200% zoom): the mode name only, so the strip stays at most two lines. */
@media (max-width: 16.25rem) { .mode-strip .mode-strip-icon, .mode-strip-detail { display: none; } .mode-strip { padding-left: 0.5rem; } }
.step-line { margin: 0 0 0.25rem; font-weight: 700; color: var(--ink); }
/* Simple: big cards, one line each, a big "See details" button. */
html[data-mode="simple"] .pair-card { padding-top: 1.25rem; padding-bottom: 1.25rem; }
html[data-mode="simple"] .pair-card .badge { font-size: min(1.125rem, 5.4vw); padding: 0.375rem 0.875rem; }
html[data-mode="simple"] .pair-card-go { display: flex; justify-content: center; width: 100%; min-height: 3rem; margin-top: 1rem; border-radius: 999px; background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-strong); }
/* Full: dense overview cards with the facts on them. */
html[data-mode="full"] .pair-card { padding-top: 0.875rem; padding-bottom: 0.875rem; }
html[data-mode="full"] .pair-cards { gap: 0.625rem; }
.pair-facts { display: block; margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--line); font-size: 0.9375rem; }
.pair-fact { margin: 0 0 0.25rem; color: var(--ink-2); }
.pair-fact strong { color: var(--ink); margin-right: 0.25em; }
.pair-fact-count { display: inline-block; margin-left: 0.5em; padding: 0 0.5em; border-radius: 999px; background: var(--official-soft); color: var(--official-text); font-weight: 600; font-size: 0.875rem; }
@media print { .mode-strip, .step-line { display: none !important; } }

/* ---------- Home button, "Next: show your doctor", summary sentence ---------- */
.page-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1rem; margin-bottom: 0.25rem; }
.home-link { display: inline-flex; align-items: center; gap: 0.375rem; min-height: 44px; padding: 0 0.875rem; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line); color: var(--ink); font-weight: 700; text-decoration: none; }
.home-link .icon { width: 1.25rem; height: 1.25rem; }
.home-link:hover { color: var(--ink); }
.page-nav .back-link { margin: 0; }
.next-step { margin: 1.5rem 0 1rem; padding: 1.125rem var(--pad) 1.25rem; border-radius: var(--radius); background: var(--sunken); box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.next-step:focus { outline: none; }
.next-step:focus-visible, .next-step.is-now { box-shadow: inset 0 0 0 2px var(--focus), 0 0 0 4px var(--focus-glow); }
.next-step h2 { margin: 0 0 0.375rem; font-size: 1.25rem; }
.next-say { margin: 0 0 1rem; font-size: 1.125rem; line-height: 1.5; }
.btn-next { width: 100%; justify-content: center; min-height: 3.25rem; font-size: 1.125rem; }
.summary-say { margin: 0.25rem 0 1rem; padding: 0.75rem 1rem; border-radius: var(--radius-sm); background: var(--sunken); font-weight: 600; line-height: 1.45; }
@media print {
  .page-nav, .next-step { display: none !important; }
  .summary-say { background: none !important; border: 0.75pt solid #000; padding: 1.5pt 5pt !important; margin: 1pt 0 2pt !important; font-size: 8.5pt; line-height: 1.2; }
}

/* A note about the herb itself (e.g. hawthorn: which part of the plant the evidence is about). */
.herb-note { display: flex; gap: 0.5rem; align-items: flex-start; margin: 0 0 1rem; padding: 0.75rem 0.875rem; border-radius: var(--radius-sm); background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line); color: var(--ink); }
.herb-note .herb-note-icon { flex: none; width: 1.25rem; height: 1.25rem; margin-top: 0.1em; color: var(--ink-2); }

/* ---------- "What people take it for" (Task 2): plain and neutral, never a rating colour ---------- */
.uses-box { margin: 0 0 1rem; padding: 0.875rem 1rem; border-radius: var(--radius-sm); background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line); color: var(--ink); }
.uses-box .uses-title { font-size: 1.0556rem; font-weight: 700; margin: 0 0 0.375rem; }
.uses-box p { margin: 0 0 0.5rem; }
.uses-box .uses-more { color: var(--ink-2); }
.uses-box .uses-sources { font-size: 0.9444rem; overflow-wrap: anywhere; }
.uses-box .uses-not-advice { margin: 0; font-weight: 600; }

/* ---------- Ink picker and sticky-header offsets ---------- */
html { scroll-padding-top: calc(var(--header-h, 12rem) + 1rem); }
#app h1, #app h2, #app h3, .card, .pair, .clash-alert, .next-step { scroll-margin-top: 0.5rem; }
.cab-count, .sheet-count, .group-count, .tally, .check-status, .pair-fact-count { font-variant-numeric: tabular-nums; }
.chips > li { min-width: 0; max-width: 100%; }
.option { min-height: 64px; padding: 0.75rem; margin: 0.25rem 0; box-shadow: inset 0 0 0 1px var(--line); }
.option.is-on { background: var(--accent); color: #fff; box-shadow: none; }
.option.is-on:hover { background: var(--accent-hover); }
.option.is-on .name-secondary, .option.is-on .option-sub { color: #E4E7ED; }
.option-state { background: var(--surface); border-color: var(--line-strong); color: var(--ink); }
.option.is-on .option-state { background: transparent; border-color: #B7BFCC; color: #fff; }
.option:focus-visible { outline-offset: 3px; box-shadow: 0 0 0 6px var(--focus-glow); }
@media (max-width: 47.99rem) {
  .header-inner { row-gap: 0.125rem; }
  .site-nav { gap: 0; }
  .site-nav a { min-height: 44px; padding-left: 0.625rem; padding-right: 0.625rem; margin-right: 0; font-size: max(16px, .8rem); }
  .brand { min-height: 44px; }
}
/* A zoomed or very short viewport must still leave room to read the page. */
@media (max-height: 34em) { .site-header { position: static; } }

/* Results and warnings never move or fade, including their disclosure chevrons. */
html:is([data-route="results"], [data-route="pair"], [data-route="summary"]) #app,
html:is([data-route="results"], [data-route="pair"], [data-route="summary"]) #app *,
.clash-alert, .clash-alert *, .badge, .badge * { animation: none !important; transition: none !important; }
button:focus-visible, a:focus-visible, input:focus-visible { box-shadow: 0 0 0 6px var(--focus-glow); }
@media (prefers-reduced-motion: reduce) {
  .reveal-card.is-reveal-pending, .chip-enter-from { opacity: 1 !important; transform: none !important; }
}