/* ==========================================================================
   PHC Clinical Reference — Somanur
   Plain, professional. Mobile-portrait first.

   Single-page app: every section lives in one document and is revealed by
   hash route. Styling is shared with the previous multi-page build.
   ========================================================================== */

/* --- Reset ---------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Reserves the scrollbar gutter so the layout does not jump horizontally
     when the menu locks body scrolling. */
  scrollbar-gutter: stable;
}

body, h1, h2, h3, h4, p, ul, ol, dl, dd, figure, table {
  margin: 0;
  padding: 0;
}

ul, ol { padding-left: 1.25em; }
img { max-width: 100%; height: auto; }

/* --- Design tokens -------------------------------------------------------- */

:root {
  --ink:        #1c1f23;
  --ink-soft:   #4a5158;
  --ink-faint:  #6b737b;
  --rule:       #d8dce0;
  --rule-soft:  #e8ebee;
  --page:       #ffffff;
  --panel:      #f6f7f8;
  --panel-2:    #eef1f4;
  --accent:     #14507a;
  --accent-dim: #0f3c5c;
  --accent-wash:#eaf1f7;
  --warn-bg:    #fdf6e6;
  --warn-rule:  #c99a2e;
  --note-bg:    #eef3f8;
  --note-rule:  #14507a;

  --measure: 68ch;
  --pad: 1rem;
  --radius: 6px;

  /* Height of the top bar. The scroll-margin of a section head and the
     sticky offset of the bar both derive from this, so they stay in sync. */
  --bar-h: 3.5rem;

  --shadow-1: 0 1px 2px rgba(16, 24, 32, .06);
  --shadow-2: 0 2px 8px rgba(16, 24, 32, .08);

  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
          Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink:        #e6e8ea;
    --ink-soft:   #b6bcc2;
    --ink-faint:  #8d959c;
    --rule:       #363b41;
    --rule-soft:  #2b3036;
    --page:       #16191c;
    --panel:      #1e2226;
    --panel-2:    #242a30;
    --accent:     #7fb3dc;
    --accent-dim: #a8cbe8;
    --accent-wash:#1b2730;
    --warn-bg:    #2c2618;
    --warn-rule:  #a5811f;
    --note-bg:    #1b2730;
    --note-rule:  #7fb3dc;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-2: 0 2px 8px rgba(0, 0, 0, .5);
  }
}

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

body {
  background: var(--page);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

p, li, dd, td, th { overflow-wrap: break-word; }

.wrap {
  width: 100%;
  max-width: 62rem;
  margin-inline: auto;
  padding-inline: var(--pad);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: #fff;
  padding: .6rem 1rem;
  z-index: 100;
  border-radius: 0 0 var(--radius) 0;
}
.skip:focus { left: 0; }

/* ==========================================================================
   Top bar
   ========================================================================== */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--page);
  border-bottom: 1px solid var(--rule);
}

.topbar-inner {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: var(--bar-h);
}

.brand {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-right: auto;
  text-decoration: none;
  color: inherit;
  padding-block: .4rem;
  /* The brand is a link to the home route; keep it from stretching so the
     menu button stays hard against the right edge. */
  flex: 0 1 auto;
  min-width: 0;
}

.brand-kicker {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--accent);
  line-height: 1.3;
}

.brand-title {
  font-size: .9375rem;
  font-weight: 650;
  line-height: 1.3;
}

/* Hamburger button.
   `flex: none` is load-bearing: as a flex item this button previously
   stretched to fill the remaining row width, so opening the menu resized the
   button from 91px to 192px and shifted it sideways. It now always hugs its
   own content. */
.nav-toggle {
  flex: none;
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .55rem .7rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--ink);
  font-size: .8125rem;
  font-weight: 650;
  font-family: inherit;
  min-height: 2.75rem;
  min-width: 2.75rem;
  user-select: none;
}

.nav-toggle:hover { border-color: var(--accent); color: var(--accent); }

