/* ==========================================================================
   MedBridge UI — design system v2
   Style: accessible "soft UI" for healthcare — calm deep teal, layered soft
   depth, frosted chrome, Figtree type. Light + dark (html[data-theme] or system).
   ========================================================================== */
@font-face {
  font-family: "Figtree"; font-style: normal; font-weight: 300 900; font-display: swap;
  src: url("../fonts/figtree-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  --bg: #f4f7f9; --bg-2: #eaf0f3; --bg-glow: rgba(14,116,144,.07);
  --surface: #ffffff; --surface-2: #f5f8fa; --surface-3: #e9eff3;
  --glass: rgba(255,255,255,.78);
  --border: #e2e9ee; --border-strong: #cad6de;
  --text: #0b1f2a; --text-2: #3b5361; --muted: #5f7482;
  --primary: #0e7490; --primary-strong: #0b5e75; --primary-soft: #e3f4f7; --primary-ink: #0a5568; --on-primary: #ffffff;
  --accent: #059669;
  --hero-a: #06303b; --hero-b: #0b6a84; --hero-c: #0d9488; --hero-text: #ffffff;
  --green: #047857; --green-soft: #def5ea; --on-green: #ffffff;
  --amber: #8a5300; --amber-soft: #fff4dc; --amber-line: #f0c46b; --on-amber: #ffffff;
  --red: #b42318; --red-soft: #fdecea; --red-line: #f3aea7; --on-red: #ffffff;
  --c-emergency:#d9453c; --c-obstetric:#d6478f; --c-cardio:#e2711d; --c-endocrine:#7a4fd0; --c-electrolyte:#2b7bd6; --c-infection:#1f9d55; --c-respiratory:#1c9bc8; --c-neuro:#6d5bd0; --c-analgesia:#c98a12; --c-haem:#c93a63; --c-nutrition:#5c8a1f; --c-psychiatry:#3f7f8f; --c-eye:#1d7fa8;
  --shadow-1: 0 1px 2px rgba(11,31,42,.05), 0 1px 1px rgba(11,31,42,.03);
  --shadow-2: 0 2px 4px rgba(11,31,42,.04), 0 12px 32px -12px rgba(11,31,42,.18);
  --shadow-3: 0 4px 8px rgba(11,31,42,.06), 0 14px 24px -12px rgba(11,31,42,.24);
  --shadow-primary: 0 4px 12px -6px rgba(11,31,42,.35);
  --ring: rgba(14,116,144,.32);
  --radius: 18px; --radius-sm: 12px;
  --ease: cubic-bezier(.2,.8,.2,1);
  --sans: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Helvetica, Arial, sans-serif;
  --serif: var(--sans);
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color-scheme: light;
}
:root[data-theme="dark"] { color-scheme: dark;
  --bg: #0b1114; --bg-2: #10171b; --bg-glow: rgba(94,196,207,.05);
  --surface: #151d22; --surface-2: #1a242a; --surface-3: #223039;
  --glass: rgba(14,20,24,.86);
  --border: #26343c; --border-strong: #364a54;
  --text: #edf3f6; --text-2: #c3d0d6; --muted: #93a6b0;
  --primary: #5ec4cf; --primary-strong: #86d6de; --primary-soft: #13323a; --primary-ink: #8edbe3; --on-primary: #05262c;
  --accent: #4cc99a;
  --hero-a: #0a1a1f; --hero-b: #0d3640; --hero-c: #0e4d48; --hero-text: #f2fafb;
  --green: #74d9a8; --green-soft: #12301f; --on-green: #062014;
  --amber: #f2c97d; --amber-soft: #2e230e; --amber-line: #7a5d23; --on-amber: #2a1c02;
  --red: #ff9b91; --red-soft: #351816; --red-line: #77352f; --on-red: #2b0905;
  --c-emergency:#ff8a80; --c-obstetric:#f78fc8; --c-cardio:#ffab70; --c-endocrine:#bca5ff; --c-electrolyte:#7cb8ff; --c-infection:#6fd99a; --c-respiratory:#6fcdee; --c-neuro:#ada1ff; --c-analgesia:#f0c46a; --c-haem:#ff8aa6; --c-nutrition:#a8d572; --c-psychiatry:#86c7d6; --c-eye:#74c9ea;
  --shadow-1: 0 1px 2px rgba(0,0,0,.45);
  --shadow-2: inset 0 1px 0 rgba(255,255,255,.035), 0 1px 2px rgba(0,0,0,.4), 0 12px 28px -14px rgba(0,0,0,.7);
  --shadow-3: inset 0 1px 0 rgba(255,255,255,.05), 0 6px 14px rgba(0,0,0,.4), 0 14px 24px -12px rgba(0,0,0,.75);
  --shadow-primary: 0 4px 12px -6px rgba(0,0,0,.6);
  --ring: rgba(94,196,207,.5);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark;
  --bg: #0b1114; --bg-2: #10171b; --bg-glow: rgba(94,196,207,.05);
  --surface: #151d22; --surface-2: #1a242a; --surface-3: #223039;
  --glass: rgba(14,20,24,.86);
  --border: #26343c; --border-strong: #364a54;
  --text: #edf3f6; --text-2: #c3d0d6; --muted: #93a6b0;
  --primary: #5ec4cf; --primary-strong: #86d6de; --primary-soft: #13323a; --primary-ink: #8edbe3; --on-primary: #05262c;
  --accent: #4cc99a;
  --hero-a: #0a1a1f; --hero-b: #0d3640; --hero-c: #0e4d48; --hero-text: #f2fafb;
  --green: #74d9a8; --green-soft: #12301f; --on-green: #062014;
  --amber: #f2c97d; --amber-soft: #2e230e; --amber-line: #7a5d23; --on-amber: #2a1c02;
  --red: #ff9b91; --red-soft: #351816; --red-line: #77352f; --on-red: #2b0905;
  --c-emergency:#ff8a80; --c-obstetric:#f78fc8; --c-cardio:#ffab70; --c-endocrine:#bca5ff; --c-electrolyte:#7cb8ff; --c-infection:#6fd99a; --c-respiratory:#6fcdee; --c-neuro:#ada1ff; --c-analgesia:#f0c46a; --c-haem:#ff8aa6; --c-nutrition:#a8d572; --c-psychiatry:#86c7d6; --c-eye:#74c9ea;
  --shadow-1: 0 1px 2px rgba(0,0,0,.45);
  --shadow-2: inset 0 1px 0 rgba(255,255,255,.035), 0 1px 2px rgba(0,0,0,.4), 0 12px 28px -14px rgba(0,0,0,.7);
  --shadow-3: inset 0 1px 0 rgba(255,255,255,.05), 0 6px 14px rgba(0,0,0,.4), 0 14px 24px -12px rgba(0,0,0,.75);
  --shadow-primary: 0 4px 12px -6px rgba(0,0,0,.6);
  --ring: rgba(94,196,207,.5);
} }

/* ---------- base ---------- */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 130px; }
body { margin: 0; font: 16px/1.6 var(--sans); background: var(--bg); color: var(--text); transition: background .25s, color .25s; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "tnum" 0; }
body::before { content: ""; position: fixed; inset: 0 0 auto 0; height: 520px; z-index: -1; pointer-events: none;
  background: radial-gradient(900px 380px at 12% -10%, var(--bg-glow), transparent 70%), radial-gradient(700px 320px at 95% -5%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 70%); }
a { color: var(--primary-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3 { font-family: var(--sans); font-weight: 750; letter-spacing: -.022em; line-height: 1.15; margin: 0 0 .5rem; color: var(--text); }
h1 { font-size: clamp(1.7rem, 2.6vw + 1rem, 2.35rem); font-weight: 800; } h2 { font-size: 1.35rem; } h3 { font-size: 1.1rem; letter-spacing: -.012em; }
h4 { font-family: var(--sans); font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin: 1.1rem 0 .45rem; font-weight: 750; }
p { margin: 0 0 .75rem; }
ul, ol { margin: 0 0 .5rem; padding-left: 1.3rem; }
li { margin-bottom: .4rem; }
li::marker { color: var(--primary); }
code { font-family: var(--mono); font-size: .88em; background: var(--surface-3); padding: .08em .42em; border-radius: 6px; }
:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; border-radius: 10px; }
::selection { background: color-mix(in srgb, var(--primary) 25%, transparent); }
.icon { width: 1.15em; height: 1.15em; vertical-align: -.2em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.big, .pd-big, .rs-w, .sched-when, .stat b, .rs-dose b, .rs-vol { font-variant-numeric: tabular-nums; }
@keyframes enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
#app.enter { animation: enter .26s var(--ease) both; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ---------- shell ---------- */
.topbar { position: sticky; top: 0; z-index: 30; background: var(--glass); -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px); border-bottom: 1px solid color-mix(in srgb, var(--border) 80%, transparent); }
.topbar-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; gap: .6rem; padding: .5rem 1rem; min-height: 64px; }
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--text); font-family: var(--sans); font-weight: 800; font-size: 1.22rem; letter-spacing: -.03em; }
.brand .mark { width: 36px; height: 36px; border-radius: 11px; background: linear-gradient(140deg, var(--hero-b), var(--hero-c)); color: #fff; display: grid; place-items: center; box-shadow: var(--shadow-primary), inset 0 1px 0 rgba(255,255,255,.25); }
.brand .mark .icon { width: 18px; height: 18px; stroke-width: 2.3; }
.topnav { display: none; gap: .2rem; margin-left: 1.2rem; padding: 4px; border-radius: 14px; background: color-mix(in srgb, var(--surface-3) 60%, transparent); }
.topnav a { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .85rem; min-height: 38px; border-radius: 10px; text-decoration: none; color: var(--text-2); font-weight: 650; font-size: .9rem; transition: background .18s var(--ease), color .18s var(--ease), box-shadow .18s var(--ease); }
.topnav a:hover { color: var(--text); background: color-mix(in srgb, var(--surface) 70%, transparent); }
.topnav a.active { background: var(--surface); color: var(--primary-ink); box-shadow: var(--shadow-1), 0 0 0 1px var(--border); }
.tools { margin-left: auto; display: flex; align-items: center; gap: .4rem; }
.status { display: none; align-items: center; gap: .4rem; font-size: .74rem; font-weight: 650; color: var(--muted); padding: .3rem .7rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); }
.status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.status.off { color: var(--amber); border-color: var(--amber-line); } .status.off .dot { background: var(--amber); box-shadow: none; }
.theme { white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: .35rem; min-height: 40px; min-width: 40px; padding: .35rem .75rem; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font-size: .82rem; font-weight: 650; box-shadow: var(--shadow-1); transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease); }
.theme:hover { border-color: var(--border-strong); color: var(--text); }
.theme .icon { width: 18px; height: 18px; }
.theme .sun, .theme .moon { display: none; }
:root[data-theme="light"] .theme .sun { display: inline; }
:root[data-theme="dark"] .theme .moon { display: inline; }
:root:not([data-theme]) .theme .auto { display: inline; }
:root[data-theme] .theme .auto { display: none; }
@media (min-width: 480px) { .status { display: inline-flex; } }
.layout { max-width: 1200px; margin: 0 auto; padding: 1.1rem 1rem 6.5rem; }
.bottomnav { position: fixed; bottom: calc(10px + env(safe-area-inset-bottom)); left: 10px; right: 10px; z-index: 30; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--glass); -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px); border: 1px solid color-mix(in srgb, var(--border) 85%, transparent); border-radius: 20px; padding: 5px; box-shadow: var(--shadow-3); }
.bottomnav a, .bottomnav button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; padding: .35rem .2rem; min-height: 54px; border-radius: 15px; text-decoration: none; color: var(--muted); font-size: .66rem; font-weight: 700; letter-spacing: .01em; transition: color .18s var(--ease), background .18s var(--ease); }
.bottomnav a .icon, .bottomnav button .icon { width: 22px; height: 22px; }
.bottomnav button { border: 0; background: none; font-family: inherit; cursor: pointer; }
.bottomnav button:hover, .bottomnav a:hover { color: var(--text); }
.bottomnav a.active { color: var(--primary-ink); background: var(--primary-soft); }
@media (min-width: 760px) { .topnav { display: flex; } .bottomnav { display: none; } .layout { padding-bottom: 3rem; } }

/* ---------- notice ---------- */
.notice { display: flex; gap: .7rem; align-items: flex-start; background: color-mix(in srgb, var(--amber-soft) 85%, var(--surface)); border: 1px solid color-mix(in srgb, var(--amber-line) 70%, transparent); color: var(--amber); border-radius: 14px; padding: .7rem .9rem; margin-bottom: 1rem; font-size: .86rem; line-height: 1.45; }
.notice .icon { margin-top: .15rem; }
.notice button { margin-left: auto; background: none; border: 0; color: inherit; padding: .2rem; border-radius: 10px; display: grid; place-items: center; min-width: 36px; min-height: 36px; }
.notice button:hover { background: rgba(0,0,0,.07); }

