/* Layout: a working index. Filter rail on the left, a dense numbered list of sources on the right,
   each row opening into its notes. The record feel comes from numbering, rules and tabular figures,
   not from costume. Franklin Gothic (the American newspaper headline face of the period) for the
   interface, a newspaper text face for the notes. */
:root {
  --bg: #f3f4f2;
  --surface: #ffffff;
  --ink: #16181b;
  --muted: #5c6168;
  --line: #d9dcd8;
  --line-strong: #b9bdb8;
  --accent: #a3342b;       /* margin-rule red: links, active state */
  --accent-bg: #f6e5e2;
  --warn: #8a5a0b;         /* verify, AI summaries */
  --warn-bg: #f5ead3;
  --ui: "Libre Franklin", "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
  --text: "Newsreader", Georgia, "Times New Roman", serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #111315; --surface: #191c1f; --ink: #e7e8e6; --muted: #9ba0a7;
    --line: #2b2f33; --line-strong: #41464c; --accent: #e57d70; --accent-bg: #3a201d;
    --warn: #e2b05a; --warn-bg: #352a15; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #111315; --surface: #191c1f; --ink: #e7e8e6; --muted: #9ba0a7;
  --line: #2b2f33; --line-strong: #41464c; --accent: #e57d70; --accent-bg: #3a201d;
  --warn: #e2b05a; --warn-bg: #352a15; color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--ui); font-size: 15px; line-height: 1.5; }
a { color: var(--accent); text-underline-offset: 2px; }
button, select, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.wrap {
  max-width: 1200px; margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

/* masthead */
.masthead { background: var(--surface); border-bottom: 1px solid var(--line); }
.masthead .wrap { padding-block: 28px 20px; }
.eyebrow { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
h1 { margin: 2px 0 8px; font-size: 32px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.1; }
.lede { margin: 0 0 20px; max-width: 62ch; color: var(--muted); }
.stats { display: flex; flex-wrap: wrap; gap: 8px; }
.stat {
  display: grid; gap: 0; text-align: left; cursor: pointer;
  background: var(--bg); border: 1px solid var(--line); border-radius: 4px; padding: 8px 14px; min-width: 128px;
}
.stat:hover { border-color: var(--line-strong); }
.stat b { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; }
.stat span { font-size: 12px; color: var(--muted); }
.stat.warn b { color: var(--warn); }

/* layout */
.layout { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 32px; padding-block: 24px 48px; align-items: start; }
@media (max-width: 860px) { .layout { grid-template-columns: minmax(0, 1fr); gap: 16px; } }

/* filter rail */
.rail { position: sticky; top: 16px; }
@media (max-width: 860px) { .rail { position: static; } }
.filters summary { font-weight: 600; cursor: pointer; padding: 6px 0; list-style: none; }
.filters summary::-webkit-details-marker { display: none; }
.filters summary::before { content: "+ "; color: var(--muted); }
.filters[open] summary::before { content: "− "; }
@media (min-width: 861px) { .filters summary { display: none; } }
@media (max-width: 860px) { .filters { background: var(--surface); border: 1px solid var(--line); border-radius: 4px; padding: 8px 14px; } }
#filter-count { color: var(--accent); font-weight: 600; }

#filters { display: grid; gap: 20px; padding-block: 4px 8px; }
.field-label { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
#q { width: 100%; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 4px; padding: 7px 10px; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.opt { display: flex; align-items: center; gap: 8px; padding: 3px 0; cursor: pointer; font-size: 14px; }
.opt input { accent-color: var(--accent); margin: 0; }
.opt .n { margin-left: auto; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.opt.zero { color: var(--muted); }
.text-btn { background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; font-size: 13px; }
#clear { justify-self: start; }

/* toolbar */
.toolbar { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 24px; border-bottom: 1px solid var(--line-strong); margin-bottom: 0; }
.tabs { display: flex; gap: 4px; }
.tabs button {
  background: none; border: 0; border-bottom: 3px solid transparent; padding: 8px 4px; margin-right: 16px;
  font-weight: 600; color: var(--muted); cursor: pointer; margin-bottom: -1px;
}
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding-bottom: 8px; font-size: 13px; color: var(--muted); }
.sort { display: flex; align-items: center; gap: 6px; }
.sort select { background: var(--surface); border: 1px solid var(--line-strong); border-radius: 4px; padding: 3px 6px; color: var(--ink); }

/* source rows */
.src { border-bottom: 1px solid var(--line); background: var(--surface); }
.src:first-child { border-top: 0; }
.row {
  width: 100%; display: grid; grid-template-columns: 3.2em minmax(0, 1fr) auto; gap: 4px 16px; align-items: start;
  text-align: left; background: none; border: 0; padding: 14px 16px; cursor: pointer;
}
.row:hover { background: var(--bg); }
.no { font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; padding-top: 1px; }
.headline { min-width: 0; }
.title { display: block; font-size: 16px; font-weight: 600; line-height: 1.35; text-wrap: pretty; }
.meta { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
.side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.marks { display: flex; gap: 10px; font-size: 12px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.marks .v { color: var(--warn); }
.marks .use-blank::before { content: ""; display: inline-block; width: 7px; height: 7px; border: 1.5px solid currentColor; border-radius: 50%; margin-right: 4px; vertical-align: 0; }
.marks .use-set { color: var(--ink); }
.marks .use-set::before { content: ""; display: inline-block; width: 8px; height: 8px; background: currentColor; border-radius: 50%; margin-right: 4px; vertical-align: 0; }
@media (max-width: 600px) {
  .row { grid-template-columns: 2.6em minmax(0, 1fr); }
  .side { grid-column: 2; flex-direction: row; flex-wrap: wrap; align-items: center; }
}

/* trust tags: ordinal, strongest is solid */
.trust {
  display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 3px; border: 1px solid var(--ink); white-space: nowrap;
}
.trust[data-trust="primary"] { background: var(--ink); color: var(--surface); }
.trust[data-trust="secondary"] { background: transparent; color: var(--ink); }
.trust[data-trust="family"] { background: transparent; color: var(--ink); border-style: dashed; }
.trust[data-trust="ai"] { background: var(--warn-bg); color: var(--warn); border-color: var(--warn); }
.trust[data-trust="unread"] { background: transparent; color: var(--muted); border-color: var(--line-strong); }

/* detail */
.detail { padding: 4px 16px 24px calc(16px + 3.2em + 16px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 24px 40px; }
@media (max-width: 960px) { .detail { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .detail { padding-left: 16px; } }
.notes { font-family: var(--text); font-size: 17px; line-height: 1.6; max-width: 66ch; }
.notes ul { margin: 0; padding-left: 1.1em; }
.notes li { margin-bottom: 8px; }
.notes li::marker { color: var(--line-strong); }
.open-src { display: inline-block; font-family: var(--ui); font-size: 13px; font-weight: 600; margin-bottom: 12px; }
.aside { display: grid; gap: 20px; align-content: start; font-size: 14px; }
.aside h4 { margin: 0 0 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.aside ul { margin: 0; padding-left: 1.1em; }
.aside li { margin-bottom: 6px; }
.aside .verify h4 { color: var(--warn); }
.figs { width: 100%; border-collapse: collapse; font-size: 13px; }
.figs td { padding: 5px 0; border-top: 1px solid var(--line); vertical-align: top; }
.figs td.val { text-align: right; padding-left: 12px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.who { font-size: 13px; color: var(--muted); }
.who b { color: var(--ink); font-weight: 500; }
.use { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 14px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: baseline; }
.use h4 { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.use p { margin: 0; font-family: var(--text); font-size: 17px; }
.use p.blank { color: var(--muted); font-style: italic; font-size: 15px; }

/* docket */
.dock { background: var(--surface); padding: 20px 16px 8px; border-bottom: 1px solid var(--line); }
.dock h2 { margin: 0 0 2px; font-size: 18px; font-weight: 700; }
.dock h2 .n { color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.dock.verify h2 { color: var(--warn); }
.dock .sub { margin: 0 0 12px; font-size: 13px; color: var(--muted); }
.dock-table { overflow-x: auto; }
.dock table { width: 100%; border-collapse: collapse; }
.dock th { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); padding: 6px 12px 6px 0; border-bottom: 1px solid var(--line-strong); }
.dock td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.dock td.item { font-family: var(--text); font-size: 16px; line-height: 1.5; }
.dock td.from { width: 34%; font-size: 13px; }
.dock td.from a { font-weight: 600; }
.dock td.from span { display: block; color: var(--muted); }
@media (max-width: 600px) {
  .dock thead { display: none; }
  .dock tr, .dock td { display: block; width: auto; }
  .dock td.item { padding-bottom: 2px; border-bottom: 0; }
  .dock td.from { width: auto; }
}

.empty { padding: 32px 16px; color: var(--muted); background: var(--surface); }
.foot { font-size: 12px; color: var(--muted); margin-top: 24px; }
@media (prefers-reduced-motion: no-preference) {
  .src.flash { animation: flash 1.2s ease-out; }
  @keyframes flash { from { box-shadow: inset 4px 0 0 var(--accent); } to { box-shadow: inset 4px 0 0 transparent; } }
}

/* tabs scroll sideways on narrow screens instead of wrapping into a mess */
.tabs { overflow-x: auto; scrollbar-width: none; }
.tabs button { white-space: nowrap; }
.rail.muted { opacity: 0.45; }

/* AI provenance and citation inside a source */
.prov { font-family: var(--ui); font-size: 13px; color: var(--muted); margin: 0 0 14px; }
.prov .no-check { color: var(--warn); }
.prov .ok { color: var(--ink); }
.marks .unchecked { color: var(--warn); }
.cite { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 14px; }
.cite h4, .use h4 { margin: 0 0 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.mla { font-family: var(--text); font-size: 16px; line-height: 1.55; margin: 0 0 6px; overflow-wrap: anywhere; }
.cite .arch { font-size: 12px; color: var(--muted); margin-left: 12px; }
.use ul { margin: 0; padding-left: 1.1em; font-size: 14px; }

/* plain sections: bibliography, questions, AI log */
.biblio, .plain { background: var(--surface); padding: 20px 16px 24px; }
.biblio h2, .plain h2 { margin: 0 0 2px; font-size: 18px; font-weight: 700; }
.plain h2 .n { color: var(--muted); font-weight: 500; }
.biblio .sub, .plain .sub { margin: 0 0 16px; font-size: 13px; color: var(--muted); max-width: 70ch; }
.biblio-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: start; gap: 12px 24px; }
.btn { background: var(--ink); color: var(--surface); border: 0; border-radius: 4px; padding: 7px 14px; font-weight: 600; cursor: pointer; }
.works { list-style: none; margin: 0; padding: 0; max-width: 80ch; }
.works li { padding: 10px 0 10px 2em; text-indent: -2em; border-top: 1px solid var(--line); }
.works .mla { font-size: 16px; }
.works .to { font-size: 12px; font-weight: 600; text-indent: 0; white-space: nowrap; }
.qs { margin: 0; padding-left: 1.6em; max-width: 72ch; }
.qs li { padding: 10px 0; border-top: 1px solid var(--line); }
.qs .q { margin: 0; font-family: var(--text); font-size: 17px; }
.qs .qmeta { margin: 4px 0 0; font-size: 12px; color: var(--muted); }
.empty-inline { color: var(--muted); font-style: italic; margin: 0; }
.logs { list-style: none; margin: 0; padding: 0; max-width: 80ch; }
.log { border-top: 1px solid var(--line); padding: 14px 0; }
.log-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 8px; }
.log .tag { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 2px 7px; border: 1px solid var(--ink); border-radius: 3px; }
.log.resistance .tag { background: var(--accent-bg); color: var(--accent); border-color: var(--accent); }
.log-id { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.log .outcome { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; margin-left: auto; color: var(--muted); }
.log dl { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 6px 16px; margin: 0; }
.log dt { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding-top: 3px; }
.log dd { margin: 0; font-size: 14px; }
.log .tim { font-family: var(--text); font-size: 16px; }
.log .blank { color: var(--muted); font-style: italic; }
@media (max-width: 600px) { .log dl { grid-template-columns: minmax(0, 1fr); gap: 2px; } .log dd { margin-bottom: 8px; } }

/* the two feelings: outlaw (margin red) and pride (still-copper green) */
:root { --pride: #2c6a4c; --pride-bg: #e1efe7; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --pride: #7cc7a2; --pride-bg: #183026; } }
:root[data-theme="dark"] { --pride: #7cc7a2; --pride-bg: #183026; }
.feel { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 1px 6px; border-radius: 3px; }
.feel[data-feel="outlaw"] { color: var(--accent); background: var(--accent-bg); }
.feel[data-feel="pride"] { color: var(--pride); background: var(--pride-bg); }
.feel-stat[data-feel="outlaw"] b { color: var(--accent); }
.feel-stat[data-feel="pride"] b { color: var(--pride); }
.bears ul { list-style: none; padding: 0; }
.bears li { margin-bottom: 8px; }
.bears .feel { margin-right: 4px; }
.tagnote { margin: 4px 0 0; font-size: 12px; color: var(--muted); }

/* the primary question, in Tim's words */
.primary { display: grid; gap: 4px; margin: 0 0 20px; padding: 12px 0 12px 16px; border-left: 3px solid var(--accent); max-width: 70ch; }
.pq-label { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.pq { font-family: var(--text); font-size: 20px; line-height: 1.4; quotes: "“" "”"; }
.pq-who { font-size: 12px; color: var(--muted); }
.marks { flex-wrap: wrap; justify-content: flex-end; white-space: normal; row-gap: 4px; }
.marks > span { white-space: nowrap; }
@media (max-width: 600px) { .marks { justify-content: flex-start; } }

/* third lens: trust (ledger blue-black) */
:root { --trust: #34497a; --trust-bg: #e3e8f3; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --trust: #a9bce6; --trust-bg: #1f2740; } }
:root[data-theme="dark"] { --trust: #a9bce6; --trust-bg: #1f2740; }
.feel[data-feel="trust"] { color: var(--trust); background: var(--trust-bg); }
.feel-stat[data-feel="trust"] b { color: var(--trust); }
.trust[data-trust="fiction"] { background: transparent; color: var(--muted); border-style: dotted; border-color: var(--ink); }

.reading { list-style: none; padding: 0; margin: 0; font-size: 14px; }
.reading li { padding: 4px 0; border-top: 1px dotted var(--line); }
.reading b { font-variant-numeric: tabular-nums; margin-right: 6px; }
.reading .qf { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }