/* The library and the reading room — ported from Neuroanalytica's app.css
   (the shared components they use, then the Literature block verbatim), drawn
   in Gistify's palette through the alias layer below. Gistify's own decisions
   are in the overrides at the end of this file. */

:root {
  /* Neuroanalytica's token names → Gistify's palette (static/app.css) */
  --surface: var(--sheet);
  --surface-2: #FAFBF8;
  --sunken: var(--paper-deep);
  --selected-rule: #9AA3AE;
  --ink-2: var(--graphite);
  --ink-3: #7F8794;
  --ink-inverse: var(--paper);
  --rule-strong: #BCC2B8;
  --rule-faint: #E3E6DF;
  /* the accent is ink, not a colour: colour is kept for meaning (found / passed / corrected) */
  --accent: #2A3646;
  --accent-deep: var(--ink);
  --accent-tint: #E6EAF0;
  --accent-ink: var(--ink);
  --gold: #7A6A2E;
  --gold-tint: #F1ECD8;
  --ok-tint: var(--ok-soft);
  --warn: #8A6A12;
  --warn-tint: #F5ECCF;
  --danger: var(--pencil);
  --danger-tint: var(--pencil-soft);
  --font-display: var(--read);
  --font-body: var(--read);
  --font-sans: var(--ui);
  --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, monospace;
  --t-base: 1rem;
  --lh-tight: 1.15; --lh-snug: 1.3; --lh-body: 1.6;
  --w-reg: 400; --w-med: 500; --w-semi: 600; --w-bold: 700;
  --r-xs: 3px; --r-sm: 4px; --r-md: 6px; --r-lg: 8px; --r-round: 999px;
  --shadow-1: 0 1px 2px rgba(28,36,49,.06), 0 1px 1px rgba(28,36,49,.04);
  --shadow-2: 0 2px 6px rgba(28,36,49,.08), 0 4px 14px rgba(28,36,49,.05);
  --ease-out: cubic-bezier(.2,.7,.3,1);
  --dur-fast: 120ms; --dur: 200ms;
  --shell-h: 57px;
}

