/* =====================================================================
   MedResearch: light + dark design system
   Tokens, base, shell, controls, components, pages.
   ===================================================================== */

/* ---------- Theme tokens (light default; dark via OS preference or the theme switch) ---------- */
:root {
  --bg: #f3f6fb; --surface: #ffffff; --surface-2: #edf2fa; --text: #0e1a2b; --muted: #5b6b83;
  --border: #e1e8f3; --accent: #2563eb; --accent-ink: #ffffff; --accent-soft: #e6eeff;
  --good: #0f7a45; --good-soft: #e3f6ec; --warn: #8a4b00; --warn-soft: #fdf0dc; --bad: #a3231f; --bad-soft: #fbe5e4;
  --radius: 14px; --shadow: 0 1px 2px rgba(14, 26, 43, .05), 0 6px 20px rgba(37, 99, 235, .06);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --sidebar-w: 248px; --nav-active: #e6eeff; --nav-active-ink: #1d4ed8;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #000000; --surface: #0c0c0d; --surface-2: #171719; --text: #f2f2f3; --muted: #9a9aa2;
    --border: #27272b; --accent: #4c9aff; --accent-ink: #000000; --accent-soft: #13233b;
    --good: #56d364; --good-soft: #0b1f12; --warn: #e3b341; --warn-soft: #241c0a; --bad: #ff7b72; --bad-soft: #260f10;
    --shadow: 0 1px 0 rgba(255, 255, 255, .02); --nav-active: #17233a; --nav-active-ink: var(--accent);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #000000; --surface: #0c0c0d; --surface-2: #171719; --text: #f2f2f3; --muted: #9a9aa2;
  --border: #27272b; --accent: #4c9aff; --accent-ink: #000000; --accent-soft: #13233b;
  --good: #56d364; --good-soft: #0b1f12; --warn: #e3b341; --warn-soft: #241c0a; --bad: #ff7b72; --bad-soft: #260f10;
  --shadow: 0 1px 0 rgba(255, 255, 255, .02); --nav-active: #17233a; --nav-active-ink: var(--accent);
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.55 var(--font); }
a { color: var(--accent); }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
h1, h2, h3 { line-height: 1.25; margin: 0 0 .5em; }
h1 { font-size: clamp(1.45rem, 2.6vw, 1.95rem); }
h2 { font-size: 1.2rem; }
h3 { font-size: 1.02rem; }
p { margin: 0 0 .75em; }
.muted { color: var(--muted); }
.meta { color: var(--muted); font-size: .9rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sr[hidden] { display: none; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--accent); color: var(--accent-ink); padding: 8px 12px; border-radius: 8px; z-index: 80; }
.skip:focus { left: 8px; }
.ic { width: 1.2em; height: 1.2em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.logo-ic { width: 30px; height: 30px; color: var(--accent); fill: currentColor; stroke: currentColor; stroke-width: 1.2; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* ---------- Shell ---------- */
.shell { display: block; min-height: 100vh; }
.content-col { min-width: 0; }
.content { padding: 8px clamp(16px, 3vw, 40px) 96px; max-width: 1240px; margin-inline: auto; }
main { outline: none; min-height: 55vh; }
.sidebar { display: none; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); font-size: 1.2rem; }
.brand strong { letter-spacing: -.01em; }

@media (min-width: 960px) {
  .shell { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }
  .sidebar { display: flex; flex-direction: column; gap: 22px; position: sticky; top: 0; height: 100vh; padding: 22px 14px; background: var(--surface); border-right: 1px solid var(--border); }
  .sidebar .brand { padding: 0 8px; }
  .tabbar, .brand-sm, .search-open, .menu-btn { display: none !important; }
  .content { padding-bottom: 40px; }
}

.nav { display: grid; gap: 4px; }
.nav a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; text-decoration: none; color: var(--muted); font-weight: 600; }
.nav a:hover { background: var(--surface-2); color: var(--text); }
.nav a[aria-current="page"] { background: var(--nav-active, var(--accent-soft)); color: var(--nav-active-ink, var(--accent)); }


/* Top bar */
.topbar { position: sticky; top: 0; z-index: 25; display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; padding: 12px clamp(16px, 3vw, 40px);
  background: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.topbar-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.searchbar { display: none; flex: 1 1 100%; order: 3; margin: 0; }
.searchbar .field { position: relative; flex: 1; min-width: 0; }
.searchbar .field .ic { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.searchbar .field input { width: 100%; padding-left: 40px; padding-right: 12px; border-radius: 12px; min-height: 46px; }
.kbd { display: none; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font: 600 .72rem var(--font); padding: 2px 8px; border: 1px solid var(--border); border-radius: 6px; color: var(--muted); background: var(--surface-2); }
/* On phones the search bar only appears on the Search page; elsewhere the search icon opens it. */
body[data-route="search"] .searchbar { display: flex; }
@media (min-width: 960px) {
  .topbar { flex-wrap: nowrap; padding-top: 18px; padding-bottom: 14px; }
  .searchbar, body[data-route="search"] .searchbar { display: flex; order: 0; flex: 1 1 auto; max-width: 660px; }
  .searchbar .field input { padding-right: 78px; }
  .kbd { display: inline-block; }
}

.theme-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); }
.theme-seg button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 34px; height: 32px; padding: 0 8px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: inherit; font-weight: 600; cursor: pointer; }
.theme-seg button[aria-pressed="true"] { background: var(--surface); color: var(--accent); box-shadow: 0 1px 3px rgba(0, 0, 0, .18); }
.theme-seg.wide { display: flex; } .theme-seg.wide button { flex: 1; }
@media (max-width: 959px) { .topbar-actions > .theme-seg { display: none; } }
.icon-btn { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--border); border-radius: 50%; background: var(--surface); color: var(--text); cursor: pointer; }
.icon-btn:hover { border-color: var(--accent); }

/* Phone tab bar + slide-out menu */
.tabbar { position: fixed; inset: auto 0 0 0; z-index: 30; display: grid; grid-template-columns: repeat(4, 1fr); background: var(--surface); border-top: 1px solid var(--border); padding-bottom: env(safe-area-inset-bottom); }
.tabbar a { display: grid; justify-items: center; gap: 2px; padding: 8px 2px; text-decoration: none; color: var(--muted); font-size: .72rem; font-weight: 600; }
.tabbar a .ic { width: 22px; height: 22px; }
.tabbar a[aria-current="page"] { color: var(--accent); }
.drawer { margin: 0 0 0 auto; height: 100dvh; max-height: 100dvh; width: min(320px, 88vw); padding: 0; border: 0; border-left: 1px solid var(--border); border-radius: 0; background: var(--surface); color: var(--text); }
.drawer:not([open]) { display: none; }
.drawer::backdrop { background: rgba(0, 0, 0, .55); }
.drawer-body { display: flex; flex-direction: column; gap: 18px; padding: 18px; min-height: 100%; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.drawer 
/* ---------- Controls ---------- */
input, select, button, textarea { font: inherit; color: inherit; }
input[type="search"], input[type="text"], input[type="number"], select {
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; min-height: 44px;
}
input::placeholder { color: var(--muted); }
input[type="checkbox"] { -webkit-appearance: none; appearance: none; flex: none; display: inline-grid; place-content: center; width: 18px; height: 18px; margin: 0; cursor: pointer;
  border: 1.5px solid var(--muted); border-radius: 5px; background: var(--surface); }
input[type="checkbox"]:hover { border-color: var(--accent); }
input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); }
input[type="checkbox"]:checked::after { content: ""; width: 9px; height: 5px; border-left: 2px solid var(--accent-ink); border-bottom: 2px solid var(--accent-ink); transform: rotate(-45deg) translate(1px, -1px); }

