:root { --bg:#FAF8F1; --fg:#1A1A17; --muted:#6B6A63; --line:rgba(26,26,23,.15); --accent:#007A59;
        --chip:rgba(0,158,115,.12); --card:#F5F3EC; --source:#8A5F25; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#121210; --fg:#F0EFE8; --muted:#A8A79F; --line:rgba(240,239,232,.15); --accent:#009E73;
          --chip:rgba(0,158,115,.16); --card:#1A1A17; --source:#DDCC77; } }
/* Explicit theme override (the sidebar theme toggle sets data-theme on <html>); with no attribute
   the viewer follows prefers-color-scheme above. Placed after the @media block so a forced choice
   wins by both order and specificity. */
:root[data-theme="light"] { --bg:#FAF8F1; --fg:#1A1A17; --muted:#6B6A63; --line:rgba(26,26,23,.15); --accent:#007A59;
        --chip:rgba(0,158,115,.12); --card:#F5F3EC; --source:#8A5F25; }
:root[data-theme="dark"] { --bg:#121210; --fg:#F0EFE8; --muted:#A8A79F; --line:rgba(240,239,232,.15); --accent:#009E73;
          --chip:rgba(0,158,115,.16); --card:#1A1A17; --source:#DDCC77; }
* { box-sizing:border-box; }
body { margin:0; font:15px/1.55 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
       color:var(--fg); background:var(--bg); }
#app { display:flex; height:100vh; }
#sidebar { width:300px; min-width:300px; border-right:1px solid var(--line); overflow:auto;
           padding:12px; }
#side-head { display:flex; align-items:center; gap:6px; margin-bottom:10px; }
#wiki-name { flex:1; font-weight:700; font-size:14px; white-space:nowrap; overflow:hidden;
             text-overflow:ellipsis; font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
             letter-spacing:-0.02em; }
/* Subtle green brand marker before the wordmark (a non-text accent, so contrast rules don't apply;
   green in both themes). Drawn as an empty inline block, not a glyph, so screen readers never
   announce it. */
#wiki-name::before { content:""; display:inline-block; width:4px; height:0.85em; background:#009E73;
                     border-radius:1px; margin-right:5px; vertical-align:-0.08em; }
.iconbtn { border:1px solid var(--line); background:var(--bg); color:var(--muted); border-radius:6px;
           height:24px; min-width:26px; cursor:pointer; font-size:13px; line-height:1; padding:0 6px; }
.iconbtn:hover { border-color:var(--accent); color:var(--accent); }
.iconbtn.active { background:var(--accent); border-color:var(--accent); color:#fff; }
#search { width:100%; padding:7px 9px; border:1px solid var(--line); border-radius:7px;
          background:var(--bg); color:var(--fg); margin-bottom:10px; }
#tag-filter { margin-bottom:12px; }
#tag-filter select { width:100%; padding:6px 8px; border:1px solid var(--line); border-radius:7px;
                     background:var(--bg); color:var(--fg); font:inherit; }
.tag { background:var(--chip); color:var(--accent); border-radius:999px; padding:1px 9px;
       font-size:12px; cursor:pointer; user-select:none; }