/* Three-bar icon drawn with gradients — no image, no font. */
.nav-bars {
  width: 1.125rem;
  height: .875rem;
  flex: none;
  background-image:
    linear-gradient(var(--ink), var(--ink)),
    linear-gradient(var(--ink), var(--ink)),
    linear-gradient(var(--ink), var(--ink));
  background-size: 100% 2px, 100% 2px, 100% 2px;
  background-position: 0 0, 0 50%, 0 100%;
  background-repeat: no-repeat;
}

.nav-toggle:hover .nav-bars,
.nav-toggle[aria-expanded="true"] .nav-bars {
  background-image:
    linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent));
}

/* The "Menu" word is dropped on very narrow bars so the button never pushes
   the brand into an awkward two-line wrap. */
@media (max-width: 22rem) {
  .nav-toggle .nav-toggle-label { display: none; }
}

/* ==========================================================================
   Navigation overlay

   The menu is a fixed full-height panel under the bar, and the link list
   scrolls inside it. Previously the panel was in normal flow with
   `overflow: visible`, so opening it grew the sticky bar to ~748px and the
   lower groups could not be scrolled to on a short screen.
   ========================================================================== */

.nav-overlay {
  position: fixed;
  inset: var(--bar-h) 0 0 0;
  z-index: 45;
  background: var(--page);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  display: none;
}

.nav-overlay[data-open="true"] { display: block; }

/* Locks the document behind the menu so the panel is the only scroller. */
body.nav-open { overflow: hidden; }

.nav-panel {
  padding-block: 1rem 2.5rem;
}

.nav-list { list-style: none; padding: 0; display: grid; gap: .3rem; }

.nav-list a {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .7rem .8rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--ink);
  text-decoration: none;
  font-size: .9375rem;
  font-weight: 500;
  min-height: 2.75rem;
}

.nav-list a:hover,
.nav-list a:focus-visible {
  border-color: var(--accent);
  background: var(--accent-wash);
  color: var(--accent);
}

/* Current route marker */
.nav-list a[aria-current="page"] {
  border-color: var(--accent);
  background: var(--accent-wash);
  color: var(--accent);
  font-weight: 650;
}

.nav-num {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--rule-soft);
  color: var(--ink-soft);
  font-size: .75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.nav-list a[aria-current="page"] .nav-num,
.nav-list a:hover .nav-num {
  background: var(--accent);
  color: #fff;
}

