:root {
  --bg: #f6f8f8; --surface: #ffffff; --ink: #14201f; --muted: #5b6b6a; --line: #dfe6e5;
  --brand: #0f766e; --brand-ink: #ffffff; --brand-soft: #e2f3f1;
  --good: #166534; --good-bg: #dcfce7; --warn: #92400e; --warn-bg: #fef3c7; --bad: #991b1b; --bad-bg: #fee2e2; --bad-ink: #ffffff;
  --info: #1e40af; --info-bg: #dbeafe; --grey-bg: #eceff0;
  --saved: #b45309; /* the saved star; dark mode lightens it */
  --control-border: #7a8988; /* edge of a text field / select: >= 3:1 on --surface and --bg in both themes; --line stays for dividers */
  --radius: 12px; --shadow: 0 1px 2px rgba(20,32,31,.06), 0 4px 16px rgba(20,32,31,.05);
  color-scheme: light; /* native popups we can't fully restyle (select, scrollbars) follow the site theme, not the OS default */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d1514; --surface: #142120; --ink: #e6efee; --muted: #93a6a4; --line: #24393a;
    --brand: #2dd4bf; --brand-ink: #062a27; --brand-soft: #123331;
    --good: #86efac; --good-bg: #10361f; --warn: #fcd34d; --warn-bg: #3a2c0b; --bad: #fca5a5; --bad-bg: #3d1414; --bad-ink: #3d1414;
    --info: #93c5fd; --info-bg: #14274a; --grey-bg: #1d2e2d; --shadow: none; --saved: #f59e0b;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0d1514; --surface: #142120; --ink: #e6efee; --muted: #93a6a4; --line: #24393a;
  --brand: #2dd4bf; --brand-ink: #062a27; --brand-soft: #123331;
  --good: #86efac; --good-bg: #10361f; --warn: #fcd34d; --warn-bg: #3a2c0b; --bad: #fca5a5; --bad-bg: #3d1414; --bad-ink: #3d1414;
  --info: #93c5fd; --info-bg: #14274a; --grey-bg: #1d2e2d; --shadow: none; --saved: #f59e0b;
  color-scheme: dark;
}
:root[data-theme="light"] { color-scheme: light; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.wrap { max-width: 2560px; margin: 0 auto; padding: 0 clamp(16px, 3vw, 56px); } /* fluid: grows with the window */
a { color: var(--brand); }
h1, h2, h3 { line-height: 1.25; margin: 0 0 .5em; }
h1 { font-size: 30px; letter-spacing: -.02em; }
h2 { font-size: 17px; }
h3 { font-size: 17px; }
button, input, select, textarea { font: inherit; color: inherit; }

.top { background: var(--surface); border-bottom: 1px solid var(--line); position: fixed; top: 0; left: 0; right: 0; z-index: 10; } /* fixed: stays put while scrolling (on the study page it scrolls away instead, below) */
body:has(> header.top) { padding-top: 57px; } /* room for the fixed top row */
.top-in { display: flex; align-items: center; justify-content: space-between; height: 56px; }
.brand { font-weight: 700; text-decoration: none; color: var(--ink); display: flex; align-items: center; gap: 8px; font-size: 17px; }
.logo { width: 26px; height: 26px; border-radius: 8px; flex: none; display: block; }
nav { display: flex; gap: 18px; }
nav a { color: var(--muted); text-decoration: none; font-weight: 500; }
nav a.on, nav a:hover { color: var(--ink); }
.pill { background: var(--brand-soft); color: var(--brand); border-radius: 999px; padding: 0 8px; font-size: 12px; font-weight: 600; }

/* hero + search */
.hero { padding: 40px 0 8px; text-align: center; }
.hero p { color: var(--muted); max-width: 640px; margin: 0 auto 22px; }
.searchbar { display: flex; gap: 8px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--control-border); border-radius: var(--radius); padding: 6px; box-shadow: var(--shadow); }
.searchbar .search-field { position: relative; flex: 1 1 220px; min-width: 0; display: flex; align-items: stretch; }
.searchbar .search-field + .search-field { border-left: 1px solid var(--line); flex-basis: 180px; }
.searchbar .search-field input::-webkit-search-decoration { -webkit-appearance: none; }
.searchbar .search-field input { -webkit-appearance: none; appearance: none; width: 100%; border: 0; outline: 0; background: transparent; padding: 8px 12px; font-size: 17px; }
.searchbar .btn { padding: 8px 18px; }

/* search mode switch (Clinical evidence | Any topic), a segmented control at the start of the search bar */
.mode-switch { display: inline-flex; flex: 0 0 auto; background: var(--grey-bg); border-radius: 12px; padding: 4px; gap: 2px; }
.mode-switch label { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; white-space: nowrap; }
.mode-switch label.on { background: var(--surface); color: var(--brand); box-shadow: 0 1px 2px rgb(0 0 0 / .12); }
.mode-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.mode-switch label:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 1px; }
@media (max-width: 560px) { .mode-switch { flex: 1 1 100%; } .mode-switch label { flex: 1; justify-content: center; } }

/* spelling: "Did you mean …?" */
.didyoumean { font-size: 15px; margin: 0 0 12px; padding: 8px 12px; border-radius: 8px; background: var(--brand-soft); }
.didyoumean a { color: var(--brand); }
.typeahead button.fix { color: var(--brand); border-bottom: 1px solid var(--line); border-radius: 8px 8px 0 0; }

/* custom typeahead dropdown - styled to match the theme, unlike a native <datalist>/<select> popup */
.typeahead { position: absolute; left: 0; right: -1px; top: calc(100% + 6px); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); max-height: 260px; overflow-y: auto; z-index: 20; padding: 4px; }
.typeahead[hidden] { display: none; }
.typeahead button { display: block; width: 100%; text-align: left; border: 0; background: transparent; color: inherit; border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 15px; cursor: pointer; }
.typeahead button:hover, .typeahead button.active { background: var(--brand-soft); color: var(--brand); }

/* "Save to…" folder picker popover */
.savemenu { position: absolute; width: 220px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); z-index: 30; padding: 4px; }
.savemenu-title { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 6px 8px 4px; }
.savemenu-opt { display: block; width: 100%; text-align: left; border: 0; background: transparent; color: inherit; border-radius: 8px; padding: 8px; font: inherit; font-size: 15px; cursor: pointer; max-height: 180px; }
.savemenu-opt:hover { background: var(--brand-soft); color: var(--brand); }
.savemenu-new { display: flex; gap: 4px; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
.savemenu-new input { flex: 1; min-width: 0; padding: 6px 8px; border: 1px solid var(--control-border); border-radius: 8px; background: var(--bg); color: inherit; font: inherit; font-size: 13px; }
.btn { background: var(--brand); color: var(--brand-ink); border: 0; border-radius: 8px; padding: 10px 20px; font-weight: 600; cursor: pointer; }
.btn:hover { filter: brightness(1.08); }
.btn:disabled { opacity: .6; cursor: progress; }
.btn.ghost { background: transparent; color: var(--brand); border: 1px solid var(--line); }
.btn.small { padding: 5px 12px; font-size: 13px; min-height: 32px; }
@media (pointer: coarse) { /* touch: Apple's 44pt default target - buttons grow, pills keep their look and get an invisible 44px-tall hit area */
  .btn.small, .star, .icon-btn, .home-x, .menu .bell-x, .pdfv-qclear { min-height: 44px; min-width: 44px; }
  .chip, .qpill { position: relative; }
  .chip::before, .qpill::before { content: ''; position: absolute; inset: -8px 0; }
}
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.examples { margin-top: 14px; color: var(--muted); font-size: 15px; }
.examples .chip em { font-style: normal; color: var(--muted); font-size: 12px; margin-left: 2px; }
@media (hover: none) { .kbd-hint { display: none; } } /* no keyboard shortcut to offer on a touch screen */

/* home page: pick up where you left off */
.home-grid { columns: 300px; column-gap: 16px; max-width: 1180px; margin: 36px auto 48px; } /* masonry: cards of different heights pack into columns instead of leaving gaps under the short ones */
.examples .chip.hub { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); }
.home-grid:empty { display: none; }
.home-grid > .home-card { margin: 0 0 16px; break-inside: avoid; } /* beats the later .card margin-bottom, which doubled the gap between wrapped rows */
.home-card h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 10px; }
.home-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.home-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.home-list li:last-child { border-bottom: 0; }
.home-list.reading li { display: grid; gap: 2px; }
.home-list a { text-decoration: none; font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.home-list a:hover { text-decoration: underline; }
.home-list .byline { margin: 0; }
.home-list:not(.reading) .byline { margin-left: auto; flex: none; white-space: nowrap; }
.home-list.reading a { color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.linklike { border: 0; background: none; padding: 0; font: inherit; font-weight: 500; color: var(--brand); cursor: pointer; text-align: left; min-width: 0; overflow-wrap: anywhere; }
.linklike:hover { text-decoration: underline; }
.home-x { flex: none; min-width: 28px; min-height: 28px; border: 0; background: none; color: var(--muted); cursor: pointer; border-radius: 4px; padding: 0 5px; font-size: 12px; }
.home-x:hover { color: var(--bad); background: var(--bad-bg); }
.home-foot { margin: 8px 0 0; display: flex; gap: 8px; align-items: baseline; }
.home-foot .byline { margin: 0; }
.home-tag { font-size: 11px; font-weight: 700; }
.home-tag.saved { color: var(--saved); }
.home-tag.pdf { color: var(--good); }
.home-grid.steps { columns: auto; }
.home-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px; }
.home-step { display: grid; gap: 4px; padding: 14px 16px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.home-step b { color: var(--brand); }
.home-step span { color: var(--muted); font-size: 15px; }
.chip { display: inline-block; border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 4px 12px; margin: 2px; cursor: pointer; font-size: 15px; }
.chip:hover { border-color: var(--brand); color: var(--brand); }

.layout { display: grid; grid-template-columns: 250px 1fr; gap: 24px; margin: 24px 0 40px; align-items: start; }
@media (max-width: 800px) { .layout { grid-template-columns: minmax(0, 1fr); } } /* minmax: a wide row inside (e.g. scrolling chips) must not widen the page */
.filters { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.filters h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 16px 0 6px; }
.filters h3:first-child { margin-top: 0; }
.filters label { display: flex; gap: 8px; align-items: center; padding: 2px 0; cursor: pointer; }
.filters input[type=number], .filters select { width: 100%; padding: 6px 8px; border: 1px solid var(--control-border); border-radius: 8px; background: var(--bg); }
.year-range { display: flex; gap: 6px; }
.year-range input { flex: 1 1 0; min-width: 0; }
.filters details summary { cursor: pointer; font-weight: 600; margin-bottom: 8px; }

/* folder sidebar on the Saved page */
.folder-item { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; text-align: left; border: 1px solid transparent; background: transparent; color: inherit; border-radius: 8px; padding: 7px 8px; margin: 2px 0; font: inherit; font-size: 15px; cursor: pointer; }
.folder-item span { color: var(--muted); font-size: 13px; flex: none; }
.folder-item .folder-name { color: inherit; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folder-item:hover { background: var(--grey-bg); }
.folder-item.on { background: var(--brand-soft); color: var(--brand); border-color: var(--brand); }
.folder-item.on span { color: var(--brand); }
.folder-item.drop-over { border-color: var(--brand); background: var(--brand-soft); }
.folder-act { flex: none; display: none; padding: 2px 4px; border-radius: 4px; font-style: normal; color: var(--muted); }
.folder-item:hover .folder-act, .folder-item.on .folder-act { display: inline; } /* the open folder shows them too: there is no hover on a touch screen */
.folder-act:hover { color: var(--brand); background: var(--brand-soft); }
.folder-del:hover { color: var(--bad); background: var(--bad-bg); }
.folder-hint { margin: 10px 0 0; }

/* Saved page: filter / sort / layout, then what is shown and what can be done with it */
.saved-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0 0 10px; }
.saved-tools input[type=search] { flex: 1 1 260px; min-width: 0; padding: 8px 12px; border: 1px solid var(--control-border); border-radius: 8px; background: var(--surface); font: inherit; }
.saved-tools input[type=search]:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: transparent; }
.saved-tools select { padding: 7px 8px; border: 1px solid var(--control-border); border-radius: 8px; background: var(--surface); }
.saved-tools .view-switch { margin: 0; }
.saved-bar { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin: 0 0 12px; color: var(--muted); }
.saved-bar:empty { display: none; }
.saved-bar b { color: var(--ink); }
.saved-bar .byline { margin: 0; }
.undo-note { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: var(--grey-bg); border-radius: 8px; padding: 8px 12px; margin: 0 0 12px; font-size: 15px; }
.undo-note .linkbtn { color: var(--brand); font-weight: 700; font-size: 15px; }
.folder-btn { white-space: nowrap; max-width: 190px; overflow: hidden; text-overflow: ellipsis; }
.savemenu-opt.on { color: var(--brand); font-weight: 600; }
@media (max-width: 800px) { /* folders become one swipeable row of chips above the list, not a panel filling the first screen */
  .saved-page .folders { padding: 10px 12px; }
  .saved-page .folders h3, .saved-page .folder-hint { display: none; }
  .saved-page .folder-list { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -2px; padding: 2px; }
  .saved-page .folder-list::-webkit-scrollbar { display: none; }
  .saved-page .folder-item { flex: none; width: auto; margin: 0; border-color: var(--line); border-radius: 999px; padding: 5px 12px; }
  .saved-page .folder-item .folder-name { flex: none; max-width: 160px; }
  .saved-page .folder-new { margin-top: 8px; }
}
.folder-new { display: flex; gap: 4px; margin-top: 10px; }
.folder-new input { flex: 1; min-width: 0; padding: 6px 8px; border: 1px solid var(--control-border); border-radius: 8px; background: var(--bg); color: inherit; font: inherit; font-size: 13px; }
.cards .card.dragging { opacity: .4; }
.cards .card[draggable=true] { cursor: grab; }

.meta-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; color: var(--muted); }
.meta-row select { padding: 5px 8px; border: 1px solid var(--control-border); border-radius: 8px; background: var(--surface); }
.srcfold > summary { list-style: none; cursor: pointer; display: inline-block; }
.srcfold > summary::-webkit-details-marker { display: none; }
.srcfold > summary .src::after { content: " ▾"; }
.srcfold[open] > summary .src::after { content: " ▴"; }
.srclist { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }

/* quick filters above the results */
.quick { display: grid; gap: 6px; margin: 0 0 12px; }
.quick:empty { display: none; }
.qrow { display: flex; align-items: center; gap: 8px; min-width: 0; }
.qlabel { flex: none; width: 74px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.qpills { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.qpill { border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 999px; padding: 4px 12px; font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; }
.qpill em { font-style: normal; color: var(--muted); font-size: 12px; margin-left: 2px; }
.qpill:hover { border-color: var(--brand); color: var(--brand); }
.qpill.on { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.qpill.on em { color: inherit; }
.qpill.zero:not(.on) { color: var(--muted); border-style: dashed; } /* no results: muted + dashed, like .fpill.zero (opacity took it under 4.5:1) */
@media (max-width: 700px) { /* one swipeable line per group instead of a wall of pills */
  .qrow { align-items: flex-start; }
  .qlabel { padding-top: 5px; width: 66px; }
  .qpills { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .qpills::-webkit-scrollbar { display: none; }
}

.meta-count .srcfold { display: inline-block; margin-left: 6px; vertical-align: top; } /* the sources line sits on the count line */
.meta-count > .src { margin-left: 6px; }
.meta-tools { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.meta-tools .byline { margin: 0; }
.src { font-size: 12px; border-radius: 8px; padding: 2px 9px; background: var(--grey-bg); color: var(--muted); }
.src.ok { background: var(--good-bg); color: var(--good); }
.src.err { background: var(--warn-bg); color: var(--warn); }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 20px; margin-bottom: 12px; box-shadow: var(--shadow); }
.card h3 { font-size: 17px; margin-bottom: 4px; }
/* small vertical tabs in the top-right corner of a card: full text available (shared), opened before (per user) */
.card.has-corner { position: relative; }
.card.has-corner h3 { padding-right: calc(var(--tags, 1) * 22px); }
.corner-tags { position: absolute; top: 0; right: 12px; display: flex; gap: 3px; }
.corner-tag { writing-mode: vertical-rl; font-size: 11px; font-weight: 700; letter-spacing: .12em; line-height: 1;
  padding: 7px 4px 8px; border-radius: 0 0 4px 4px; color: var(--surface); cursor: default; }
.corner-tag.pdf { background: var(--good); }
.corner-tag.opened { background: var(--info); }
.corner-tag.new { background: var(--warn); }
.card h3 a { color: var(--ink); text-decoration: none; }
.card h3 a:hover { color: var(--brand); text-decoration: underline; }
.byline { color: var(--muted); font-size: 13px; margin-bottom: 8px; }
.badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0; }
/* every badge (and the Strong / Good match one) has the same fixed height, whatever its font or glyphs, so a row always lines up */
.badge, .match { display: inline-flex; align-items: center; box-sizing: border-box; height: 1.5rem; line-height: 1; }
.badge { font-size: 12px; font-weight: 600; border-radius: 8px; padding: 0 8px; background: var(--grey-bg); color: var(--ink); white-space: nowrap; }
.badge.l1, .badge.l2 { background: var(--good-bg); color: var(--good); }
.badge.l3 { background: var(--info-bg); color: var(--info); }
.badge.l4, .badge.l5 { background: var(--warn-bg); color: var(--warn); }
.badge.safety { background: var(--bad-bg); color: var(--bad); }
.badge.eff { background: var(--brand-soft); color: var(--brand); }
.badge.subj { background: var(--info-bg); color: var(--info); }
.geo { margin: 6px 0; font-size: 15px; }
.geo .badge { margin-right: 4px; }
.badge.region { background: var(--info-bg); color: var(--info); }
.badge.muted { background: var(--grey-bg); color: var(--muted); font-weight: 500; }
.badge.fieldtag { background: var(--brand-soft); color: var(--brand); }
.badge.approach { background: var(--info-bg); color: var(--info); }
.badge.preprint { background: var(--warn-bg); color: var(--warn); }
/* relevance to the search (src/rank.js): a dot + words, so it doesn't rely on colour alone */
.match { font-size: 12px; font-weight: 700; border-radius: 8px; padding: 0 8px; white-space: nowrap; border: 1px solid currentColor; }
.match::before { content: '●'; margin-right: 5px; font-size: .7em; line-height: 1; }
.match.strong { color: var(--good); background: var(--good-bg); }
.match.good { color: var(--info); background: var(--info-bg); }
.match.partial { color: var(--muted); background: var(--grey-bg); }
.found-in { font-size: 12px; color: var(--muted); margin: -2px 0 8px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
details.found-in > summary { display: inline; list-style: none; color: inherit; }
details.found-in > summary::-webkit-details-marker { display: none; }
details.found-in > summary::after { content: ' ▾'; }
details.found-in[open] > summary::after { content: ' ▴'; }
details.found-in:not([open]) { display: block; }
.srcbadge { border: 1px solid var(--line); border-radius: 999px; padding: 0 8px; color: var(--ink); background: var(--surface); }
/* Papers / Clinical trials tabs */
.kind-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 6px 0 12px; overflow-x: auto; }
.kind-tabs button { background: none; border: 0; border-bottom: 2px solid transparent; padding: 8px 14px; font: inherit; font-weight: 600; color: var(--muted); cursor: pointer; white-space: nowrap; }
.kind-tabs button.on { color: var(--brand); border-bottom-color: var(--brand); }
/* collapsed "Less relevant results" after the last page */
.less-relevant { margin: 22px 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 10px 14px; }
.less-relevant > summary { cursor: pointer; font-weight: 600; }
.less-relevant > .cards { margin-top: 10px; }
.less-relevant #lowmore { margin-top: 10px; }
.summary { background: var(--brand-soft); border-radius: 8px; padding: 10px 12px; margin-top: 8px; font-size: 15px; }
.summary .tag { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--brand); display: block; margin-bottom: 2px; }
.summary.pending { color: var(--muted); }
.summary.upgrading .tag { color: var(--muted); }
.kr { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 5px; }
.kr li { padding-left: 10px; border-left: 3px solid var(--line); line-height: 1.4; overflow-wrap: anywhere; }
.kr-out { font-weight: 600; }
.kr-eff { color: var(--muted); }
.kr-p { display: inline-block; font-size: 12px; font-weight: 600; border-radius: 8px; padding: 0 7px; margin-left: 2px; white-space: nowrap; background: var(--grey-bg); color: var(--muted); }
.kr-p.yes { background: var(--good-bg); color: var(--good); }
.kr-p.no { background: var(--warn-bg); color: var(--warn); }
.card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; align-items: center; }
.card-actions > * { white-space: nowrap; } /* a crowded row wraps whole buttons, never a label mid-way */
.card-actions > .byline { white-space: normal; } /* ...but a sentence beside them must wrap, or it widens the page on a phone */
.star { background: none; border: 1px solid var(--line); border-radius: 8px; padding: 3px 10px; cursor: pointer; color: var(--muted); }
.star.on { color: var(--saved); border-color: var(--saved); }
.pager { display: flex; gap: 6px; justify-content: center; align-items: center; flex-wrap: wrap; margin: 18px 0; }
.pager .pg-num { min-width: 38px; padding-left: 8px; padding-right: 8px; }
@media (max-width: 560px) { .pager { gap: 4px; flex-wrap: nowrap; } .pager .btn, .pg-cur { padding: 8px 6px; min-width: 36px; } .pg-word { display: none; } } /* phones: arrows only, numbers stay on one line */
.pg-cur { min-width: 38px; padding: 8px; text-align: center; font-weight: 700; color: var(--brand-ink); background: var(--brand); border-radius: 8px; }

/* Study types and AI overview: one slim row of two buttons; each opens its own popup window, so the results start right below it */
.ovstrip { display: flex; gap: 8px; margin: 0 0 12px; }
.ovchip { flex: 1 1 0; min-width: 0; display: flex; align-items: baseline; gap: 8px; padding: 8px 12px; border: 1px solid var(--line); border-left: 3px solid var(--brand);
  border-radius: 8px; background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.ovchip:hover { background: var(--brand-soft); }
.ovchip:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.ovchip-k { flex: none; font-weight: 700; color: var(--brand); white-space: nowrap; }
.ovchip-k::after { content: ' ▾'; font-size: .8em; }
.ovchip-v { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.ovchip-v b { color: var(--ink); }
@media (max-width: 700px) { .ovstrip { flex-direction: column; gap: 6px; } }
.ovdlg { width: min(680px, calc(100vw - 24px)); max-height: min(82vh, 760px); padding: 0; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: var(--ink); box-shadow: 0 18px 60px rgb(0 0 0 / .28); }
.ovdlg[open] { display: flex; flex-direction: column; }
.ovdlg.narrow { width: min(460px, calc(100vw - 24px)); }
.ovdlg.narrow .ovdlg-body { padding-top: 12px; }
.ovdlg.narrow .ovdlg-act { justify-content: flex-end; }
.ovdlg.narrow .linkbtn { padding: 0; }
.ovdlg::backdrop { background: rgb(0 0 0 / .35); }
.ovdlg-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 12px 12px 18px; border-bottom: 1px solid var(--line); }
.ovdlg-head h2 { margin: 0; font-size: 17px; }
.ovdlg-head .muted { color: var(--muted); font-weight: 500; font-size: 15px; }
.ovdlg-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 4px 18px 16px; }
.ovdlg-body h3 { margin: 14px 0 2px; font-size: 15px; }
.ovdlg-body p, .ovdlg-body ul { max-width: 80ch; }
.ovdlg .stats { display: flex; gap: 22px; flex-wrap: wrap; margin: 12px 0; }
.ovdlg-act { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
html:has(.ovdlg[open]) { overflow: hidden; }
button.bar { width: 100%; border: 0; background: none; font: inherit; color: inherit; text-align: left; padding: 2px 4px; margin: 0 -4px; border-radius: 4px; cursor: pointer; }
button.bar:hover { background: var(--brand-soft); }
button.bar:hover i { filter: brightness(1.1); }
.stat b { display: block; font-size: 24px; line-height: 1.1; }
.stat span { color: var(--muted); font-size: 13px; }
.bars { display: grid; gap: 4px; margin: 8px 0; }
.bar { display: grid; grid-template-columns: 130px 1fr 32px; align-items: center; gap: 8px; font-size: 13px; }
.bar > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* one line: the label is the button's tooltip too */
@media (min-width: 561px) { .bar { grid-template-columns: 215px 1fr 32px; } }
.bar i { display: block; height: 10px; border-radius: 999px; background: var(--brand); min-width: 3px; }

/* detail */
.detail { margin: 24px 0 48px; }
.back { display: inline-block; margin: 0 0 12px; padding: 4px 10px 4px 0; font-weight: 600; }
.back:hover { text-decoration: underline; }
/* a floating copy that appears once the inline link has scrolled away, so the way back is always one tap */
.back-float { position: fixed; left: 16px; bottom: 16px; z-index: 40; padding: 9px 16px; border-radius: 999px; background: var(--brand); color: var(--brand-ink); font-weight: 600; font-size: 15px; text-decoration: none; box-shadow: 0 4px 16px rgba(0,0,0,.25); }
.back-float:hover { filter: brightness(1.1); }
.back-float[hidden], body:has(.askai.expanded:not([hidden])) .back-float { display: none; } /* not on top of the full-page Ask AI */
table.sheet { width: 100%; border-collapse: collapse; font-size: 15px; }
table.sheet th { text-align: left; width: 170px; color: var(--muted); font-weight: 500; vertical-align: top; padding: 7px 12px 7px 0; border-top: 1px solid var(--line); }
table.sheet td { padding: 7px 0; border-top: 1px solid var(--line); }
.verdict { display: inline-block; padding: 1px 9px; border-radius: 8px; font-weight: 600; font-size: 13px; background: var(--grey-bg); }
.verdict.positive, .verdict.no_concerns { background: var(--good-bg); color: var(--good); }
.verdict.mixed, .verdict.minor_concerns { background: var(--warn-bg); color: var(--warn); }
.verdict.negative, .verdict.notable_concerns { background: var(--bad-bg); color: var(--bad); }
.abstract { white-space: pre-line; }
.abstract b { color: var(--brand); }
ul.tight { margin: 4px 0; padding-left: 20px; }
.notice { background: var(--warn-bg); color: var(--warn); padding: 8px 12px; border-radius: 8px; font-size: 15px; margin-bottom: 12px; }
.empty { text-align: center; color: var(--muted); padding: 40px 0; }
.spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid var(--line); border-top-color: var(--brand); border-radius: 50%; animation: spin .8s linear infinite; vertical-align: -3px; margin-right: 6px; }
@keyframes spin { to { transform: rotate(360deg); } }
.foot { color: var(--muted); font-size: 13px; padding-bottom: 40px; border-top: 1px solid var(--line); padding-top: 16px; }
.foot p { max-width: 80ch; } /* a readable line on wide screens */

/* admin */
.admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 12px 0; }
.admin-grid .card { margin: 0; text-align: center; }
table.jobs { width: 100%; border-collapse: collapse; font-size: 13px; }
table.jobs td, table.jobs th { text-align: left; padding: 6px 8px; border-top: 1px solid var(--line); vertical-align: top; }
input.txt { padding: 8px 10px; border: 1px solid var(--control-border); border-radius: 8px; background: var(--bg); min-width: 0; }
pre { background: var(--grey-bg); padding: 8px; border-radius: 8px; overflow: auto; margin: 0; font-size: 12px; max-width: 420px; white-space: pre-wrap; }