/* ── shared components (from Neuroanalytica app.css, only the rules these pages use) ── */
.chip {font-family: var(--font-sans);}
.mono,
.ocount {font-family: var(--font-mono);}
.ocount {font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;}
.eyebrow {font-family: var(--font-sans); font-size: var(--t-xs); font-weight: var(--w-semi); text-transform: uppercase; letter-spacing: 0.13em; color: var(--gold);}
.inline {display: inline;}
.linkbtn {background: none; border: none; color: var(--accent-ink); font-family: var(--font-sans); font-size: var(--t-sm); cursor: pointer; padding: 0; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px;}
.linkbtn:hover {color: var(--accent-deep);}
.surface-head {padding: var(--s-6) 0 var(--s-4); border-bottom: 1px solid var(--rule-strong); margin-bottom: var(--s-5);}
.surface-title {font-size: var(--t-2xl); margin: var(--s-1) 0;}
.surface-dek {color: var(--ink-2); font-size: var(--t-md); max-width: var(--measure); margin: 0;}
.field {width: 100%; font-family: var(--font-sans); font-size: var(--t-base); color: var(--ink); background: var(--surface); border: 1px solid var(--rule-strong); border-radius: var(--r-sm); padding: 8px 10px; transition: border-color var(--dur), box-shadow var(--dur);}
.field::placeholder {color: var(--ink-3);}
.field:focus-visible {outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint);}
.field-search {padding-left: 32px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%238a7e72' stroke-width='1.6'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='M11 11l4 4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 10px center;}
.ocount {color: var(--ink-2); font-variant-numeric: tabular-nums; font-size: var(--t-xs); font-family: var(--font-mono);}
.chip-check input {position: absolute; opacity: 0; width: 18px; height: 18px; margin: 0; cursor: pointer;}
.chip-row {display: flex; flex-wrap: wrap; gap: var(--s-2);}
.chip {display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-sans); font-size: var(--t-sm); font-weight: var(--w-med); color: var(--ink-2); background: var(--surface); border: 1px solid var(--rule-strong); border-radius: var(--r-round); padding: 5px 12px; cursor: pointer; min-height: 30px; transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);}
.chip:hover {border-color: var(--accent); color: var(--ink);}
.chip-check input {position: absolute; opacity: 0; width: 0; height: 0;}
.chip-check:has(input:checked) {background: var(--accent-tint); border-color: var(--selected-rule); color: var(--accent-ink);}
.chip-check:has(input:checked)::before {content: "✓"; font-size: 0.8em; color: var(--accent); margin-right: -2px;}
.chip-check:has(input:focus-visible) {outline: 2px solid var(--accent); outline-offset: 2px;}
.btn {font-family: var(--font-sans); font-size: var(--t-sm); font-weight: var(--w-semi); text-transform: uppercase; letter-spacing: 0.06em; line-height: 1; padding: 9px 16px; border-radius: var(--r-sm); border: 1px solid transparent; cursor: pointer; white-space: nowrap; min-height: 36px; transition: background var(--dur), border-color var(--dur), color var(--dur), box-shadow var(--dur);}
.btn-primary {background: var(--accent); color: var(--ink-inverse); box-shadow: var(--shadow-1);}
.btn-primary:hover {background: var(--accent-deep);}
.btn-secondary {background: var(--surface); color: var(--accent-ink); border-color: var(--selected-rule);}
.btn-secondary:hover {background: var(--accent-tint);}
.btn-ghost {background: transparent; color: var(--ink-2);}
.btn-ghost:hover {background: var(--sunken); color: var(--ink);}
.btn:disabled {opacity: .45; cursor: not-allowed;}
td.mono {font-family: var(--font-mono); font-variant-numeric: tabular-nums;}
.status {font-family: var(--font-sans); font-size: var(--t-xs); font-weight: var(--w-semi); padding: 2px 8px; border-radius: var(--r-round); white-space: nowrap;}
.status-ok {background: var(--ok-tint); color: var(--ok);}
.status-warn {background: var(--warn-tint); color: var(--warn);}
.status-danger {background: var(--danger-tint);color: var(--danger);}
.subnav-badge {font-family: var(--font-mono); font-size: var(--t-xs); background: var(--sunken); color: var(--ink-2); border-radius: var(--r-round); padding: 1px 7px;}
.provisional-banner {display: flex; align-items: center; gap: var(--s-2); font-family: var(--font-sans); font-size: var(--t-sm); color: #6f5410; background: var(--gold-tint); border: 1px solid #ddca97; border-left: 3px solid var(--gold); border-radius: var(--r-sm); padding: 8px 14px; margin-bottom: var(--s-4);}
.provisional-banner strong {font-weight: var(--w-semi); text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--t-xs);}
.prov-dot {width: 8px; height: 8px; border-radius: 50%; background: var(--gold); flex: 0 0 auto;}
.help {position: relative; display: inline-flex; vertical-align: middle; margin-left: 5px;}
.help:hover,
.help:focus-within {z-index: 80;}
.help-btn {width: 16px; height: 16px; padding: 0; border-radius: 50%; border: 1px solid var(--rule-strong); background: var(--surface); color: var(--ink-3); font-family: var(--font-sans); font-size: 11px; font-weight: 700; line-height: 1; cursor: help; display: grid; place-items: center; transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);}
.help-btn:hover,
.help:focus-within .help-btn {background: var(--gold-tint); color: #6f5410; border-color: #ddca97;}
.help-pop {position: absolute; top: 100%; left: 50%; z-index: 60; width: max-content; max-width: min(300px, 78vw); background: var(--surface); color: var(--ink); border: 1px solid var(--rule-strong); border-left: 3px solid var(--gold); border-radius: var(--r-sm); box-shadow: var(--shadow-2); padding: 10px 13px; font-family: var(--font-body); font-size: var(--t-sm); line-height: 1.5; text-transform: none; letter-spacing: normal; font-weight: var(--w-reg); white-space: normal; opacity: 0; visibility: hidden; transform: translate(-50%, 2px); transition: opacity var(--dur), transform var(--dur), visibility var(--dur);}
.help:hover .help-pop,
.help:focus-within .help-pop {opacity: 1; visibility: visible; transform: translate(-50%, 7px);}
.help.help-right .help-pop {left: auto; right: 0; transform: translate(0, 2px);}
.help.help-right:hover .help-pop,
.help.help-right:focus-within .help-pop {transform: translate(0, 7px);}
.field:user-invalid {border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-tint);}
.btn:active {transform: translateY(1px);}
.btn {transition: background var(--dur), border-color var(--dur), color var(--dur), box-shadow var(--dur), transform var(--dur-fast);}
.chip:active {transform: translateY(1px);}
.chip {transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);}
@media (pointer: coarse) {
  .btn {min-height: 44px;}
  .chip {min-height: 36px;}
}
@media (max-width: 380px) {
  .surface-title {font-size: var(--t-xl);}
}
.table-note {font-size: var(--t-sm); color: var(--ink-3); margin: var(--s-2) 0 0;}
.cfg-flash {background: var(--ok-tint); color: var(--ok); border-radius: var(--r-md); padding: var(--s-2) var(--s-4); margin-bottom: var(--s-4); font-size: var(--t-sm);}
.cfg-flash-error {background: var(--danger-tint, #fde8e8); color: var(--danger, #b42318);}
.btn-danger {background: var(--danger-tint); color: var(--danger); border-color: var(--danger);}
.btn-danger:hover {background: var(--danger); color: var(--ink-inverse);}
.btn-sm {padding: 3px 10px; font-size: var(--t-xs);}

/* ── Literature block (Neuroanalytica app.css lines 1908–2188, verbatim) ── */
/* ── LITERATURE (2026-10-05) ──────────────────────────────────────────────
   The lab's library, the reading room and the gist. A bibliography set in the
   house type: titles in the display face, bylines in sans, the gist in the
   body serif at reading size. The paper is the hero in the reading room; the
   panel beside it is a margin, not a dashboard. */
.lit-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-5); flex-wrap: wrap; }
.lit-head .eyebrow a { color: inherit; }
.lit-head-links { display: flex; gap: var(--s-2); margin: 0; }
.lit-layout { display: grid; grid-template-columns: 216px minmax(0, 1fr); gap: var(--s-6); align-items: start; }