/* Dropdowns: themed closed state with our own arrow, and (where supported) a fully themed list. */
select {
  -webkit-appearance: none; appearance: none; cursor: pointer; padding-right: 38px; font-weight: 600;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238093ad' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px;
}
select:hover { border-color: var(--accent); }
select option { background: var(--surface); color: var(--text); font-weight: 500; padding: 10px 12px; }
@supports (appearance: base-select) {
  select, ::picker(select) { appearance: base-select; }
  select { background-image: none; padding-right: 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  select::picker-icon { content: ""; width: 16px; height: 16px; flex: none; background: var(--muted);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: rotate .2s; }
  select:open::picker-icon { rotate: 180deg; }
  ::picker(select) { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 6px;
    box-shadow: 0 14px 34px rgba(8, 20, 40, .22); margin-top: 4px; max-height: min(420px, 70vh); }
  select option { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 8px; font: inherit; font-weight: 500; cursor: pointer; }
  select option:hover, select option:focus-visible { background: var(--accent-soft); color: var(--accent); outline: none; }
  select option:checked { font-weight: 700; color: var(--accent); }
  select option::checkmark { color: var(--accent); }
}

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; font-weight: 600; text-decoration: none; color: var(--text); }
.btn:hover { background: var(--surface-2); }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.small { min-height: 36px; padding: 0 12px; font-size: .9rem; }
.btn.ghost { background: transparent; }
.btn[aria-disabled="true"], .btn[disabled] { opacity: .5; pointer-events: none; }
.btn[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); border-color: transparent; }

/* ---------- Cards, badges, callouts ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 20px; }
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
.panel + .panel { margin-top: 16px; }
.panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.panel-head h2 { margin: 0; font-size: 1.05rem; }
.section { margin-top: 28px; }
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px; font-size: .76rem; font-weight: 700; background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }
.badge.good { background: var(--good-soft); color: var(--good); border-color: transparent; }
.badge.accent { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.badges { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0; }
.callout { border-radius: 10px; padding: 12px 14px; border: 1px solid var(--border); background: var(--surface-2); margin-bottom: 12px; }
.callout.error { background: var(--bad-soft); border-color: transparent; }
.callout.warn { background: var(--warn-soft); border-color: transparent; }
#banner:not(:empty) { margin-bottom: 12px; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 6px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); color: var(--accent); font-weight: 600; font-size: .88rem; text-decoration: none; }
.chip:hover { background: var(--accent-soft); }

/* ---------- Specialty artwork (decorative, generated: no photos) ---------- */
.art { --h: 215; position: relative; overflow: hidden; border-radius: 12px; display: grid; place-items: center; color: #fff;
  background:
    radial-gradient(circle at 18% 22%, hsl(var(--h) 85% 72% / .85), transparent 52%),
    radial-gradient(circle at 82% 78%, hsl(calc(var(--h) + 24) 78% 58% / .85), transparent 50%),
    linear-gradient(135deg, hsl(var(--h) 60% 28%), hsl(calc(var(--h) + 30) 65% 42%)); }