/* ---- header: theme + user menu ---- */
.top-right { display: flex; align-items: center; gap: 10px; }
.top-in nav { margin-left: auto; margin-right: 8px; }
.icon-btn { background: none; border: 1px solid var(--line); color: var(--muted); border-radius: 8px; width: 34px; height: 34px; cursor: pointer; font-size: 17px; }
.icon-btn:hover { color: var(--ink); border-color: var(--brand); }
.userbox { position: relative; }
.user-btn { display: flex; align-items: center; gap: 8px; background: none; border: 1px solid var(--line); border-radius: 999px; padding: 3px 12px 3px 3px; cursor: pointer; }
.user-btn:hover { border-color: var(--brand); }
.avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--brand); color: var(--brand-ink); display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.uname { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
@media (max-width: 560px) { .uname { display: none; } .user-btn { padding: 3px; } }
.menu { position: absolute; right: 0; top: calc(100% + 8px); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.2); min-width: 220px; padding: 4px; z-index: 20; }
.menu-head { padding: 8px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; display: grid; }
.menu-head span { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; }
.menu button { width: 100%; text-align: left; background: none; border: 0; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.menu button:hover { background: var(--grey-bg); }
.menu-admin { display: grid; border-bottom: 1px solid var(--line); margin-bottom: 4px; padding-bottom: 4px; }
.menu-admin a { padding: 8px 10px; border-radius: 8px; color: var(--ink); text-decoration: none; }
.menu-admin[hidden] { display: none; }
.menu-admin a:hover { background: var(--grey-bg); }
.menu-admin a.on { color: var(--brand); font-weight: 600; }

/* ---- auth ---- */
.auth-wrap { min-height: 70vh; display: grid; place-items: center; padding: 24px 0; }
.auth { width: min(420px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 28px; box-shadow: var(--shadow); }
.auth h1 { font-size: 24px; margin-bottom: 4px; }
.auth .sub { color: var(--muted); margin: 0 0 18px; }
.tabs { display: grid; grid-template-columns: 1fr 1fr; background: var(--grey-bg); border-radius: 12px; padding: 4px; margin-bottom: 18px; }
.tabs button { border: 0; background: none; padding: 8px; border-radius: 8px; cursor: pointer; font-weight: 600; color: var(--muted); }
.tabs button[aria-selected=true] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.field { display: grid; gap: 4px; margin-bottom: 14px; }
.field label { font-size: 13px; font-weight: 600; }
.field input { padding: 10px 12px; border: 1px solid var(--control-border); border-radius: 8px; background: var(--bg); font-size: 16px; width: 100%; }
.field input:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: transparent; }
.field .hint { font-size: 12px; color: var(--muted); }
.pw { position: relative; }
.pw button { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: 0; color: var(--muted); cursor: pointer; padding: 4px 8px; font-size: 13px; }
.btn.block { width: 100%; padding: 12px; font-size: 16px; }
.btn.google { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--ink); text-decoration: none; }
.btn.google:hover { background: var(--grey-bg); filter: none; }
.or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; margin: 14px 0; }
.or::before, .or::after { content: ''; flex: 1; border-top: 1px solid var(--line); }
.form-err { background: var(--bad-bg); color: var(--bad); border-radius: 8px; padding: 8px 12px; margin-bottom: 14px; font-size: 15px; }
.form-note { background: var(--brand-soft); color: var(--brand); border-radius: 8px; padding: 8px 12px; margin-bottom: 14px; font-size: 15px; }

/* ---- results polish ---- */
#results.loading { opacity: .5; transition: opacity .15s; pointer-events: none; }
[id^="study-"] { scroll-margin-top: 140px; } /* a card scrolled to the top stays clear of the sticky headers */
.searchhead { position: sticky; top: 56px; z-index: 5; background: linear-gradient(var(--bg) 75%, transparent 75%); padding: 12px 0 8px; }
@media (max-width: 800px) { .searchhead { position: static; } }
.searchhead { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.searchhead .searchbar { flex: 1 1 320px; min-width: 0; }
.searchhead .alert-btn { flex: 0 0 auto; background: var(--surface); box-shadow: var(--shadow); }
.results-wrap { margin: 18px 0 40px; }

/* ---- filter button + slide-in drawer ---- */
.filter-btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; }
.filter-btn.on { border-color: var(--brand); background: var(--brand-soft); }
.fcount { background: var(--brand); color: var(--brand-ink); border-radius: 999px; min-width: 20px; height: 20px; padding: 0 6px; display: inline-grid; place-items: center; font-size: 11px; line-height: 1; }
@media (max-width: 560px) { .searchbar .search-field { flex-basis: 100%; } .searchbar .btn[type=submit] { flex: 1; } }

.fscrim { position: fixed; inset: 0; z-index: 40; background: rgb(0 0 0 / .35); opacity: 0; transition: opacity .25s ease; }
.fscrim.open { opacity: 1; }
.fdrawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 41; width: min(420px, 100vw); display: flex; flex-direction: column;
  background: var(--surface); border-left: 1px solid var(--line); box-shadow: -12px 0 40px rgb(0 0 0 / .18);
  transform: translateX(100%); transition: transform .28s cubic-bezier(.2, .8, .2, 1); }
.fdrawer.open { transform: none; }
/* A popup that covers the page keeps the page behind it still: the Filters drawer, the PDF and picture viewers, and the
   Ask AI panel where it fills a phone's screen. */
html:has(.fdrawer.open), html:has(.pdfv-overlay.open) { overflow: hidden; }
@media (max-width: 560px) { html:has(.askai:not([hidden])) { overflow: hidden; } }
.fdrawer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 16px 16px 20px; border-bottom: 1px solid var(--line); }
.fdrawer-head h2 { margin: 0; font-size: 17px; }
.fdrawer-head .muted { color: var(--muted); font-weight: 500; font-size: 15px; }
.fdrawer-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 4px 20px 16px; }
.fdrawer-foot { display: flex; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--line); background: var(--surface); }
.fdrawer-foot .btn { flex: 1; }
.fdrawer-foot .btn.busy { opacity: .75; }
.updating { position: sticky; top: 132px; z-index: 4; margin: 0 0 10px; padding: 8px 12px; border-radius: 8px; background: var(--brand-soft); color: var(--brand); font-size: 13px; font-weight: 600; }
@media (max-width: 800px) { .updating { top: 64px; } }
.fdrawer-foot .btn:disabled { opacity: .45; cursor: default; }
@media (prefers-reduced-motion: reduce) { .fdrawer, .fscrim { transition: none; } }

.fgroup { border: 0; margin: 0; padding: 16px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.fgroup:last-child { border-bottom: 0; }
.fgroup legend { float: left; width: 100%; display: flex; align-items: center; gap: 8px; margin-bottom: 10px; padding: 0;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.fgroup legend + * { clear: both; }
.fgroup-n { background: var(--brand-soft); color: var(--brand); border-radius: 999px; padding: 0 7px; font-size: 11px; letter-spacing: 0; }
.fhint { margin: 8px 0 0; font-size: 12px; color: var(--muted); }

.fpills { display: flex; flex-wrap: wrap; gap: 6px; }
.fpill { position: relative; cursor: pointer; }
.fpill input, .fseg input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.fpill span { display: inline-block; border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; font-size: 13px; background: var(--bg); transition: background .12s, border-color .12s, color .12s; }
.fpill:hover span { border-color: var(--brand); }
/* a long list (Field) shows only the choices that have results, until "Show all" is pressed */
.fgroup[hidden] { display: none; }
.fpills.collapsible:not(.all) .fpill.zero:not(:has(input:checked)) { display: none; }
.fmore { margin-top: 8px; font-size: 13px; }
.fpill-n { font-style: normal; margin-left: 6px; font-size: 12px; font-variant-numeric: tabular-nums; }
.fpill-n:empty { display: none; }
.fpill.zero input:not(:checked) + span { color: var(--muted); border-style: dashed; }
.fpill input:checked + span { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); font-weight: 600; }
.fpill input:focus-visible + span, .fseg input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }

.fseg { display: flex; background: var(--grey-bg); border-radius: 12px; padding: 4px; gap: 2px; }
.fseg label { flex: 1; cursor: pointer; position: relative; }
.fseg span { display: block; text-align: center; padding: 5px 6px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--muted); }
.fseg input:checked + span { background: var(--surface); color: var(--brand); box-shadow: 0 1px 2px rgb(0 0 0 / .12); }

.fdrawer input[type=number], .fdrawer select { width: 100%; min-width: 0; padding: 7px 10px; border: 1px solid var(--control-border); border-radius: 8px; background: var(--bg); }
.frange { display: flex; align-items: center; gap: 8px; }
.frange span { color: var(--muted); }
.fnums { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.fnum { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.fchecks { display: grid; gap: 4px; }
.fchecks label { display: flex; gap: 8px; align-items: center; cursor: pointer; padding: 2px 0; }

.active { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; align-items: center; }
.fchip { display: inline-flex; gap: 6px; align-items: center; background: var(--brand-soft); color: var(--brand); border: 0; border-radius: 999px; padding: 3px 6px 3px 12px; font-size: 13px; font-weight: 600; cursor: pointer; }
.fchip:hover { filter: brightness(.95); }
.fchip i { font-style: normal; opacity: .7; }
.linkbtn { background: none; border: 0; color: var(--muted); text-decoration: underline; cursor: pointer; font-size: 13px; }
.skel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; margin-bottom: 12px; }
.skel i { display: block; height: 12px; border-radius: 999px; background: linear-gradient(90deg, var(--grey-bg), var(--line), var(--grey-bg)); background-size: 200% 100%; animation: shimmer 1.3s infinite; margin-bottom: 10px; }
.skel i:nth-child(1) { width: 80%; height: 16px; } .skel i:nth-child(2) { width: 40%; } .skel i:nth-child(3) { width: 95%; height: 44px; }
@keyframes shimmer { to { background-position: -200% 0; } }
.card { transition: border-color .15s ease; }
.card:hover { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); }
.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: 9px 16px; border-radius: 12px; font-size: 15px; z-index: 50; box-shadow: 0 6px 20px rgba(0,0,0,.25); max-width: min(90vw, 420px); text-align: center; }
@media (prefers-reduced-motion: reduce) { .spinner, .skel i { animation: none; } .card { transition: none; } }
kbd { border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; font-size: 12px; background: var(--surface); }

