:root {
  --bg: #f7f8fa;
  --surface: #ffffff;
  --ink: #15222b;
  --ink-soft: #4a5b67;
  --line: #dfe5ea;
  --brand: #16384e;
  --brand-ink: #ffffff;
  --accent: #1f6f9c;
  --node: #1c4b66;
  --node-ink: #ffffff;
  --access: #0e8a3b;
  --watch: #c98613;
  --reserve: #c1272d;
  --withhold: #5a6b76;
  --warn-bg: #fff4d6;
  --warn-line: #e7c574;
  --bad-bg: #fde8e9;
  --bad-line: #e6acaf;
  --good-bg: #e8f6ec;
  --good-line: #a8d8b5;
  --shadow: 0 1px 2px rgba(15, 35, 50, .05), 0 8px 24px rgba(15, 35, 50, .06);
  --radius: 12px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  /* Don't rubber-band/scroll past the footer (or bounce above the header). */
  overscroll-behavior-y: none;
}
html {
  /* Keep our type scale when phones rotate to landscape. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* App-feel for touch: no grey flash on tap, no double-tap-zoom delay on
   controls, and header chrome doesn't select or pop a callout on long-press.
   Page content stays selectable — clinicians copy doses out of it. */
button, a, input, select, summary {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.site-header button, .site-header .top-nav, .brand-text {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.wrap { width: min(1080px, 100% - 2rem); margin-inline: auto; }

/* Header */
.site-header {
  background: var(--brand);
  color: var(--brand-ink);
  position: sticky; top: 0; z-index: 10;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}
.site-header .wrap {
  display: flex; gap: 1rem; align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: .75rem 1rem;
}
/* Top row: logo pinned left, title centred, About icon pinned right.
   Equal 1fr side columns keep the title on the true centre line. */
.header-top {
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: .75rem;
  min-width: 0;
}
.brand {
  background: none; border: 0; color: inherit;
  display: flex; align-items: center;
  justify-self: start;
  cursor: pointer; padding: 0;
}
.brand-logo {
  display: block;
  height: 40px;
  width: auto;
  background: #fff;
  padding: 4px 8px;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
  flex: 0 0 auto;
}
.brand-text {
  background: none; border: 0; color: inherit;
  font: inherit; cursor: pointer; padding: 0;
  display: flex; flex-direction: column; align-items: center; line-height: 1.15;
  min-width: 0;
  text-align: center;
}
.brand-mark { font-weight: 800; font-size: 1.15rem; letter-spacing: .04em; }
.brand-sub { font-size: .78rem; opacity: .8; }

@media (max-width: 520px) {
  .brand-text .brand-mark { display: none; }
  .brand-sub { font-size: .72rem; }
}

/* PWA installed (standalone display) niceties */
@media (display-mode: standalone) {
  .site-header { padding-top: env(safe-area-inset-top); }
}

.top-nav {
  display: flex; gap: .25rem; flex-wrap: wrap;
  justify-content: center;
}
.top-nav button {
  background: rgba(255,255,255,.08);
  color: var(--brand-ink);
  border: 1px solid rgba(255,255,255,.15);
  padding: .45rem .7rem;
  border-radius: 999px;
  font: inherit; font-size: .85rem;
  cursor: pointer;
}
.top-nav button:hover { background: rgba(255,255,255,.18); }
.top-nav button.nav-cta {
  background: var(--brand-ink);
  color: var(--brand);
  border-color: var(--brand-ink);
  font-weight: 700;
  display: inline-flex; align-items: center;
  gap: .4rem;
}
.top-nav button.nav-cta .play-icon { background: rgba(22,56,78,.14); }
.top-nav button.nav-cta:hover { background: #e7eef3; border-color: #e7eef3; }
.top-nav button.is-active { background: var(--accent); border-color: var(--accent); }
.top-nav button.nav-cta.is-active { background: var(--accent); border-color: var(--accent); color: var(--brand-ink); }
.top-nav button.nav-cta.is-active .play-icon { background: rgba(255,255,255,.25); }
.top-nav button.nav-install {
  background: var(--accent);
  border-color: var(--accent);
  font-weight: 700;
}
.top-nav button.nav-install:hover { filter: brightness(1.1); }

/* Phones held upright: 1:4:2 rows — Clinical Guidance CTA on its own
   full-width row, then Syndromes/Organisms/Antibiotics/Calculators, then
   Checklist/Reference. The nav bleeds into the wrap's 1rem side padding
   (symmetrically, so it stays centred) for extra width. */
@media (max-width: 600px) and (orientation: portrait) {
  .top-nav {
    width: calc(100% + 2rem);
    margin-inline: -1rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .25rem;
  }
  .top-nav button {
    font-size: .8rem;
    padding: .45rem .3rem;
  }
  .top-nav button.nav-cta {
    grid-column: 1 / -1;
    justify-content: center;
    /* .25rem grid gap + .75rem = 1rem below the CTA, matching the header
       wrap's 1rem gap between the nav buttons and the search bar. */
    margin-bottom: .75rem;
  }
  .top-nav button[data-route="checklist"],
  .top-nav button[data-route="reference"] { grid-column: span 2; }
  .top-nav button.nav-install { grid-column: 1 / -1; }
}

/* On phones, tuck the nav buttons away as the page scrolls so the header
   keeps only the brand row and the search bar; scrolling back to the top
   brings them out the same way. The motion is pure position: sticky — no
   scripted transforms — so the browser's compositor moves the nav in
   perfect lockstep with the page. app.js measures the nav's height plus
   the wrap's 1rem row gap into --nav-ext; the header's negative sticky
   top lets it ride up with the page by exactly that amount before
   pinning, while the brand row stays pinned at the viewport top, so the
   nav slides up beneath it and the content the header uncovers is the
   page that has already scrolled underneath. The header's layout height
   never changes, so the page never reflows or shifts while tucking.

   The brand row is pinned with position: fixed, NOT a sticky nested
   inside the sticky header: browsers re-position a nested sticky every
   frame against its moving ancestor, and iOS Safari does that out of
   step with momentum scrolling, so the pinned row visibly jitters. A
   fixed element is never repositioned at all — steady by construction.
   Being out of flow, its slot in the header is reserved by the wrap's
   padding (--brand-h is measured by app.js alongside --nav-ext). */
@media (max-width: 600px) {
  .site-header {
    top: calc(-1 * var(--nav-ext, 0px));
  }
  /* Resting geometry is unchanged: .75rem wrap padding, brand row,
     1rem row gap, then the nav — the padding just supplies the first
     three now that the fixed brand row no longer occupies flow. */
  .site-header .wrap {
    padding-top: calc(.75rem + var(--brand-h, 48px) + 1rem);
  }
  .site-header .header-top {
    position: fixed;
    /* Matches the row's resting offset: the wrap's .75rem top padding,
       plus the safe-area padding the header gains when installed; the
       side insets mirror the wrap's 1rem viewport margins. */
    top: calc(.75rem + env(safe-area-inset-top, 0px));
    left: 1rem;
    right: 1rem;
    z-index: 2;
  }
  /* Opaque backdrop behind the pinned brand row (bleeding over the wrap's
     padding, and the safe area when installed) so the nav vanishes under
     its bottom edge rather than showing through. */
  .site-header .header-top::before {
    content: '';
    position: absolute;
    inset: calc(-.75rem - env(safe-area-inset-top, 0px)) -2rem 0;
    background: var(--brand);
    z-index: -1;
  }
  /* Fully hidden: take the nav out of the way for taps; app.js also marks
     it inert for focus and the accessibility tree. Deliberately nothing
     that paints (no visibility/opacity flip): the tucked nav is already
     covered by the brand row's backdrop, and the class lands a frame or
     two late during fast scrolls — a painted toggle would flash. */
  .site-header.nav-tucked .top-nav { pointer-events: none; }
}

/* About — icon-only button pinned to the top row's right edge */
.nav-about {
  justify-self: end;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.08);
  color: var(--brand-ink);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
}
.nav-about:hover { background: rgba(255,255,255,.18); }
.nav-about.is-active { background: var(--accent); border-color: var(--accent); }

main { padding: 1.25rem 0 3rem; }

/* Anchored sub-sections inside Reference (Algorithms, Glossary, Tables) —
   offset the scroll target so the sticky header doesn't cover the heading. */
.section-anchor { scroll-margin-top: 5.5rem; }

/* Footer */
.site-footer {
  border-top: 1px solid var(--line);
  background: #fff;
  padding: 1.5rem 0 1.75rem;
  color: var(--ink-soft);
  font-size: .85rem;
}
.footer-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}
.footer-feedback-cta {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: var(--brand);
  color: var(--brand-ink);
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
  padding: .6rem 1.4rem;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
.footer-feedback-cta:hover { background: var(--accent); }
.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .35rem 1.4rem;
}
.footer-links a {
  color: var(--brand);
  font-weight: 600;
  text-decoration: none;
  padding: .1rem 0;
}
.footer-links a:hover { text-decoration: underline; }
.footer-note { max-width: 64ch; margin: 0; }
.aware-legend {
  display: flex; gap: .35rem; align-items: center; justify-content: center; flex-wrap: wrap;
  margin: 0;
}

/* About & install */
.install-steps { margin: .35rem 0 .75rem; padding-left: 1.4rem; }
.install-steps li { margin: .25rem 0; }
.install-ok { color: var(--access, #1a7f37); font-weight: 700; }

/* Cards & sections */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1rem 1.1rem;
  margin: 0 0 1rem;
}
.card h1, .card h2, .card h3 { margin: .25rem 0 .6rem; }
.card h1 { font-size: 1.35rem; }
.card h2 { font-size: 1.1rem; }
.card h3 { font-size: .95rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .05em; }
.muted { color: var(--ink-soft); }
.lead { color: var(--ink-soft); font-size: .95rem; margin: 0 0 .75rem; }

.grid {
  display: grid;
  gap: .8rem;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.tile {
  display: block; text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .9rem 1rem;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: border-color .12s, transform .12s, box-shadow .12s;
}
.tile:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: var(--shadow); }
.tile .tile-title { font-weight: 600; font-size: 1rem; margin-bottom: .15rem; }
.tile .tile-sub { color: var(--ink-soft); font-size: .85rem; }
.tile .tile-tag { display: inline-block; font-size: .7rem; color: var(--ink-soft); margin-top: .35rem; }

/* Decision tree */
.tree {
  display: grid;
  gap: .8rem;
}
.node {
  background: var(--node);
  color: var(--node-ink);
  border-radius: var(--radius);
  padding: .9rem 1rem;
  font-weight: 600;
}
.node .qhint { display: block; font-weight: 400; font-size: .85rem; opacity: .85; margin-top: .25rem; }
.options {
  display: grid;
  gap: .5rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.options button {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: .75rem .8rem;
  text-align: left;
  font: inherit;
  cursor: pointer;
  color: var(--ink);
  transition: border-color .12s, background .12s;
}
.options button:hover { border-color: var(--accent); background: #f1f7fb; }
.options button .opt-sub { display: block; color: var(--ink-soft); font-size: .8rem; font-weight: 400; }

.options.follow-up { margin-top: 1rem; grid-template-columns: 1fr; }
.options.follow-up button {
  background: #f1f7fb;
  border-color: var(--accent);
  font-weight: 600;
}

.crumb {
  display: flex; gap: .35rem; align-items: center;
  flex-wrap: wrap;
  font-size: .85rem;
  color: var(--ink-soft);
  margin-bottom: .5rem;
}
.crumb button {
  background: none; border: 0; padding: 0;
  color: var(--accent); cursor: pointer; font: inherit;
}
.crumb button:hover { text-decoration: underline; }
.crumb .sep { opacity: .6; }
.crumb .current { color: var(--ink); }

.controls {
  display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .8rem;
}
.btn {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: .5rem .8rem;
  font: inherit;
  cursor: pointer;
  color: var(--ink);
}
.btn:hover { border-color: var(--accent); }
.btn.primary { background: var(--brand); color: #fff; border-color: var(--brand); }
.btn.primary:hover { background: var(--accent); border-color: var(--accent); }
.btn.cta {
  flex-basis: 100%;
  font-size: 1.1rem;
  font-weight: 700;
  padding: .8rem 1.2rem;
  border-radius: 10px;
  box-shadow: var(--shadow);
  display: inline-flex; align-items: center; justify-content: center;
  gap: .55rem;
}

/* Circled play glyph in front of the clinical-guidance CTAs */
.play-icon {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.6em; height: 1.6em;
  border-radius: 50%;
  background: rgba(255,255,255,.25);
  font-size: .68em;
  /* the ▶ glyph sits left of centre inside its box */
  padding-left: .15em;
}

/* Result */
.result {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 0;
  overflow: hidden;
}
.result-head { padding: .75rem 1rem; color: #fff; font-weight: 700; }
.result-head.access  { background: var(--access); }
.result-head.watch   { background: var(--watch); }
.result-head.reserve { background: var(--reserve); }
.result-head.withhold{ background: var(--withhold); }
.result-head .verdict { font-size: 1rem; }
.result-head .subverdict { display: block; font-weight: 500; font-size: .85rem; opacity: .95; margin-top: .15rem; }
.result-body { padding: .9rem 1rem; }
.result-body h4 { margin: .35rem 0 .25rem; font-size: .85rem; text-transform: uppercase; color: var(--ink-soft); letter-spacing: .05em; }

.rx-list { list-style: none; padding: 0; margin: 0 0 .5rem; display: grid; gap: .4rem; }
.rx {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: .55rem .7rem;
  display: grid;
  gap: .15rem;
}
.rx-drug { font-weight: 700; }
.rx-drug .aware-dot { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; vertical-align: middle; margin-right: .35rem; }
.rx-drug .aware-dot.access  { background: var(--access); }
.rx-drug .aware-dot.watch   { background: var(--watch); }
.rx-drug .aware-dot.reserve { background: var(--reserve); }
.rx-dose { font-size: .9rem; }
.rx-meta { font-size: .88rem; color: var(--ink); }
.rx-plus {
  font-size: .88rem;
  color: var(--ink);
  margin-top: .2rem;
  padding: .1rem 0 .1rem .55rem;
  border-left: 3px solid var(--line);
}

.callout {
  border-left: 4px solid var(--accent);
  background: #f1f7fb;
  padding: .55rem .75rem;
  border-radius: 8px;
  margin: .4rem 0;
  font-size: .92rem;
}
.callout.warn { border-color: var(--watch); background: var(--warn-bg); }
.callout.bad  { border-color: var(--reserve); background: var(--bad-bg); }
.callout.good { border-color: var(--access); background: var(--good-bg); }

.pill {
  display: inline-block;
  font-size: .72rem; line-height: 1;
  padding: .28rem .45rem;
  border-radius: 999px;
  font-weight: 700;
  color: #fff;
  vertical-align: middle;
}
.pill.access  { background: var(--access); }
.pill.watch   { background: var(--watch); }
.pill.reserve { background: var(--reserve); }
.pill.withhold{ background: var(--withhold); }

/* Tables */
.table-wrap { overflow-x: auto; }
table.ref {
  width: 100%; border-collapse: collapse; font-size: .88rem;
}
table.ref th, table.ref td {
  border: 1px solid var(--line);
  padding: .4rem .55rem;
  text-align: left;
  vertical-align: top;
}
table.ref thead th { background: #eef3f6; }
table.ref td.s-pp { background: #e8f6ec; text-align: center; font-weight: 700; color: var(--access); }
table.ref td.s-p  { background: #f1f9ee; text-align: center; font-weight: 700; color: var(--access); }
table.ref td.s-pm { background: #fff7e0; text-align: center; font-weight: 700; color: var(--watch); }
table.ref td.s-no { background: #fde8e9; text-align: center; font-weight: 700; color: var(--reserve); }
table.ref td.s-bang { background: #fff4d6; text-align: center; font-weight: 700; color: var(--watch); }
table.ref td.s-dash{ background: #f2f3f5; text-align: center; color: var(--ink-soft); }

.legend { font-size: .82rem; color: var(--ink-soft); margin-top: .4rem; }

/* Calculators */
.calc-form { display: grid; gap: .5rem; }
.calc-row {
  display: flex; align-items: center; gap: .55rem;
  padding: .45rem .6rem;
  border: 1px solid var(--line); border-radius: 8px;
  background: #fff;
}
.calc-row label { flex: 1; }
.calc-row input[type="number"] { width: 100px; padding: .35rem .4rem; border: 1px solid var(--line); border-radius: 6px; font: inherit; }
.calc-out {
  margin-top: .6rem;
  padding: .7rem .8rem;
  border-radius: 10px;
  background: var(--good-bg);
  border: 1px solid var(--good-line);
}
.calc-out.warn { background: var(--warn-bg); border-color: var(--warn-line); }
.calc-out.bad  { background: var(--bad-bg); border-color: var(--bad-line); }
.calc-out strong { font-size: 1.1rem; }

/* Numeric calculator rows (vancomycin AUC): label stacks above the field on
   narrow screens, sits inline on wider ones. */
.calc-row-num { align-items: center; gap: .5rem 1rem; flex-wrap: wrap; }
.calc-row-num .calc-label { flex: 1 1 12rem; }
.calc-row-num input[type="number"] {
  width: 110px; padding: .4rem .5rem; text-align: right;
  border: 1px solid var(--line); border-radius: 6px; font: inherit;
  /* iOS Safari zooms when a focused input is < 16px */
  font-size: 16px;
}
.calc-detail { margin: .6rem 0 0; font-size: .88rem; }
.calc-detail dt { color: var(--ink-soft); }
.calc-out.warn .calc-detail dt,
.calc-out.bad .calc-detail dt { color: inherit; opacity: .7; }
.calc-note { margin-top: .6rem; font-size: .9rem; }
.calc-info { margin-top: .9rem; border-top: 1px solid var(--line); padding-top: .5rem; }
.calc-info > summary {
  cursor: pointer; font-weight: 600; color: var(--accent);
  padding: .2rem 0; list-style-position: inside;
}
.calc-info > summary:hover { color: var(--brand); }
.calc-info-body { margin-top: .5rem; }
.calc-info-body h4 { margin: .9rem 0 .3rem; font-size: .95rem; }
.calc-info-body h4:first-child { margin-top: .2rem; }
.calc-info-body ul { margin: .3rem 0; padding-left: 1.2rem; }
.calc-info-body li { margin: .2rem 0; }

/* Feedback form */
.feedback-form { display: grid; gap: .8rem; max-width: 560px; }
.feedback-form .form-row { display: grid; gap: .3rem; }
.feedback-form label { font-weight: 600; }
.feedback-form input[type="text"],
.feedback-form input[type="email"],
.feedback-form select,
.feedback-form textarea {
  padding: .55rem .65rem;
  border: 1px solid var(--line); border-radius: 8px;
  background: #fff;
  font: inherit;
  /* iOS Safari zooms the viewport when a focused input is < 16px */
  font-size: 16px;
}
.feedback-form textarea { resize: vertical; min-height: 7rem; }
.feedback-form input:focus,
.feedback-form select:focus,
.feedback-form textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(31, 111, 156, .15);
}
/* Honeypot — off-screen, not display:none, so bots still fill it */
.feedback-form .form-hp {
  position: absolute; left: -9999px; top: -9999px;
  width: 1px; height: 1px; overflow: hidden;
}
.form-status { margin-top: .6rem; font-weight: 600; }
.form-status:empty { display: none; }
.form-status.bad {
  padding: .7rem .8rem;
  border-radius: 10px;
  background: var(--bad-bg);
  border: 1px solid var(--bad-line);
}

.dl-2 {
  display: grid; grid-template-columns: max-content 1fr; gap: .25rem .8rem;
  font-size: .9rem;
}
.dl-2 dt { font-weight: 600; color: var(--ink-soft); }
.dl-2 dd { margin: 0; overflow-wrap: anywhere; }

/* On narrow/portrait screens the two-column glossary is wider than the
   viewport (long terms force the first column open). Stack term over
   definition so it always fits. */
@media (max-width: 600px) {
  .dl-2 { display: block; }
  .dl-2 dt { margin-top: .7rem; }
  .dl-2 dt:first-child { margin-top: 0; }
  .dl-2 dd { margin: .1rem 0 0; padding-left: .6rem; color: var(--ink); }
}

/* PDF call-to-action on the home card */
.pdf-cta { margin: .8rem 0 0; font-size: .95rem; color: var(--ink-soft); }
.pdf-link {
  color: var(--accent); font-weight: 600; text-decoration: none;
  border: 0; border-bottom: 1px solid currentColor;
  /* Renders as a <button> in an installed PWA — strip native button chrome. */
  background: none; padding: 0; margin: 0; font: inherit; cursor: pointer;
}
.pdf-link:hover { color: var(--brand); }

.btn.small { padding: .35rem .65rem; font-size: .85rem; }

/* In-app guideline PDF viewer — pages rendered to <canvas> with PDF.js, since
   iOS WebKit cannot display a PDF in an <iframe>/<embed>. Used whenever the
   guideline is opened inside the app (installed PWA, where new tabs and
   downloads are blocked). */
.pdf-viewer { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.pdf-viewer-bar {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .6rem .9rem; border-bottom: 1px solid var(--line); flex-wrap: wrap;
}
.pdf-viewer-title { font-weight: 700; color: var(--brand); }
.pdf-viewer-actions { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.pdf-pageinfo { font-size: .85rem; }
.pdf-status { padding: 1.2rem .9rem; }
.pdf-status .controls { margin-top: .6rem; }
.pdf-pages {
  background: #52565b; padding: .7rem;
  display: flex; flex-direction: column; align-items: center; gap: .7rem;
}
.pdf-page {
  width: 100%; max-width: 900px; background: #fff;
  box-shadow: 0 1px 8px rgba(0, 0, 0, .45); border-radius: 2px;
}
.pdf-canvas { display: block; width: 100%; height: auto; border-radius: 2px; }

/* Algorithms gallery */
.algo-grid {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.algo-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow);
}
.algo-card.is-focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.algo-thumb {
  display: block; width: 100%; padding: 0; border: 0;
  background: #f1f4f7; cursor: zoom-in;
  aspect-ratio: 4 / 3; overflow: hidden;
}
.algo-thumb img {
  width: 100%; height: 100%; object-fit: contain; object-position: center top;
  background: #fff;
}
.algo-meta { padding: .75rem .9rem 1rem; display: flex; flex-direction: column; gap: .35rem; }
.algo-title { font-weight: 700; color: var(--brand); }
.algo-sub { font-size: .8rem; }
.algo-caption { margin: .35rem 0 .25rem; font-size: .9rem; color: var(--ink-soft); }
.algo-actions { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .35rem; }

/* Inline banner inside a syndrome page */
.algo-banner {
  margin-top: .9rem;
  display: grid; grid-template-columns: 140px 1fr; gap: .9rem; align-items: center;
  padding: .75rem; border: 1px solid var(--line); border-radius: 10px; background: #f7fafc;
}
.algo-banner-thumb {
  padding: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
  background: #fff; cursor: zoom-in;
  width: 140px; height: 105px;
}
.algo-banner-thumb img {
  width: 100%; height: 100%; object-fit: contain; object-position: center top;
}
.algo-banner-body p { margin: .25rem 0 .5rem; }
@media (max-width: 520px) {
  .algo-banner { grid-template-columns: 1fr; }
  .algo-banner-thumb { width: 100%; height: 160px; }
}

/* Lightbox for full-size algorithm view */
body.lightbox-open { overflow: hidden; }
.lightbox {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(8, 18, 26, .85);
  display: flex; flex-direction: column;
}
.lightbox-bar {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .6rem .9rem; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.lightbox-title { font-weight: 700; color: var(--brand); }
.lightbox-actions { display: flex; gap: .4rem; flex-wrap: wrap; }
.lightbox-body {
  flex: 1; overflow: auto; padding: 1rem;
  display: flex; align-items: flex-start; justify-content: center;
}
.lightbox-body img {
  max-width: 100%; height: auto;
  background: #fff; border-radius: 6px; box-shadow: 0 8px 30px rgba(0,0,0,.4);
}

/* Glossary terms auto-linked in body text — tap to see the definition */
.gloss-term {
  font: inherit; line-height: inherit; color: var(--accent);
  background: none; border: 0; padding: 0; margin: 0;
  border-bottom: 1px dotted var(--accent);
  cursor: pointer;
}
.gloss-term:hover, .gloss-term:focus-visible {
  background: rgba(31, 111, 156, .12);
  border-radius: 3px; outline: none;
}
.gloss-pop {
  position: fixed; z-index: 1100;
  max-width: min(320px, calc(100vw - 16px));
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 6px 24px rgba(15, 35, 50, .22);
  padding: .6rem .75rem; font-size: .9rem;
}
.gloss-pop-term { font-weight: 700; color: var(--brand); margin-bottom: .2rem; }
.gloss-pop-def { color: var(--ink-soft); line-height: 1.4; }
.gloss-pop-link {
  display: inline-block; margin-top: .5rem;
  font: inherit; font-size: .8rem; font-weight: 600;
  background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer;
}

/* Search — header input */
.nav-search {
  position: relative;
  flex: 1 1 170px;
  min-width: 180px;
  max-width: 360px;
  display: flex;
  align-items: center;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  padding: 0 .25rem 0 .75rem;
}
.nav-search input {
  flex: 1;
  background: transparent;
  border: 0; outline: 0;
  color: #fff;
  font: inherit;
  /* iOS Safari zooms the viewport when a focused input is < 16px — keep this at 16px. */
  font-size: 16px;
  padding: .35rem 0;
  min-width: 0;
}
.nav-search input::placeholder { color: rgba(255,255,255,.7); }
.nav-search input::-webkit-search-cancel-button { filter: invert(1); opacity: .7; }
.nav-search-go {
  background: rgba(255,255,255,.18);
  border: 0; color: #fff;
  border-radius: 999px;
  padding: .3rem .6rem;
  cursor: pointer;
  font: inherit; font-size: .85rem;
  margin-left: .35rem;
}
.nav-search-go:hover { background: var(--accent); }

.nav-search-suggest {
  position: absolute;
  top: calc(100% + .35rem);
  left: 0; right: 0;
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
  max-height: 60vh; overflow-y: auto;
  z-index: 20;
}
.nav-search-item {
  display: flex; align-items: center; gap: .45rem;
  padding: .5rem .65rem;
  cursor: pointer;
  border-bottom: 1px solid var(--line);
  font-size: .85rem;
}
.nav-search-item:last-child { border-bottom: 0; }
.nav-search-item:hover, .nav-search-item.is-active { background: #f1f7fb; }
.nav-search-item-title { font-weight: 600; }
.nav-search-item-sub { font-size: .78rem; }
.nav-search-empty { padding: .65rem .75rem; font-size: .85rem; }
.nav-search-more {
  padding: .5rem .65rem;
  cursor: pointer;
  font-size: .82rem;
  background: #f7fafc;
  color: var(--accent);
  font-weight: 600;
  border-top: 1px solid var(--line);
}
.nav-search-more:hover { background: #eaf2f8; }

/* Search — badges */
.badge {
  display: inline-flex; align-items: center;
  font-size: .68rem; font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: .2rem .45rem;
  border-radius: 999px;
  background: #eef3f6;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  flex-shrink: 0;
}
.badge-syndrome   { background: #e6f1f8; color: #1f4f6f; border-color: #c6dceb; }
.badge-organism   { background: #efeaf8; color: #523a83; border-color: #d3c8ec; }
.badge-antibiotic { background: #e7f5ec; color: #1f6f3b; border-color: #b8dec6; }
.badge-algorithm  { background: #fff1d6; color: #8a5a10; border-color: #ecd49a; }
.badge-glossary   { background: #f1f1f3; color: #4a5b67; border-color: var(--line); }
.badge.aware-watch   { box-shadow: inset 0 0 0 2px var(--watch); }
.badge.aware-reserve { box-shadow: inset 0 0 0 2px var(--reserve); }

/* Search — results page */
.home-search {
  display: flex; gap: .5rem; align-items: center; flex-wrap: wrap;
  margin: .25rem 0;
}
.home-search input {
  flex: 1 1 260px;
  padding: .55rem .75rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit; font-size: 1rem;
  background: #fff;
  color: var(--ink);
  outline: none;
}
.home-search input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(31, 111, 156, .15); }

.search-chips {
  display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .5rem;
}
.chip {
  background: #eef3f6;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .25rem .65rem;
  font-size: .8rem;
  cursor: pointer;
  color: var(--ink);
}
.chip:hover { border-color: var(--accent); background: #e1ecf3; }

.search-results {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: .5rem;
}
.search-hit {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: .65rem .8rem;
  cursor: pointer;
  background: #fff;
  transition: border-color .12s, background .12s, transform .12s;
}
.search-hit:hover { border-color: var(--accent); background: #f7fbfd; transform: translateY(-1px); }
.search-hit-head {
  display: flex; align-items: center; gap: .55rem;
  flex-wrap: wrap;
}
.search-hit-title { font-weight: 700; font-size: .98rem; }
.search-hit-sub { font-size: .82rem; margin-top: .1rem; }
.search-hit-snippet { font-size: .88rem; color: var(--ink-soft); margin-top: .25rem; }

/* Tag clouds on the empty-search browse view */
.tag-cloud {
  display: flex; flex-wrap: wrap; gap: .4rem;
}
.tag {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .3rem .65rem;
  cursor: pointer;
  font: inherit; font-size: .82rem;
  color: var(--ink);
  display: inline-flex; align-items: center; gap: .35rem;
}
.tag:hover { border-color: var(--accent); background: #f7fbfd; }
.tag .aware-dot { width: .55rem; height: .55rem; border-radius: 50%; display: inline-block; }
.tag .aware-dot.access  { background: var(--access); }
.tag .aware-dot.watch   { background: var(--watch); }
.tag .aware-dot.reserve { background: var(--reserve); }

/* Link-styled button (used in organism spectrum table) */
.linklike {
  background: none; border: 0; padding: 0;
  color: var(--accent); cursor: pointer; font: inherit;
  text-decoration: underline; text-underline-offset: 2px;
}
.linklike:hover { color: var(--brand); }

@media (max-width: 720px) {
  .nav-search {
    order: 99;
    flex-basis: 100%;
    max-width: none;
  }
}

/* Print */
@media print {
  .site-header, .site-footer, .top-nav, .controls, .lightbox, .nav-search, .gloss-pop { display: none !important; }
  .gloss-term { color: inherit; border-bottom: 0; }
  body { background: #fff; }
  .card, .result { box-shadow: none; border-color: #aaa; page-break-inside: avoid; }
  .algo-thumb { aspect-ratio: auto; }
  .algo-thumb img, .algo-banner-thumb img { max-height: 280px; }
}