snyvi 1.0.1 - Docs.rs

/* snyvi — the document is the hero, the chrome recedes. */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/assets/fonts/inter.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 400 700; font-display: swap; src: url(/assets/fonts/inter-italic.woff2) format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/assets/fonts/jetbrains-mono.woff2) format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/assets/fonts/source-serif.woff2) format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: italic; font-weight: 400 700; font-display: swap; src: url(/assets/fonts/source-serif-italic.woff2) format("woff2"); }

:root {
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Source Serif 4", ui-serif, Georgia, "Times New Roman", serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --body: var(--sans);

  /* paper */
  --bg: #faf9f6;
  --bg-side: #f3f1ec;
  --bg-raise: #ffffff;
  --fg: #1f1d1a;
  --fg-2: #5c574f;
  --fg-3: #8f897f;
  --rule: #e6e2da;
  --rule-2: #d8d3c9;
  --accent: #c2410c;
  --accent-bg: #fbe9df;
  --code-bg: #f3f1ec;
  --mark: #fde68a;
  --add: #dcfce7; --add-fg: #166534;
  --del: #fee2e2; --del-fg: #991b1b;
  --shadow: 0 10px 40px rgba(30, 25, 15, .16), 0 1px 2px rgba(30, 25, 15, .08);

  /* syntax, paper */
  --s-comment: #8a8378;
  --s-keyword: #a3400c;
  --s-string: #3b6d11;
  --s-number: #0b6e99;
  --s-function: #6a3fb5;
  --s-type: #0e7490;
  --s-variable: #1f1d1a;
  --s-punct: #6b665e;
  --s-tag: #a3400c;
  --s-attr: #6a3fb5;

  --side-w: 264px;
  --rail-w: 232px;
  --measure: 70ch;
  --radius: 6px;
  --t: 140ms cubic-bezier(.2,.7,.2,1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #15181f;
    --bg-side: #111419;
    --bg-raise: #1c2029;
    --fg: rgba(255,255,255,.87);
    --fg-2: rgba(255,255,255,.62);
    --fg-3: rgba(255,255,255,.40);
    --rule: rgba(255,255,255,.08);
    --rule-2: rgba(255,255,255,.14);
    --accent: #f59e6b;
    --accent-bg: rgba(245,158,107,.14);
    --code-bg: #1b1f28;
    --mark: rgba(253,230,138,.35);
    --add: rgba(74,222,128,.14); --add-fg: #86efac;
    --del: rgba(248,113,113,.14); --del-fg: #fca5a5;
    --shadow: 0 10px 40px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.4);
    --s-comment: rgba(255,255,255,.40);
    --s-keyword: #f59e6b;
    --s-string: #a3d977;
    --s-number: #7dd3fc;
    --s-function: #c4b5fd;
    --s-type: #67e8f9;
    --s-variable: rgba(255,255,255,.87);
    --s-punct: rgba(255,255,255,.55);
    --s-tag: #f59e6b;
    --s-attr: #c4b5fd;
  }
}
:root[data-theme="dark"] {
  --bg: #15181f;
  --bg-side: #111419;
  --bg-raise: #1c2029;
  --fg: rgba(255,255,255,.87);
  --fg-2: rgba(255,255,255,.62);
  --fg-3: rgba(255,255,255,.40);
  --rule: rgba(255,255,255,.08);
  --rule-2: rgba(255,255,255,.14);
  --accent: #f59e6b;
  --accent-bg: rgba(245,158,107,.14);
  --code-bg: #1b1f28;
  --mark: rgba(253,230,138,.35);
  --add: rgba(74,222,128,.14); --add-fg: #86efac;
  --del: rgba(248,113,113,.14); --del-fg: #fca5a5;
  --shadow: 0 10px 40px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.4);
  --s-comment: rgba(255,255,255,.40);
  --s-keyword: #f59e6b;
  --s-string: #a3d977;
  --s-number: #7dd3fc;
  --s-function: #c4b5fd;
  --s-type: #67e8f9;
  --s-variable: rgba(255,255,255,.87);
  --s-punct: rgba(255,255,255,.55);
  --s-tag: #f59e6b;
  --s-attr: #c4b5fd;
}
:root[data-font="serif"] { --body: var(--serif); }

*, *::before, *::after { box-sizing: border-box; }
html { height: 100%; }
body {
  margin: 0; height: 100%;
  background: var(--bg); color: var(--fg);
  font-family: var(--sans); font-size: 15px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  font-feature-settings: "cv11", "ss01", "calt";
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: .15em; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
::selection { background: var(--accent-bg); }

/* ---------- layout ---------- */
#app {
  display: grid; height: 100%;
  grid-template-columns: var(--side-w) minmax(0, 1fr) var(--rail-w);
  grid-template-areas: "side main rail";
}
:root[data-side="0"] #app { grid-template-columns: 0 minmax(0,1fr) var(--rail-w); }
:root[data-side="0"] #side { display: none; }
:root[data-rail="0"] #app { grid-template-columns: var(--side-w) minmax(0,1fr) 0; }
:root[data-rail="0"] #rail, #rail.empty { display: none; }
:root[data-rail="0"][data-side="0"] #app { grid-template-columns: 0 minmax(0,1fr) 0; }
#app:has(#rail.empty) { grid-template-columns: var(--side-w) minmax(0,1fr) 0; }
:root[data-side="0"] #app:has(#rail.empty) { grid-template-columns: 0 minmax(0,1fr) 0; }


#side, #rail { background: var(--bg-side); display: flex; flex-direction: column; min-height: 0; position: relative; }
/* The panes' edges drag. The gutter straddles the seam, so it takes nothing
   from the grid, and sets the same variable the grid reads, so every rule
   that knows the pane's width follows. app.js clamps it; boot.js applies the
   stored width before first paint. Not on a sheet, which has its own width. */
.gutter { position: absolute; top: 0; bottom: 0; width: 8px; cursor: col-resize; z-index: 3; touch-action: none; }
#side .gutter { right: -4px; }
#rail .gutter { left: -4px; }
.gutter::after { content: ""; position: absolute; top: 0; bottom: 0; left: 3px; width: 2px; background: var(--accent); opacity: 0; transition: opacity var(--t); }
.gutter:hover::after, .gutter:focus-visible::after, :root[data-resizing] .gutter::after { opacity: .6; }
.gutter:focus-visible { outline: none; }
:root[data-resizing] { cursor: col-resize; user-select: none; }
:root[data-resizing] * { transition: none !important; }
/* Narrow windows: a pane that no longer fits beside the document becomes a
   sheet over it. `data-sheet` on the root names the one that is open; app.js
   sets it only while the pane is at a sheet width, and clears it when the
   window grows past that. The scrim behind a sheet is what a tap outside
   lands on. The two buttons in #chrome exist for the same widths. */