.art::before { content: ""; position: absolute; inset: 0; opacity: .22; background-image: radial-gradient(circle, #fff 1.5px, transparent 2px); background-size: 22px 22px; }
.art .art-ic { position: relative; width: 46%; max-width: 84px; height: auto; aspect-ratio: 1; opacity: .9; stroke-width: 1.4; }
.art[data-spec="pathology"] { --h: 285; } .art[data-spec="microbiology"] { --h: 150; } .art[data-spec="immunology"] { --h: 195; }
.art[data-spec="cardiology"] { --h: 350; } .art[data-spec="oncology"] { --h: 325; } .art[data-spec="neurology"] { --h: 255; }
.art[data-spec="pharmacology"] { --h: 28; } .art[data-spec="biochemistry"] { --h: 100; } .art[data-spec="genetics"] { --h: 225; }
.art[data-spec="public-health"] { --h: 175; }

/* ---------- Featured research carousel ---------- */
.feat { position: relative; isolation: isolate; overflow: hidden; margin-bottom: 18px; border-radius: 18px; color: #fff; background: #000000; min-height: 270px; }
.feat-slide { position: relative; min-height: 270px; display: grid; align-items: center; }
.feat-slide[hidden] { display: none; }
.feat-slide::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .93) 0%, rgba(0, 0, 0, .68) 52%, rgba(0, 0, 0, .3) 100%); }
.feat-bg { position: absolute; inset: 0; z-index: -1; border-radius: 0; }
.feat-bg .art-ic { display: none; }
.feat-bg::after { content: ""; position: absolute; top: 4%; bottom: 4%; right: 3%; width: 58%; background: url("/img/microscope.svg") right center / contain no-repeat; opacity: .5; }
.feat-body { position: relative; z-index: 1; display: grid; gap: 12px; max-width: 640px; padding: 34px clamp(20px, 4vw, 46px) 64px; }
.feat-badge { display: inline-flex; align-items: center; gap: 6px; width: max-content; padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .24); font-size: .78rem; font-weight: 700; }
.feat h2 { margin: 0; color: #fff; font-size: clamp(1.3rem, 2.8vw, 2rem); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.feat h2 a { color: inherit; text-decoration: none; }
.feat-sum { margin: 0; color: rgba(255, 255, 255, .88); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.feat-note { margin: 0; font-size: .76rem; color: rgba(255, 255, 255, .62); }
.btn.light { background: #fff; color: #000000; border-color: #fff; width: max-content; }
.btn.light:hover { background: #e9f0ff; }
.feat-ctl { position: absolute; right: 18px; bottom: 16px; z-index: 3; display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(0, 0, 0, .6); border: 1px solid rgba(255, 255, 255, .24); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.feat-ctl button { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: #fff; cursor: pointer; }
.feat-ctl button:hover { background: rgba(255, 255, 255, .16); }
.feat-ctl span { min-width: 50px; padding: 0 6px; text-align: center; font-size: .82rem; font-weight: 700; font-variant-numeric: tabular-nums; }
@media (max-width: 719px) {
  .feat { background: var(--surface); color: var(--text); border: 1px solid var(--border); min-height: 0; }
  .feat-slide { display: block; min-height: 0; }
  .feat-slide::before { display: none; }
  .feat-bg { position: relative; inset: auto; z-index: 0; height: 150px; }
  .feat-bg::after { opacity: .42; top: 6%; bottom: 6%; width: 70%; }
  .feat-badge { position: absolute; top: 12px; left: 12px; z-index: 2; background: rgba(0, 0, 0, .55); color: #fff; }
  .feat-body { padding: 16px 16px 8px; max-width: none; }
  .feat h2 { color: var(--text); }
  .feat-sum { color: var(--muted); }
  .feat-note { color: var(--muted); }
  .btn.light { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
  .feat-ctl { position: static; margin: 4px 16px 14px auto; width: max-content; background: var(--surface-2); border-color: var(--border); color: var(--text); }
  .feat-ctl button { color: inherit; }
}

/* ---------- Statistics row ---------- */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
@media (max-width: 900px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.stat { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; }
.stat-ic { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 10px; background: var(--accent-soft); color: var(--accent); }
.stat small { display: block; color: var(--muted); font-size: .8rem; }
.stat b { display: block; font-size: 1.45rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
.stat .sub { display: block; color: var(--good); font-size: .76rem; font-weight: 600; }
.stat .sub.neutral { color: var(--muted); font-weight: 500; }

/* ---------- Home: Article of the Day, topics, quick links ---------- */
.home-grid { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) { .home-grid { grid-template-columns: minmax(0, 1.9fr) minmax(280px, 1fr); align-items: start; } }
.aotd { display: grid; gap: 14px 18px; border-left: 5px solid var(--accent); container-type: inline-size;
  grid-template-columns: 96px minmax(0, 1fr); grid-template-areas: "art top" "rest rest"; }
.aotd-art { grid-area: art; width: 96px; height: 96px; }
.aotd-top { grid-area: top; min-width: 0; }
.aotd-rest { grid-area: rest; min-width: 0; }
@media (min-width: 720px) {
  .aotd { grid-template-columns: 210px minmax(0, 1fr); grid-template-areas: "art top" "art rest"; }
  .aotd-art { width: auto; height: 100%; min-height: 230px; }
}
.aotd-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.label { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; letter-spacing: .07em; text-transform: uppercase; font-weight: 800; color: var(--accent); }
.aotd h2 { font-size: clamp(1.1rem, 2.1vw, 1.35rem); margin: 8px 0 4px; }
.aotd h2 a { color: var(--text); text-decoration: none; }
.aotd h2 a:hover { color: var(--accent); text-decoration: underline; }
.summary { margin: 4px 0 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.src-note { margin: 4px 0 0; font-size: .78rem; color: var(--muted); }
details.more { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 10px; }
details.more > summary { cursor: pointer; font-weight: 700; color: var(--accent); }
.facts { margin: 12px 0 0; display: grid; gap: 10px; }
.facts dt { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; }
.facts dd { margin: 2px 0 0; }
.takeaway { display: flex; gap: 10px; margin-top: 12px; padding: 12px 14px; border-radius: 10px; background: var(--good-soft); }
.takeaway .ic { color: var(--good); margin-top: 3px; }
.takeaway strong { display: block; font-size: .82rem; color: var(--good); }
.insight-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.insight-row .takeaway { grid-column: 1 / -1; margin-top: 0; }
.tile { padding: 10px 12px; border-radius: 10px; background: var(--surface-2); }
.tile b { display: block; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.note { background: var(--warn-soft); border-radius: 10px; padding: 9px 12px; margin-top: 10px; font-size: .92rem; }
.autolabel { font-size: .8rem; color: var(--muted); margin-top: 10px; }
.foot-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-top: 10px; font-size: .85rem; color: var(--muted); }
.foot-row > span { display: inline-flex; align-items: center; gap: 6px; }

.spec-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--accent-soft); color: var(--accent); flex: none; }
.quick { list-style: none; margin: 0; padding: 0; }
.quick a { display: flex; align-items: center; gap: 12px; padding: 11px 4px; text-decoration: none; color: var(--text); font-weight: 600; border-top: 1px solid var(--border); }
.quick li:first-child a { border-top: 0; }
.quick a .grow { flex: 1; }
.quick a:hover { color: var(--accent); }

/* Specialties page */
.spec-cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); }
.spec-card { display: grid; gap: 10px; text-decoration: none; color: var(--text); padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.spec-card:hover { border-color: var(--accent); }
.spec-card .art { height: 96px; }
.spec-card strong { font-size: 1.02rem; }

/* ---------- Search, results, filters ---------- */
.search-layout { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .search-layout { grid-template-columns: 250px minmax(0, 1fr); align-items: start; } }
.filters { display: grid; gap: 12px; }
.filters h2 { margin: 0; }
.filters label { display: grid; gap: 4px; font-weight: 600; font-size: .9rem; min-width: 0; }
.filters select, .filters input[type="number"] { width: 100%; min-width: 0; }
.filters .check { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.filters .years { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.filters .btn { width: 100%; }
.results { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; grid-template-columns: minmax(0, 1fr); }
.result { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
.result h3 { margin: 0 0 4px; }
.result h3 a { color: var(--text); text-decoration: none; }
.result h3 a:hover { color: var(--accent); text-decoration: underline; }
.pager { display: flex; gap: 10px; align-items: center; justify-content: center; margin: 20px 0; flex-wrap: wrap; }
.fchips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.fchip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px 5px 12px; border-radius: 999px; font-size: .86rem; font-weight: 600; background: var(--accent-soft); color: var(--accent); text-decoration: none; border: 1px solid transparent; }
.fchip:hover { border-color: var(--accent); }
.fchip .ic { width: 14px; height: 14px; stroke-width: 2.6; }
.fchip.clear { background: transparent; color: var(--muted); border-color: var(--border); padding-right: 12px; }
.results-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.filters-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sheet-backdrop { display: none; }
@media (min-width: 1000px) { .results-toolbar, .sheet-close { display: none; } }
@media (max-width: 999px) {
  .filters-wrap { display: none; }
  .filters-wrap.open { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; max-height: 86vh; overflow-y: auto; overscroll-behavior: contain;
    border-radius: 20px 20px 0 0; border-bottom: 0; padding: 18px 18px calc(22px + env(safe-area-inset-bottom)); box-shadow: 0 -12px 40px rgba(0, 0, 0, .35); animation: sheet-up .22s ease-out; }
  .sheet-open .sheet-backdrop { display: block; position: fixed; inset: 0; z-index: 45; background: rgba(0, 0, 0, .55); }
  html.sheet-open { overflow: hidden; }
}
@keyframes sheet-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- Article page ---------- */
.backlink { margin-bottom: 12px; }
.article-grid { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) { .article-grid { grid-template-columns: minmax(0, 1.9fr) minmax(260px, 1fr); align-items: start; } }
.article-art { height: 160px; margin-bottom: 14px; border-radius: 14px; }
.title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.title-row h1 { flex: 1 1 320px; margin: 0; }
.title-row .row { flex: none; }
.tablist { display: flex; gap: 2px; margin: 18px 0 16px; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.tablist::-webkit-scrollbar { display: none; }
.tab { padding: 10px 14px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; color: var(--muted); font-weight: 600; cursor: pointer; white-space: nowrap; }
.tab:hover { color: var(--text); }
.tab[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); }
.tabpanel[hidden] { display: none; }
.kv { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 4px 12px; margin: 10px 0; font-size: .92rem; }
.kv dt { color: var(--muted); font-weight: 700; }
.kv dd { margin: 0; overflow-wrap: anywhere; }
.abstract p { margin: 0 0 10px; }
.abstract .lbl { font-weight: 800; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.takeaway-box { margin-top: 16px; padding: 14px 16px; border-radius: 12px; background: var(--good-soft); border: 1px solid color-mix(in srgb, var(--good) 35%, transparent); }
.takeaway-box h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; color: var(--good); }
.takeaway-box ul { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }
.takeaway-box li b { font-weight: 700; }
.linklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.linklist li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.mesh { display: flex; gap: 6px; flex-wrap: wrap; }
.mesh a { text-decoration: none; }
.info-list { margin: 0; display: grid; gap: 10px; }
.info-list > div { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 10px; align-items: center; }
.info-list .spec-ic { grid-row: 1 / span 2; }
.info-list dt { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; }
.info-list dd { margin: 0; overflow-wrap: anywhere; }
.cite-out { width: 100%; resize: vertical; min-height: 140px; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); color: var(--text); font: .88rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-wrap: anywhere; }
.cite-block { display: grid; gap: 12px; }
.cite-block .meta { margin: 0; }
.cite-block .actions { margin-top: 0; }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg .btn[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* ---------- Archive, saved, dialogs, misc ---------- */
.archive-list { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); }
.archive-list li { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; }
.archive-list time { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--muted); }
@media (max-width: 520px) { .archive-list li { grid-template-columns: 1fr; gap: 2px; } }
.export-row { margin-top: 12px; }
.card .row select { flex: 1 1 220px; min-width: 0; }
.cite-dialog { border: 1px solid var(--border); border-radius: 16px; background: var(--surface); color: var(--text); padding: 0; width: min(640px, calc(100vw - 24px)); max-height: calc(100vh - 24px); box-shadow: 0 24px 60px rgba(0, 0, 0, .45); }
.cite-dialog::backdrop { background: rgba(0, 0, 0, .6); }
.dlg-body { padding: 20px; display: grid; gap: 12px; }
.dlg-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dlg-head h2 { margin: 0; }
.dlg-body .actions { margin-top: 0; }
.dlg-body .meta { margin: 0; }
.skeleton { background: linear-gradient(90deg, var(--surface-2), var(--surface), var(--surface-2)); background-size: 200% 100%; animation: sk 1.4s linear infinite; border-radius: 8px; height: 18px; margin: 10px 0; }
.skeleton.big { height: 120px; }
.skeleton.feat-sk { height: 250px; border-radius: 18px; margin: 0 0 18px; }
@keyframes sk { to { background-position: -200% 0; } }
.toast { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); z-index: 90; background: var(--text); color: var(--bg); padding: 9px 16px; border-radius: 999px; font-weight: 600; font-size: .9rem; opacity: 0; pointer-events: none; transition: opacity .2s; max-width: 90vw; }
.toast.show { opacity: 1; }
@media (min-width: 960px) { .toast { bottom: 28px; } }
.prose { max-width: 70ch; }
.prose h2 { margin-top: 1.4em; }
.site-footer { margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--border); color: var(--muted); font-size: .84rem; }
.results + p, .results + .row, .archive-list + p { margin-top: 18px; }
.iconline { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; }
.iconline .ic { width: 1.1em; height: 1.1em; flex: none; }

/* ---------- Long-text safety: a long unbroken title must never widen a card or the page ---------- */
.content, main, .card, .panel, .result, .stat, .aotd-top, .aotd-rest, .spec-card, .archive-list li > div,
.article-grid > *, .home-grid > *, .search-layout > *, .info-list > div, .feat-body { min-width: 0; }
h1, h2, h3, .meta, .result, .takeaway, .facts dd, .abstract p, .kv dd, .badge, .summary, .feat-sum { overflow-wrap: anywhere; }
html, body { max-width: 100%; overflow-x: clip; }

/* ---------- Carousel artwork variants (one illustration per slide) ---------- */
.feat-bg[data-variant="1"]::after { background-image: url("/img/cells.svg"); opacity: .55; }
.feat-bg[data-variant="2"]::after { background-image: url("/img/dna.svg"); opacity: .7; }
.feat-bg[data-variant="3"]::after { background-image: url("/img/molecule.svg"); opacity: .95; }
.feat-bg[data-variant="4"]::after { background-image: url("/img/tubes.svg"); opacity: .55; }

/* ---------- Search page: heading, empty state, date fields ---------- */
.page-sub { margin: -4px 0 18px; color: var(--muted); }
.datefield { position: relative; }
.datefield input { width: 100%; padding-right: 36px; -moz-appearance: textfield; appearance: textfield; }
.datefield input::-webkit-outer-spin-button, .datefield input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.datefield .ic { position: absolute; right: 11px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
.empty-state { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 30px clamp(16px, 4vw, 40px) 34px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.empty-art { width: min(300px, 70%); height: auto; }
.empty-state h2 { margin: 6px 0 0; font-size: clamp(1.3rem, 2.4vw, 1.6rem); }
.empty-state > p { max-width: 52ch; margin: 0; }
.pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px 8px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--accent); font-weight: 600; text-decoration: none; }
.pill .ic { width: 22px; height: 22px; padding: 3px; border-radius: 50%; background: var(--accent-soft); }
.pill:hover { border-color: var(--accent); }
.empty-sep { width: min(560px, 100%); height: 1px; background: var(--border); margin: 12px 0 4px; }
.pop-head { margin: 0; color: var(--text); font-size: .98rem; justify-content: center; }
.pop-head .ic { color: #f97316; }
.empty-state .chips { justify-content: center; }
.chip.with-ic { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); background: var(--surface-2); }
.chip.with-ic .ic { width: 14px; height: 14px; }
.chip.with-ic:hover { color: var(--accent); }

/* ---------- Related-article rows (article Overview) ---------- */
.rel-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rel-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) 20px; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); color: var(--text); text-decoration: none; }
.rel-row:hover { border-color: var(--accent); }
.rel-row b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .95rem; overflow-wrap: anywhere; }
.rel-row .meta { display: block; margin-top: 2px; font-size: .8rem; }
.rel-art { width: 56px; height: 56px; border-radius: 10px; }
.rel-art .art-ic { width: 52%; }
.rel-row > .ic { color: var(--muted); }

/* =====================================================================
   UI polish: loading bar, illustrated states, carousel controls,
   results density, keyboard help
   ===================================================================== */

/* ---------- Loading bar (shown only if a request takes longer than a moment) ---------- */
.progress { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: 3px; overflow: hidden; opacity: 0; pointer-events: none; transition: opacity .2s; }
.progress.show { opacity: 1; }
.progress::before { content: ""; position: absolute; inset: 0 auto 0 -40%; width: 40%; border-radius: 0 3px 3px 0; background: linear-gradient(90deg, transparent, var(--accent), transparent); animation: progress-run 1.1s ease-in-out infinite; }
@keyframes progress-run { to { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .progress::before { inset: 0; width: 100%; animation: none; background: var(--accent); opacity: .6; } }

/* ---------- Illustrated empty / error / not-found states ---------- */
.empty-state.small { padding: 22px clamp(14px, 3vw, 28px) 26px; }
.empty-state.small .empty-art { width: min(220px, 60%); }
.empty-state.small h2 { font-size: 1.15rem; }
.empty-state .state-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; }
.empty-state.is-error { border-color: color-mix(in srgb, var(--bad) 35%, var(--border)); }
.empty-state .tips { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; color: var(--muted); font-size: .9rem; }

/* ---------- Carousel: dots, pause/play, swipe hint ---------- */
.feat-dots { position: absolute; left: clamp(20px, 4vw, 46px); bottom: 20px; z-index: 3; display: flex; align-items: center; color: #fff; }
.feat-dots button { position: relative; width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; color: inherit; }
.feat-dots button::after { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; transform: translate(-50%, -50%); border-radius: 999px; background: currentColor; opacity: .45; transition: width .2s, opacity .2s; }
.feat-dots button[aria-current="true"]::after { width: 22px; opacity: 1; }
.feat-dots button:hover::after { opacity: .8; }
.feat-ctl .feat-pause { width: 32px; height: 32px; }
.swipe-hint { display: none; align-items: center; gap: 6px; margin: 0; font-size: .76rem; color: rgba(255, 255, 255, .7); transition: opacity .6s; }
.swipe-hint.gone { opacity: 0; }
@media (pointer: coarse) { .swipe-hint { display: flex; } }
@media (max-width: 719px) {
  .feat-dots { position: static; justify-content: center; margin: 0 0 2px; color: var(--text); }
  .swipe-hint { color: var(--muted); padding: 0 16px; }
}

/* ---------- Results header + density toggle ---------- */
.results-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.results-head .meta { margin: 0; }
.density { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); }
.density button { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 10px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font-size: .82rem; font-weight: 600; cursor: pointer; }
.density button[aria-pressed="true"] { background: var(--surface); color: var(--accent); box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.results[data-density="compact"] { gap: 8px; }
.results[data-density="compact"] .result { padding: 9px 14px; }
.results[data-density="compact"] .result h3 { font-size: .96rem; margin-bottom: 2px; }
.results[data-density="compact"] .result .authors { display: none; }
.results[data-density="compact"] .result .badges { margin: 4px 0 0; }
.results[data-density="compact"] .result .row { display: none; }

/* ---------- Keyboard shortcuts dialog + footer link ---------- */
.linklike { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; text-decoration: underline; cursor: pointer; }
.shortcuts { width: 100%; border-collapse: collapse; }
.shortcuts th, .shortcuts td { padding: 9px 0; border-top: 1px solid var(--border); text-align: left; font-size: .92rem; vertical-align: top; }
.shortcuts tr:first-child th, .shortcuts tr:first-child td { border-top: 0; }
.shortcuts th { width: 44%; font-weight: 600; white-space: nowrap; padding-right: 12px; }
.shortcuts kbd { display: inline-block; min-width: 22px; padding: 1px 7px; margin-right: 4px; border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 6px; background: var(--surface-2); font: 600 .8rem var(--font); text-align: center; }
@media (min-width: 720px) { .swipe-hint { position: absolute; left: clamp(20px, 4vw, 46px); bottom: 46px; z-index: 3; } }

/* =====================================================================
   Glass UI: frosted, translucent surfaces over a soft colour mesh.
   Falls back to the solid surfaces above where backdrop blur is
   unsupported, and when the visitor asks for reduced transparency.
   ===================================================================== */
:root {
  --glass: rgba(255, 255, 255, .72);
  --glass-strong: rgba(255, 255, 255, .88);
  --glass-soft: rgba(255, 255, 255, .66);
  --glass-input: rgba(255, 255, 255, .78);
  --glass-hover: rgba(255, 255, 255, .92);
  --glass-border: rgba(255, 255, 255, .85);
  --glass-field-border: rgba(30, 60, 130, .2);
  --glass-edge: rgba(30, 60, 130, .08);
  --glass-shadow: 0 10px 34px rgba(36, 60, 140, .13), inset 0 1px 0 rgba(255, 255, 255, .95);
  --glass-blur: blur(18px) saturate(165%);
  --mesh:
    radial-gradient(58% 52% at 6% 2%, rgba(99, 155, 255, .46), transparent 70%),
    radial-gradient(48% 48% at 96% 6%, rgba(167, 139, 250, .36), transparent 70%),
    radial-gradient(55% 50% at 90% 98%, rgba(45, 212, 191, .30), transparent 70%),
    radial-gradient(44% 44% at 2% 94%, rgba(251, 191, 36, .16), transparent 70%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --glass: rgba(24, 27, 34, .56);
    --glass-strong: rgba(16, 18, 24, .84);
    --glass-soft: rgba(30, 34, 44, .44);
    --glass-input: rgba(255, 255, 255, .07);
    --glass-hover: rgba(255, 255, 255, .11);
    --glass-border: rgba(255, 255, 255, .12);
    --glass-field-border: rgba(255, 255, 255, .16);
    --glass-edge: rgba(255, 255, 255, .04);
    --glass-shadow: 0 10px 34px rgba(0, 0, 0, .62), inset 0 1px 0 rgba(255, 255, 255, .09);
    --mesh:
      radial-gradient(58% 52% at 6% 2%, rgba(76, 154, 255, .40), transparent 70%),
      radial-gradient(48% 48% at 96% 6%, rgba(139, 92, 246, .36), transparent 70%),
      radial-gradient(55% 50% at 90% 98%, rgba(20, 184, 166, .28), transparent 70%),
      radial-gradient(44% 44% at 2% 94%, rgba(236, 72, 153, .18), transparent 70%),
      radial-gradient(40% 36% at 52% 46%, rgba(76, 154, 255, .10), transparent 72%);
  }
}
:root[data-theme="dark"] {
  --glass: rgba(24, 27, 34, .56);
  --glass-strong: rgba(16, 18, 24, .84);
  --glass-soft: rgba(30, 34, 44, .44);
  --glass-input: rgba(255, 255, 255, .07);
  --glass-hover: rgba(255, 255, 255, .11);
  --glass-border: rgba(255, 255, 255, .12);
  --glass-field-border: rgba(255, 255, 255, .16);
  --glass-edge: rgba(255, 255, 255, .04);
  --glass-shadow: 0 10px 34px rgba(0, 0, 0, .62), inset 0 1px 0 rgba(255, 255, 255, .09);
  --mesh:
    radial-gradient(58% 52% at 6% 2%, rgba(76, 154, 255, .40), transparent 70%),
    radial-gradient(48% 48% at 96% 6%, rgba(139, 92, 246, .36), transparent 70%),
    radial-gradient(55% 50% at 90% 98%, rgba(20, 184, 166, .28), transparent 70%),
    radial-gradient(44% 44% at 2% 94%, rgba(236, 72, 153, .18), transparent 70%),
      radial-gradient(40% 36% at 52% 46%, rgba(76, 154, 255, .10), transparent 72%);
}

/* The colour mesh sits behind everything and never moves, so blurring it stays cheap. */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--mesh); }

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  /* Large frosted panes */
  .sidebar, .topbar, .card, .panel, .stat, .empty-state, .spec-card, .tabbar, .theme-seg, .density {
    background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  }
  .card, .panel, .stat, .empty-state, .spec-card { border-color: var(--glass-border); box-shadow: var(--glass-shadow), 0 0 0 1px var(--glass-edge); }
  .sidebar { border-right-color: var(--glass-border); box-shadow: 4px 0 30px rgba(0, 0, 0, .05); }
  .topbar { border-bottom: 1px solid var(--glass-border); }
  .tabbar { border-top-color: var(--glass-border); }
  .theme-seg, .density { border-color: var(--glass-border); }
  .theme-seg button[aria-pressed="true"], .density button[aria-pressed="true"] { background: var(--glass-strong); }

  /* Overlays get more opacity so text stays readable over whatever is behind them */
  .drawer, .cite-dialog, .filters-wrap.open { background: var(--glass-strong); -webkit-backdrop-filter: blur(28px) saturate(175%); backdrop-filter: blur(28px) saturate(175%); }
  .cite-dialog, .drawer { border-color: var(--glass-border); }
  .cite-dialog { box-shadow: var(--glass-shadow), 0 24px 60px rgba(0, 0, 0, .35); }

  /* List rows: translucent but not individually blurred (hundreds of blurred rows would be slow) */
  .result, .rel-row, .archive-list li, .linklist li, .tile { background: var(--glass-soft); border-color: var(--glass-border); }
  .result, .rel-row, .archive-list li { box-shadow: 0 2px 12px rgba(0, 0, 0, .05); }

  /* Controls */
  input[type="search"], input[type="text"], input[type="number"], select, .cite-out { background: var(--glass-input); border-color: var(--glass-field-border); }
  .btn:not(.primary):not(.light), .chip, .pill, .icon-btn { background: var(--glass-input); border-color: var(--glass-field-border); }
  .btn:not(.primary):not(.light):hover, .icon-btn:hover { background: var(--glass-hover); }
  .chip:hover, .pill:hover { background: var(--glass-hover); }
  input[type="checkbox"] { background: var(--glass-input); border-color: var(--muted); }
  input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); }
  .nav a:hover, .result:hover, .rel-row:hover, .spec-card:hover { background: var(--glass-hover); }
  .feat { border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); }
}
@supports ((backdrop-filter: blur(1px)) and (appearance: base-select)) {
  ::picker(select) { background: var(--glass-strong); -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%); border-color: var(--glass-border); }
}
.cite-dialog::backdrop, .drawer::backdrop { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }


/* =====================================================================
   Liquid glass: big rounded tiles, bright rim light, vivid colour behind.
   Overrides the flatter glass above. Same fallbacks apply.
   ===================================================================== */
:root {
  --accent: #1d4ed8;               /* a touch deeper, so blue text passes contrast on glass */
  --muted: #4e5e77;
  --r-xl: 30px; --r-lg: 24px; --r-md: 18px;
  --glass: rgba(255, 255, 255, .64);
  --glass-strong: rgba(255, 255, 255, .86);
  --glass-soft: rgba(255, 255, 255, .6);
  --glass-input: rgba(255, 255, 255, .7);
  --glass-hover: rgba(255, 255, 255, .88);
  --glass-border: rgba(255, 255, 255, .78);
  --glass-sheen: rgba(255, 255, 255, .6);
  --rim: inset 0 1px 0 rgba(255, 255, 255, .98), inset 1px 0 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(255, 255, 255, .3), inset 0 0 26px rgba(255, 255, 255, .3);
  --rim-soft: inset 0 1px 0 rgba(255, 255, 255, .9);
  --glass-shadow: 0 20px 52px rgba(20, 60, 170, .22), var(--rim);
  --glass-blur: blur(30px) saturate(190%);
  --pill-active-bg: #ffffff;
  --pill-active-ink: #1d4ed8;
  --mesh:
    radial-gradient(70% 60% at 10% 6%, rgba(56, 132, 255, .58), transparent 68%),
    radial-gradient(58% 54% at 94% 10%, rgba(150, 110, 255, .46), transparent 68%),
    radial-gradient(64% 58% at 86% 94%, rgba(0, 196, 214, .42), transparent 68%),
    radial-gradient(52% 50% at 4% 92%, rgba(255, 170, 96, .26), transparent 68%),
    radial-gradient(40% 38% at 50% 48%, rgba(120, 170, 255, .22), transparent 72%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --glass: rgba(34, 40, 58, .5);
    --glass-strong: rgba(14, 18, 30, .86);
    --glass-soft: rgba(38, 46, 66, .42);
    --glass-input: rgba(255, 255, 255, .09);
    --glass-hover: rgba(255, 255, 255, .15);
    --glass-border: rgba(255, 255, 255, .16);
    --glass-sheen: rgba(255, 255, 255, .15);
    --rim: inset 0 1px 0 rgba(255, 255, 255, .34), inset 1px 0 0 rgba(255, 255, 255, .15), inset 0 -1px 0 rgba(255, 255, 255, .05), inset 0 0 26px rgba(255, 255, 255, .045);
    --rim-soft: inset 0 1px 0 rgba(255, 255, 255, .2);
    --glass-shadow: 0 20px 52px rgba(0, 0, 0, .65), var(--rim);
    --pill-active-ink: #0b3a8f;
    --mesh:
      radial-gradient(70% 60% at 10% 6%, rgba(50, 112, 255, .50), transparent 68%),
      radial-gradient(58% 54% at 94% 10%, rgba(140, 90, 250, .44), transparent 68%),
      radial-gradient(64% 58% at 86% 94%, rgba(0, 190, 204, .32), transparent 68%),
      radial-gradient(52% 50% at 4% 92%, rgba(230, 70, 150, .24), transparent 68%),
      radial-gradient(40% 38% at 50% 48%, rgba(76, 154, 255, .14), transparent 72%);
  }
}
:root[data-theme="dark"] {
  --glass: rgba(34, 40, 58, .5);
  --glass-strong: rgba(14, 18, 30, .86);
  --glass-soft: rgba(38, 46, 66, .42);
  --glass-input: rgba(255, 255, 255, .09);
  --glass-hover: rgba(255, 255, 255, .15);
  --glass-border: rgba(255, 255, 255, .16);
  --glass-sheen: rgba(255, 255, 255, .15);
  --rim: inset 0 1px 0 rgba(255, 255, 255, .34), inset 1px 0 0 rgba(255, 255, 255, .15), inset 0 -1px 0 rgba(255, 255, 255, .05), inset 0 0 26px rgba(255, 255, 255, .045);
  --rim-soft: inset 0 1px 0 rgba(255, 255, 255, .2);
  --glass-shadow: 0 20px 52px rgba(0, 0, 0, .65), var(--rim);
  --pill-active-ink: #0b3a8f;
  --mesh:
    radial-gradient(70% 60% at 10% 6%, rgba(50, 112, 255, .50), transparent 68%),
    radial-gradient(58% 54% at 94% 10%, rgba(140, 90, 250, .44), transparent 68%),
    radial-gradient(64% 58% at 86% 94%, rgba(0, 190, 204, .32), transparent 68%),
    radial-gradient(52% 50% at 4% 92%, rgba(230, 70, 150, .24), transparent 68%),
    radial-gradient(40% 38% at 50% 48%, rgba(76, 154, 255, .14), transparent 72%);
}

