/* the site's own style sheet for docs, guides, changelog and download (site/STYLE.md): the desk's tokens only,
   three families, three radii, no hex colours and no url() (the hrefs test scans this file). the landing keeps landing.css */
*{box-sizing:border-box}
html{scroll-padding-top:64px}
body{margin:0;background:var(--void);color:var(--txt);font-family:var(--f-body);font-size:15px;line-height:1.65;overflow-wrap:anywhere}
a{color:var(--closer)}
:focus-visible{outline:2px solid var(--worker);outline-offset:2px}

/* s2 the bar: brand left, the four places, the version right. sticky, so the place you're in never scrolls away.
   the lit place is also underlined, so it isn't colour alone */
.nav{position:sticky;top:0;z-index:10;display:flex;gap:var(--sp6);align-items:center;height:48px;padding:0 var(--sp6);border-bottom:1px solid var(--line);background:var(--panel)}
.nav a{color:var(--dim);text-decoration:none;font-family:var(--f-display);font-weight:500;letter-spacing:.02em;line-height:1.2}
.nav a:hover{color:var(--txt)}
.nav a.on{color:var(--txt);text-decoration:underline;text-underline-offset:6px}
.nav .brand{font-weight:700;font-size:18px;color:var(--txt);text-decoration:none}
.nav .ver{margin-left:auto;font-family:var(--f-data);font-size:11px;color:var(--faint)}
.navbtn{display:none;width:32px;height:32px;place-items:center;margin-left:calc(-1 * var(--sp3));padding:0;border:1px solid transparent;border-radius:var(--r-s);background:none;color:var(--dim);cursor:pointer}
.navbtn:hover{color:var(--txt);border-color:var(--line2)}
.navbtn svg{width:16px;height:16px}

/* s3 the whole width: menu 248 at the left edge, the reading area, contents 220 at the right edge. the page never caps;
   the reading column inside it does, at 960, centred in what's left (as .thread does) */
.page{display:grid;grid-template-columns:minmax(0,1fr)}
.page.m{grid-template-columns:248px minmax(0,1fr)}
.page.t{grid-template-columns:minmax(0,1fr) 220px}
.page.m.t{grid-template-columns:248px minmax(0,1fr) 220px}

/* the menu (a popover: wide, it is a static column; under 820px it is a sheet from the left, closed by a pick, esc
   or a press outside, with no script). ← home, then fold rows one line each, only the open fold listing its children */
.menu[popover]{display:block;position:sticky;inset:auto;top:48px;margin:0;width:auto;height:calc(100vh - 48px);overflow:auto;padding:var(--sp5) var(--sp4);border:0;border-right:1px solid var(--line);border-radius:0;background:var(--side);color:var(--txt)}
.menu .home{display:block;font-family:var(--f-data);font-size:12px;color:var(--dim);text-decoration:none;padding:var(--sp1) var(--sp3) var(--sp4)}
.menu .home:hover{color:var(--txt)}
.menu .fold{display:flex;align-items:center;gap:var(--sp3);height:30px;padding:0 var(--sp3);border:1px solid transparent;border-radius:var(--r-s);color:var(--dim);font-family:var(--f-display);font-weight:600;font-size:13px;letter-spacing:.02em;text-decoration:none}
.menu .fold:hover{color:var(--txt)}
.menu .fold .tw{width:12px;height:12px;flex:none}
.menu .fold.open .tw{transform:rotate(90deg)}
.menu .fold .n{margin-left:auto;font-family:var(--f-data);font-weight:400;font-size:11px;color:var(--faint)}
.menu .fold.top{margin-top:var(--sp3)}
.menu .sub{padding-left:var(--sp4)}
.menu .kids{margin:0 0 var(--sp3);padding:0;list-style:none}
.menu .kids a{display:block;height:28px;line-height:26px;padding:0 var(--sp3) 0 28px;border:1px solid transparent;border-radius:var(--r-s);color:var(--dim);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px}
.menu .kids a:hover{color:var(--txt)}
.menu a[aria-current]{background:var(--glass);border-color:var(--dim);color:var(--txt)}

