:root {
  --ground: #F5F6F3;
  --surface: #FFFFFF;
  --sunk: #ECEEEA;
  --ink: #16202B;
  --ink-2: #4A5563;
  --ink-3: #7D8794;
  --rule: #D9DEDF;
  --accent: #2447C9;
  --accent-ink: #FFFFFF;
  --accent-soft: #E4E9FA;
  --rec: #C2352B;
  --rec-soft: #FBE6E4;
  --ok: #1D7C3A;
  --ok-soft: #E3F2E7;
  --warn: #9A5B00;
  --warn-soft: #FBEFD9;
  --next: #FFF4BF;
  --next-edge: #C79A00;
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-cond: "IBM Plex Sans Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground: #11161C; --surface: #19202A; --sunk: #0D1116;
    --ink: #E6EAEE; --ink-2: #B3BCC6; --ink-3: #87919C; --rule: #2B3440;
    --accent: #8FA6FF; --accent-ink: #0D1116; --accent-soft: #232D52;
    --rec: #F08A7E; --rec-soft: #3A1F1C; --ok: #6FCB8A; --ok-soft: #173222;
    --warn: #E7B45C; --warn-soft: #3A2C12;
    --next: #3B3610; --next-edge: #E3C44F;
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 16px/1.6 var(--font-sans); display: flex; flex-direction: column; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
code { font: 0.9em var(--font-mono); background: var(--sunk); padding: 1px 5px; border-radius: 3px; }
.muted { color: var(--ink-3); font-size: 14px; }
.eyebrow { font: 600 12px/1 var(--font-cond); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 8px; }

/* The bar */
.bar { display: flex; align-items: center; gap: 12px 24px; flex-wrap: wrap; padding-inline: 20px; padding-block: 12px; border-bottom: 1px solid var(--rule); background: var(--surface); position: sticky; top: 0; z-index: 5; }
.brand { display: flex; align-items: baseline; gap: 10px; margin-right: auto; }
.mark { font: 600 22px/1 var(--font-cond); letter-spacing: -.01em; }
.biz { font: 500 13px var(--font-mono); color: var(--ink-3); }
.tabs { display: flex; gap: 2px; }
.tab { background: none; border: 0; border-bottom: 2px solid transparent; padding: 6px 12px; font: 600 13px/1 var(--font-cond); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.count { font: 500 11px var(--font-mono); background: var(--accent); color: var(--accent-ink); border-radius: 999px; padding: 1px 6px; margin-left: 4px; letter-spacing: 0; }
.who { display: flex; gap: 12px; align-items: baseline; font-size: 14px; color: var(--ink-2); }
.link { background: none; border: 0; padding: 0; color: var(--ink-3); text-decoration: underline; text-underline-offset: 2px; font-size: 14px; }

main { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.view { flex: 1; min-height: 0; }

/* Sign in */
.signin { max-width: 520px; width: 100%; margin: 0 auto; padding-inline: 20px; padding-block: 12vh 40px; }
.signin h1 { font: 600 32px/1.15 var(--font-cond); margin: 0 0 24px; text-wrap: balance; }
.newhere { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--rule); display: grid; gap: 12px; justify-items: start; }
.newhere p { margin: 0; }
.newhere .outline { display: inline-block; border: 1px solid var(--accent); color: var(--accent); background: var(--surface); border-radius: 999px; padding: 10px 20px; font-weight: 500; text-decoration: none; }
.newhere .outline:hover { background: var(--accent); color: var(--accent-ink); }
.people { display: grid; gap: 8px; }
.people button { text-align: left; background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; padding: 14px 16px; display: flex; justify-content: space-between; gap: 12px; }
.people button:hover { border-color: var(--accent); }
.people .t { color: var(--ink-3); font-size: 14px; }

/* Teach */
/* The conversation is on the left and takes the room; the brain taking shape is one column on
   the right. The board is not beside the chat any more: what happens on it is said in the
   conversation (Mike, 5 Oct 2026). At 30vw a laptop reaches the same 520px a big monitor gets; a
   quarter of the screen left it too narrow there (Mike, 7 Oct 2026). */
.teach { --side: clamp(340px, 30vw, 520px); display: flex; width: 100%; min-height: 0; }
.talk { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
/* The scroll runs the full width, so its bar sits at the edge; the words keep a readable column. */
.talk > .log, .talk > .composer, .talk > .boardbar { padding-inline: max(26px, calc((100% - 1120px) / 2)); }
.beside { flex: 0 0 var(--side); min-width: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); border-left: 1px solid var(--rule); background: var(--surface); font-size: 13.5px; }
.bhead { display: grid; gap: 8px; padding: 14px 20px 12px; border-bottom: 1px solid var(--rule); }
/* One line of figures, the brain's then the work's, each wrapping on its own when there is no room. */
.bfigs { display: flex; flex-wrap: wrap; gap: 8px 26px; }
.bfigs .pstats { display: contents; }
.bhead .phappened { margin: 0; }
.sidepage > .pnudge { margin: 0 0 16px; }
/* An answer that moved nothing on the board says so quietly, and says how long it has been still. */
.phappened.still { background: var(--sunk); color: var(--ink-2); }
/* Offered, never filed. The person's own page is what they approve and correct, so it sits
   beside the conversation and fills as they teach. A page nobody reads is a page nobody
   corrects, and the whole consent contract rests on them having read it. */
.sidepage { min-width: 0; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 18px 20px 40px; }
.sidepage > .ph:first-of-type { margin-top: 0; justify-content: space-between; }
/* Section labels: small, spaced capitals, so the eye finds the sections before the words. */
.ph { font: 700 11px/1.2 var(--font-sans); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); margin: 24px 0 10px; display: flex; align-items: center; gap: 8px; }
.pstats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pstats div { display: grid; }
.pstats b { font: 600 20px/1.1 var(--font-cond); color: var(--ink); font-variant-numeric: tabular-nums; }
.pstats span { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.phappened { margin: 12px 0 0; padding: 8px 10px; border-radius: 8px; background: var(--ok-soft); color: var(--ok); font-size: 12.5px; }
.pbutton { width: 100%; margin-top: 12px; padding: 9px 12px; border: 1px solid var(--rule); border-radius: 8px; background: var(--surface); color: var(--accent); font-weight: 600; font-size: 13.5px; }
.pbutton:hover { border-color: var(--accent); }
.pnudge { margin: 10px 0 0; padding: 8px 10px; border: 1px dashed var(--accent); border-radius: 8px; font-size: 12.5px; color: var(--ink-2); }
.pempty { margin: 0; font-size: 12.5px; color: var(--ink-3); font-style: italic; }
.ptime { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ptime th { text-align: left; font-weight: 600; color: var(--ink-3); padding: 0 0 4px; }
.ptime td { padding: 5px 0; border-top: 1px solid var(--rule); vertical-align: top; }
.ptime th:last-child, .ptime td:last-child { text-align: right; padding-left: 10px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pwork { display: block; font-size: 11px; color: var(--ink-3); }
/* The working is a whole taught line. Three lines of it is enough beside the conversation. */
.ptime .pbasis { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.pnone { color: var(--ink-3); font-size: 11.5px; font-style: italic; }
.tnone { grid-column: 2 / 4; text-align: right; }
.ptotal td { font-weight: 700; border-top: 2px solid var(--ink); }
/* The brain taking shape: each piece of work an onion of layers, systems between them, and what the
   last answer added in green. */
.shape svg { display: block; width: 100%; height: auto; margin: 0 0 6px; }
.shape .pad { fill: var(--surface); }
.shape .ring { fill: none; stroke: var(--rule); }
.shape .ring.met { stroke: var(--accent); }
.shape .core { fill: var(--rule); }
.shape .core.met { fill: var(--accent); }
/* The business itself, at the centre, in ink: a different thing from a piece of work. */
.shape .ring.biz.met { stroke: var(--ink); }
.shape .core.biz.met { fill: var(--ink); }
.shape .bizlab { font-weight: 600; }
.pip.biz.met { background: var(--ink); }
.shbiz .shname { font-weight: 600; }
.shape .syn { stroke: var(--ink-3); stroke-width: 1; stroke-opacity: .28; }
.shape .syn.shared { stroke-opacity: .55; }
.shape .sys { fill: #17908A; fill-opacity: .55; }
.shape .sys.shared { fill-opacity: 1; }
.shape .then { fill: none; stroke: var(--accent); stroke-width: 1.2; stroke-dasharray: 4 3; }
.shape .thenhead { fill: var(--accent); }
.shape text { font: 11px var(--font-sans); fill: var(--ink); text-anchor: middle; }
.shape text .n, .shape .slab { fill: var(--ink-3); font-size: 9.5px; }
/* Touched, a node lights what it is joined to and the rest falls back, as on the brain tab's graph. */
.shape .sn, .shrow[data-node] { cursor: pointer; transition: opacity .15s; }
.shape .syn, .shape .then { transition: opacity .15s; }
.shape .dim { opacity: .16; }
.shape .syn.hot { stroke: var(--accent); stroke-opacity: 1; stroke-width: 1.8; }
.shape .then.hot { stroke-width: 2.2; }
.shape .slab.hov { display: none; paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; }
.shape .sn.near .slab { display: block; fill: var(--ink); }
.shape .sn.near .sys { fill-opacity: 1; }
.shrow.near .shname { color: var(--accent); font-weight: 600; }
.shape .ring.fresh, .shape .syn.fresh { stroke: var(--ok); stroke-opacity: 1; animation: shapepulse 1.1s ease-in-out 4; }
@keyframes shapepulse { 50% { opacity: .2; } }
@media (prefers-reduced-motion: reduce) { .shape .fresh { animation: none; } }
.shapenew { margin: 0 0 8px; padding: 6px 10px; border-radius: 8px; background: var(--ok-soft); color: var(--ok); font-size: 12.5px; }
.shrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; padding: 5px 0; border-top: 1px solid var(--rule); font-size: 12.5px; }
.shrow .shname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shrow .shnext { grid-column: 1 / 3; font-size: 11px; color: var(--ink-3); }
.pip { display: inline-block; width: 7px; height: 7px; margin-left: 2px; border-radius: 2px; background: var(--sunk); }
.pip.met { background: var(--accent); }
.pip.fresh { background: var(--ok); }
.shapekey { margin: 8px 0 0; font-size: 11px; color: var(--ink-3); }
.pbar { height: 5px; border-radius: 3px; background: var(--sunk); overflow: hidden; }
.pbar i { display: block; height: 100%; background: var(--ok); transition: width .5s ease; }
.pbarnote { margin: 8px 0 8px; font-size: 12.5px; color: var(--ink-2); }
.prd { display: grid; grid-template-columns: 18px 1fr; gap: 4px; padding: 3px 0; font-size: 12.5px; }
.prd .pmark { color: var(--ink-3); }
.prd.met .pmark { color: var(--ok); font-weight: 700; }
.prd:not(.met) .plabel { font-weight: 600; }
.prd.met .plabel { color: var(--ink-2); }
.pwhy { display: block; color: var(--ink-3); font-size: 12px; }
.pq { border-left: 2px solid var(--accent); padding: 2px 0 2px 12px; margin: 0 0 10px; font-size: 13px; }
.pfor { display: block; font-size: 11.5px; color: var(--ink-3); }
.pout { display: block; font-size: 12px; color: var(--ok); }
.badge { font: 700 9.5px/1 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; padding: 3px 6px; border-radius: 4px; vertical-align: 1px; white-space: nowrap; }
.badge.shared { background: var(--ok-soft); color: var(--ok); }
.badge.mine { background: var(--warn-soft); color: var(--warn); }
.badge.view { background: var(--sunk); color: var(--ink-2); margin-left: 4px; }
.pact { display: grid; grid-template-columns: 22px 1fr; gap: 8px; padding: 5px 0; font-size: 13px; }
.ptick { width: 18px; height: 18px; margin-top: 2px; padding: 0; border: 1.5px solid var(--ink-3); border-radius: 4px; background: var(--surface); font-size: 12px; line-height: 1; color: var(--accent-ink); }
.pact.done .ptick { background: var(--ok); border-color: var(--ok); }
.pact.did_not_get_to_it .ptick, .pact.changed .ptick { color: var(--ink-3); }
.pact:not(.open) .ptext { text-decoration: line-through; color: var(--ink-3); }
.pdone summary { cursor: pointer; font-size: 12.5px; color: var(--ink-3); text-decoration: underline; text-underline-offset: 2px; margin: 4px 0; }
.paddform { display: grid; grid-template-columns: minmax(0, 1fr) 88px auto; gap: 6px; margin-top: 8px; }
.paddform input { min-width: 0; border: 1px solid var(--rule); border-radius: 6px; padding: 6px 8px; font: 13px var(--font-sans); background: var(--surface); color: var(--ink); }
.psys { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 5px 0; border-bottom: 1px solid var(--rule); font-size: 13px; }
.psys .badge { margin: 3px 0 0; }
.psys:last-child { border-bottom: 0; }
.plearn { padding: 7px 0; border-bottom: 1px solid var(--rule); font-size: 12.5px; line-height: 1.45; }
.plearn:last-child { border-bottom: 0; }
.pfoot { margin-top: 22px; border-top: 1px solid var(--rule); padding-top: 10px; }
.pfoot .note { margin: 6px 0 0; }
.sheetclose, .learnedbtn { display: none; }
.sbwhole { font: 500 12px var(--font-sans); letter-spacing: 0; text-transform: none; }
.sbgoal { margin: 0 0 6px; font-size: 12.5px; color: var(--ink-2); }
.sbgoal:empty, .sideboard .note:empty { display: none; }
.sbh { font: 600 12.5px/1.2 var(--font-sans); color: var(--ink-2); margin: 16px 0 8px; display: flex; justify-content: space-between; gap: 8px; }
.sbinits { display: grid; gap: 6px; }
.sbinit { width: 100%; padding: 9px 10px; border-radius: 10px; font-size: 13px; }
.sideboard .sbcol { background: none; padding: 0; min-height: 34px; border-radius: 8px; }
.sideboard .sbcol .bdcard { padding: 8px 10px; font-size: 13px; }
.sbcol .bdtitle { -webkit-line-clamp: 3; }
.sbcol details summary { cursor: pointer; font-size: 12px; color: var(--ink-3); margin-bottom: 6px; }
.sbothers { margin: 14px 0 0; }
.sblate { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 8px; width: 100%; text-align: left; padding: 5px 0; border: 0; border-top: 1px solid var(--rule); background: none; font-size: 12.5px; line-height: 1.4; color: var(--ink-2); }
.sblate:hover { color: var(--ink); }
.sblate b { display: block; color: var(--ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sbwhat { display: block; color: var(--ink-3); }
.sbwhen { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.sbnext { display: grid; gap: 2px; margin-top: 2px; padding-top: 6px; border-top: 1px dashed var(--rule); font-size: 12.5px; }
.sbnextstep { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* What a card is waiting on, in a line, so a board that is standing still says why. */
.bdwaits { font-size: 12px; line-height: 1.35; color: var(--warn); }
/* Whatever changed since the board was last drawn, in green, like the layers of the brain. */
.bdcard.fresh, .bdinit.fresh { border-color: var(--ok); box-shadow: 0 0 0 2px var(--ok-soft); animation: shapepulse 1.1s ease-in-out 3; }
#sp-actions + .paddform { margin-bottom: 4px; }

/* My page, in full: the page on the left, how much is understood and what is still open on the
   right, each column scrolling on its own. One column below 900px, the side under the page. */
.view.pagesview { display: flex; flex-direction: column; min-height: 0; }
.pgbar { flex: 0 0 auto; padding: 10px 30px; border-bottom: 1px solid var(--rule); }
.pageview { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 360px; min-height: 0; }
.pageview[hidden], .viewer[hidden] { display: none; }
.pv-main { overflow-y: auto; padding: 22px 30px 60px; }
.pv-main > * { max-width: 820px; margin-left: auto; margin-right: auto; }
.pv-side { overflow-y: auto; padding: 22px 20px 40px; border-left: 1px solid var(--rule); background: var(--surface); font-size: 13.5px; }
.pv-side > .ph:first-child { margin-top: 0; }
.sharebar { padding: 10px 14px; border-radius: 10px; background: var(--ok-soft); color: var(--ok); font-size: 14px; margin-bottom: 18px; }
.actbox { background: var(--surface); border: 1px solid var(--rule); border-left: 3px solid var(--warn); border-radius: 10px; padding: 14px 16px; margin-bottom: 18px; }
.actbox .ph { margin-top: 0; }
.actbox > .muted { margin: -4px 0 8px; font-size: 13px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-bottom: 18px; }
.tile { background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: 12px 14px; display: grid; }
.tile b { font: 600 22px/1.1 var(--font-cond); font-variant-numeric: tabular-nums; }
.tile span { font-size: 12px; color: var(--ink-3); }
#pv-time-wrap { margin-bottom: 18px; }
#pv-time-wrap.last { margin-top: 28px; }
.tbar { display: grid; grid-template-columns: minmax(0, 1fr) 140px 36px; gap: 10px; align-items: center; padding: 5px 0; font-size: 13px; }
.ttrack { height: 8px; border-radius: 4px; background: var(--sunk); overflow: hidden; }
.ttrack i { display: block; height: 100%; background: var(--accent); }
.tbar b { text-align: right; font-variant-numeric: tabular-nums; }
.pvdoc { background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; padding: 22px 26px; }
@media (max-width: 900px) {
  .view.pagesview { display: block; overflow-y: auto; }
  .pageview { display: block; }
  .pgbar { padding: 10px 14px; }
  .pv-main, .pv-side { overflow: visible; padding: 16px 14px; }
  .pv-side { border-left: 0; border-top: 1px solid var(--rule); }
  .tbar { grid-template-columns: minmax(0, 1fr) 80px 32px; }
}
.log { flex: 1; overflow-y: auto; padding-block: 28px 16px; display: flex; flex-direction: column; gap: 22px; }
.msg { max-width: 82ch; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.leo { align-self: flex-start; }
.msg.leo .who-label { display: block; font: 600 11px/1 var(--font-cond); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }
.msg.you { align-self: flex-end; background: var(--accent-soft); padding: 10px 14px; border-radius: 14px 14px 4px 14px; }
.msg.error { align-self: stretch; color: var(--rec); font-size: 14px; }
.msg .noted { display: block; margin-top: 8px; font-size: 13px; color: var(--ink-3); }
.msg .noted button { background: none; border: 0; padding: 0; color: var(--accent); text-decoration: underline; text-underline-offset: 2px; font-size: 13px; }
.thinking::after { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); animation: pulse 1.1s ease-in-out infinite; vertical-align: middle; }
@keyframes pulse { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

/* Where the board stands, in one line above the message box, and what happens on it, said in the
   conversation as it happens. */
.boardbar { background: var(--ground); }
.boardline { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 4px; border: 0; background: none; font-size: 13px; color: var(--ink-2); text-align: left; }
.boardline:hover { color: var(--ink); }
.boardline-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--next-edge); flex: none; }
.boardline-go { margin-left: auto; color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.msg.boardev { align-self: stretch; max-width: none; white-space: normal; }
.msg.boardev .who-label { display: block; font: 600 11px/1 var(--font-cond); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
.bevs { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 340px)); gap: 10px; align-items: start; }
.bev { display: grid; gap: 6px; align-content: start; }
.bevwhat { font: 600 11px/1.2 var(--font-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.bevgo { justify-self: start; }
.bevgone { font-size: 12.5px; color: var(--ok); }
.bevgone.bad { color: var(--rec); }
.bevgone.parked { color: var(--ink-3); }
/* Which of the three in hand the new work replaces. */
dialog.swap { max-width: 520px; }
.swaplist { display: grid; gap: 8px; margin-top: 12px; }
.swaplist .pbutton { margin: 0; text-align: left; color: var(--ink); font-weight: 600; }
.swaplist .pbutton:disabled { opacity: .55; cursor: default; }
.bevopen { margin-top: 8px; font-size: 13px; }
.composer { position: sticky; bottom: 0; background: var(--ground); padding-block: 8px 18px; }
.composer textarea { width: 100%; resize: none; border: 1px solid var(--rule); border-bottom: 0; border-radius: 12px 12px 0 0; background: var(--surface); color: var(--ink); font: 16px/1.5 var(--font-sans); padding: 14px 16px 6px; max-height: 40vh; display: block; overflow-y: hidden; }
.composer textarea:focus { outline: none; border-color: var(--accent); }
.composer textarea:focus + .controls { border-color: var(--accent); }
.controls { display: flex; align-items: center; gap: 10px; border: 1px solid var(--rule); border-top: 0; border-radius: 0 0 12px 12px; background: var(--surface); padding: 6px 8px 8px 16px; }
.status { font-size: 13px; color: var(--ink-3); margin-right: auto; }
/* While the microphone is live or the words are being written down, the line stops being an
   aside: it is the only thing telling the person their five minutes still exists. */
.status.live { color: var(--rec); font-variant-numeric: tabular-nums; }
.meter { width: 44px; height: 4px; border-radius: 999px; background: var(--rec-soft); overflow: hidden; flex: none; }
.meter i { display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--rec); transform: scaleX(0); transform-origin: left; }
.attach svg { width: 18px; height: 18px; }
.attach:disabled { opacity: .45; }
.mic { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--rule); background: var(--surface); display: grid; place-items: center; }
.mic svg { grid-area: 1 / 1; width: 20px; height: 20px; fill: var(--ink-2); }
.mic .i-stop, .mic.recording .i-mic { display: none; }
.mic.recording .i-stop { display: block; }
.mic.recording { background: var(--rec-soft); border-color: var(--rec); animation: rec 1.4s ease-in-out infinite; }
.mic.recording svg { fill: var(--rec); }
@keyframes rec { 0%, 100% { box-shadow: 0 0 0 0 var(--rec-soft); } 50% { box-shadow: 0 0 0 7px var(--rec-soft); } }
.send, .primary { background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 999px; padding: 10px 20px; font-weight: 500; }
.send:disabled, .primary:disabled { opacity: .45; cursor: default; }

/* My page */
.page { width: 100%; max-width: 1180px; margin: 0 auto; padding-inline: 20px; padding-block: 28px 40px; overflow-y: auto; }
.cols { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.card { background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: 22px 24px; }
.card h2 { font: 600 24px/1.2 var(--font-cond); margin: 0 0 6px; }
.card h3 { font: 600 13px var(--font-cond); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); margin: 22px 0 8px; }
.private { background: var(--sunk); }
.plain { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-size: 15px; }
.plain li { padding-bottom: 8px; border-bottom: 1px solid var(--rule); }
.plain li:last-child { border-bottom: 0; }
.actions label { display: flex; gap: 10px; align-items: flex-start; }
.actions input { margin-top: 5px; accent-color: var(--accent); }
.actions .done { color: var(--ink-3); text-decoration: line-through; }
.md h2 { display: none; }
.md h3 { font: 600 13px var(--font-cond); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); margin: 22px 0 8px; }
.md ul { padding-left: 18px; margin: 0; display: grid; gap: 6px; }
.md p { margin: 0 0 10px; color: var(--ink-2); font-size: 14px; }
.md sub { display: block; font-size: 12px; color: var(--ink-3); vertical-align: baseline; }

/* Map */
/* The map and graph sit in the page like any other sub-view, with no frame of their own. */
.brmri { display: grid; grid-template-columns: minmax(0, 3fr) minmax(300px, 2fr); gap: 36px; align-items: start; margin-top: 8px; }
.brmri-pic { background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; padding: 12px; }
.brmri-pic svg { margin: 0; max-height: calc(100vh - 260px); }
@media (max-width: 900px) { .brmri { grid-template-columns: minmax(0, 1fr); gap: 14px; } }
.brainmap { width: 100%; height: calc(100vh - 230px); min-height: 520px; border: 0; display: block; background: transparent; margin-top: 8px; }

dialog { border: 1px solid var(--rule); border-radius: 12px; background: var(--surface); color: var(--ink); max-width: 460px; padding: 24px; }
dialog::backdrop { background: rgba(10, 14, 20, .45); }
dialog h2 { font: 600 22px/1.2 var(--font-cond); margin: 0 0 12px; }
dialog p { margin: 0 0 10px; color: var(--ink-2); }
.dialog-row { display: flex; justify-content: flex-end; gap: 16px; align-items: center; margin-top: 18px; }

@media (max-width: 900px) {
  /* Narrow: the block is one press away, as a sheet over the conversation, with Board and Learned
     beside Send, each opening it on its own half. A strip above the conversation pushed the words
     off a phone screen. */
  .beside { display: none; }
  .learnedbtn { display: inline-block; background: none; border: 1px solid var(--rule); border-radius: 999px; padding: 8px 14px; font-size: 14px; color: var(--ink-2); }
  body.showpanel .beside { display: grid; position: fixed; left: 0; right: 0; bottom: 0; top: 18vh; z-index: 15; border-left: 0; border-radius: 14px 14px 0 0; box-shadow: 0 -8px 30px rgba(0, 0, 0, .18); }
  body.showpanel .beside .sheetclose { display: block; justify-self: end; background: none; border: 0; color: var(--ink-3); text-decoration: underline; font-size: 14px; }
}
@media (max-width: 760px) {
  .cols { grid-template-columns: minmax(0, 1fr); }
  .bar { padding-inline: 16px; }
  /* On a phone the tabs take a row of their own and scroll sideways, rather than pushing the
     whole page wider than the screen. */
  .tabs { order: 3; width: 100%; overflow-x: auto; scrollbar-width: none; }
  .tab { white-space: nowrap; flex: 0 0 auto; }
  .page { padding-inline: 16px; }
  .talk > .log, .talk > .composer, .talk > .boardbar { padding-inline: 16px; }
  .who span { display: none; }
  /* Board and Learned beside Send pushed Send off the edge of a phone. */
  .controls { gap: 6px; padding-left: 8px; }
  .learnedbtn { padding: 8px 10px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }

/* Somebody else's voice, quoted and attributed. Leo never paraphrases it, and it has to look
   like a person wrote it rather than like part of the product. */
.fromnote { margin: 18px 0 22px; padding: 14px 18px; border-left: 3px solid var(--accent); background: var(--surface); white-space: pre-wrap; font-size: 15px; line-height: 1.55; }
.msg.fromnote { align-self: stretch; max-width: none; }

/* The failure, at the top of the view the maintainer opens anyway. Nobody else ever sees it. */
.banner { display: flex; gap: 14px; align-items: baseline; justify-content: space-between; padding: 10px 20px; background: var(--rec-soft); color: var(--rec); font-size: 14px; }
.banner .link { color: inherit; }

/* Sources */
.sources { overflow-y: auto; }
.sources-in { width: 100%; max-width: 820px; margin: 0 auto; padding-inline: 20px; padding-block: 28px 48px; }
.sources-h { font: 600 30px/1.15 var(--font-cond); margin: 0 0 10px; }
.lede { color: var(--ink-2); max-width: 62ch; margin: 0 0 28px; }
.sgroup { margin-bottom: 28px; }
.sgroup h2 { font: 600 13px var(--font-cond); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 10px; }
.srow { background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: 16px 18px; margin-bottom: 8px; }
.shead { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.shead p { margin: 4px 0 0; }
.sbtns { display: flex; gap: 12px; align-items: center; flex: none; }
.pill { font: 600 11px/1 var(--font-cond); letter-spacing: .08em; text-transform: uppercase; border-radius: 999px; padding: 3px 8px; margin-left: 6px; white-space: nowrap; }
.pill.good { background: var(--accent-soft); color: var(--accent); }
.pill.bad { background: var(--rec-soft); color: var(--rec); }
.pill.soon { background: var(--sunk); color: var(--ink-3); }
.sform { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rule); }
.steps { margin: 0 0 12px; padding-left: 20px; color: var(--ink-2); font-size: 14px; display: grid; gap: 5px; }
.srow-in { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.srow-in input { flex: 1; min-width: 220px; border: 1px solid var(--rule); border-radius: 8px; background: var(--ground); color: var(--ink); font: 14px var(--font-mono); padding: 10px 12px; }
.srow-in input:focus { outline: none; border-color: var(--accent); }
.primary.sm { padding: 8px 16px; font-size: 14px; }
.note { font-size: 14px; margin: 10px 0 0; min-height: 1em; color: var(--ink-3); }
.note.good { color: var(--ok); }
.note.bad, .err { color: var(--rec); }
.err { font-size: 14px; margin: 4px 0 0; }
@media (max-width: 560px) { .shead { flex-direction: column; } }

/* Leo asking for files. They see every path and the reason, and tick what they send. */
.msg.wants { align-self: stretch; max-width: none; background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: 16px 18px; white-space: normal; }
.wants-h { margin: 0 0 12px; font-weight: 500; }
.msg.wants label { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; border-bottom: 1px solid var(--rule); font-size: 14px; }
.msg.wants label:last-of-type { border-bottom: 0; }
.msg.wants input { margin-top: 4px; accent-color: var(--accent); }
.wants-b { display: flex; gap: 12px; align-items: center; margin-top: 14px; }

/* Teaching is what the whole thing is for, and in this phase it is what somebody should be
   doing nine visits out of ten. A tab that looks like every other tab does not say that, so it
   is a button and the rest stay tabs. */
.tab.lead { border: 1px solid var(--rule); border-radius: 999px; padding: 7px 18px; color: var(--ink); background: var(--surface); margin-right: 8px; }
.tab.lead[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.tab.lead[aria-selected="false"]:hover { border-color: var(--accent); color: var(--accent); }

/* Setting up, and joining. The first screen a client ever sees. */
.setup { display: grid; gap: 16px; max-width: 460px; }
.setup label { display: grid; gap: 6px; font-size: 14px; color: var(--ink-2); }
.setup input, .setup textarea { border: 1px solid var(--rule); border-radius: 8px; background: var(--surface); color: var(--ink); font: 16px/1.5 var(--font-sans); padding: 11px 13px; resize: vertical; }
.setup input:focus, .setup textarea:focus { outline: none; border-color: var(--accent); }
.setup .primary { justify-self: start; }

/* What each answer produced. An honest nothing is quieter, never absent. */
.noted.quiet { color: var(--ink-3); }

/* Why it works this way, one click from anywhere, including before signing in. */
.why-link { margin-left: auto; margin-right: 14px; font-size: 13px; }
.lib-link { margin-left: auto; margin-right: 14px; font-size: 13px; }
.lib-link + .why-link { margin-left: 0; }
.view.why { padding: 24px 16px; }
.why-in { max-width: 680px; margin: 0 auto; }

/* Tables on a page, and a flow drawn as swimlanes. Step names wrap in full: never truncated. */
.tablewrap { overflow-x: auto; margin: 10px 0; }
.md table { border-collapse: collapse; font-size: 13px; width: 100%; min-width: 720px; }
.md th, .md td { border-bottom: 1px solid var(--rule); padding: 6px 8px; text-align: left; vertical-align: top; }
.md th { color: var(--ink-3); font-weight: 500; }
.flow { display: grid; grid-template-columns: repeat(var(--lanes), minmax(150px, 1fr)); gap: 8px 10px; margin: 12px 0; overflow-x: auto; }
.lane-h { font: 500 12px var(--font-cond); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); border-bottom: 2px solid var(--rule); padding-bottom: 4px; }
.fstep { display: flex; flex-direction: column; gap: 3px; border: 1.5px solid var(--rule); border-radius: 8px; background: var(--surface); padding: 8px 10px; min-width: 0; }
.fstep .fn { font: 500 11px var(--font-mono); color: var(--ink-3); }
.fstep .fname { font-size: 14px; line-height: 1.35; white-space: normal; overflow-wrap: anywhere; }
.fstep .fmeta, .fstep .fnext { font-size: 12px; color: var(--ink-3); }
.fstep .fnext::before { content: "\2192  "; }
.fstep.gap { border-style: dashed; background: transparent; }
.fstep.outside { border-style: dotted; }
.fstep.hurts { border-color: var(--accent); }
.fstep .fhurt { font-size: 12px; color: var(--accent); font-weight: 500; }

/* People, for the named maintainers: the counts. Brainwaves used to be the column on the right
   here; it moved to Findings, beside the read, 28 Sep 2026. */
.view.people-view { padding: 24px 16px; overflow-y: auto; }
.pw { max-width: 1180px; margin: 0 auto; padding: 0 14px; }
.phead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 6px; }
.phead h1 { font: 600 30px/1.15 var(--font-cond); margin: 0 0 4px; }
.phead input { min-width: 260px; border: 1px solid var(--rule); border-radius: 999px; padding: 8px 14px; font: 14px var(--font-sans); background: var(--surface); color: var(--ink); }
.pteam h2 { font: 600 18px/1.3 var(--font-cond); margin: 26px 0 10px; }
.pteam h2 .muted { font: 400 13px var(--font-sans); margin-left: 6px; }
.pcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.pcard { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: start; padding: 14px 16px; border: 1px solid var(--rule); border-radius: 12px; background: var(--surface); color: var(--ink); text-decoration: none; }
.pcard:hover { border-color: var(--accent); }
.pcard.pagelink, .pcard.pagelink * { text-decoration: none; }
.pcard.me { border-color: var(--accent); background: var(--accent-soft); }
.pcard.nobody { border-style: dashed; border-color: var(--warn); background: var(--warn-soft); }
.avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); font: 600 14px var(--font-cond); }
.pcard.nobody .avatar { background: var(--surface); color: var(--warn); border: 1px dashed var(--warn); }
.pinfo { display: grid; gap: 2px; font-size: 13px; color: var(--ink-2); }
.pinfo b { color: var(--ink); font-size: 14.5px; }
.pruns { font-size: 12.5px; }
.pfacts { font-size: 12px; color: var(--ink-3); }
.pw-table .card { padding: 8px 12px; overflow-x: auto; }
.counts { border-collapse: collapse; width: 100%; font-size: 14px; }
.counts th, .counts td { border-bottom: 1px solid var(--rule); padding: 8px; text-align: left; vertical-align: top; white-space: nowrap; }
.counts tr:last-child td { border-bottom: 0; }
.counts th { color: var(--ink-3); font-weight: 500; font-size: 13px; }
.counts .addr { display: block; font: 12px var(--font-mono); color: var(--ink-3); }
.pagelink { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
/* Findings with Brainwaves, for a named maintainer: the read and the plan on the left, Brainwaves
   on the right at 38% of the width and never under 420px. While the brain is being taught, the
   read and what fed it belong side by side. Below 1,100px the column stacks underneath. */
.view.findings-view { overflow-y: auto; }
.fw.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(420px, 38%); gap: 24px; align-items: start; max-width: 1600px; margin: 0 auto; }
.fw.two .why-in { max-width: none; margin: 0; }
.fw-feed { font-size: 14px; display: grid; gap: 12px; }
.fw-feed > .muted { margin: -4px 0 4px; }
#bw-list { display: grid; gap: 12px; }
.bw.card { padding: 14px 16px; }
.bw summary { cursor: pointer; list-style: none; display: grid; gap: 2px; }
.bw summary::-webkit-details-marker { display: none; }
.bw-who { font-weight: 600; }
.bw-when { color: var(--ink-3); font-size: 13px; }
.bw-counts { font: 12px var(--font-mono); color: var(--ink-2); margin-top: 4px; }
.bw h4 { font: 600 12px var(--font-cond); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); margin: 14px 0 6px; }
.bw ul { padding-left: 18px; margin: 0; display: grid; gap: 6px; }
.bw-about { margin: 12px 0 0; }
.bw-k { font: 600 12px var(--font-cond); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin: 10px 0 4px; }
.bw-q { margin-top: 14px; }
.bw-q summary { color: var(--ink-2); font-size: 13px; text-decoration: underline; text-underline-offset: 2px; display: inline; }
.wp-title { font: 600 24px/1.2 var(--font-cond); margin: 0 0 12px; }
.md.wp h2 { display: block; font: 600 18px/1.3 var(--font-cond); margin: 22px 0 8px; }
@media (max-width: 1100px) {
  .fw.two { grid-template-columns: minmax(0, 1fr); }
}

/* The Guide: the contents down the left, every document and its sections, the page on the
   right in a readable column. On a narrow screen the contents sit above the page. */
.view.docs-view { overflow-y: auto; padding: 24px 16px 60px; }
.docs { display: grid; grid-template-columns: 240px minmax(0, 820px); gap: 40px; max-width: 1140px; margin: 0 auto; align-items: start; }
.docs-nav { position: sticky; top: 0; display: grid; gap: 2px; font-size: 14px; }
.doc-link { text-align: left; background: none; border: 0; border-left: 2px solid transparent; padding: 7px 12px; font: 600 13px/1.3 var(--font-cond); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.doc-link.on { color: var(--ink); border-left-color: var(--accent); }
.docs-nav ul { list-style: none; margin: 2px 0 10px; padding: 0 0 0 14px; display: grid; gap: 2px; }
.docs-nav a { color: var(--ink-2); text-decoration: none; display: block; padding: 3px 0; line-height: 1.35; }
.docs-nav a:hover { color: var(--accent); }
.doc-title { font: 600 32px/1.15 var(--font-cond); margin: 0 0 18px; }
.md.doc { font-size: 16px; }
.md.doc h2 { display: block; font: 600 22px/1.25 var(--font-cond); margin: 34px 0 10px; scroll-margin-top: 16px; }
.md.doc p { font-size: 16px; line-height: 1.65; color: var(--ink); margin: 0 0 12px; }
.md.doc ul { gap: 8px; margin: 0 0 12px; }
@media (max-width: 860px) {
  .docs { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .docs-nav { position: static; border-bottom: 1px solid var(--rule); padding-bottom: 12px; }
}

/* The brain: every page by what it is, counts across the top, open questions by who can answer.
   A page opens in place, the page on the left and what it connects to on the right. */
/* The scrollbar's room is always kept, so a sub-view long enough to scroll does not shift the page
   sideways against one that is not. */
.view.brain-view, .view.brainpage-view { overflow-y: auto; overflow-x: hidden; scrollbar-gutter: stable; }
.bpage { max-width: 1180px; margin: 0 auto; padding: 22px 30px 60px; }
.bpage h1 { font: 600 30px/1.15 var(--font-cond); margin: 0 0 12px; }
.brtop { display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap; min-height: 96px; }
.brtabs { display: inline-flex; border: 1px solid var(--rule); border-radius: 999px; background: var(--surface); padding: 3px; gap: 2px; }
.brtabs button { background: none; border: 0; border-radius: 999px; padding: 6px 14px; font: 600 13px var(--font-cond); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.brtabs button.on { background: var(--accent); color: var(--accent-ink); }
.brstats { display: flex; flex-wrap: wrap; gap: 18px; margin-left: auto; }
.brstat { display: grid; font-size: 12px; color: var(--ink-3); line-height: 1.3; }
.brstat b { font: 600 22px/1.1 var(--font-cond); color: var(--ink); }
.br-lede { margin: 18px 0 8px; max-width: 760px; }
.bgroup h2 { font: 600 18px/1.3 var(--font-cond); margin: 26px 0 10px; }
.bcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.bcard { display: grid; gap: 4px; padding: 14px 16px; }
.btitle { font-weight: 600; }
.bmeta { font-size: 12px; color: var(--ink-3); }
.bblurb { font-size: 14px; color: var(--ink-2); line-height: 1.45; }
.bp { display: grid; grid-template-columns: minmax(0, 1fr) 340px; min-height: 100%; }
.bp-main { padding: 22px 30px 60px; max-width: 880px; width: 100%; margin: 0 auto; }
.bp-main > .link { margin-bottom: 14px; display: inline-block; }
.bp-side { border-left: 1px solid var(--rule); background: var(--surface); padding: 22px 22px 40px; }
.bp-side h3 { font: 600 13px var(--font-cond); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); margin: 18px 0 8px; }
.bp-side .plain { font-size: 14px; }
.md.doc a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 900px) {
  .bpage { padding: 16px 14px 40px; }
  .brstats { margin-left: 0; }
  .bp { grid-template-columns: minmax(0, 1fr); }
  .bp-side { border-left: 0; border-top: 1px solid var(--rule); }
}

/* What Leo is doing between the words, while a long turn runs. */
.msg .working { display: block; margin-top: 10px; font-size: 13px; color: var(--ink-3); font-style: italic; }

/* The board. One frame: the heading and controls stay put; four columns below that scroll with
   the page; details open in a panel on the right. One column of columns on a phone. */
.view.board-view { overflow-y: auto; overflow-x: hidden; scrollbar-gutter: stable; position: relative; }
.bdpage { max-width: 1400px; margin: 0 auto; padding: 22px 30px 60px; }
.bdtop { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.bdtop h1 { font: 600 30px/1.15 var(--font-cond); margin: 0 0 4px; }
.bdgoal { margin: 0; max-width: 720px; }
.bdcontrols { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
/* The colour of a card that is one of their next three, and the line that says what it means. */
.bdkey { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; font-size: 13px; color: var(--ink-2); }
.bdkeymark { width: 14px; height: 14px; border-radius: 4px; background: var(--next); border: 1px solid var(--next-edge); border-left-width: 4px; flex: none; }
.bdinits { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.bdinit { text-align: left; display: grid; gap: 6px; padding: 12px 14px; border: 1px solid var(--rule); border-radius: 12px; background: var(--surface); color: var(--ink); }
.bdinit:hover { border-color: var(--accent); }
.bdih { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.bdmeta { font-size: 12px; color: var(--ink-3); }
.std { font: 700 9.5px/1 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; padding: 3px 6px; border-radius: 4px; white-space: nowrap; }
.std.rec { background: var(--ok-soft); color: var(--ok); }
.std.early { background: var(--warn-soft); color: var(--warn); }
.std.prop, .std.size { background: var(--sunk); color: var(--ink-2); }
.std.build { background: var(--accent-soft); color: var(--accent); }
/* The change a ticket belongs to, as a tag: the whole name, cut with dots when it will not fit. */
.std.for { max-width: 100%; white-space: normal; background: var(--sunk); color: var(--ink-2); line-height: 1.3; }
.bdcols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 22px; align-items: start; }
.bdcol { background: var(--sunk); border-radius: 12px; padding: 10px; min-height: 160px; }
.bdcol .ph { margin: 2px 4px 10px; }
.bdcol.over { outline: 2px dashed var(--accent); outline-offset: -2px; }
.bdcards { display: grid; gap: 8px; }
.bdcard { display: grid; align-content: start; gap: 6px; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 10px; background: var(--surface); cursor: grab; font-size: 13.5px; }
.bdcard:hover { border-color: var(--accent); }
.bdcard.mine { border-left: 3px solid var(--accent); }
.bdcard.dragging { opacity: .5; }
.bdcard.next { background: var(--next); border-color: var(--next-edge); border-left: 4px solid var(--next-edge); }
.bdcard.next .std.early, .bdcard.next .std.for { background: var(--surface); }
.bdtitle { font-weight: 600; font-size: 14px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.bdfor { font: 600 11px/1.3 var(--font-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--accent); }
.bdtags { display: flex; gap: 4px; flex-wrap: wrap; align-items: flex-start; }
.bdtags:empty { display: none; }
.bdadd input { width: 100%; margin-top: 8px; border: 1px dashed var(--rule); border-radius: 8px; padding: 8px 10px; font: 13.5px var(--font-sans); background: transparent; color: var(--ink); }
.bddrawer { position: fixed; top: 54px; right: 0; bottom: 0; width: min(560px, 100vw); overflow-y: auto; background: var(--surface); border-left: 1px solid var(--rule); box-shadow: -8px 0 30px rgba(0, 0, 0, .12); padding: 18px 20px 40px; z-index: 12; display: grid; align-content: start; gap: 12px; }
.bddrawer label { display: grid; gap: 4px; font-size: 13px; color: var(--ink-2); }
.bddrawer input, .bddrawer textarea, .bddrawer select { width: 100%; min-width: 0; border: 1px solid var(--rule); border-radius: 8px; padding: 8px 10px; font: 14px var(--font-sans); background: var(--surface); color: var(--ink); }
.bdclose { justify-self: end; }
.bdrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.bdrow label { min-width: 0; }
.bdmove { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.bdmove .pbutton { margin: 0; }
.bdmove .pbutton.on { border-color: var(--accent); background: var(--accent-soft); }
.bdowner { margin: 0; font-size: 14px; }
.bdbuild { display: grid; gap: 8px; padding: 10px 12px; border-radius: 10px; background: var(--accent-soft); }
.bdcheck { display: flex !important; align-items: center; gap: 8px; }
.bdcheck input { width: auto; flex: 0 0 auto; }
.bdresult { margin: 0; font-size: 13px; }
.bdbrief { white-space: pre-wrap; font: 12.5px/1.5 var(--font-mono); }
.note.bad { color: var(--rec); }
@media (max-width: 900px) {
  .bdpage { padding: 16px 14px 40px; }
  .bdcols { grid-template-columns: minmax(0, 1fr); }
  .bddrawer { top: 0; z-index: 20; }
}

/* Activity, maintainers only. The table scrolls sideways inside its card on a phone. */
.act-table { overflow-x: auto; padding: 0; }
.counts th.n, .counts td.n { text-align: right; font-variant-numeric: tabular-nums; }
.act-alert { background: color-mix(in srgb, var(--danger, #c0392b) 9%, var(--surface)); border: 1px solid color-mix(in srgb, var(--danger, #c0392b) 35%, transparent); border-radius: 10px; padding: 12px 16px; margin: 0 0 18px; }
.act-alert ul { margin: 8px 0; padding-left: 18px; }
.act-alert p { margin: 0; font-size: 13px; color: var(--ink-3); }

/* A file waiting to go with the next message, inside the box, until Send. */
.staged { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--rule); border-block: 0; padding: 6px 16px; font-size: 14px; }
/* Messages sent while Leo is still answering, waiting their turn inside the box. */
.queued { background: var(--surface); border: 1px solid var(--rule); border-block: 0; padding: 6px 16px; font-size: 13.5px; }
.queued .qhead { display: block; font-size: 11.5px; color: var(--ink-3); margin-bottom: 2px; }
.queued .qrow { display: flex; align-items: center; gap: 10px; padding: 2px 0; }
.queued .qrow span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.staged img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; border: 1px solid var(--rule); }
.staged span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The accountable board: who holds a ticket, since when, why, and its trail. */
.std.nom { background: var(--accent-soft); color: var(--accent); }
.bdreason { margin: 0; padding: 8px 12px; border-left: 3px solid var(--accent); background: var(--sunk); border-radius: 0 8px 8px 0; font-size: 13.5px; line-height: 1.45; }
.bdpass { display: grid; gap: 8px; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 10px; }
.bdpass .ph { margin: 0; }
.bdpass .pbutton { margin: 0; }
.bdtrail summary { cursor: pointer; font-weight: 600; font-size: 13.5px; }
.bdtrail ol { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 6px; font-size: 13px; line-height: 1.4; }

/* Three questions on the panel, then the counts, never the list. */
.psource { margin: 0 0 10px; padding: 8px 10px; border: 1px dashed var(--accent); border-radius: 8px; font-size: 12.5px; color: var(--ink-2); }
.pmore { margin: 4px 0 8px; font-size: 12.5px; color: var(--ink-3); }
.qopen { display: block; margin: 2px 0 8px; font-size: 13px; }

/* Your questions, at your own pace. */
.qpage { max-width: 760px; margin: 0 auto; padding: 24px 20px 60px; }
.qpage h1 { margin: 10px 0 4px; }
.qsource { display: grid; gap: 2px; padding: 10px 12px; margin: 0 0 8px; border: 1px solid var(--rule); border-left: 3px solid var(--accent); border-radius: 8px; background: var(--surface); font-size: 14px; }
.qsource span { color: var(--ink-2); font-size: 13.5px; }
.qpace { margin: 16px 0 12px; align-items: center; flex-wrap: wrap; }
.qpace .muted { padding: 0 8px; font-size: 13px; }
.qitem { padding: 12px 0; border-bottom: 1px solid var(--rule); display: grid; gap: 6px; }
.qtext { margin: 0; font-size: 15px; line-height: 1.45; }
.qitem textarea { width: 100%; border: 1px solid var(--rule); border-radius: 8px; padding: 8px 10px; font: 14px var(--font-sans); background: var(--surface); color: var(--ink); resize: vertical; }
.qnot { justify-self: start; font-size: 13px; }
#q-form .dialog-row { margin-top: 16px; }

/* The Guide's documents wrap as tabs on a phone. */
@media (max-width: 860px) {
  .docs-nav { display: flex; flex-wrap: wrap; gap: 6px; }
  .docs-nav .doc-link { border: 1px solid var(--rule); border-radius: 999px; padding: 5px 12px; }
  .docs-nav .doc-link.on { border-color: var(--accent); }
  .docs-nav ul { display: none; }
}

/* The Viewer, on the Pages tab: the places Leo can read on the left, folded into folders, and the
   document on the right. Each side scrolls on its own. Below 900px the files sit above the
   document, in a box that scrolls. */
.viewer { flex: 1; display: grid; grid-template-columns: clamp(240px, 22vw, 360px) minmax(0, 1fr); min-height: 0; }
.vw-side { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; border-right: 1px solid var(--rule); background: var(--surface); font-size: 14px; }
.vw-side input { margin: 12px 14px 8px; padding: 7px 10px; border: 1px solid var(--rule); border-radius: 8px; background: var(--ground); color: var(--ink); font: inherit; min-width: 0; }
.vw-tree { overflow-y: auto; padding: 0 8px 30px; }
.vw-tree ul { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 1px solid var(--rule); margin-left: 9px; }
.vw-tree > ul { padding: 0; border: 0; margin: 0; }
.vw-tree button { display: flex; align-items: baseline; gap: 6px; width: 100%; text-align: left; background: none; border: 0; border-radius: 6px; padding: 4px 8px; font: inherit; color: var(--ink-2); line-height: 1.35; overflow-wrap: anywhere; }
.vw-tree button:hover { background: var(--sunk); color: var(--ink); }
.vw-tree button.on { background: var(--accent); color: var(--accent-ink); }
.vw-tree .vf::before { content: ""; flex: 0 0 6px; width: 6px; height: 6px; margin-right: 3px; align-self: center; border-right: 1.5px solid var(--ink-3); border-bottom: 1.5px solid var(--ink-3); transform: rotate(-45deg); transition: transform .12s; }
.vw-tree .vf.open::before { transform: rotate(45deg); }
.vw-tree button.on::before { border-color: currentColor; }
.vw-tree .vsrc { font-weight: 600; color: var(--ink); }
.vw-tree .vnote { margin-left: auto; font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }
.vw-tree .vfile { padding-left: 24px; }
.vw-tree .vhit { padding-left: 8px; display: grid; gap: 0; }
.vw-tree .vhit small { color: var(--ink-3); font-size: 11.5px; }
.vw-tree .vmsg { padding: 4px 8px 4px 24px; color: var(--ink-3); font-size: 13px; }
.vw-main { overflow-y: auto; padding: 18px 34px 70px; min-width: 0; }
.vw-main > * { max-width: 860px; margin-left: auto; margin-right: auto; }
.vw-crumb { font-size: 13px; color: var(--ink-3); margin: 0 auto 14px; overflow-wrap: anywhere; }
.vw-crumb a { color: var(--ink-3); }
.vdoc { font-size: 16px; line-height: 1.65; color: var(--ink); overflow-wrap: anywhere; }
.vdoc h1 { font: 600 30px/1.2 var(--font-cond); margin: 0 0 16px; }
.vdoc h2 { font: 600 23px/1.25 var(--font-cond); margin: 32px 0 10px; }
.vdoc h3 { font: 600 18px/1.3 var(--font-cond); margin: 26px 0 8px; }
.vdoc h4, .vdoc h5, .vdoc h6 { font: 600 16px/1.3 var(--font-sans); margin: 22px 0 6px; }
.vdoc p, .vdoc ul, .vdoc ol, .vdoc blockquote, .vdoc pre, .vdoc table { margin: 0 0 14px; }
.vdoc ul, .vdoc ol { padding-left: 24px; }
.vdoc li { margin: 4px 0; }
.vdoc a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.vdoc a.dead { color: var(--ink-3); text-decoration-style: dotted; }
.vdoc img { max-width: 100%; height: auto; border-radius: 6px; }
.vdoc blockquote { border-left: 3px solid var(--rule); padding: 2px 0 2px 16px; color: var(--ink-2); }
.vdoc code { font: 13.5px var(--font-mono); background: var(--sunk); border-radius: 4px; padding: 1px 5px; }
.vdoc pre { background: var(--sunk); border-radius: 8px; padding: 14px 16px; overflow-x: auto; font: 13.5px/1.5 var(--font-mono); }
.vdoc pre code { background: none; padding: 0; }
.vdoc hr { border: 0; border-top: 1px solid var(--rule); margin: 26px 0; }
.vdoc table { border-collapse: collapse; font-size: 14px; display: block; overflow-x: auto; }
.vdoc th, .vdoc td { border: 1px solid var(--rule); padding: 6px 10px; text-align: left; vertical-align: top; }
.vdoc th { background: var(--sunk); font-weight: 600; }
.vprops { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 16px; padding: 12px 16px; margin-bottom: 20px; border: 1px solid var(--rule); border-radius: 10px; background: var(--surface); font-size: 13.5px; }
.vprops dt { color: var(--ink-3); }
.vprops dd { margin: 0; overflow-wrap: anywhere; }
.vraw { white-space: pre-wrap; overflow-wrap: anywhere; font: 13.5px/1.55 var(--font-mono); background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: 16px 18px; margin: 0 auto; }
.vpdf { width: 100%; max-width: none; height: calc(100vh - 220px); border: 1px solid var(--rule); border-radius: 10px; }
@media (max-width: 900px) {
  .viewer { display: block; }
  .vw-side { border-right: 0; border-bottom: 1px solid var(--rule); }
  .vw-tree { max-height: 38vh; }
  .vw-main { overflow: visible; padding: 16px 14px 60px; }
}
/* Which repositories are shared with Leo, under GitHub on the Connections tab. */
.sshared { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--rule); font-size: 14px; display: grid; gap: 4px; }
.sshared p { margin: 0 0 4px; }
.sshared label { display: flex; align-items: baseline; gap: 8px; }