@media (max-width: 1100px) {
  #app { grid-template-columns: var(--side-w) minmax(0,1fr) 0 !important; }
  #rail { display: none; position: fixed; inset: 0 0 0 auto; width: min(88vw, 320px); z-index: 20; box-shadow: var(--shadow); padding: 20px 0 20px 16px; }
  :root[data-sheet="rail"] #rail { display: flex; animation: sheet-r 160ms cubic-bezier(.2,.7,.2,1); }
  #chrome #btn-rail { display: inline-flex; }
  #app:has(#rail.empty) #btn-rail { display: none; }
  #find { padding-right: 56px; }
  #rail .gutter { display: none; }
}
@media (max-width: 760px)  {
  #app { grid-template-columns: 0 minmax(0,1fr) 0 !important; }
  #side { display: none; position: fixed; inset: 0 auto 0 0; width: min(88vw, var(--side-w)); z-index: 20; box-shadow: var(--shadow); }
  :root[data-sheet="side"] #side { display: flex; animation: sheet-l 160ms cubic-bezier(.2,.7,.2,1); }
  #chrome #btn-side { display: inline-flex; }
  #find { padding-left: 56px; }
  #side .gutter { display: none; }
}
@keyframes sheet-l { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
@keyframes sheet-r { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
#scrim { position: fixed; inset: 0; z-index: 15; background: rgba(20, 16, 10, .28); display: none; }
:root[data-sheet] #scrim { display: block; }
#chrome { position: fixed; top: 10px; left: 0; right: 0; z-index: 10; display: flex; justify-content: space-between; padding: 0 10px; pointer-events: none; }
#chrome .icon { display: none; pointer-events: auto; background: var(--bg-raise); box-shadow: var(--shadow); }
/* Pin each pane to its named area. Without this a hidden sidebar leaves the grid
   and the document pane slides into the zero-width first column. */
#side { grid-area: side; }
#main { grid-area: main; }
#rail { grid-area: rail; }
#main { min-width: 0; overflow-y: auto; overscroll-behavior: contain; scroll-behavior: smooth; }
/* The panes' own scrollbars: there when a list is longer than the pane, and
   no wider than they need to be. The document keeps the browser's. */
#trees, #toc, #meta { scrollbar-width: thin; scrollbar-color: var(--rule-2) transparent; }
@media (prefers-reduced-motion: reduce) { #main, #toc { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } }

/* ---------- sidebar ---------- */
.side-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 12px 10px 16px; }
.brand { font-weight: 600; letter-spacing: -.01em; color: var(--fg); display: inline-flex; align-items: center; gap: 8px; }
.brand:hover { text-decoration: none; }
.brand-mark { width: 14px; height: 14px; border-radius: 4px; background: var(--accent); display: inline-block; transition: background var(--t), box-shadow var(--t); }
/* Hollow while the page has no daemon to hear: it stopped, or an upgrade replaced it. */
html[data-link="off"] .brand-mark { background: transparent; box-shadow: inset 0 0 0 2px var(--fg-3); }
/* How many agents are here now, beside the mark: dim at none, the accent
   once one is. The mark says whether the page hears the daemon; this says
   whether anyone is on the other end of it. It opens the connect page,
   where each row says which. */
.live { margin: 0 auto 0 4px; min-width: 18px; height: 18px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1; color: var(--fg-3); background: var(--rule); transition: background var(--t), color var(--t); }
.live:hover { text-decoration: none; color: var(--fg); }
.live.on { color: var(--accent); background: var(--accent-bg); }
.live.on:hover { color: var(--accent); }
html[data-link="off"] .live { visibility: hidden; }
.icon { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; color: var(--fg-3); transition: background var(--t), color var(--t); }
.icon:hover { background: var(--rule); color: var(--fg); }
.icon.on { color: var(--accent); background: var(--accent-bg); }
.icon .aa { font-size: 12px; font-weight: 600; letter-spacing: -.02em; font-family: var(--serif); }
.side-foot { display: flex; align-items: center; gap: 4px; padding: 8px 12px 10px; margin-top: auto; }
.side-foot .spacer { flex: 1; }
.side-foot .hint { font-size: 11px; color: var(--fg-3); padding: 2px 4px; border-radius: 4px; }
.side-foot .hint:hover { color: var(--fg); }

#trees { overflow-y: auto; padding: 0 8px 8px; font-size: 13px; flex: 1; min-height: 0; }
#tree ul { list-style: none; margin: 0; padding: 0; }
.t-inbox { display: flex; align-items: center; gap: 8px; padding: 6px 8px; margin: 0 0 8px; border-radius: 6px; color: var(--fg-2); font-weight: 500; cursor: pointer; transition: background var(--t), color var(--t); }
.t-inbox:hover { background: var(--rule); color: var(--fg); text-decoration: none; }
.t-inbox.active { background: var(--accent-bg); color: var(--accent); }
.t-inbox .n { margin-left: auto; font-size: 11px; color: var(--fg-3); font-variant-numeric: tabular-nums; }
.t-proj > summary { list-style: none; cursor: pointer; padding: 6px 8px; border-radius: 6px; font-weight: 600; color: var(--fg-2); display: flex; align-items: center; gap: 6px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.t-proj > summary::-webkit-details-marker { display: none; }
.t-proj > summary::before { content: ""; width: 0; height: 0; border: 4px solid transparent; border-left: 5px solid var(--fg-3); margin-left: 2px; transition: transform var(--t); }
.t-proj[open] > summary::before { transform: rotate(90deg); }
.t-proj > summary:hover { background: var(--rule); color: var(--fg); }
.t-wf { margin: 2px 0 6px 6px; }
.t-wf > .wf-name { font-size: 12px; color: var(--fg-3); padding: 4px 8px 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-doc a { display: flex; align-items: baseline; gap: 6px; padding: 4px 8px 4px 14px; border-radius: 6px; color: var(--fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; transition: background var(--t), color var(--t); }
.t-doc a::before { content: ""; position: absolute; left: 6px; top: 50%; width: 3px; height: 3px; border-radius: 50%; background: var(--rule-2); transform: translateY(-50%); }
.t-doc a:hover { background: var(--rule); color: var(--fg); text-decoration: none; }
.t-doc a.active { background: var(--accent-bg); color: var(--accent); }
.t-doc a.active::before { background: var(--accent); }
/* A row waiting to be read: the bullet every row has, in the accent and a
   little larger. It is the same mark in the queue section and in the tree,
   and it goes when the document is opened from either. */
.t-doc a.new::before { background: var(--accent); width: 6px; height: 6px; left: 4px; }
.t-doc a.new .title { color: var(--fg); font-weight: 550; }
.t-queue { margin: 0 0 10px; padding: 0 0 6px; border-bottom: 1px solid var(--rule); }
.t-queue .t-label { display: flex; align-items: center; padding-top: 2px; }
.t-queue .t-label .n { margin-left: auto; background: var(--accent); color: #fff; border-radius: 9px; padding: 0 6px; line-height: 16px; letter-spacing: 0; font-size: 10px; }
.t-queue ul { list-style: none; margin: 2px 0 0; padding: 0; }
.t-queue .t-more { margin-left: 8px; }
.t-queue .t-more a { display: inline-block; font-size: 11px; color: var(--fg-3); padding: 3px 6px; border-radius: 5px; }
.t-queue .t-more a:hover { background: var(--rule); color: var(--fg-2); text-decoration: none; }
.t-doc .title { overflow: hidden; text-overflow: ellipsis; }
/* What moved in the sidebar, said once. An arrival's row, or one an undo put
   back, is lit the way a heading is where a jump landed -- the same wash, so
   the eye learns one sign. A row that was read or deleted closes where it
   was, 140 ms, before the list moves up into its place. Both start at a
   negative delay when the tree is rebuilt under them (see `moment` in
   app.js), so a rebuild never plays them again. */
.t-doc.wash { animation: land 700ms ease-out; border-radius: 6px; }   /* on the row itself, where its moment is */
.t-doc.leaving, .t-queue.leaving .t-label { animation: leave 140ms cubic-bezier(.2,.7,.2,1) forwards; overflow: hidden; pointer-events: none; }
@keyframes leave { from { opacity: 1; max-height: 32px; } to { opacity: 0; max-height: 0; } }
.t-doc .k { margin-left: auto; font-size: 10px; color: var(--fg-3); font-family: var(--mono); flex: none; }
.t-doc .pin { color: var(--accent); font-size: 7px; flex: none; align-self: center; }
/* Both names in the tree are guesses, so each carries the means to correct it,
   kept out of the way until the row is under the cursor. The name takes the free
   space so the badge and the control sit at the edge. */
.t-proj > summary > .nm, .t-wf > .wf-name > .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-wf > .wf-name { display: flex; align-items: baseline; gap: 4px; }
.ren { color: var(--fg-3); font-size: 11px; line-height: 1; padding: 2px 4px; border-radius: 4px; opacity: 0; flex: none; letter-spacing: 0; }
.t-proj > summary:hover .ren, .t-wf > .wf-name:hover .ren, .ren:focus-visible { opacity: 1; }
.ren:hover { background: var(--rule-2); color: var(--fg); }
/* The field shows the name as stored, not as the summary styles it. */
.ren-in { flex: 1; min-width: 0; font: inherit; text-transform: none; letter-spacing: normal; color: var(--fg); background: var(--bg); border: 1px solid var(--accent); border-radius: 4px; padding: 1px 4px; }
.ren-in:focus { outline: none; }
/* Past a cap, and while a project's rows are on their way. Both sit where a
   document row would, and neither should read as one: what is behind a row the
   tree has not drawn is an offer, not a document. */
.t-more { margin: 1px 0 2px 14px; }
.t-more button { font: inherit; font-size: 11px; color: var(--fg-3); background: none; border: 0; padding: 3px 6px; border-radius: 5px; cursor: pointer; }
.t-more button:hover { background: var(--rule); color: var(--fg-2); }
.t-more button:disabled { cursor: default; opacity: .5; }
.t-wait { padding: 4px 8px 4px 14px; font-size: 12px; color: var(--fg-3); }
.t-empty { padding: 24px 12px; color: var(--fg-3); font-size: 13px; line-height: 1.6; }
.t-empty code { font-family: var(--mono); font-size: 12px; background: var(--rule); padding: 1px 5px; border-radius: 4px; }

/* browse: folders read straight from disk */
.t-label { padding: 8px 10px 2px; font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--fg-3); font-weight: 600; }
.b-section { margin: 2px 0 8px; padding-bottom: 8px; border-bottom: 1px solid var(--rule); }
.b-root > summary { list-style: none; cursor: pointer; padding: 6px 8px; border-radius: 6px; font-weight: 600; color: var(--fg-2); display: flex; align-items: center; gap: 6px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.b-root > summary::-webkit-details-marker { display: none; }
.b-root > summary::before { content: ""; width: 0; height: 0; border: 4px solid transparent; border-left: 5px solid var(--accent); margin-left: 2px; transition: transform var(--t); }
.b-root[open] > summary::before { transform: rotate(90deg); }
.b-root > summary:hover { background: var(--rule); color: var(--fg); }
.b-close { margin-left: auto; color: var(--fg-3); font-size: 11px; line-height: 1; padding: 2px 4px; border-radius: 4px; opacity: 0; }
.b-root > summary:hover .b-close { opacity: 1; }
.b-close:hover { background: var(--rule-2); color: var(--fg); }
.b-close:focus-visible { opacity: 1; }
.b-tree, .b-tree ul { list-style: none; margin: 0; padding: 0 0 0 10px; }
.b-tree .b-empty { padding: 3px 10px; color: var(--fg-3); font-size: 12px; font-style: italic; }
.b-dir > details > summary { list-style: none; cursor: pointer; padding: 3px 8px; border-radius: 6px; color: var(--fg-2); display: flex; align-items: center; gap: 5px; }
.b-dir > details > summary::-webkit-details-marker { display: none; }
.b-dir > details > summary::before { content: ""; width: 0; height: 0; border: 3.5px solid transparent; border-left: 4.5px solid var(--fg-3); transition: transform var(--t); flex: none; }
.b-dir > details[open] > summary::before { transform: rotate(90deg); }
.b-dir > details > summary:hover { background: var(--rule); color: var(--fg); }
.b-file a { display: flex; align-items: baseline; gap: 6px; padding: 3px 8px 3px 14px; border-radius: 6px; color: var(--fg-2); white-space: nowrap; overflow: hidden; transition: background var(--t), color var(--t); }
.b-file a:hover { background: var(--rule); color: var(--fg); text-decoration: none; }
.b-file a.active { background: var(--accent-bg); color: var(--accent); }
.b-file .title { overflow: hidden; text-overflow: ellipsis; }
.b-file .k { margin-left: auto; font-size: 10px; color: var(--fg-3); font-family: var(--mono); flex: none; }
/* A previewed page is somebody else's design; give it the pane and no styling of ours. */
/* One scroll region: the frame fills what is left of the pane, so the page itself
   does not also scroll behind it. */
#main:has(article.preview) { overflow: hidden; }
#doc:has(article.preview) { display: flex; flex-direction: column; height: 100%; padding-top: 32px; padding-bottom: 24px; }
#doc:has(article.preview) .doc-head { margin-bottom: 20px; flex: none; }
article.preview { margin: 0; padding: 0; flex: 1 1 auto; min-height: 360px; }
article.preview iframe { width: 100%; height: 100%; border: 1px solid var(--rule); border-radius: var(--radius); background: #fff; display: block; }
@media (max-width: 760px) { #doc:has(article.preview) { padding-top: 20px; } }

.browse-image, .doc-image { text-align: center; margin: 1.5em 0; }
.browse-image img, .doc-image img { border-radius: var(--radius); max-width: 100%; height: auto; }

/* ---------- document ---------- */
#doc { --doc-pad: 48px; max-width: calc(var(--measure) + 96px); margin: 0 auto; padding: 56px var(--doc-pad) 120px; }
/* A new document arrives rather than snaps: one short rise on a navigation.
   Not on a refresh in place -- a file being watched is saved every few seconds,
   and a body that blinked on each save would be worse than one that moved. */
#doc.swap { animation: doc-in 180ms cubic-bezier(.2,.7,.2,1); }
@keyframes doc-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.doc-head { margin-bottom: 40px; }
.doc-title { font-size: 34px; line-height: 1.15; letter-spacing: -.022em; font-weight: 650; margin: 0 0 10px; text-wrap: balance; font-family: var(--sans); }
.doc-sub { color: var(--fg-3); font-size: 13px; margin: 0; }
.doc-sub .branch { font-family: var(--mono); font-size: 12px; }

.prose { font-family: var(--body); font-size: 17px; line-height: 1.65; }
:root[data-font="serif"] .prose { font-size: 18px; }
.prose > * { content-visibility: auto; contain-intrinsic-size: auto 60px; }
/* Not the headings: they are few and cheap, and the containment that comes
   with content-visibility clips to the box, which is where the `#` beside a
   heading was -- drawn outside it, and so never drawn at all. */
.prose > h1, .prose > h2, .prose > h3, .prose > h4, .prose > table { content-visibility: visible; }
/* A table too: as a placeholder it counts as a scroller Tab can stop on,
   and the moment it is laid out and fits, it is not one, and the browser
   drops the focus it just gave it onto the body. Laid out from the start,
   it is a stop only when it really scrolls. */
.prose > :first-child { margin-top: 0; }
.prose p { margin: 0 0 1.2em; text-wrap: pretty; }
.prose h1, .prose h2, .prose h3, .prose h4 { font-family: var(--sans); font-weight: 650; line-height: 1.25; letter-spacing: -.015em; text-wrap: balance; margin: 2.2em 0 .6em; position: relative; scroll-margin-top: 28px; }
.prose h1 { font-size: 1.9em; }
.prose h2 { font-size: 1.5em; margin-top: 2.4em; }
.prose h3 { font-size: 1.2em; }
.prose h4 { font-size: 1em; text-transform: uppercase; letter-spacing: .06em; color: var(--fg-2); }
.prose h1 + h2, .prose h2 + h3 { margin-top: 1em; }
.prose a.anchor { position: absolute; left: -1.2em; top: 0; color: var(--fg-3); opacity: 0; font-weight: 400; }
.prose a.anchor::before { content: "#"; }
.prose h1:hover a.anchor, .prose h2:hover a.anchor, .prose h3:hover a.anchor, .prose h4:hover a.anchor { opacity: .7; }
.prose a.anchor:hover, .prose a.anchor:focus-visible { opacity: 1; text-decoration: none; }
/* Just clicked: the mark says so itself for a moment, in place of a toast. */
.prose a.anchor[data-said] { opacity: 1; color: var(--accent); }
.prose a.anchor[data-said]::before { content: "✓"; }
/* Where a jump landed: the heading is lit for a moment, then not. A jump is
   instant -- see jumpTo in app.js for why it cannot be smooth -- and this is
   what tells the eye where it went. */
.prose .flash { animation: land 700ms ease-out; }
@keyframes land { from { background: var(--accent-bg); } to { background: transparent; } }
.prose ul, .prose ol { padding-left: 1.4em; margin: 0 0 1.2em; }
.prose li { margin: .3em 0; }
.prose li > p { margin-bottom: .4em; }
.prose li.task-list-item, .prose li:has(> input[type=checkbox]) { list-style: none; margin-left: -1.4em; padding-left: 1.6em; position: relative; }
.prose input[type=checkbox] { position: absolute; left: 0; top: .45em; appearance: none; width: 14px; height: 14px; border: 1.5px solid var(--rule-2); border-radius: 4px; background: var(--bg-raise); pointer-events: none; }
.prose input[type=checkbox]:checked { background: var(--accent); border-color: var(--accent); }
.prose input[type=checkbox]:checked::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.prose li:has(> input:checked) { color: var(--fg-3); text-decoration: line-through; text-decoration-color: var(--rule-2); }
.prose blockquote { margin: 1.4em 0; padding: .1em 0 .1em 1.2em; border-left: 2px solid var(--accent); color: var(--fg-2); }
.prose blockquote p:last-child { margin-bottom: 0; }
.prose hr { border: 0; border-top: 1px solid var(--rule); margin: 3em auto; width: 40%; }
.prose img { max-width: 100%; height: auto; border-radius: var(--radius); display: block; margin: 1.5em auto; }
.prose strong { font-weight: 650; }
.prose mark { background: var(--mark); color: inherit; padding: 0 .15em; border-radius: 2px; }
.prose kbd { font-family: var(--mono); font-size: .8em; border: 1px solid var(--rule-2); border-bottom-width: 2px; border-radius: 4px; padding: .05em .4em; }
.prose sup a { font-size: .75em; font-weight: 600; }
.prose .footnotes { margin-top: 3em; padding-top: 1em; border-top: 1px solid var(--rule); font-size: .9em; color: var(--fg-2); }
.prose .footnotes ol { padding-left: 1.4em; }
.prose dl dt { font-weight: 600; margin-top: 1em; }
.prose dl dd { margin: .2em 0 0 1.2em; }
.prose details { border: 1px solid var(--rule); border-radius: var(--radius); padding: .5em 1em; margin: 1.2em 0; }
.prose summary { cursor: pointer; font-weight: 600; }

/* tables */
.prose table { border-collapse: collapse; width: 100%; margin: 1.6em 0; font-size: .92em; display: block; overflow-x: auto; font-variant-numeric: tabular-nums; }
.prose thead th { text-align: left; font-weight: 600; font-size: .82em; letter-spacing: .04em; text-transform: uppercase; color: var(--fg-2); border-bottom: 1px solid var(--rule-2); padding: .5em .8em .5em 0; }
.prose td { border-bottom: 1px solid var(--rule); padding: .55em .8em .55em 0; vertical-align: top; }
.prose tr:last-child td { border-bottom-color: var(--rule-2); }
.prose td:last-child, .prose th:last-child { padding-right: 0; }
/* A data table is read by scanning columns, so numbers align and the head stays put. */
/* The page is the only vertical scroll; the table keeps horizontal scroll alone. */
.prose table.data { font-family: var(--mono); font-size: .84em; }
.prose table.data thead th { position: sticky; top: 0; background: var(--bg); z-index: 1; white-space: nowrap; box-shadow: 0 1px 0 var(--rule-2); }
.prose table.data td { white-space: nowrap; padding: .28em 1.1em .28em 0; line-height: 1.45; }
/* Prose columns wrap instead of running off the edge. */
.prose table.data td.wrap, .prose table.data th.wrap { white-space: normal; min-width: 28ch; max-width: 70ch; overflow-wrap: anywhere; }
.prose table.data thead th { padding: .4em 1.1em .4em 0; }
.prose table.data td.num { text-align: right; font-variant-numeric: tabular-nums; }
.prose table.data tbody tr:hover td { background: var(--code-bg); }

/* alerts (GitHub style) */
.prose .markdown-alert { margin: 1.4em 0; padding: .8em 1.1em; border-radius: var(--radius); border-left: 3px solid var(--fg-3); background: var(--code-bg); }
.prose .markdown-alert p:last-child { margin: 0; }
.prose .markdown-alert-title { font-family: var(--sans); font-weight: 600; font-size: .85em; letter-spacing: .04em; text-transform: uppercase; margin-bottom: .4em; color: var(--fg-2); }
.prose .markdown-alert-note { border-color: #3b82f6; } .prose .markdown-alert-note .markdown-alert-title { color: #3b82f6; }
.prose .markdown-alert-tip { border-color: #22c55e; } .prose .markdown-alert-tip .markdown-alert-title { color: #16a34a; }
.prose .markdown-alert-important { border-color: #a855f7; } .prose .markdown-alert-important .markdown-alert-title { color: #9333ea; }
.prose .markdown-alert-warning { border-color: #f59e0b; } .prose .markdown-alert-warning .markdown-alert-title { color: #d97706; }
.prose .markdown-alert-caution { border-color: #ef4444; } .prose .markdown-alert-caution .markdown-alert-title { color: #dc2626; }

/* inline code */
.prose code { font-family: var(--mono); font-size: .86em; background: var(--code-bg); padding: .12em .38em; border-radius: 4px; font-feature-settings: "calt" 0, "liga" 0; }
.prose pre code { background: none; padding: 0; font-size: inherit; }

/* code blocks, in prose and standalone */
pre.code { position: relative; font-family: var(--mono); font-size: 13.5px; line-height: 1.6; background: var(--code-bg); border-radius: var(--radius); padding: 14px 0; margin: 1.5em 0; overflow-x: auto; tab-size: 4; font-feature-settings: "calt" 0, "liga" 0; }
pre.code code { display: block; min-width: max-content; counter-reset: ln; } /* reset lives inside the content-visibility subtree, or style containment hides it */
pre.code::before { content: attr(data-lang); position: absolute; top: 8px; right: 12px; font-family: var(--sans); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-3); opacity: 0; transition: opacity var(--t); pointer-events: none; }
pre.code:hover::before { opacity: 1; }
pre.code .copy { position: absolute; top: 6px; right: 8px; opacity: 0; transition: opacity var(--t); font-family: var(--sans); font-size: 11px; padding: 3px 8px; border-radius: 4px; background: var(--bg-raise); color: var(--fg-2); box-shadow: 0 1px 2px rgba(0,0,0,.12); }
pre.code:hover .copy { opacity: 1; }
pre.code:hover:has(.copy)::before { opacity: 0; }
pre.code .copy:hover { color: var(--fg); }
pre.code .copy:focus-visible { opacity: 1; }
/* No pointer to hover with: everything that waits for one is simply there,
   the way the diagram tools already are. */
@media (hover: none) {
  .ren, .b-close, pre.code .copy, pre.code::before { opacity: 1; }
  pre.code:has(.copy)::before { opacity: 0; }
  .prose a.anchor { opacity: .5; }
}
pre.code .ln { display: inline; }
/* The number gutter, written once: the wrap rules below hang continuation lines past it. */
pre.code { --num-pad: 14px; --num-w: 3.2ch; --num-gap: 1.6ch; --gutter: calc(var(--num-pad) + var(--num-w) + var(--num-gap)); }
pre.code .ln::before { counter-increment: ln; content: counter(ln); display: inline-block; width: var(--num-w); margin-right: var(--num-gap); padding-left: var(--num-pad); box-sizing: content-box; text-align: right; color: var(--fg-3); opacity: .55; user-select: none; -webkit-user-select: none; }
.kind-markdown pre.code .ln::before { display: none; }
.kind-markdown pre.code .ln { padding: 0 16px; }
.kind-markdown pre.code:has(.ln:nth-of-type(12)) .ln::before { display: inline-block; }
.kind-markdown pre.code:has(.ln:nth-of-type(12)) .ln { padding: 0 16px 0 0; }

/* standalone code / text / diff documents */
.kind-code, .kind-text, .kind-diff { font-family: var(--mono); }
.kind-code pre.code, .kind-text pre.code, .kind-diff pre.code { margin: 0; background: transparent; padding: 0; font-size: 13px; }
.kind-code pre.code, .kind-text pre.code { --num-pad: 0px; }   /* the pane already insets these */
.diff .ln::before { display: none !important; }
/* Anything that is not prose wants the pane, not the reading measure. */
#doc:has(.kind-code), #doc:has(.kind-text), #doc:has(.kind-diff),
#doc:has(.kind-table), #doc:has(.kind-image), #doc:has(article.preview) { max-width: none; padding-left: 40px; padding-right: 40px; }
/* Maximise width: prose gives up its measure and uses the window. */
:root[data-wide="1"] #doc { --doc-pad: 64px; max-width: none; }

/* find bar */
/* ---------- the queue bar ---------- */
/* Above the document while something is waiting, in the document's measure so
   it reads as part of the page and not the chrome. Sticky like the find bar,
   so a reader deep in a long page still sees the count. */
#queue-bar[hidden] { display: none; }
#queue-bar { position: sticky; top: 0; z-index: 5; height: 0; margin: 0 auto; max-width: calc(var(--measure) + 96px); padding: 10px 48px 0; box-sizing: border-box; font-size: 13px; }
/* Its height is nothing, so a bar that appears mid-read lays over the page's
   top margin rather than pushing the text down under the reader; the find
   bar makes room for it instead. */
#queue-bar:not([hidden]) ~ #find { padding-top: 58px; }
#queue-bar .qb { display: flex; align-items: center; gap: 10px; min-width: 0; background: var(--bg-raise); border: 1px solid var(--rule); box-shadow: var(--shadow); border-radius: 8px; padding: 5px 5px 5px 12px; animation: rise 160ms cubic-bezier(.2,.7,.2,1); }
#queue-bar .qb-n { flex: none; color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums; }
/* The count changed under a bar that stayed: the new number settles in. */
#queue-bar .qb-n.tick { animation: tick 180ms cubic-bezier(.2,.7,.2,1); }
@keyframes tick { from { opacity: 0; transform: translateY(-4px); } }
#queue-bar .qb-next { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg-3); }
#queue-bar .qb-next b { font-weight: 550; color: var(--fg); }
#queue-bar button:not(.icon), #queue-bar .qb-all { flex: none; padding: 4px 10px; border-radius: 6px; color: var(--fg-2); transition: background var(--t), color var(--t); }
#queue-bar button:not(.icon):hover, #queue-bar .qb-all:hover { background: var(--rule); color: var(--fg); text-decoration: none; }
#queue-bar kbd { font-family: var(--mono); font-size: 10px; color: var(--fg-3); margin-left: 6px; border: 1px solid var(--rule-2); border-radius: 3px; padding: 0 4px; line-height: 14px; display: inline-block; }
#queue-bar .icon { width: 26px; height: 26px; }
#find[hidden] { display: none; }
#find { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 4px; margin: 0 auto; max-width: calc(var(--measure) + 96px); padding: 10px 48px 0; }
#find > * { background: var(--bg-raise); }
#find-input { flex: 1; font: inherit; font-size: 14px; padding: 7px 12px; border: 1px solid var(--rule-2); border-radius: 6px; color: inherit; outline: none; box-shadow: var(--shadow); }
#find-input:focus { border-color: var(--accent); }
#find-count { font-size: 12px; color: var(--fg-3); padding: 0 6px; font-variant-numeric: tabular-nums; background: none; }
#find .icon { border: 1px solid var(--rule); }
mark.find { background: var(--mark); color: inherit; border-radius: 2px; }
mark.find.cur { background: var(--accent); color: #fff; }

/* split diff */
.split { display: grid; grid-template-columns: 1fr 1fr; font-family: var(--mono); font-size: 13px; line-height: 1.6; border: 1px solid var(--rule); border-radius: var(--radius); overflow-x: auto; }
.split > div { padding: 0 10px; white-space: pre; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.split .l { border-right: 1px solid var(--rule); }
.split .full { grid-column: 1 / -1; }
.split .meta { color: var(--fg-3); padding-top: .4em; }
.split .hunk { color: var(--s-number); background: var(--code-bg); margin: .4em 0 .2em; }
.split .add { background: var(--add); color: var(--add-fg); }
.split .del { background: var(--del); color: var(--del-fg); }
.split .add mark { background: rgba(34,197,94,.35); color: inherit; border-radius: 2px; }
.split .del mark { background: rgba(239,68,68,.35); color: inherit; border-radius: 2px; }
.split .empty { background: repeating-linear-gradient(45deg, transparent 0 6px, var(--rule) 6px 7px); }
#doc:has(.split) { max-width: none; padding-left: 40px; padding-right: 40px; }

/* mermaid.
   The server sends the source in a <pre class="mermaid">; the client swaps each
   one for a <figure class="mmd"> before first paint, so the raw `flowchart TD`
   is never shown to the reader. The rule below is what covers the gap on a page
   whose script has not run yet -- and the whole of it if scripting is off, where
   the source is the only thing there is to show. */
pre.mermaid { background: transparent; text-align: center; padding: 8px 0; overflow: visible; font-family: var(--mono); font-size: 12.5px; color: var(--fg-3); white-space: pre-wrap; }
pre.mermaid::before { display: none; }

/* A drawn diagram is not prose, so it takes what the reading measure is not
   using: the column's own padding, which is as much as can be given without
   reflowing the text around it. The pane itself is one keystroke away (`w`) and
   the screen is another (`f`). */
.mmd { margin: 1.5em 0; position: relative; }
.mmd[data-state="done"] { margin-inline: calc(-1 * var(--doc-pad, 0px)); }
.mmd-frame { display: flex; align-items: center; justify-content: center; }
.mmd-frame svg { max-width: 100%; height: auto; }
/* Once it has a viewport the frame owns the box and the SVG fills it, so the
   viewBox is the only thing that decides what is shown. */
.mmd[data-zoom] .mmd-frame { overflow: hidden; border-radius: var(--radius); }
.mmd[data-zoom] .mmd-frame svg { width: 100%; height: 100%; max-width: none; display: block; }
.mmd[data-zoom="in"] .mmd-frame { cursor: grab; }
.mmd[data-grab] .mmd-frame { cursor: grabbing; }
/* The controls: present when the diagram is under the cursor or holds the
   focus, absent from a page being read -- the bargain the rename pencils in the
   tree make. Always there for a reader on a touch screen, which has no hover. */
.mmd-tools {
  position: absolute; top: 8px; right: 8px; display: flex; gap: 2px; padding: 3px;
  border-radius: var(--radius); background: var(--bg-raise); box-shadow: 0 1px 3px rgba(0,0,0,.18);
  opacity: 0; transition: opacity .12s ease; pointer-events: none;
}
.mmd:hover .mmd-tools, .mmd:focus-within .mmd-tools, .mmd[data-full] .mmd-tools { opacity: 1; pointer-events: auto; }
@media (hover: none) { .mmd-tools { opacity: 1; pointer-events: auto; } }
.mmd-tools button {
  font-family: var(--sans); font-size: 12px; line-height: 1; color: var(--fg-2);
  min-width: 26px; height: 24px; padding: 0 6px; border-radius: 5px; background: none;
}
.mmd-tools button:hover { background: var(--rule); color: var(--fg); }
.mmd-tools button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Filling the screen is the one place a 4738 px graph is legible. The figure
   is laid over the page from where it is, and the document -- not the figure
   -- is what asks the browser for fullscreen. A figure of its own in the top
   layer is what WebKitGTK, the Linux window's engine, drew every glyph of as
   nothing: the boxes and arrows stayed and the labels, the tool bar and an
   SVG's own text went; and on the way back it kept the figure at the size
   its placeholder had until the next scroll. A fixed box has neither fault in
   any engine. mmdFull in app.js. */
.mmd[data-full] { position: fixed; inset: 0; z-index: 30; margin: 0; background: var(--bg); display: flex; align-items: center; justify-content: center; }
.mmd[data-full] .mmd-frame { height: 100vh !important; width: 100vw; border-radius: 0; }
/* Until the diagram lands the figure holds about the space it will want, so the
   text below it does not jump when it does. An estimate from the source, set by
   the client -- see mmdWeight in app.js. */
.mmd:not([data-state="done"]) .mmd-frame {
  min-height: var(--mmd-reserve, 200px);
  border-radius: var(--radius);
  background: linear-gradient(var(--code-bg), var(--code-bg));
}
.mmd[data-state="error"] .mmd-frame { min-height: 0; display: block; background: none; }
.mmd-fail { padding: 2px 0; }
.mmd-note { font-family: var(--sans); font-size: 12px; letter-spacing: .04em; color: var(--fg-3); text-align: center; padding: 10px; }
/* The label is for a diagram that is about to appear; a reader who waits long
   enough to wonder gets a spinner instead of a word that never changes. */
.mmd-slow .mmd-note::before {
  content: ""; display: block; width: 18px; height: 18px; margin: 0 auto 8px;
  border: 2px solid var(--rule-2); border-top-color: var(--fg-3); border-radius: 50%;
  animation: mmd-spin .7s linear infinite;
}
@keyframes mmd-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mmd-slow .mmd-note::before { animation-duration: 2.4s; } }
/* Over the cap: offered, not spent. */
.mmd-ask { display: block; margin: 0 auto 8px; font-family: var(--sans); font-size: 13px; padding: 7px 14px; border-radius: var(--radius); background: var(--bg-raise); color: var(--fg); box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.mmd-ask:hover { color: var(--accent); }
.mmd-why { display: block; }
/* A source Mermaid could not parse is the one the reader most wants to read. */
.mmd-err { font-family: var(--sans); font-size: 13px; color: var(--del-fg); margin: 0 0 8px; text-align: left; }
/* Ligatures off, like every other code block: this is shown so the reader can
   see the characters the agent actually wrote, and JetBrains Mono draws `-->`
   as a single arrow, which is the one thing it must not do here. */
.mmd-src { font-feature-settings: "calt" 0, "liga" 0; font-family: var(--mono); font-size: 12.5px; line-height: 1.6; text-align: left; white-space: pre-wrap; background: var(--code-bg); border-radius: var(--radius); padding: 12px 14px; margin: 0; color: var(--fg-2); overflow-x: auto; }

/* history */
#history { margin-top: 20px; }
#history h4 { margin: 0 0 4px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-3); font-weight: 600; }
#history a { display: block; padding: 2px 0; color: var(--fg-2); font-variant-numeric: tabular-nums; }
#history a.cur { color: var(--accent); }
#history a:hover { color: var(--accent); text-decoration: none; }

/* diff */
.diff .ln { display: inline-block; min-width: 100%; padding: 0 12px; }
.diff .add { background: var(--add); color: var(--add-fg); }
.diff .del { background: var(--del); color: var(--del-fg); }
.diff .hunk { color: var(--s-number); background: var(--code-bg); display: inline-block; min-width: 100%; margin: .6em 0 .2em; }
.diff .meta { color: var(--fg-3); }
.compare-note { color: var(--fg-3); font-size: 13px; margin: -28px 0 28px; }

/* syntax (compact classes from the renderer). Scoped to highlighted code,
   which is the only place the renderer writes them: the names are one or
   two letters, and the palette's and the toast's title and subtitle spans
   are .t and .s too, which had them painted as a type and a string. */
pre.code .c { color: var(--s-comment); font-style: italic; }
pre.code .k { color: var(--s-keyword); }
pre.code .s { color: var(--s-string); }
pre.code .n { color: var(--s-number); }
pre.code .f { color: var(--s-function); }
pre.code .t { color: var(--s-type); }
pre.code .v { color: var(--s-variable); }
pre.code .p { color: var(--s-punct); }
pre.code .tg { color: var(--s-tag); }
pre.code .at { color: var(--s-attr); }
pre.code .hd { color: var(--s-keyword); font-weight: 600; }
pre.code .b { font-weight: 600; }
pre.code .i { font-style: italic; }
pre.code .raw { color: var(--s-string); }
pre.code .lnk { color: var(--accent); }
pre.code .ins { color: var(--add-fg); background: var(--add); }
pre.code .del { color: var(--del-fg); background: var(--del); }
pre.code .inv { color: var(--del-fg); }

/* ---------- inbox ---------- */
.inbox-head { margin-bottom: 28px; }
.inbox-head h1 { font-size: 26px; letter-spacing: -.02em; font-weight: 650; margin: 0 0 4px; }
.inbox-head p { color: var(--fg-3); margin: 0; font-size: 14px; }
.inbox { list-style: none; margin: 0; padding: 0; }
.inbox li a { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "title time" "sub sub"; gap: 2px 16px; padding: 12px 14px; margin: 0 -14px; border-radius: 8px; color: inherit; border-bottom: 1px solid var(--rule); transition: background var(--t); }
.inbox li a:hover { background: var(--bg-side); text-decoration: none; }
.inbox .title { grid-area: title; font-weight: 550; font-size: 15.5px; letter-spacing: -.005em; }
.inbox .time { grid-area: time; font-size: 12px; color: var(--fg-3); font-variant-numeric: tabular-nums; }
.inbox .sub { grid-area: sub; font-size: 12.5px; color: var(--fg-3); }
.inbox .sub b { font-weight: 500; color: var(--fg-2); }
.inbox a.new .title::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin: 0 9px 2px 0; vertical-align: middle; }
.inbox-sec { display: flex; align-items: center; gap: 10px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); font-weight: 600; margin: 30px 0 4px; }
.inbox-sec .n { background: var(--accent); color: #fff; border-radius: 9px; padding: 0 7px; line-height: 17px; letter-spacing: 0; font-size: 11px; }
.inbox-sec button { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 12.5px; color: var(--fg-2); padding: 3px 8px; border-radius: 5px; }
.inbox-sec button + button { margin-left: 0; }
.inbox-sec button:hover { background: var(--rule); color: var(--fg); }
.inbox-sec kbd { font-family: var(--mono); font-size: 10px; color: var(--fg-3); margin-left: 6px; border: 1px solid var(--rule-2); border-radius: 3px; padding: 0 4px; line-height: 14px; display: inline-block; }
.inbox.waiting { margin-bottom: 8px; }
/* The connect page: one row per agent, the state as a dot and a word, and
 * everything to paste in a block with its own Copy. It sits in the document
 * pane at the document's measure, so it reads as a page and not as chrome. */
.connect .agents { list-style: none; margin: 0; padding: 0; }
.agent { padding: 16px 0; border-top: 1px solid var(--rule); }
.agent:last-child { border-bottom: 1px solid var(--rule); }
.agent-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.agent-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--fg-3); align-self: center; flex: none; }
.agent.is-connected .agent-dot { background: var(--add-fg); }
/* Here now: the accent, with a ring, so an open session reads apart from one that is only set up. */
.agent.is-live .agent-dot { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
.agent.is-live .agent-state { color: var(--accent); }
.agent.is-stale .agent-dot { background: var(--del-fg); }
.agent-name { font-size: 16px; font-weight: 600; }
.agent-state { color: var(--fg-3); font-size: 13px; }
.agent-say { margin: 6px 0 0; font-size: 14.5px; color: var(--fg-2); line-height: 1.5; }
.connect code { font-family: var(--mono); font-size: 12.5px; }
.agent-fix { margin-top: 10px; }
.agent-instr { margin: 8px 0 0; font-size: 13.5px; color: var(--fg-3); }
.connect-line { margin-top: 28px; }
.connect-line p { margin: 0 0 8px; font-size: 14px; color: var(--fg-2); }
pre.cmd { position: relative; font-family: var(--mono); font-size: 13px; line-height: 1.55; background: var(--code-bg); border-radius: var(--radius); padding: 8px 72px 8px 12px; margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
pre.cmd code { background: none; padding: 0; font-size: inherit; }
pre.cmd .copy { position: absolute; top: 6px; right: 8px; font: inherit; font-family: var(--sans); font-size: 11px; padding: 3px 8px; border-radius: 4px; background: var(--bg-raise); color: var(--fg-2); box-shadow: 0 1px 2px rgba(0,0,0,.12); border: 0; cursor: pointer; }
pre.cmd .copy:hover { color: var(--fg); }
pre.cmd .copy:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.agent-fix details { margin-top: 8px; }
.agent-fix summary { cursor: pointer; font-size: 13px; color: var(--fg-3); }
.agent-fix details[open] summary { margin-bottom: 6px; }
.connect-foot { margin-top: 24px; color: var(--fg-3); font-size: 13.5px; }
.empty-state { margin: 20vh auto 0; max-width: 46ch; text-align: center; color: var(--fg-2); }
.empty-state h1 { font-size: 22px; font-weight: 600; letter-spacing: -.015em; margin: 0 0 8px; color: var(--fg); }
.empty-state p { margin: 0 0 18px; font-size: 15px; }
.empty-state pre { text-align: left; font-family: var(--mono); font-size: 13px; background: var(--code-bg); padding: 12px 16px; border-radius: var(--radius); display: inline-block; margin: 0; }

/* ---------- rail ---------- */
/* Two things live in the rail and they scroll apart. The contents can be
   longer than the pane -- 46 entries at 1868 px in a 1043 px window on a plan
   with numbered sections -- and used to push the actions under it off the
   screen, so "Pin" and "Compare with previous" were a scroll away on exactly
   the documents worth pinning and comparing. The contents scroll on their own
   now, in the room the actions leave, and the actions stay put. */
#rail { padding: 60px 0 20px 8px; overflow: hidden; font-size: 12.5px; }
#toc { flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; position: relative; padding: 14px 20px 14px 0; scroll-behavior: smooth; }
/* Entries that have scrolled out fade at the edges rather than being cut mid-line.
   The padding is the fade's height, so an unscrolled list has nothing in it. */
#toc { mask-image: linear-gradient(transparent, #000 14px, #000 calc(100% - 14px), transparent); }
#toc ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--rule); }
#toc li a { display: block; padding: 3px 10px; color: var(--fg-3); border-left: 1px solid transparent; margin-left: -1px; line-height: 1.4; transition: color var(--t), border-color var(--t); overflow-wrap: anywhere; }
/* Two lines of a heading, then ellipsis: better than cutting every entry mid-word. */
#toc li a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#toc li.d3 a { padding-left: 22px; }
#toc li.d4 a { padding-left: 34px; }
#toc li a:hover { color: var(--fg); text-decoration: none; }
#toc li a.cur { color: var(--accent); border-left-color: var(--accent); }
#toc .outline li a { display: flex; align-items: baseline; gap: 6px; }
#toc .outline .ok { width: 5px; height: 5px; border-radius: 1px; flex: none; align-self: center; background: var(--fg-3); }
#toc .outline .ok-fn { background: var(--s-function); border-radius: 50%; }
#toc .outline .ok-type { background: var(--s-type); }
#toc .outline .ok-impl { background: var(--s-keyword); transform: rotate(45deg); }
#toc .outline .ok-mod { background: var(--s-string); }
#toc .outline li a { font-family: var(--mono); font-size: 11.5px; }
pre.code .ln { scroll-margin-top: 76px; }
pre.code .ln.flash { background: var(--accent-bg); }
/* A line the URL points at (#L12, #L12-L20) stays marked while it is being read;
   clicking the number in the gutter is what writes that URL. */
pre.code .ln.at { background: var(--accent-bg); }
pre.code .ln.at::before { opacity: 1; color: var(--accent); }
pre.code .ln::before { cursor: pointer; }

/* Wrap long lines, for logs and generated code that run off the pane. Where there
   are line numbers the continuations hang past them, so the code still lines up. */
:root[data-wrap="1"] pre.code { white-space: pre-wrap; }
:root[data-wrap="1"] pre.code code { min-width: 0; }
:root[data-wrap="1"] pre.code .ln { display: inline-block; width: 100%; box-sizing: border-box; overflow-wrap: anywhere; }
:root[data-wrap="1"] .kind-code pre.code .ln,
:root[data-wrap="1"] .kind-text pre.code .ln,
:root[data-wrap="1"] .kind-markdown pre.code:has(.ln:nth-of-type(12)) .ln { padding-left: var(--gutter); text-indent: calc(-1 * var(--gutter)); }

/* Capped and scrollable on its own, for a file with forty versions behind it:
   the contents above it must never be squeezed out of the pane entirely. */
#meta { flex: none; max-height: 50%; overflow-y: auto; margin-top: 28px; padding-right: 20px; color: var(--fg-3); line-height: 1.7; }
#toc:empty + #meta { margin-top: 0; }
#meta .row { display: flex; gap: 8px; }
#meta .row b { font-weight: 500; color: var(--fg-2); min-width: 54px; flex: none; }
/* Long folder and file names wrap inside the rail rather than running off it. */
#meta .row span { min-width: 0; overflow-wrap: anywhere; }
#meta .actions { margin-top: 12px; display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
#meta .actions button, #meta .actions a { color: var(--fg-2); padding: 3px 0; }
#meta .actions button:hover, #meta .actions a:hover { color: var(--accent); text-decoration: none; }
#meta .actions kbd { font-family: var(--mono); font-size: 10px; color: var(--fg-3); margin-left: 8px; border: 1px solid var(--rule-2); border-radius: 3px; padding: 0 4px; line-height: 14px; display: inline-block; }

/* ---------- toasts ---------- */
#toasts { position: fixed; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 30; }
.toast { background: var(--bg-raise); color: var(--fg); box-shadow: var(--shadow); border-radius: 8px; padding: 10px 14px; font-size: 13px; display: flex; align-items: center; gap: 12px; cursor: pointer; animation: rise 160ms cubic-bezier(.2,.7,.2,1); max-width: 360px; }
.toast .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
.toast .t { font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toast .s { color: var(--fg-3); font-size: 12px; }
/* The one thing a toast offers that has to be reached on purpose. */
.toast .act { font: inherit; font-size: 12px; font-weight: 550; color: var(--accent); background: transparent; border: 1px solid var(--rule-2); border-radius: 6px; padding: 4px 10px; margin-left: auto; cursor: pointer; flex: none; }
.toast .act:hover { background: var(--bg-side); }
.toast .act:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- palette / help ---------- */
#palette, #help, #about, #reset { position: fixed; inset: 0; background: rgba(20, 16, 10, .28); z-index: 40; display: grid; place-items: start center; padding-top: 12vh; }
#palette[hidden], #help[hidden], #about[hidden], #reset[hidden] { display: none; }
.palette-box, .help-box { width: min(620px, 92vw); background: var(--bg-raise); border-radius: 10px; box-shadow: var(--shadow); overflow: hidden; animation: rise 140ms cubic-bezier(.2,.7,.2,1); }
#palette-input { width: 100%; font: inherit; font-size: 16px; padding: 14px 18px; border: 0; background: transparent; color: inherit; outline: none; border-bottom: 1px solid var(--rule); }
#palette-list { list-style: none; margin: 0; padding: 6px; max-height: 50vh; overflow-y: auto; }
#palette-list:empty { display: none; }
#palette-list li { padding: 8px 12px; border-radius: 6px; cursor: pointer; display: grid; gap: 1px; }
#palette-list li.sel, #palette-list li:hover { background: var(--accent-bg); }
#palette-list .t { font-weight: 550; font-size: 14px; }
#palette-list .s { font-size: 12px; color: var(--fg-3); }
#palette-list .snip { font-size: 12.5px; color: var(--fg-2); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#palette-list mark { background: var(--mark); color: inherit; border-radius: 2px; }
.help-box { padding: 18px 22px 20px; position: relative; outline: none; }
.help-close { position: absolute; top: 12px; right: 12px; }
.help-box h2 { margin: 0 0 12px; font-size: 14px; text-transform: uppercase; letter-spacing: .06em; color: var(--fg-3); }
.help-box dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; margin: 0; font-size: 14px; }
.help-box dt { font-family: var(--mono); font-size: 12.5px; color: var(--fg-2); }
.help-box dd { margin: 0; }
.help-foot { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--rule); display: flex; justify-content: flex-end; gap: 4px; }
button.text { font: inherit; font-size: 13px; color: var(--fg-2); background: transparent; border: 0; padding: 4px 8px; border-radius: 6px; cursor: pointer; }
button.text:hover { color: var(--fg); background: var(--bg-side); }
button.text:focus-visible, button.danger:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* The reset dialog: a sentence, a number, and a button that is dead until
 * the number is right. Red is spent here and nowhere else in the chrome. */
.about-box { width: min(560px, 92vw); }
.about-box h2 { text-transform: none; letter-spacing: 0; font-size: 18px; color: var(--fg); margin-bottom: 4px; }
.about-box p { margin: 0 0 14px; font-size: 14px; color: var(--fg-2); }
.about-box dl { grid-template-columns: max-content 1fr; gap: 7px 20px; }
.about-box dt { font-family: inherit; font-size: 13px; color: var(--fg-3); }
.about-box dd { min-width: 0; overflow-wrap: anywhere; }
.about-box dd.path { font-family: var(--mono); font-size: 12.5px; }
.about-box dd.pre { white-space: pre-line; }
.about-box .muted { color: var(--fg-3); }
.about-box a { color: var(--accent); text-decoration: none; }
.about-box a:hover { text-decoration: underline; }
.reset-box { width: min(520px, 92vw); margin: 0; }
.reset-box p { margin: 0 0 12px; font-size: 14px; line-height: 1.5; }
.reset-box label { display: block; font-size: 14px; margin: 0 0 12px; }
.reset-box label[hidden] { display: none; }
.reset-ask input { display: block; width: 100%; margin-top: 6px; font: inherit; font-family: var(--mono); font-size: 15px; padding: 8px 10px; border: 1px solid var(--rule-2); border-radius: 6px; background: var(--bg); color: inherit; outline: none; }
.reset-ask input:focus { border-color: var(--accent); }
.reset-err { color: var(--del-fg); }
.reset-act { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
button.danger { font: inherit; font-size: 13px; font-weight: 550; color: #fff; background: #b3261e; border: 0; padding: 6px 14px; border-radius: 6px; cursor: pointer; }
button.danger:hover { background: #9a1f18; }
button.danger:disabled { opacity: .4; cursor: default; }

/* ---------- print ---------- */
@media print {
  #side, #rail, #toasts, #palette, #help, #about, #reset, #queue-bar, pre.code .copy { display: none !important; }
  #app { display: block; }
  #doc { max-width: none; padding: 0; }
  .prose { font-size: 11.5pt; }
  pre.code { white-space: pre-wrap; }
}