.lit-rail { position: sticky; top: calc(var(--shell-h) + var(--s-4)); display: flex; flex-direction: column; gap: 2px; font-family: var(--font-sans); font-size: var(--t-sm); }
.lit-rail-label { margin: var(--s-4) 0 var(--s-1); }
.lit-rail-item { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-2); padding: 6px 10px; border-radius: var(--r-sm); color: var(--ink-2); text-decoration: none; border-left: 2px solid transparent; }
.lit-rail-item:hover { background: var(--sunken); color: var(--ink); }
.lit-rail-item[aria-current="page"] { background: var(--accent-tint); color: var(--accent-ink); font-weight: var(--w-semi); border-left-color: var(--accent); }
.lit-rail-item .ocount { font-size: var(--t-xs); color: var(--ink-3); }
.lit-new-cat { margin-top: var(--s-3); }
.lit-new-cat summary { cursor: pointer; color: var(--accent-ink); padding: 4px 10px; font-size: var(--t-xs); }
.lit-new-cat form { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-2) 10px; align-items: flex-start; }
.lit-new-cat .field { width: 100%; }
.lit-check { display: flex; gap: 6px; align-items: flex-start; font-size: var(--t-xs); color: var(--ink-2); line-height: var(--lh-snug); }

.lit-add { border: 1.5px dashed var(--rule-strong); border-radius: var(--r-lg); background: var(--surface-2); padding: var(--s-3) var(--s-4); margin-bottom: var(--s-4); transition: border-color var(--dur), background var(--dur), box-shadow var(--dur); }
.lit-add.lit-dropping { border-color: var(--accent); background: var(--accent-tint); box-shadow: 0 0 0 4px var(--accent-tint); }
.lit-add-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; font-family: var(--font-sans); font-size: var(--t-sm); color: var(--ink-2); }
.lit-add-drop strong { color: var(--ink); font-weight: var(--w-semi); }
.lit-file { cursor: pointer; }
.lit-add-doi { display: flex; gap: var(--s-2); align-items: center; }
.lit-add-doi .field { width: 17rem; }
.lit-session { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; padding-bottom: var(--s-3); margin-bottom: var(--s-3); border-bottom: 1px solid var(--rule-faint); font-family: var(--font-sans); font-size: var(--t-sm); }
.lit-session label, .lit-inline-form label { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); font-family: var(--font-sans); font-size: var(--t-sm); }
.lit-pick { margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--rule-faint); }
.lit-pick select { max-width: 100%; min-width: 0; flex: 1; }
.lit-uploads { list-style: none; margin: 0; padding: 0; font-family: var(--font-sans); font-size: var(--t-sm); }
.lit-uploads li { display: flex; gap: var(--s-3); padding: 5px 0; border-top: 1px solid var(--rule-faint); margin-top: var(--s-2); }
.lit-uploads li + li { margin-top: 0; }
.lit-up-name { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--ink-2); max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lit-up-state { color: var(--ink-3); flex: 1; }
.lit-up-busy .lit-up-state { color: var(--warn); }
.lit-up-ok .lit-up-state { color: var(--ok); }
.lit-up-note .lit-up-state { color: var(--ink-2); }
.lit-up-bad .lit-up-state { color: var(--danger); }
.lit-up-state em { color: var(--warn); font-style: normal; }

.lit-find { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-3); }
.lit-search { flex: 1; min-width: 16rem; }
.lit-sort { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-sans); font-size: var(--t-sm); color: var(--ink-2); }
.lit-bulk { position: sticky; top: calc(var(--shell-h) + 6px); z-index: 20; display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; padding: 8px 12px; margin-bottom: var(--s-3); background: var(--surface); border: 1px solid var(--selected-rule); border-radius: var(--r-md); box-shadow: var(--shadow-2); font-family: var(--font-sans); font-size: var(--t-sm); }
.lit-bulk[hidden] { display: none; }
.lit-bulk-n { font-weight: var(--w-semi); color: var(--accent-ink); margin-right: var(--s-2); }
.lit-bulk-sep { color: var(--ink-3); }
#lit-bulk-dated { display: inline-flex; gap: var(--s-2); }
#lit-bulk-dated[hidden] { display: none; }
#lit-rows.htmx-request { opacity: .5; transition: opacity var(--dur-fast); }