[hidden] { display: none !important; }

.brand, nav a { white-space: nowrap; }
@media (max-width: 560px) {
  .brand-text { display: none; }
  .top-in nav { gap: 12px; margin-right: 4px; }
  .top-right { gap: 6px; }
}

/* ---- user management ---- */
.detail.wide { max-width: none; }
.grid-form { display: grid; grid-template-columns: 1fr 1.3fr 120px 1.2fr auto; gap: 12px; align-items: end; }
.grid-form .field { margin-bottom: 0; }
.grid-form select, .field select { padding: 10px 12px; border: 1px solid var(--control-border); border-radius: 8px; background: var(--bg); width: 100%; font-size: 16px; }
@media (max-width: 800px) { .grid-form { grid-template-columns: 1fr; } }
.tablewrap { overflow-x: auto; padding: 8px 12px; }
table.users td, table.users th { white-space: nowrap; vertical-align: middle; }
table.users select { padding: 4px 8px; border: 1px solid var(--control-border); border-radius: 8px; background: var(--bg); }
table.users td.acts { text-align: right; } /* a real table cell (not flex), so the row's divider runs under it too */
table.users td.acts .btn + .btn { margin-left: 2px; }
table.users tr:first-child td { border-top: 0; }
.btn.ghost.danger { color: var(--bad); }
.btn.ghost.danger:hover, .btn.danger-outline:hover { background: var(--bad-bg); filter: none; }
/* ---- admin settings (.env) ---- */
.env-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 6px 16px; padding: 10px 0; border-top: 1px solid var(--line); align-items: start; }
.card h2 + .env-row, .env-head + .env-row, .env-test + .env-row, .card .byline + .env-row { border-top: 0; }
.env-head { margin-bottom: 8px; }
.env-label code { font-weight: 600; word-break: break-all; }
.env-label .byline { margin: 2px 0 0; }
.env-input { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.env-input input, .env-input select { flex: 1 1 200px; min-width: 0; padding: 8px 10px; border: 1px solid var(--control-border); border-radius: 8px; background: var(--bg); }
.env-input input:disabled, .env-input select:disabled { opacity: .65; }
.env-acts { display: inline-flex; gap: 6px; }
.env-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.env-head h2 { margin: 0; }
.env-test:not(:empty) { margin: 10px 0; display: grid; gap: 8px; }
.env-res { border-radius: 8px; padding: 8px 12px; font-size: 15px; background: var(--grey-bg); overflow-wrap: anywhere; }
.env-res .byline { margin: 0 0 0 6px; }
.env-res.ok { background: var(--good-bg); color: var(--good); }
.env-res.bad { background: var(--bad-bg); color: var(--bad); }
.env-res.muted { color: var(--muted); }
.env-save { position: sticky; bottom: 0; background: var(--bg); padding: 12px 0; display: flex; gap: 12px; align-items: center; }
@media (max-width: 700px) { .env-row { grid-template-columns: 1fr; } }
.switch { display: flex; gap: 10px; align-items: center; cursor: pointer; }
.reveal { border-left: 4px solid var(--brand); }
.pwbox { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.pwbox code { font: 600 17px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--grey-bg); padding: 8px 12px; border-radius: 8px; letter-spacing: .04em; user-select: all; }

/* ---- admin Users page: people first; the site switches live on Settings ---- */
.pill.queue-count { background: var(--warn-bg); color: var(--warn); }
.page-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.users-page .page-head { margin-bottom: 14px; }
.page-head h1 { margin: 0; }
.site-line { margin: 6px 0 14px; }
.site-line .linkbtn { font-size: inherit; color: var(--brand); padding: 0; }
#waiting { scroll-margin-top: 72px; }
.add-acts { display: flex; gap: 8px; }
.list-tools, .env-tools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.list-tools { margin: 4px 0 8px; }
.list-tools input[type=search], .env-tools input[type=search] { flex: 1 1 240px; min-width: 0; padding: 8px 12px; border: 1px solid var(--control-border); border-radius: 8px; background: var(--surface); font: inherit; }
.ufilters { display: flex; gap: 6px; flex-wrap: wrap; }
.ufilter { border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 999px; padding: 4px 12px; font-size: 13px; cursor: pointer; white-space: nowrap; }
.ufilter span { color: var(--muted); margin-left: 2px; }
.ufilter:hover { border-color: var(--brand); }
.ufilter[aria-pressed=true] { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); font-weight: 600; }
.ufilter[aria-pressed=true] span { color: inherit; }
.none-match { padding: 12px 8px; margin: 0; }
table.users tr.fresh td { background: var(--brand-soft); }
@media (max-width: 700px) { /* phones: each user is a small card instead of a table row that scrolls sideways */
  .tablewrap.user-list table { min-width: 0; }
  table.users thead { display: none; }
  table.users, table.users tbody { display: block; }
  table.users tr { display: grid; grid-template-columns: 96px minmax(0, 1fr) max-content; gap: 6px 12px; padding: 12px 0; border-top: 1px solid var(--line); }
  table.users tr:first-child { border-top: 0; }
  table.users td { display: block; border: 0; padding: 0; white-space: normal; }
  table.users td:first-child, table.users td.acts { grid-column: 1 / -1; }
  table.users td[data-label]::before { content: attr(data-label); display: block; color: var(--muted); font-size: 11px; }
  table.users td[data-label="Saved"] { display: none; }
  table.users td.acts { text-align: left; padding-top: 4px; }
  table.users td.acts .btn { margin: 0 2px 4px 0; }
}

/* ---- admin Settings page: site switches, then find + section links that stay in view, then the .env values ---- */
.site-switch + .site-switch { margin-top: 12px; }
.site-switch .byline { margin: 4px 0 0 26px; }
.env-tools { position: sticky; z-index: 5; background: var(--bg); padding: 10px 0; margin-bottom: 12px; border-bottom: 1px solid var(--line); }
.env-jump { display: flex; flex-wrap: wrap; gap: 2px 14px; flex-basis: 100%; font-size: 13px; }
.env-jump a { color: var(--muted); text-decoration: none; white-space: nowrap; }
.env-jump a:hover { color: var(--brand); }
.settings-page .card { scroll-margin-top: var(--stick, 140px); }
.env-row.dirty { box-shadow: inset 3px 0 var(--brand); padding-left: 10px; background: color-mix(in srgb, var(--brand-soft) 45%, transparent); }
details.env-group > summary { cursor: pointer; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
details.env-group > summary h2 { margin: 0; display: inline; }
details.env-group[open] > summary { margin-bottom: 8px; }
.env-save { justify-content: flex-end; border-top: 1px solid var(--line); flex-wrap: wrap; }
.env-save #envdirty { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) { /* phones: the bars that stay in view take one line each */
  .env-tools { padding: 8px 0; gap: 6px; }
  .env-jump { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .env-save { flex-wrap: nowrap; gap: 8px; padding: 8px 0; }
  .env-save #envdirty { flex: 1 1 0; font-size: 12px; }
  .env-save .btn { padding-inline: 12px; white-space: nowrap; }
}

.meta-row h1 { color: var(--ink); }

/* ---- use the full screen width ---- */
.layout { grid-template-columns: clamp(220px, 18vw, 300px) minmax(0, 1fr); gap: clamp(16px, 2vw, 32px); }
@media (max-width: 800px) { .layout { grid-template-columns: minmax(0, 1fr); } } /* minmax: a wide row inside (e.g. scrolling chips) must not widen the page */
.filters { position: sticky; top: 132px; max-height: calc(100vh - 148px); overflow-y: auto; }
@media (max-width: 800px) { .filters { position: static; max-height: none; } }

/* results flow into as many columns as fit (one on phones, several on wide monitors) */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); gap: 16px; align-items: start; }
.cards > .card, .cards > .cards-batch > .card { margin: 0; height: 100%; display: flex; flex-direction: column; }
.cards > .card .card-actions, .cards > .cards-batch > .card .card-actions { margin-top: auto; padding-top: 10px; }
.cards-batch { display: contents; }
.cards > .empty { grid-column: 1 / -1; }
/* list layout: one full-width row per study */
.cards.list { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.cards.list > .card, .cards.list > .cards-batch > .card { height: auto; }
.cards.list > .card .card-actions, .cards.list > .cards-batch > .card .card-actions { margin-top: 10px; padding-top: 0; }
/* compact grid: same cards as the grid, but the summary is cut to a few lines (click it to read the rest) */
.cards.compact .card .summary { cursor: pointer; }
.cards.compact .card:not(.expanded) .summary .tldr { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cards.compact .card:not(.expanded) .summary .kr, .cards.compact .card:not(.expanded) .summary > div { display: none; }

/* the title is the strongest line on a card; the search words in it are marked with a tint, not only a heavier weight */
.card h3 { font-weight: 600; }
.card h3 .hit { font-weight: 700; background: var(--brand-soft); border-radius: 4px; padding: 0 2px; }

.view-switch { display: inline-flex; background: var(--grey-bg); border-radius: 12px; padding: 4px; gap: 2px; vertical-align: middle; margin-right: 6px; }
.view-switch button { border: 0; background: transparent; font: inherit; font-size: 13px; font-weight: 600; color: var(--muted); padding: 3px 10px; border-radius: 8px; cursor: pointer; }
.view-switch button.on { background: var(--surface); color: var(--brand); box-shadow: 0 1px 2px rgb(0 0 0 / .12); }
.view-switch button:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

/* keep single-purpose blocks readable instead of stretching them edge to edge */
.hero { padding-top: clamp(28px, 8vh, 72px); }
.hero .searchbar { max-width: 960px; margin-inline: auto; }
.hero h1 { font-size: clamp(30px, 1.2rem + 1.2vw, 40px); }
.hero p { max-width: 720px; }

/* study page: summary + data sheet beside the abstract on wide screens */
.detail-head { max-width: 1100px; }
.detail-grid { display: grid; gap: 16px; align-items: start; }
.detail-grid > div > .card:last-child { margin-bottom: 0; }
@media (min-width: 1100px) {
  .detail-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 24px; }
  /* the two columns are always as tall as the taller one; nothing scrolls inside them or sticks */
  .detail-grid { align-items: stretch; }
  .detail-grid > div { display: flex; flex-direction: column; }
  .detail-grid > div > .card:last-child { flex: 1; }
}
table.sheet th { width: clamp(130px, 14vw, 190px); }
.abstract { max-width: 78ch; }

/* narrow single-column pages stay comfortably readable */
.auth-wrap .auth { width: min(440px, 100%); }
.tablewrap table { min-width: 720px; }

/* ---- expanded study data sheet ---- */
table.sheet tr.sec th .src-tag { vertical-align: 1px; }
table.sheet tr.sec th { width: auto; padding: 16px 0 6px; border-top: 0; color: var(--brand); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
table.sheet tr.sec:first-child th { padding-top: 4px; }
table.sheet td { overflow-wrap: anywhere; }
.muted { color: var(--muted); font-weight: 400; }
.warn-text { color: var(--warn); }
.src-tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; border-radius: 4px; padding: 0 5px; margin-left: 4px; vertical-align: 1px; background: var(--grey-bg); color: var(--muted); cursor: help; }
.src-tag.ai { background: var(--brand-soft); color: var(--brand); }
.src-tag.registry { background: var(--info-bg); color: var(--info); }
.pill2 { display: inline-block; background: var(--grey-bg); border-radius: 8px; padding: 0 7px; margin: 1px 2px 1px 0; font-size: 13px; }
ul.check { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
ul.check li { display: flex; gap: 8px; align-items: baseline; }
ul.check .mark { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; background: var(--grey-bg); color: var(--muted); }
ul.check .yes .mark { background: var(--good-bg); color: var(--good); }
ul.check .no .mark { background: var(--bad-bg); color: var(--bad); }

/* ClinicalTrials.gov record */
.registry { margin-top: 16px; border-left: 4px solid var(--info); }
.rgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 8px 28px; align-items: start; }
.rblock h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 14px 0 6px; }
.rblock h4 { margin: 10px 0 2px; font-size: 15px; }
table.mini { font-size: 13px; }
table.mini th { width: 130px; }
table.jobs.mini td, table.jobs.mini th { padding: 5px 8px 5px 0; white-space: normal; }
.tablewrap.flat { padding: 0; border: 0; box-shadow: none; background: none; overflow-x: auto; }
.tablewrap.flat table { min-width: 0; width: 100%; }

