/* thisdrug — one stylesheet, both themes, phone first. System fonts only. */
:root {
  color-scheme: light dark;
  --bg: #f6f2e8;
  --card: #fffdf7;
  --ink: #16213a;
  --muted: #56607a;
  --line: #d8d0bd;
  --accent: #a4520a;
  --mark-bg: #f2b25c;
  --mark-ink: #1b1834;
  --notice-bg: #fbe9c8;
  --notice-line: #d99a3e;
  --focus: #1d5fd1;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e1729;
    --card: #152139;
    --ink: #eee8d6;
    --muted: #a3acc2;
    --line: #2b3854;
    --accent: #f0a646;
    --mark-bg: #e28c22;
    --mark-ink: #1a1834;
    --notice-bg: #2a2413;
    --notice-line: #b7812f;
    --focus: #7fb0ff;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.55 var(--sans); }
a { color: var(--accent); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
mark { background: var(--mark-bg); color: var(--mark-ink); padding: 0 .04em; border-radius: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.top { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; max-width: 76rem; margin: 0 auto; padding: .7rem 1rem .2rem; }
.brand { font: 700 1.25rem/1 var(--serif); color: var(--ink); text-decoration: none; letter-spacing: -.01em; }
.brand span { background: var(--mark-bg); color: var(--mark-ink); padding: 0 .12em; margin-left: .03em; border-radius: 2px; }
.tagline { color: var(--muted); font-size: .9rem; }

main { max-width: 76rem; margin: 0 auto; padding: 0 1rem; }
.hero { display: grid; gap: 1.25rem; padding-top: .6rem; }
@media (min-width: 900px) { .hero { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 2.5rem; padding-top: 1.5rem; } }
h1 { font: 700 clamp(1.35rem, 1.05rem + 1.6vw, 2.3rem)/1.15 var(--serif); margin: .2rem 0 .7rem; letter-spacing: -.01em; }
h2 { font: 700 1.3rem/1.25 var(--serif); margin: 0 0 .5rem; }

.namebox label { display: block; font-size: .85rem; color: var(--muted); margin-bottom: .25rem; }
.namebox input { width: 100%; font: 500 1.35rem/1.2 var(--serif); color: var(--ink); background: var(--card); border: 2px solid var(--ink); border-radius: 10px; padding: .6rem .75rem; }
.namebox input::placeholder { color: var(--muted); opacity: .8; font-style: italic; }
.try { margin: .5rem 0 .75rem; font-size: .9rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.try button { font: inherit; color: var(--ink); background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: .2rem .65rem; cursor: pointer; min-height: 32px; }
.try button:hover { border-color: var(--accent); }

.result { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: .8rem 1rem 1rem; min-height: 11rem; }
.result .eyebrow { margin: 0; font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.result .word { font: 600 clamp(1.9rem, 1.3rem + 3vw, 3.1rem)/1.1 var(--serif); margin: .15rem 0 .45rem; overflow-wrap: anywhere; }
.result .verdict { margin: 0 0 .55rem; font-weight: 600; }
.result .badge { display: inline-block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: .1rem .45rem; border-radius: 4px; border: 1px solid currentColor; margin-right: .4rem; vertical-align: .12em; }
.hits { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.hits li { border-top: 1px solid var(--line); padding-top: .5rem; }
.hits .stem { font: 700 1.15rem/1.2 var(--serif); text-decoration: none; }
.hits .pos { font-size: .8rem; color: var(--muted); margin-left: .35rem; }
.hits .def { display: block; margin-top: .1rem; }
.hits .lbl { color: var(--muted); font-size: .85rem; }
.hits .tag, .tag { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 0 .3rem; margin-left: .35rem; vertical-align: .1em; }
.note { color: var(--muted); margin: .7rem 0 0; font-size: .95rem; }

.side { display: grid; gap: 1rem; align-content: start; }
.notice { background: var(--notice-bg); border-left: 4px solid var(--notice-line); border-radius: 6px; padding: .7rem .9rem; }
.how p { margin: 0 0 .6rem; }

.prose { max-width: 46rem; margin: 2.2rem 0 0; }
.prose ul { padding-left: 1.1rem; margin: 0; }
.prose li { margin-bottom: .5rem; }
.prose p { margin: 0 0 .7rem; }
.cannot { border-top: 1px solid var(--line); padding-top: 1.2rem; }

.stems { margin-top: 2.4rem; }
.lede { max-width: 46rem; margin: 0 0 .8rem; }
.filters { display: flex; flex-wrap: wrap; gap: .5rem .75rem; align-items: center; position: sticky; top: 0; z-index: 2; background: var(--bg); padding: .5rem 0; border-bottom: 1px solid var(--line); }
.filters label[for="filter"] { font-size: .85rem; color: var(--muted); width: 100%; }
.filters input { flex: 1 1 14rem; font: 1rem var(--sans); color: var(--ink); background: var(--card); border: 1px solid var(--muted); border-radius: 8px; padding: .5rem .6rem; }
.filters select { font: .95rem var(--sans); color: var(--ink); background: var(--card); border: 1px solid var(--muted); border-radius: 8px; padding: .45rem .5rem; }
.shown { font-size: .85rem; color: var(--muted); }
.tablewrap { overflow-x: auto; }
.stemtable { width: 100%; border-collapse: collapse; font-size: .95rem; }
.stemtable th, .stemtable td { text-align: left; vertical-align: top; padding: .5rem .5rem .5rem 0; border-bottom: 1px solid var(--line); }
.stemtable thead th { font-size: .8rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.stemtable tbody th { font: 700 1.05rem/1.3 var(--serif); white-space: nowrap; }
.stemtable tbody th a { text-decoration: none; }
.stemtable .pos { color: var(--muted); font-size: .85rem; white-space: nowrap; }
.stemtable .ex { color: var(--muted); font-size: .88rem; }
.stemtable .ex .n { display: inline-block; min-width: 2.2em; font-weight: 700; color: var(--ink); }
.stemtable details { display: inline; }
.stemtable summary { display: inline; cursor: pointer; color: var(--accent); }
.stemtable tr { scroll-margin-top: 8.5rem; }
.stemtable tr:target { background: var(--notice-bg); }
.stemtable tr[hidden] { display: none; }
/* Phone: each row becomes a small card. */
@media (max-width: 700px) {
  .stemtable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .stemtable, .stemtable tbody, .stemtable tr, .stemtable th, .stemtable td { display: block; width: 100%; }
  .stemtable tr { border-bottom: 1px solid var(--line); padding: .55rem 0; }
  .stemtable tr[hidden] { display: none; }
  .stemtable th, .stemtable td { border: 0; padding: .05rem 0; }
  .stemtable tbody th { display: flex; gap: .5rem; align-items: baseline; }
}

.source .attribution { font-size: .9rem; color: var(--muted); }
.foot { max-width: 76rem; margin: 2.5rem auto 0; padding: 1rem 1rem 2rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .9rem; }

/* /stem/ pages: one WHO stem each, and the index of them. */
.crumbs { font-size: .85rem; color: var(--muted); margin: .4rem 0 .2rem; }
.crumbs a { color: var(--muted); }
.stemhead { max-width: 46rem; }
.stemhead .eyebrow { margin: .6rem 0 0; font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.stemname { font-size: clamp(2.2rem, 1.6rem + 3vw, 3.6rem); overflow-wrap: anywhere; }
.whodef { margin: 0 0 1rem; }
.whodef blockquote { margin: 0; padding: .55rem .9rem; background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 6px; }
.whodef .def { margin: 0; font: 600 1.2rem/1.35 var(--serif); }
.whodef figcaption { font-size: .8rem; color: var(--muted); margin-top: .25rem; }
.stemhead .lede, .stemhead p { max-width: 46rem; }
.jump { font-size: .9rem; }
.names { margin-top: 2.2rem; }
.namelist { list-style: none; margin: .4rem 0 0; padding: 0; columns: 8rem auto; column-gap: 1.25rem; font: 1rem/1.7 var(--serif); }
.namelist li { break-inside: avoid; overflow-wrap: anywhere; }
.related { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; }
.related li { border-top: 1px solid var(--line); padding-top: .45rem; margin: 0; }
.related .stem, .stemlist .stem { font: 700 1.1rem/1.2 var(--serif); text-decoration: none; margin-right: .3rem; }
.related .def { display: block; }
.related .why { display: block; font-size: .85rem; color: var(--muted); }
.decodebox { max-width: 46rem; margin: 2.2rem 0 0; }
.decodebox .result { min-height: 0; margin-top: .6rem; }
.stemgroup { margin-top: 2rem; }
.stemgroup .count { font: 600 .9rem var(--sans); color: var(--muted); margin-left: .3rem; }
.stemlist { list-style: none; padding: 0; margin: 0; display: grid; gap: 0 2rem; }
@media (min-width: 900px) { .stemlist { grid-template-columns: 1fr 1fr; } }
.stemlist li { border-top: 1px solid var(--line); padding: .45rem 0; }
.stemlist .n { font-size: .8rem; color: var(--muted); white-space: nowrap; }
.nw { white-space: nowrap; }