@media (prefers-color-scheme: dark) {
  .nav-list a[aria-current="page"] .nav-num,
  .nav-list a:hover .nav-num { color: #16191c; }
}

.nav-backdrop { display: none; }

/* ==========================================================================
   Page header
   ========================================================================== */

.page-head {
  background: var(--panel);
  border-bottom: 1px solid var(--rule);
  padding-block: 1.5rem;
}

.page-head .eyebrow {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .35rem;
}

.page-head h1 {
  font-size: 1.5rem;
  line-height: 1.22;
  letter-spacing: -.01em;
  /* The section number is a badge inline in the heading, so the heading needs
     its own inline gap. Without this the number collides with the title and
     the page reads "1Antenatal Care Guidelines". */
  display: flex;
  align-items: baseline;
  gap: .55rem;
}

.page-head .lede {
  margin-top: .6rem;
  color: var(--ink-soft);
  font-size: .9375rem;
  max-width: var(--measure);
}

.crumbs { margin-bottom: .8rem; font-size: .8125rem; }
.crumbs a { color: var(--accent); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs span { color: var(--ink-faint); }

/* ==========================================================================
   Views — one per route. Only the active view is displayed.
   ========================================================================== */

.view { display: none; }
.view.is-active { display: block; }

/* Entrance animation is deliberately tiny so switching feels instant rather
   than animated. Removed entirely under prefers-reduced-motion. */
@keyframes view-in {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 1; transform: none; }
}

.view.is-active { animation: view-in .16s ease-out; }

main { padding-block: 1.5rem 2.5rem; }

section { margin-bottom: 2rem; }
section + section {
  border-top: 1px solid var(--rule-soft);
  padding-top: 2rem;
}

h2 {
  font-size: 1.2rem;
  line-height: 1.28;
  margin-bottom: .6rem;
  display: flex;
  gap: .55rem;
  align-items: baseline;
}

h2 .num {
  flex: none;
  font-size: .75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #fff;
  background: var(--accent);
  border-radius: 3px;
  padding: .18rem .45rem;
  position: relative;
  top: -.1rem;
}

@media (prefers-color-scheme: dark) {
  h2 .num { color: #16191c; }
}

h3 {
  font-size: 1rem;
  margin-top: 1.4rem;
  margin-bottom: .5rem;
  padding-bottom: .3rem;
  border-bottom: 1px solid var(--rule-soft);
}

h3:first-of-type { margin-top: .9rem; }
h4 { font-size: .9375rem; margin-bottom: .45rem; }

.sub { color: var(--ink-faint); font-size: .875rem; margin-bottom: .6rem; }

.home-note { margin-bottom: 1.25rem; max-width: var(--measure); }

section > ul, section > ol { max-width: var(--measure); }
li { margin-bottom: .4rem; }
li > ul, li > ol { margin-top: .4rem; }
li > ul > li, li > ol > li { margin-bottom: .3rem; }
ul ul, ol ol, ul ol, ol ul { padding-left: 1.1em; }
strong { font-weight: 650; }

/* ==========================================================================
   Cards
   ========================================================================== */

.card {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--panel);
  padding: .9rem 1rem;
  margin-bottom: 1rem;
  box-shadow: var(--shadow-1);
}

.card h3 {
  margin-top: 0;
  border-bottom: 1px solid var(--rule);
  padding-bottom: .45rem;
}

.card ul { max-width: none; padding-left: 1.2em; }
.card ul li:last-child { margin-bottom: 0; }

/* Card variants for emphasis */
.card-accent { border-left: 3px solid var(--accent); }
.card-warn   { border-left: 3px solid var(--warn-rule); background: var(--warn-bg); }

.present {
  font-size: .9375rem;
  color: var(--ink-soft);
  margin-bottom: .2rem;
}

.dx {
  font-size: .9375rem;
  font-weight: 650;
  color: var(--accent-dim);
  margin-bottom: .55rem;
}

.callout {
  border-left: 3px solid var(--accent);
  background: var(--note-bg);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: .8rem .9rem;
  margin: .8rem 0;
}

.callout h4 { margin-bottom: .4rem; }
.callout ol, .callout ul { padding-left: 1.25em; max-width: none; }
.callout li:last-child { margin-bottom: 0; }

/* ==========================================================================
   Home view: grouped card grid
   ========================================================================== */

.hero-note {
  border-radius: var(--radius);
  padding: .85rem 1rem;
  margin-bottom: 1.5rem;
  font-size: .9375rem;
  background: var(--warn-bg);
  border: 1px solid var(--warn-rule);
}
.hero-note p { margin: 0; }

/* --- HMIS login buttons ---------------------------------------------------
   The role buttons sit between the hero note and the tile grid. They are the
   first thing on the page a reader reaches for at the start of a shift, so
   they are deliberately large and always fully visible. The grid wraps rather
   than scrolls: a horizontal scroll would hide the later buttons, and there
   are only five of them. */

.hmis-login {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--panel);
  padding: .9rem 1rem;
  margin-bottom: 1.5rem;
}

.hmis-login-title {
  font-size: 1rem;
  margin-bottom: .35rem;
}

.hmis-login > .sub { margin-bottom: .8rem; max-width: var(--measure); }

.hmis-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: .5rem;
}

/* Two columns once the labels fit, three from 40rem. An earlier flex-wrap
   layout left the third button spanning the full row beneath two half-width
   ones, which read as an accident rather than a decision. With five buttons
   a single 5-across row would squeeze "Karumathampatti ID" to nothing, so the
   columns step up instead of jumping straight to five. */