/* registry blocks flow like a masonry layout (no gaps under short blocks) */
.rgrid { display: block; columns: 420px; column-gap: 32px; }
.rblock { break-inside: avoid; margin-bottom: 4px; }

/* ---- full-text PDF ---- */
.src-tag.pdf { background: var(--good-bg); color: var(--good); }
.pdf-file { margin: 4px 0 8px; overflow-wrap: anywhere; }
.pdf-status { margin-top: 10px; display: grid; gap: 8px; justify-items: start; }
.pdf-state { margin: 0; color: var(--muted); }
ul.robs li { align-items: flex-start; }
.rob-j { flex: none; min-width: 108px; text-align: center; border-radius: 8px; padding: 0 8px; font-size: 12px; font-weight: 700; background: var(--grey-bg); color: var(--muted); }
.rob.low .rob-j { background: var(--good-bg); color: var(--good); }
.rob.some_concerns .rob-j { background: var(--warn-bg); color: var(--warn); }
.rob.high .rob-j { background: var(--bad-bg); color: var(--bad); }
details > summary { cursor: pointer; color: var(--brand); }

/* ---- AI chat ---- */
.msg { max-width: 92%; padding: 9px 13px; border-radius: 16px; overflow-wrap: anywhere; line-height: 1.5; }
.msg p { margin: 0 0 .5em; } .msg p:last-child, .msg ul:last-child, .msg ol:last-child { margin-bottom: 0; }
.msg ul, .msg ol { margin: .3em 0 .5em; padding-left: 1.3em; }
.msg.user { justify-self: end; background: var(--brand); color: var(--brand-ink); border-bottom-right-radius: 4px; }
.msg.assistant { justify-self: start; background: var(--grey-bg); border-bottom-left-radius: 4px; }
.msg code { background: rgba(127,127,127,.2); border-radius: 4px; padding: 0 4px; font-size: .9em; }
a.cite { display: inline-block; font-size: 11px; font-weight: 700; text-decoration: none; background: var(--good-bg); color: var(--good); border-radius: 4px; padding: 0 5px; margin: 0 1px; vertical-align: 1px; }
a.cite:hover { filter: brightness(1.15); }
.suggest { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.chat-form { display: flex; gap: 8px; align-items: flex-end; margin-top: 8px; }
.chat-form textarea { flex: 1; resize: vertical; min-height: 46px; max-height: 180px; padding: 9px 12px; border: 1px solid var(--control-border); border-radius: 12px; background: var(--bg); font: inherit; }
.chat-form textarea:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: transparent; }
.typing { display: inline-flex; gap: 4px; padding: 4px 0; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: blink 1.2s infinite ease-in-out; }
.typing i:nth-child(2) { animation-delay: .2s; } .typing i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .typing i { animation: none; opacity: .6; } .askai-log { scroll-behavior: auto; } }

.btn.pulse { animation: pulse 1.2s ease-in-out; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--brand) 35%, transparent); } }
@media (prefers-reduced-motion: reduce) { .btn.pulse { animation: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 40%, transparent); } }

.msg-meta { margin-top: 6px; font-size: 11px; color: var(--muted); }
.msg.user .msg-meta { color: inherit; }

/* study page only: the top row scrolls away with the page, and the title strip and tab bar take over the top of the screen */
body:has(> header.top):has(.study-mini) { padding-top: 0; }
body:has(.study-mini) .top { position: static; }
/* ---- study page tabs: a sticky bar with the tabs (scrolling sideways on narrow screens) and the Ask AI button ---- */
/* the compact title strip: a zero-height sticky anchor under the top row, so showing it never shifts the page */
.study-mini { position: sticky; top: 0; z-index: 7; height: 0; overflow-x: clip; } /* clip: the scaled-up hidden strip must never widen the page (it would scroll the top row sideways) */
.study-mini-in { position: absolute; left: 0; right: 0; top: 0; height: 44px; display: flex; align-items: center; gap: 10px; padding: 0 2px; background: var(--bg); cursor: pointer;
  opacity: 0; transform: translateY(-100%); pointer-events: none; transition: opacity .15s ease, transform 0s .15s; } /* leaving: just fades away */
.condensed .study-mini-in { opacity: 1; transform: none; pointer-events: auto; transition: opacity .25s ease, transform .3s cubic-bezier(.2,.8,.2,1); } /* arriving: drops in from under the top row */
.study-mini .badge { flex: none; }
.mini-title { min-width: 0; font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.study-bar { position: sticky; top: 0; transition: top .3s cubic-bezier(.2,.8,.2,1); z-index: 6; display: flex; align-items: center; gap: 8px; margin: 18px 0 16px; padding: 6px 0 0; background: var(--bg);
  border-bottom: 1px solid var(--line); }
.condensed .study-bar { top: 44px; }
.study-tabs { flex: 1; min-width: 0; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; align-self: stretch; }
.study-tabs::-webkit-scrollbar { display: none; }
/* more tabs off to one side (narrow screens, or the Ask AI panel docked): fade that edge */
.study-tabs.more-r { mask-image: linear-gradient(to left, transparent, #000 40px); }
.study-tabs.more-l { mask-image: linear-gradient(to right, transparent, #000 40px); }
.study-tabs.more-l.more-r { mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent); }
body.askai-docked .study-tabs [role=tab] { padding-inline: 11px; }
.study-tabs [role=tab] { flex: none; display: inline-flex; align-items: center; gap: 2px; border: 0; background: none; font: inherit; font-weight: 600; color: var(--muted); padding: 10px 14px; cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px; border-radius: 8px 8px 0 0; white-space: nowrap; }
.study-tabs [role=tab]:hover { color: var(--ink); background: var(--grey-bg); }
.study-tabs [role=tab][aria-selected=true] { color: var(--brand); border-bottom-color: var(--brand); }
.study-tabs [role=tab]:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.tab-b { display: inline-flex; align-items: center; gap: 3px; }
.tab-b:empty { display: none; }
.tab-n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: 4px; padding: 0 6px; border-radius: 999px; background: var(--grey-bg); color: var(--muted); font-size: 11px; font-weight: 700; }
.study-tabs [aria-selected=true] .tab-n { background: var(--brand-soft); color: var(--brand); }
.study-tabs .tab-n.ok { background: var(--good-bg); color: var(--good); }
.study-tabs .tab-n.warn { background: var(--warn-bg); color: var(--warn); }
.tab-n.busy, .study-tabs [aria-selected=true] .tab-n.busy { background: none; padding: 0; min-width: 0; }
.tab-n.busy .spinner { width: 13px; height: 13px; margin: 0; border-width: 2px; }
.tab-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); margin-left: 3px; }
.askai-btn { flex: none; display: inline-flex; align-items: center; gap: 6px; margin: 0 0 6px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--brand); background: var(--brand-soft);
  color: var(--brand); font-weight: 700; cursor: pointer; white-space: nowrap; }
.askai-btn:hover { background: var(--brand); color: var(--brand-ink); }
.askai-btn[aria-expanded=true] { background: var(--brand); color: var(--brand-ink); }
@media (max-width: 560px) { .askai-btn { padding: 6px 11px; font-size: 13px; } }

/* "Previous / Next" at the foot of every tab */
.tab-steps { display: flex; justify-content: space-between; gap: 12px; margin: 20px 0 0; }
.tab-step { display: grid; gap: 1px; text-align: left; padding: 10px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--brand); font-weight: 600; cursor: pointer; min-width: 0; }
.tab-step small { color: var(--muted); font-weight: 500; font-size: 11px; }
.tab-step.next { text-align: right; margin-left: auto; }
.tab-step:hover { border-color: var(--brand); }

/* the full-text bar between the title and the tabs */
.ftbar { margin: 18px 0 0; padding: 12px 16px; border-left: 4px solid var(--line); }
.ftbar.ok { border-left-color: var(--good); }
.ftbar.warn { border-left-color: var(--warn); }
.ftbar.busy { border-left-color: var(--brand); }
.ftbar.none { border: 1px dashed color-mix(in srgb, var(--brand) 55%, var(--line)); background: color-mix(in srgb, var(--brand-soft) 50%, var(--surface)); }
.ftbar.flash { animation: ft-flash .6s ease-out; }
@keyframes ft-flash { 0%, 40% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 40%, transparent); } 100% { box-shadow: var(--shadow); } }
@media (prefers-reduced-motion: reduce) { .ftbar.flash { animation: none; } }
.ft-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ft-ico { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: var(--grey-bg); color: var(--muted); }
.ft-ico.none { background: var(--surface); font-size: 17px; }
.ft-ico.ok { background: var(--good-bg); color: var(--good); }
.ft-ico.warn { background: var(--warn-bg); color: var(--warn); }
.ft-ico.busy { background: var(--brand-soft); }
.ft-ico .spinner { margin: 0; }
.ft-main { flex: 1; min-width: min(100%, 240px); display: grid; gap: 1px; }
.ft-main span { color: var(--muted); font-size: 13px; }
.ft-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.ft-toggle::after { content: " ▾"; }
.ft-toggle[aria-expanded=true]::after { content: " ▴"; }
.ftbar #pdf-msg:empty { display: none; }
.ftbar #pdf-msg { margin: 8px 0 0; }
.ft-body { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.ft-body .pstep-title { margin-top: 14px; }
.ft-gain { margin: 8px 0 4px; }
@media (max-width: 560px) { .ft-gain { display: none; } } /* phones: the one-line summary above says enough, and the tabs stay close */
.ft-info { margin-top: 8px; }
.ft-info summary { font-size: 13px; }
.ft-info p { margin: 6px 0 0; }
/* the full text's state in the sticky tab bar */
.ft-chip { flex: none; display: inline-flex; align-items: center; gap: 6px; margin: 0 0 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface);
  color: var(--muted); font-weight: 600; font-size: 13px; cursor: pointer; white-space: nowrap; }
.ft-chip:hover { border-color: var(--brand); color: var(--brand); }
.ft-chip-i { display: inline-grid; place-items: center; min-width: 18px; height: 18px; border-radius: 50%; font-size: 11px; font-weight: 700; }
.ft-chip.ok .ft-chip-i { background: var(--good-bg); color: var(--good); }
.ft-chip.warn { border-color: var(--warn); color: var(--warn); }
.ft-chip.warn .ft-chip-i { background: var(--warn-bg); }
.ft-chip.none { border-style: dashed; border-color: var(--brand); color: var(--brand); }
.ft-chip.busy .spinner { width: 13px; height: 13px; margin: 0; }
@media (max-width: 560px) { .ft-chip-l { display: none; } .ft-chip { padding: 6px 9px; } }

/* the full text, offered right where it is missing */
.unlock { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; margin: 0 0 16px; border: 1px dashed color-mix(in srgb, var(--brand) 55%, var(--line)); border-radius: var(--radius);
  background: color-mix(in srgb, var(--brand-soft) 55%, var(--surface)); }
.card .unlock { margin: 10px 0 4px; }
.unlock-ico { flex: none; font-size: 30px; line-height: 1; }
.unlock-body { min-width: 0; }
.unlock-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.unlock-actions .byline { margin: 0; }
.unlock.busy { align-items: center; border-style: solid; }
.unlock.busy .spinner { flex: none; }

/* Full text tab: what the full text powers */
.pstep-title { margin: 18px 0 8px; }
.powers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px 16px; }
.pstep { position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 4px 10px; align-items: start; padding: 8px 0; }
.pstep > :nth-child(3) { grid-column: 2; justify-self: start; }
.pstep-dot { position: relative; z-index: 1; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--grey-bg); color: var(--muted); border: 2px solid var(--surface); }
.pstep.ok .pstep-dot { background: var(--good-bg); color: var(--good); }
.pstep.warn .pstep-dot { background: var(--warn-bg); color: var(--warn); }
.pstep.busy .pstep-dot { background: var(--brand-soft); }
.pstep.busy .pstep-dot .spinner { width: 14px; height: 14px; margin: 0; }
.pstep-text { display: grid; min-width: 0; }
.pstep-text span { color: var(--muted); font-size: 13px; }
.pstep:not(.ok):not(.busy) .pstep-text b { color: var(--muted); }

/* small in-content helpers */
.subnav { display: flex; gap: 6px; margin: 0 0 12px; }
.subnav button { border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 4px 12px; font-weight: 600; font-size: 13px; color: var(--muted); cursor: pointer; }
.subnav button:hover { color: var(--brand); border-color: var(--brand); }
.h-n { display: inline-block; vertical-align: 2px; margin-left: 4px; padding: 0 8px; border-radius: 999px; background: var(--grey-bg); color: var(--muted); font-size: 12px; }
.ask-link { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; padding: 1px 9px; border: 1px solid color-mix(in srgb, var(--brand) 40%, var(--line)); border-radius: 999px;
  background: none; color: var(--brand); font: inherit; font-size: 11px; font-weight: 700; letter-spacing: 0; text-transform: none; vertical-align: 1px; cursor: pointer; white-space: nowrap; }