.lit-row, .jc-entry { display: grid; grid-template-columns: 22px 58px minmax(0, 1fr) auto; gap: var(--s-4); align-items: start; padding: var(--s-4) 0; border-top: 1px solid var(--rule-faint); }
.lit-rows > .lit-row:first-child { border-top: 1px solid var(--rule-strong); }
.lit-row:hover { background: linear-gradient(90deg, transparent, var(--surface) 12%, var(--surface) 88%, transparent); }
.lit-tick { padding-top: 6px; cursor: pointer; }
.lit-tick input { accent-color: var(--accent); width: 15px; height: 15px; }
.lit-cover { display: block; width: 58px; height: 76px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-xs); box-shadow: var(--shadow-1); overflow: hidden; transition: transform var(--dur) var(--ease-out), box-shadow var(--dur); }
.lit-cover img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.lit-row:hover .lit-cover, .jc-entry:hover .lit-cover { transform: translateY(-2px) rotate(-1deg); box-shadow: var(--shadow-2); }
.lit-cover-none { display: grid; place-items: center; background: repeating-linear-gradient(135deg, var(--surface-2), var(--surface-2) 6px, var(--sunken) 6px, var(--sunken) 7px); text-decoration: none; }
.lit-cover-none span { font-family: var(--font-sans); font-size: 9px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); text-align: center; line-height: 1.3; padding: 0 4px; }
.lit-title { font-family: var(--font-display); font-weight: var(--w-med); font-size: var(--t-md); line-height: var(--lh-snug); margin: 0; letter-spacing: -0.005em; }
.lit-title a { color: var(--ink); text-decoration: none; }
.lit-title a:hover { color: var(--accent-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.lit-byline { font-family: var(--font-sans); font-size: var(--t-sm); color: var(--ink-2); margin: 3px 0 0; }
.lit-hit { font-size: var(--t-sm); color: var(--ink-2); margin: 6px 0 0; padding-left: 10px; border-left: 2px solid var(--gold); max-width: var(--measure); }
.lit-hit mark, .room-abstract mark { background: var(--gold-tint); color: var(--ink); padding: 0 2px; border-radius: 2px; }
.lit-hit-where { font-family: var(--font-sans); font-size: var(--t-xs); font-weight: var(--w-semi); color: var(--gold); text-transform: uppercase; letter-spacing: .05em; margin-right: 4px; }
.lit-hit-more { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--ink-3); }
.lit-meta { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; margin: 8px 0 0; font-family: var(--font-sans); font-size: var(--t-xs); color: var(--ink-3); }
.lit-meta:empty { display: none; }
.lit-cat { color: var(--ink-2); background: var(--sunken); border-radius: var(--r-round); padding: 1px 9px; text-decoration: none; }
.lit-cat:hover { background: var(--accent-tint); color: var(--accent-ink); }
.lit-warn { color: var(--warn); }
.lit-warn::before { content: "▲ "; font-size: .8em; }
.lit-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--warn); vertical-align: middle; }
.lit-actions { display: flex; flex-direction: column; gap: var(--s-1); align-items: stretch; text-align: center; }
.lit-count { font-size: var(--t-xs); color: var(--ink-3); border-top: 1px solid var(--rule-strong); padding-top: var(--s-3); margin-top: 0; }
.lit-empty { text-align: center; padding: var(--s-8) var(--s-5); color: var(--ink-2); border-top: 1px solid var(--rule-strong); }
.lit-empty-title, .gist-empty-title { font-family: var(--font-display); font-size: var(--t-lg); color: var(--ink); margin: 0 0 var(--s-2); }
.lit-pulse { animation: lit-pulse 1.6s ease-in-out infinite; }
@keyframes lit-pulse { 50% { opacity: .55; } }
.lit-inline-form { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; margin: var(--s-2) 0; }
.lit-grow { flex: 1; min-width: 0; }
.lit-grow .field { flex: 1; min-width: 8rem; }
.lit-removed { margin-top: var(--s-6); font-family: var(--font-sans); font-size: var(--t-sm); color: var(--ink-2); }
.lit-removed summary { cursor: pointer; }

/* Journal Club — a running list: the date is the row's handle. */
.jc-entry { grid-template-columns: 58px 58px minmax(0, 1fr); }
.jc-group { margin-bottom: var(--s-5); }
.jc-year { display: flex; align-items: baseline; gap: var(--s-2); border-bottom: 1px solid var(--rule-strong); padding-bottom: var(--s-2); margin: var(--s-5) 0 0; font-size: var(--t-sm); }
.jc-group:first-child .jc-year { margin-top: 0; }
.jc-count { font-family: var(--font-mono); color: var(--ink-3); font-weight: var(--w-reg); }
.jc-group .jc-entry:first-of-type { border-top: 0; }
.jc-date { display: flex; flex-direction: column; align-items: center; padding-top: 2px; color: var(--accent-ink); }
.jc-day { font-family: var(--font-display); font-size: var(--t-xl); line-height: 1; font-weight: var(--w-med); }
.jc-mon { font-family: var(--font-sans); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); margin-top: 3px; }
.jc-presenter { color: var(--ink-2); font-weight: var(--w-med); }
.jc-note { font-size: var(--t-sm); color: var(--ink-2); margin: 6px 0 0; max-width: var(--measure); font-style: italic; }
.jc-edit { margin-top: 6px; font-family: var(--font-sans); font-size: var(--t-xs); }
.jc-edit summary { cursor: pointer; color: var(--ink-3); }
.jc-edit summary:hover { color: var(--accent-ink); }

