/* theOS: light paper ground everywhere; the apps keep a dark nav beside it. One doc per page. Shared by the dashboard, Intents and Sources. */
:root {
  --stage: #13212c; --stage-ink: #dcd5c6; --stage-soft: #8394a0; --line-dark: #2c4252;
  --ground: #ece3d2; --paper: #f6eedf; --card: #fbf7ee; --ink: #15242f; --ink-soft: #4f5a5f;
  --clay: #c9876a; --ochre: #d6ae6a; --sage: #a9b79a; --chip: #e1d6c1; --line: #cbbda3; --rule: #e6dbc7;
  --display: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--ground); color: var(--ink); font: 16px/1.5 var(--display); }
a { color: inherit; }
.app { display: grid; grid-template-columns: 220px minmax(0, 1fr); height: 100%; }
.side { padding: 24px 16px; background: var(--stage); color: var(--stage-ink); overflow-y: auto; }
.side .home { display: block; font: 500 13px var(--mono); color: var(--stage-soft); text-decoration: none; margin-bottom: 18px; }
.side h1 { margin: 0 0 4px; font: 500 22px var(--display); color: var(--paper); }
.side p { margin: 0 0 16px; font-size: 13px; color: var(--stage-soft); line-height: 1.45; }
.side nav { display: grid; gap: 2px; }
.side nav a { display: flex; justify-content: space-between; padding: 7px 10px; border-radius: 6px; text-decoration: none; font-size: 14.5px; color: var(--stage-ink); }
.side nav a span { font: 500 12px var(--mono); color: var(--stage-soft); }
.side nav a.on { background: var(--paper); color: var(--ink); } .side nav a.on span { color: var(--ink-soft); }
.side nav .gap { height: 10px; } .side nav .navh { padding: 0 10px 2px; font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--stage-soft); }
.main { background: var(--ground); overflow-y: auto; padding: clamp(14px, 2.4vw, 28px); }
.doc { background: var(--card); border-radius: 8px; padding: clamp(18px, 3vw, 36px); display: grid; gap: 18px; min-width: 0; max-width: 1180px; }
.doc h1 { margin: 4px 0 6px; font: 500 clamp(24px, 3.4vw, 38px)/1.12 var(--display); }
.lead { margin: 0; font-size: 16.5px; line-height: 1.55; color: var(--ink-soft); max-width: 82ch; }
.by { margin: 0; font: 500 12px/1.5 var(--mono); color: var(--ink-soft); }
.top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font: 500 12px var(--mono); }
.top .when { margin-left: auto; color: var(--ink-soft); }
.chip { display: inline-block; font: 500 10.5px var(--mono); border-radius: 999px; padding: 1px 8px; background: var(--chip); color: var(--ink); }
.chip.dark { background: var(--ink); color: var(--paper); } .chip.clay { background: var(--clay); } .chip.ochre { background: var(--ochre); } .chip.sage { background: var(--sage); }
.chip.blocker { background: #9e3f2b; color: var(--paper); } .chip.major { background: var(--clay); } .chip.nit { background: #ddd2bf; }
.sec { min-width: 0; overflow-x: auto; }
.sec > h2 { margin: 0 0 10px; padding-top: 14px; border-top: 1px solid var(--rule); font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.sec p, .sec li { font-size: 14.5px; line-height: 1.55; } .sec ul, .sec ol { margin: 0; padding-left: 20px; } .sec li + li { margin-top: 4px; }
.note { margin: -4px 0 10px; color: var(--ink-soft); font-size: 13.5px; }
.label { display: block; margin: 0 0 4px; font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
table.t { width: 100%; border-collapse: collapse; font-size: 13.5px; line-height: 1.45; }
table.t th { padding: 6px 8px; border-bottom: 1px solid #d9ccb4; text-align: left; vertical-align: bottom; font: 500 11px var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); }
table.t td { padding: 8px; border-top: 1px solid #efe5d3; vertical-align: top; }
a.wl { color: var(--ink); text-decoration-color: var(--clay); text-underline-offset: 2px; }
.path { font: 500 11.5px var(--mono); color: var(--ink-soft); }
pre.code { margin: 0; padding: 12px 14px; border-radius: 6px; background: var(--ink); color: var(--paper); font: 12px/1.6 var(--mono); white-space: pre-wrap; }
details > summary { cursor: pointer; color: var(--ink-soft); font-size: 13px; } details[open] > summary { margin-bottom: 8px; }
.para { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 12px 14px; border-radius: 6px; background: #f3ead8; } .para p { margin: 0; font-size: 14px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.card { display: grid; gap: 6px; align-content: start; background: var(--card); border-radius: 8px; padding: 14px 16px; text-decoration: none; color: var(--ink); border: 1px solid transparent; }
.card:hover { border-color: var(--clay); } .card b { font: 500 15px var(--display); } .card small { font-size: 13px; color: var(--ink-soft); line-height: 1.45; }
.cols { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); gap: 12px; overflow-x: auto; align-items: start; }
.col { background: var(--chip); border-radius: 8px; padding: 10px; display: grid; gap: 8px; }
.col h2 { margin: 2px 4px; display: flex; justify-content: space-between; font: 500 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.page { display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 18px; align-items: start; max-width: 1420px; }
.toc { position: sticky; top: 0; display: grid; gap: 1px; padding: 14px 10px; background: var(--card); border-radius: 8px; max-height: calc(100vh - 56px); overflow-y: auto; }
.toc .label { padding: 0 8px 6px; }
.toc button { text-align: left; font: 500 13px/1.3 var(--display); color: var(--ink-soft); background: none; border: 0; padding: 6px 8px; border-radius: 5px; cursor: pointer; }
.toc button:hover { color: var(--ink); background: var(--paper); } .toc button.on { color: var(--ink); background: var(--chip); }
.stepper { position: sticky; top: calc(-1 * clamp(14px, 2.4vw, 28px)); z-index: 4; display: flex; align-items: center; flex-wrap: nowrap; gap: 0; overflow-x: auto; margin: calc(-1 * clamp(14px, 2.4vw, 28px)) 0 0; padding: 12px clamp(14px, 2.4vw, 28px); background: var(--ground); border-bottom: 1px solid var(--rule); }
.page > .stepper { grid-column: 1 / -1; margin: calc(-1 * clamp(14px, 2.4vw, 28px)) calc(-1 * clamp(14px, 2.4vw, 28px)) 0; }
.stepper .st { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; background: var(--card); border: 1px solid var(--rule); color: var(--ink-soft); text-decoration: none; font: 500 13.5px var(--display); white-space: nowrap; }
.stepper .st .n { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--chip); color: var(--ink); font: 500 11.5px var(--mono); }
.stepper .st.done { color: var(--ink); } .stepper .st.done .n { background: var(--sage); }
.stepper .st.at { color: var(--ink); border-color: var(--clay); box-shadow: 0 0 0 2px rgba(201, 135, 106, .25); } .stepper .st.at .n { background: var(--clay); color: var(--paper); }
.stepper .ln { flex: 0 0 18px; height: 2px; background: var(--line); }
.stepper .gt { display: inline-grid; place-items: center; width: 22px; height: 22px; transform: rotate(45deg); background: var(--card); border: 1.5px solid var(--clay); font: 500 10.5px var(--mono); color: var(--ink); flex: none; }
.stepper .gt.done { background: var(--clay); color: var(--paper); } .stepper .gt > span { transform: rotate(-45deg); }
.stepper .where { margin-left: auto; padding-left: 16px; font: 500 12px var(--mono); color: var(--ink-soft); white-space: nowrap; } .stepper .where b { color: var(--ink); margin-right: 6px; }
.page.pinned .toc { top: 72px; max-height: calc(100vh - 128px); }
.page.pinned .doc > .sec { scroll-margin-top: 84px; }
.progress { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .progress .bar { flex: 1; height: 6px; border-radius: 999px; background: var(--chip); overflow: hidden; }
.progress .bar > span { display: block; height: 100%; background: var(--sage); } .progress .count { font: 500 12px var(--mono); color: var(--ink-soft); white-space: nowrap; }
.tgroup + .tgroup { margin-top: 14px; } .tgroup > .label a { color: inherit; text-decoration: none; }
ul.tasks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.task { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 8px; background: #fff; }
.task .tick { flex: none; width: 18px; height: 18px; margin-top: 2px; border-radius: 5px; border: 1.5px solid var(--line); background: #fff; }
.task.doing .tick { border-color: var(--ochre); background: linear-gradient(90deg, var(--ochre) 50%, #fff 50%); }
.task.done .tick { border-color: var(--sage); background: var(--sage); position: relative; } .task.done .tick::after { content: '✓'; position: absolute; inset: 0; display: grid; place-items: center; font: 600 12px var(--display); color: var(--ink); }
.task .body { display: grid; gap: 2px; flex: 1; min-width: 0; } .task .what { font-size: 14.5px; line-height: 1.45; } .task .meta { font: 500 11.5px var(--mono); color: var(--ink-soft); }
.task.done { background: var(--card); } .task.done .what { color: var(--ink-soft); text-decoration: line-through; text-decoration-color: rgba(79, 90, 95, .45); }
.wait { border-left: 3px solid var(--clay); padding: 10px 14px; background: #f7ecd8; border-radius: 0 6px 6px 0; }
.wait + .wait { margin-top: 10px; } .wait b { display: block; } .wait ul { margin: 4px 0 0; }
.flowsvg { display: block; width: 100%; min-width: 760px; height: auto; } .svgwrap { overflow-x: auto; }
.fband { fill: var(--chip); } .fbandt { font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; fill: var(--ink-soft); text-anchor: middle; }
.fnode { cursor: pointer; } .fnode:focus { outline: none; }
.fnode rect { fill: #fff; stroke: var(--line); stroke-width: 1.2; } .fnode:hover rect, .fnode:focus-visible rect { stroke: var(--clay); stroke-width: 2; }
.fnode.at rect { fill: #f3e2b8; stroke: var(--clay); stroke-width: 2.2; }
.fnum { font: 500 11px var(--mono); fill: var(--clay); } .fname { font: 500 13px var(--display); fill: var(--ink); } .fwrite { font: 400 10.5px var(--mono); fill: var(--ink-soft); }
.fline { stroke: var(--ink-soft); stroke-width: 1.4; } .fheadp { fill: var(--ink-soft); }
.fgate path { fill: var(--clay); stroke: var(--card); stroke-width: 2; } .fgate text { font: 500 10px var(--mono); fill: var(--ink); text-anchor: middle; pointer-events: none; }
.floop { fill: none; stroke: var(--clay); stroke-width: 1.3; stroke-dasharray: 5 4; } .fbackp { fill: var(--clay); }
.floopt { font: 400 11px var(--display); fill: var(--ink-soft); text-anchor: middle; dominant-baseline: middle; paint-order: stroke; stroke: var(--card); stroke-width: 5px; stroke-linejoin: round; }
.tmap .tbox rect { fill: #fff; stroke: var(--line); stroke-width: 1.2; } .tmap .tbox:hover rect { stroke: var(--clay); stroke-width: 2; }
.tmap .tname { font: 500 13px var(--display); fill: var(--ink); } .tmap .tfile { font: 400 10px var(--mono); fill: var(--ink-soft); } .tmap .tcount { font: 500 11px var(--mono); fill: var(--clay); }
.tmap .tedge { fill: none; stroke: #b9aa8e; stroke-width: 1.1; } .tmap .tcolh { font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; fill: var(--ink-soft); }
@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); height: auto; } .side { padding: 14px 16px 8px; }
  .side nav { grid-auto-flow: column; overflow-x: auto; } .side nav .gap, .side nav .navh { display: none; } .side nav a { white-space: nowrap; gap: 6px; }
  .grid2, .grid3, .para { grid-template-columns: minmax(0, 1fr); }
  .page { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .toc { order: -1; z-index: 2; grid-auto-flow: column; justify-content: start; overflow-x: auto; max-height: none; padding: 6px; box-shadow: 0 1px 0 var(--rule); }
  .toc .label { display: none; } .toc button { white-space: nowrap; }
  .page.pinned .toc { top: 58px; } .stepper { padding: 8px 14px; } .stepper .where { display: none; }
}