/* ---------- generic ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.2rem 1.3rem; margin-bottom: 1rem; box-shadow: var(--shadow-2); }
.card h3 { margin-bottom: .6rem; }
.muted { color: var(--muted); } .small { font-size: .86rem; } .text-2 { color: var(--text-2); }
.row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.chip { display: inline-flex; align-items: center; gap: .3rem; font-size: .75rem; font-weight: 650; padding: .24rem .66rem; border-radius: 999px; background: var(--surface-3); color: var(--text-2); line-height: 1.3; }
.chip .icon { width: .95em; height: .95em; }
.chip.ok { background: var(--green-soft); color: var(--green); }
.chip.warn { background: var(--amber-soft); color: var(--amber); }
.chip.bad { background: var(--red-soft); color: var(--red); }
.chip.primary { background: var(--primary-soft); color: var(--primary-ink); }
.chip.cat { background: color-mix(in srgb, var(--cat, var(--primary)) 13%, transparent); color: color-mix(in srgb, var(--cat, var(--primary)) 80%, var(--text)); }
.callout { display: flex; gap: .65rem; border-radius: 14px; padding: .85rem 1rem; margin: .25rem 0 1rem; font-size: .92rem; border: 1px solid var(--border); background: var(--surface-2); }
.callout .icon { margin-top: .2rem; }
.callout.danger { background: var(--red-soft); border-color: var(--red-line); color: var(--red); }
.callout.warn { background: var(--amber-soft); border-color: var(--amber-line); color: var(--amber); }
.callout.info { background: var(--primary-soft); border-color: color-mix(in srgb, var(--primary) 18%, transparent); color: var(--primary-ink); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 44px; padding: .55rem 1.15rem; border-radius: 12px; border: 1px solid transparent; background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 88%, #fff), var(--primary)); color: var(--on-primary); font-weight: 700; letter-spacing: -.005em; text-decoration: none; transition: filter .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease); box-shadow: var(--shadow-primary), inset 0 1px 0 rgba(255,255,255,.18); }
.btn:hover { filter: brightness(1.06); transform: translateY(-1px); } .btn:active { transform: translateY(0); filter: brightness(.98); }
.btn.ghost { background: var(--surface); color: var(--text); border-color: var(--border-strong); box-shadow: var(--shadow-1); }
.btn.ghost:hover { background: var(--surface-2); border-color: color-mix(in srgb, var(--primary) 40%, var(--border-strong)); filter: none; }
.btn.sm { min-height: 40px; padding: .35rem .85rem; font-size: .87rem; border-radius: 11px; }
.back { display: inline-flex; align-items: center; gap: .25rem; margin-bottom: .75rem; min-height: 36px; text-decoration: none; font-weight: 650; font-size: .9rem; color: var(--text-2); }
.back:hover { color: var(--primary-ink); }
.empty { text-align: center; color: var(--muted); padding: 2.5rem 1rem; }
.kv { display: grid; grid-template-columns: minmax(120px, 28%) 1fr; gap: .6rem 1rem; font-size: .95rem; margin: 0; }
.kv dt { font-weight: 700; color: var(--text-2); } .kv dd { margin: 0; }
.tablewrap { overflow-x: auto; }
table.plain { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.plain th, table.plain td { border-bottom: 1px solid var(--border); padding: .45rem .5rem; text-align: left; vertical-align: top; }
table.plain th { color: var(--muted); font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; }

/* ---------- drugs index ---------- */
.hero { position: relative; overflow: hidden; isolation: isolate; border-radius: 26px; padding: 1.6rem 1.35rem 1.2rem; margin-bottom: 1.1rem; color: var(--hero-text);
  background: radial-gradient(60% 90% at 100% 0%, rgba(45,212,191,.35), transparent 60%), radial-gradient(50% 70% at 0% 100%, rgba(8,145,178,.35), transparent 60%), linear-gradient(145deg, var(--hero-a) 0%, var(--hero-b) 58%, var(--hero-c) 100%);
  box-shadow: var(--shadow-3), inset 0 1px 0 rgba(255,255,255,.12); }
.hero::after { content: ""; position: absolute; right: -80px; top: -120px; width: 340px; height: 340px; z-index: -1; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(94,234,212,.16), transparent 62%); }
.hero-eyebrow { display: inline-flex; align-items: center; gap: .4rem; font-size: .72rem; font-weight: 750; text-transform: uppercase; letter-spacing: .12em; padding: .28rem .7rem; border-radius: 999px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); margin-bottom: .8rem; }
.hero-eyebrow .pulse { width: 7px; height: 7px; border-radius: 50%; background: #5eead4; box-shadow: 0 0 0 4px rgba(94,234,212,.25); }
.hero h1 { color: inherit; margin-bottom: .35rem; font-size: clamp(1.85rem, 3.4vw + 1rem, 2.75rem); letter-spacing: -.035em; line-height: 1.05; max-width: 18ch; }
.hero p { color: inherit; opacity: .86; font-size: .98rem; margin-bottom: 1.1rem; max-width: 52ch; }
.hero-stats { display: flex; flex-wrap: wrap; gap: .45rem 1.1rem; margin: -.4rem 0 1rem; font-size: .8rem; font-weight: 650; opacity: .92; }
.hero-stats b { font-size: 1rem; font-weight: 800; margin-right: .2rem; font-variant-numeric: tabular-nums; }
.searchbar { position: relative; }
.searchbar .icon { position: absolute; left: 1.05rem; top: 50%; transform: translateY(-50%); color: var(--primary); width: 20px; height: 20px; }
.searchbar input { width: 100%; min-height: 56px; padding: .7rem 3rem .7rem 3rem; border: 1px solid rgba(255,255,255,.6); border-radius: 16px; background: var(--surface); color: var(--text); font-size: 1.04rem; font-weight: 500; box-shadow: 0 10px 30px -10px rgba(0,0,0,.45); transition: box-shadow .2s var(--ease); }
.searchbar input::placeholder { color: var(--muted); }
.searchbar input:focus { outline: none; box-shadow: 0 0 0 4px rgba(255,255,255,.35), 0 10px 30px -10px rgba(0,0,0,.45); }
.searchbar kbd { position: absolute; right: .9rem; top: 50%; transform: translateY(-50%); font: 700 .7rem var(--sans); color: var(--muted); border: 1px solid var(--border); border-radius: 7px; padding: .12rem .5rem; background: var(--surface-2); }
.quick-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .14em; font-weight: 750; opacity: .8; margin: 1rem 0 .45rem; }
.quick { display: flex; gap: .45rem; overflow-x: auto; padding-bottom: .15rem; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent); mask-image: linear-gradient(90deg, #000 92%, transparent); }
.quick::-webkit-scrollbar { display: none; }
.quick button { flex: 0 0 auto; min-height: 38px; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.1); color: var(--hero-text); border-radius: 999px; padding: .3rem .9rem .3rem .7rem; font-size: .84rem; font-weight: 650; display: inline-flex; align-items: center; gap: .35rem; transition: background .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.quick button .icon { width: 15px; height: 15px; color: #fcd34d; }
.quick button:hover { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.4); transform: translateY(-1px); }
.cats { display: flex; gap: .45rem; overflow-x: auto; padding: .15rem 0 .8rem; scrollbar-width: none; }
.cats::-webkit-scrollbar { display: none; }
.cats button { flex: 0 0 auto; min-height: 38px; border: 1px solid var(--border); background: var(--surface); border-radius: 999px; padding: .3rem .95rem; font-size: .84rem; font-weight: 650; color: var(--text-2); box-shadow: var(--shadow-1); transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease); display: inline-flex; align-items: center; gap: .45rem; }
.cats button .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cat, var(--muted)); border: 0; }
.cats button:hover { border-color: var(--border-strong); color: var(--text); }
.cats button.active { background: var(--text); color: var(--bg); border-color: var(--text); box-shadow: var(--shadow-2); }
.section-label { display: flex; align-items: baseline; justify-content: space-between; margin: .4rem 0 .7rem; }
.section-label span { font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); font-weight: 750; }
.drug-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
@media (min-width: 640px) { .drug-list { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .drug-list { grid-template-columns: 1fr 1fr 1fr; } }
.drug-item { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .85rem; row-gap: .3rem; text-decoration: none; color: inherit; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .9rem 1rem; box-shadow: var(--shadow-1); min-height: 76px; transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease); overflow: hidden; }
.drug-item:hover { border-color: color-mix(in srgb, var(--cat, var(--primary)) 35%, var(--border)); box-shadow: var(--shadow-2); transform: translateY(-2px); }
.drug-item .mono { grid-row: span 2; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-weight: 800; font-size: 1.02rem; letter-spacing: -.02em; color: color-mix(in srgb, var(--cat, var(--primary)) 85%, var(--text)); background: color-mix(in srgb, var(--cat, var(--primary)) 13%, var(--surface)); border: 1px solid color-mix(in srgb, var(--cat, var(--primary)) 18%, transparent); align-self: start; }
.drug-item .top { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.drug-item .name { font-family: var(--sans); font-weight: 750; font-size: 1.04rem; letter-spacing: -.015em; flex: 1; min-width: 0; }
.drug-item .top .icon { color: var(--muted); transition: transform .2s var(--ease), color .2s var(--ease); }
.drug-item:hover .top .icon { transform: translateX(3px); color: var(--primary); }
.drug-item .meta { font-size: .8rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: .3rem .5rem; align-items: center; min-width: 0; }
.drug-item .count { font-size: .7rem; font-weight: 750; color: var(--primary-ink); background: var(--primary-soft); padding: .14rem .55rem; border-radius: 999px; }
.drug-item.case-item { grid-template-columns: minmax(0, 1fr); }
.drug-item.case-item .case-sum { font-size: .86rem; color: var(--text-2); margin: 0; }

/* ---------- drug detail ---------- */
.detail { display: grid; gap: 1.4rem; grid-template-columns: minmax(0, 1fr); }
.detail > div { min-width: 0; }
.index { display: none; }
@media (min-width: 1024px) { .detail { grid-template-columns: 250px minmax(0, 1fr); align-items: start; } .index { display: block; position: sticky; top: 84px; max-height: calc(100vh - 100px); overflow: auto; padding: .8rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-1); } }
.index h4 { margin-top: 0; }
.index a { display: block; padding: .42rem .65rem; border-radius: 9px; text-decoration: none; color: var(--text-2); font-size: .88rem; transition: background .15s var(--ease), color .15s var(--ease); }
.index a:hover { background: var(--surface-2); color: var(--text); }
.index a.active { background: var(--primary-soft); color: var(--primary-ink); font-weight: 700; }
.index input { width: 100%; min-height: 40px; padding: .45rem .7rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); margin-bottom: .5rem; font-size: .88rem; }
.head { margin-bottom: 1.1rem; }
.head h1 { margin-bottom: .2rem; }
.head .cls { color: var(--muted); font-size: .94rem; font-weight: 500; }
.head .tags { margin-top: .75rem; }
.glance { display: grid; gap: .8rem; grid-template-columns: 1fr; margin-bottom: 1.1rem; }
@media (min-width: 640px) { .glance { grid-template-columns: 1fr 1fr; } }
.glance .card { margin: 0; padding: 1rem 1.15rem; }
.glance .card h4 { margin-top: 0; }
.glance ul { padding-left: 1.1rem; font-size: .93rem; margin: 0; }
.glance .antidote { border-color: var(--red-line); background: linear-gradient(160deg, var(--red-soft), var(--surface) 140%); color: var(--red); }
.glance .antidote h4 { color: var(--red); display: flex; align-items: center; gap: .35rem; }
.tabs { position: sticky; top: 72px; z-index: 10; display: flex; gap: .25rem; padding: 5px; margin: 0 0 1.1rem; overflow-x: auto; scrollbar-width: none; background: var(--glass); -webkit-backdrop-filter: saturate(1.5) blur(14px); backdrop-filter: saturate(1.5) blur(14px); border: 1px solid var(--border); border-radius: 15px; box-shadow: var(--shadow-1); }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: 0 0 auto; min-height: 40px; background: none; border: 0; padding: .45rem .95rem; color: var(--text-2); font-weight: 650; font-size: .88rem; border-radius: 11px; transition: color .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease); }
.tab:hover { color: var(--text); background: color-mix(in srgb, var(--surface-3) 70%, transparent); }
.tab.active { color: var(--on-primary); background: var(--primary); box-shadow: var(--shadow-primary); }
.method { position: relative; padding-left: 1.3rem; border-left: 0; overflow: hidden; }
.method.unavailable::before { background: var(--border-strong); }
.method.unavailable { opacity: .62; }
.method .mtitle { display: flex; gap: .75rem; align-items: flex-start; }
.method .num { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 10px; background: linear-gradient(140deg, var(--hero-b), var(--hero-c)); color: #fff; font: 800 .88rem var(--sans); display: grid; place-items: center; margin-top: .05rem; box-shadow: var(--shadow-primary); }
.method.unavailable .num { background: var(--surface-3); color: var(--muted); box-shadow: none; }
.method .best { color: var(--text-2); font-size: .92rem; margin: .15rem 0 .6rem; }
.method ol { list-style: none; padding: 0; counter-reset: step; }
.method ol li { position: relative; padding-left: 2.1rem; margin-bottom: .6rem; counter-increment: step; }
.method ol li::before { content: counter(step); position: absolute; left: 0; top: .12rem; width: 23px; height: 23px; border-radius: 8px; background: var(--primary-soft); color: var(--primary-ink); font: 800 .72rem/23px var(--sans); text-align: center; }
.method .needs { margin-bottom: .2rem; }

/* ---------- calculators ---------- */
.calc-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .calc-grid { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; } .calc-grid aside { position: sticky; top: 140px; } }
.field { display: flex; flex-direction: column; gap: .35rem; margin-bottom: .9rem; }
.field label { font-size: .8rem; font-weight: 700; color: var(--text-2); letter-spacing: -.005em; }
.field input, .field select { min-height: 48px; padding: .55rem .85rem; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--surface); font-size: 1.02rem; font-weight: 500; transition: border-color .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease); }
.field input:hover, .field select:hover { border-color: color-mix(in srgb, var(--primary) 35%, var(--border-strong)); }
.field input:focus, .field select:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 4px var(--ring); }
.inline { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.result { position: relative; overflow: hidden; background: linear-gradient(150deg, var(--primary-soft), color-mix(in srgb, var(--primary-soft) 35%, var(--surface))); color: var(--primary-ink); border-radius: var(--radius); padding: 1.15rem 1.25rem; margin-top: .5rem; border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent); }
.result::after { content: ""; position: absolute; right: -40px; top: -40px; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--primary) 16%, transparent), transparent 70%); pointer-events: none; }
.result .big { font-family: var(--sans); font-size: 2.3rem; font-weight: 800; line-height: 1.02; letter-spacing: -.035em; }
.result .sub { font-size: .92rem; margin-top: .45rem; color: color-mix(in srgb, var(--primary-ink) 85%, var(--text)); }
.result .warn { display: flex; gap: .4rem; margin-top: .55rem; font-weight: 650; color: var(--amber); }
.result table { width: 100%; border-collapse: collapse; margin-top: .7rem; font-size: .9rem; }
.result th, .result td { padding: .35rem .35rem; text-align: left; border-top: 1px solid color-mix(in srgb, var(--primary) 18%, transparent); }
.result th { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; }
.toggle { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .7rem 0; min-height: 52px; border-bottom: 1px solid var(--border); cursor: pointer; }
.toggle:last-child { border-bottom: 0; }
.switch { position: relative; width: 50px; height: 30px; flex: 0 0 auto; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch span { position: absolute; inset: 0; background: var(--border-strong); border-radius: 999px; transition: background .22s var(--ease); }
.switch span::before { content: ""; position: absolute; width: 24px; height: 24px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .22s var(--ease); box-shadow: 0 2px 5px rgba(0,0,0,.25); }
.switch input:checked + span { background: var(--primary); }
.switch input:checked + span::before { transform: translateX(20px); }
.switch input:focus-visible + span { outline: 3px solid var(--ring); outline-offset: 2px; }
.seg { display: inline-flex; background: var(--surface-3); border: 1px solid var(--border); border-radius: 13px; padding: 4px; gap: 3px; }
.seg button, .seg a { white-space: nowrap; min-height: 38px; padding: .3rem .95rem; border: 0; border-radius: 10px; background: transparent; color: var(--text-2); font-weight: 650; font-size: .87rem; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; transition: background .18s var(--ease), color .18s var(--ease), box-shadow .18s var(--ease); }
.seg button:hover { color: var(--text); }
.seg button.active { background: var(--surface); color: var(--primary-ink); box-shadow: var(--shadow-1), 0 0 0 1px var(--border); }

/* ---------- techniques ---------- */
.tech { counter-reset: tech; display: grid; gap: .85rem; }
@media (min-width: 760px) { .tech { grid-template-columns: 1fr 1fr; } }
.tech .card { display: grid; grid-template-columns: 48px 1fr; gap: .95rem; margin: 0; }
.tech .card::before { counter-increment: tech; content: counter(tech, decimal-leading-zero); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; font-family: var(--sans); font-size: 1rem; font-weight: 800; color: var(--primary-ink); background: var(--primary-soft); }

/* ---------- print ---------- */
@media print {
  .topbar, .bottomnav, .notice, .tabs, .index, .btn, .back { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .card { box-shadow: none; break-inside: avoid; }
  .layout { padding: 0; max-width: none; }
  .method.unavailable { opacity: 1; }
}

/* ---------- local setting ---------- */
.setting-chip { display: inline-flex; align-items: center; gap: .4rem; margin: .8rem 0 0; padding: .35rem .7rem .35rem .6rem; border-radius: 999px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28); color: var(--hero-text); text-decoration: none; font-size: .8rem; font-weight: 600; max-width: 100%; }
.setting-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card.local { border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); background: linear-gradient(180deg, var(--primary-soft), var(--surface) 55%); }
.card.local h4:first-child { display: flex; align-items: center; gap: .35rem; color: var(--primary-ink); }
.tech.proc .card::before { content: counter(tech); }
.field textarea { min-height: 84px; padding: .6rem .8rem; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--surface); font: inherit; color: inherit; resize: vertical; }
.field textarea:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 4px var(--ring); }