/* ---------- Shapes: big radii, pills and circles ---------- */
.card, .panel, .empty-state, .feat { border-radius: var(--r-xl); }
.stat, .spec-card, .result { border-radius: var(--r-lg); }
.rel-row, .archive-list li, .linklist li, .tile, .note, .takeaway, .takeaway-box, .callout, .art { border-radius: var(--r-md); }
.article-art, .aotd-art { border-radius: var(--r-lg); }
.feat-bg { border-radius: 0; }
.btn, .searchbar .field input, .density, .density button, .pill, .chip, .fchip, .badge { border-radius: 999px; }
input[type="number"], input[type="text"], select { border-radius: 16px; }
.cite-out { border-radius: var(--r-md); }
.stat-ic, .spec-ic { border-radius: 50%; }
.cite-dialog { border-radius: 32px; }
.nav a { border-radius: 999px; }

/* ---------- Surfaces: sheen, rim light, deeper shadows ---------- */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .sidebar, .topbar, .card, .panel, .stat, .empty-state, .spec-card, .tabbar, .theme-seg, .density {
    background-image: linear-gradient(135deg, var(--glass-sheen), transparent 48%);
  }
  .card, .panel, .stat, .empty-state, .spec-card, .sidebar, .topbar, .tabbar { border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); }
  .result, .rel-row, .archive-list li { box-shadow: var(--rim-soft), 0 8px 24px rgba(10, 30, 90, .10); }
  .btn:not(.primary):not(.light), .chip, .pill, .icon-btn, .theme-seg, .density { box-shadow: var(--rim-soft); }
  .btn.primary { box-shadow: 0 10px 26px color-mix(in srgb, var(--accent) 45%, transparent), inset 0 1px 0 rgba(255, 255, 255, .42); }
  .feat { box-shadow: var(--glass-shadow); }
  .result, .spec-card, .rel-row { transition: transform .2s ease, background .2s ease, box-shadow .2s ease; }
  .result:hover, .spec-card:hover, .rel-row:hover { transform: translateY(-2px); }
}