@media (min-width: 26rem) {
  .hmis-actions { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 40rem) {
  .hmis-actions { grid-template-columns: repeat(3, 1fr); }
}

.hmis-btn { flex-wrap: wrap; }

/* The button is a label plus a status line. The status takes its own row so
   the confirmation never shifts the button's width or its neighbours. */
.hmis-btn-status {
  flex-basis: 100%;
  font-size: .75rem;
  font-weight: 500;
  opacity: .9;
}

.hmis-btn-status:empty { display: none; }

.hmis-btn-status.is-error { color: #8a1c1c; font-weight: 650; }

@media (prefers-color-scheme: dark) {
  .hmis-btn-status.is-error { color: #ff9c9c; }
}

.hmis-btn.is-copied { border-color: var(--accent); }

/* The note under the userscript download button. It states a safety fact
   ("placeholder IDs only, a build check stops real credentials being
   served"), so it uses --ink-soft rather than the usual .sub grey.
   Measured: .sub (#6b737b) is 4.49:1 on --panel, which is just under the
   4.5 WCAG AA threshold for body text; --ink-soft (#4a5158) is 7.5:1.
   Marginal contrast on the one paragraph that explains what you are about
   to download is not a trade worth making. */
.hmis-download-note {
  color: var(--ink-soft);
  font-size: .875rem;
}

/* Tile grid: 1 column on phones, 2 on tablet, 3 on desktop. */
.tiles {
  display: grid;
  gap: .7rem;
  grid-template-columns: 1fr;
}

.tile {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  padding: .9rem 1rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--panel);
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-1);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
  min-height: 3rem;
}

.tile:hover,
.tile:focus-visible {
  border-color: var(--accent);
  box-shadow: var(--shadow-2);
  transform: translateY(-1px);
}

.tile-top {
  display: flex;
  align-items: center;
  gap: .6rem;
}

.tile-num {
  flex: none;
  width: 1.65rem;
  height: 1.65rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: .78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

@media (prefers-color-scheme: dark) {
  .tile-num { color: #16191c; }
}

.tile-title {
  font-size: .9875rem;
  font-weight: 650;
  line-height: 1.3;
  color: var(--ink);
}

.tile-desc {
  font-size: .875rem;
  color: var(--ink-soft);
  line-height: 1.45;
}

.tile-meta {
  margin-top: auto;
  padding-top: .4rem;
  font-size: .75rem;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .65rem 1rem;
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  text-decoration: none;
  font-size: .9375rem;
  font-weight: 650;
  min-height: 2.75rem;
  cursor: pointer;
  font-family: inherit;
}

.btn:hover, .btn:focus-visible { background: var(--accent-dim); border-color: var(--accent-dim); }

@media (prefers-color-scheme: dark) {
  .btn { color: #16191c; }
}

.btn-ghost {
  background: var(--panel);
  color: var(--accent);
  border-color: var(--rule);
}

.btn-ghost:hover, .btn-ghost:focus-visible {
  background: var(--accent-wash);
  border-color: var(--accent);
  color: var(--accent);
}

/* ==========================================================================
   Tabs — in-view sub-navigation, driven by the router
   ========================================================================== */

.tabs { margin-bottom: 1.25rem; }

.tablist {
  display: flex;
  flex-wrap: nowrap;
  gap: .35rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: .5rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--rule);
  scrollbar-width: thin;
}

.tablist button {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: .55rem .85rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--panel);
  color: var(--ink-soft);
  text-decoration: none;
  font-size: .875rem;
  font-weight: 600;
  font-family: inherit;
  min-height: 2.5rem;
  cursor: pointer;
}

.tablist button:hover { border-color: var(--accent); color: var(--accent); }

/* Only the selected panel is shown once the router has picked one. */
.tabpanel[hidden] { display: none; }

.tablist button[aria-selected="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

@media (prefers-color-scheme: dark) {
  .tablist button[aria-selected="true"] { color: #16191c; }
}

.tabpanel > h3:first-child { margin-top: 0; }

/* Notices -------------------------------------------------------------- */

.notice {
  border-radius: var(--radius);
  padding: .85rem 1rem;
  margin-bottom: 1.4rem;
  font-size: .9375rem;
}

.notice p { margin-bottom: .5rem; }
.notice > :last-child { margin-bottom: 0; }
.notice h3 { margin-top: 0; border-bottom: 0; padding-bottom: 0; }

.notice-warn { background: var(--warn-bg); border: 1px solid var(--warn-rule); }
.notice-rule { background: var(--note-bg); border: 1px solid var(--note-rule); }

/* --- Stock list ----------------------------------------------------------- */

.stock { max-width: var(--measure); }

.stock-item[hidden] { display: none; }

.stock-item {
  padding-block: .1rem;
}

.stock dt {
  font-weight: 650;
  font-size: .9375rem;
  margin-top: .85rem;
  color: var(--accent-dim);
}

.stock-item:first-child dt { margin-top: 0; }

.stock dd {
  font-size: .9375rem;
  color: var(--ink-soft);
  margin-top: .15rem;
}

/* ==========================================================================
   Filter bar — a search box above a filterable list
   ========================================================================== */

.filter-bar {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: .8rem .9rem;
  margin-bottom: 1.25rem;
}

.filter-label {
  display: block;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: .4rem;
}

.filter-input { position: relative; }

.filter-input input {
  width: 100%;
  font-family: inherit;
  font-size: 1rem;   /* 16px stops iOS zooming the viewport on focus */
  padding: .7rem 2.6rem .7rem .8rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--page);
  color: var(--ink);
  min-height: 2.75rem;
}

.filter-input input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

.filter-clear {
  position: absolute;
  right: .25rem;
  top: 50%;
  transform: translateY(-50%);
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--ink-faint);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
}

.filter-clear:hover { color: var(--accent); background: var(--accent-wash); }
.filter-clear[hidden] { display: none; }

.filter-count {
  margin-top: .45rem;
  font-size: .8125rem;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

.filter-empty {
  margin-top: .6rem;
  font-size: .875rem;
  color: var(--ink-soft);
  background: var(--panel-2);
  border-radius: var(--radius);
  padding: .6rem .75rem;
}

.filter-empty[hidden] { display: none; }

/* ==========================================================================
   Paediatric dose calculator
   ========================================================================== */

.calc {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--panel);
  padding: 1rem;
  margin-bottom: 1.25rem;
  box-shadow: var(--shadow-1);
}

.calc-row {
  display: grid;
  gap: .9rem;
  grid-template-columns: 1fr;
}

.field { display: flex; flex-direction: column; gap: .35rem; }

/* A `display` rule beats the browser's default `[hidden] { display: none }`,
   so any element given a display value AND toggled with the hidden attribute
   needs this to actually disappear. Without it the empty "Which regimen?"
   picker stayed visible for every single-regimen drug. */
[hidden] { display: none !important; }

.field label {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.field input,
.field select {
  width: 100%;
  font-family: inherit;
  /* 16px prevents mobile browsers from zooming in when the field is focused,
     which otherwise makes the whole form jump. */
  font-size: 1rem;
  padding: .65rem .7rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--page);
  color: var(--ink);
  min-height: 2.75rem;
}

.field input:focus,
.field select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

.field-hint {
  font-size: .8125rem;
  color: var(--ink-faint);
}

.age-input { display: flex; gap: .5rem; }
.age-input input { flex: 1 1 auto; min-width: 0; }
.age-input select { flex: 0 0 6.5rem; width: auto; }

.calc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1rem;
}

.calc-msg {
  border-radius: var(--radius);
  padding: .8rem .9rem;
  margin-bottom: 1rem;
  font-size: .9375rem;
}

.calc-msg-error {
  background: var(--warn-bg);
  border: 1px solid var(--warn-rule);
}

.calc-msg-warn {
  background: var(--warn-bg);
  border: 1px solid var(--warn-rule);
  font-weight: 600;
}

.calc-out {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--panel);
  padding: 1rem;
  box-shadow: var(--shadow-1);
}