/* ---------- community ---------- */
.toast { position: fixed; left: 50%; bottom: 76px; transform: translateX(-50%); z-index: 60; background: var(--text); color: var(--bg); padding: .65rem 1.1rem; border-radius: 999px; font-size: .9rem; font-weight: 600; box-shadow: var(--shadow-2); max-width: 90vw; text-align: center; }
.toast.error { background: var(--red); color: var(--on-red); }
@media (min-width: 760px) { .toast { bottom: 24px; } }
.card.verified { border-color: color-mix(in srgb, var(--green) 45%, var(--border)); background: linear-gradient(180deg, var(--green-soft), var(--surface) 60%); }
.card.verified > h4:first-child { display: flex; align-items: center; gap: .35rem; color: var(--green); }
.omethod { border-top: 1px solid var(--border); padding-top: .8rem; margin-top: .8rem; }
.omethod:first-of-type { border-top: 0; padding-top: 0; }
.omethod h3 { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.omethod .best { color: var(--text-2); font-size: .92rem; margin: .1rem 0 .5rem; }
.omethod-row { display: flex; gap: .75rem; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: .8rem 1rem; }
.notes-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.note-compose { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .8rem; margin-bottom: 1rem; }
.note-compose textarea { width: 100%; border: 1px solid var(--border-strong); border-radius: 10px; padding: .6rem .75rem; background: var(--surface); font: inherit; color: inherit; resize: vertical; margin-bottom: .55rem; }
.note-compose textarea:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 4px var(--ring); }
.note { border-top: 1px solid var(--border); padding: .9rem 0 .3rem; }
.note:first-of-type { border-top: 0; }
article.card.note { border: 1px solid var(--border); padding: 1rem 1.15rem; }
.note-top { display: flex; flex-wrap: wrap; gap: .35rem .75rem; align-items: baseline; justify-content: space-between; margin-bottom: .4rem; }
.note-top .who { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.note-top .where { display: block; width: 100%; font-size: .8rem; color: var(--muted); }
.note-body { font-size: .95rem; white-space: pre-wrap; }
.note-actions { display: flex; flex-wrap: wrap; gap: .3rem .5rem; margin-top: .55rem; align-items: center; }
.linkbtn { display: inline-flex; align-items: center; gap: .3rem; min-height: 36px; padding: .25rem .6rem; border: 1px solid transparent; border-radius: 8px; background: none; color: var(--muted); font-size: .82rem; font-weight: 600; }
.linkbtn:hover { background: var(--surface-2); color: var(--text); }
.linkbtn.on { background: var(--green-soft); color: var(--green); }
.linkbtn.danger:hover { background: var(--red-soft); color: var(--red); }
.linkbtn .icon { width: 15px; height: 15px; }
.auth-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .auth-grid { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; } }
.avatar { width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(135deg, var(--hero-a), var(--hero-b)); color: #fff; display: grid; place-items: center; font: 700 1.2rem var(--serif); }
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; margin-bottom: 1rem; }
.stat { text-align: center; padding: 1rem .5rem; margin: 0; }
.stat b { display: block; font-family: var(--serif); font-size: 1.8rem; color: var(--primary-ink); line-height: 1; }
.stat span { font-size: .78rem; color: var(--muted); }
.citywrap { display: flex; flex-wrap: wrap; gap: .45rem; }
.citychip { font-size: .82rem; padding: .3rem .75rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); }
#acct { text-decoration: none; }

/* ---------- ward filter ---------- */
.filterbar { display: flex; align-items: center; gap: .6rem; margin: .2rem 0 .7rem; flex-wrap: wrap; }
.filterbar .seg button .icon { width: 16px; height: 16px; }
@media (max-width: 480px) {
  .filterbar { width: 100%; }
  .filterbar .seg { width: 100%; }
  .filterbar .seg button { flex: 1; justify-content: center; padding: .3rem .5rem; font-size: .84rem; }
  .filterbar .seg button .icon { display: none; }
}
.cats button b { font-weight: 700; opacity: .55; margin-left: .15rem; font-size: .78rem; }
.cats button.active b { opacity: .8; }
.section-label { flex-wrap: wrap; gap: .25rem 1rem; }
.section-label .note { font-size: .78rem; color: var(--muted); font-weight: 400; text-transform: none; letter-spacing: 0; }
.chip.ward { text-decoration: none; background: var(--surface-3); color: var(--text-2); }
.chip.ward:hover { background: var(--primary-soft); color: var(--primary-ink); }

/* ---------- clinical cases ---------- */
.case-item .case-sum { font-size: .86rem; color: var(--text-2); margin: .1rem 0 .2rem; }
.case-item .meta .chip { font-size: .72rem; padding: .1rem .5rem; }
.role-block > h4 { margin-top: 0; }
.case-drugs { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
@media (min-width: 760px) { .case-drugs { grid-template-columns: 1fr 1fr; } }
.cd { display: block; text-decoration: none; color: inherit; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .7rem .85rem; box-shadow: var(--shadow-1); transition: border-color .15s, transform .15s; }
.cd:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.cd-name { display: flex; align-items: center; justify-content: space-between; gap: .4rem; font-weight: 700; font-size: .97rem; }
.cd-name .icon { color: var(--muted); width: 16px; height: 16px; }
.cd-note { display: block; font-size: .86rem; color: var(--text-2); margin-top: .2rem; }
.cd-meta { display: block; font-size: .76rem; color: var(--muted); margin-top: .3rem; }
.r-avoid .cd { background: var(--red-soft); border-color: var(--red-line); }
.r-avoid .cd-name, .r-avoid .cd-note { color: var(--red); }
.chip.case { text-decoration: none; background: var(--surface-3); color: var(--text-2); }
.chip.case b { font-weight: 700; opacity: .7; font-size: .72rem; }
.chip.case:hover { background: var(--primary-soft); color: var(--primary-ink); }
.chip.case.r-avoid { background: var(--red-soft); color: var(--red); }
.book-refs h4 { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; color: var(--primary-ink); text-transform: none; letter-spacing: 0; font-size: .95rem; font-family: var(--serif); }
.book-refs ul { font-size: .93rem; margin: 0; }

/* ================= bedside features ================= */
.ok-text { color: var(--green); } .bad-text { color: var(--red); } .warn-text { color: var(--amber); }
.ok-text .icon, .bad-text .icon, .warn-text .icon { width: 1em; height: 1em; }

/* patient chip + dialog */
.patient-chip { display: inline-flex; align-items: center; gap: .35rem; min-height: 40px; padding: .35rem .75rem; border-radius: 999px; border: 1px dashed var(--border-strong); background: var(--surface); color: var(--text-2); font-size: .82rem; font-weight: 600; white-space: nowrap; transition: background .15s, border-color .15s; }
.patient-chip:hover { border-color: var(--primary); color: var(--text); }
.patient-chip.on { border-style: solid; border-color: var(--primary); background: var(--primary-soft); color: var(--primary-ink); }
.patient-chip .icon { width: 17px; height: 17px; }
.dialog { border: 1px solid var(--border); border-radius: 18px; padding: 0; background: var(--surface); color: var(--text); box-shadow: var(--shadow-2); width: min(460px, calc(100vw - 2rem)); }
.dialog::backdrop { background: rgba(10, 20, 25, .45); backdrop-filter: blur(2px); }
.pd { padding: 1.2rem 1.25rem; }
@media (max-width: 480px) { #theme-label, #acct-label { display: none; } .theme { padding: .35rem .55rem; } }

/* nav extras */
.nav-emerg { color: var(--red) !important; }
.nav-emerg.active { background: var(--red-soft) !important; color: var(--red) !important; }
.due-badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: .3rem; border-radius: 999px; background: var(--red); color: var(--on-red); font-size: .68rem; font-weight: 800; line-height: 1; }
.bottomnav a { position: relative; }
.bottomnav .due-badge { position: absolute; top: 4px; left: calc(50% + 6px); margin: 0; }

/* patient dose card */
.pdose { border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); background: linear-gradient(135deg, var(--primary-soft), var(--surface) 70%); }
.pdose h4 { display: flex; align-items: center; gap: .35rem; color: var(--primary-ink); text-transform: none; letter-spacing: 0; font-size: .95rem; }
.pd-big { font-family: var(--serif); font-size: 1.9rem; font-weight: 700; color: var(--primary-ink); line-height: 1.1; margin-top: .45rem; }
.pd-unit { font-family: var(--sans); font-size: .95rem; font-weight: 600; color: var(--text-2); }
.pd-sub { font-size: .88rem; color: var(--text-2); margin-top: .3rem; }
.empty-pdose { background: var(--surface); border-style: dashed; }
.cd-dose { display: inline-flex; align-items: center; gap: .25rem; margin-top: .35rem; font-size: .8rem; font-weight: 700; color: var(--primary-ink); background: var(--primary-soft); padding: .15rem .5rem; border-radius: 6px; }
.cd-dose .icon { width: 13px; height: 13px; }
.sched-links, .case-tools { margin: -.2rem 0 1rem; }