/* ---------- Active state = solid white pill, as in the reference ---------- */
.nav a[aria-current="page"] { background: var(--pill-active-bg); color: var(--pill-active-ink); box-shadow: 0 6px 18px rgba(20, 60, 170, .22), var(--rim-soft); }
.theme-seg button, .density button { border-radius: 999px; }
.theme-seg button[aria-pressed="true"], .density button[aria-pressed="true"] { background: var(--pill-active-bg); color: var(--pill-active-ink); box-shadow: 0 3px 10px rgba(20, 60, 170, .25); }
.tabbar a { border-radius: 22px; margin: 6px 3px; padding: 8px 2px; }
.tabbar a[aria-current="page"] { background: var(--pill-active-bg); color: var(--pill-active-ink); box-shadow: 0 4px 14px rgba(20, 60, 170, .22); }

/* ---------- Floating layout: sidebar, top bar, tab bar and menu hover above the page ---------- */
.topbar { margin: 10px auto 0; width: calc(100% - 2 * clamp(16px, 3vw, 40px)); max-width: calc(1240px - 2 * clamp(16px, 3vw, 40px)); padding: 10px 14px; top: 10px; border-radius: var(--r-xl); gap: 10px; }
.searchbar .field input { min-height: 46px; }
@media (min-width: 960px) {
  .topbar { padding: 10px 14px; flex-wrap: nowrap; }
  .sidebar { margin: 12px 0 12px 12px; top: 12px; height: calc(100vh - 24px); border-radius: var(--r-xl); border-right: 1px solid var(--glass-border); }
  .shell { grid-template-columns: calc(var(--sidebar-w) + 12px) minmax(0, 1fr); }
}
@media (max-width: 959px) {
  .tabbar { inset: auto 12px calc(12px + env(safe-area-inset-bottom)) 12px; border-radius: 30px; padding-bottom: 0; border: 1px solid var(--glass-border); }
  .content { padding-bottom: 116px; }
  .toast { bottom: 100px; }
  .drawer { margin: 12px 12px 12px auto; height: calc(100dvh - 24px); max-height: calc(100dvh - 24px); border-radius: var(--r-xl); border: 1px solid var(--glass-border); }
}
@media (max-width: 999px) { .filters-wrap.open { border-radius: 30px 30px 0 0; } }