/* ── the reading room ── */
main:has(.lit-room) { max-width: none; padding: 0; }
body:has(.lit-room) { overflow: hidden; }
body:has(.lit-room) .colophon { display: none; }
main:has(.lit-room) > * { animation: none; }
.lit-room { --room-side: 470px; height: calc(100vh - var(--shell-h)); display: flex; flex-direction: column; background: var(--paper); }
.room-bar { display: flex; align-items: center; gap: var(--s-4); padding: 8px var(--s-4); background: var(--surface); border-bottom: 1px solid var(--rule-strong); min-height: 52px; }
.room-back { font-family: var(--font-sans); font-size: var(--t-sm); color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.room-back:hover { color: var(--accent-ink); }
.room-title { flex: 1; min-width: 0; }
.room-title h1 { font-family: var(--font-display); font-size: var(--t-md); font-weight: var(--w-med); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: var(--lh-snug); }
.room-title p { font-family: var(--font-sans); font-size: var(--t-xs); color: var(--ink-3); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.room-tools { display: flex; align-items: center; gap: var(--s-3); font-family: var(--font-sans); font-size: var(--t-sm); flex-shrink: 0; }
.tool-group { display: inline-flex; align-items: center; gap: 2px; padding: 0 var(--s-2); border-left: 1px solid var(--rule); }
.tool { font: inherit; background: transparent; border: 1px solid transparent; border-radius: var(--r-sm); padding: 4px 9px; color: var(--ink-2); cursor: pointer; text-decoration: none; line-height: 1.2; min-width: 28px; }
.tool:hover { background: var(--sunken); color: var(--ink); }
.tool.tool-on { background: var(--accent-tint); color: var(--accent-ink); border-color: var(--selected-rule); }
.tool-zoom { min-width: 5.2em; font-variant-numeric: tabular-nums; }
.tool-page { width: 3.2em; text-align: right; font: inherit; font-family: var(--font-mono); font-size: var(--t-xs); padding: 4px 6px; border: 1px solid var(--rule); border-radius: var(--r-sm); background: var(--paper); color: var(--ink); }
.tool-of { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--ink-3); padding: 0 4px; white-space: nowrap; }
.tool-search { width: 12rem; font: inherit; font-size: var(--t-sm); padding: 4px 9px; border: 1px solid var(--rule); border-radius: var(--r-round); background: var(--paper); color: var(--ink); }
.tool-search:focus-visible, .tool-page:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.room-msg { margin: 0; border-radius: 0; border-left-width: 3px; }
.room-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 7px var(--room-side); }
.room-pdf { position: relative; min-width: 0; background: #dcd3c2; box-shadow: inset 0 2px 6px rgba(58,42,28,.12); }
.room-scroll { position: absolute; inset: 0; overflow: auto; }
.room-scroll:focus-visible { outline: none; }
.room-outline { position: absolute; left: 0; top: 0; bottom: 0; width: 250px; overflow: auto; background: var(--surface); border-right: 1px solid var(--rule-strong); z-index: 2; font-family: var(--font-sans); font-size: var(--t-sm); padding: var(--s-2) 0; }
.room-outline:not([hidden]) ~ .room-scroll { left: 250px; }
.room-outline ul { list-style: none; margin: 0; padding: 0; }
.room-outline a { display: block; padding: 5px 10px; color: var(--ink-2); text-decoration: none; line-height: var(--lh-snug); }
.room-outline a:hover { background: var(--accent-tint); color: var(--accent-ink); }
.room-loading { position: absolute; inset: 40% 0 auto; text-align: center; font-family: var(--font-sans); font-size: var(--t-sm); color: var(--ink-2); padding: 0 var(--s-5); }
.room-scroll .pdfViewer .page { margin: 14px auto; border: 0; box-shadow: 0 1px 3px rgba(58,42,28,.25), 0 6px 20px rgba(58,42,28,.14); background-color: #fff; }
.room-nopdf { max-width: 34rem; margin: 12vh auto 0; padding: var(--s-6); background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-lg); box-shadow: var(--shadow-2); }
.room-abstract { font-size: var(--t-sm); color: var(--ink-2); white-space: pre-line; }
.room-divider { cursor: col-resize; background: var(--rule); border-left: 1px solid var(--rule-strong); transition: background var(--dur-fast); touch-action: none; }
.room-divider:hover, .room-dragging .room-divider { background: var(--accent); }
.room-dragging { user-select: none; cursor: col-resize; }
.room-dragging .room-pdf { pointer-events: none; }
.room-side { min-width: 0; overflow: auto; background: var(--surface); padding: 0 var(--s-5) var(--s-7); }
.room-tabs { position: sticky; top: 0; z-index: 3; display: flex; gap: var(--s-1); background: var(--surface); border-bottom: 1px solid var(--rule); margin: 0 calc(-1 * var(--s-5)) var(--s-4); padding: 0 var(--s-5); }
.room-tabs [role=tab] { font-family: var(--font-sans); font-size: var(--t-sm); background: none; border: 0; padding: 12px 10px 10px; color: var(--ink-2); cursor: pointer; position: relative; }
.room-tabs [role=tab]:hover { color: var(--ink); }
.room-tabs [role=tab][aria-selected="true"] { color: var(--accent-ink); font-weight: var(--w-semi); }
.room-tabs [role=tab][aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent); }
.room-h { margin: var(--s-6) 0 var(--s-2); padding-top: var(--s-4); border-top: 1px solid var(--rule-faint); }
body.lit-focus .masthead, body.lit-focus .room-side, body.lit-focus .room-divider, body.lit-focus .room-back, body.lit-focus .room-msg { display: none; }
body.lit-focus .lit-room { height: 100vh; }
body.lit-focus .room-body { grid-template-columns: minmax(0, 1fr); }