/* favourites / recent / search */
.star.on { color: var(--amber); border-color: var(--amber-line); background: var(--amber-soft); }
.star.on .icon { fill: currentColor; }
.shortcuts { display: grid; gap: .45rem; margin: 0 0 .9rem; }
.sc-row { display: flex; align-items: center; gap: .6rem; overflow-x: auto; scrollbar-width: none; }
.sc-row::-webkit-scrollbar { display: none; }
.sc-label { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--muted); }
.sc-label .icon { width: 14px; height: 14px; }
.sc-chips { display: flex; gap: .4rem; }
.sc-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .35rem; min-height: 34px; padding: .25rem .75rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); text-decoration: none; color: var(--text); font-size: .85rem; font-weight: 600; white-space: nowrap; }
.sc-chip:hover { border-color: var(--primary); }
.sc-kind { font-size: .62rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 800; }
.also { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: -.2rem 0 .7rem; }

/* alternatives */
.alt-card summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: .4rem; }
.alt-card summary::-webkit-details-marker { display: none; }
.alt-card h4 { text-transform: none; letter-spacing: 0; font-size: .95rem; color: var(--text); }
.alt-row { border-top: 1px solid var(--border); padding: .6rem 0 .2rem; }
.alt-row:first-of-type { margin-top: .6rem; }
.alt-item { font-size: .9rem; margin: .25rem 0; }

/* emergency card */
.resus-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; }
.resus-head h1 { display: flex; align-items: center; gap: .4rem; color: var(--red); }
.resus-input .field input { font-size: 1.4rem; font-weight: 700; }
.rs-banner { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1rem; padding: .7rem 1rem; margin-bottom: .8rem; border-radius: var(--radius); background: var(--red-soft); color: var(--red); border: 1px solid var(--red-line); }
.rs-w { font-family: var(--serif); font-size: 1.8rem; font-weight: 800; }
.rs-extra { padding: .6rem 1rem; margin-bottom: .8rem; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border); font-size: .92rem; }
.rs-group h3 { margin-bottom: .4rem; }
.rs-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.rs-table th { text-align: left; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: .4rem .5rem; border-bottom: 2px solid var(--border); }
.rs-table td { padding: .55rem .5rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.rs-table tr:last-child td { border-bottom: 0; }
.rs-drug a { font-weight: 700; color: var(--text); text-decoration: none; }
.rs-drug a:hover { color: var(--primary-ink); text-decoration: underline; }
.rs-dose b { font-size: 1.08rem; color: var(--text); white-space: nowrap; }
.rs-vol { font-weight: 800; color: var(--primary-ink); font-size: 1rem; }
.rs-ref { margin-top: .25rem; font-size: .72rem; }
@media (max-width: 640px) { .rs-table thead { display: none; } .rs-table tr { display: grid; grid-template-columns: 1fr auto; gap: .2rem .6rem; padding: .55rem 0; border-bottom: 1px solid var(--border); } .rs-table td { border: 0; padding: 0; } .rs-table td:nth-child(3), .rs-table td:nth-child(4) { grid-column: 1 / -1; } .rs-dose { text-align: right; } }

/* drip guide */
.drip-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .drip-grid { grid-template-columns: 1fr 1fr; align-items: start; } }
.drip-stage { display: flex; align-items: center; gap: 1.2rem; margin: 1rem 0; }
.chamber { position: relative; width: 70px; height: 130px; border: 3px solid var(--border-strong); border-radius: 16px 16px 26px 26px; background: linear-gradient(180deg, var(--surface), var(--surface-2)); overflow: hidden; flex: 0 0 auto; }
.chamber::before { content: ""; position: absolute; top: 0; left: 50%; width: 10px; height: 14px; margin-left: -5px; background: var(--border-strong); border-radius: 0 0 4px 4px; }
.drop { position: absolute; top: 14px; left: 50%; width: 14px; height: 18px; margin-left: -7px; background: var(--primary); border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; opacity: 0; }
.drop.fall { animation: dropfall .55s cubic-bezier(.5, 0, 1, 1); }
@keyframes dropfall { 0% { transform: translateY(0) scale(.6); opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(78px) scale(1); opacity: 0; } }
.pool { position: absolute; left: 0; right: 0; bottom: 0; height: 26px; background: color-mix(in srgb, var(--primary) 35%, transparent); }
.drip-readout .big { font-family: var(--serif); font-size: 2.3rem; font-weight: 800; color: var(--primary-ink); line-height: 1; }
.toggle-inline { display: inline-flex; align-items: center; gap: .35rem; font-size: .88rem; font-weight: 600; color: var(--text-2); min-height: 44px; cursor: pointer; }
.tapper { width: 100%; min-height: 130px; border-radius: 18px; border: 2px dashed var(--primary); background: var(--primary-soft); color: var(--primary-ink); font-size: 1.25rem; font-weight: 800; touch-action: manipulation; user-select: none; -webkit-user-select: none; margin: .4rem 0 .6rem; }
.tapper.hit { animation: tap .18s ease-out; }
@keyframes tap { from { transform: scale(.97); background: color-mix(in srgb, var(--primary) 30%, var(--primary-soft)); } to { transform: scale(1); } }
.tapout { min-height: 3.2rem; margin-bottom: .5rem; }
.tapout .big { font-family: var(--serif); font-size: 2rem; font-weight: 800; line-height: 1.1; }

/* schedules */
.sched-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.sched-next { text-align: right; display: flex; flex-direction: column; }
.sched-when { font-family: var(--serif); font-size: 1.35rem; font-weight: 800; }
.sched.overdue .sched-when { color: var(--red); } .sched.due .sched-when { color: var(--amber); }
.sched-now { margin: .8rem 0 .4rem; padding: .8rem .9rem; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border); }
.checks { display: grid; gap: .3rem; margin: .6rem 0; }
.checks label { display: flex; gap: .5rem; align-items: flex-start; font-size: .9rem; min-height: 32px; cursor: pointer; }
.checks input { width: 20px; height: 20px; margin-top: 1px; flex: 0 0 auto; }
.sched-table tr.given td { color: var(--green); } .sched-table tr.withheld td { color: var(--amber); } .sched-table tr.late td { color: var(--red); font-weight: 600; }
.sched details summary { cursor: pointer; margin-top: .4rem; }

/* never mix */
.compat h3 { font-size: 1.02rem; }

/* tools hub */
.tools-grid { display: grid; gap: .8rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .tools-grid { grid-template-columns: 1fr 1fr; } }
.tool { display: flex; gap: .9rem; align-items: flex-start; text-decoration: none; color: inherit; margin: 0; transition: border-color .15s, transform .15s, box-shadow .15s; }
.tool:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: var(--shadow-2); }
.tool-ic { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary-ink); }
.tool-ic .icon { width: 24px; height: 24px; }
.tool.emergency .tool-ic { background: var(--red-soft); color: var(--red); }