/* Pressed buttons must outrank the glass button style (Save/Saved, citation style tabs). */
.btn:not(.primary):not(.light)[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); border-color: transparent; box-shadow: none; }
.seg .btn:not(.primary):not(.light)[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 40%, transparent); }

/* =====================================================================
   Stronger glass: more see-through panes, heavier blur and saturation,
   brighter rim light with a refracted blue edge glow, richer backdrop.
   ===================================================================== */
:root {
  --accent: #1a44b8;
  --pill-active-ink: #1a44b8;
  --muted: #3a4962;
  --glass: rgba(255, 255, 255, .44);
  --glass-strong: rgba(255, 255, 255, .8);
  --glass-soft: rgba(255, 255, 255, .5);
  --glass-input: rgba(255, 255, 255, .56);
  --glass-hover: rgba(255, 255, 255, .78);
  --glass-border: rgba(255, 255, 255, .92);
  --glass-sheen: rgba(255, 255, 255, .85);
  --glass-gloss: rgba(255, 255, 255, .62);
  --rim: inset 0 1.5px 0 rgba(255, 255, 255, 1), inset 1.5px 0 0 rgba(255, 255, 255, .7), inset 0 -1px 0 rgba(255, 255, 255, .4), inset 0 0 38px rgba(255, 255, 255, .42), inset 0 -22px 34px -20px rgba(80, 130, 255, .34);
  --rim-soft: inset 0 1.5px 0 rgba(255, 255, 255, 1), inset 0 -10px 18px -12px rgba(80, 130, 255, .22);
  --glass-shadow: 0 28px 68px rgba(20, 60, 190, .32), 0 2px 8px rgba(20, 60, 190, .12), var(--rim);
  --glass-blur: blur(44px) saturate(240%) brightness(1.06);
  --mesh:
    radial-gradient(72% 62% at 8% 4%, rgba(40, 120, 255, .78), transparent 68%),
    radial-gradient(60% 56% at 96% 8%, rgba(150, 100, 255, .64), transparent 68%),
    radial-gradient(66% 60% at 88% 96%, rgba(0, 200, 220, .58), transparent 68%),
    radial-gradient(54% 52% at 2% 94%, rgba(255, 160, 90, .40), transparent 68%),
    radial-gradient(44% 40% at 50% 46%, rgba(120, 170, 255, .34), transparent 72%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --accent: #4c9aff;
    --pill-active-ink: #0b3a8f;
    --muted: #b2b9c6;
    --glass: rgba(40, 48, 74, .34);
    --glass-strong: rgba(12, 16, 28, .86);
    --glass-soft: rgba(44, 54, 80, .32);
    --glass-input: rgba(255, 255, 255, .12);
    --glass-hover: rgba(255, 255, 255, .2);
    --glass-border: rgba(255, 255, 255, .24);
    --glass-sheen: rgba(255, 255, 255, .26);
    --glass-gloss: rgba(255, 255, 255, .14);
    --rim: inset 0 1.5px 0 rgba(255, 255, 255, .55), inset 1.5px 0 0 rgba(255, 255, 255, .26), inset 0 -1px 0 rgba(255, 255, 255, .09), inset 0 0 34px rgba(255, 255, 255, .07), inset 0 -22px 34px -20px rgba(90, 150, 255, .34);
    --rim-soft: inset 0 1.5px 0 rgba(255, 255, 255, .34), inset 0 -10px 18px -12px rgba(90, 150, 255, .2);
    --glass-shadow: 0 28px 68px rgba(0, 0, 0, .78), 0 2px 8px rgba(0, 0, 0, .4), var(--rim);
    --glass-blur: blur(44px) saturate(220%) brightness(1.14);
    --mesh:
      radial-gradient(72% 62% at 8% 4%, rgba(46, 112, 255, .70), transparent 68%),
      radial-gradient(60% 56% at 96% 8%, rgba(140, 90, 250, .60), transparent 68%),
      radial-gradient(66% 60% at 88% 96%, rgba(0, 190, 206, .46), transparent 68%),
      radial-gradient(54% 52% at 2% 94%, rgba(236, 72, 153, .38), transparent 68%),
      radial-gradient(44% 40% at 50% 46%, rgba(76, 154, 255, .24), transparent 72%);
  }
}
:root[data-theme="dark"] {
  --accent: #4c9aff;
  --pill-active-ink: #0b3a8f;
  --muted: #b2b9c6;
  --glass: rgba(40, 48, 74, .34);
  --glass-strong: rgba(12, 16, 28, .86);
  --glass-soft: rgba(44, 54, 80, .32);
  --glass-input: rgba(255, 255, 255, .12);
  --glass-hover: rgba(255, 255, 255, .2);
  --glass-border: rgba(255, 255, 255, .24);
  --glass-sheen: rgba(255, 255, 255, .26);
  --glass-gloss: rgba(255, 255, 255, .14);
  --rim: inset 0 1.5px 0 rgba(255, 255, 255, .55), inset 1.5px 0 0 rgba(255, 255, 255, .26), inset 0 -1px 0 rgba(255, 255, 255, .09), inset 0 0 34px rgba(255, 255, 255, .07), inset 0 -22px 34px -20px rgba(90, 150, 255, .34);
  --rim-soft: inset 0 1.5px 0 rgba(255, 255, 255, .34), inset 0 -10px 18px -12px rgba(90, 150, 255, .2);
  --glass-shadow: 0 28px 68px rgba(0, 0, 0, .78), 0 2px 8px rgba(0, 0, 0, .4), var(--rim);
  --glass-blur: blur(44px) saturate(220%) brightness(1.14);
  --mesh:
    radial-gradient(72% 62% at 8% 4%, rgba(46, 112, 255, .70), transparent 68%),
    radial-gradient(60% 56% at 96% 8%, rgba(140, 90, 250, .60), transparent 68%),
    radial-gradient(66% 60% at 88% 96%, rgba(0, 190, 206, .46), transparent 68%),
    radial-gradient(54% 52% at 2% 94%, rgba(236, 72, 153, .38), transparent 68%),
    radial-gradient(44% 40% at 50% 46%, rgba(76, 154, 255, .24), transparent 72%);
}

