:root {
  --bg: #fbfaf7;
  --fg: #1d1d1b;
  --muted: #65635c;
  --line: #e2dfd6;
  --panel: #ffffff;
  --accent: #1f4e79;
  --corroborated: #1e6b3a;
  --observed: #2c5d8f;
  --inferred: #8a5a00;
  --absent: #6b4b8f;
  --unobservable: #8f2d2d;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #161614; --fg: #ecebe6; --muted: #a3a197; --line: #34332e; --panel: #1f1f1c;
    --accent: #8fb6dd; --corroborated: #6cc28a; --observed: #7fb0e0; --inferred: #e0b25c;
    --absent: #b89ee0; --unobservable: #e88a8a;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg);
       font: 15px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif; }
h1 { font-size: 1.3rem; margin: 0; letter-spacing: 0.02em; }
h2 { font-size: 1.05rem; margin: 1.2rem 0 0.4rem; }
h3 { font-size: 0.95rem; margin: 1rem 0 0.3rem; }
.sub, .meta, .why, .kind { color: var(--muted); }
.top { display: flex; justify-content: space-between; align-items: center;
       padding: 0.8rem 1.2rem; border-bottom: 1px solid var(--line); }
.who { display: flex; gap: 0.8rem; align-items: center; }
.legend { margin: 0.8rem 1.2rem; font-size: 0.85rem; color: var(--muted); }
.layout { display: flex; gap: 1rem; padding: 0 1.2rem 2rem; }
.content { flex: 1; min-width: 0; max-width: 64rem; }
.panel { width: 30rem; max-width: 45vw; position: sticky; top: 0.8rem; align-self: flex-start;
         max-height: 95vh; overflow: auto; background: var(--panel);
         border: 1px solid var(--line); border-radius: 6px; padding: 0.8rem 1rem; }
.ask label { font-weight: 600; display: block; margin: 0.8rem 0 0.3rem; }
.askrow { display: flex; gap: 0.5rem; }
.askrow input { flex: 1; }
input { font: inherit; padding: 0.45rem 0.6rem; border: 1px solid var(--line);
        border-radius: 4px; background: var(--panel); color: var(--fg); }
.btn { font: inherit; padding: 0.4rem 0.8rem; border: 1px solid var(--line); border-radius: 4px;
       background: var(--panel); color: var(--fg); cursor: pointer; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.close { float: right; }
.answer { border-left: 3px solid var(--accent); padding: 0.2rem 0 0.2rem 0.8rem; margin: 1rem 0; }
.toc { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; margin: 1rem 0; font-size: 0.9rem; }
.toc a { color: var(--accent); }
.section { border-top: 1px solid var(--line); }
ul.sentences, ul.recs, ul.citations { padding-left: 1.1rem; }
ul.sentences li, ul.recs li { margin: 0.4rem 0; }
.framing { font-style: italic; color: var(--muted); }
.recs .label { font-weight: 600; color: var(--inferred); }
.chips { margin-left: 0.3rem; }
.chip { font: 0.72rem/1.3 ui-monospace, Menlo, monospace; margin: 0 0.2rem 0.1rem 0;
        padding: 0.05rem 0.35rem; border-radius: 3px; border: 1px solid currentColor;
        background: transparent; cursor: pointer; color: var(--muted); }
.badge { font-size: 0.75rem; padding: 0.05rem 0.4rem; border-radius: 3px;
         border: 1px solid currentColor; }
[data-status="corroborated"] { color: var(--corroborated); }
[data-status="observed"] { color: var(--observed); }
[data-status="inferred"] { color: var(--inferred); }
[data-status="absent"] { color: var(--absent); }
[data-status="unobservable"] { color: var(--unobservable); }
.statement { font-size: 0.95rem; }
.link { font: inherit; background: none; border: none; color: var(--accent); cursor: pointer;
        padding: 0; text-decoration: underline; }
.warn { color: var(--unobservable); font-weight: 600; }
table.fields { border-collapse: collapse; width: 100%; font-size: 0.85rem; }
table.fields th, table.fields td { text-align: left; vertical-align: top; padding: 0.2rem 0.4rem;
                                   border-bottom: 1px solid var(--line); word-break: break-all; }
table.fields th { color: var(--muted); font-weight: 500; white-space: nowrap; }
.login { max-width: 22rem; margin: 12vh auto; padding: 1.5rem; background: var(--panel);
         border: 1px solid var(--line); border-radius: 6px; }
.login label { display: block; margin: 0.8rem 0 0.2rem; }
.login input { width: 100%; }
.login .btn { margin-top: 1rem; width: 100%; }
.err { color: var(--unobservable); }
@media (max-width: 900px) {
  .layout { flex-direction: column; }
  .panel { width: auto; max-width: none; position: static; }
}