.calc-out h3 {
  margin-top: 0;
  border-bottom: 1px solid var(--rule);
  padding-bottom: .5rem;
}

.calc-sub {
  font-size: .875rem;
  color: var(--ink-faint);
  margin-top: .3rem;
}

.calc-dl {
  display: grid;
  grid-template-columns: 1fr;
  gap: .1rem 1rem;
  margin-top: .9rem;
}

.calc-dl dt {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: .7rem;
}

.calc-dl dt:first-of-type { margin-top: 0; }

.calc-dl dd {
  font-size: 1.0625rem;
  font-weight: 650;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.calc-basis {
  margin-top: .9rem;
  font-size: .8125rem;
  color: var(--ink-faint);
  font-style: italic;
}

.calc-source {
  margin-top: .9rem;
  border-top: 1px solid var(--rule-soft);
  padding-top: .6rem;
}

.calc-source summary {
  cursor: pointer;
  font-size: .8125rem;
  font-weight: 650;
  color: var(--accent);
  min-height: 2.25rem;
  display: flex;
  align-items: center;
}

.calc-source p {
  margin-top: .4rem;
  font-size: .8125rem;
  color: var(--ink-soft);
  background: var(--panel-2);
  border-radius: var(--radius);
  padding: .6rem .7rem;
}

.calc-caveat {
  margin-top: .9rem;
  font-size: .8125rem;
  color: var(--ink-soft);
  border-top: 1px solid var(--rule-soft);
  padding-top: .7rem;
}

.calc-empty {
  border: 1px dashed var(--rule);
  border-radius: var(--radius);
  padding: 1rem;
  color: var(--ink-faint);
  font-size: .9375rem;
}

.calc-empty[hidden] { display: none; }

@media (min-width: 40rem) {
  .calc-row { grid-template-columns: 1.6fr 1fr 1.3fr; align-items: start; }
  .calc-dl { grid-template-columns: 14rem 1fr; align-items: baseline; }
  .calc-dl dt { margin-top: .7rem; }
  .calc-dl dt:first-of-type { margin-top: .7rem; }
  .calc { padding: 1.25rem; }
}

/* --- Tables --------------------------------------------------------------- */

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--page);
}

table { border-collapse: collapse; width: 100%; font-size: .875rem; }

thead th {
  background: var(--panel);
  text-align: left;
  font-size: .8125rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: .6rem .7rem;
  border-bottom: 2px solid var(--rule);
  white-space: nowrap;
}

tbody th {
  text-align: left;
  font-weight: 650;
  vertical-align: top;
  padding: .65rem .7rem;
  border-bottom: 1px solid var(--rule-soft);
  white-space: nowrap;
}

tbody td {
  vertical-align: top;
  padding: .65rem .7rem;
  border-bottom: 1px solid var(--rule-soft);
  color: var(--ink-soft);
}

tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }

/* Dosage table stacks into cards on narrow screens so a phone never
   has to scroll sideways to read a dose. */
@media (max-width: 39.999rem) {
  #dosage-table .table-scroll { border: 0; background: none; overflow: visible; }

  #dosage-table table,
  #dosage-table tbody,
  #dosage-table tr,
  #dosage-table th,
  #dosage-table td { display: block; width: auto; }

  #dosage-table thead { display: none; }

  #dosage-table tbody tr {
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background: var(--panel);
    padding: .7rem .8rem;
    margin-bottom: .6rem;
    box-shadow: var(--shadow-1);
  }

  #dosage-table tbody th {
    padding: 0 0 .35rem;
    border-bottom: 1px solid var(--rule);
    margin-bottom: .45rem;
    font-size: .9375rem;
    white-space: normal;
    color: var(--accent-dim);
  }

  #dosage-table tbody td {
    padding: 0;
    border-bottom: 0;
    font-size: .875rem;
  }
}

/* --- Correction disclosure ------------------------------------------------ */

.correction {
  margin-top: 1rem;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--warn-rule);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--panel);
  padding: .7rem .9rem;
  max-width: var(--measure);
}

.correction summary {
  cursor: pointer;
  font-size: .875rem;
  font-weight: 650;
  color: var(--accent);
  padding-block: .4rem;
  min-height: 2.5rem;
  display: flex;
  align-items: center;
}

.correction summary:hover { color: var(--accent-dim); }

.correction p {
  margin-top: .55rem;
  font-size: .875rem;
  color: var(--ink-soft);
}

/* --- Previous / next ------------------------------------------------------ */

.page-nav {
  display: grid;
  gap: .6rem;
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
}