/* ── the gist ── */
.gist-panel { font-family: var(--font-body); }
.gist-flash { font-family: var(--font-sans); font-size: var(--t-sm); color: #6f5410; background: var(--gold-tint); border-left: 3px solid var(--gold); border-radius: var(--r-sm); padding: 7px 12px; margin: 0 0 var(--s-3); }
.gist-byline { display: flex; align-items: baseline; gap: var(--s-2); font-family: var(--font-sans); font-size: var(--t-xs); color: var(--ink-3); margin-bottom: var(--s-3); line-height: var(--lh-snug); }
.gist-who { flex: 1; }
/* The Gistify layout: each part's heading bold and underlined. */
.gist-h { font-weight: var(--w-bold); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; margin: var(--s-4) 0 3px; font-size: var(--t-base); color: var(--ink); }
.gist > .gist-h:first-child, .gist-form > .gist-h:first-of-type { margin-top: 0; }
.gist-text, .gist-cite { font-size: var(--t-md); line-height: var(--lh-body); margin: 0; color: var(--ink); }
.gist-cite { font-size: var(--t-base); color: var(--ink-2); padding-left: 1.6em; text-indent: -1.6em; }
.gist-notes { font-size: var(--t-sm); color: var(--ink-2); line-height: var(--lh-body); margin: 0; padding-left: 1.4em; }
.gist-notes li + li { margin-top: 4px; }
.gist-ev { display: flex; flex-wrap: wrap; gap: 5px; margin: 7px 0 0; }
.ev { display: inline-flex; align-items: baseline; gap: 6px; max-width: 100%; font-family: var(--font-sans); font-size: var(--t-xs); line-height: 1.35; text-align: left; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--rule); border-radius: var(--r-sm); padding: 2px 8px 2px 6px; cursor: pointer; transition: border-color var(--dur-fast), background var(--dur-fast); }
.ev:hover { border-color: var(--accent); background: var(--accent-tint); color: var(--ink); }
.ev-p { font-family: var(--font-mono); font-size: 0.68rem; color: var(--accent-ink); white-space: nowrap; }
.ev-unchecked { border-style: dashed; }
.ev-missing { cursor: help; background: var(--warn-tint); border-color: #e2cf9f; color: #6f5410; }
.ev-missing:hover { background: var(--warn-tint); border-color: var(--warn); }
.ev-missing .ev-p { color: var(--warn); text-transform: uppercase; letter-spacing: .04em; }
.gist-checks { font-family: var(--font-sans); font-size: var(--t-xs); color: var(--ink-3); margin: var(--s-4) 0 0; padding-top: var(--s-3); border-top: 1px solid var(--rule-faint); display: flex; flex-direction: column; gap: 4px; }
.gist-checks:empty { display: none; }
.gist-actions { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; margin: var(--s-4) 0 0; font-family: var(--font-sans); }
.gist-actions .field { flex: 1; min-width: 10rem; font-size: var(--t-sm); }
.gist-empty { text-align: center; padding: var(--s-7) var(--s-3); color: var(--ink-2); }
.gist-empty p { font-size: var(--t-base); line-height: var(--lh-body); }
.gist-empty .gist-actions { justify-content: center; }
.gist-running, .gist-failed { display: flex; gap: var(--s-3); align-items: flex-start; font-family: var(--font-sans); font-size: var(--t-sm); border-radius: var(--r-md); padding: var(--s-3) var(--s-4); margin-bottom: var(--s-4); }
.gist-running { background: var(--gold-tint); border: 1px solid #ddca97; color: #6f5410; }
.gist-running p, .gist-failed p { margin: 2px 0 0; }
.gist-failed { flex-direction: column; gap: var(--s-2); background: var(--danger-tint); border: 1px solid #e3bdb9; color: var(--danger); }
.gist-spinner { flex: none; width: 16px; height: 16px; margin-top: 2px; border-radius: 50%; border: 2px solid #ddca97; border-top-color: var(--gold); animation: gist-spin .9s linear infinite; }
@keyframes gist-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .gist-spinner, .lit-pulse { animation: none; } }
.gist-editbar { position: sticky; top: 30px; z-index: 2; display: flex; align-items: center; gap: 4px; background: var(--surface); border-bottom: 1px solid var(--rule-faint); padding: 18px 0 6px; margin-bottom: var(--s-3); }
.gist-editbar button { font-family: var(--font-body); font-size: var(--t-sm); width: 30px; height: 26px; background: var(--surface-2); border: 1px solid var(--rule); border-radius: var(--r-xs); cursor: pointer; color: var(--ink); }
.gist-editbar button:hover { border-color: var(--accent); background: var(--accent-tint); }
.gist-editbar .table-note { margin-left: var(--s-2); }
.gist-edit { min-height: 2.4em; font-size: var(--t-md); line-height: var(--lh-body); background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-sm); padding: 8px 11px; outline: none; }
.gist-edit:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); background: #fff; }
.gist-rev { border-top: 1px solid var(--rule-faint); padding: var(--s-3) 0; }
.gist-rev summary { cursor: pointer; font-family: var(--font-sans); font-size: var(--t-sm); display: flex; gap: var(--s-2); align-items: baseline; flex-wrap: wrap; }
.gist-rev summary .mono { background: var(--sunken); border-radius: var(--r-round); padding: 0 8px; font-size: var(--t-xs); }
.gist-rev[open] summary { margin-bottom: var(--s-3); }
.gist-rev form { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-3); }

.lit-note { border-top: 1px solid var(--rule-faint); padding: var(--s-3) 0; }
.lit-note-by { font-family: var(--font-sans); font-size: var(--t-sm); margin: 0 0 4px; }
.lit-note-body { font-size: var(--t-base); line-height: var(--lh-body); }
.lit-note-body p { margin: 0 0 .5em; }
.lit-note-form { display: flex; flex-direction: column; gap: var(--s-2); align-items: flex-start; margin-top: var(--s-3); }
.lit-note-form textarea, .lit-details textarea { width: 100%; resize: vertical; font-family: var(--font-body); font-size: var(--t-base); line-height: var(--lh-snug); }
.lit-details { display: flex; flex-direction: column; gap: var(--s-3); }
.lit-details label { display: flex; flex-direction: column; gap: 3px; font-family: var(--font-sans); font-size: var(--t-xs); color: var(--ink-2); flex: 1; min-width: 0; }
.lit-details .field { width: 100%; font-size: var(--t-sm); }
.lit-details-row { display: flex; gap: var(--s-3); }
.lit-details .lit-narrow { flex: 0 0 6.5rem; }

