/* TextFold reader. Five levels, one document. Nothing here knows what a paper is. */

:root {
  --bg: #FAF9F7;
  --fg: #1B1915;
  --dim: #6E6A62;
  --line: #E2DED6;
  --accent: #6B5CE7;
  --hl-topic: #6B5CE7;
  --hl-takeaway: #2F7FD4;
  --hl-key: #9B5CD6;
  --hl-brief: #E0A020;
  --hl-full: #1B1915;
  --serif: "Iowan Old Style", "Source Serif 4", Georgia, "Songti SC", serif;
  --sans: -apple-system, "Inter", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --mono: "SF Mono", ui-monospace, Menlo, monospace;
}

[data-theme="dark"] {
  --bg: #1B1915;
  --fg: #EDEAE4;
  --dim: #938E84;
  --line: #33302A;
  --accent: #8B7CF0;
  --hl-topic: #8B7CF0;
  --hl-takeaway: #5BA3E8;
  --hl-key: #B98BE8;
  --hl-brief: #E8B84A;
  --hl-full: #EDEAE4;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg); color: var(--fg);
  font-family: var(--sans);
  transition: background .2s, color .2s;
}

/* ── bar ─────────────────────────────────────────────────────────────── */
.bar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 16px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(12px);
}
.bar-left, .bar-right { display: flex; align-items: center; gap: 10px; }
.bar-right { margin-left: auto; }
.brand { font-weight: 600; letter-spacing: .02em; font-size: 15px; }

.levels { display: flex; gap: 2px; }
.lv {
  font: inherit; font-size: 13px;
  padding: 6px 12px; border: 1px solid transparent; border-radius: 8px;
  background: transparent; color: var(--dim); cursor: pointer;
  transition: color .15s, background .15s;
}
.lv:hover { color: var(--fg); background: color-mix(in srgb, var(--fg) 5%, transparent); }
.lv[aria-selected="true"] {
  color: var(--fg); font-weight: 600;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}

.icon {
  font: inherit; font-size: 16px; line-height: 1;
  width: 30px; height: 30px; border-radius: 8px;
  border: 1px solid transparent; background: transparent;
  color: var(--dim); cursor: pointer;
}
.icon:hover { color: var(--fg); background: color-mix(in srgb, var(--fg) 6%, transparent); }

.status { font-size: 12px; color: var(--dim); font-variant-numeric: tabular-nums; }

/* ── library ─────────────────────────────────────────────────────────── */
.library {
  position: fixed; inset: 0 auto 0 0; z-index: 20;
  width: min(340px, 88vw);
  padding: 14px;
  border-right: 1px solid var(--line);
  background: var(--bg);
  overflow-y: auto;
  box-shadow: 8px 0 32px rgba(0,0,0,.08);
}
.lib-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }

.lib-empty { font-size: 12px; color: var(--dim); padding: 8px; }

.lib-list { display: flex; flex-direction: column; gap: 2px; }
.lib-row {
  display: flex; align-items: baseline; gap: 8px;
  padding: 8px 10px; border-radius: 8px;
  cursor: pointer; text-align: left;
  font: inherit; font-size: 13px; color: var(--fg);
  border: 1px solid transparent; background: transparent;
}
.lib-row:hover { background: color-mix(in srgb, var(--fg) 5%, transparent); }
.lib-row[aria-current="true"] {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}
.lib-row .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-row .n { font-size: 11px; color: var(--dim); font-variant-numeric: tabular-nums; }

/* ── the document ────────────────────────────────────────────────────── */
.doc { max-width: 46rem; margin: 0 auto; padding: 32px 24px 30vh; }

.empty { padding: 12vh 0; text-align: center; }
.empty h1 { font-family: var(--serif); font-size: 28px; font-weight: 500; margin: 0 0 16px; }
.empty p { color: var(--dim); font-size: 14px; line-height: 1.8; margin: 0 0 10px; }
.empty .hint { font-size: 13px; opacity: .8; }

.doc-title {
  font-family: var(--serif); font-size: 26px; line-height: 1.3; font-weight: 500;
  margin: 0 0 6px;
}
.doc-meta {
  font-size: 12px; color: var(--dim); margin-bottom: 28px;
  display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline;
}
.doc-meta a { color: var(--dim); text-decoration: none; border-bottom: 1px solid var(--line); }
.doc-meta .badge {
  padding: 1px 7px; border-radius: 999px;
  border: 1px solid var(--line); font-size: 11px;
}

section.chapter { margin-bottom: 34px; }
h2.sec {
  font-family: var(--serif); font-size: 17px; font-weight: 600;
  margin: 0 0 4px; line-height: 1.4;
  display: flex; align-items: baseline; gap: 8px;
}
h2.sec .num { font-family: var(--sans); font-size: 12px; color: var(--dim); font-weight: 400; }
h2.sec .sid { font-family: var(--mono); font-size: 10px; color: var(--dim); opacity: .6; }
.sec-take {
  font-size: 13px; color: var(--dim); line-height: 1.7;
  margin: 0 0 14px; padding-left: 10px;
  border-left: 2px solid color-mix(in srgb, var(--accent) 35%, transparent);
}