/* s1 the reading column */
.doc{padding:var(--sp6) 0 80px;padding-inline:max(24px,(100% - 960px) / 2);min-width:0}
.doc h1{font-family:var(--f-display);font-weight:700;font-size:30px;line-height:1.2;margin:0 0 var(--sp3);letter-spacing:.01em}
.doc .summary{color:var(--dim);font-size:15px;margin:0 0 var(--sp6)}
.doc h2,.doc h3,.doc h4{font-family:var(--f-display);font-weight:600}
.doc h2{font-size:20px;margin:44px 0 var(--sp3);display:flex;align-items:baseline;gap:var(--sp3)}
.doc h2 .no{font-family:var(--f-data);font-weight:400;font-size:12px;color:var(--faint)}
.doc h3{font-size:16px;margin:var(--sp6) 0 var(--sp2)}
.doc p,.doc li{font-size:15px;line-height:1.65}
.doc ul,.doc ol{padding-left:20px}
.doc li{margin:var(--sp1) 0}
.doc li::marker{color:var(--faint)}
.doc strong{font-weight:600}
.summary,.dim{color:var(--dim)}
.doc :not(pre) > code{font-family:var(--f-data);font-size:.86em;font-variant-ligatures:none;background:var(--glass);border:1px solid var(--line);border-radius:var(--r-s);padding:1px 6px;white-space:nowrap}
.rows{list-style:none;padding:0;margin:0}
.doc .rows{padding:0}
.rows li{padding:var(--sp2) 0;border-bottom:1px solid var(--line)}
table{border-collapse:collapse}
th,td{border:1px solid var(--line2);padding:var(--sp2) var(--sp3);text-align:left}

/* every h2 has an id and a # link: shown on hover, on focus, and always where there is no hover (s8) */
.doc h2 a.hash{margin-left:auto;font-family:var(--f-data);font-size:12px;color:var(--faint);text-decoration:none;opacity:0}
.doc h2:hover a.hash,.doc h2:focus-within a.hash,.doc h2 a.hash:focus-visible{opacity:1}
@media (hover:none){.doc h2 a.hash{opacity:1}}

/* s7 a link into the docs: the desk's docref (base.css), a ref reads the same here and on the desk */
.docref{font-family:var(--f-data);font-size:12.5px;color:var(--worker);text-decoration:underline;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,var(--worker) 45%,transparent);white-space:nowrap}
.docref svg{width:12px;height:12px;vertical-align:-2px;margin-right:3px}
.docref:hover{text-decoration-color:var(--worker)}

/* code: mono, ligatures off, a numbered gutter that is a counter, so copied code carries no numbers.
   the colours are viewer.css's hl-* rules, mirrored here (a test keeps one rule per class) */
.doc pre.code{margin:var(--sp5) 0;padding:var(--sp4) 0;overflow-x:auto;background:var(--glass);border:1px solid var(--line);border-radius:var(--r-s);font-family:var(--f-data);font-size:13px;line-height:1.6;font-variant-ligatures:none;tab-size:4;counter-reset:ln}
.doc pre.code code{display:block;width:max-content;min-width:100%;padding:0;font:inherit;white-space:pre}
.code .l{display:block;padding-right:var(--sp5)}
.code .l::before{counter-increment:ln;content:counter(ln);display:inline-block;width:3ch;margin:0 var(--sp4);text-align:right;color:var(--faint);user-select:none}
.hl-c{color:var(--faint);font-style:italic}
.hl-s{color:var(--code-str)}
.hl-n{color:var(--wait)}
.hl-k{color:var(--planner)}
.hl-f{color:var(--worker)}
.hl-t{color:var(--reviewer)}
.hl-x{color:var(--closer)}
.hl-p{color:var(--dim)}
.hl-b{color:var(--txt);font-weight:600}

/* s6 who presses: one row per step, l · c · r. yours in the human colour beside a dot and the word, never colour alone */
.press{display:grid;grid-template-columns:96px minmax(0,1fr) auto;align-items:center;gap:var(--sp4);min-height:34px;margin:var(--sp4) 0;padding:0 var(--sp4);border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:13px}
.press .who{font-family:var(--f-data);font-size:11px;display:inline-flex;align-items:center;gap:var(--sp2)}
.press .who::before{content:"";width:8px;height:8px;border-radius:var(--r-pill);background:currentColor}
.press .who.yours{color:var(--human)}
.press .who.nobody{color:var(--dim)}
.press .what{min-width:0}
.press kbd{display:inline-block;margin:var(--sp1) var(--sp2) var(--sp1) 0;padding:1px 7px;border:1px solid var(--line2);border-radius:var(--r-s);font-family:var(--f-data);font-size:12px;color:var(--txt)}
.press .r{font-family:var(--f-data);font-size:11px;color:var(--faint);text-align:right}