.tag.active { background:var(--accent); color:#fff; }
#facets { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:10px; }
.facet { display:inline-flex; align-items:center; gap:4px; border:1px solid var(--line);
         background:var(--bg); color:var(--muted); border-radius:999px; padding:1px 9px;
         font-size:12px; cursor:pointer; user-select:none; }
.facet:hover { border-color:var(--accent); color:var(--accent); }
.facet.active { background:var(--accent); border-color:var(--accent); color:#fff; }
.facet.contra.active { background:#dc2626; border-color:#dc2626; color:#fff; }
.facet.llm.active { background:#9333ea; border-color:#9333ea; color:#fff; }
/* Per-page provenance badges shown next to a page in the sidebar / results. */
.badges { display:inline-flex; gap:4px; margin-left:5px; vertical-align:baseline; }
.badge { font-size:10px; line-height:1.5; border-radius:999px; padding:0 5px; font-weight:600;
         white-space:nowrap; }
.badge-cite { background:var(--chip); color:var(--source); }
.badge-llm { background:rgba(147,51,234,.16); color:#9333ea; }
.badge-contra { background:rgba(220,38,38,.16); color:#dc2626; }
/* Full-text search results. */
.result-head { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.04em;
               margin:2px 0 6px; }
.result { display:block; padding:6px; border-radius:7px; text-decoration:none; color:var(--fg);
          border:1px solid transparent; margin-bottom:2px; }
.result:hover { background:var(--card); border-color:var(--line); }
.result .result-title { font-weight:600; }
.result.src .result-title::before { content:"\201C"; color:var(--source); margin-right:3px;
          font-weight:700; }
.result .result-snip { display:block; color:var(--muted); font-size:12px; margin-top:2px; }
mark { background:#fde68a; color:#111; border-radius:2px; padding:0 1px; }
@media (prefers-color-scheme: dark) { mark { background:#7c5e10; color:#fdecc8; } }
/* Keep search highlights in step with the explicit theme toggle (not just the OS scheme). */
:root[data-theme="light"] mark { background:#fde68a; color:#111; }
:root[data-theme="dark"] mark { background:#7c5e10; color:#fdecc8; }
/* The current n/N reader hit gets an accent ring so you can see which of many marks you're on. */
mark.cur { outline:2px solid var(--accent); outline-offset:1px; }
#page-list details, #source-list details { margin-bottom:8px; }
#page-list summary, #source-list summary { cursor:pointer; color:var(--muted); font-size:12px;
                     text-transform:uppercase; letter-spacing:.04em; }
#source-list { border-top:1px solid var(--line); margin-top:6px; padding-top:8px; }
.navitem { display:block; padding:3px 6px; border-radius:6px; color:var(--fg);
           text-decoration:none; }
.navitem:hover { background:var(--card); }
.navitem.active { background:var(--chip); color:var(--accent); font-weight:600; }
/* j/k keyboard selection highlight (search results or the page/source nav). */
.navitem.kbd-sel, .result.kbd-sel { background:var(--chip); outline:2px solid var(--accent);
                                    outline-offset:-2px; }
.navitem .cite-count { color:var(--muted); font-size:11px; }
.navitem.src::before { content:"\201C"; color:var(--source); margin-right:3px; font-weight:700; }
/* Sources folder tree: each nested <details> indents one step; folder summaries stay compact. */
.src-dir { margin-left:10px; }
.src-dir > summary { padding:3px 6px; border-radius:6px; cursor:pointer; color:var(--muted);
                     overflow-wrap:anywhere; }
.src-dir > summary:hover { background:var(--card); }
.src-dir .navitem { margin-left:10px; overflow-wrap:anywhere; }
.navitem.src-overview { color:var(--accent); font-size:12px; }
/* The #sources overview table: scroll wide content inside its own wrapper, never the page. */
.tbl-wrap { overflow-x:auto; }
.src-table td, .src-table th { white-space:nowrap; }
.src-table td:first-child, .src-table td.src-folder { white-space:normal;
                                                      overflow-wrap:anywhere; }
.src-table td.src-folder { color:var(--muted); font-size:12px; }
.src-table td.fail-reason { color:var(--warn, #c0392b); font-weight:600; }
.src-table td.fail-detail { white-space:normal; overflow-wrap:anywhere; color:var(--muted);
                            font-size:12px; max-width:32em; }
.fail-count { color:var(--warn, #c0392b); font-size:11px; font-weight:600; }
#content { flex:1; display:flex; flex-direction:column; overflow:hidden; }
#graph-pane { height:44vh; min-height:120px; border-bottom:1px solid var(--line);
              background:var(--card); display:flex; flex-direction:column; }
#graph-bar { display:flex; align-items:center; gap:6px; padding:4px 8px; flex:0 0 auto;
             flex-wrap:wrap; border-bottom:1px solid var(--line); user-select:none; }
#graph-title { font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
               color:var(--muted); }
#graph-bar .spacer { flex:1; }
.gbtn { border:1px solid var(--line); background:var(--bg); color:var(--fg); border-radius:6px;
        min-width:24px; height:22px; line-height:20px; text-align:center; cursor:pointer;
        font-size:13px; padding:0 6px; }
.gbtn:hover { background:var(--card); border-color:var(--accent); color:var(--accent); }
.gbtn.active { background:var(--accent); border-color:var(--accent); color:#fff; }
#graph { flex:1; width:100%; min-height:0; cursor:grab; touch-action:none; user-select:none; }
#graph.grabbing { cursor:grabbing; }
#graph .node { cursor:pointer; }
#graph .node circle { stroke:var(--bg); stroke-width:1.5; }
#graph .node:hover circle { stroke:var(--accent); stroke-width:2.5; }
#graph .node.active circle { stroke:var(--accent); stroke-width:3.5; }
#graph .node.src rect { stroke:var(--bg); stroke-width:1.5; }
#graph .node.src:hover rect { stroke:var(--accent); stroke-width:2.5; }
#graph .node.active rect { stroke:var(--accent); stroke-width:3.5; }
#graph .node text { font-size:9px; fill:var(--fg); pointer-events:none; }
#graph line { stroke:var(--line); stroke-width:1; }
#graph line.src { stroke-dasharray:3 3; }
/* Tag-similarity springs: barely-visible dashed layout aids (not semantic link edges). */
#graph line.sim { stroke:var(--muted); stroke-dasharray:2 4; opacity:.15; }
/* Hover-highlight: dim everything not adjacent to the hovered node (draw-only, no re-layout). */
#graph .node.dim { opacity:.22; }
#graph .node.dim text { opacity:0; }
#graph line.dim { opacity:.12; }
#graph-legend { display:flex; flex-wrap:wrap; gap:6px 12px; align-items:center; padding:4px 8px;
                flex:0 0 auto; border-top:1px solid var(--line); font-size:11px; color:var(--muted); }
#graph-legend .lg { display:inline-flex; align-items:center; gap:4px; cursor:pointer;
                    user-select:none; border-radius:999px; padding:1px 6px; }
#graph-legend .lg:hover { background:var(--bg); }
#graph-legend .lg[data-off] { opacity:.4; text-decoration:line-through; }
#graph-legend .lg .cnt { color:var(--muted); font-size:10px; }
#graph-legend .sw { width:9px; height:9px; border-radius:50%; display:inline-block; }
#graph-legend .sw.src { border-radius:2px; }
/* height:auto !important beats the inline height the resizer leaves on #graph-pane. */
#content.map-collapsed #graph-pane { height:auto !important; min-height:0; }
#content.map-collapsed #graph, #content.map-collapsed #graph-legend { display:none; }
/* Expand map to full height: the map fills the pane and the reader is hidden. */
#content.map-expanded #graph-pane { flex:1; height:auto !important; }
#content.map-expanded #reader { display:none; }
/* Draggable splitter between the map and the reader (hidden when the map is collapsed/expanded). */
#graph-resizer { height:6px; flex:0 0 auto; cursor:row-resize; background:var(--line);
                 touch-action:none; }
#graph-resizer:hover, #graph-resizer.drag { background:var(--accent); }
#content.map-collapsed #graph-resizer, #content.map-expanded #graph-resizer { display:none; }
/* Focus/reading mode: hide the sidebar (toggle lives in the map bar so it stays reachable). */
#app.sb-collapsed #sidebar { display:none; }
/* The reader adapts to the pane: a centered column whose width follows the reading-width toggle.
   Centering via symmetric padding (not margin:auto on children) keeps tables/code left-aligned
   with the prose instead of floating to the middle. */
/* font-size comes from the reader font-size toggle (default 15px); headings/lists stay em-relative
   so they scale with it. */
#reader { flex:1; overflow:auto; padding:20px 28px; font-size:var(--reader-font, 15px); }
#content.rw-comfortable #reader { padding-left:max(28px, calc((100% - 900px) / 2));
                                  padding-right:max(28px, calc((100% - 900px) / 2)); }
#content.rw-wide #reader { padding-left:max(28px, calc((100% - 1320px) / 2));
                           padding-right:max(28px, calc((100% - 1320px) / 2)); }
#content.rw-full #reader { padding-left:28px; padding-right:28px; }
#reader h1 { margin:.2em 0 .1em; }
#reader .meta { color:var(--muted); font-size:13px; margin-bottom:6px; }
#reader .ptype { font-weight:600; color:var(--accent); }
#reader .ptype.src { color:var(--source); }
#reader .src-id { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; }
#reader .src-model, #reader .src-usage, #reader .src-checked { color:var(--muted); }
#reader .desc { color:var(--muted); font-style:italic; }
#reader .backlinks { font-size:13px; color:var(--muted); margin:6px 0; }
#reader .toc { border:1px solid var(--line); background:var(--card); border-radius:8px;
               padding:6px 12px 8px; margin:10px 0; }
#reader .toc summary { cursor:pointer; color:var(--muted); font-size:11px; font-weight:600;
                       text-transform:uppercase; letter-spacing:.04em; }
#reader .toc a { display:block; text-decoration:none; color:var(--fg); padding:2px 0;
                 font-size:13px; }
#reader .toc a.lvl3 { padding-left:14px; color:var(--muted); }
#reader .toc a:hover { color:var(--accent); }
#reader table { border-collapse:collapse; margin:10px 0; }
#reader th, #reader td { border:1px solid var(--line); padding:5px 9px; }
#reader pre { background:var(--card); padding:10px; border-radius:7px; overflow:auto; }
#reader code { background:var(--card); padding:1px 4px; border-radius:4px; }
#reader pre code { background:none; padding:0; }
#reader blockquote { border-left:3px solid var(--line); margin:8px 0; padding:2px 12px;
                     color:var(--muted); }
.callout { border:1px solid var(--line); border-left:4px solid var(--accent);
           background:var(--card); border-radius:7px; padding:8px 12px; margin:10px 0; }
.callout-title { font-weight:700; font-size:12px; letter-spacing:.04em; color:var(--accent); }
.callout-contradiction { border-left-color:#dc2626; }
.callout-contradiction .callout-title { color:#dc2626; }
#reader .stats { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0; }
#reader .stat { font-size:12px; border-radius:999px; padding:1px 9px; text-decoration:none;
                border:1px solid var(--line); color:var(--muted); }
#reader a.stat { cursor:pointer; }
#reader a.stat:hover { border-color:var(--accent); }
#reader .stat-cite { color:var(--source); }
#reader .stat-llm { color:#9333ea; }
#reader .stat-contra { color:#dc2626; }
.fnref a { text-decoration:none; color:var(--accent); }
.fnref.has-src a { border-bottom:1px dotted var(--source); }
.fndef { font-size:13px; color:var(--muted); margin:3px 0; }
.fndef .fnid { font-weight:600; color:var(--fg); }
.seg { border-left:2px solid var(--line); padding-left:12px; margin:10px 0; }
.seg-label { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em;
             font-family:ui-monospace,SFMono-Regular,Menlo,monospace; margin-bottom:2px; }
.seg-gap { font-size:12px; color:var(--muted); font-style:italic; margin:8px 0; }
.seg-gap .rawfile { font-style:normal; }
.fnback { text-decoration:none; }
/* Compact, grouped "## Sources" section: one collapsed <details> that lists each cited file once
   (link + date), then that file's citations as a tight run — replacing the tall footnote wall. */
#reader details.sources { margin:14px 0 4px; }
#reader details.sources > summary { cursor:pointer; color:var(--muted); font-size:11px; font-weight:600;
                                    text-transform:uppercase; letter-spacing:.04em; }
#reader .src-group { margin:6px 0; font-size:13px; line-height:1.45; }
#reader .src-group-head .src-label { font-weight:600; color:var(--fg); }
#reader .src-date { color:var(--muted); font-size:11px; }
#reader .src-cites, #reader .src-cite { color:var(--muted); margin:1px 0 0 14px; }
#reader .src-cite .fncid { color:var(--fg); }
#reader .fnloc { color:var(--muted); }
#reader .src-note { color:var(--muted); }
/* Transient highlight on the citation an inline [^sN] jumps to. */
#reader .fncite:target, #reader .src-cite:target { background:var(--chip); border-radius:4px;
                                                   box-shadow:0 0 0 3px var(--chip); }
.ext { color:var(--muted); border-bottom:1px dotted var(--muted); cursor:help; }
#reader a[data-page] { color:var(--accent); }
#reader a.srclink, a.srclink { color:var(--source); text-decoration:none;
           border-bottom:1px solid var(--line); cursor:pointer; }
#reader a.srclink:hover { border-bottom-color:var(--source); }
a.srclink::after { content:" \2197"; font-size:.8em; opacity:.7; }
#reader a.rawfile { color:var(--accent); text-decoration:none; border:1px solid var(--line);
                    border-radius:6px; padding:1px 8px; font-size:12px; white-space:nowrap; }
#reader a.rawfile:hover { border-color:var(--accent); background:var(--card); }
#srcpop { position:fixed; z-index:50; max-width:360px; background:var(--bg);
          border:1px solid var(--line); border-radius:8px; box-shadow:0 6px 24px rgba(0,0,0,.18);
          padding:10px 12px; font-size:13px; display:none; pointer-events:none; }
#srcpop.show { display:block; }
#srcpop .sp-title { font-weight:700; margin-bottom:2px; }
#srcpop .sp-meta { color:var(--muted); font-size:11px; margin-bottom:6px;
                   font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
#srcpop .sp-snip { color:var(--fg); }
/* Page-link hover preview: a small type chip + an italic description above the excerpt. */
#srcpop .sp-type { display:inline-block; font-weight:600; color:var(--accent); }
#srcpop .sp-desc { color:var(--muted); font-style:italic; margin-bottom:6px; }
#srcpop .sp-hint { color:var(--source); font-size:11px; margin-top:6px; }
/* The mobile drawer backdrop is inert on desktop (the small-screen media query turns it on). */
#sb-backdrop { display:none; }

/* ---- Small screens: the sidebar becomes an off-canvas drawer and the map is capped. Desktop
   (>720px) is untouched — every rule here lives inside the breakpoint. ---- */
@media (max-width: 720px) {
  body, #app { overflow-x:hidden; }
  #sidebar { position:fixed; top:0; left:0; z-index:41; height:100vh; width:min(300px, 85vw);
             min-width:0; transform:translateX(-100%); transition:transform .2s ease;
             box-shadow:0 0 24px rgba(0,0,0,.28); background:var(--bg); }
  #app.sb-open #sidebar { transform:none; }
  /* Keep the desktop "collapsed = display:none" rule from fighting the drawer's transform. */
  #app.sb-collapsed #sidebar { display:block; }
  #app.sb-open #sb-backdrop { display:block; position:fixed; inset:0; z-index:40;
                              background:rgba(0,0,0,.4); }
  /* Reader: full width with a small uniform gutter (override the centered rw-* padding formulas). */
  #reader { padding:16px; }
  #content.rw-comfortable #reader, #content.rw-wide #reader, #content.rw-full #reader {
    padding-left:16px; padding-right:16px; }
  /* Map: cap its height so it can't swallow the viewport (the expanded state still fills the pane). */
  #content:not(.map-expanded) #graph-pane { max-height:34vh; }
  /* Keep the map bar a single compact row where possible. */
  #graph-bar { gap:4px; padding:4px 6px; }
  #graph-title { display:none; }
  .gbtn { min-width:22px; height:22px; padding:0 4px; }
}

/* ---- Print: just the reader, black-on-white, with the Sources section forced open (JS hook). ---- */
@media print {
  #sidebar, #graph-pane, #graph-resizer, #srcpop, #sb-backdrop { display:none !important; }
  #app { display:block; height:auto; }
  #content { display:block; overflow:visible; }
  #reader { overflow:visible; padding:0; color:#000; background:#fff; }
  body { color:#000; background:#fff; }
  #reader .stats, #reader .toc, #reader .backlinks { display:none; }
  #reader a { color:#000; text-decoration:none; }
  #reader details.sources > summary { display:none; }
  #reader details.sources { margin-top:16px; border-top:1px solid #999; padding-top:8px; }
  .fnref a { color:#000; }
  @page { margin:1.6cm; }
}