/* a unit: every level is rendered, the reader picks one */
.unit { position: relative; margin: 0 0 16px; }
.unit[data-role="caption"] { font-size: 13px; color: var(--dim); }
.unit[data-role="item"]::before {
  content: "·"; position: absolute; left: -14px; color: var(--dim);
}

/* the written chain: key ⊃ takeaway ⊃ topic */
.written {
  font-family: var(--serif); font-size: 15px; line-height: 1.75;
  transition: opacity .2s;
}
.written .reason { color: var(--dim); }
.written .atom { color: var(--accent); font-family: var(--mono); font-size: 13px; }

/* the author's chain: brief ⊃ full */
.verbatim {
  font-family: var(--serif); font-size: 15px; line-height: 1.75;
  color: var(--fg);
}
.verbatim .plain { color: var(--dim); opacity: .55; }   /* a sentence not in the evidence set */

.evidence-mark {
  display: block; margin-top: 4px;
  font-family: var(--sans); font-size: 10.5px; color: var(--dim); opacity: 0;
  transition: opacity .2s;
}
.unit:hover .evidence-mark { opacity: .7; }
.evidence-mark button {
  font: inherit; font-size: 10.5px; color: var(--accent);
  background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline;
}

/* ── level visibility ──────────────────────────────────────────────────
 * Each level shows exactly one representation of a unit, never two. The written chain is
 * key ⊃ takeaway ⊃ topic; the author's chain is brief ⊃ full. A level picks one block from
 * each chain — the coarser levels read the model's, the finer ones the author's.
 */
.unit-key, .unit-take, .unit-brief, .unit-full, .topic { display: none; }

/* 1 · topic    the document as a map: every section a card, its topic words inside.
   This is the level whose whole job is to fit on one screen, so it is a grid, not a list. */
.doc[data-level="1"] .unit { display: inline; margin: 0; padding: 0; }
.doc[data-level="1"] .unit .topic::after { content: " · "; color: var(--dim); opacity: .5; }
.doc[data-level="1"] .unit:last-child .topic::after { content: ""; }
.doc[data-level="1"] .sec-take { display: none; }
.doc[data-level="1"] .evidence-mark { display: none; }
.doc[data-level="1"] section.chapter {
  display: inline-block; vertical-align: top;
  width: calc(50% - 8px); margin: 0 8px 12px 0;
  padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 10px;
  background: color-mix(in srgb, var(--fg) 2%, transparent);
}
.doc[data-level="1"] section.chapter:last-child { margin-bottom: 0; }
.doc[data-level="1"] h2.sec { font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.doc[data-level="1"] h2.sec .sid { display: none; }
.doc[data-level="1"] .topic { display: inline; font-size: 12px; font-weight: 500; color: var(--accent); }
.doc[data-level="1"] .map { display: none; }   /* the cards are the map; a tag cloud beside them is noise */
.doc[data-level="1"] .doc-title { font-size: 20px; margin-bottom: 16px; }
.topic {
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  color: var(--accent); letter-spacing: .01em;
}

/* 2 · takeaway the model's headline sentence */
.doc[data-level="2"] .unit-take { display: block; }
.doc[data-level="2"] .unit { margin-bottom: 8px; }

/* 3 · key      the takeaway and its reason, one line */
.doc[data-level="3"] .unit-key { display: block; }
.doc[data-level="3"] .unit { margin-bottom: 14px; }

/* 4 · brief    the author's own sentences, the ones the line rests on */
.doc[data-level="4"] .unit-brief { display: block; }
.doc[data-level="4"] .unit { margin-bottom: 16px; }

/* 5 · full     the unit as written, the evidence sentences at full strength */
.doc[data-level="5"] .unit-full { display: block; }
.doc[data-level="5"] .unit { margin-bottom: 18px; }
.doc[data-level="5"] .verbatim .plain { opacity: 1; color: var(--fg); }

/* the map: a document's sections as a row of topics, a jump list, at the coarsest level only.
   It is navigation, not content — the section list below already carries every topic. */
.map {
  display: none;
  flex-wrap: wrap; gap: 6px; margin: 0 0 26px;
}
.doc[data-level="1"] .map { display: flex; }
.map a {
  font: inherit; font-size: 12px; text-decoration: none;
  padding: 5px 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); color: var(--dim); background: transparent;
}
.map a:hover { border-color: var(--accent); color: var(--accent); }

/* a line that stepped down (it repeated its section's summary) shows nothing at Takeaway:
   its words are still read at Brief and below */
.doc[data-level="2"] .unit.stepped { display: none; }

/* a unit with nothing written for it: the page's plumbing, shown only in the text it belongs to */
.unit.apparatus { opacity: .5; }
.doc[data-level="1"] .unit.apparatus,
.doc[data-level="2"] .unit.apparatus,
.doc[data-level="3"] .unit.apparatus,
.doc[data-level="4"] .unit.apparatus { display: none; }

@media (max-width: 640px) {
  .doc { padding: 20px 16px 30vh; }
  .levels .lv { padding: 6px 8px; font-size: 12px; }
  .brand { display: none; }
}