/* s5 the live frame: ticket E draws the card inside it. for now it holds one line */
.live-frame{margin:var(--sp5) 0 var(--sp6);border:1px solid var(--line2);border-radius:var(--r-m);background:var(--side);overflow:hidden}
.live-h{display:flex;align-items:center;gap:var(--sp3);height:34px;padding:0 var(--sp4);border-bottom:1px solid var(--line);font-family:var(--f-data);font-size:11px;color:var(--dim)}
.live-h .dot{width:7px;height:7px;border-radius:var(--r-pill);background:var(--live)}
.live-h .k{color:var(--live);flex:none}
.live-h .lb{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.live-body{padding:var(--sp4);font-family:var(--f-data);font-size:12px;color:var(--dim)}
.live-try{font-family:var(--f-data);font-size:11px;color:var(--faint);padding:0 var(--sp4) var(--sp3)}

/* s4 the contents rail: this page's h2s, the current one in txt with a 1px worker mark (:target-current is progressive;
   where it isn't known the rail just lists). under 1240px it is a popover opened by the jump button */
.toc[popover]{display:block;position:sticky;inset:auto;top:48px;align-self:start;margin:0;width:auto;height:calc(100vh - 48px);overflow:auto;padding:var(--sp6) var(--sp4);border:0;border-left:1px solid var(--line);border-radius:0;background:var(--void);color:var(--txt);font-size:12.5px;line-height:1.5}
.toc h4{margin:0 0 var(--sp3);font-family:var(--f-display);font-weight:600;font-size:12px;color:var(--faint);letter-spacing:.04em}
.toc ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--line);scroll-target-group:auto}
.toc a{display:flex;gap:var(--sp2);padding:3px 0 3px var(--sp4);margin-left:-1px;border-left:1px solid transparent;color:var(--dim);text-decoration:none}
.toc a:hover{color:var(--txt)}
.toc a .no{font-family:var(--f-data);font-size:11px;color:var(--faint)}
.toc a:target-current{color:var(--txt);border-left-color:var(--worker)}

/* the jump button: the chat's jump (desk.css .ib.jump), 32px on panel at the reading column's right edge under the bar.
   it only shows once the rail has folded */
.jump{display:none;position:fixed;top:60px;right:max(var(--sp4),(100% - 248px - 960px) / 2);z-index:9;width:32px;height:32px;padding:0;place-items:center;background:var(--panel);border:1px solid var(--line2);border-radius:var(--r-m);color:var(--dim);box-shadow:0 6px 18px color-mix(in srgb,var(--void) 60%,transparent);cursor:pointer}
.jump:hover{color:var(--txt)}
.jump svg{width:15px;height:15px}

.foot{display:flex;gap:var(--sp6);justify-content:center;padding:var(--sp4) var(--sp6);border-top:1px solid var(--line)}
.foot a{color:var(--dim);text-decoration:none}
.foot a:hover{color:var(--txt)}
.foot .mark{display:inline-flex;align-items:center;margin-left:var(--sp4)}
.foot .mark img{display:block;width:16px;height:16px;image-rendering:pixelated}
.btn{display:inline-block;padding:var(--sp2) var(--sp4);border:1px solid var(--line2);border-radius:var(--r-s);background:var(--panel);color:var(--txt);text-decoration:none}
.btn:hover{border-color:var(--closer)}

@media (max-width:1240px){
  .page.t{grid-template-columns:minmax(0,1fr)}
  .page.m.t{grid-template-columns:248px minmax(0,1fr)}
  .jump{display:grid}
  .toc[popover]{display:none;position:fixed;inset:100px max(var(--sp4),(100% - 248px - 960px) / 2) auto auto;width:260px;height:auto;max-height:calc(100vh - 120px);padding:var(--sp4);border:1px solid var(--line2);border-radius:var(--r-m);background:var(--panel);box-shadow:0 12px 24px -12px color-mix(in srgb,var(--void) 90%,transparent)}
  .toc[popover]:popover-open{display:block}
}
@media (max-width:820px){
  .page.m,.page.m.t{grid-template-columns:minmax(0,1fr)}
  .navbtn{display:grid}
  .menu[popover]{display:none;position:fixed;inset:48px auto 0 0;width:min(300px,86vw);height:auto;border-right:1px solid var(--line2);box-shadow:12px 0 24px -12px color-mix(in srgb,var(--void) 90%,transparent)}
  .menu[popover]:popover-open{display:block}
  .jump,.toc[popover]{right:var(--sp4)}
  .press{grid-template-columns:80px minmax(0,1fr)}
  .press .r{grid-column:2;text-align:left;padding-bottom:var(--sp3)}
}
@media (max-width:620px){.nav{gap:var(--sp4);padding:0 var(--sp4)}}
/* a browser without popover reads the menu and the rail in the flow instead */
@supports not selector(:popover-open){
  .menu[popover],.toc[popover]{display:block;position:static;width:auto;height:auto;max-height:none}
  .navbtn,.jump{display:none}
}