.page-nav a {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding: .8rem .9rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--panel);
  text-decoration: none;
  color: inherit;
  min-height: 3rem;
}

.page-nav a:hover { border-color: var(--accent); }

.page-nav .dir {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.page-nav .label { font-size: .9375rem; font-weight: 650; color: var(--accent); }

/* --- Footer --------------------------------------------------------------- */

.footnote {
  margin-top: 1rem;
  font-size: .8125rem;
  color: var(--ink-faint);
  font-style: italic;
  max-width: var(--measure);
}

.site-foot {
  border-top: 1px solid var(--rule);
  margin-top: 2rem;
  padding-block: 1.5rem;
  font-size: .8125rem;
  color: var(--ink-faint);
}

.site-foot p { margin-bottom: .5rem; max-width: var(--measure); }
.site-foot p:last-child { margin-bottom: 0; }

.foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  margin-bottom: .9rem;
  padding: 0;
  list-style: none;
}

.foot-links a { color: var(--accent); text-decoration: none; }
.foot-links a:hover { text-decoration: underline; }

/* ==========================================================================
   Tablet
   ========================================================================== */

@media (min-width: 40rem) {
  :root { --pad: 1.5rem; }

  .page-head { padding-block: 2rem; }
  .page-head h1 { font-size: 1.85rem; }
  .page-head .lede { font-size: 1rem; }

  .brand-title { font-size: 1rem; }

  .tiles { grid-template-columns: 1fr 1fr; }

  main { padding-block: 2rem 3rem; }
  h2 { font-size: 1.4rem; }
  h3 { font-size: 1.0625rem; }

  .card { padding: 1.1rem 1.25rem; }

  table { font-size: .9375rem; }
  tbody th, tbody td { padding: .7rem .85rem; }

  .page-nav { grid-template-columns: 1fr 1fr; }
  section { margin-bottom: 2.5rem; }
  section + section { padding-top: 2.5rem; }
}

/* ==========================================================================
   Desktop
   ========================================================================== */

@media (min-width: 60rem) {
  .page-head h1 { font-size: 2rem; }

  .tiles { grid-template-columns: repeat(3, 1fr); }

  .stock {
    max-width: none;
    display: grid;
    grid-template-columns: 15rem 1fr;
    column-gap: 1.5rem;
    align-items: baseline;
  }
  .stock dt { margin-top: .75rem; }

  table { table-layout: fixed; }
  #dosage-table table th:first-child,
  #dosage-table table td:first-child { width: 15rem; }
  tbody th { white-space: normal; }

  h2 { font-size: 1.5rem; }

  /* The menu is a flat numbered 1–8 list. It stays a single column on every
     width: a two-column grid put 2, 4, 6, 8 in the second column, so reading
     down a column gave 1, 3, 5, 7 and the sequence looked broken. A single
     column is unambiguous, and 8 rows fit in the viewport regardless. */
  .nav-panel { max-width: 46rem; }
  .nav-list { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Print
   ========================================================================== */

@media print {
  :root {
    --page: #fff; --panel: #fff; --ink: #000; --ink-soft: #222;
    --ink-faint: #444; --rule: #999; --rule-soft: #ccc;
    --shadow-1: none; --shadow-2: none;
  }

  .topbar, .nav-overlay, .skip, .btn, .page-nav,
  .tablist { display: none !important; }

  body { font-size: 10pt; line-height: 1.4; }

  /* Every section is printed, whichever route happens to be open. */
  .view { display: block !important; }

  .tabpanel { display: block !important; }

  .page-head { border-bottom: 2px solid #000; padding-block: .5rem; background: none; }
  h2 .num { background: none; color: #000; border: 1px solid #000; }
  .tile-num { background: none; color: #000; border: 1px solid #000; }

  .card, .callout, .notice, .tile { border: 1px solid #999; background: #fff; box-shadow: none; }

  section { break-inside: avoid-page; }

  a { color: #000; text-decoration: none; }
  .table-scroll { overflow: visible; border: 0; }
  table { font-size: 9pt; }

  .tiles { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
  .tile:hover { transform: none; }
  .view.is-active { animation: none; }
}