/* ── the printable handout ── */
body.handout { background: #fff; padding: var(--s-5); }
.handout-bar { display: flex; align-items: center; gap: var(--s-3); max-width: 44rem; margin: 0 auto var(--s-5); }
.handout-page { max-width: 44rem; margin: 0 auto var(--s-8); padding-bottom: var(--s-6); border-bottom: 1px solid var(--rule); }
.handout-title { font-family: var(--font-display); font-size: var(--t-xl); line-height: var(--lh-tight); margin: var(--s-2) 0 var(--s-4); }
.handout-foot { font-family: var(--font-sans); font-size: var(--t-xs); color: var(--ink-3); margin-top: var(--s-5); }
@media print {
  body.handout { padding: 0; }
  .no-print { display: none !important; }
  .handout-page { border: 0; margin: 0 auto; padding: 0; break-after: page; }
  .handout-page:last-child { break-after: auto; }
  .handout .gist-text { font-size: 11.5pt; }
}

@media (max-width: 980px) {
  .lit-layout { grid-template-columns: 1fr; }
  .lit-rail { position: static; flex-direction: row; flex-wrap: wrap; }
  .lit-rail-label { display: none; }
  body:has(.lit-room) { overflow: auto; }
  .lit-room { height: auto; }
  .room-bar { flex-wrap: wrap; }
  .room-body { grid-template-columns: 1fr; }
  .room-pdf { height: 78vh; }
  .room-divider { display: none; }
  .tool-find { display: none; }
}
@media (max-width: 640px) {
  .lit-row { grid-template-columns: 22px minmax(0, 1fr); }
  .lit-row .lit-cover, .lit-row .lit-actions { display: none; }
  .jc-entry { grid-template-columns: 48px minmax(0, 1fr); }
  .jc-entry .lit-cover { display: none; }
}
.lit-actions .btn { text-decoration: none; justify-content: center; }

/* the double-check (2026-10-05) */
.gist-credit { display: block; margin-top: 2px; color: var(--ink-3); font-style: italic; }
.ev-ok .ev-p::before { content: "\2713\00a0"; color: var(--ok); }
.gist-checks p { margin: 0; }
.gist-checks strong { color: var(--ok); font-weight: var(--w-semi); }
.gist-fixes { margin-top: 6px; }
.gist-fixes summary { cursor: pointer; color: var(--accent-ink); }
.gist-fix { border-left: 2px solid var(--rule-strong); padding: 2px 0 2px 10px; margin: 8px 0; }
.gist-fix-where { text-transform: uppercase; letter-spacing: .05em; font-size: 0.68rem; color: var(--ink-3); }
.gist-fix del { color: var(--danger); text-decoration-thickness: 1px; }
.gist-fix ins { color: var(--ok); text-decoration: none; background: var(--ok-tint); padding: 0 2px; border-radius: 2px; }
.gist-fix del, .gist-fix ins { font-family: var(--font-body); font-size: var(--t-sm); }
.gist-fix-why { color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }

/* Literature, 2026-11-07 (Mike: "make the highlighting lighter/brighter").
   PDF.js marks a found passage in 25% purple and the current match in 25% dark
   green; on a white page both read as a muddy smudge. A highlighter instead:
   pale yellow on every match, a stronger warm yellow on the one the gist's
   evidence chip jumped to. Forced-colors (high-contrast) mode keeps PDF.js's own. */
@media screen and (forced-colors: none) {
  .lit-room .textLayer .highlight {
    --highlight-bg-color: rgb(255 236 61 / 0.45);
    --highlight-selected-bg-color: rgb(255 196 0 / 0.6);
  }
}
.room-remove { margin: 0; flex-shrink: 0; }
.tool-danger:hover { background: var(--danger-tint); color: var(--danger); }
.lit-erase { display: flex; flex-direction: column; gap: var(--s-2); font-family: var(--font-sans); font-size: var(--t-sm); color: var(--danger); background: var(--danger-tint); border-bottom: 1px solid #e3bdb9; padding: var(--s-2) var(--s-4); }
.lit-erase p { margin: 0; }
.room-side .lit-erase { border: 1px solid #e3bdb9; border-radius: var(--r-md); padding: var(--s-3); }

/* ── Gistify overrides ── */
/* Labels in sentence case: the hierarchy is carried by weight and size. */
.eyebrow, .btn, .provisional-banner strong, .lit-cover-none span, .lit-hit-where, .jc-mon,
.gist-fix-where, .ev-missing .ev-p { text-transform: none; letter-spacing: 0; }
.eyebrow { font-weight: 600; color: var(--graphite); }
.btn { font-weight: 600; }
/* The PDF highlight on an evidence jump is the highlighter: found in the paper. */
@media screen and (forced-colors: none) {
  .lit-room .textLayer .highlight {
    --highlight-bg-color: rgb(243 227 90 / 0.45);
    --highlight-selected-bg-color: rgb(243 227 90 / 0.85);
  }
}

/* ── The three panes (body.lib3): collections | papers | the selected paper ──
   Laid out like Zotero's main window. Each pane scrolls on its own; colour is
   still kept for meaning, so the selected row is marked in ink, not a hue. */
body.lib3 main { max-width: none; padding: 0 var(--s-4); }
body.lib3 .surface-head { padding: var(--s-4) 0 var(--s-3); margin-bottom: 0; }
body.lib3 .lit-layout {
  grid-template-columns: 15rem minmax(0, 1fr) minmax(23rem, 32rem);
  gap: 0; align-items: stretch;
  height: calc(100vh - var(--shell-h) - 7.5rem); min-height: 32rem;
  border-top: 1px solid var(--rule-strong);
}
body.lib3 .lit-rail { position: static; overflow-y: auto; padding: var(--s-3) var(--s-3) var(--s-6) 0; border-right: 1px solid var(--rule); }
body.lib3 .lit-main { overflow-y: auto; padding: var(--s-3) var(--s-4) var(--s-6); min-width: 0; }
body.lib3 .item-pane { overflow-y: auto; padding: var(--s-4) var(--s-4) var(--s-7); border-left: 1px solid var(--rule); background: var(--sheet); }
.lit-rail-lib { color: var(--ink); text-decoration: none; }
.lit-rail-lib[aria-current="page"] { text-decoration: underline; text-underline-offset: 3px; }
body.lib3 .lit-rail-label { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-2); }
.lit-rail-connect span { color: var(--ink-3); font-style: italic; }

/* papers: one dense line-pair each, no cover thumbnails */
body.lib3 .lit-row, body.lib3 .jc-entry { grid-template-columns: 22px minmax(0, 1fr) auto; gap: var(--s-3); padding: var(--s-2) var(--s-2); cursor: default; }
body.lib3 .jc-entry { grid-template-columns: 3rem minmax(0, 1fr); }
body.lib3 .lit-cover { display: none; }
body.lib3 .lit-title { font-size: var(--t-base); }
body.lib3 .lit-meta { margin-top: 4px; }
body.lib3 .lit-actions { flex-direction: row; align-items: center; }
body.lib3 .lit-row:hover { background: var(--surface-2); }
.lit-row.is-selected, .jc-entry.is-selected { background: var(--accent-tint) !important; box-shadow: inset 3px 0 0 var(--ink); }
.lit-row.is-selected .lit-title a { color: var(--ink); }
body.lib3 .lit-add { padding: var(--s-3); }

/* the item pane */
.ip-empty { color: var(--ink-3); text-align: center; padding: var(--s-8) var(--s-4); font-family: var(--font-sans); font-size: var(--t-sm); }
.ip-empty-title { font-family: var(--font-display); font-size: var(--t-lg); color: var(--ink-2); margin-bottom: var(--s-2); }
.ip-head { padding-bottom: var(--s-3); }
.ip-title { font-family: var(--font-display); font-size: var(--t-lg); line-height: var(--lh-snug); margin: 0 0 var(--s-2); }
.ip-by { margin: 0; font-family: var(--font-sans); font-size: var(--t-sm); color: var(--ink-2); }
.ip-where { margin: 2px 0 0; font-family: var(--font-sans); font-size: var(--t-sm); color: var(--ink-3); }
.ip-actions { display: flex; gap: var(--s-2); margin-top: var(--s-3); }
.ip-actions .btn { text-decoration: none; }
.ip-removed { margin-top: var(--s-2); font-size: var(--t-sm); color: var(--danger); }
.ip-sec { border-top: 1px solid var(--rule); }
.ip-sec > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-sans); font-weight: var(--w-semi); font-size: var(--t-sm); padding: var(--s-3) 0; }
.ip-sec > summary::-webkit-details-marker { display: none; }
.ip-sec > summary::before { content: "▸"; color: var(--ink-3); font-size: 0.75em; transition: transform var(--dur-fast); }
.ip-sec[open] > summary::before { transform: rotate(90deg); }
.ip-sec > :not(summary) { margin-bottom: var(--s-4); }
.ip-gist > summary { font-size: var(--t-md); }
.ip-info { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 4px var(--s-3); margin: 0; font-size: var(--t-sm); }
.ip-info dt { color: var(--ink-3); font-family: var(--font-sans); text-align: right; }
.ip-info dd { margin: 0; overflow-wrap: anywhere; }
.ip-note { font-size: var(--t-sm); color: var(--warn); background: var(--warn-tint); padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); }
.ip-more { font-family: var(--font-sans); font-size: var(--t-sm); }
.ip-abstract { font-size: var(--t-sm); line-height: var(--lh-body); }
.ip-noteitem { border-left: 2px solid var(--rule-strong); padding-left: var(--s-3); font-size: var(--t-sm); }
.ip-zot { font-size: var(--t-sm); }

@media (max-width: 75rem) {
  body.lib3 .lit-layout { grid-template-columns: 13rem minmax(0, 1fr); height: auto; }
  body.lib3 .item-pane { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--rule-strong); }
  body.lib3 .lit-rail, body.lib3 .lit-main, body.lib3 .item-pane { overflow: visible; }
}
@media (max-width: 48rem) {
  body.lib3 .lit-layout { grid-template-columns: 1fr; }
  body.lib3 .lit-rail { border-right: 0; }
}

/* one press for the shown papers without a gist (the bulk form's confirm asks first) */
.lit-allgist { margin: .25rem 0 .5rem; }