@media print {
  .patient-chip, .resus-input, #rs-print, .case-tools, .sched-links, .alt-card, .shortcuts { display: none !important; }
  .rs-banner { border: 2px solid #000; color: #000; background: #fff; }
  body.print-sched .card:not(.print-me), body.print-sched h1, body.print-sched p.text-2 { display: none !important; }
  body.print-sched .print-me details { display: block; } body.print-sched .print-me details > * { display: block; }
}

/* header fit: nav scrolls inside itself; controls never pushed off-screen */
.topbar-inner { min-width: 0; }
.brand { flex: 0 0 auto; }
.topnav { flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; margin-left: .6rem; }
.topnav::-webkit-scrollbar { display: none; }
.topnav a { flex: 0 0 auto; }
.tools { flex: 0 0 auto; }
@media (max-width: 1180px) {
  .topnav a .icon { display: none; }
  .topnav a { padding: .45rem .6rem; }
  #theme-label, #acct-label, #status-text { display: none; }
  .theme, .status { padding: .35rem .55rem; }
}
@media (max-width: 900px) { .status { display: none; } }

/* two-column form rows: let long selects shrink instead of squeezing their neighbour */
.inline { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.field select, .field input { width: 100%; min-width: 0; }

/* ---------- Amharic interface ---------- */
html[lang="am"] { --sans: -apple-system, BlinkMacSystemFont, "Noto Sans Ethiopic", "Abyssinica SIL", Kefa, Nyala, Ebrima, "Segoe UI", Roboto, "Noto Sans", Helvetica, Arial, sans-serif;
  --serif: "Noto Serif Ethiopic", "Noto Sans Ethiopic", "Abyssinica SIL", Kefa, Nyala, Ebrima, "Iowan Old Style", Georgia, serif; }
html[lang="am"] h4 { text-transform: none; letter-spacing: .02em; font-size: .8rem; }
html[lang="am"] body { line-height: 1.65; }
[lang="am"] { font-family: var(--sans); }
[data-no-i18n][lang="en"] { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Helvetica, Arial, sans-serif; }
.hero-chips { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .8rem; }
.hero-chips .setting-chip { margin: 0; }
.lang-seg button[lang="am"] { font-family: "Noto Sans Ethiopic", "Abyssinica SIL", Kefa, Nyala, Ebrima, var(--sans); }
.hero-lang { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.26); }
.hero-lang button { color: var(--hero-text); font-size: .78rem; padding: .3rem .7rem; min-height: 32px; }
.hero-lang button.active { background: rgba(255,255,255,.92); color: #123; }
.lang-note { font-size: .82rem; color: var(--muted); background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: .45rem .75rem; margin: 0 0 .9rem; }
@media print { .lang-note, .hero-lang { display: none !important; } }
.card .seg { flex-wrap: wrap; max-width: 100%; }
html[lang="am"] .seg button { white-space: normal; }

/* ---------- safety, interactions, newborn, double check ---------- */
.safety-grid { display: grid; gap: 0 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .safety-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.safety-grid h3 { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; font-size: 1.05rem; }
.bands { list-style: none; padding: 0; margin: 0; display: grid; gap: .3rem; font-size: .88rem; }
.bands li { padding: .4rem .6rem; border-radius: 8px; background: var(--surface-2); }
.bands li.on, .klist li.on { background: var(--amber-soft); outline: 2px solid var(--amber-line); }
.klist { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; }
.klist li { padding: .55rem .7rem; border-radius: 10px; background: var(--surface-2); }
.ix { background: var(--surface-2); border-radius: 10px; padding: .65rem .8rem; margin: .5rem 0; }
.pdose.neo { border-color: var(--primary); }
.dose-actions { margin: -.4rem 0 1rem; }
.dcheck { border: 1px dashed var(--red-line); background: color-mix(in srgb, var(--red-soft) 40%, var(--surface)); }
.callout.ok-callout { background: var(--green-soft); border-color: transparent; color: var(--green); }
.dc-field label { color: var(--red); font-weight: 700; }
.inline3 { display: grid; gap: 0 .8rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 560px) { .inline3 { grid-template-columns: minmax(0, 1fr); } }
.pd-more { margin-top: .7rem; } .pd-more summary { cursor: pointer; color: var(--primary-ink); font-weight: 600; margin-bottom: .5rem; }

/* ---------- quiz ---------- */
.quiz-bar { display: flex; justify-content: space-between; font-size: .85rem; color: var(--muted); margin: 0 0 .5rem; }
.quiz-q h3 { font-family: var(--sans); font-size: 1.12rem; line-height: 1.45; margin: .3rem 0 .9rem; }
.quiz-opts { display: grid; gap: .5rem; }
@media (min-width: 640px) { .quiz-opts { grid-template-columns: 1fr 1fr; } }
.quiz-opt { text-align: left; min-height: 52px; padding: .7rem .9rem; border-radius: 12px; border: 1.5px solid var(--border); background: var(--surface); color: var(--text); font-size: .98rem; font-weight: 600; cursor: pointer; }
.quiz-opt:hover:not(:disabled) { border-color: var(--primary); }
.quiz-opt.right { border-color: var(--green); background: var(--green-soft); color: var(--green); }
.quiz-opt.wrong { border-color: var(--red); background: var(--red-soft); color: var(--red); }
.quiz-opt:disabled { cursor: default; }
.quiz-end { text-align: center; } .quiz-end .big { font-family: var(--serif); font-size: 3rem; color: var(--primary-ink); }
.quiz-end .row { justify-content: center; }
button.card.tool { text-align: left; font: inherit; color: inherit; cursor: pointer; width: 100%; }

/* ---------- clinical sign-off & stock ---------- */
.rv-stats { grid-template-columns: repeat(4, 1fr); }
.rv-stats a { text-decoration: none; color: inherit; }
@media (max-width: 640px) { .rv-stats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .rv-detail { grid-template-columns: 290px minmax(0, 1fr); } }
.rv-list { padding: .8rem; margin: 0; }
.rv-list input { width: 100%; margin-bottom: .5rem; }
.rv-list ul { list-style: none; margin: .6rem 0 0; padding: 0; max-height: 60vh; overflow: auto; }
.rv-list li a { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .4rem .55rem; border-radius: 8px; text-decoration: none; color: var(--text-2); font-size: .9rem; }
.rv-list li a.active, .rv-list li a:hover { background: var(--primary-soft); color: var(--primary-ink); }
.rv-f { flex-wrap: wrap; } .rv-f a { padding: .3rem .55rem; border-radius: 9px; font-size: .78rem; font-weight: 600; text-decoration: none; color: var(--text-2); }
.rv-f a.active { background: var(--surface); color: var(--primary-ink); box-shadow: var(--shadow-1); }
.dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; background: var(--surface-3); border: 1px solid var(--border); }
.dot.approved { background: var(--green); border-color: var(--green); } .dot.stale { background: var(--amber); border-color: var(--amber); } .dot.changes { background: var(--red); border-color: var(--red); }
.rv-checks label { display: flex; gap: .5rem; align-items: flex-start; padding: .35rem 0; }
.rv-hist, .stock-list { list-style: none; padding: 0; margin: .4rem 0 0; display: grid; gap: .55rem; }
.rv-hist li, .stock-list li { padding: .55rem .7rem; background: var(--surface-2); border-radius: 10px; }
.stock-form { margin-top: .8rem; border-top: 1px solid var(--border); padding-top: .8rem; }

/* ---------- wall charts ---------- */
.sheet { background: #fff; color: #111; border: 1px solid var(--border); border-radius: var(--radius); padding: 1.4rem 1.5rem; }
.sheet a { color: inherit; }
.sheet-title { font-size: 1.6rem; margin: 0 0 .6rem; color: #0a3d45; }
.sheet h3 { font-size: 1.1rem; margin: 1rem 0 .4rem; color: #0a3d45; }
.sheet-sum { font-size: 1.02rem; margin: 0 0 .8rem; }
.chart-table { width: 100%; border-collapse: collapse; font-size: 1rem; margin: .3rem 0 .6rem; }
.chart-table th, .chart-table td { border: 1px solid #b9c7cc; padding: .4rem .35rem; text-align: center; }
.chart-table thead th, .chart-table tbody th { background: #e6f2f4; font-size: .85rem; }
.chart-table td b { font-size: 1.12rem; }
.chart-table .muted { color: #5f7482; font-size: .8rem; }
.sheet-list { font-size: .95rem; }
.sheet-cols { display: grid; gap: .8rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .sheet-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); } }
.sheet-box { border: 2px solid #0f7c8c; border-radius: 10px; padding: .6rem .9rem; font-size: .95rem; }
.sheet-box.red { border-color: #b3261e; } .sheet-box.red h3 { color: #b3261e; }
.sheet-box h3 { margin-top: .2rem; }
.sheet-role { border: 1px solid #0f7c8c; border-radius: 8px; padding: .2rem .8rem; margin: .5rem 0; font-size: .95rem; }
.sheet-role.r-avoid { border-left-color: #b3261e; } .sheet-role.r-alt { border-left-color: #8a5a00; } .sheet-role ul { margin: .2rem 0; }
.ward-cards { columns: 2 280px; column-gap: .8rem; }
.wcard { break-inside: avoid; border: 1.5px solid #9fb4ba; border-radius: 10px; padding: .55rem .7rem; margin: 0 0 .7rem; font-size: .82rem; line-height: 1.4; }
.wcard ul { margin: .25rem 0; padding-left: 1rem; }
.wc-name { font-weight: 700; font-size: .98rem; } .wc-cls { font-weight: 400; color: #5b6c72; font-size: .78rem; }
.wc-pres, .wc-flags { color: #4a5a60; } .wc-anti { color: #8e1d16; }
.sheet-foot { margin-top: 1rem; font-size: .75rem; color: #5b6c72; border-top: 1px solid #ccd6d9; padding-top: .4rem; }
@media print {
  body.print-sheet .layout > *:not(#app), body.print-sheet #app > *:not(.sheet), body.print-sheet .lang-note { display: none !important; }
  body.print-sheet .sheet { border: 0; padding: 0; }
  body.print-sheet .chart-table td b { font-size: 13pt; }
  .dose-actions, .dcheck, .stock, #rv-history { display: none !important; }
}

/* author credit */
.credit { text-align: center; font-size: .8rem; color: var(--muted); padding: 1.5rem 1rem .5rem; }
.credit a { color: var(--muted); }
.credit-name { font-weight: 700; color: var(--text-2); }
@media print { .credit { display: none !important; } }

.ciwa { display: grid; gap: 0 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .ciwa { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.ciwa-item label { font-size: .86rem; }

/* ==========================================================================
   Design system v2 — component refinements (kept last so they win)
   ========================================================================== */
/* header controls */
.patient-chip { min-height: 40px; padding: .35rem .8rem; border-radius: 12px; border: 1px dashed var(--border-strong); background: var(--surface); box-shadow: var(--shadow-1); font-weight: 650; transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease); }
.patient-chip.on { border: 1px solid color-mix(in srgb, var(--primary) 45%, transparent); background: var(--primary-soft); color: var(--primary-ink); }
.nav-emerg { color: var(--red) !important; }
.topnav a.nav-emerg.active { background: var(--red-soft) !important; box-shadow: 0 0 0 1px var(--red-line) !important; }
.bottomnav a.nav-emerg.active { background: var(--red-soft) !important; }
.due-badge { box-shadow: 0 0 0 2px var(--surface); }

/* hero extras */
.setting-chip { min-height: 36px; padding: .3rem .75rem .3rem .6rem; background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.22); font-weight: 650; transition: background .18s var(--ease); }
.setting-chip:hover { background: rgba(255,255,255,.18); }
.hero-lang { background: rgba(0,0,0,.14); border-color: rgba(255,255,255,.18); }
.hero-lang button { min-height: 32px; }
.hero-lang button.active { background: #fff; color: var(--hero-a); box-shadow: 0 2px 8px rgba(0,0,0,.2); }

/* shortcuts */
.sc-chip { min-height: 36px; border-radius: 11px; box-shadow: var(--shadow-1); transition: border-color .18s var(--ease), transform .18s var(--ease); }
.sc-chip:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); }
.sc-kind { color: var(--primary); }

/* tools hub */
.tools-grid { gap: .85rem; }
@media (min-width: 1024px) { .tools-grid { grid-template-columns: 1fr 1fr 1fr; } }
.tool { position: relative; overflow: hidden; padding: 1.1rem 1.15rem; transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); }
.tool::after { content: ""; position: absolute; right: -50px; bottom: -50px; width: 130px; height: 130px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--primary) 10%, transparent), transparent 70%); pointer-events: none; transition: transform .3s var(--ease); }
.tool:hover { border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); transform: translateY(-3px); box-shadow: var(--shadow-3); }
.tool:hover::after { transform: scale(1.25); }
.tool-ic { width: 48px; height: 48px; border-radius: 14px; background: linear-gradient(140deg, var(--hero-b), var(--hero-c)); color: #fff; box-shadow: var(--shadow-primary); }
.tool.emergency .tool-ic { background: linear-gradient(140deg, #e0483e, #b42318); color: #fff; box-shadow: 0 6px 18px -6px rgba(180,35,24,.55); }
.tool h3 { font-size: 1.02rem; }

/* dose cards */
.pdose { position: relative; overflow: hidden; border-color: color-mix(in srgb, var(--primary) 30%, var(--border)); background: linear-gradient(150deg, var(--primary-soft), var(--surface) 72%); }
.pdose::after { content: ""; position: absolute; right: -60px; top: -60px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--primary) 14%, transparent), transparent 70%); pointer-events: none; }
.pd-big { font-family: var(--sans); font-size: 2.1rem; font-weight: 800; letter-spacing: -.035em; }
.empty-pdose { background: var(--surface); border-style: dashed; }
.empty-pdose::after { display: none; }
.cd { border-radius: 14px; transition: border-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease); }
.cd:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.chip.ward, .chip.case { transition: background .18s var(--ease), color .18s var(--ease); }

/* dialogs & toast */
.dialog { border-radius: 22px; border-color: var(--border); box-shadow: var(--shadow-3); }
.dialog::backdrop { background: rgba(4, 16, 22, .5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.dialog[open] { animation: enter .22s var(--ease) both; }
.pd { padding: 1.35rem 1.4rem; }
.toast { bottom: calc(92px + env(safe-area-inset-bottom)); border-radius: 14px; padding: .7rem 1.15rem; box-shadow: var(--shadow-3); animation: enter .22s var(--ease) both; }
@media (min-width: 760px) { .toast { bottom: 28px; } }

/* stats, emergency, schedules */
.stat { box-shadow: var(--shadow-1); }
.stat b { font-family: var(--sans); font-weight: 800; letter-spacing: -.03em; font-size: 2rem; }
.resus-head h1 { letter-spacing: -.03em; }
.rs-banner { border-radius: 16px; }
.rs-w { font-family: var(--sans); letter-spacing: -.03em; }
.sched-when { font-family: var(--sans); letter-spacing: -.02em; }
.tapper { border-radius: 20px; transition: background .18s var(--ease); }
.drip-readout .big, .tapout .big, .quiz-end .big { font-family: var(--sans); letter-spacing: -.035em; }

/* safety & interactions */
.ix { border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); }
.bands li { border-radius: 10px; }
.quiz-opt { border-radius: 14px; transition: border-color .18s var(--ease), background .18s var(--ease), transform .18s var(--ease); }
.quiz-opt:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--shadow-1); }

/* community */
.avatar { background: linear-gradient(140deg, var(--hero-b), var(--hero-c)); font-family: var(--sans); box-shadow: var(--shadow-primary); }
.note-compose { border-radius: 14px; }
.citychip { box-shadow: var(--shadow-1); }

/* Amharic keeps its own script font but inherits the new scale */
html[lang="am"] { --sans: "Figtree", -apple-system, BlinkMacSystemFont, "Noto Sans Ethiopic", "Abyssinica SIL", Kefa, Nyala, Ebrima, "Segoe UI", Roboto, "Noto Sans", Helvetica, Arial, sans-serif; --serif: var(--sans); }
html[lang="am"] h1, html[lang="am"] h2, html[lang="am"] h3 { letter-spacing: 0; line-height: 1.3; }
html[lang="am"] .hero h1 { line-height: 1.25; }
[data-no-i18n][lang="en"] { font-family: var(--sans); }

/* credit footer */
.credit { padding: 2rem 1rem .5rem; }

/* touch devices: no hover lift */
@media (hover: none) { .drug-item:hover, .tool:hover, .cd:hover, .btn:hover, .quiz-opt:hover { transform: none; } }
@media (max-width: 420px) { .hero { padding: 1.3rem 1.05rem 1rem; border-radius: 22px; } .hero-eyebrow { font-size: .6rem; letter-spacing: .08em; padding: .24rem .6rem; } .hero-stats { gap: .3rem .8rem; } }

/* ---------- fluid full-width layout ---------- */
:root { --page-max: 1840px; --gutter: clamp(.75rem, 2.4vw, 2.5rem); }
.topbar-inner, .layout { max-width: var(--page-max); padding-left: var(--gutter); padding-right: var(--gutter); }
@media (min-width: 1440px) {
  .drug-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tools-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .case-drugs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .detail { grid-template-columns: 280px minmax(0, 1fr); gap: 2rem; }
  .glance { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tech { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .safety-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hero { padding: 2.4rem 2.4rem 1.8rem; }
  .hero h1 { font-size: 3.2rem; max-width: 20ch; }
  .hero p { font-size: 1.08rem; }
  .hero .searchbar { max-width: 900px; }
  .calc-grid { grid-template-columns: minmax(0, 1fr) 380px; }
}
@media (min-width: 1800px) {
  .drug-list { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .tools-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
/* long clinical text stays readable on very wide screens */
.method ol, .method ul, .kv, .card > p { max-width: 110ch; }

/* ---------- arranged drug list ---------- */
.listbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: -.2rem 0 .7rem; }
.sortseg button .icon { width: 15px; height: 15px; }
.drug-list .group-head { grid-column: 1 / -1; display: flex; align-items: center; gap: .55rem; margin: .9rem 0 .1rem; padding: 0 .15rem; list-style: none; scroll-margin-top: 90px; }
.drug-list .group-head:first-child { margin-top: 0; }
.gh-dot { width: 10px; height: 10px; border-radius: 4px; background: var(--cat, var(--primary)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cat, var(--primary)) 16%, transparent); }
.gh-label { font-size: 1.02rem; font-weight: 750; letter-spacing: -.015em; color: var(--text); }
.group-head b { font-size: .72rem; font-weight: 750; color: var(--muted); background: var(--surface-3); padding: .1rem .5rem; border-radius: 999px; }
.group-head::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--border), transparent); }
.drug-item .usage { display: inline-flex; align-items: center; gap: .25rem; font-size: .7rem; font-weight: 700; color: var(--green); background: var(--green-soft); padding: .12rem .5rem; border-radius: 999px; }
.drug-item .usage .icon { width: 12px; height: 12px; }
.azbar { position: sticky; top: 72px; z-index: 9; display: flex; flex-wrap: wrap; gap: .25rem; padding: .4rem; margin: 0 0 .8rem; background: var(--glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-1); }
.azbar a { min-width: 34px; min-height: 34px; display: grid; place-items: center; border-radius: 9px; font-weight: 750; font-size: .85rem; color: var(--primary-ink); text-decoration: none; transition: background .15s var(--ease); }
.azbar a:hover { background: var(--primary-soft); }
@media (max-width: 480px) { .listbar .seg { width: 100%; } .listbar .seg button { flex: 1; } .azbar a { min-width: 30px; } }
.filterbar .listbar { margin: 0 0 0 auto; }
@media (max-width: 760px) { .filterbar .listbar { margin: 0; width: 100%; } .filterbar .listbar .seg { width: 100%; } .filterbar .listbar .seg button { flex: 1; } }

/* ---------- hero photograph ---------- */
@keyframes heroZoom { from { transform: scale(1.07); } to { transform: scale(1); } }
.hero.has-media::before { display: none; }
.hero.has-media::after { display: none; }
.hero-media { z-index: -1; overflow: hidden; }
.hero-media img { display: block; width: 100%; height: 100%; object-fit: cover; animation: heroZoom 1.6s var(--ease) both; }
.hero-media::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
@media (min-width: 760px) {
  .hero.has-media { min-height: clamp(460px, 40vw, 600px); display: flex; flex-direction: column; justify-content: center; padding: 2.2rem 2.2rem 1.6rem; }
  .hero-media { position: absolute; inset: 0; }
  .hero-media img { object-position: 72% 28%; }
  .hero-media::after { background:
      linear-gradient(90deg, var(--hero-a) 0%, color-mix(in srgb, var(--hero-a) 94%, transparent) 26%, color-mix(in srgb, var(--hero-b) 62%, transparent) 46%, color-mix(in srgb, var(--hero-b) 10%, transparent) 66%, transparent 80%),
      linear-gradient(0deg, color-mix(in srgb, var(--hero-a) 78%, transparent) 0%, transparent 38%),
      linear-gradient(180deg, color-mix(in srgb, var(--hero-a) 35%, transparent) 0%, transparent 25%); }
  .hero.has-media h1, .hero.has-media p, .hero.has-media .hero-stats, .hero.has-media .searchbar, .hero.has-media .hero-chips { max-width: min(640px, 58%); }
  .hero.has-media h1 { text-shadow: 0 2px 24px rgba(0,0,0,.25); }
}
@media (min-width: 760px) and (max-width: 1100px) {
  .hero.has-media h1, .hero.has-media p, .hero.has-media .hero-stats, .hero.has-media .searchbar, .hero.has-media .hero-chips { max-width: 66%; }
  .hero-media::after { background: linear-gradient(90deg, var(--hero-a) 0%, color-mix(in srgb, var(--hero-a) 92%, transparent) 40%, color-mix(in srgb, var(--hero-b) 45%, transparent) 64%, transparent 88%), linear-gradient(0deg, color-mix(in srgb, var(--hero-a) 80%, transparent) 0%, transparent 40%); }
}
@media (max-width: 759px) {
  .hero.has-media { padding-top: 0; }
  .hero-media { position: relative; height: 250px; margin: 0 -1.35rem -3.2rem; }
  .hero-media img { object-position: 62% 22%; -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent 100%); mask-image: linear-gradient(180deg, #000 45%, transparent 100%); }
  .hero-media::after { background: linear-gradient(180deg, color-mix(in srgb, var(--hero-a) 30%, transparent) 0%, transparent 35%); }
  .hero.has-media .hero-eyebrow, .hero.has-media h1 { position: relative; }
  .hero.has-media h1 { text-shadow: 0 2px 18px rgba(0,0,0,.35); }
}
@media (max-width: 420px) { .hero-media { margin: 0 -1.05rem -3rem; height: 230px; } }
@media print { .hero-media { display: none; } }

.admin-stats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

/* ---------- pregnancy dating wheel ---------- */
.preg-grid { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .preg-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.preg-method { flex-wrap: wrap; }
.eth-date { display: grid; grid-template-columns: 80px minmax(0, 1fr) 100px; gap: .5rem; }
.eth-date select, .eth-date input { min-height: 48px; padding: .5rem .7rem; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--surface); font-size: 1rem; width: 100%; }
.field input[type="date"] { font-family: var(--sans); }
.preg-wheel { display: grid; place-items: center; padding: 1rem; background: radial-gradient(120% 100% at 50% 0%, var(--primary-soft), var(--surface) 70%); }
.wheel { width: 100%; max-width: 300px; height: auto; overflow: visible; }
.wheel .track { fill: none; stroke: var(--surface-3); stroke-width: 22; }
.wheel .t1, .wheel .t2, .wheel .t3 { fill: none; stroke-width: 22; stroke-linecap: butt; }
.wheel .t1 { stroke: color-mix(in srgb, #38bdf8 55%, var(--surface)); }
.wheel .t2 { stroke: color-mix(in srgb, #14b8a6 60%, var(--surface)); }
.wheel .t3 { stroke: color-mix(in srgb, #f59e0b 55%, var(--surface)); }
.wheel .progress { fill: none; stroke: var(--primary); stroke-width: 6; stroke-linecap: round; opacity: .9; }
.wheel .tick { stroke: var(--surface); stroke-width: 2; }
.wheel .tick-l { font: 700 10px var(--sans); fill: var(--muted); text-anchor: middle; }
.wheel .mdot { fill: var(--surface); stroke: var(--text-2); stroke-width: 2; }
.wheel .marker { fill: var(--primary); stroke: #fff; stroke-width: 3; }
.wheel .marker-halo { fill: color-mix(in srgb, var(--primary) 25%, transparent); animation: halo 2.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes halo { 50% { transform: scale(1.35); opacity: .45; } }
.wheel .w-big { font: 800 34px var(--sans); fill: var(--text); text-anchor: middle; letter-spacing: -1px; }
.wheel .w-small { font: 650 11px var(--sans); fill: var(--muted); text-anchor: middle; }
.wheel-legend { display: flex; gap: .8rem; justify-content: center; font-size: .75rem; font-weight: 650; color: var(--text-2); margin-top: .2rem; }
.wheel-legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: .3rem; vertical-align: -1px; }
.wheel-legend .t1::before { background: #38bdf8; } .wheel-legend .t2::before { background: #14b8a6; } .wheel-legend .t3::before { background: #f59e0b; }
.preg-summary { display: grid; gap: .8rem; grid-template-columns: minmax(0, 1fr); margin: 1rem 0; }
@media (min-width: 700px) { .preg-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ps-card { margin: 0; display: flex; flex-direction: column; gap: .15rem; }
.ps-l { font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 750; color: var(--muted); }
.ps-v { font-size: 2.2rem; font-weight: 800; letter-spacing: -.035em; line-height: 1.1; color: var(--text); font-variant-numeric: tabular-nums; }
.ps-v small { font-size: 1rem; font-weight: 700; color: var(--muted); margin: 0 .15rem 0 .05rem; }
.ps-v.ps-date { font-size: 1.35rem; letter-spacing: -.01em; }
.ps-s { font-size: .86rem; color: var(--text-2); }
.ps-ga { background: linear-gradient(150deg, var(--primary-soft), var(--surface) 75%); border-color: color-mix(in srgb, var(--primary) 30%, var(--border)); }
.ps-edd { background: linear-gradient(150deg, color-mix(in srgb, #f59e0b 14%, var(--surface)), var(--surface) 75%); }
.ms-table td { vertical-align: top; padding: .6rem .5rem; }
.ms-table td:first-child { width: 48%; font-weight: 600; }
.ms-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: .45rem; background: var(--border-strong); vertical-align: 1px; }
.ms-now .ms-dot { background: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 22%, transparent); }
.ms-now td { background: color-mix(in srgb, var(--primary-soft) 55%, transparent); }
.ms-past { opacity: .55; } .ms-past .ms-dot { background: var(--green); }
.dual { display: inline-flex; flex-direction: column; line-height: 1.25; }
.dual b { font-weight: 700; } .dual span { font-size: .8rem; color: var(--muted); }
.dual-to { display: inline-block; margin: 0 .5rem; font-size: .75rem; color: var(--muted); vertical-align: top; padding-top: .15rem; }
#pg-redate summary { cursor: pointer; list-style: none; } #pg-redate summary::-webkit-details-marker { display: none; }

/* ---------- ward board & handover ---------- */
.ward-namebar { display: flex; flex-wrap: wrap; gap: .8rem 1.2rem; align-items: center; padding: .9rem 1.1rem; }
.ward-stats { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.stat.st-bad b { color: var(--red); } .stat.st-warn b { color: var(--amber); }
.bed-grid { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .9rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .bed-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .bed-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1700px) { .bed-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.bed { position: relative; margin: 0; padding: 1rem 1.05rem .8rem 1.2rem; overflow: hidden; display: flex; flex-direction: column; gap: .5rem; }
.bed.unstable { border-color: var(--red-line); background: linear-gradient(160deg, color-mix(in srgb, var(--red-soft) 70%, var(--surface)), var(--surface) 55%); }
.bed-top { display: flex; align-items: center; gap: .7rem; }
.bed-no { min-width: 46px; height: 46px; padding: 0 .5rem; border-radius: 13px; display: grid; place-items: center; font-weight: 800; font-size: 1.15rem; letter-spacing: -.02em; color: #fff; background: linear-gradient(140deg, var(--hero-b), var(--hero-c)); box-shadow: var(--shadow-primary); }
.bed.unstable .bed-no { background: linear-gradient(140deg, #e0483e, #b42318); box-shadow: 0 6px 18px -6px rgba(180,35,24,.5); }
.bed.watch .bed-no { background: linear-gradient(140deg, #f59e0b, #b45309); box-shadow: 0 6px 18px -6px rgba(180,83,9,.45); }
.bed-who { display: flex; flex-direction: column; min-width: 0; flex: 1; } .bed-who b { font-size: 1.02rem; } .bed-who span { font-size: .8rem; color: var(--muted); }
.bed-dx { font-weight: 650; font-size: .95rem; }
.bed-allergy { font-size: .82rem; font-weight: 700; color: var(--red); }
.bed-dose, .bed-vitals { display: flex; gap: .4rem; align-items: flex-start; font-size: .85rem; padding: .45rem .6rem; border-radius: 10px; background: var(--surface-2); }
.bed-dose.soon { background: var(--amber-soft); color: var(--amber); } .bed-dose.late { background: var(--red-soft); color: var(--red); }
.bed-tasks { list-style: none; margin: 0; padding: 0; font-size: .87rem; } .bed-tasks li { margin: 0; } .bed-tasks label { display: flex; gap: .45rem; align-items: flex-start; min-height: 32px; cursor: pointer; }
.bed-tasks input { width: 18px; height: 18px; margin-top: 2px; }
.bed-actions { margin-top: auto; padding-top: .3rem; border-top: 1px solid var(--border); }
.empty-ward { text-align: center; padding: 2rem 1.2rem; } .empty-ward .text-2 { max-width: 56ch; margin: 0 auto 1rem; }
.acuity-seg button.active.acu-unstable { background: var(--red); color: var(--on-red); } .acuity-seg button.active.acu-watch { background: var(--amber); color: var(--on-amber); } .acuity-seg button.active.acu-stable { background: var(--green); color: #fff; }
.task-edit { list-style: none; margin: 0 0 .6rem; padding: 0; display: grid; gap: .3rem; }
.task-edit li { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .35rem .6rem; border-radius: 10px; background: var(--surface-2); }
.task-edit label { display: flex; gap: .45rem; align-items: center; }
.vit-grid { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
.ho-head { font-size: .95rem; margin: 0 0 .8rem; color: var(--text-2); }
.ho-bed { position: relative; overflow: hidden; padding-left: 1.3rem; }
.ho-title { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: .6rem; }
.ho-title .bed-no { min-width: 38px; height: 38px; font-size: .98rem; border-radius: 11px; }
.ho-row { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: .6rem; padding: .45rem 0; border-top: 1px solid var(--border); font-size: .92rem; }
.ho-row ul { margin: 0; padding-left: 1.1rem; }
.ho-k { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-weight: 800; font-size: .82rem; color: var(--primary-ink); background: var(--primary-soft); }
.ho-synth { cursor: pointer; align-items: center; } .ho-synth input { width: 18px; height: 18px; vertical-align: -3px; margin-right: .35rem; }
@media print {
  body.print-handover .layout > *:not(#app), body.print-handover .ho-sign, body.print-handover .resus-head .row, body.print-handover .lang-note { display: none !important; }
  body.print-handover .ho-bed { break-inside: avoid; box-shadow: none; border: 1px solid #999; }
  .preg-input .seg, #pg-print { display: none !important; }
}
.resus-head h1 { color: var(--text); }
.resus-head h1 .icon { color: var(--primary); }
.resus-head.emergency h1, .resus-head.emergency h1 .icon { color: var(--red); }

/* ---------- child growth ---------- */
.growth-chart { width: 100%; height: auto; background: var(--surface); border-radius: 12px; }
.growth-chart .grid { stroke: var(--border); stroke-width: 1; }
.growth-chart .ax { font: 600 10px var(--sans); fill: var(--muted); }
.growth-chart .ax-t { font: 700 11px var(--sans); fill: var(--text-2); }
.growth-chart .z { fill: none; stroke-width: 1.6; }
.growth-chart .z0 { stroke: var(--green); stroke-width: 2.2; }
.growth-chart .zm2, .growth-chart .z2 { stroke: var(--amber); stroke-dasharray: 5 4; }
.growth-chart .zm3, .growth-chart .z3 { stroke: var(--red); stroke-dasharray: 2 4; }
.growth-chart .zl { font: 700 10px var(--sans); fill: var(--muted); }
.growth-chart .kid { fill: none; stroke: var(--primary); stroke-width: 2.6; stroke-linejoin: round; }
.growth-chart .kidpt { fill: var(--primary); stroke: var(--surface); stroke-width: 2; }
.growth-table td { vertical-align: middle; }
.growth-table td:first-child { font-weight: 650; }
/* growth: results beside the chart on wide screens, and never a full-width chart */
.growth-grid { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1000px) { .growth-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); } }
.growth-chart { max-width: 720px; margin: 0 auto; display: block; }
@media print { .growth-grid { display: block; } .growth-chart { max-width: 100%; } }
@media (max-width: 560px) { .growth-table td:last-child { display: none; } }

/* optics: the power cross, drawn the way it is taught — two meridians at right
   angles with the power written at the end of each arm */
.power-cross { width: 132px; height: 132px; display: block; margin: 0 auto .2rem; overflow: visible; }
.power-cross .pc-arm { stroke: var(--c-eye, var(--primary)); stroke-width: 2.4; stroke-linecap: round; }
.power-cross .pc-lbl { font: 700 13px var(--sans); fill: var(--text); }
.power-cross .pc-dot { fill: var(--c-eye, var(--primary)); }
.hairline { height: 1px; background: var(--border); margin: 1.4rem 0 1.1rem; }

/* PPH first response: a running blood-loss total, and the bundle as a checklist
   that reads at arm's length while both your hands are busy */
.pph-total { display: flex; align-items: baseline; justify-content: center; gap: .4rem; padding: .9rem; border-radius: 14px;
  background: var(--surface-2); border: 1px solid var(--border); }
.pph-total b { font-size: clamp(2.4rem, 12vw, 3.4rem); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.pph-total span { font-size: 1rem; font-weight: 650; color: var(--muted); }
.pph-total.warn { background: var(--amber-soft); border-color: transparent; color: var(--amber); }
.pph-total.danger { background: var(--red-soft); border-color: transparent; color: var(--red); }
.pph-signs { display: grid; gap: .35rem; }
@media (min-width: 640px) { .pph-signs { grid-template-columns: 1fr 1fr; } }
.pph-bundle { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.pph-bundle li { display: flex; gap: .7rem; align-items: flex-start; padding: .65rem; border-radius: 13px;
  border: 1px solid var(--border); background: var(--surface); }
.pph-bundle li.done { background: var(--green-soft); border-color: transparent; }
.pph-bundle li > div { min-width: 0; }
.pph-tick { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--border-strong);
  background: var(--surface-2); color: var(--text); display: grid; place-items: center; cursor: pointer; }
.pph-tick[aria-pressed="true"] { background: var(--green); border-color: transparent; color: var(--on-green); }
.pph-letter { font-weight: 800; font-size: .95rem; letter-spacing: .02em; }

/* catch-up vaccination: one row per antigen, with the dose count as big tap
   targets so a card can be transcribed at arm's length */
.vx-grid { display: grid; gap: .4rem; }
.vx-row { display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  padding: .5rem .6rem; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.vx-dot { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--border-strong);
  background: var(--surface-2); color: var(--text); font-weight: 700; cursor: pointer; }
.vx-dot.on { background: var(--primary); border-color: transparent; color: var(--on-primary); }
@media (max-width: 420px) { .vx-row { flex-direction: column; align-items: flex-start; gap: .4rem; } }

/* bedside procedures: numbered steps that stay readable when you are holding
   a phone in one hand */
.proc-steps { margin: 0; padding-left: 1.3rem; display: grid; gap: .6rem; }
.proc-steps li { padding-left: .2rem; }
.proc-steps li::marker { color: var(--primary); font-weight: 800; }

/* preoperative assessment: toggle chips for conditions and medicines */
.po-group { margin: .9rem 0 .4rem; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.po-group:first-of-type { margin-top: .2rem; }
.po-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.po-chip { min-height: 38px; padding: .35rem .75rem; border-radius: 999px; border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--text); font: inherit; font-size: .88rem; cursor: pointer; }
.po-chip.on { background: var(--primary); border-color: transparent; color: var(--on-primary); font-weight: 650; }

/* ---------- endemic disease pathways (js/endemic.js) and grouped tools ---------- */
.endemic-quick a { flex: 0 0 auto; min-height: 38px; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.1); color: var(--hero-text); border-radius: 999px; padding: .3rem .9rem .3rem .7rem; font-size: .84rem; font-weight: 650; display: inline-flex; align-items: center; gap: .35rem; text-decoration: none; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease); }
.endemic-quick a .icon { width: 15px; height: 15px; color: #86efac; }
.endemic-quick a:hover { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.4); transform: translateY(-1px); }
.tool-jump { display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; margin: .2rem 0 .4rem; padding-bottom: .1rem; }
.tool-jump::-webkit-scrollbar { display: none; }
.tool-jump a { flex: 0 0 auto; min-height: 36px; display: inline-flex; align-items: center; padding: .25rem .8rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font-size: .84rem; font-weight: 650; text-decoration: none; white-space: nowrap; }
.tool-jump a:hover { color: var(--primary-ink); border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); }
.tool-sec { font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin: 1.4rem 0 .6rem; scroll-margin-top: 80px; }
.also-grid { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); margin-bottom: 1rem; }
.also-link { display: flex; flex-direction: column; gap: .2rem; margin: 0; padding: .8rem .95rem; text-decoration: none; color: var(--text); }
.also-link:hover { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); }
.en-weight { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; position: sticky; top: 64px; z-index: 5; padding: .7rem 1rem; }
.en-weight input { font-size: 1.15rem; font-weight: 700; min-height: 44px; }
.en-picker { display: grid; gap: .8rem; margin-bottom: 1rem; }
.en-group-name { font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 750; color: var(--muted); margin-bottom: .35rem; }
.en-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.en-chip { min-height: 40px; display: inline-flex; align-items: center; padding: .35rem .85rem; border-radius: 12px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font-size: .9rem; font-weight: 600; text-decoration: none; transition: border-color .15s var(--ease), background .15s var(--ease); }
.en-chip:hover { border-color: var(--primary); }
.en-chip.active { background: var(--primary); border-color: transparent; color: var(--on-primary, #fff); }
.en-scen { scroll-margin-top: 140px; }
.en-scen-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .8rem; flex-wrap: wrap; }
.en-h { font-size: .95rem; margin: 1.1rem 0 .45rem; display: flex; align-items: center; gap: .35rem; }
.en-give { margin: 0; padding-left: 1.3rem; display: grid; gap: .8rem; }
.en-give li::marker { font-weight: 700; color: var(--primary-ink); }
.en-give-name { font-weight: 700; font-size: 1rem; }
.en-dose { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .5rem; margin: .45rem 0 .2rem; padding: .55rem .8rem; border-radius: 12px; background: var(--primary-soft); color: var(--primary-ink); }
.en-dose b { font-size: 1.35rem; }
.en-dose > span:first-of-type { font-weight: 650; }
.en-bands, .en-src { margin-top: .35rem; }
.en-bands summary, .en-src summary { cursor: pointer; color: var(--text-2); display: inline-flex; align-items: center; gap: .3rem; min-height: 32px; }
.en-bands table { margin-top: .4rem; }
.en-bands tr.en-cur td { background: var(--primary-soft); font-weight: 700; }
@media (max-width: 640px) { .en-weight { top: 56px; } .en-chip { flex: 1 1 calc(50% - .4rem); justify-content: center; text-align: center; } }
@media print { .en-weight, .en-picker, .tool-jump { display: none; } .en-bands { display: block; } }
.en-perkg { font-weight: 750; }
@media (max-width: 640px) { .en-weight { flex-wrap: nowrap; padding: .5rem .8rem; } .en-weight .row { flex-wrap: nowrap; } .en-weight .small { display: none; } .en-weight input { max-width: 6.5rem; } }

/* =====================================================================
   Phone usability (js/mobile.js): finder, start tiles, jump bar, compact
   lists, text size. Placed last so it wins over the component rules above.
   ===================================================================== */
html[data-textsize="large"] { font-size: 112.5%; }
html[data-textsize="xlarge"] { font-size: 125%; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* top bar: a Find button on every page */
.find-btn { display: inline-flex; align-items: center; gap: .35rem; }
.notice-short { display: none; }

/* start tiles under the hero */
.start-grid { display: grid; gap: .6rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 0 1.1rem; }
@media (min-width: 640px) { .start-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .start-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.start-grid a { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: .6rem; align-items: center; min-height: 72px; padding: .7rem .8rem; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-1); color: var(--text); text-decoration: none; transition: border-color .15s var(--ease), transform .15s var(--ease); }
.start-grid a:active { transform: scale(.98); }
.start-grid a:hover { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); }
.start-grid .icon { grid-row: span 2; width: 38px; height: 38px; padding: 8px; border-radius: 11px; background: var(--primary-soft); color: var(--primary-ink); }
.start-grid b { font-size: .95rem; line-height: 1.2; }
.start-grid span { font-size: .76rem; color: var(--muted); line-height: 1.3; }
.start-grid .st-emerg .icon { background: var(--red-soft); color: var(--red); }
.start-grid .st-emerg b { color: var(--red); }

/* the finder */
html.qf-open, html.qf-open body { overflow: hidden; }
.qf { position: fixed; inset: 0; z-index: 100; background: rgba(4, 12, 16, .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); display: flex; justify-content: center; align-items: flex-start; }
.qf[hidden] { display: none; }
.qf-panel { width: 100%; max-width: 640px; margin-top: 8vh; max-height: 80vh; display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow-3); overflow: hidden; }
.qf-bar { display: flex; align-items: center; gap: .5rem; padding: .6rem .7rem .6rem 1rem; border-bottom: 1px solid var(--border); background: var(--surface); }
.qf-bar > .icon { color: var(--muted); flex: 0 0 auto; }
.qf-bar input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 1.1rem; min-height: 48px; outline: none; }
.qf-close { flex: 0 0 auto; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 12px; background: var(--surface-3); color: var(--text); }
.qf-body { flex: 1; overflow-y: auto; padding: .4rem .6rem 1rem; overscroll-behavior: contain; }
.qf-group { display: flex; align-items: center; gap: .35rem; font-size: .7rem; font-weight: 750; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin: .9rem .4rem .35rem; }
.qf-group .icon { width: 14px; height: 14px; }
.qf-row { display: flex; align-items: center; gap: .7rem; min-height: 58px; padding: .5rem .55rem; border-radius: 12px; color: var(--text); text-decoration: none; }
.qf-row:hover, .qf-row:focus-visible { background: var(--surface-2); }
.qf-row:active { background: var(--surface-3); }
.qf-row > .icon { color: var(--muted); flex: 0 0 auto; }
.qf-ic { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary-ink); }
.qf-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.qf-text b { font-size: .98rem; line-height: 1.25; }
.qf-text span { font-size: .8rem; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qf-quick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin: .6rem .2rem .3rem; }
.qf-quick a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; min-height: 76px; padding: .5rem; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); color: var(--text); text-decoration: none; font-size: .8rem; font-weight: 650; text-align: center; line-height: 1.2; }
.qf-quick a .icon { width: 22px; height: 22px; color: var(--primary-ink); }
.qf-hint { margin: 1rem .5rem 0; }
.qf-foot { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .5rem .8rem calc(.5rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); background: var(--surface); }
.qf-size button { min-width: 48px; font-weight: 800; }

/* jump bar for long pages */
.jumpbar { position: sticky; top: 64px; z-index: 9; display: flex; gap: .35rem; overflow-x: auto; scrollbar-width: none; margin: 0 -.2rem .9rem; padding: .45rem .2rem; background: var(--glass); -webkit-backdrop-filter: saturate(1.5) blur(14px); backdrop-filter: saturate(1.5) blur(14px); border-bottom: 1px solid var(--border); }
.jumpbar::-webkit-scrollbar { display: none; }
.jumpbar a { flex: 0 0 auto; min-height: 38px; display: inline-flex; align-items: center; padding: .25rem .85rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font-size: .85rem; font-weight: 650; text-decoration: none; white-space: nowrap; }
.jumpbar a.active { background: var(--primary); border-color: transparent; color: var(--on-primary, #fff); }
[data-sec] { scroll-margin-top: 124px; }

/* folded sections (textbooks, sources) */
details.fold { margin: 1.2rem 0 1rem; }
details.fold > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: .6rem; min-height: 48px; padding: .3rem .9rem; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary h2 { margin: 0; font-size: 1.05rem; }
details.fold > summary::after { content: "Show"; font-size: .8rem; font-weight: 700; color: var(--primary-ink); }
details.fold[open] > summary::after { content: "Hide"; }
details.fold[open] > summary { margin-bottom: .8rem; }

/* back to top */
.to-top { position: fixed; right: 14px; bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 25; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text); box-shadow: var(--shadow-2); display: grid; place-items: center; }
.to-top[hidden] { display: none; }
.to-top .icon { transform: rotate(90deg); }
@media (min-width: 760px) { .to-top { bottom: 24px; } }

@media (max-width: 759px) {
  /* finder fills the phone screen */
  .qf { align-items: stretch; background: var(--bg); }
  .qf-panel { margin: 0; max-height: none; height: 100%; max-width: none; border: 0; border-radius: 0; }
  .qf-bar { padding-top: calc(.6rem + env(safe-area-inset-top)); }
  .find-label { display: none; }
  #acct { display: none; }            /* Account is in the bottom bar */

  /* draft notice: one short line */
  .notice { padding: .45rem .7rem; font-size: .8rem; align-items: center; margin-bottom: .7rem; border-radius: 12px; }
  .notice-long { display: none; }
  .notice-short { display: inline; }
  .notice-short a { color: inherit; font-weight: 700; }

  /* home: the search and the tiles first, not a photo */
  .hero.has-media { padding-top: 1.1rem; }
  .hero .hero-media, .hero .hero-stats, .hero > p, .hero-eyebrow { display: none; }
  .hero { padding: 1rem 1rem .9rem; border-radius: 20px; margin-bottom: .8rem; }
  .hero h1 { font-size: 1.45rem; max-width: none; margin-bottom: .7rem; }
  .hero .searchbar input { font-size: 1.05rem; }
  .hero .quick-label { margin: .8rem 0 .4rem; }

  /* lists: compact rows, about four times more on one screen */
  .drug-list { gap: .4rem; }
  .drug-item { padding: .55rem .75rem .55rem .85rem; min-height: 60px; column-gap: .65rem; row-gap: .1rem; border-radius: 14px; box-shadow: none; align-items: center; }
  .drug-item .mono { width: 34px; height: 34px; font-size: .82rem; border-radius: 10px; grid-row: span 2; align-self: center; }
  .drug-item .name { font-size: .98rem; }
  .drug-item .meta { flex-wrap: nowrap; font-size: .76rem; }
  .drug-item .meta > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .drug-item .count { flex: 0 0 auto; }
  .drug-item.case-item .case-sum { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .82rem; }
  .group-head { margin-top: .6rem; }

  /* drug and case pages: the clinical content sooner */
  .head h1 { font-size: 1.55rem; }
  .head .tags .chip.ward { display: none; }
  .case-tools { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: -.2rem; margin-right: -1rem; padding: .1rem 1rem .3rem .2rem; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
  .case-tools::-webkit-scrollbar { display: none; }
  .case-tools > * { flex: 0 0 auto; }
  .case-summary { font-size: .95rem !important; }
  .tabs { position: static; flex-wrap: wrap; overflow: visible; }
  .tab { flex: 1 1 auto; text-align: center; padding: .45rem .7rem; }
  .jumpbar { top: 62px; margin-left: -1rem; margin-right: -1rem; padding-left: 1rem; padding-right: 1rem; }

  /* comfortable tap targets everywhere */
  .btn.sm { min-height: 42px; }
  .chip { min-height: 26px; }
}
@media print { .jumpbar, .to-top, .qf, .start-grid, .find-btn { display: none !important; } details.fold > summary::after { content: ""; } }
@media (max-width: 759px) {
  .hero-chips { flex-wrap: nowrap; }
  .hero-chips .setting-chip { flex: 1 1 auto; min-width: 0; }
  .hero-chips .setting-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .hero-chips .hero-lang { flex: 0 0 auto; }
}
.group-head.foldable { cursor: pointer; min-height: 52px; padding: .4rem .8rem; margin-top: .45rem; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); }
.group-head.foldable > .icon { margin-left: auto; color: var(--muted); transition: transform .18s var(--ease); }
.group-head.foldable.open > .icon { transform: rotate(90deg); }
.group-head.foldable.open { background: var(--surface-2); }
.drug-list > li[hidden] { display: none; }
.group-head.foldable::after { display: none; }
@media (max-width: 759px) {
  /* drug page: what to give comes straight after the name */
  .drug-main { display: flex; flex-direction: column; }
  .drug-main > * { order: 4; }
  .drug-main > .back, .drug-main > .head { order: 0; }
  .drug-main > .pdose:not(.empty-pdose) { order: 1; }   /* a weight is set: the patient's dose first */
  .drug-main > .glance { order: 2; }
  .drug-main > .empty-pdose { order: 3; }
  .drug-main > .tabs, .drug-main > #tabpane { order: 5; }
  .head .tags { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); padding-right: 1.5rem; }
  .head .tags::-webkit-scrollbar { display: none; }
  .head .tags > * { flex: 0 0 auto; }
  .head .tags > span[style*="margin-left:auto"] { margin-left: 0 !important; }
  .empty-pdose { padding: .7rem .9rem; }
  .empty-pdose p, .empty-pdose .small { display: none; }
  .sched-links { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .sched-links > * { flex: 0 0 auto; }
  .glance { margin-bottom: .6rem; }
}
/* the top bar keeps its size whatever the text size, so it never pushes past the screen */
@media (max-width: 759px) {
  .topbar-inner { font-size: 16px; gap: .4rem; }
  .topbar .tools { gap: .35rem; }
  html[data-textsize="large"] .brand-text, html[data-textsize="xlarge"] .brand-text { display: none; }
  html[data-textsize="large"] .patient-chip:not(.on) span, html[data-textsize="xlarge"] .patient-chip:not(.on) span { display: none; }
  .patient-chip, .theme { font-size: 14px; }
  /* page headers with buttons: stack the buttons under the title */
  .resus-head { flex-wrap: wrap; }
  .resus-head > div:first-child { flex: 1 1 100%; min-width: 0; }
  .resus-head > .row { flex: 1 1 100%; }
}
@media (max-width: 360px) { .brand-text { display: none; } }
.en-more { display: none; }
@media (max-width: 759px) {
  .en-summary:not(.open) { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .en-more { display: inline-flex; min-height: 36px; padding: 0; font-weight: 700; color: var(--primary-ink); background: none; border: 0; }
}
@media (max-width: 759px) {
  .tools-grid { gap: .5rem; }
  .card.tool { padding: .7rem .85rem; gap: .75rem; align-items: center; box-shadow: none; margin-bottom: 0; }
  .card.tool .tool-ic { width: 40px; height: 40px; border-radius: 12px; }
  .card.tool .tool-ic .icon { width: 20px; height: 20px; }
  .card.tool h3 { font-size: 1rem; }
  .card.tool p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .8rem !important; }
  .tool-sec { margin: 1rem 0 .45rem; }
  .resus-head .tags { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .resus-head .tags::-webkit-scrollbar { display: none; }
  .resus-head .tags > * { flex: 0 0 auto; }
}

/* ---------- opportunities board (js/careers.js) ---------- */
.opp-tabs { margin: .2rem 0 .8rem; flex-wrap: wrap; }
.opp-tabs b { font-size: .72rem; background: var(--surface-3); border-radius: 999px; padding: .05rem .45rem; }
.opp-kinds { display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; padding-bottom: .2rem; margin-bottom: .6rem; }
.opp-kinds::-webkit-scrollbar { display: none; }
.opp-kinds .en-chip { flex: 0 0 auto; gap: .35rem; }
.opp-kinds .en-chip b { font-size: .72rem; opacity: .8; }
.opp-row { display: flex; align-items: center; gap: .5rem; margin-bottom: .9rem; flex-wrap: wrap; }
.opp-row select, .opp-row input { min-height: 44px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--surface); color: var(--text); padding: .4rem .7rem; font: inherit; }
.opp-row input { flex: 1 1 200px; }
.opp { margin-bottom: .7rem; padding: 1rem 1.1rem; }
.opp-pending { border-color: var(--amber-line); background: color-mix(in srgb, var(--amber-soft) 40%, var(--surface)); }
.opp-top { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .45rem; }
.opp-title { margin: 0 0 .25rem; font-size: 1.08rem; line-height: 1.3; }
.opp-org { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; font-size: .88rem; color: var(--text-2); }
.opp-org .icon { width: 15px; height: 15px; }
.opp-cadres { font-size: .8rem; color: var(--muted); margin-top: .2rem; }
.opp-body { margin: .5rem 0 .6rem; font-size: .92rem; white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; }
.opp-body.open { display: block; }
.opp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.opp-by { margin-top: .5rem; }
.opp-queue { border-color: var(--amber-line); }
.opp-q-item { display: flex; justify-content: space-between; align-items: center; gap: .8rem; flex-wrap: wrap; padding: .6rem 0; border-top: 1px solid var(--border); }
.opp-links { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.opp-link { display: flex; flex-direction: column; gap: .2rem; margin: 0; padding: .75rem .9rem; color: var(--text); text-decoration: none; }
.opp-link:hover { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); }
.opp-link > span { font-size: .82rem; color: var(--text-2); }
.opp-link .opp-url { display: flex; align-items: center; gap: .25rem; color: var(--primary-ink); font-weight: 650; font-size: .78rem; }
.opp-link .opp-url .icon { width: 13px; height: 13px; }
.opp-form .po-chips { margin-top: .3rem; }
.opp-form .lbl { font-weight: 650; font-size: .88rem; }
.warn-text { color: var(--amber); }

/* home: grow tiles and the case of the day */
.start-grid a { position: relative; }
.start-grid .st-grow .icon { background: color-mix(in srgb, var(--accent, var(--green)) 18%, var(--surface)); color: var(--green); }
.st-badge { position: absolute; top: .45rem; right: .5rem; font-style: normal; font-size: .68rem; font-weight: 800; padding: .1rem .45rem; border-radius: 999px; background: var(--green); color: var(--on-green); }
.daily-tile { display: flex; align-items: center; gap: .75rem; padding: .8rem .95rem; margin-bottom: 1.1rem; color: var(--text); text-decoration: none; }
.daily-tile > .icon { color: var(--muted); margin-left: auto; flex: 0 0 auto; }
.daily-ic { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--green-soft); color: var(--green); }
.daily-text { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.daily-text b { font-size: 1rem; }
.daily { border-color: color-mix(in srgb, var(--green) 35%, var(--border)); }
.daily-q { margin: .9rem 0; }
.daily-q .quiz-opts { margin-top: .5rem; }
.daily-note { margin: .5rem 0 0; }
.quiz-opt.wrong { border-color: var(--red); background: var(--red-soft); color: var(--red); }

/* my learning */
.ln-stats { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); margin: 1rem 0; }
.ln-stats .card { margin: 0; padding: .8rem .9rem; display: flex; flex-direction: column; gap: .1rem; }
.ln-stats b { font-size: 1.6rem; font-variant-numeric: tabular-nums; line-height: 1.1; }
.ln-stats span { font-size: .8rem; color: var(--text-2); }
.ln-act { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; padding: .45rem 0; border-bottom: 1px solid var(--border); font-size: .9rem; }
@media (max-width: 759px) {
  .opp { padding: .85rem .9rem; }
  .opp-actions .btn.sm { flex: 1 1 auto; justify-content: center; }
  .ln-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media print { .opp-actions, .opp-row, .opp-kinds, .opp-tabs, .ln-form, .daily .quiz-opts { display: none !important; } }
@media (max-width: 759px) { .opp-tabs { flex-wrap: nowrap; width: 100%; } .opp-tabs button { flex: 1 1 auto; padding: .3rem .5rem; font-size: .82rem; } }
/* mid-width screens: the top menu keeps every item by dropping its icons */
@media (min-width: 760px) and (max-width: 1150px) {
  .topnav a .icon { display: none; }
  .topnav a { padding-left: .55rem; padding-right: .55rem; }
  .find-label { display: none; }
}

/* ---------- navigation and dark-theme refinements ---------- */
.hero-eyebrow { display: none; }                       /* the heading speaks for itself */
@media (max-width: 1399px) { .status { display: none; } }
input, textarea { caret-color: var(--primary); }
/* dark: cards are drawn by their edge, not by a shadow nobody can see */
:root[data-theme="dark"] .card, :root[data-theme="dark"] .drug-item, :root[data-theme="dark"] .start-grid a, :root[data-theme="dark"] .qf-quick a { border-color: var(--border); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .card, :root:not([data-theme="light"]) .drug-item, :root:not([data-theme="light"]) .start-grid a { border-color: var(--border); } }
/* dark: the hero sits a step darker than the page, with the photograph dimmed so text keeps its contrast */
:root[data-theme="dark"] .hero-media img { filter: brightness(.78) saturate(.9); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero-media img { filter: brightness(.78) saturate(.9); } }
/* scrollbars follow the theme */
html { scrollbar-color: var(--border-strong) transparent; }
@media (min-width: 1100px) { .start-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- meaning by tint and outline, not by side stripes ----------
   Role, severity, schedule status and acuity keep their colours; they are
   carried by a tinted panel and a coloured outline instead of a thick edge. */
.drug-item::before, .method::before, .bed::before, .ho-bed::before { display: none; }
.role-block { border: 1px solid color-mix(in srgb, var(--rb, var(--border-strong)) 38%, var(--border)); background: color-mix(in srgb, var(--rb, var(--muted)) 6%, var(--surface)); border-radius: 16px; padding: .85rem 1rem .4rem; }
.role-block > h4 { color: var(--rb, var(--muted)); }
.role-block.r-first { --rb: var(--primary); } .role-block.r-adj { --rb: var(--c-electrolyte); } .role-block.r-alt { --rb: var(--c-analgesia); }
.role-block.r-sup { --rb: var(--muted); } .role-block.r-avoid { --rb: var(--red); }
.sched { border-color: color-mix(in srgb, var(--green) 40%, var(--border)); }
.sched.due { border-color: var(--amber-line); background: color-mix(in srgb, var(--amber-soft) 45%, var(--surface)); }
.sched.overdue { border-color: var(--red-line); background: color-mix(in srgb, var(--red-soft) 55%, var(--surface)); }
.sched.done { border-color: var(--border); }
.compat { border-color: var(--amber-line); background: color-mix(in srgb, var(--amber-soft) 35%, var(--surface)); }
.compat.never { border-color: var(--red-line); background: color-mix(in srgb, var(--red-soft) 45%, var(--surface)); }
.ix { border: 1px solid var(--amber-line); background: color-mix(in srgb, var(--amber-soft) 35%, var(--surface)); }
.ix.major { border-color: var(--red-line); background: color-mix(in srgb, var(--red-soft) 45%, var(--surface)); }
.bed.watch { border-color: var(--amber-line); }
.ho-bed.watch { border-color: var(--amber-line); background: color-mix(in srgb, var(--amber-soft) 35%, var(--surface)); }
.ho-bed.unstable { border-color: var(--red-line); background: color-mix(in srgb, var(--red-soft) 45%, var(--surface)); }
/* the printable sheet is always paper-white, so it carries its own light tokens in every theme */
.sheet { --text: #0b1f2a; --text-2: #3b5361; --muted: #5f7482; --border: #e2e9ee; --border-strong: #cad6de; --surface: #ffffff; --surface-2: #f5f8fa; --surface-3: #e9eff3; --primary: #0e7490; --primary-ink: #0a5568; --red: #b42318; --amber: #8a5300; --green: #047857; }
/* bottom bar labels at a readable size */
.bottomnav a, .bottomnav button { font-size: .72rem; }