.ask-link:hover { background: var(--brand-soft); }
.more-link { margin: 4px 0 10px; font-weight: 600; }
.more-link a { text-decoration: none; }
.more-link a:hover { text-decoration: underline; }

/* ---- Ask AI panel: docked beside the page on wide screens, over it on narrow ones ---- */
:root { --askai-w: 400px; }
.askai { position: fixed; z-index: 30; top: var(--top-h, 56px); right: 0; bottom: 0; width: min(var(--askai-w), 100vw); display: flex; flex-direction: column; background: var(--surface);
  border-left: 1px solid var(--line); box-shadow: -8px 0 30px rgb(0 0 0 / .08); }
.askai[hidden] { display: none; }
.askai.expanded { width: 100vw; border-left: 0; box-shadow: none; }
.askai.expanded .askai-head, .askai.expanded .askai-sub, .askai.expanded .askai-log, .askai.expanded .askai-bottom { padding-inline: clamp(16px, 3vw, 48px); }
.askai.expanded .askai-log .msg { max-width: 92%; }
.askai.expanded .askai-log .msg.user { max-width: 70%; }
@media (max-width: 560px) { .askai-expand { display: none; } } /* already full screen there */
body.askai-docked #app, body.askai-docked .foot { padding-right: calc(var(--askai-w) + clamp(16px, 3vw, 56px)); }
.askai-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px 4px 16px; }
.askai-title { flex: 1; display: flex; align-items: center; gap: 8px; font-size: 17px; }
.askai-mode { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; border-radius: 4px; padding: 1px 6px; background: var(--grey-bg); color: var(--muted); }
.askai-mode.pdf { background: var(--good-bg); color: var(--good); }
.askai-x { width: 30px; height: 30px; font-size: 15px; }
.askai-sub { margin: 0; padding: 0 16px 8px; color: var(--muted); font-size: 13px; border-bottom: 1px solid var(--line); }
.askai-log { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 10px; padding: 14px 14px 8px; scroll-behavior: smooth; }
.askai-log .msg { max-width: 94%; }
.askai-log .msg.user { align-self: flex-end; }
.askai-log .msg.assistant { align-self: flex-start; }
.askai-empty { margin: auto 6px; text-align: center; color: var(--muted); font-size: 13px; line-height: 1.55; }
.askai-empty b { color: var(--ink); }
.askai-bottom { border-top: 1px solid var(--line); padding: 8px 14px 10px; }
.askai-bottom .suggest { margin: 0 0 6px; }
.askai-bottom .suggest .chip { font-size: 12px; margin: 0; text-align: left; }
.askai-bottom .form-err { margin: 6px 0; }
.askai-bottom .chat-form { margin-top: 4px; }
.askai-foot { margin: 6px 0 0; font-size: 11px; color: var(--muted); }
.askai-reused { margin: 0 0 8px; padding: 6px 10px; border-radius: 8px; background: var(--brand-soft); color: var(--ink); font-size: 12px; }
.askai-reused[hidden] { display: none; }
.askai-reused .linkbtn { color: var(--brand); font-weight: 700; font-size: 12px; }
.askai-log .msg.reused { animation: askai-reused .8s ease-out; }
@keyframes askai-reused { 0%, 45% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 55%, transparent); } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .askai-log .msg.reused { animation: none; outline: 2px solid var(--brand); } }
@media (max-width: 560px) { .askai { width: 100vw; top: 0; z-index: 55; } } /* over the header, under the PDF viewer its page links open */
/* Phones: a full-screen chat that follows the visible viewport (URL bar, keyboard), clears notches and the home bar,
   keeps the question box at 16px (smaller makes iOS zoom the page on focus) and keeps the ready-made questions to one
   swipeable line so the conversation keeps the room. The desktop panel above is untouched. */
@media (max-width: 560px) {
  .askai { height: 100vh; height: 100dvh; bottom: auto; border-left: 0; box-shadow: none; }
  .askai-head { padding: calc(8px + env(safe-area-inset-top)) 10px 4px 14px; }
  .askai-title { font-size: 17px; }
  .askai-head .linkbtn { padding: 8px; }
  .askai-x { width: 44px; height: 44px; font-size: 17px; }
  .askai-sub { font-size: 12px; padding: 0 14px 8px; }
  .askai-log { padding: 12px 12px 8px; gap: 12px; -webkit-overflow-scrolling: touch; }
  .askai-log .msg { max-width: 90%; font-size: 15px; }
  .askai-log .msg.assistant { max-width: 96%; }
  .askai-empty { font-size: 15px; }
  .askai-bottom { padding: 8px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--surface); }
  .askai-bottom .suggest { flex-wrap: nowrap; overflow-x: auto; margin: 0 -12px 8px; padding: 0 12px 2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .askai-bottom .suggest::-webkit-scrollbar { display: none; }
  .askai-bottom .suggest .chip { flex: none; white-space: nowrap; padding: 7px 13px; font-size: 13px; }
  .askai-bottom .chat-form { gap: 8px; margin-top: 0; }
  .askai-bottom .chat-form textarea { font-size: 16px; min-height: 44px; max-height: 120px; resize: none; padding: 10px 12px; }
  .askai-bottom .chat-form .btn { min-height: 44px; padding-inline: 18px; }
  .askai-foot { font-size: 11px; margin-top: 6px; }
  .askai-reused { font-size: 12px; }
  .askai-log a.cite { font-size: 12px; padding: 2px 8px; margin: 1px 2px; vertical-align: baseline; } /* a thumb-sized page link */
}

/* "Explain / Ask AI…" over selected text */
.sel-ask { position: absolute; z-index: 40; display: flex; border-radius: 999px; overflow: hidden; background: var(--ink); box-shadow: 0 6px 20px rgb(0 0 0 / .25); }
.sel-ask[hidden] { display: none; }
.sel-ask button { border: 0; background: none; color: var(--bg); font: inherit; font-size: 13px; font-weight: 600; padding: 6px 12px; cursor: pointer; }
.sel-ask button + button { border-left: 1px solid color-mix(in srgb, var(--bg) 25%, transparent); }
.sel-ask button:hover { background: color-mix(in srgb, var(--bg) 14%, transparent); }

/* a PDF dragged over the study page */
.dropzone { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 24px; pointer-events: none;
  background: color-mix(in srgb, var(--brand) 16%, transparent); backdrop-filter: blur(2px); }
.dropzone[hidden] { display: none; }
.dropzone-in { display: grid; gap: 6px; justify-items: center; text-align: center; padding: 34px 44px; border: 3px dashed var(--brand); border-radius: 16px; background: var(--surface); box-shadow: 0 20px 60px rgb(0 0 0 / .2); }
.dropzone-in b { font-size: 17px; }
.dropzone-in span { color: var(--muted); }
.dropzone-ico { font-size: 40px; }
.tabpanel > .card:last-child, .tabpanel > .registry { margin-bottom: 0; }
.tabpanel > .registry { margin-top: 0; }
.tabpanel .sheet { max-width: 1100px; }