/* A second, softer "gloss" highlight in the top-left corner of every pane, on top of the diagonal sheen */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .sidebar, .topbar, .card, .panel, .stat, .empty-state, .spec-card, .tabbar, .theme-seg, .density {
    background-image: radial-gradient(120% 70% at 0% 0%, var(--glass-gloss), transparent 55%), linear-gradient(135deg, var(--glass-sheen), transparent 46%);
  }
  .btn:not(.primary):not(.light), .chip, .pill, .icon-btn {
    -webkit-backdrop-filter: blur(14px) saturate(200%); backdrop-filter: blur(14px) saturate(200%);
    background-image: linear-gradient(180deg, var(--glass-gloss), transparent 70%);
  }
  .nav a:hover { box-shadow: var(--rim-soft); }
  .result:hover, .spec-card:hover, .rel-row:hover { transform: translateY(-3px); box-shadow: var(--glass-shadow); }
  /* the carousel and big feature panes get the full deep shadow */
  .feat { box-shadow: var(--glass-shadow); }
}

/* =====================================================================
   Stability: blur only where content really passes underneath.
   A big blur on a pane near the window edge samples outside the window and leaves a visible
   seam, and blurs nested inside blurred panes flicker on hover. Static panes sit over a smooth,
   fixed gradient, where blur adds nothing but those artifacts, so they stay translucent with the
   same rim light and sheen. The sticky top bar, the tab bar and overlays keep their blur.
   ===================================================================== */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .sidebar, .card, .panel, .stat, .empty-state, .spec-card, .theme-seg, .density,
  .btn:not(.primary):not(.light), .chip, .pill, .icon-btn {
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .topbar, .tabbar { -webkit-backdrop-filter: blur(24px) saturate(200%); backdrop-filter: blur(24px) saturate(200%); }
}
/* Give the fixed backdrop its own compositor layer so scrolling and hovering never repaint it. */
body::before { transform: translateZ(0); }

/* Visitors who ask for reduced transparency get the solid look (placed last so it wins). */
@media (prefers-reduced-transparency: reduce) {
  :root:root {
    --glass: var(--surface); --glass-strong: var(--surface); --glass-soft: var(--surface); --glass-input: var(--surface);
    --glass-hover: var(--surface-2); --glass-border: var(--border); --glass-field-border: var(--border); --glass-edge: transparent;
    --glass-sheen: transparent; --glass-gloss: transparent; --glass-shadow: none; --rim: none; --rim-soft: none; --glass-blur: none; --mesh: none;
  }
}