/* "at a glance" cards on the Overview tab */
.glance { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 10px; margin-bottom: 16px; align-items: start; }
.gcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; min-width: 0; box-shadow: var(--shadow); }
.gcard[data-goto] { cursor: pointer; }
.gcard[data-goto]:hover { border-color: var(--brand); }
.glabel { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.glabel .src-tag { letter-spacing: .04em; }
.gvalue { font-size: 17px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.gvalue .verdict { margin: 2px 4px 2px 0; }
.gof { font-size: 13px; font-weight: 500; color: var(--muted); }
.gsub { margin-top: 4px; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.gcard.good { border-color: var(--good); }
.gcard.cta .gsub { color: var(--brand); font-weight: 600; }
.gcard.good .gvalue { color: var(--good); }
.lvl-meter { display: inline-flex; gap: 3px; vertical-align: middle; margin-left: 6px; }
.lvl-meter i { width: 12px; height: 8px; border-radius: 2px; background: var(--grey-bg); }
.lvl-meter i.on { background: var(--brand); }
.lvl-meter.l4 i.on, .lvl-meter.l5 i.on { background: var(--warn); }
.qbar { display: flex; height: 6px; border-radius: 999px; overflow: hidden; margin: 4px 0 6px; background: var(--grey-bg); }
.qbar i.yes { background: var(--good); } .qbar i.no { background: var(--bad); } .qbar i.unknown { background: var(--line); }
.gcard.rob .rob-j { display: inline-block; font-size: 15px; padding: 2px 10px; }
.gcard.rob.low .rob-j { background: var(--good-bg); color: var(--good); }
.gcard.rob.some_concerns .rob-j { background: var(--warn-bg); color: var(--warn); }
.gcard.rob.high .rob-j { background: var(--bad-bg); color: var(--bad); }

@media (max-width: 560px) { .glance { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .gcard { padding: 10px 12px; } .gvalue { font-size: 15px; } }

/* Cite tab */
.cites { display: grid; gap: 10px; }
.cite-row { display: grid; grid-template-columns: 90px minmax(0, 1fr) auto; gap: 10px; align-items: start; }
.cite-k { font-weight: 700; color: var(--muted); padding-top: 8px; }
.cite-v { margin: 0; padding: 8px 10px; background: var(--grey-bg); border-radius: 8px; max-width: 110ch; white-space: pre-wrap; overflow-wrap: anywhere; font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
@media (max-width: 560px) { .cite-row { grid-template-columns: minmax(0, 1fr) auto; } .cite-k { grid-column: 1 / -1; padding: 0; } }
.fcounting { margin: 0; padding: 8px 20px; background: var(--brand-soft); color: var(--brand); font-size: 13px; font-weight: 600; }
.fcounting[hidden] { display: none; }
.fdrawer.counting .fpill-n { opacity: .45; }
.updating.found, .updating.counting { position: static; }
.updating.warn { position: static; background: var(--warn-bg); color: var(--warn); font-weight: 500; }
.updating .linkbtn { font-weight: 700; }

/* Results tab */
.rx h3 { margin-top: 18px; }
.rx-bottom { background: var(--brand-soft); border-radius: 8px; padding: 10px 12px; }
.rx-outcomes { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.rx-outcome { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.rx-outcome p { margin: 6px 0 2px; }
.rx-ohead { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rx-num { margin-top: 6px; font-variant-numeric: tabular-nums; font-weight: 600; overflow-wrap: anywhere; }
.rx-chip { font-size: 11px; border-radius: 999px; padding: 1px 8px; background: var(--bg); border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.rx-chip.good { background: var(--good-bg); color: var(--good); border-color: transparent; }
.rx-chip:empty { display: none; }
.rx-eff { font-weight: 500; color: var(--muted); margin-top: 2px; }
.rx-chip.warn { background: var(--warn-bg); color: var(--warn); border-color: transparent; }
.rx-note { color: var(--muted); }
.rx-sec { margin-top: 14px; }
.rx-sec h3 { margin-bottom: 4px; }
.rx-items { margin: 4px 0; padding-left: 20px; display: grid; gap: 5px; }
.rx-items li { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.rx-where { font-size: 12px; color: var(--muted); }
.rx-tablewrap { overflow-x: auto; margin: 6px 0; }
.rx-table { border-collapse: collapse; min-width: 50%; font-variant-numeric: tabular-nums; }
.rx-table th, .rx-table td { text-align: left; padding: 5px 12px 5px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.rx-table th { font-size: 13px; color: var(--muted); font-weight: 600; }
.rx-warn { margin-top: 6px; font-size: 13px; color: var(--warn); background: var(--warn-bg); border-radius: 8px; padding: 4px 8px; }
.rx-extract { margin-top: 16px; }
.rx-extract summary { cursor: pointer; color: var(--muted); font-weight: 600; }
.rx-avail { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 12px; }
.rx-extract .rx-sec h3 { font-size: 15px; }

/* Figures tab */
.fig-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin: 12px 0; }
.fig-card { margin: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface); }
.fig-img { display: block; width: 100%; height: 160px; object-fit: contain; background: var(--grey-bg); }
.fig-missing { display: flex; align-items: center; justify-content: center; height: 160px; background: var(--grey-bg); color: var(--muted); font-size: 13px; text-align: center; padding: 0 10px; }
.fig-cap { padding: 8px 10px; font-size: 13px; }
.fig-shot-note { color: var(--muted); font-size: 12px; }

/* Tables tab */
.tbl-raw { margin: 0 0 6px; padding: 8px 10px; background: var(--grey-bg); border-radius: 8px; overflow-x: auto; white-space: pre; font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
.tbl-shot { display: block; width: 100%; height: auto; margin: 0 0 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); cursor: zoom-in; }

/* PDF viewer overlay */
.pdfv-overlay { position: fixed; inset: 0; z-index: 60; display: none; align-items: center; justify-content: center; background: rgb(0 0 0 / .55); padding: 16px; }
.pdfv-overlay.open { display: flex; }
.pdfv-modal { width: min(920px, 100%); height: min(90vh, 1100px); background: var(--surface); border-radius: 12px; box-shadow: 0 20px 60px rgb(0 0 0 / .4); display: flex; flex-direction: column; overflow: hidden; }
.pdfv-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.pdfv-pageinfo { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pdfv-spacer { flex: 1; }
/* Pages and pictures are centred with auto margins, not justify-content/align-items: one wider than the box (a zoomed picture,
   a PDF page at its minimum scale on a narrow phone) then starts at the left edge and every part of it can be scrolled to.
   Centring with justify-content pushed the overflow out both sides, and the left side could never be reached. */
.pdfv-body { position: relative; flex: 1; overflow: auto; overscroll-behavior: contain; background: var(--grey-bg); display: flex; justify-content: flex-start; padding: 20px; }
.pdfv-page { position: relative; height: fit-content; box-shadow: 0 2px 10px rgb(0 0 0 / .25); }
.pdfv-page canvas { display: block; }
.pdfv-scroll { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; width: 100%; }
.pdfv-scroll .pdfv-page { background: #fff; flex: none; margin-inline: auto; }
.pdfv-loading { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: var(--grey-bg); color: var(--muted); font-size: 15px; }
.pdfv-err { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 20px; text-align: center; color: var(--warn); }
.pdfv-err[hidden] { display: none; }

/* pdf.js text layer (from pdfjs-dist/web/pdf_viewer.css), trimmed to what this viewer uses */
.textLayer { position: absolute; text-align: initial; inset: 0; overflow: clip; opacity: 1; line-height: 1; forced-color-adjust: none; transform-origin: 0 0; z-index: 0; }
.textLayer :is(span, br) { color: transparent; position: absolute; white-space: pre; cursor: text; transform-origin: 0% 0%; }
.textLayer mark.pdfv-find { color: transparent; background: rgb(255 224 84 / .6); border-radius: 2px; }
.textLayer mark.pdfv-find-cur { color: transparent; background: rgb(255 140 0 / .65); outline: 2px solid rgb(255 140 0); border-radius: 2px; }
.pdfv-search { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.pdfv-qwrap { position: relative; display: inline-flex; align-items: center; }
.pdfv-q::-webkit-search-cancel-button { display: none; }
.pdfv-qclear { position: absolute; right: 2px; width: 28px; height: 28px; padding: 0; font-size: 17px; line-height: 1; color: var(--muted); background: none; border: 0; border-radius: 50%; cursor: pointer; }
.pdfv-qclear:hover, .pdfv-qclear:focus-visible { color: inherit; background: var(--line); }
.pdfv-q { width: 170px; min-width: 0; padding: 4px 32px 4px 8px; font: inherit; font-size: 13px; color: var(--text, inherit); background: var(--surface); border: 1px solid var(--control-border); border-radius: 8px; }
.pdfv-overlay.cropping .pdfv-search { display: none; }
.textLayer span.pdfv-hit { background: rgb(255 224 84 / .55); border-radius: 2px; color: transparent; }

/* crop editor */
.pdfv-bar .btn { white-space: nowrap; }
.pdfv-nav { display: contents; } /* page nav + search: part of the bar's row normally, a row of their own while cropping */
.pdfv-overlay.cropping .pdfv-nav { display: flex; flex: 1 0 100%; align-items: center; gap: 8px; flex-wrap: wrap; }
.pdfv-croptools, .pdfv-reviewtools { display: none; align-items: center; gap: 8px; flex-wrap: wrap; }
.pdfv-overlay.cropping .pdfv-croptools { display: inline-flex; }
.pdfv-overlay.reviewing .pdfv-croptools { display: none; }
.pdfv-overlay.reviewing .pdfv-reviewtools { display: inline-flex; }
.pending-note { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: 12px; background: var(--warn-bg); color: var(--warn); }
.review-banner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; margin: 0 0 12px; border: 1px solid #d97706; border-radius: 8px; background: rgb(217 119 6 / .08); }
.pdfv-guide { padding: 10px 14px; border-bottom: 1px solid var(--line); background: rgb(15 118 110 / .08); font-size: 13px; line-height: 1.45; }
.pdfv-guide[hidden] { display: none; }
.pdfv-guide-more > summary { cursor: pointer; list-style: none; }
.pdfv-guide-more > summary::-webkit-details-marker { display: none; }
.pdfv-guide-more > summary::before { content: '▸'; display: inline-block; width: 1em; transition: transform .15s ease-out; }
.pdfv-guide-more[open] > summary::before { transform: rotate(90deg); }
.pdfv-guide-title { font-size: 17px; font-weight: 700; color: var(--brand); }
.pdfv-name { background: #fde047; color: #1c1917; font-weight: 700; padding: 1px 7px; border-radius: 4px; box-shadow: 0 0 0 1px rgb(0 0 0 / .18); }
.pdfv-name-lg { font-size: 20px; padding: 2px 10px; }
.pdfv-guide-cap { margin-top: 2px; color: var(--muted); font-style: italic; }
.pdfv-guide ul { margin: 4px 0 4px 18px; padding: 0; }
.pdfv-guide-end { color: var(--muted); }
.pdfv-ghosts { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.pdfv-ghost { position: absolute; border: 2px dashed var(--brand); background: rgb(15 118 110 / .08); color: var(--brand); font: 600 11px/1 inherit; padding: 2px 4px; box-sizing: border-box; text-align: right; }
.pdfv-crop { position: absolute; inset: 0; overflow: hidden; display: none; cursor: crosshair; touch-action: none; z-index: 2; }
.pdfv-overlay.cropping .pdfv-crop { display: block; }
.pdfv-sel { display: none; position: absolute; border: 2px solid var(--brand); background: rgb(15 118 110 / .15); box-shadow: 0 0 0 9999px rgb(0 0 0 / .35); cursor: move; touch-action: none; }
.pdfv-crop.dragging, .pdfv-crop.dragging * { user-select: none; }
.pdfv-bgnote { flex-basis: 100%; font-size: 12px; color: var(--muted, #6b7280); }
.pdfv-bgnote::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--brand); }
.pdfv-h { position: absolute; display: block; }
.pdfv-h-n, .pdfv-h-s { left: 8px; right: 8px; height: 12px; cursor: ns-resize; }
.pdfv-h-e, .pdfv-h-w { top: 8px; bottom: 8px; width: 12px; cursor: ew-resize; }
.pdfv-h-n { top: -7px; } .pdfv-h-s { bottom: -7px; } .pdfv-h-w { left: -7px; } .pdfv-h-e { right: -7px; }
.pdfv-h-nw, .pdfv-h-ne, .pdfv-h-sw, .pdfv-h-se { width: 14px; height: 14px; background: var(--brand); border: 2px solid #fff; border-radius: 4px; }
.pdfv-h-nw { top: -8px; left: -8px; cursor: nwse-resize; } .pdfv-h-se { bottom: -8px; right: -8px; cursor: nwse-resize; }
.pdfv-h-ne { top: -8px; right: -8px; cursor: nesw-resize; } .pdfv-h-sw { bottom: -8px; left: -8px; cursor: nesw-resize; }

/* picture popup */
.imgv-body { align-items: flex-start; }
.imgv-body img { display: block; flex: none; margin: 0 auto; max-width: 100%; height: auto; background: #fff; box-shadow: 0 2px 10px rgb(0 0 0 / .25); cursor: zoom-in; -webkit-user-drag: none; user-select: none; }
.imgv-body.zoomed img { cursor: grab; }
.imgv-body.panning, .imgv-body.panning img { cursor: grabbing; }

.copy-mini { margin-left: 4px; padding: 0 6px; font: inherit; font-size: 0.8em; line-height: 1.5; color: var(--muted, #667); background: none; border: 1px solid currentColor; border-radius: 4px; cursor: pointer; }
.copy-mini:hover, .copy-mini:focus-visible { color: var(--ink); }

/* sign-up: consent, CAPTCHA; account: delete */
.check { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; margin-bottom: 14px; color: var(--muted); }
.check input { margin-top: 3px; }
.captcha { margin-bottom: 14px; min-height: 0; }
.legal-note { font-size: 12px; color: var(--muted); margin: 8px 0 0; }
.danger-zone { border-top: 1px solid var(--line); margin-top: 24px; padding-top: 18px; }
.danger-zone h2 { color: var(--bad); }
.btn.danger:not(.ghost) { background: var(--bad); color: var(--bad-ink); border-color: transparent; }
.btn.danger-outline { color: var(--bad); border-color: var(--bad); }

/* ---- admin Analytics page (public/analytics-ui.js) ---- */
/* Chart colors: a validated categorical order (identity), a one-hue blue ramp for magnitude (heatmap); dark mode gets its own steps. */
.an {
  --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100; --s5: #e87ba4;
  --q1: #cde2fb; --q2: #9ec5f4; --q3: #6da7ec; --q4: #3987e5; --q5: #256abf; --q6: #184f95; --q7: #0d366b;
  --an-grid: #e6ebea; --an-axis: #667574;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .an {
    --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; --s5: #d55181;
    --q1: #173a60; --q2: #184f95; --q3: #1c5cab; --q4: #256abf; --q5: #3987e5; --q6: #6da7ec; --q7: #9ec5f4;
    --an-grid: #20302f; --an-axis: #7f9391;
  }
}
:root[data-theme="dark"] .an {
  --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; --s5: #d55181;
  --q1: #173a60; --q2: #184f95; --q3: #1c5cab; --q4: #256abf; --q5: #3987e5; --q6: #6da7ec; --q7: #9ec5f4;
  --an-grid: #20302f; --an-axis: #7f9391;
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.an h1 { margin: 0; }
.an h2 { font-size: 17px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 0 0 10px; }
.an .card { margin: 0; min-width: 0; }
.an .card:hover { border-color: var(--line); }
.an .card h3 { font-weight: 600; margin-bottom: 8px; }
.an-h3 { margin-top: 16px !important; }
.an-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.an-sub, .an-note { color: var(--muted); font-size: 13px; margin: 2px 0 8px; }
.an-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.an-live { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); margin-right: 6px; }
.an-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 0 color-mix(in srgb, var(--good) 60%, transparent); animation: an-pulse 2s ease-out 3; } /* three pulses on load, then a still dot: no endless oscillation */
@keyframes an-pulse { 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .an-live i { animation: none; } }
.an-seg { display: inline-flex; background: var(--grey-bg); border-radius: 12px; padding: 4px; }
.an-seg button { border: 0; background: none; padding: 5px 11px; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--muted); }
.an-seg button[aria-pressed=true] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.an-info { background: var(--info-bg); color: var(--info); }
.an-sec { margin-top: 28px; }
/* section tabs: a sticky underline bar (scrolls sideways on narrow screens), like the study page */
.an-tabs { position: sticky; top: 56px; z-index: 6; display: flex; gap: 2px; margin: 24px 0 16px; background: var(--bg); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.an-tabs::-webkit-scrollbar { display: none; }
.an-tabs [role=tab] { flex: none; display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; font: inherit; font-weight: 600; color: var(--muted); padding: 10px 14px; cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px; border-radius: 8px 8px 0 0; white-space: nowrap; }
.an-tabs [role=tab]:hover { color: var(--ink); background: var(--grey-bg); }
.an-tabs [role=tab][aria-selected=true] { color: var(--brand); border-bottom-color: var(--brand); }
.an-tabs [role=tab]:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.an-tab-n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--warn-bg); color: var(--warn); font-size: 11px; font-weight: 700; }
.an-h2-next { margin-top: 28px !important; }
.an-grid { display: grid; gap: 12px; margin-bottom: 12px; }
.an-grid.g-2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.an-grid.g-1-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.an-grid.g-1-1 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.an-grid.g-1-1-1 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
@media (max-width: 1000px) { .an-grid.g-2-1, .an-grid.g-1-2 { grid-template-columns: minmax(0, 1fr); } }

.an-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: 10px; }
.an-kpi[title] { cursor: help; }
.an-kpi { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px 8px; }
.an-kpi-l { color: var(--muted); font-size: 13px; font-weight: 600; }
.an-kpi > b { font-size: 30px; line-height: 1.15; letter-spacing: -.02em; }
.an-delta { font-size: 12px; color: var(--muted); }
.an-delta.up { color: var(--good); }
.an-delta.down { color: var(--bad); }
.an-delta b { font-size: 11px; }
.an-muted { color: var(--muted); font-weight: 400; }
.an-spark { width: 100%; height: 30px; margin-top: 6px; display: block; }

.an-mini { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 12px 14px; margin-bottom: 8px; }
.an-m b { display: block; font-size: 20px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.an-m span { color: var(--muted); font-size: 12px; display: block; }
.an-m small { color: var(--muted); font-size: 11px; display: block; line-height: 1.3; }
.an-m.bad b { color: var(--bad); }

.an-chart { position: relative; min-height: 60px; }
.an-plot { position: relative; }
.an-plot svg { display: block; width: 100%; height: 100%; overflow: visible; touch-action: pan-y; }
.an-grid-l line { stroke: var(--an-grid); stroke-width: 1; shape-rendering: crispEdges; }
.an-axis-t text { fill: var(--an-axis); font-size: 11px; font-variant-numeric: tabular-nums; }
.an-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.an-area { stroke: none; opacity: .1; }
.an-dot { stroke: var(--surface); stroke-width: 2; }
.an-cross { stroke: var(--an-axis); stroke-width: 1; }
.an-line.s1 { stroke: var(--s1); } .an-area.s1, .an-dot.s1, i.s1 { fill: var(--s1); background: var(--s1); }
.an-line.s2 { stroke: var(--s2); } .an-area.s2, .an-dot.s2, i.s2 { fill: var(--s2); background: var(--s2); }
.an-line.s3 { stroke: var(--s3); } .an-area.s3, .an-dot.s3, i.s3 { fill: var(--s3); background: var(--s3); }
.an-line.s4 { stroke: var(--s4); } .an-area.s4, .an-dot.s4, i.s4 { fill: var(--s4); background: var(--s4); }
.an-line.s5 { stroke: var(--s5); } .an-area.s5, .an-dot.s5, i.s5 { fill: var(--s5); background: var(--s5); }
.an-nodata { position: absolute; inset: 0 0 26px 42px; display: grid; place-items: center; margin: 0; color: var(--muted); font-size: 15px; pointer-events: none; }
.an-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 8px; }
.an-lg { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 2px 0; font-size: 13px; color: var(--ink); cursor: pointer; }
.an-lg:disabled { cursor: default; color: var(--ink); }
.an-lg i { width: 12px; height: 3px; border-radius: 2px; }
.an-lg b { font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.an-lg[aria-pressed=false] { opacity: .45; text-decoration: line-through; }

.an-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.an-bars li { display: grid; grid-template-columns: minmax(90px, 38%) minmax(40px, 1fr) auto; gap: 10px; align-items: center; font-size: 13px; }
.an-bl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-bl a { color: var(--ink); text-decoration: none; }
.an-bl a:hover { color: var(--brand); text-decoration: underline; }
.an-track { height: 12px; display: block; }
.an-bar { display: block; height: 100%; background: var(--s1); border-radius: 0 4px 4px 0; min-width: 0; }
.an-bars.warn .an-bar { background: var(--s2); }
.an-bv { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; white-space: nowrap; }
.an-bv .an-muted { font-size: 12px; }

.an-funnel { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.an-fl { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; margin-bottom: 3px; }
.an-ftrack { height: 14px; background: var(--grey-bg); border-radius: 4px; }
.an-fbar { height: 100%; background: var(--s1); border-radius: 4px; }

.an-heat { display: grid; grid-template-columns: 34px repeat(24, minmax(14px, 1fr)) 48px; gap: 2px; min-width: 520px; align-items: center; }
.an-hh { font-size: 11px; color: var(--an-axis); text-align: left; font-variant-numeric: tabular-nums; }
.an-hd { font-size: 11px; color: var(--muted); }
.an-ht { font-size: 11px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.an-cell { display: block; aspect-ratio: 1; min-height: 14px; border-radius: 4px; background: var(--grey-bg); }
.an-cell.q1 { background: var(--q1); } .an-cell.q2 { background: var(--q2); } .an-cell.q3 { background: var(--q3); } .an-cell.q4 { background: var(--q4); }
.an-cell.q5 { background: var(--q5); } .an-cell.q6 { background: var(--q6); } .an-cell.q7 { background: var(--q7); }
.an-heat-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 10px; font-size: 13px; color: var(--muted); }
.an-scale { display: inline-flex; align-items: center; gap: 3px; }
.an-scale .an-cell { width: 12px; min-height: 12px; }

.an-list { margin: 0; padding-left: 1.3em; display: grid; gap: 7px; font-size: 15px; }
.an-list a { color: var(--ink); text-decoration: none; }
.an-list a:hover { color: var(--brand); text-decoration: underline; }
.an-ln { display: block; font-size: 12px; }
.an-empty { color: var(--muted); font-size: 15px; margin: 6px 0; }
.an-scroll { overflow-x: auto; }
.an table .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.an table thead th { color: var(--muted); font-weight: 600; border-top: 0; }
.an-wrap { overflow-wrap: anywhere; }
.an-bad { color: var(--bad); font-weight: 600; }
.an-table { margin-top: 10px; }
.an-table summary { cursor: pointer; color: var(--brand); font-size: 15px; }
.an-table table { margin-top: 8px; min-width: 900px; }

.an-attn { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 10px; }
.an-at { display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: var(--ink); }
.an-at b { font-size: 24px; line-height: 1.1; }
.an-at span { font-size: 13px; color: var(--muted); }
.an-at.hot { border-left: 4px solid var(--warn); }
a.an-at.hot:hover { border-color: var(--warn); }
.an-flag { color: var(--warn) !important; font-weight: 600; }
.an-ok { color: var(--good) !important; }
.an-foot { margin-top: 28px !important; }
.an-foot .an-note { margin-top: 8px; }

.an-tip { position: fixed; z-index: 50; pointer-events: none; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 8px;
  padding: 7px 10px; font-size: 13px; box-shadow: 0 4px 16px rgba(0,0,0,.18); max-width: 300px; line-height: 1.45; }
.an-tip div { display: flex; align-items: center; gap: 6px; }
.an-tip div b { margin-left: auto; padding-left: 12px; font-variant-numeric: tabular-nums; }
.an-tip i { width: 10px; height: 3px; border-radius: 2px; display: inline-block; }

/* ---- notification bell ---- */
.bell { position: relative; }
.bell-count { position: absolute; top: -6px; right: -6px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--bad); color: var(--bad-ink); font-size: 11px; font-weight: 700; line-height: 17px; text-align: center; }
.bell-menu { width: min(360px, 92vw); max-height: min(70vh, 520px); overflow-y: auto; padding: 0; }
.bell-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 2; background: var(--surface); } /* above the positioned items that scroll under it */
.menu .bell-head .linkbtn { margin-left: auto; width: auto; padding: 0; }
.menu .bell-head .linkbtn:hover { background: none; color: var(--ink); }
.bell-list { list-style: none; margin: 0; padding: 4px; }
.bell-row { position: relative; }
.menu .bell-item { display: grid; gap: 2px; padding: 9px 32px 9px 18px; position: relative; }
.menu .bell-x { position: absolute; top: 2px; right: 2px; width: 28px; height: 28px; padding: 0; display: grid; place-items: center; border-radius: 50%; color: var(--muted); font-size: 17px; line-height: 1; opacity: 0; }
.bell-row:hover .bell-x, .bell-x:focus-visible { opacity: 1; }
.menu .bell-x:hover { background: var(--line); color: var(--ink); }
@media (hover: none) { .menu .bell-x { opacity: .7; } }
.bell-item.unread::before { content: ''; position: absolute; left: 6px; top: 15px; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); }
.bell-title { font-weight: 600; }
.bell-body { color: var(--muted); font-size: 13px; }
.bell-time { color: var(--muted); font-size: 12px; }
.bell-empty { margin: 0; padding: 16px 14px; color: var(--muted); font-size: 15px; }
@media (max-width: 560px) { .bellbox { position: static; } .bell-menu { position: fixed; right: 8px; left: 8px; top: 56px; width: auto; } }

/* ---- a PDF waiting for an admin ---- */
.review { border-top: 1px solid var(--line); padding: 12px 0 4px; margin-top: 10px; }
.review-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.review-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
table.jobs.compare { margin: 8px 0 0; }
table.jobs.compare th[scope=row] { color: var(--muted); font-weight: 600; white-space: nowrap; width: 1%; }
table.jobs.compare td { word-break: break-word; }

/* points balance in the header */
.points-pill { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; color: var(--ink); text-decoration: none; font-size: 15px; }
.points-pill:hover { border-color: var(--brand); }
.points-pill span:first-child { color: var(--brand); }
.points-pill[hidden] { display: none; }

/* a ready-made question this reader has already asked about this study */
.ask-link.used { border-color: var(--good); background: var(--good-bg); color: var(--good); }
.ask-link.used:hover { background: var(--good-bg); filter: brightness(.97); }

/* Regenerate under an answer in the Ask AI chat */
.msg-actions { margin-top: 4px; }
.msg-actions .linkbtn { font-size: 12px; }

/* my notes: a private note on a study, and its preview on a saved-study card */
.my-note { margin: 10px 0; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.my-note > summary { cursor: pointer; padding: 8px 12px; font-weight: 600; }
.my-note textarea { display: block; box-sizing: border-box; width: calc(100% - 24px); margin: 0 12px 12px; padding: 8px; font: inherit; color: inherit; background: var(--bg, transparent); border: 1px solid var(--control-border); border-radius: 8px; resize: vertical; }
.card-note { margin: 8px 0 0; padding: 6px 10px; font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; border-left: 3px solid var(--brand); background: var(--surface); border-radius: 4px; }
.hist-day { font-size: 17px; margin: 22px 0 6px; color: var(--muted, inherit); }
.hist-day:first-child { margin-top: 8px; }

/* search alerts (#/alerts) */
.alert-list { list-style: none; padding: 0; margin: 0; }
.alert-row { display: flex; gap: 12px 20px; justify-content: space-between; flex-wrap: wrap; align-items: center; }
.alert-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 260px; }
.alert-q { font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.alert-main .byline { margin: 0; }
.alert-err { color: var(--danger, #b42318); }
.alert-ctl { display: flex; gap: 8px 14px; flex-wrap: wrap; align-items: center; font-size: 15px; }
.alert-ctl label { display: inline-flex; gap: 6px; align-items: center; }
.alert-btn.on svg { fill: currentColor; }
.alert-btn[hidden] { display: none; }

/* ---- admin Inbox (public/inbox-ui.js) ---- */
.pill.inbox-count { background: var(--warn-bg); color: var(--warn); }
.inbox-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0; }
.inbox-bar .txt { flex: 1 1 200px; min-width: 0; }
.inbox-tabs { display: flex; gap: 6px; }
.inbox-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.inbox-list li + li { border-top: 1px solid var(--line); }
.inbox-row { display: grid; grid-template-columns: minmax(90px, 200px) 1fr auto; gap: 12px; align-items: baseline; padding: 10px 14px; color: var(--ink); text-decoration: none; }
.inbox-row:hover { background: var(--brand-soft); }
.inbox-row.unread { background: color-mix(in srgb, var(--brand-soft) 55%, var(--surface)); }
.inbox-row:not(.unread) .inbox-subject b { font-weight: 500; }
.inbox-from, .inbox-subject { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.inbox-row.unread .inbox-from { font-weight: 700; }
.inbox-meta { color: var(--muted); font-size: 13px; white-space: nowrap; }
@media (max-width: 640px) { .inbox-row { grid-template-columns: 1fr auto; } .inbox-subject { grid-column: 1 / -1; grid-row: 2; } }
.inbox-msg-head { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.inbox-msg-head[role=button] { cursor: pointer; }
.inbox-msg-head .inbox-when { margin-left: auto; }
.inbox-msg.out { border-left: 3px solid var(--brand); }
.inbox-msg-body { margin-top: 10px; }
.inbox-frame { width: 100%; height: 160px; border: 1px solid var(--line); border-radius: 8px; background: #fff; display: block; }
.inbox-files { margin-top: 8px; }
.inbox-fields { display: grid; gap: 6px; margin-bottom: 10px; }
.inbox-fields label { display: grid; grid-template-columns: 64px 1fr; gap: 8px; align-items: center; font-size: 15px; color: var(--muted); }
.editor-bar { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.editor { min-height: 160px; padding: 10px 12px; border: 1px solid var(--control-border); border-radius: 8px; background: var(--surface); color: var(--ink); overflow-wrap: anywhere; }
.editor:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
.inbox-row .replied { color: var(--brand); font-weight: 700; }