/*
 * The Fortyone portal's look: Paper's colours on Control room's components (alex, 2026-10-17).
 *
 * One set of tokens drives both themes. Every colour token holds its light and its dark value in one
 * light-dark() pair, so the two themes cannot drift apart and nothing is derived by inversion: each
 * value was chosen and its contrast checked (test/styleguide.test.js). Which value applies is decided
 * by color-scheme alone:
 *
 *   no data-theme on <html>       follows the computer's setting (also what happens without JavaScript)
 *   <html data-theme="light">     light, whatever the computer says
 *   <html data-theme="dark">      dark
 *
 * theme.js sets data-theme before first paint from what the person chose last.
 *
 * Contents: fonts · tokens · base · frame (top bar, tabs, page) · components · style guide.
 */

/* ---------- fonts: self-hosted, Latin first; Latin Extended only when a page needs it ---------- */
@font-face {
  font-family: 'Geist'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(fonts/geist-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(fonts/geist-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 500; font-display: swap;
  src: url(fonts/jetbrains-mono-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 500; font-display: swap;
  src: url(fonts/jetbrains-mono-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- tokens ---------- */
:root {
  color-scheme: light dark;

  /* Surfaces. Light sits on the report's paper; dark on Control room's night. */
  --canvas:      light-dark(#F8F7F2, #0A0B0D);   /* the page */
  --surface:     light-dark(#FFFEFA, #111317);   /* a card, a menu */
  --surface-2:   light-dark(#F2F0E8, #16181D);   /* a tile inside a card; hover */
  --surface-3:   light-dark(#E9E6DC, #1D2026);   /* pressed; a chip */
  --aside:       light-dark(#F2F0E8, #131519);   /* a shade apart; the right-hand panel's until it went (round 4) */
  --bar:         light-dark(rgba(248,247,242,.88), rgba(10,11,13,.84));
  --scrim:       light-dark(rgba(26,25,23,.2), rgba(0,0,0,.6));

  /* Lines. --line-strong is the one with 3:1: the edge of a field, a checkbox. */
  --line:        light-dark(#E9E6DC, #1F2228);
  --line-2:      light-dark(#DDD9CD, #2A2E36);
  --line-3:      light-dark(#CFCABB, #383D47);
  --line-strong: light-dark(#8E8A7E, #646B78);

  /* Ink. Every text token reads at 4.5:1 on every surface above; --icon is for icons only (3:1). */
  --text:        light-dark(#1A1917, #EDEEF0);
  --text-2:      light-dark(#3D3C38, #BEC3CB);
  --text-3:      light-dark(#66645C, #9AA0AA);
  --icon:        light-dark(#87847A, #737A86);

  /* The terracotta: the report's accent, Paper's in light, in place of Control room's blue in dark. */
  --accent:      #CC785C;                                     /* marks, bars, the pulse: never text */
  --accent-text: light-dark(#9E4F33, #E59A7E);
  --accent-bg:   light-dark(#FBF2EC, rgba(204,120,92,.09));   /* the band that needs you */
  --accent-soft: light-dark(#F7E9E1, rgba(204,120,92,.15));   /* a pill */
  --accent-line: light-dark(#EBD2C4, rgba(204,120,92,.34));
  --accent-edge: light-dark(#E0BBA8, rgba(204,120,92,.55));
  --primary:       light-dark(#9E4F33, #CC785C);
  --primary-hover: light-dark(#8C4529, #D98B70);
  --on-primary:    light-dark(#FFFFFF, #160A06);
  --focus:       light-dark(#9E4F33, #E59A7E);

  --ok:          light-dark(#3E6A47, #8CC596);
  --ok-bg:       light-dark(#EAF1E7, rgba(140,197,150,.10));
  --ok-line:     light-dark(#C3D6C0, rgba(140,197,150,.32));
  --danger:      light-dark(#B3261E, #F47C74);
  --danger-bg:   light-dark(#FBEBE8, rgba(244,124,116,.10));
  --danger-line: light-dark(#EDC1BB, rgba(244,124,116,.36));
  --warn:        light-dark(#855A12, #E2B457);                  /* near an edge: a server's memory or disk */
  --warn-bg:     light-dark(#FBF3E2, rgba(226,180,87,.10));
  --warn-line:   light-dark(#EBD5A8, rgba(226,180,87,.34));
  /* A chart's series (views/charts.js), in a fixed order: the accent, then a blue; the pair checked for colour blindness
     and contrast against both themes' cards (the dataviz validator: CVD ΔE 20.7 light, 20.9 dark). */
  --viz-1:       var(--accent);
  --viz-2:       light-dark(#2A78D6, #3987E5);

  /* People's initials: six hues from the report's palette, deep on paper, light at night. */
  --av-1: light-dark(#9E4F33, #E8A487);
  --av-2: light-dark(#4F6B50, #9CC59F);
  --av-3: light-dark(#6B5A8E, #BBA8E8);
  --av-4: light-dark(#4A5D78, #9DB4D8);
  --av-5: light-dark(#2F6B6B, #86CFCB);
  --av-6: light-dark(#7A5A1C, #E0C27A);
  --on-av: light-dark(#FFFFFF, #0B0C0E);

  /* The terminal is dark in both themes: warm on paper, night at night. */
  --term-bg:     light-dark(#1F1E1B, #07080A);
  --term-bar:    light-dark(#2A2925, #111317);
  --term-line:   light-dark(#34332E, #1F2228);
  --term-text:   #E9E7E0;
  --term-dim:    #A8A59B;
  --term-accent: #E8A487;
  --term-ok:     #8FCB97;

  /* Elevation. Dark leans on a hairline of light at the top edge, as Control room did. */
  --edge:  inset 0 1px 0 light-dark(rgba(255,255,255,.7), rgba(255,255,255,.03));
  --sh-1:  0 1px 1px light-dark(rgba(26,25,23,.04), rgba(0,0,0,.35)), 0 1px 3px light-dark(rgba(26,25,23,.05), rgba(0,0,0,.25));
  --sh-2:  0 1px 2px light-dark(rgba(26,25,23,.05), rgba(0,0,0,.4)), 0 12px 30px -16px light-dark(rgba(26,25,23,.22), rgba(0,0,0,.85));
  --sh-3:  0 2px 6px light-dark(rgba(26,25,23,.06), rgba(0,0,0,.4)), 0 28px 64px -20px light-dark(rgba(26,25,23,.30), rgba(0,0,0,.9));

  /* Type: one sans everywhere; mono only for what is typed (project names, codes, commands). */
  --font: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-1: 14px;   /* meta, labels: the floor */
  --fs-2: 15px;   /* body and controls */
  --fs-3: 16px;   /* a card's title */
  --fs-4: 18px;   /* a lead line */
  --fs-5: 20px;   /* the band's title */
  --fs-6: 24px;
  --fs-7: 28px;   /* a page's title */
  --fs-8: 34px;   /* a report's title */
  --lh-tight: 1.2;
  --lh: 1.45;
  --lh-read: 1.6;

  /* Space on a 4px step; radius; the frame. */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px;
  --r-1: 6px; --r-2: 8px; --r-3: 12px; --r-full: 999px;
  --page-max: 1360px;
  --gutter: 40px;
  --bar-h: 56px;

  /* Motion: quick, eased out, and none at all when the computer asks for less. */
  --ease: cubic-bezier(.2,.7,.2,1);
  --ease-in: cubic-bezier(.5,0,.75,0);
  --t-fast: 120ms;
  --t: 180ms;
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t: 0ms; }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--canvas);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-2);
  line-height: var(--lh);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, blockquote, fieldset, pre { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3, h4 { font-weight: 600; letter-spacing: -.012em; line-height: var(--lh-tight); text-wrap: balance; }
p { text-wrap: pretty; }
fieldset { border: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
a { color: inherit; text-decoration: none; }
p a, .link { color: var(--accent-text); text-decoration: underline; text-decoration-color: var(--accent-edge); text-underline-offset: 3px; text-decoration-thickness: 1px; }
p a:hover, .link:hover { text-decoration-color: currentColor; }
b, strong { font-weight: 600; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
svg { flex: none; }
img { max-width: 100%; }
code, kbd, samp, pre, .mono { font-family: var(--mono); font-size: .93em; font-weight: 400; letter-spacing: 0; font-variant-ligatures: none; }
::selection { background: rgba(204,120,92,.28); }
[hidden] { display: none !important; }

/* Focus: one ring, the terracotta, 3:1 on every surface in both themes. */
:focus { outline: none; }
:focus-visible, .is-focus {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: var(--sp-4); top: -100px; z-index: 100;
  padding: var(--sp-2) var(--sp-4); border-radius: var(--r-2);
  background: var(--surface); color: var(--text); box-shadow: var(--sh-3);
}
.skip:focus { top: var(--sp-3); }

.icon { width: 16px; height: 16px; display: block; color: var(--icon); }
.icon-lg { width: 20px; height: 20px; }
.muted { color: var(--text-3); }
.meta { font-size: var(--fs-1); color: var(--text-3); }
.sep { color: var(--icon); padding: 0 .35em; }
.num { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.mt-3 { margin-top: var(--sp-3); } .mt-4 { margin-top: var(--sp-4); } .mt-6 { margin-top: var(--sp-6); }

/* ---------- frame: the top bar, full width ---------- */
.topbar {
  position: sticky; top: 0; z-index: 30;
  height: var(--bar-h);
  background: var(--bar);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--line-2);
}
.topbar-inner {
  height: 100%;
  max-width: calc(var(--page-max) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
  /* Start, sections, end: the two sides share the room equally, so the sections sit in the bar's centre whatever the
     organisation's name (alex, 2026-10-20); a name too long for its side ends in an ellipsis. */
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--sp-2);
}
.topbar-start { grid-column: 1; display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.brand {
  display: inline-flex; align-items: center; gap: 9px;
  height: 36px; padding: 0 6px; margin-left: -6px; border-radius: var(--r-2);
  font-size: var(--fs-3); font-weight: 600; letter-spacing: -.015em; color: var(--text);
}
/* Appollo41's mark in the text's colour, black on paper and light at night, as appollo41.com has it (alex, 2026-10-18). */
.brand svg { width: 12px; height: 21px; color: var(--text); }
.topbar-slash { width: 14px; height: 24px; color: var(--line-3); margin: 0 4px 0 6px; }

/* A menu that opens without JavaScript: <details>. ui.js closes it on Escape and on a click outside. */
.menu { position: relative; }
.menu > summary { list-style: none; cursor: pointer; }
.menu > summary::-webkit-details-marker { display: none; }
.menu-pop {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 40;
  min-width: 248px; padding: 6px;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: 10px;
  box-shadow: var(--sh-3), var(--edge);
}
.menu-pop.end { left: auto; right: 0; }
.menu[open] > .menu-pop { animation: pop var(--t) var(--ease) both; }
@keyframes pop { from { opacity: 0; transform: translateY(-4px) scale(.985); } }
.menu-pop.is-static { position: static; animation: none; }
.menu-head { padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin: 0 -6px 6px; padding-left: 16px; padding-right: 16px; }
.menu-head b { display: block; font-weight: 600; }
.menu-head span { font-size: var(--fs-1); color: var(--text-3); }
.menu-label { padding: 8px 10px 4px; font-size: var(--fs-1); color: var(--text-3); }
.menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  min-height: 36px; padding: 0 10px; border: 0; border-radius: var(--r-1);
  background: none; text-align: left; font-size: var(--fs-2); color: var(--text);
}
.menu-item:hover, .menu-item.is-hover { background: var(--surface-2); }
.menu-item:focus-visible { outline-offset: -2px; }
.menu-item[aria-current="true"] { font-weight: 500; }
.menu-item .role { margin-left: auto; font-size: var(--fs-1); color: var(--text-3); }
.menu-item .check { width: 16px; display: grid; place-items: center; color: var(--accent-text); }
.menu-sep { height: 1px; background: var(--line); margin: 6px -6px; border: 0; }
.menu form { margin: 0; }

.switcher > summary {
  display: flex; align-items: center; gap: 10px;
  height: 40px; padding: 0 8px 0 6px; border-radius: var(--r-2);
  transition: background var(--t-fast);
}
.switcher > summary:hover, .switcher > summary.is-hover, .switcher[open] > summary { background: var(--surface-2); }
.org-mark {
  width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; flex: none;
  background: var(--text); color: var(--canvas);
  font-size: 14px; font-weight: 700; line-height: 1; letter-spacing: -.02em;
}
.org-name { font-size: var(--fs-2); font-weight: 600; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.role-tag {
  display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: var(--r-1);
  font-size: var(--fs-1); font-weight: 500; color: var(--text-2); white-space: nowrap; line-height: 1;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2);
}
.switcher .updown { width: 16px; height: 16px; color: var(--icon); }

.sections { grid-column: 2; display: flex; align-self: stretch; }
.sections a {
  position: relative; display: flex; align-items: center; height: 100%;
  padding: 0 12px; font-size: var(--fs-2); font-weight: 500; color: var(--text-3);
  transition: color var(--t-fast);
}
.sections a:hover, .sections a.is-hover { color: var(--text); }
.sections a:focus-visible, .sections a.is-focus { outline-offset: -10px; border-radius: var(--r-2); }
.sections a[aria-current="page"] { color: var(--text); }
.sections a[aria-current="page"]::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px;
  border-radius: 2px; background: var(--accent);
}
.topbar-end { grid-column: 3; justify-self: end; margin-left: auto; display: flex; align-items: center; gap: var(--sp-3); }
.person > summary { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; }
.person > summary:hover .avatar, .person[open] > summary .avatar { box-shadow: 0 0 0 3px var(--surface-3); }

/* The theme switch: three radios drawn as one control. Hidden until theme.js can remember the choice. */
.theme-switch { padding: 4px 10px 8px; }
.theme-switch legend { font-size: var(--fs-1); color: var(--text-3); padding: 4px 0 6px; float: left; width: 100%; }
.seg {
  clear: both; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px;
  padding: 3px; border-radius: var(--r-2); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line);
}
.seg label {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 6px;
  height: 30px; padding: 0 10px; border-radius: var(--r-1);
  font-size: var(--fs-1); font-weight: 500; color: var(--text-2); cursor: pointer; white-space: nowrap;
}
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg label:hover { color: var(--text); }
.seg label:has(input:checked) { background: var(--surface); color: var(--text); box-shadow: var(--sh-1), inset 0 0 0 1px var(--line-2); }
.seg label:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 1px; }
.seg .icon { width: 15px; height: 15px; color: currentColor; }

/* Tabs under the bar, for a page with its own sections. */
.tabs { border-bottom: 1px solid var(--line-2); background: var(--canvas); }
.tabs-inner {
  max-width: calc(var(--page-max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter);
  display: flex; gap: var(--sp-1); height: 46px;
}
.tabs a, .tabs .tab {
  position: relative; display: flex; align-items: center; gap: 8px; height: 100%;
  padding: 0 12px; margin-left: -12px; margin-right: 12px;
  font-size: var(--fs-2); font-weight: 500; color: var(--text-3);
}
.tabs a:hover, .tabs a.is-hover { color: var(--text); }
.tabs a:focus-visible, .tabs a.is-focus { outline-offset: -6px; border-radius: var(--r-2); }
.tabs a[aria-current="page"] { color: var(--text); }
.tabs a[aria-current="page"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--text); }
.tabs .tab[aria-disabled="true"] { color: var(--text-3); opacity: .55; cursor: default; }
.count {
  display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px;
  border-radius: var(--r-full); background: var(--surface-3); color: var(--text-2);
  font-size: 14px; font-weight: 500; line-height: 1;
}

/* The page */
.page {
  max-width: calc(var(--page-max) + 2 * var(--gutter));
  margin: 0 auto; padding: var(--sp-8) var(--gutter) var(--sp-16);
}
.page-head { display: flex; align-items: flex-end; gap: var(--sp-6); margin-bottom: var(--sp-6); }
.page-head-text { min-width: 0; flex: 1; }
.page-kicker { font-size: var(--fs-1); color: var(--text-3); margin-bottom: 6px; }
.page-title { font-size: var(--fs-7); font-weight: 600; letter-spacing: -.025em; line-height: 1.15; }
.page-context {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 10px;
  font-size: var(--fs-2); color: var(--text-2);
}
.page-context .icon { color: var(--icon); }
.page-actions { display: flex; align-items: center; gap: var(--sp-2); flex: none; }

.crumbs { display: flex; align-items: center; gap: 6px; font-size: var(--fs-2); color: var(--text-3); margin-bottom: 10px; }
.crumbs li { display: flex; align-items: center; gap: 6px; }
.crumbs li + li::before { content: ""; width: 6px; height: 6px; border-right: 1.5px solid var(--icon); border-top: 1.5px solid var(--icon); transform: rotate(45deg); margin: 0 6px 0 2px; }
.crumbs a:hover { color: var(--text); }
.crumbs [aria-current="page"] { color: var(--text); font-weight: 500; }

.grid-main { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: var(--sp-5); align-items: start; }
.grid-report { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: var(--sp-8); align-items: start; }
.stack { display: flex; flex-direction: column; gap: var(--sp-5); min-width: 0; }
.stack-sm { display: flex; flex-direction: column; gap: var(--sp-3); }
/* A home's cards (views/home.js homeGrid): a grid, every card as wide as the others and a row's as tall; three across
   where there are three, else two (alex, 2026-10-22: "in 2 columns or maybe even 3"), two then one as the page narrows. */
.home-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }
.home-grid.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .home-grid.is-three { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .home-grid, .home-grid.is-three { grid-template-columns: minmax(0, 1fr); } }

/* Onboarding's path on home (views/home.js pathCard): its steps across, each done, next or to come; one under another on a phone. */
.path { margin-bottom: var(--sp-5); }
.path-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); counter-reset: none; }
.path-step { display: flex; gap: 12px; padding: 14px 16px 16px; min-width: 0; }
.path-step + .path-step { border-left: 1px solid var(--line); }
.path-step.is-next { background: var(--accent-bg); }
.path-mark { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: var(--fs-1); font-weight: 600; color: var(--text-2); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.path-step.is-next .path-mark { color: var(--accent-text); box-shadow: inset 0 0 0 1.5px var(--accent); }
.path-step.is-done .path-mark { color: var(--surface); background: var(--accent); box-shadow: none; }
.path-mark .icon { width: 15px; height: 15px; stroke-width: 2.4; color: currentColor; }
.path-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.path-title { font-weight: 600; line-height: 26px; }
.path-step.is-done .path-title { color: var(--text-2); }
.path-fact, .path-who { font-size: var(--fs-1); color: var(--text-3); line-height: 1.4; overflow-wrap: anywhere; }
.path-go { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.path-command { align-self: flex-start; font-size: 13px; padding: 3px 8px; border-radius: 6px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2); }
/* One under another on a phone, and on an owner's home, whose column is too narrow for five across. */
@media (max-width: 1100px) {
  .path-steps { grid-template-columns: minmax(0, 1fr); }
  .path-step + .path-step { border-left: 0; border-top: 1px solid var(--line); }
}
.owner-home .path-steps { grid-template-columns: minmax(0, 1fr); }
.owner-home .path-step + .path-step { border-left: 0; border-top: 1px solid var(--line); }
.row { display: flex; align-items: center; gap: var(--sp-2); }
.row-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 36px; padding: 0 14px; border-radius: var(--r-2);
  border: 1px solid transparent; background: none;
  font-size: var(--fs-2); font-weight: 500; line-height: 1; white-space: nowrap; letter-spacing: -.005em;
  text-decoration: none; cursor: pointer; user-select: none; flex: none;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.btn .icon { color: currentColor; opacity: .8; }
.btn:active:not(:disabled):not([aria-disabled="true"]) { transform: translateY(1px); }
.btn-sm { height: 32px; padding: 0 11px; font-size: var(--fs-1); gap: 6px; }
.btn-lg { height: 46px; padding: 0 20px; font-size: var(--fs-3); font-weight: 600; border-radius: 10px; }
.btn-block { display: flex; width: 100%; }

.btn-primary {
  background: var(--primary); color: var(--on-primary);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 1px 2px rgba(140,69,41,.3), 0 8px 18px -10px rgba(140,69,41,.65);
}
.btn-primary .icon { opacity: 1; }
.btn-primary:hover, .btn-primary.is-hover { background: var(--primary-hover); }

.btn-secondary {
  background: light-dark(var(--surface), var(--surface-3)); color: var(--text);
  border-color: var(--line-2); box-shadow: var(--sh-1), var(--edge);
}
.btn-secondary .icon { color: var(--text-3); opacity: 1; }
.btn-secondary:hover, .btn-secondary.is-hover { background: light-dark(#FFFFFF, #23262D); border-color: var(--line-3); }

.btn-quiet { color: var(--text-2); }
.btn-quiet .icon { color: var(--icon); opacity: 1; }
.btn-quiet:hover, .btn-quiet.is-hover { background: var(--surface-2); color: var(--text); }

.btn-danger { color: var(--danger); background: light-dark(var(--surface), transparent); border-color: var(--danger-line); }
.btn-danger .icon { opacity: 1; }
.btn-danger:hover, .btn-danger.is-hover { background: var(--danger-bg); border-color: var(--danger); }

.btn:disabled, .btn[aria-disabled="true"] {
  cursor: not-allowed; box-shadow: none; transform: none;
  background: var(--surface-2); border-color: var(--line); color: var(--text-3);
}
.btn-quiet:disabled, .btn-quiet[aria-disabled="true"] { background: none; border-color: transparent; }
.btn.is-loading, .btn[aria-busy="true"] { cursor: progress; pointer-events: none; }
.btn.is-loading .icon, .btn[aria-busy="true"] .icon { display: none; }
.btn.is-loading::before, .btn[aria-busy="true"]::before {
  content: ""; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent; opacity: .85;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.btn-icon { width: 36px; padding: 0; }
.btn-icon.btn-sm { width: 32px; }

/* ---------- fields ---------- */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field-label { font-size: var(--fs-1); font-weight: 500; color: var(--text-2); }
.field-hint { font-size: var(--fs-1); color: var(--text-3); }
/* What each role does, under its choice (views/people.js roleField): a line a role, its name first. */
.role-says { display: flex; flex-direction: column; gap: 2px; line-height: 1.45; }
.role-says b { font-weight: 500; color: var(--text-2); }
.field-error { display: flex; align-items: flex-start; gap: 6px; font-size: var(--fs-1); color: var(--danger); }
.field-error .icon { color: currentColor; margin-top: 2px; }
.input, .select select, .textarea {
  width: 100%; height: 38px; padding: 0 12px; border-radius: var(--r-2);
  background: light-dark(var(--surface), var(--canvas)); color: var(--text);
  border: 1px solid var(--line-strong); box-shadow: inset 0 1px 1px light-dark(rgba(26,25,23,.04), rgba(0,0,0,.3));
  font-size: var(--fs-2);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.textarea { height: auto; min-height: 84px; padding: 10px 12px; line-height: var(--lh); resize: vertical; display: block; }
.input::placeholder, .textarea::placeholder { color: var(--text-3); opacity: 1; }
.input:hover, .select select:hover, .textarea:hover, .input.is-hover { border-color: var(--text-3); }
.input:focus-visible, .select select:focus-visible, .textarea:focus-visible, .input.is-focus {
  outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px light-dark(rgba(158,79,51,.18), rgba(229,154,126,.22));
}
.input:disabled, .select select:disabled, .textarea:disabled {
  background: var(--surface-2); color: var(--text-3); border-color: var(--line-2); cursor: not-allowed; box-shadow: none;
}
.input[aria-invalid="true"], .select select[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--danger); }
.input[aria-invalid="true"]:focus-visible, .textarea[aria-invalid="true"]:focus-visible { box-shadow: 0 0 0 3px light-dark(rgba(179,38,30,.15), rgba(244,124,116,.2)); }
.select { position: relative; display: block; }
.select select { appearance: none; -webkit-appearance: none; padding-right: 36px; cursor: pointer; }
.select .icon { position: absolute; right: 11px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.field-static { display: flex; align-items: center; height: 38px; font-size: var(--fs-2); color: var(--text); }
.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sp-4); }
.form-actions { display: flex; align-items: center; gap: var(--sp-2); }

/* ---------- the segmented choice: buttons that act when pressed, nothing pre-selected ---------- */
.choice { display: flex; flex-direction: column; gap: 8px; }
.choice-label { font-size: var(--fs-1); color: var(--text-3); }
.choice-options { display: flex; flex-wrap: wrap; gap: 8px; }
.choice-option {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 16px; border-radius: var(--r-2);
  background: light-dark(var(--surface), var(--surface-3)); color: var(--text);
  border: 1px solid var(--accent-edge);
  font-size: var(--fs-2); font-weight: 500; white-space: nowrap;
  box-shadow: 0 1px 2px light-dark(rgba(140,69,41,.10), rgba(0,0,0,.4)), 0 6px 14px -8px light-dark(rgba(140,69,41,.30), rgba(0,0,0,.6)), var(--edge);
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.choice-option:hover, .choice-option.is-hover { background: light-dark(#FFFFFF, #23262D); border-color: var(--accent); }
.choice-option:active { transform: translateY(1px); }
.choice-option.is-new { border-style: dashed; border-color: var(--line-3); background: transparent; box-shadow: none; color: var(--text-2); font-weight: 500; }
.choice-option.is-new .icon { color: var(--icon); }
.choice-option.is-new:hover, .choice-option.is-new.is-hover { border-color: var(--text-3); color: var(--text); }
.choice-option:disabled { cursor: not-allowed; opacity: .5; box-shadow: none; }
.choice-option.is-loading { cursor: progress; border-color: var(--accent); opacity: 1; }
.choice-option.is-loading::before {
  content: ""; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--accent-text); border-right-color: transparent; animation: spin .7s linear infinite;
}
.choice-error { display: flex; align-items: center; gap: 6px; font-size: var(--fs-1); color: var(--danger); }
.choice-error .icon { color: currentColor; }
.choice-inline { flex-direction: row; align-items: center; gap: 12px; }

/* ---------- status pills and tags ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 10px 0 9px;
  border-radius: var(--r-full); font-size: var(--fs-1); font-weight: 500; line-height: 1; white-space: nowrap; flex: none;
  color: var(--text-2); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2);
}
.pill .icon { width: 14px; height: 14px; color: currentColor; }
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.pill-ready    { color: var(--accent-text); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line); }
.pill-ready .dot { background: var(--accent); }
.pill-waiting  { color: var(--accent-text); background: transparent; box-shadow: inset 0 0 0 1px var(--accent-edge); }
.pill-approved { color: var(--ok); background: var(--ok-bg); box-shadow: inset 0 0 0 1px var(--ok-line); }
.pill-signed   { color: var(--ok); background: transparent; box-shadow: inset 0 0 0 1px var(--ok-line); }
.pill-drafting { color: var(--text-2); }
.pill-drafting .icon { animation: spin 1.1s linear infinite; }
.pill-failed   { color: var(--danger); background: var(--danger-bg); box-shadow: inset 0 0 0 1px var(--danger-line); }
.pill-off      { color: var(--text-3); background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); }
.pill-warn     { color: var(--warn); background: var(--warn-bg); box-shadow: inset 0 0 0 1px var(--warn-line); }
.pill-sm { height: 22px; padding: 0 8px; gap: 6px; }

.tag {
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: var(--r-1);
  font-size: var(--fs-1); font-weight: 500; line-height: 1; white-space: nowrap;
  color: var(--text-2); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2);
}
.tag-accent { color: var(--accent-text); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line); }
.tag-ok { color: var(--ok); background: var(--ok-bg); box-shadow: inset 0 0 0 1px var(--ok-line); }
.tag .icon { width: 13px; height: 13px; color: currentColor; }
.ring { width: 10px; height: 10px; border-radius: 50%; border: 1.5px dashed currentColor; flex: none; }

/* A project's name: mono, and the only mono in running text. */
.project { font-family: var(--mono); font-size: .93em; font-weight: 400; color: var(--text); white-space: nowrap; letter-spacing: 0; }
.chip {
  display: inline-flex; align-items: center; height: 22px; padding: 0 7px; border-radius: var(--r-1);
  font-family: var(--mono); font-size: 14px; line-height: 1; color: var(--text-2); white-space: nowrap;
  background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2);
}
.chip-accent { color: var(--accent-text); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line); }
/* A session that worked in no repository: words, not a repository's name. */
.chip-none { font-family: var(--font); color: var(--text-3); background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); }

/* People and agents */
.avatar {
  --av: var(--av-1);
  width: 28px; height: 28px; border-radius: 50%; display: inline-grid; place-items: center; flex: none;
  background: var(--av); color: var(--on-av);
  font-size: 14px; font-weight: 600; line-height: 1; letter-spacing: 0;
  box-shadow: inset 0 0 0 1px light-dark(rgba(0,0,0,.08), rgba(255,255,255,.08));
}
.avatar[data-hue="2"] { --av: var(--av-2); } .avatar[data-hue="3"] { --av: var(--av-3); }
.avatar[data-hue="4"] { --av: var(--av-4); } .avatar[data-hue="5"] { --av: var(--av-5); }
.avatar[data-hue="6"] { --av: var(--av-6); }
.avatar-sm { width: 22px; height: 22px; font-size: 14px; }
.avatar-lg { width: 40px; height: 40px; font-size: 16px; }
.avatars { display: inline-flex; }
.avatars .avatar { box-shadow: 0 0 0 2px var(--surface); }
.avatars .avatar + .avatar { margin-left: -5px; }

.pulse { position: relative; width: 8px; height: 8px; flex: none; display: inline-block; }
.pulse::before, .pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--accent); }
.pulse::after { animation: ping 2.8s cubic-bezier(.25,.6,.3,1) infinite; }
.pulse.is-idle::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--icon); }
.pulse.is-idle::after { display: none; }
@keyframes ping { 0% { transform: scale(1); opacity: .5; } 70%, 100% { transform: scale(2.8); opacity: 0; } }

.spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line-3); border-top-color: var(--accent-text); animation: spin .8s linear infinite; display: inline-block; }
.skeleton { display: block; height: 12px; border-radius: 4px; background: linear-gradient(90deg, var(--surface-2), var(--surface-3), var(--surface-2)); background-size: 200% 100%; animation: shimmer 1.4s ease-in-out infinite; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ---------- cards and dense tables ---------- */
.card {
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-3);
  box-shadow: var(--sh-1), var(--edge); min-width: 0; overflow: hidden;
}
.card .list a:focus-visible, .card a.agent:focus-visible, .card .feed a:focus-visible { outline-offset: -2px; }
.card-head {
  display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 var(--sp-4) 0 18px;
  border-bottom: 1px solid var(--line);
}
.card-head h2, .card-head h3 { font-size: var(--fs-2); font-weight: 600; letter-spacing: -.005em; white-space: nowrap; }
.card-head .meta { white-space: nowrap; }
.card-head-end { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.card-head > .icon { color: var(--icon); }
.card-body { padding: 18px; }
.card-foot {
  display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px;
  border-top: 1px solid var(--line); font-size: var(--fs-2); color: var(--text-2);
}
.card-foot .end { margin-left: auto; }
.card-link { display: flex; align-items: center; gap: 4px; font-size: var(--fs-1); color: var(--text-3); border-radius: var(--r-1); padding: 4px 6px; margin-right: -6px; }
.card-link:hover, .card-link.is-hover { color: var(--text); background: var(--surface-2); }
.card-link .icon { width: 14px; height: 14px; color: currentColor; }
.card-title-lg { font-size: var(--fs-3); }
.card-raised { box-shadow: var(--sh-2), var(--edge); }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.tile { background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px 13px; min-width: 0; }
.tile-title { display: block; font-size: var(--fs-2); font-weight: 600; }
.tile .project { display: flex; align-items: center; gap: 7px; margin-top: 4px; color: var(--text-3); font-size: 14px; }
.tile .project .icon { width: 14px; height: 14px; }
.tile-dashed { background: var(--accent-bg); border: 1px dashed var(--accent-edge); color: var(--text-2); display: flex; gap: 10px; align-items: flex-start; }
.tile-dashed .icon { color: var(--accent-text); margin-top: 2px; }

.table { width: 100%; border-collapse: collapse; font-size: var(--fs-2); }
.table caption { text-align: left; }
.table th {
  height: 38px; padding: 0 var(--sp-4); text-align: left; white-space: nowrap;
  font-size: var(--fs-1); font-weight: 500; color: var(--text-3);
  border-bottom: 1px solid var(--line-2); background: light-dark(var(--surface-2), var(--surface));
}
.table td { height: 44px; padding: 0 var(--sp-4); border-bottom: 1px solid var(--line); color: var(--text-2); white-space: nowrap; }
.table tr:last-child td { border-bottom: 0; }
.table td:first-child, .table th:first-child { padding-left: 18px; }
.table td.strong, .table td b { color: var(--text); font-weight: 500; }
.table .r { text-align: right; }
.table tbody tr { transition: background var(--t-fast); }
.table tbody tr:hover, .table tbody tr.is-hover { background: light-dark(rgba(242,240,232,.6), rgba(255,255,255,.02)); }
.table .cell { display: flex; align-items: center; gap: 10px; }
.table .end-cell { margin: 0 0 0 auto; }
.table-empty td { height: auto; padding: var(--sp-8) var(--sp-4); text-align: center; white-space: normal; color: var(--text-3); }

.list > li { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 var(--sp-4); border-top: 1px solid var(--line); font-size: var(--fs-2); }
.list > li:first-child { border-top: 0; }
.list .end { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: var(--fs-1); color: var(--text-3); white-space: nowrap; }
.list .end.live { color: var(--text-3); }
.list > li > .icon { color: var(--icon); }

.people-strip { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 28px; padding: 14px 18px; }
.people-strip h2 { font-size: var(--fs-2); font-weight: 600; display: flex; align-items: baseline; gap: 8px; }
.people-strip h2 span { font-weight: 400; color: var(--text-3); }
.people-strip .group { display: flex; align-items: center; gap: 10px; color: var(--text-3); white-space: nowrap; }
.people-strip .group b { color: var(--text); font-weight: 500; }
.people-strip .end { margin-left: auto; }

/* ---------- the band that needs you ---------- */
.needs {
  position: relative; display: flex; gap: var(--sp-4); align-items: flex-start;
  padding: 20px 24px 22px 20px; border-radius: var(--r-3);
  background: var(--accent-bg); border: 1px solid var(--accent-line);
  box-shadow: 0 1px 2px light-dark(rgba(140,69,41,.05), rgba(0,0,0,.3)), 0 14px 32px -20px light-dark(rgba(140,69,41,.30), rgba(0,0,0,.8)), var(--edge);
}
.needs { container-type: inline-size; background-image: linear-gradient(100deg, light-dark(rgba(204,120,92,.05), rgba(204,120,92,.08)), transparent 70%); }
.needs + .needs { margin-top: var(--sp-3); }
.needs-icon {
  width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; flex: none;
  background: light-dark(var(--primary), rgba(204,120,92,.16)); color: light-dark(#FFFFFF, var(--accent-text));
  box-shadow: light-dark(inset 0 1px 0 rgba(255,255,255,.18), inset 0 0 0 1px var(--accent-line)), 0 6px 14px -8px rgba(140,69,41,.6);
}
.needs-icon .icon { width: 20px; height: 20px; color: currentColor; }
.needs-text { flex: 1; min-width: 0; }
.needs-eyebrow { display: flex; align-items: center; gap: 8px; font-size: var(--fs-1); font-weight: 500; color: var(--accent-text); }
.needs-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.needs-title { margin-top: 4px; font-size: var(--fs-5); font-weight: 600; letter-spacing: -.015em; line-height: 1.3; }
.needs-title .project { font-size: 18px; font-weight: 500; }
.needs-line { margin-top: 6px; color: var(--text-2); line-height: 1.5; max-width: 72ch; }
.needs-line b { color: var(--text); font-weight: 500; }
.needs .choice { margin-top: 18px; }
.needs-aside { align-self: center; flex: none; }
@container (min-width: 980px) {
  .needs-text { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--sp-8); }
  .needs-text > :not(.choice) { grid-column: 1; }
  .needs-text > .choice { grid-column: 2; grid-row: 1 / span 3; align-self: end; margin-top: 0; padding-left: var(--sp-8); border-left: 1px solid var(--accent-line); }
}
.needs-calm { background: var(--surface); border-color: var(--line-2); box-shadow: var(--sh-1), var(--edge); }
.needs-calm .needs-icon { background: var(--ok-bg); color: var(--ok); box-shadow: inset 0 0 0 1px var(--ok-line); }
.needs-calm .needs-title { font-size: var(--fs-3); }

/* ---------- the live feed ---------- */
.feed > li { display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 8px var(--sp-4); border-top: 1px solid var(--line); color: var(--text-2); }
.feed > li:first-child { border-top: 0; }
.feed b { color: var(--text); font-weight: 500; }
.feed-icon { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.feed-icon .icon { width: 15px; height: 15px; }
.feed-text { flex: 1; min-width: 0; }
.feed time, .feed .time { margin-left: auto; font-size: var(--fs-1); color: var(--text-3); white-space: nowrap; }
.feed > li.is-fresh { background: linear-gradient(90deg, var(--accent-bg), transparent 70%); }
.feed > li.is-fresh time { color: var(--text-3); }
/* Home's feed, opened from its head (alex, 2026-10-20: "home feed should also be on the right"): wide enough for a line. */
.pop-card.pop-feed { width: min(560px, calc(100vw - 24px)); }
.pop-feed .feed > li { padding: 8px 18px; }
.pop-feed .feed > li:first-child { border-top: 1px solid var(--line); }
.feed > li.is-new { animation: arrive .5s var(--ease) both; }
@keyframes arrive { from { opacity: 0; transform: translateY(-6px); } }

/* ---------- an agent: the subject; the person its operator ---------- */
.agent { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 0 14px; padding: 12px var(--sp-4) 13px; border-top: 1px solid var(--line); }
.agent:first-child { border-top: 0; }
.agent-tile { position: relative; width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; margin-top: 2px; background: light-dark(#1A1917, #1D2026); color: var(--accent); box-shadow: inset 0 0 0 1px light-dark(transparent, var(--line-2)); }
.agent-tile .icon { width: 18px; height: 18px; color: currentColor; }
.agent-tile .avatar { position: absolute; right: -7px; bottom: -7px; box-shadow: 0 0 0 2px var(--surface); }
.agent-name { font-size: var(--fs-2); color: var(--text-2); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agent-name b { color: var(--text); font-weight: 600; }
.agent-task { margin-top: 3px; display: flex; align-items: center; gap: 8px; min-width: 0; }
.agent-task .what { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agent-does { margin-top: 2px; font-size: var(--fs-1); color: var(--text-2); }
.agent-now { margin-top: 4px; font-family: var(--mono); font-size: 14px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agent-state { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; font-size: var(--fs-1); color: var(--text-3); white-space: nowrap; }
.agent-state .live { display: flex; align-items: center; gap: 8px; color: var(--text-3); }
.agent-flag { margin-top: 5px; display: flex; align-items: center; gap: 6px; font-size: var(--fs-1); color: var(--accent-text); }
.agent.is-idle .agent-tile { color: var(--icon); }
a.agent:hover, .agent.is-hover { background: var(--surface-2); }

/* ---------- the code and its command, with Copy ---------- */
.codebox { display: flex; flex-direction: column; gap: 10px; }
.code-line {
  display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 7px 7px 7px 16px;
  border-radius: 10px; background: light-dark(var(--accent-bg), var(--canvas)); border: 1px solid var(--accent-line);
  box-shadow: 0 0 0 4px light-dark(rgba(204,120,92,.06), rgba(204,120,92,.07));
}
.code-value { font-family: var(--mono); font-size: 22px; font-weight: 500; letter-spacing: .06em; color: var(--text); white-space: nowrap; }
.code-value .dash { color: var(--text-3); }
.command-line {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 5px 5px 5px 14px;
  border-radius: 10px; background: var(--term-bg); border: 1px solid var(--term-line);
}
.command { font-family: var(--mono); font-size: 14px; color: var(--term-text); white-space: nowrap; overflow-x: auto; }
.command .prompt { color: var(--term-dim); user-select: none; }
.command .arg { color: var(--term-accent); }
.code-line .btn, .command-line .btn { margin-left: auto; }
.command-line .btn-secondary { background: #2E2D29; border-color: #45433D; color: #F2F0E8; box-shadow: none; }
.command-line .btn-secondary:hover { background: #3A3934; }
.command-line .btn-secondary .icon { color: #C9C6BC; }
.codebox-note { font-size: var(--fs-1); color: var(--text-3); line-height: 1.5; }
.command-label { margin: 4px 0 -4px; font-size: var(--fs-1); font-weight: 500; color: var(--text-2); }
.codebox .command-line { min-width: 0; }
.copy[data-state="copied"] { color: var(--ok); }
.copy[data-state="copied"] .icon { color: currentColor; }
.code-line.is-used { background: var(--surface-2); border-color: var(--line-2); box-shadow: none; }
.code-line.is-used .code-value { color: var(--text-3); text-decoration: line-through; text-decoration-thickness: 1.5px; }

/* ---------- a terminal ---------- */
.terminal {
  border-radius: var(--r-3); overflow: hidden; background: var(--term-bg);
  border: 1px solid var(--term-line);
  box-shadow: 0 0 0 1px light-dark(transparent, rgba(0,0,0,.6)), 0 30px 70px -28px light-dark(rgba(26,25,23,.45), rgba(0,0,0,.9)), inset 0 1px 0 rgba(255,255,255,.04);
}
.terminal-bar { position: relative; display: flex; align-items: center; height: 38px; padding: 0 14px; background: var(--term-bar); border-bottom: 1px solid var(--term-line); }
.terminal-lights { display: flex; gap: 8px; }
.terminal-lights i { width: 11px; height: 11px; border-radius: 50%; background: #3B3A35; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.terminal-title { position: absolute; left: 0; right: 0; text-align: center; font-family: var(--mono); font-size: 14px; color: var(--term-dim); pointer-events: none; }
.terminal pre {
  margin: 0; padding: 18px 22px 20px; overflow-x: auto;
  font-family: var(--mono); font-size: 14.5px; line-height: 1.75; color: var(--term-dim); white-space: pre;
}
.terminal .t-dim { color: var(--term-dim); }
.terminal .t-cmd { color: var(--term-text); }
.terminal .t-arg { color: var(--term-accent); }
.terminal .t-ok { color: var(--term-ok); }
.terminal .t-q { color: var(--term-accent); }
.terminal .t-sel { color: var(--term-accent); }
.terminal .t-strong { color: var(--term-text); font-weight: 500; }
.terminal .t-caret { display: inline-block; width: .6em; height: 1.1em; vertical-align: -.2em; background: var(--term-dim); animation: blink 1.2s steps(2, start) infinite; }
@keyframes blink { to { visibility: hidden; } }
.caption { display: flex; align-items: flex-start; gap: 10px; margin-top: 12px; font-size: var(--fs-2); color: var(--text-3); }
.caption .icon { margin-top: 3px; }

/* ---------- the report: report, then domain, then topic, then the topic's detail cards ---------- */
.report-head { margin-bottom: var(--sp-8); }
.report-title { font-size: var(--fs-8); font-weight: 600; letter-spacing: -.03em; line-height: 1.1; }
.report-summary { margin-top: var(--sp-4); max-width: 68ch; font-size: var(--fs-4); line-height: 1.6; color: var(--text-2); letter-spacing: -.005em; }
.domain { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--sp-6); padding: var(--sp-6) 0; border-top: 1px solid var(--line-2); }
.domain:last-child { padding-bottom: 0; }
.domain-name { font-size: var(--fs-4); font-weight: 600; letter-spacing: -.015em; }
.domain-meta { margin-top: 6px; font-size: var(--fs-1); color: var(--text-3); }
.domain-projects { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.domain-projects .project { display: flex; align-items: center; gap: 7px; font-size: 14px; color: var(--text-2); }
.domain-projects .project .icon { width: 14px; height: 14px; }
.share { display: block; width: 100%; height: 6px; margin-top: 14px; }
.share rect { fill: var(--accent); }
.share rect + rect { fill: light-dark(#E7C3B3, rgba(204,120,92,.45)); }
.share rect + rect + rect { fill: light-dark(#F0DDD3, rgba(204,120,92,.25)); }
.topics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
.topic {
  position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0;
  padding: 18px 20px 20px; border-radius: var(--r-3);
  background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--sh-1), var(--edge);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
a.topic:hover, .topic.is-hover { border-color: var(--line-3); box-shadow: var(--sh-2), var(--edge); }
a.topic:focus-visible { outline-offset: 2px; }
.topic-head { display: flex; align-items: baseline; gap: 12px; }
.topic-title { font-size: var(--fs-3); font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
.topic-share { margin-left: auto; font-size: var(--fs-3); font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.topic-share small { font-size: var(--fs-1); font-weight: 500; color: var(--text-3); margin-left: 1px; }
.topic-line { color: var(--text-2); line-height: 1.5; }
.topic-foot { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 6px; font-size: var(--fs-1); color: var(--text-3); white-space: nowrap; }
.topic-foot .open { margin-left: auto; display: flex; align-items: center; gap: 4px; color: var(--text-3); }
a.topic:hover .topic-foot .open { color: var(--accent-text); }

.details { display: flex; flex-direction: column; gap: 10px; }
.detail { padding: 14px 16px 15px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--sh-1); }
.detail-head { display: flex; align-items: center; gap: 8px; font-size: var(--fs-1); color: var(--text-3); }
.detail-kind { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; color: var(--text-2); }
.detail-kind i, .detail-kind.shipped i { width: 8px; height: 8px; border-radius: 2px; background: var(--accent); }
.detail-kind.prevented i { background: transparent; box-shadow: inset 0 0 0 2px var(--accent); border-radius: 50%; }
.detail-kind.invested i { background: var(--icon); border-radius: 50%; }
.detail-kind.judgment i { background: transparent; box-shadow: inset 0 0 0 2px var(--icon); transform: rotate(45deg); border-radius: 1px; }
.detail-head time { margin-left: auto; }
.detail-title { margin-top: 8px; font-size: var(--fs-2); font-weight: 600; line-height: 1.35; }
.detail p { margin-top: 4px; color: var(--text-2); line-height: 1.5; }
/* A position: the words are the card, on the accent's rule, as the published report draws one (render.py). */
.detail-kind.position i { width: 3px; height: 12px; border-radius: 1px; background: var(--accent); }
.detail-quote { margin-top: 8px; padding-left: 12px; border-left: 2px solid var(--accent); font-size: var(--fs-2); line-height: 1.45; color: var(--text); }
.domain-open .detail-title { margin-top: 0; }

/* What the draft was drafted from, and the approval. */
.kline { display: flex; align-items: baseline; gap: 8px; padding: 18px 18px 16px; border-bottom: 1px solid var(--line); color: var(--text-2); }
.kline b { font-size: 30px; font-weight: 600; letter-spacing: -.03em; line-height: 1; color: var(--text); }
.checks { display: flex; flex-direction: column; gap: 12px; }
.checks li { display: flex; align-items: flex-start; gap: 10px; color: var(--text-2); line-height: 1.4; }
.check-mark { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; flex: none; margin-top: 1px; background: var(--ok-bg); color: var(--ok); box-shadow: inset 0 0 0 1px var(--ok-line); }
.check-mark .icon { width: 12px; height: 12px; color: currentColor; }
.checks li.is-open .check-mark { background: transparent; color: var(--accent-text); box-shadow: inset 0 0 0 1.5px var(--accent-edge); }
.note-line { font-size: var(--fs-1); color: var(--text-3); line-height: 1.5; }
.note-line b { color: var(--text-2); font-weight: 500; }
.only { display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 18px; border-top: 1px solid var(--line); font-size: var(--fs-1); color: var(--text-3); }

/* ---------- feedback ---------- */
.note { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 4px 12px; padding: 14px 0; border-top: 1px solid var(--line); }
.note:first-child { border-top: 0; padding-top: 0; }
.note-who { display: flex; align-items: baseline; gap: 8px; font-size: var(--fs-2); }
.note-who b { font-weight: 600; }
.note-who time { font-size: var(--fs-1); color: var(--text-3); }
.note p { grid-column: 2; color: var(--text-2); line-height: 1.5; }
.note-state { grid-column: 2; display: flex; align-items: center; gap: 6px; font-size: var(--fs-1); color: var(--text-3); }
.note-state .icon { width: 14px; height: 14px; }
.note.is-sending .note-state .spinner { width: 14px; height: 14px; }
.note.is-failed .note-state { color: var(--danger); }
.compose { display: flex; flex-direction: column; gap: 10px; }
.compose .form-actions { justify-content: space-between; }

/* ---------- empty states: what to do next ---------- */
.empty { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 28px 24px; }
.empty-center { align-items: center; text-align: center; padding: 40px 24px; }
.empty-icon { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--icon); }
.empty-icon .icon { width: 20px; height: 20px; color: currentColor; }
.empty-title { font-size: var(--fs-3); font-weight: 600; }
.empty p { color: var(--text-2); max-width: 52ch; line-height: 1.5; }
.empty .command-line { align-self: stretch; }
.empty-center .command-line { align-self: center; }
/* An empty page's next step: one line, a command in it as code, and one link (views/parts.js nextStep). */
.empty-next .empty-title { max-width: 64ch; line-height: 1.45; }
.empty-next .empty-title code { padding: 1px 6px; border-radius: 6px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2); white-space: nowrap; }

/* ---------- error pages ---------- */
.error-page { min-height: calc(100vh - var(--bar-h)); display: grid; place-items: center; padding: var(--sp-12) var(--gutter); }
.error-card { width: min(520px, 100%); padding: 36px 36px 32px; }
.error-code { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-1); font-weight: 500; color: var(--text-3); }
.error-code .icon { color: var(--accent); }
.error-title { margin-top: 14px; font-size: var(--fs-6); font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
.error-card p { margin-top: 10px; color: var(--text-2); line-height: 1.55; }
.error-card .form-actions { margin-top: 24px; }
/* The approval's pages (views/approve.js, views/first-machine.js): a note with its icon beside it, and the commands' card
   as wide as a code's dialog. */
.error-card .codebox-note { display: flex; align-items: flex-start; gap: 8px; }
/* Its facts in line with its words, not inset as in a card's body; a warning in it in the danger's colour, as at a field. */
.card.error-card .facts { margin-top: var(--sp-4); padding: 0; }
.error-card .field-error { color: var(--danger); }
.error-card.card-wide { width: min(640px, 100%); }
.error-ref { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line); font-size: var(--fs-1); color: var(--text-3); }

/* A small label over a part of a page: "Not in a topic", "On Cross-posting Research". */
.section-label { display: flex; align-items: center; gap: 8px; font-size: var(--fs-1); font-weight: 500; color: var(--text-3); margin-bottom: 10px; }

/* ---------- the style guide's own page ---------- */
.sg-head { padding: var(--sp-10) 0 var(--sp-8); border-bottom: 1px solid var(--line-2); margin-bottom: var(--sp-10); display: flex; align-items: flex-end; gap: var(--sp-8); }
.sg-head h1 { font-size: 40px; letter-spacing: -.035em; line-height: 1.05; }
.sg-head p { margin-top: 12px; color: var(--text-2); max-width: 70ch; font-size: var(--fs-3); line-height: 1.55; }
.sg-head .theme-switch { margin-left: auto; padding: 0; min-width: 300px; }
.sg-toc { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 18px; font-size: var(--fs-1); color: var(--text-3); }
.sg-toc a:hover { color: var(--text); }
.sg-section { padding: var(--sp-10) 0; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--bar-h) + 16px); }
.sg-section:first-of-type { border-top: 0; padding-top: 0; }
.sg-section > h2 { font-size: var(--fs-6); letter-spacing: -.02em; }
.sg-section > p { margin-top: 8px; color: var(--text-2); max-width: 80ch; line-height: 1.55; }
.sg-block { margin-top: var(--sp-6); }
.sg-label { font-size: var(--fs-1); font-weight: 500; color: var(--text-3); margin-bottom: 10px; }
.sg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--sp-5); }
.sg-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }
.sg-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); }
.sg-stage { padding: var(--sp-6); border-radius: var(--r-3); background: var(--canvas); border: 1px dashed var(--line-2); min-width: 0; }
.sg-stage > .domain { border-top: 0; padding-top: 0; }
.sg-stage.flush { padding: 0; overflow: hidden; border-style: solid; }
.sg-states { display: grid; grid-template-columns: 120px repeat(4, minmax(0, max-content)); align-items: center; gap: 14px 18px; }
.sg-states .sg-row-label { font-size: var(--fs-1); color: var(--text-3); }
.sg-states .sg-col-label { font-size: var(--fs-1); color: var(--text-3); }
.sg-matrix { display: grid; grid-template-columns: 110px repeat(5, max-content); align-items: center; gap: 14px 16px; }
.sg-matrix .sg-col-label, .sg-matrix .sg-row-label { font-size: var(--fs-1); color: var(--text-3); }
.scheme-light { color-scheme: light; }
.scheme-dark { color-scheme: dark; }
.sg-schemes { display: grid; grid-template-columns: 1fr 1fr; border-radius: var(--r-3); overflow: hidden; border: 1px solid var(--line-2); }
.sg-schemes > div { background: var(--canvas); color: var(--text); padding: var(--sp-6); min-width: 0; }
.sg-scheme-name { font-size: var(--fs-1); font-weight: 500; color: var(--text-3); margin-bottom: 14px; }
.swatches { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.swatch { display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-1); color: var(--text-2); min-width: 0; }
.swatch i { height: 44px; border-radius: var(--r-2); box-shadow: inset 0 0 0 1px light-dark(rgba(0,0,0,.08), rgba(255,255,255,.08)); }
.swatch code { font-size: 14px; color: var(--text-2); }
.sw-canvas { background: var(--canvas); } .sw-surface { background: var(--surface); } .sw-surface-2 { background: var(--surface-2); }
.sw-surface-3 { background: var(--surface-3); } .sw-aside { background: var(--aside); } .sw-line-2 { background: var(--line-2); }
.sw-line-strong { background: var(--line-strong); } .sw-text { background: var(--text); } .sw-text-2 { background: var(--text-2); }
.sw-text-3 { background: var(--text-3); } .sw-icon { background: var(--icon); } .sw-accent { background: var(--accent); }
.sw-accent-text { background: var(--accent-text); } .sw-accent-bg { background: var(--accent-bg); } .sw-primary { background: var(--primary); }
.sw-ok { background: var(--ok); } .sw-danger { background: var(--danger); } .sw-term { background: var(--term-bg); }
.sw-av-1 { background: var(--av-1); } .sw-av-2 { background: var(--av-2); } .sw-av-3 { background: var(--av-3); } .sw-av-4 { background: var(--av-4); }
.type-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: baseline; gap: 16px; padding: 10px 0; border-top: 1px solid var(--line); }
.type-row:first-child { border-top: 0; }
.type-row .meta { font-family: var(--mono); }
.fs-1 { font-size: var(--fs-1); } .fs-2 { font-size: var(--fs-2); } .fs-3 { font-size: var(--fs-3); } .fs-4 { font-size: var(--fs-4); }
.fs-5 { font-size: var(--fs-5); font-weight: 600; } .fs-6 { font-size: var(--fs-6); font-weight: 600; letter-spacing: -.02em; }
.fs-7 { font-size: var(--fs-7); font-weight: 600; letter-spacing: -.025em; } .fs-8 { font-size: var(--fs-8); font-weight: 600; letter-spacing: -.03em; }
.space-row { display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; }
.space-row div { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: var(--fs-1); color: var(--text-3); }
.space-row i { display: block; background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line); }
.sp-1 { width: 4px; height: 4px; } .sp-2 { width: 8px; height: 8px; } .sp-3 { width: 12px; height: 12px; } .sp-4 { width: 16px; height: 16px; }
.sp-6 { width: 24px; height: 24px; } .sp-8 { width: 32px; height: 32px; } .sp-10 { width: 40px; height: 40px; } .sp-16 { width: 64px; height: 64px; }
.shadow-demo { height: 80px; border-radius: var(--r-3); background: var(--surface); display: grid; place-items: center; font-size: var(--fs-1); color: var(--text-3); }
.sh-1 { box-shadow: var(--sh-1), var(--edge); } .sh-2 { box-shadow: var(--sh-2), var(--edge); } .sh-3 { box-shadow: var(--sh-3), var(--edge); }
.r-demo { width: 64px; height: 44px; background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line-2); }
.r-1 { border-radius: var(--r-1); } .r-2 { border-radius: var(--r-2); } .r-3 { border-radius: var(--r-3); } .r-full { border-radius: var(--r-full); }
.frame-demo { border: 1px solid var(--line-2); border-radius: var(--r-3); overflow: hidden; background: var(--canvas); }
.frame-demo .topbar { position: relative; }
.frame-demo .error-page { min-height: 0; padding: var(--sp-8) var(--sp-6); }
.frame-demo .error-card { width: 100%; }

/* ======================================================================================================
 * Phase 2b: what the real pages need beyond the style guide's components.
 * ====================================================================================================== */

/* ---------- small layout helpers ---------- */
.grow { flex: 1; min-width: 0; }
.pad { padding: var(--sp-4) 18px; }
.wrap { white-space: normal !important; }
.row-inline { display: inline-flex; align-items: center; gap: 8px; vertical-align: middle; }
.stack-xs { display: flex; flex-direction: column; gap: 4px; }
.strong { color: var(--text); font-weight: 600; }
.link-plain { color: var(--text); font-weight: 500; text-decoration: none; border-radius: var(--r-1); }
.link-plain:hover { color: var(--accent-text); text-decoration: underline; text-decoration-color: var(--accent-edge); text-underline-offset: 3px; }
.cell-meta { display: block; margin-top: 2px; font-size: var(--fs-1); color: var(--text-3); font-weight: 400; }
.title-note { font-size: var(--fs-4); font-weight: 400; }
.page-title .avatar, .page-title .agent-tile { vertical-align: middle; }
.page-title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.page-note { display: flex; align-items: center; gap: 8px; margin: -12px 0 var(--sp-5); font-size: var(--fs-2); color: var(--text-2); }
.page-note .icon { color: var(--ok); }
.plain-list { display: flex; flex-direction: column; gap: 6px; color: var(--text-2); }
.plain-list li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.output { margin: 8px 0 0; padding: 12px 14px; max-height: 360px; overflow: auto; border-radius: var(--r-2); background: var(--term-bg); color: var(--term-text); font-size: 14px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
/* A time is said in the muted colour: the accent reads as a warning. Only the pulse beside it is lit. */
.live-text { display: inline-flex; align-items: center; gap: 8px; color: var(--text-3); }

/* ---------- forms in the real pages ---------- */
.action-form { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 0; }
.action-form .btn-block { width: 100%; }
.action-form:has(.btn-block) { display: flex; }
.action-form.compact { flex-direction: row; align-items: center; }
.form-error { margin: 0; }
.inline-form { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0; }
.inline-form .input { flex: 1; min-width: 160px; }
.inline-form .form-error, .inline-form .field-hint { flex-basis: 100%; }
.input-sm { height: 32px; font-size: var(--fs-1); padding: 0 10px; }
.disclose > summary { display: inline-flex; align-items: center; gap: 6px; list-style: none; cursor: pointer; font-size: var(--fs-1); color: var(--text-3); padding: 4px 6px; margin-left: -6px; border-radius: var(--r-1); }
.disclose > summary::-webkit-details-marker { display: none; }
.disclose > summary:hover { color: var(--text); background: var(--surface-2); }
.disclose[open] > summary { color: var(--text-2); margin-bottom: 8px; }
.disclose > summary .icon { width: 14px; height: 14px; }
.disclose.pad > summary { margin-left: 0; }

/* ---------- tables that hold links and wrap where they must ---------- */
/* Positioned, so what is out of sight in a table (a header said to a screen reader alone) scrolls with it, never the page. */
.table-wrap { overflow-x: auto; position: relative; }
.table td.wrap { min-width: 220px; line-height: 1.4; padding-top: 10px; padding-bottom: 10px; overflow-wrap: anywhere; }
.table .cell { color: var(--text); }
.table-links td .card-link { justify-content: flex-end; }
.table .agent-tile-sm { margin-right: 4px; }

/* ---------- lists ---------- */
.list > li > .action-form, .list .end .action-form { flex-direction: row; }
/* A browser or a machine of one's own (views/browsers.js, views/person.js): what it is over how and when. */
.own-row .grow { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-2) 0; }
/* Its icon by its name's line, not in the middle of the lines under it; its Sign out or ⋯ stays in the middle. */
.list > li.own-row > .icon { align-self: flex-start; margin-top: calc(var(--sp-2) + 3px); }
.list-link { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; margin: 0 calc(-1 * var(--sp-4)); padding: 0 var(--sp-4); width: calc(100% + 2 * var(--sp-4)); color: inherit; }
.list-link:hover { background: var(--surface-2); }
.list-link:focus-visible { outline-offset: -2px; }
.list > li.wrap-item { align-items: flex-start; padding-top: 10px; padding-bottom: 10px; line-height: 1.5; color: var(--text-2); }
.list > li.wrap-item b { color: var(--text); }
.list > li.project-row { flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
.list > li.project-row .inline-form { flex-basis: 100%; padding-left: 28px; }

/* ---------- agents in lists: the agent the subject ---------- */
.agent { display: block; padding: 0; }
.agent-link { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 0 14px; padding: 12px var(--sp-4) 13px; color: inherit; }
.agent-link:hover { background: var(--surface-2); }
.agent-link:focus-visible { outline-offset: -2px; }
.agent-name { display: block; }
.agent-task { display: flex; }
.agent-tile-sm { width: 26px; height: 26px; border-radius: 7px; margin-top: 0; }
.agent-tile-sm .icon { width: 14px; height: 14px; }
.agent-tile-sm .avatar { width: 16px; height: 16px; font-size: 10px; right: -5px; bottom: -5px; }
.agent-tile-lg { width: 44px; height: 44px; border-radius: 11px; margin-top: 0; }
.agent-tile-lg .icon { width: 22px; height: 22px; }
.table .agent-tile { flex: none; }

/* ---------- facts: a term and what it is ---------- */
.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 20px; margin: 0; padding: 4px 0; }
.card .facts { padding: var(--sp-4) 18px; }
.facts > div { display: contents; }
.facts dt { font-size: var(--fs-1); color: var(--text-3); padding-top: 2px; }
.facts dd { margin: 0; color: var(--text); min-width: 0; }

/* ---------- home ---------- */
.needs-more { display: flex; align-items: center; gap: 8px; margin: var(--sp-2) 0 0; padding: 0 4px; color: var(--text-2); }
.card-accent { border-color: var(--accent-line); }
.card-accent > .card-head { background: var(--accent-bg); }
.card-danger { border-color: var(--danger-line); }
.card-danger > .card-head .icon { color: var(--danger); }

/* ---------- domains ---------- */
.domain-projects-list > li { padding: 14px 18px 16px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; }
.domain-projects-list > li:first-child { border-top: 0; }
.domain-project .end { margin-left: auto; }
.domain-project .choice { margin: 0; }
.domain-list > li { padding: 12px 18px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.domain-list > li:first-child { border-top: 0; }
.domain-row .domain-name { font-size: var(--fs-2); }
.domain-row .end { margin-left: auto; gap: 2px; }

/* ---------- the draft ---------- */
.report-main { min-width: 0; }
.report-summary { max-width: 72ch; font-size: var(--fs-4); line-height: 1.6; color: var(--text-2); letter-spacing: -.005em; }
.report-summary p + p { margin-top: .7em; }
/* The narrative at its reading width, its sources in the width the page has left beside it (alex, 2026-10-18). */
/* The month at a glance takes the rest of the width and the narrative's height, untitled: its state, its numbers in a row of
   tiles, its projects under them, the way to its Sources at its foot; room for more tiles as the month gains things to
   say. Twice the gap it had from the narrative (alex, 2026-10-18: "at least it should be double"). */
.report-top { display: grid; grid-template-columns: minmax(0, 72ch) minmax(300px, 1fr); gap: var(--sp-12); align-items: stretch; }
.glance { display: flex; flex-direction: column; }
/* Beside the narrative, its top level with the narrative's first line, the top of its capitals (alex, 2026-10-18: "it
   needs to be perfectly aligned with the narrative"): under the narrative's own top margin, its first line's capitals
   start 7px into the line, at 18px Geist on 1.6, 2px of half-leading (28.8px less the font's 23px, halved, as browsers
   floor it) and 5px of ascent above the capitals ((1.005 - .719) x 18). Measured in Chromium: 0 apart. */
@media (min-width: 961px) { .report-summary + .glance { margin-top: calc(var(--sp-4) + 7px); } }
.glance-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
/* How the month stands, first on its card (alex, 2026-10-20: "information that checker has passed could be there"):
   its status, the checker's result and, for admins, who wrote it, each opening its details as it did in the head. */
.glance-state { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); padding: var(--sp-3) 18px; border-bottom: 1px solid var(--line); }
.stat { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-3) 18px; min-width: 0; }
/* Four to a row, as many rows as the month has things to count; two to a row where the glance is too narrow for four
   words side by side, beside the narrative on a small screen and on a phone. */
.glance { container-type: inline-size; }
.stat:not(:nth-child(4n+1)) { border-left: 1px solid var(--line); }
.stat:nth-child(n+5) { border-top: 1px solid var(--line); }
@container (max-width: 419px) {
  .glance-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(odd) { border-left: 0; }
  .stat:nth-child(even) { border-left: 1px solid var(--line); }
  .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
}
.stat-num { font-size: var(--fs-6); font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.stat-label { font-size: var(--fs-1); color: var(--text-3); }
.glance-body { flex: 1; display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3) 18px var(--sp-4); }
.glance-foot { display: flex; align-items: center; gap: var(--sp-2); padding: 0 18px; min-height: 44px; border-top: 1px solid var(--line); color: var(--text); font-weight: 600; text-decoration: none; }
.glance-foot .icon { color: var(--icon); }
.glance-foot:hover { background: var(--surface-2); }
.glance-foot:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
/* A topic's share of its domain's month, beside its title. */
.topic-share { font-size: var(--fs-5); font-weight: 600; color: var(--accent-text); font-variant-numeric: tabular-nums; }
.sources-go { margin-left: auto; }
.sources-projects { display: flex; flex-direction: column; gap: var(--sp-1); }
.sources-projects .row-inline { display: flex; align-items: center; gap: var(--sp-2); }
@media (max-width: 960px) { .report-top { grid-template-columns: minmax(0, 1fr); } }
/* A table of several kinds (parts.js tabbedCard; alex, 2026-10-21: "I want to have tabs"): the tabs are the card's head,
   drawn as the tabs under the bar are, the one on screen underlined; they wrap to a second row on a phone rather than
   scroll sideways. Its foot, while rows are held back, is Show all, the whole width its link. */
.card-tabs { display: flex; flex-wrap: wrap; column-gap: var(--sp-1); padding: 0 var(--sp-4) 0 18px; border-bottom: 1px solid var(--line); }
.card-tabs a {
  position: relative; display: flex; align-items: center; gap: 8px; height: 48px; flex: none;
  padding: 0 12px; margin-left: -12px; margin-right: 12px;
  font-size: var(--fs-2); font-weight: 500; color: var(--text-3); text-decoration: none;
}
.card-tabs a:hover { color: var(--text); }
.card-tabs a:focus-visible { outline-offset: -6px; border-radius: var(--r-2); }
.card-tabs a[aria-current="page"] { color: var(--text); }
.card-tabs a[aria-current="page"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--text); }
.card-more {
  display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; border-top: 1px solid var(--line);
  border-radius: 0 0 calc(var(--r-3) - 1px) calc(var(--r-3) - 1px); font-size: var(--fs-2); font-weight: 500; color: var(--text-2); text-decoration: none;
}
.card-more:hover { background: var(--surface-2); color: var(--text); }
.card-more .icon { width: 15px; height: 15px; color: var(--icon); }
.card-more:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
@media (max-width: 760px) {
  .card-tabs { padding: 0 var(--sp-3) 0 14px; }
  .card-tabs a { height: 40px; gap: 6px; padding: 0 8px; margin-left: -8px; margin-right: 8px; font-size: var(--fs-1); }
  .card-tabs a[aria-current="page"]::after { left: 8px; right: 8px; }
}
/* On a phone, tighter still, so a month's five Sources tabs take two rows at 390 wide, not three. */
@media (max-width: 480px) {
  .card-tabs { column-gap: 0; padding: 0 var(--sp-2) 0 12px; }
  .card-tabs a { gap: 4px; padding: 0 6px; margin-left: -6px; margin-right: 10px; }
  .card-tabs a[aria-current="page"]::after { left: 6px; right: 6px; }
  .card-tabs .count { padding: 0 4px; }
}
.sources-table td.wrap { min-width: 260px; }
.sources-table th.fit { width: 1%; }
/* A commit's author as git has it, which may be a long key: cut short, whole on hover. */
.sources-who { display: inline-block; max-width: 20ch; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.sources-table .tag { height: 20px; vertical-align: 1px; }
.sources-path { display: block; margin-top: 2px; }
.tag-off { color: var(--text-3); }
.report-filter { margin: var(--sp-6) 0 var(--sp-2); }
.filter { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r-2); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.filter a { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: var(--r-1); font-size: var(--fs-1); font-weight: 500; color: var(--text-2); }
.filter a:hover { color: var(--text); }
.filter a[aria-current="page"] { background: var(--surface); color: var(--text); box-shadow: var(--sh-1), inset 0 0 0 1px var(--line-2); }
.filter a:focus-visible { outline-offset: 1px; }
.filter .icon { width: 14px; height: 14px; color: currentColor; }
.domains { margin-top: var(--sp-2); }
.domain-aside { min-width: 0; }
.domain-main { min-width: 0; }
.domain-signed { margin-top: 12px; }
.loose { margin-top: var(--sp-4); }
.topics + .loose { margin-top: var(--sp-5); }
.topic-from { display: flex; align-items: center; gap: 8px; font-size: var(--fs-1); color: var(--text-2); }
.topic-from .icon { width: 14px; height: 14px; color: var(--accent-text); }
.topic-from .avatars .avatar { box-shadow: 0 0 0 2px var(--surface); }
.topic-foot .icon { width: 13px; height: 13px; display: inline-block; vertical-align: -2px; margin-right: 3px; color: currentColor; }
.topic-foot > span { display: inline-flex; align-items: center; }
.detail-date { margin-left: auto; }
.notes { display: flex; flex-direction: column; }
.note-who { flex-wrap: wrap; }
.note-who .tag { height: 20px; }
.note.is-resolved > p:not(.note-who) { color: var(--text-3); }
.note-on + .note-on { margin-top: var(--sp-4); }
.compose { margin-top: var(--sp-4); }
.sign-off-list > li { padding: 14px 18px; border-top: 1px solid var(--line); }
.sign-off-list > li:first-child { border-top: 0; }
.sign-off-domain { font-size: var(--fs-2); font-weight: 600; margin-bottom: 8px; }
.sign-offs { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.sign-offs .meta { line-height: 1.45; }
.disclose-card > summary { list-style: none; cursor: pointer; border-bottom: 0; }
.disclose-card > summary::-webkit-details-marker { display: none; }
.disclose-card[open] > summary { border-bottom: 1px solid var(--line); }
.disclose-card .disclose-mark { margin-left: auto; transition: transform var(--t); color: var(--icon); }
.disclose-card[open] .disclose-mark { transform: rotate(180deg); }
.disclose-card > summary:hover { background: var(--surface-2); }
.disclose-card > summary:focus-visible { outline-offset: -2px; }
.link-line { padding: 5px 5px 5px 6px; min-height: 0; }
.link-line .input { border: 0; background: transparent; box-shadow: none; height: 32px; font-size: 14px; }
.link-line .input:focus-visible { box-shadow: none; }

/* ---------- invite, sign-in, the front door ---------- */
.invite-card { max-width: 720px; }
.invite-card .codebox-note { display: flex; align-items: center; gap: 8px; }
.page-center { display: grid; place-items: center; min-height: calc(100vh - var(--bar-h)); padding-top: var(--sp-10); padding-bottom: var(--sp-16); }
/* A page a signed-out visitor sees has no bar (views/layout.js document): its card in the middle of the whole window,
   the portal's mark and name over it. */
.no-bar .page-center { min-height: 100vh; }
.alone { display: flex; flex-direction: column; align-items: center; gap: var(--sp-6); width: 100%; }
.alone > .brand { margin-left: 0; }
.signin-status { margin-top: 12px; min-height: 1.5em; color: var(--text-2); }
.signin-status:empty { display: none; }
/* The form's username or email and password; the approval's code typed is drawn the same. */
.signin-form { margin-top: var(--sp-5); }
.signin-form .form-actions { margin-top: var(--sp-1); }
.signin-form .form-error { margin: 0; }
/* The sign-in page (views/login.js): the brand on the left, on its own shade, and the form on the right, each in the
   middle of its half; one over the other on a phone. */
.page-full { min-height: 100vh; }
.signin-page { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); min-height: 100vh; }
.signin-brand {
  display: flex; flex-direction: column; justify-content: center; gap: var(--sp-4);
  padding: var(--sp-16) clamp(var(--sp-10), 7vw, 112px);
  background: var(--aside); border-right: 1px solid var(--line-2);
}
.signin-name { display: flex; align-items: center; gap: 14px; font-size: var(--fs-8); font-weight: 600; letter-spacing: -.03em; line-height: 1.1; color: var(--text); }
.signin-name svg { width: 22px; height: 38px; color: var(--text); }
.signin-what { max-width: 30ch; font-size: var(--fs-4); line-height: 1.5; color: var(--text-2); }
.signin-side { display: grid; place-items: center; padding: var(--sp-16) var(--gutter); }
.signin-box { width: min(380px, 100%); }
.signin-title { font-size: var(--fs-6); font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
.signin-next { margin-top: 10px; color: var(--text-2); line-height: 1.55; }
.signin-alt { margin-top: var(--sp-6); font-size: var(--fs-1); }
.signin-key { margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--line-2); }
@media (max-width: 760px) {
  .signin-page { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .signin-brand { gap: var(--sp-2); padding: var(--sp-8) var(--gutter) var(--sp-6); border-right: 0; border-bottom: 1px solid var(--line-2); }
  .signin-name { gap: 10px; font-size: var(--fs-6); }
  .signin-name svg { width: 15px; height: 26px; }
  .signin-what { font-size: var(--fs-2); }
  .signin-side { place-items: start center; padding: var(--sp-8) var(--gutter) var(--sp-12); }
}

/* The home across organisations: each organisation's months under its name; All organisations' mark in the switcher. */
.org-months + .org-months { border-top: 1px solid var(--line); }
.org-months-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px var(--sp-4) 4px 18px; font-weight: 600; }
.org-months .months > li:first-child { border-top: 0; }
.org-mark-all { background: var(--surface-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); }
.org-mark-all .icon { width: 15px; height: 15px; }
.needs-list .ref-org, .rowy > .ref-org { flex: none; }
/* A machine in the indicator on one line, its organisation before it: the machine's name gives way, ellipsised. */
.list > li.machine-row { flex-wrap: nowrap; }
.machine-row > .ref-machine { flex: 0 1 auto; }
/* Our servers on Home, an admin's: the name, what it does, up or down and when last seen; a mock says so. */
.server-row { gap: 12px; }
.server-row .end { display: flex; align-items: center; gap: 12px; }
.tag-mock { color: var(--text-2); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2); }
/* What a server's machine sent, where a mock would be: Real, in the tone of a thing that is fine. */
.tag-real { color: var(--ok); background: var(--ok-bg); box-shadow: inset 0 0 0 1px var(--ok-line); }
/* What needs attention on the servers (views/servers.js attentionList), a line each, its mark in its tone, then one line
   that all else is fine. On a narrow screen what it is wraps under the server, since when after it. */
.attention-list > li { flex-wrap: wrap; gap: 4px 10px; padding-top: 8px; padding-bottom: 8px; }
.attention-row > .icon { color: var(--warn); flex: none; }
.attention-row.is-danger > .icon { color: var(--danger); }
.attention-row > .ref-server { flex: none; }
.attention-what { color: var(--text); min-width: 0; }
.attention-fine { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 12px var(--sp-4); font-size: var(--fs-2); color: var(--text-2); }
.attention-list + .attention-fine { border-top: 1px solid var(--line); }
.attention-fine > .icon { color: var(--ok); flex: none; margin-top: 2px; }
.attention-fine b { color: var(--text); font-weight: 500; }
.card.attention > .section-title { padding: 12px var(--sp-4) 0; margin: 0; }

/* ---------- narrow screens: one column, the bar on two rows ---------- */
@media (max-width: 1100px) {
  .grid-main, .grid-report { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  :root { --gutter: 16px; }
  .topbar { height: auto; }
  .topbar-inner { display: flex; flex-wrap: wrap; row-gap: 0; padding-top: 8px; }
  .topbar-start { flex: 1 1 0; }
  .topbar .brand span, .topbar-slash, .switcher .role-tag { display: none; }
  .topbar-end { order: 2; }
  /* Every section in view on a phone, an admin's Servers too, none reached by scrolling the bar sideways (2026-10-21):
     spread over the row, each as tight as its word; sideways only on a screen too narrow for six words at all. */
  .sections { order: 3; flex-basis: calc(100% + 2 * var(--gutter)); margin: 4px calc(-1 * var(--gutter)) 0; padding: 0 calc(var(--gutter) - 8px); height: 44px; justify-content: space-between; overflow-x: auto; border-top: 1px solid var(--line); }
  .sections a { padding: 0 8px; flex: none; }
  .sections a[aria-current="page"]::after { left: 8px; right: 8px; }
  .topbar-end .btn span { display: none; }
  .topbar-end .btn { width: 32px; padding: 0; }
  .page { padding-top: var(--sp-5); }
  .page-head { flex-direction: column; align-items: stretch; gap: var(--sp-3); }
  .page-actions { flex-wrap: wrap; }
  .page-title { font-size: 24px; }
  .needs { flex-direction: column; padding: 16px; }
  .needs-aside { align-self: stretch; }
  .needs-aside .btn { width: 100%; }
  .needs-title { font-size: 18px; }
  .domain { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
  .topics { grid-template-columns: minmax(0, 1fr); }
  .report-summary { font-size: var(--fs-3); }
  .tiles { grid-template-columns: minmax(0, 1fr); }
  .card-head { flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
  .agent-link { grid-template-columns: 36px minmax(0, 1fr); }
  .agent-link .agent-state { grid-column: 2; align-items: flex-start; margin-top: 4px; }
  .table td, .table th { padding: 0 10px; }
  .error-card { padding: 24px 20px; }
  .facts { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .facts dd { margin-bottom: 8px; }
}

/* ---------- second look at the real pages ---------- */
.stack > .needs + .needs { margin-top: 0; }
.agent-where { margin-top: 3px; font-size: var(--fs-1); color: var(--text-3); }
.agent-task .what { white-space: normal; }
.agent-task { align-items: flex-start; }
.agent-task .chip { margin-top: 1px; }
.list > li.two-line { flex-direction: column; align-items: flex-start; gap: 4px; padding-top: 10px; padding-bottom: 10px; }
.list > li.two-line .meta { gap: 6px; }
.list > li.project-row .rename { flex-basis: 100%; padding-left: 28px; }
.list > li.project-row .rename[open] > summary { margin-bottom: 6px; }
.domain-project .inline-form .input { max-width: 320px; }
.domain-project .disclose[open] > summary { margin-bottom: 10px; }
/* A row's name keeps its room in a narrow card; what follows it wraps beneath. */
.list > li { flex-wrap: wrap; row-gap: 4px; padding-top: 6px; padding-bottom: 6px; }
.list > li > .grow { min-width: 9em; }
.list > li > .end { margin-left: auto; }

/* ---------- phase 2c ---------- */
.note:target { background: var(--accent-bg); box-shadow: 0 0 0 6px var(--accent-bg); border-radius: var(--r-2); }
.sign-off-given { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; max-width: 100%; }
.sign-off-who { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; max-width: 100%; }
.sign-off-who .pill { max-width: 100%; white-space: normal; height: auto; min-height: 22px; padding-top: 2px; padding-bottom: 2px; }
.sign-off-given .action-form .btn { margin-left: -10px; }

/* What the drafting agent wrote, read as text in the body font. */
.md { color: var(--text-2); line-height: 1.55; overflow-wrap: anywhere; }
.md > * + * { margin-top: 10px; }
.md h4, .md h5 { color: var(--text); font-size: var(--fs-2); font-weight: 600; letter-spacing: 0; }
.md h4 + *, .md h5 + * { margin-top: 4px; }
.md * + h4, .md * + h5 { margin-top: 16px; }
.md ul, .md ol { padding-left: 1.3em; }
.md ul { list-style: disc; } .md ol { list-style: decimal; }
.md li + li { margin-top: 6px; }
.md li::marker { color: var(--icon); }
.md strong { color: var(--text); }
.md code { padding: 1px 5px; border-radius: 4px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; }
.md pre { padding: 10px 12px; border-radius: var(--r-2); background: var(--surface-2); overflow-x: auto; }
.md pre code { padding: 0; background: none; box-shadow: none; }
.md em { font-style: italic; }
.md blockquote { padding-left: 12px; border-left: 2px solid var(--line-2); color: var(--text-2); }
.md hr { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }
.md-table { overflow-x: auto; }
.md table { border-collapse: collapse; font-size: var(--fs-1); }
.md th, .md td { padding: 6px 10px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.md th { color: var(--text); font-weight: 600; background: var(--surface-2); }

/* Asking first: the box under the button that opened it. */
.confirm { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 8px; max-width: 100%; }
.confirm > summary { list-style: none; cursor: pointer; }
.confirm > summary::-webkit-details-marker { display: none; }
.confirm .when-open, .confirm[open] .when-closed { display: none; }
.confirm[open] .when-open { display: inline; }
.confirm[open] > summary { color: var(--text-2); border-color: var(--line-2); background: transparent; }
.confirm-box { width: min(420px, 100%); padding: 12px 14px; border-radius: 10px; border: 1px solid var(--danger-line); background: var(--danger-bg); color: var(--text-2); text-align: left; line-height: 1.5; }
.confirm-box b { color: var(--text); }
.confirm-box .action-form { margin-top: 10px; }
.list > li > .confirm { margin-left: auto; }
.list > li > .confirm[open] { flex-basis: 100%; }
.page-actions .confirm, .row-wrap .confirm { align-items: flex-end; }

/* An anchor lands below the sticky bar, never under it: on a narrow screen the bar is two rows. */
:root { --anchor-gap: calc(var(--bar-h) + var(--sp-4)); }
@media (max-width: 760px) { :root { --anchor-gap: calc(var(--bar-h) + 44px + var(--sp-4)); } }
/* A phone 430 wide and under: the sections' words at the floor's size and closer, so all six fit the row at 390. */
@media (max-width: 430px) {
  .sections { padding: 0 calc(var(--gutter) - 4px); }
  .sections a { padding: 0 4px; font-size: var(--fs-1); }
  .sections a[aria-current="page"]::after { left: 4px; right: 4px; }
}
/* Down to 360, the narrowest phone in common use: closer still. Measured in Chromium, six sections with Servers: the last
   ends at 378 of 390, and at 352 of 360 with this. */
@media (max-width: 370px) {
  .sections { padding: 0 calc(var(--gutter) - 8px); }
  .sections a { padding: 0 2px; }
  .sections a[aria-current="page"]::after { left: 2px; right: 2px; }
}
[id] { scroll-margin-top: var(--anchor-gap); }


/* ======================================================================================================
 * Round 3 (alex, 2026-10-18): what opens over the page, one look per kind of thing, whole rows.
 * ====================================================================================================== */

/* ---------- over the page: a card under its button, a menu, a small dialog (the popover attribute) ---------- */
.pop {
  margin: 0; padding: 0; border: 1px solid var(--line-2); border-radius: 10px;
  background: var(--surface); color: var(--text); box-shadow: var(--sh-3), var(--edge);
  overflow: auto; overscroll-behavior: contain;
}
/* Under the button that opened it, its right edges on the button's; above it, or the other way, where there is no room. */
.pop-menu, .pop-card {
  position: fixed; inset: auto; margin: 6px 0;
  position-area: bottom span-left; position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
}
.pop-start { position-area: bottom span-right; }
.pop-menu { min-width: 220px; max-width: min(320px, calc(100vw - 24px)); padding: 6px; }
.pop-card { width: min(440px, calc(100vw - 24px)); max-height: min(72vh, 620px); }
.pop-dialog { position: fixed; inset: 0; margin: auto; height: fit-content; width: min(480px, calc(100vw - 24px)); max-height: calc(100vh - 48px); }
.pop-dialog::backdrop { background: var(--scrim); }
.pop:popover-open { animation: pop var(--t) var(--ease) both; }
/* Where the browser cannot anchor it, it opens in the middle, like a dialog. */
@supports not (position-area: bottom) { .pop-menu, .pop-card { inset: 0; margin: auto; } }
/* Rendered open by the server: shown without JavaScript, in the middle, over a scrim; ui.js then opens it properly. */
.pop.is-open:not(:popover-open) {
  display: block; position: fixed; inset: 0; margin: auto; height: fit-content; z-index: 60;
  box-shadow: 0 0 0 100vmax var(--scrim), var(--sh-3);
}
.menu-at { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.menu-form { margin: 0; }
.menu-item > span { min-width: 0; }
.menu-item .icon { color: var(--icon); }
.menu-item.is-danger { color: var(--danger); }
.menu-item.is-danger .icon { color: currentColor; }
button.menu-item { cursor: pointer; }
.dialog-head { display: flex; align-items: center; gap: 12px; padding: 14px 12px 12px 20px; border-bottom: 1px solid var(--line); }
.dialog-title { flex: 1; min-width: 0; font-size: var(--fs-3); font-weight: 600; }
.dialog-body { padding: 18px 20px 20px; }
.dialog-text { color: var(--text-2); line-height: 1.5; }
.dialog-text:empty { display: none; }
/* A key named in a dialog's sentence, short: read whole, never broken across two lines. */
.dialog-text .key { white-space: nowrap; overflow-wrap: normal; }
.dialog-body .form-actions { margin-top: var(--sp-2); }
/* Connecting a source (views/connect.js): what it gives, a mark a line; the way it cannot go now; the secondary way. */
.dialog-points { display: grid; gap: 10px; margin: 14px 0 4px; padding: 0; list-style: none; }
.dialog-points li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.45; }
.dialog-points .icon { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--icon); }
.dialog-note { display: flex; gap: 8px; align-items: flex-start; margin-top: 14px; color: var(--text-2); line-height: 1.45; }
.dialog-note .icon { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--accent-text); }
.dialog-alt { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px 8px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--text-2); font-size: var(--fs-1); }
.dialog-facts { margin-top: 12px; }
/* A dialog's list runs to its edges, its rows as a card's. */
.github-pick { margin: 14px -20px 0; border-top: 1px solid var(--line); }
.form-actions.end { justify-content: flex-end; }
.dialog-body > .form-actions:first-child { margin-top: 0; }

/* ---------- one look per kind of thing ---------- */
.ref { display: inline-flex; align-items: center; gap: 7px; min-width: 0; color: var(--text); vertical-align: middle; }
.ref > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ref .icon { color: var(--icon); width: 15px; height: 15px; }
a.ref:hover > span:not(.avatar):not(.muted) { color: var(--accent-text); text-decoration: underline; text-decoration-color: var(--accent-edge); text-underline-offset: 3px; }
.ref-machine { color: var(--text-2); }
a.chip-link:hover { color: var(--text); box-shadow: inset 0 0 0 1px var(--line-3); background: var(--surface-3); }

/* ---------- a whole row is the click target; the links inside it still go to their own pages ---------- */
.rowy { position: relative; }
.row-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.rowy :is(a, button, summary, input, select, textarea, label, form):not(.row-link) { position: relative; z-index: 1; }
.rowy:has(.row-link):hover { background: var(--surface-2); }
.row-link:focus-visible { outline: none; }
.rowy:has(.row-link:focus-visible) { outline: 2px solid var(--focus); outline-offset: -2px; }
.row-mark { margin-left: auto; color: var(--icon); width: 15px; height: 15px; }

/* ---------- home: what needs you and how things are, in one small indicator ---------- */
.status-at { display: inline-flex; align-self: center; }
.status {
  display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px 0 9px; border-radius: var(--r-full);
  border: 0; font-size: var(--fs-1); font-weight: 500; line-height: 1; white-space: nowrap; cursor: pointer;
  transition: background var(--t-fast), box-shadow var(--t-fast);
}
.status .icon { width: 15px; height: 15px; color: currentColor; }
.status.is-calm { color: var(--ok); background: var(--ok-bg); box-shadow: inset 0 0 0 1px var(--ok-line); }
.status.is-calm:hover { box-shadow: inset 0 0 0 1px var(--ok); }
.status.is-busy { padding-left: 5px; color: var(--accent-text); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line); }
.status.is-busy:hover { box-shadow: inset 0 0 0 1px var(--accent); }
.status-count {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--r-full);
  background: var(--primary); color: var(--on-primary); font-size: 13px; font-weight: 600;
}
.pop-section + .pop-section { border-top: 1px solid var(--line); }
.pop-title { display: flex; align-items: center; gap: 8px; padding: 14px 18px 6px; font-size: var(--fs-1); font-weight: 500; color: var(--text-3); letter-spacing: 0; }
.pop-section .list > li { padding-left: 18px; padding-right: 18px; }
.pop-section .list > li:first-child { border-top: 0; }
.pop-section .pad { padding-top: 4px; }
.needs-list > li { display: flex; align-items: flex-start; gap: 12px; padding: 10px 18px 12px; border-top: 1px solid var(--line); }
.needs-list > li:first-child { border-top: 0; }
.need-icon {
  width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; flex: none;
  background: var(--accent-soft); color: var(--accent-text); box-shadow: inset 0 0 0 1px var(--accent-line);
}
.need-icon .icon { width: 15px; height: 15px; color: currentColor; }
.need-text { flex: 1; min-width: 0; padding-top: 4px; line-height: 1.4; color: var(--text-2); }
.need-text b { color: var(--text); font-weight: 600; }
.need-text .meta { margin-left: 4px; }
.need .choice-options { margin-top: 10px; gap: 6px; }
.need .choice-option { height: 32px; padding: 0 11px; font-size: var(--fs-1); }
.need .row-mark { margin-top: 6px; }

/* ---------- the top bar's menus, the same popover menus as everywhere ---------- */
.switcher, .person { position: relative; display: flex; align-items: center; }
.switcher { min-width: 0; }
.switcher-button {
  display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 8px 0 6px; border: 0; border-radius: var(--r-2); min-width: 0;
  background: none; color: var(--text); cursor: pointer; transition: background var(--t-fast);
}
.switcher-button:hover, .switcher-button:has(+ .pop:popover-open) { background: var(--surface-2); }
.switcher .pop-menu { min-width: 248px; }
/* An owner's bar: their organisation, a link to their home, no menu behind it. */
a.org-home { text-decoration: none; }
/* An owner's month: the report alone, as the renderer drew it, filling the page under the bar. */
body:has(.owner-report) { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
.page:has(> .owner-report) { flex: 1; min-height: 0; width: 100%; max-width: none; padding: 0; }
.owner-report { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
.owner-home { max-width: 760px; }
.person-button { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.person-button:hover .avatar, .person-button:has(+ .pop:popover-open) .avatar { box-shadow: 0 0 0 3px var(--surface-3); }
.person .pop-menu { min-width: 260px; }
.menu-item > .check { margin-left: auto; }

/* ---------- the months: one list wherever it is shown ---------- */
.months > li { display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 10px var(--sp-4) 10px 18px; border-top: 1px solid var(--line); }
.months > li:first-child { border-top: 0; }
.month-state { font-size: var(--fs-1); font-weight: 400; color: var(--text-3); line-height: 1.4; }
.month-mark { display: inline-grid; place-items: center; width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; color: var(--text-3); }
.month-mark .icon { width: 14px; height: 14px; color: currentColor; }
.month-mark .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.month-mark .ring { width: 10px; height: 10px; color: var(--icon); }
.month-mark.is-approved { color: var(--ok); }
.month-mark.is-failed { color: var(--danger); }
.month-mark.is-drafting .icon { animation: spin 1.1s linear infinite; }
.month-mark.is-ready, .month-mark.is-newer { color: var(--accent-text); }
.month-mark.is-none, .month-mark.is-prepared { color: var(--icon); }

/* ---------- Work: the months, then the domains with their projects ---------- */
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); align-items: start; }
@media (max-width: 1100px) { .grid-2 { grid-template-columns: minmax(0, 1fr); } }
.group + .group { border-top: 1px solid var(--line-2); }
/* ---------- Projects: a card a project, as many across as there is room for (two on a laptop, one on a phone); its
   facts, then its repositories as the lines above draw them ---------- */
.project-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); gap: var(--sp-3); align-items: start; }
/* The projects' list is the grid's cells, beside those waiting and those in no repository (views/projects.js). */
.project-list { display: contents; }
/* Waiting for a project: a card as wide as a project's, in the accent's tone. */
.waiting-card { background: var(--accent-bg); border-color: var(--accent-line); }
.waiting-card > .card-head { border-bottom-color: var(--accent-line); }
.waiting-card > .card-head h2 { color: var(--accent-text); }
.waiting-card .project-lines > li + li, .waiting-card .repos > li.repo + li.repo { border-top-color: var(--accent-line); }
.project-line .project-head .btn, .project-acts .btn { flex: none; }
/* A long name, its git address and Put in a project: Put in a project goes under them where a row has no room, still at
   the row's end, so every row's button lines up. */
.waiting-card .project-head { flex-wrap: wrap; row-gap: 6px; }
.project-acts { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.project-card .card-head .menu-at { margin-left: auto; }
.project-card .project-facts { padding-bottom: 6px; }
/* A project no session has worked in: where its time comes from, its next step, under its facts. */
.project-next { margin: 0 18px 4px; }
.project-repos { margin: 6px 18px 0; }
/* ---------- A repository, wherever repositories are listed (views/parts.js repositoryCard): its name, Private or Public
   and its ⋯ on one line; its description; where it lives, language and last push; its mirrors; who worked in it; what
   it did in a month ---------- */
.repos > li.repo { display: flex; flex-direction: column; gap: 6px; padding: 12px var(--sp-3) 12px 18px; min-width: 0; }
.repos > li.repo + li.repo { border-top: 1px solid var(--line); }
.repo-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-height: 28px; }
.repo-head .chip { font-size: 14px; height: 24px; color: var(--text); }
.repo-head .menu-at, .repo-head .menu { margin-left: auto; }
.repo-mark { display: inline-flex; color: var(--icon); }
.repo-mark .icon { width: 16px; height: 16px; }
.repo-desc { margin: 0; font-size: var(--fs-1); line-height: 1.45; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.repo-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0; }
.repo-where { font-family: var(--mono); font-size: 13px; color: var(--text-2); overflow-wrap: anywhere; min-width: 0; }
a.repo-where:hover { color: var(--text); }
.repo-mirrors { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 0; }
.repo-who { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: var(--fs-1); }
.repo-moved { display: flex; align-items: center; gap: 8px; margin: 0; }
/* A repository's page (views/repository.js): who made each commit, a pull request's commits under its title, the month on screen. */
.made-by { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.made-in { max-width: 34ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pull-commits { display: block; margin-top: 2px; }
.month-of .section-label { margin: 4px 0 0; }
tr.is-current > td { background: var(--accent-soft); }
/* A project's commits and pull requests (views/project.js): the latest of each, its line, then its repository and who made it. */
.git-facts dd.git-latest { display: flex; flex-direction: column; gap: 4px; }
.git-latest .row-wrap { gap: 4px 10px; }
.repo .choice { gap: 8px; padding-bottom: 2px; }
.repo .choice-option { height: 32px; padding: 0 12px; font-size: var(--fs-1); }
.repo .inline-form .input { max-width: 260px; }
.glance .repos { flex: 1; border-top: 1px solid var(--line); }
.glance-body:has(+ .repos) { flex: none; }
.glance .repos > li.repo { padding-left: 18px; }
/* A session's commits, under its repositories in Where it worked. */
.worked-label { margin: 0; padding: 14px var(--sp-4) 6px; border-top: 1px solid var(--line); }
/* A repository's address on its project's page: mono, and broken anywhere, as a relay's address is one long word. */
.repo-address { color: var(--text-2); overflow-wrap: anywhere; }
.group-head { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px var(--sp-3) 2px 18px; }
.group-title { font-size: var(--fs-2); font-weight: 600; letter-spacing: -.005em; }
.group-head .menu-at { margin-left: auto; }
.group.is-waiting { background: var(--accent-bg); }
.group.is-waiting .group-title { color: var(--accent-text); }
.group-empty { padding: 0 18px 14px; font-size: var(--fs-1); color: var(--text-3); }
.project-lines > li { display: flex; flex-direction: column; gap: 10px; padding: 6px var(--sp-3) 8px 18px; }
.project-lines > li + li { border-top: 1px solid var(--line); }
.project-lines:last-child > li:last-child { padding-bottom: 12px; }
.project-head { display: flex; align-items: center; gap: 6px; min-height: 34px; }
.project-head .chip { font-size: 14px; height: 24px; color: var(--text); }
.project-line .choice { gap: 8px; padding-bottom: 6px; }
.project-line .choice-option { height: 32px; padding: 0 12px; font-size: var(--fs-1); }
.project-line .inline-form .input { max-width: 260px; }
/* The grouping suggested for the repositories waiting (views/projects.js suggestion): each a form, its repositories ticked. */
.suggestions-label { padding: 4px 18px 0; margin-bottom: 4px; }
.suggestions > li { padding: 8px var(--sp-3) 10px 18px; }
.suggestions > li + li { border-top: 1px dashed var(--accent-line); }
.suggestions + .project-lines, .suggestions + .repos { border-top: 1px solid var(--line); }
.suggestion-form { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.suggestion-repos { gap: 6px; }
.suggestion-repo { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.suggestion-repo input { accent-color: var(--accent); margin: 0; }
.suggestion-repo .chip { font-size: 14px; height: 24px; color: var(--text); }
.suggestion-form .inline-form .input { max-width: 260px; }
.tip { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 12px; }
.tip-text { font-size: 14px; color: var(--text); white-space: nowrap; user-select: all; }
.pop-tip { width: auto; max-width: min(560px, calc(100vw - 24px)); }
.dialog-body .choice { gap: 10px; }
/* A dialog opened from a menu is that menu's child in the browser's stack of popovers: the menu stays open under it, unseen. */
html:has(.pop-dialog:popover-open) .pop-menu:popover-open { visibility: hidden; }

/* ---------- the month as it stands ---------- */
.needs-slim { align-items: center; padding: 12px 16px 12px 14px; }
.needs-slim .needs-icon { width: 32px; height: 32px; border-radius: 8px; }
.needs-slim .needs-icon .icon { width: 17px; height: 17px; }
.needs-slim .needs-title { margin-top: 0; font-size: var(--fs-3); }
.needs-slim .needs-title .project { font-size: 15px; }
.page-head .menu-at { align-self: center; }
.page-note .link { font-size: var(--fs-1); }
/* The way up: the pages above this one, each with the mark that leads down to the title. */
.crumbs-up li + li::before { content: none; }
.crumbs-up li::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid var(--icon); border-top: 1.5px solid var(--icon); transform: rotate(45deg); margin: 0 4px 0 2px; }

/* ---------- people: one table wherever it is shown ---------- */
/* Name, Role, Machines, Last sent; a row with a page is its link. In a narrow card or on a phone, a row is a block:
   the name, the role and the row's ⋯ on its first line, then the machines, then what they sent. */
.people-wrap { container-type: inline-size; }
.table.people td { height: 52px; }
.table.people tbody tr.rowy { position: relative; }
.person-name { width: 28%; }
.person-name .ref-person { font-weight: 600; color: var(--text); }
.person-name .ref-person .avatar { margin-right: 4px; }
.person-name .ref-person .muted { font-weight: 400; }
.table td.person-role { font-size: var(--fs-1); color: var(--text-3); }
.table td.person-machines { white-space: normal; font-size: var(--fs-1); line-height: 1.5; padding-top: 8px; padding-bottom: 8px; }
.person-machines > * { margin-right: 18px; }
.person-machines > :last-child { margin-right: 0; }
.person-machine { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; max-width: 100%; vertical-align: middle; }
.person-machine .ref-machine > span { white-space: nowrap; }
.table td.person-sent { font-size: var(--fs-1); color: var(--text-3); white-space: nowrap; }
/* Last sent: the fortnight's strip first, so the strips line up row under row, then when, then Behind. */
.sent { display: inline-flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; vertical-align: middle; }
.sent-days { display: inline-flex; align-items: center; gap: 2px; flex: none; }
/* Raised over the row's link, so each mark's day shows on hover. */
.rowy .sent-days { position: relative; z-index: 1; }
.sent-day { width: 7px; height: 18px; border-radius: 2px; background: var(--line-2); }
.sent-day.is-sent { background: var(--accent); }
.pill-behind { color: var(--accent-text); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line); }
.table td.person-more { width: 1%; padding-left: 0; padding-right: var(--sp-3); text-align: right; }
.person-row .tag .icon { width: 13px; height: 13px; }
@container (max-width: 640px) {
  .table.people thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .table.people, .table.people tbody { display: block; }
  .table.people tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; padding: 10px var(--sp-3) 10px 18px; border-top: 1px solid var(--line); }
  .table.people tbody tr:first-child { border-top: 0; }
  .table.people td { display: block; height: auto; width: auto; padding: 0; border: 0; }
  .table.people td.person-name { grid-area: 1 / 1; }
  .table.people td.person-role { grid-area: 1 / 2; }
  .table.people td.person-more { grid-area: 1 / 3; padding: 0; min-width: 28px; }
  .table.people td.person-machines { grid-area: 2 / 1 / auto / -1; padding: 2px 0 0 31px; }
  .table.people td.person-machines:empty { display: none; }
  .table.people td.person-sent { grid-area: 3 / 1 / auto / -1; padding: 4px 0 0 31px; }
  .table.people td.person-sent:has(> .muted) { display: none; }
}
/* Who worked on what was imported (People): in a narrow card a row is a block, name, where from and Invite on its first
   line, its repositories under them, so Invite is in reach on a phone without scrolling anything sideways. */
.offered-wrap { container-type: inline-size; }
@container (max-width: 560px) {
  .table.offered thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .table.offered, .table.offered tbody { display: block; }
  .table.offered tr { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 6px 12px; padding: 10px var(--sp-3) 10px 18px; border-top: 1px solid var(--line); }
  .table.offered tbody tr:first-child { border-top: 0; }
  .table.offered td { display: block; height: auto; width: auto; min-width: 0; padding: 0; border: 0; }
  .table.offered td.offered-name { grid-area: 1 / 1; overflow-wrap: anywhere; }
  .table.offered td.offered-from { grid-area: 1 / 2; color: var(--text-3); font-size: var(--fs-1); }
  .table.offered td.offered-invite { grid-area: 1 / 3; }
  .table.offered td.offered-repos { grid-area: 2 / 1 / auto / -1; }
}
/* An owner's sign-in, shown once: the username, the email, the password with its Copy, where to sign in. */
.sign-in-facts { align-items: center; }
.sign-in-facts dd { min-width: 0; }
/* The password whole on its line, never split at a dash; its Copy goes under it where the line is too narrow for both. */
.sign-in-facts .code-line { padding-top: 6px; padding-bottom: 6px; flex-wrap: wrap; }
.code-value.password-value { font-size: 17px; letter-spacing: .03em; }
.pop-dialog.pop-wide { width: min(640px, calc(100vw - 24px)); }
.pop-dialog .codebox-note { display: flex; align-items: center; gap: 8px; }
/* A note of several lines, its icon by its first. */
.pop-dialog .codebox-note.is-long { align-items: flex-start; }
.codebox-note.is-long .icon { flex: none; margin-top: 2.5px; }
/* A command wraps where its card is too narrow for it, in a dialog as on a card in the middle (the first machine's). */
.pop-dialog .command, .error-card .command { white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---------- everything linked: one look per kind of thing, wherever it is ---------- */
a.tag-link:hover { color: var(--text); box-shadow: inset 0 0 0 1px var(--line-3); }
.agent-tile-xs { width: 20px; height: 20px; border-radius: 6px; margin-top: 0; flex: none; }
.agent-tile-xs .icon { width: 12px; height: 12px; }
.agent-tile-xs .avatar-xs { position: absolute; right: -4px; bottom: -4px; width: 12px; height: 12px; font-size: 8px; box-shadow: 0 0 0 1.5px var(--surface); }
.ref-agent { font-weight: 500; }
.ref-agent .agent-tile-xs { margin-right: 3px; }
.ref-month { font-weight: 500; }
.facts dd.row-wrap { gap: 6px 14px; }
.table td .ref-machine, .table td .ref-agent { font-size: var(--fs-2); }
/* The model a session ran on, with its effort: "Opus 5.5 (high)", on one line. */
.ref-model { white-space: nowrap; }
/* A topic's card: the whole card the topic's link; the agents in it links to their own pages. */
div.topic:hover, .topic:has(.row-link:focus-visible) { border-color: var(--line-3); box-shadow: var(--sh-2), var(--edge); }
.topic .row-link.topic-title { color: var(--text); }
div.topic:hover .topic-foot .open { color: var(--accent-text); }
.topic-from { flex-wrap: wrap; gap: 4px 10px; }
.plain-list .tag { margin-left: 2px; }
.list > li > .grow:empty { min-width: 0; }

/* ======================================================================================================
 * Round 4 (alex, 2026-10-18): the month on one line, full width, no panel, agents as cards, one month.
 * ====================================================================================================== */

/* ---------- the way up on the title's own line: Work › October 2026, where and as big as Work is ---------- */
.page-trail { gap: 10px; }
/* Each page above at full strength, as its own page draws it, never greyed (alex, 2026-10-22: "it might be better if we
   just keep it as it is and it's clear that we are on an agents page, we are on Anna Cloud's code"): a link by its
   underline on hover. */
.trail-link { color: inherit; font-weight: inherit; border-radius: var(--r-1); text-decoration: none; }
.trail-link:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .16em; text-decoration-color: var(--accent); }
.trail-sep { width: .62em; height: .62em; flex: none; color: var(--icon); stroke-width: 2.2; }

/* ---------- the month's indicators, the same as home's ---------- */
/* A warning, the checker's: the accent, which reads as one; never the danger of a failure. */
.status.is-warn { color: var(--accent-text); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line); }
.status.is-warn:hover { box-shadow: inset 0 0 0 1px var(--accent); }
.status.is-alert { color: var(--danger); background: var(--danger-bg); box-shadow: inset 0 0 0 1px var(--danger-line); }
.status.is-alert:hover { box-shadow: inset 0 0 0 1px var(--danger); }
.status.is-quiet { color: var(--text-2); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.status.is-quiet:hover { box-shadow: inset 0 0 0 1px var(--line-3); }
.status .spin { animation: spin 1.1s linear infinite; }
.status .dot { width: 8px; height: 8px; margin: 0 3px 0 4px; border-radius: 50%; background: currentColor; flex: none; }
.pop-body { padding: 4px 18px 16px; color: var(--text-2); line-height: 1.5; }
.pop-body b { color: var(--text); font-weight: 600; }
.pop-body .output { max-height: 280px; }
.pop-foot { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; padding: 12px 18px 14px; border-top: 1px solid var(--line); background: var(--surface-2); }
.pop-foot .action-form { flex-direction: row; flex-wrap: wrap; }
.sign-off-states > li { flex-wrap: wrap; gap: 4px 10px; padding-top: 10px; padding-bottom: 10px; }
.sign-off-states .end { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px 8px; }
/* Who signed a domain off on an earlier version: their avatar, faded, a small history mark on it, a link to that
   version; who and when on hover (alex, 2026-10-18: no sentence). */
.signed-before { position: relative; display: inline-flex; flex: none; border-radius: 50%; opacity: .5; text-decoration: none; transition: opacity var(--t); }
.signed-before:hover, .signed-before:focus-visible { opacity: 1; }
.signed-before-mark { position: absolute; right: -5px; bottom: -4px; width: 13px; height: 13px; padding: 1px; border-radius: 50%; background: var(--canvas); color: var(--text-2); stroke-width: 2.2; }
.card .signed-before-mark { background: var(--surface); }
.sign-off-who .signed-before + .signed-before { margin-left: 2px; }
.findings > li { display: flex; flex-direction: column; gap: 2px; padding: 8px 18px 10px; border-top: 1px solid var(--line); line-height: 1.45; color: var(--text); }
.findings > li:first-child { border-top: 0; }
.finding-where { font-family: var(--mono); font-size: var(--fs-1); color: var(--text-3); overflow-wrap: anywhere; }
.pop-section:last-child .findings > li:last-child { padding-bottom: 14px; }

/* ---------- the month on the whole width: a domain's topics three across, four on a wide screen, one on a phone ---------- */
@media (min-width: 761px) and (max-width: 1199px) { .topics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* A wide screen gives the month more room, its bar with it, so a fourth card is as wide as the three are at 1440. */
@media (min-width: 1800px) {
  .page-wide { --page-max: 1720px; }
  .page-wide .topics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- a topic on its own page: Work › October 2026 › Deploy service ---------- */
.page-lead { max-width: 72ch; margin: -8px 0 var(--sp-3); font-size: var(--fs-4); line-height: 1.55; color: var(--text-2); }
.topic-tags { margin-bottom: var(--sp-6); }
.details-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 760px) { .details-grid { grid-template-columns: minmax(0, 1fr); } .page-lead { font-size: var(--fs-3); margin-top: 0; } }

/* ---------- agents as cards, wherever agents are listed: a grid, as many across as its column has room for (three on
   a page's width, one in Home's side column or on a phone), the whole card the link ---------- */
.agent-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: var(--sp-3); }
.agent-card {
  display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 16px 18px 18px; border-radius: var(--r-3);
  background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--sh-1), var(--edge);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.agent-card:hover, .agent-card:has(.row-link:focus-visible) { background: var(--surface); border-color: var(--line-3); box-shadow: var(--sh-2), var(--edge); }
.agent-card-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.agent-card-head .agent-tile { margin: 0 4px 0 0; flex: none; }
.agent-card .agent-name { flex: 1; min-width: 0; color: var(--text); overflow-wrap: anywhere; }
.agent-card .agent-name b { font-weight: 600; }
.agent-card .agent-state { flex: none; font-size: var(--fs-1); color: var(--text-3); }
.agent-card .agent-task { gap: 8px; color: var(--text-2); line-height: 1.45; }
.agent-card .agent-where { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin-top: auto; padding-top: 2px; font-size: var(--fs-1); }
.agent-card .agent-where .ref-person { color: var(--text-2); }
.agent-card .agent-where .avatar-sm { width: 18px; height: 18px; font-size: 11px; }
/* Agents' cards inside a card, Home's latest work in its grid: each as Agents draws it, a rule between them for a frame. */
.agent-cards.in-card { display: block; }
.in-card .agent-card { border: 0; border-radius: 0; box-shadow: none; }
.in-card .agent-card + .agent-card { border-top: 1px solid var(--line); }
.in-card .agent-card:hover, .in-card .agent-card:has(.row-link:focus-visible) { background: var(--surface-2); border-color: var(--line); box-shadow: none; }

/* ---------- a month, drawn one way everywhere: a small calendar leaf, OCT over 10, then its name ---------- */
.leaf {
  display: inline-flex; flex-direction: column; flex: none; overflow: hidden; border-radius: 6px;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2), var(--sh-1);
  text-align: center; line-height: 1; font-variant-numeric: tabular-nums; text-decoration: none;
}
.leaf-mon { display: block; background: var(--accent-soft); color: var(--accent-text); font-weight: 600; letter-spacing: .07em; box-shadow: inset 0 -1px 0 var(--accent-line); }
.leaf-num { flex: 1; display: grid; place-items: center; color: var(--text); font-weight: 600; letter-spacing: -.02em; }
.leaf-xs { width: 20px; height: 22px; border-radius: 5px; }
.leaf-xs .leaf-mon { padding: 2px 0 1px; font-size: 6px; letter-spacing: .04em; }
.leaf-xs .leaf-num { font-size: 10px; }
.leaf-sm { width: 34px; height: 38px; border-radius: 7px; }
.leaf-sm .leaf-mon { padding: 4px 0 3px; font-size: 9px; }
.leaf-sm .leaf-num { font-size: 16px; }
/* In a title, it overhangs the title's line rather than lowering it: the title stays where Work's is. */
.leaf-lg { width: 40px; height: 44px; margin: -6px 0; border-radius: 9px; }
.leaf-lg .leaf-mon { padding: 5px 0 4px; font-size: 10px; }
.leaf-lg .leaf-num { font-size: 20px; }
.month-words { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ref-month > .leaf, a.ref-month:hover > .leaf { overflow: hidden; color: inherit; text-decoration: none; }
.ref-month.month-xs { gap: 6px; }
.ref-month.month-sm { flex: 1; gap: 14px; }
.ref-month.month-sm .month-name { font-weight: 600; color: var(--text); }
.ref-month.month-sm > .month-words { white-space: normal; overflow: visible; }
a.ref-month.month-sm:hover > .month-words { color: inherit; text-decoration: none; }
.ref-month.month-lg { gap: 12px; font-weight: inherit; vertical-align: baseline; }
.ref-month.month-lg > .month-words { overflow: visible; }
.months > li { min-height: 64px; }
/* On a phone, an indicator's details take the width under it, a margin on each side, wherever its button sits. */
@media (max-width: 760px) { .status-at .pop-card { position-area: bottom span-all; left: 12px; right: 12px; width: auto; } }

/* ===============================================================================================
 * Round 4 (alex, 2026-10-18): a session on its own page, its whole conversation as the packs carry it.
 * ====================================================================================================== */

/* ---------- what a session is of: its agent, person, machine and project, as drawn everywhere ---------- */
.session-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin: -12px 0 var(--sp-5); font-size: var(--fs-2); }
.session-facts .ref-person { color: var(--text-2); }

/* ---------- its head: what it is of, then when it ran, for how long, the model, the context at the end ---------- */
.session-head { display: flex; flex-direction: column; gap: 10px; margin: -12px 0 var(--sp-6); }
.session-head .session-facts { margin: 0; }
.session-when { display: flex; flex-wrap: wrap; gap: 6px 28px; margin: 0; font-size: var(--fs-2); color: var(--text); }
.session-when > div { display: flex; align-items: baseline; gap: 8px; }
.session-when dt { font-size: var(--fs-1); color: var(--text-3); }
.session-when dd { margin: 0; }

/* ---------- the Tokens indicator's details: two small tables, tokens first, then the price ---------- */
.pop-card.pop-wide-card { width: min(700px, calc(100vw - 24px)); }
/* A session's numbers in its head, its tokens and its main conversation's context; their dialog and Details, each of
   parts under its head, the dialog scrolling past the screen's height. */
.sv-numbers { white-space: nowrap; }
.sv-numbers-ctx { padding-left: 8px; margin-left: 2px; border-left: 1px solid var(--line-2); }
.pop-dialog.pop-sections { width: min(880px, calc(100vw - 24px)); }
.pop-sections > .dialog-body { padding: 0 0 8px; }
.pop-sections .table-tight tbody th { min-width: 14em; }
.pop-sections .table tbody th .sv-state { margin: 2px 8px 0 0; }
/* Where it worked, in Details: each project, its share and its commits, then its repositories, each its chip, where it
   lives, its share and its count of commits, which opens them; the shares and counts in columns. */
.worked, .worked-repos { margin: 0; padding: 0; list-style: none; }
.worked { padding-bottom: 6px; }
.worked-project + .worked-project { margin-top: 4px; border-top: 1px solid var(--line); }
.worked-head, .worked-row { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 6px 18px; }
.worked-head { min-height: 42px; padding-top: 10px; }
.worked-row { min-height: 40px; padding-left: 34px; }
summary.worked-row { list-style: none; cursor: pointer; }
summary.worked-row::-webkit-details-marker { display: none; }
summary.worked-row:hover { background: var(--surface-2); }
.worked-row > .repo-where { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-1); color: var(--text-3); }
.worked-share { flex: none; min-width: 3.2em; text-align: right; font-variant-numeric: tabular-nums; color: var(--text-2); }
.worked-count { flex: none; display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; min-width: 8em; font-size: var(--fs-1); font-weight: 500; color: var(--accent-text); white-space: nowrap; }
.worked-count.is-none { padding-right: 18px; font-weight: 400; color: var(--text-3); }
.worked-count > .disclose-mark { width: 14px; height: 14px; transition: transform var(--t); }
.worked-fold[open] > summary .disclose-mark { transform: rotate(180deg); }
.pop-section .worked-commits { margin: 0 0 6px 34px; border-left: 2px solid var(--line); }
.pop-section .worked-commits > li { min-height: 34px; padding: 4px 18px 4px 12px; border-top: 0; }
.table-tight th, .table-tight td { height: 38px; padding: 6px 12px; }
.table-tight td:first-child, .table-tight th:first-child { padding-left: 18px; }
.table-tight td:last-child, .table-tight th:last-child { padding-right: 18px; }
.table tbody th { height: auto; background: none; font-size: var(--fs-2); font-weight: 500; color: var(--text); text-align: left; border-bottom: 1px solid var(--line); white-space: normal; }
.table tbody tr:last-child th { border-bottom: 0; }
.table tr.is-total th, .table tr.is-total td { border-top: 1px solid var(--line-2); font-weight: 600; color: var(--text); }
.table .cell-meta { white-space: normal; }
.table-tight tbody th { min-width: 11em; }
.helper-mark { display: inline-block; width: 13px; height: 13px; margin-right: 6px; vertical-align: -1px; color: var(--accent); }

/* ---------- the conversation in order: the time, a mark saying whose turn it is, what it was ---------- */
.convo { display: flex; flex-direction: column; padding: 6px 0 12px; }
.convo-day { display: flex; align-items: center; gap: 12px; padding: 14px 18px 6px; font-size: var(--fs-1); font-weight: 500; color: var(--text-3); }
.convo-day::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.turn { display: grid; grid-template-columns: 42px 22px minmax(0, 1fr); gap: 0 12px; align-items: start; padding: 6px 18px; }
.turn-at { padding-top: 3px; font-size: var(--fs-1); color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.turn-mark { display: grid; place-items: center; width: 22px; height: 24px; }
.turn-mark > .icon { width: 15px; height: 15px; color: var(--icon); }
.turn-mark .agent-tile { margin: 0; }
.turn-body { min-width: 0; padding-top: 1px; line-height: 1.5; }
.turn-note { display: block; margin-bottom: 4px; font-size: var(--fs-1); color: var(--text-3); }
.said { padding: 8px 12px; border-radius: var(--r-2); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.said-long > summary { display: block; list-style: none; cursor: pointer; }
.said-long > summary::-webkit-details-marker { display: none; }
.said-preview, .said-all { white-space: pre-wrap; }
.said-more { display: block; margin-top: 6px; font-size: var(--fs-1); font-weight: 500; color: var(--accent-text); }
.said-long > summary:hover .said-more { text-decoration: underline; text-decoration-color: var(--accent-edge); text-underline-offset: 3px; }
.said-long[open] .said-preview, .said-long .when-open, .said-long[open] .when-closed { display: none; }
.said-long[open] .when-open { display: inline; }
.said-long[open] .said-more { margin: 0 0 8px; }
/* A message its harness wrapped: its words as Markdown, who sent it and when above them, the whole behind Original. */
.said-md, .said-md .said-all { white-space: normal; }
.turn-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 28px; margin-bottom: 4px; }
.turn-head > .turn-note, .turn-head > .compacted { margin: 0; }
.turn-head > .reasoning { flex: 1; min-width: 0; }
.turn-original { flex: none; }
/* Who said it, in which room and when, up front; what Buzz put around it folded under it, behind Context. */
.said-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 0 0 5px; font-size: var(--fs-1); color: var(--text-3); }
.said-by { font-size: var(--fs-2); font-weight: 600; color: var(--text); }
.said-key { font-family: var(--mono); font-size: 12px; }
.said-room b { font-weight: 600; color: var(--text-2); }
.said-when + .said-when::before, .said-room + .said-when::before, .said-key + .said-when::before, .said-by + .said-when::before { content: "·"; margin-right: 8px; }
.said-context { margin-top: 4px; }
.said-context > summary { display: inline-flex; align-items: center; gap: 6px; padding: 1px 6px; margin-left: -6px; border-radius: var(--r-1); list-style: none; cursor: pointer; font-size: var(--fs-1); color: var(--text-3); }
.said-context > summary::-webkit-details-marker { display: none; }
.said-context > summary:hover { color: var(--text); background: var(--surface-2); }
.said-context > summary > .icon { width: 14px; height: 14px; color: var(--icon); }
.said-context .disclose-mark { transition: transform var(--t); }
.said-context[open] > summary .disclose-mark { transform: rotate(180deg); }
.said-context-body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; max-height: 420px; overflow: auto; margin-top: 6px; padding-left: 12px; border-left: 2px solid var(--line-2); font-size: var(--fs-1); color: var(--text-2); }
.said-block { width: 100%; }
.said-block-title { margin: 0 0 3px; font-size: var(--fs-1); font-weight: 600; color: var(--text); }
.said-block p { margin: 2px 0; overflow-wrap: anywhere; }
.said-facts { display: grid; grid-template-columns: minmax(90px, 150px) minmax(0, 1fr); gap: 2px 12px; margin: 2px 0; }
.said-facts > div { display: contents; }
.said-facts dt { color: var(--text-3); }
.said-facts dd { margin: 0; overflow-wrap: anywhere; }
.pop-original .original-text { max-height: min(60vh, 560px); overflow: auto; margin-top: 10px; padding: 10px 12px; border-radius: var(--r-2); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); font-family: var(--mono); font-size: var(--fs-1); white-space: pre-wrap; overflow-wrap: anywhere; }
.md.answer { color: var(--text); }
.tools { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 16px; padding-top: 1px; font-family: var(--mono); font-size: 14px; color: var(--text-2); }
.tool { white-space: nowrap; }
.tool-count { margin-left: 5px; color: var(--text-3); }
.tool-failed { margin-left: 8px; font-family: var(--font); font-size: var(--fs-1); color: var(--danger); }
/* A run of tool calls, one line (alex, 2026-10-22: "they are complete noise in the list ... We need to group them"):
   Tool calls, each tool and how many, failed ones, the time it took; opened, with no script, its calls, each folded on
   its own line as alone. */
.calls > summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; padding: 1px 6px; margin-left: -6px; border-radius: var(--r-1); }
.calls > summary::-webkit-details-marker { display: none; }
.calls > summary:hover { background: var(--surface-2); }
.calls-label { font-size: var(--fs-2); font-weight: 500; color: var(--text); }
.calls > summary > .tools { padding-top: 0; }
.calls > summary > .disclose-mark { width: 14px; height: 14px; margin-left: auto; align-self: center; color: var(--icon); transition: transform var(--t); }
.calls[open] > summary > .disclose-mark { transform: rotate(180deg); }
.calls-list { list-style: none; margin: 6px 0 2px; padding: 0 0 0 10px; border-left: 2px solid var(--line-2); }
.calls-list > .turn { padding: 4px 0; }
.reasoning > summary { list-style: none; cursor: pointer; }
.reasoning > summary::-webkit-details-marker { display: none; }
.reasoning > summary { display: inline-flex; align-items: center; gap: 8px; padding: 1px 6px; margin-left: -6px; border-radius: var(--r-1); font-size: var(--fs-1); color: var(--text-3); }
.reasoning > summary:hover { color: var(--text); background: var(--surface-2); }
.reasoning-text { margin-top: 6px; padding-left: 12px; border-left: 2px solid var(--line-2); color: var(--text-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.reasoning .disclose-mark { width: 14px; height: 14px; color: var(--icon); transition: transform var(--t); }
.reasoning[open] > summary .disclose-mark { transform: rotate(180deg); }
.helper-name { font-weight: 600; color: var(--text); }
.agent-tile.is-helper { background: var(--accent-soft); color: var(--accent-text); box-shadow: inset 0 0 0 1px var(--accent-line); }
/* An analyst's runs as a session (views/session.js): a step's tokens, a tool call with what it was given and returned. */
.step-line { display: flex; flex-wrap: wrap; gap: 2px 14px; padding-top: 2px; font-size: var(--fs-1); color: var(--text-3); font-variant-numeric: tabular-nums; }
.step-line b { font-weight: 600; color: var(--text-2); }
.call > summary { list-style: none; cursor: pointer; display: flex; flex-wrap: nowrap; align-items: baseline; gap: 2px 10px; padding: 1px 6px; margin-left: -6px; border-radius: var(--r-1); font-family: var(--mono); font-size: 14px; color: var(--text-2); }
.call > summary::-webkit-details-marker { display: none; }
.call > summary:hover { background: var(--surface-2); }
.call .tool-name { color: var(--text); }
/* Its line stays one line, as a terminal's; the whole of it opens under it. */
.call-gist { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.call > summary > .tool-name, .call > summary > .meta, .call > summary > .tool-failed { flex: none; white-space: nowrap; }
.call .disclose-mark { width: 14px; height: 14px; margin-left: auto; align-self: center; color: var(--icon); transition: transform var(--t); }
.call[open] > summary .disclose-mark { transform: rotate(180deg); }
.call-io { margin-top: 6px; padding-left: 12px; border-left: 2px solid var(--line-2); }
.call-label { margin: 6px 0 2px; font-size: var(--fs-1); font-weight: 500; color: var(--text-3); }
.call-text { margin: 0; max-height: 420px; overflow: auto; padding: 8px 10px; border-radius: var(--r-1); background: var(--surface-2); font-family: var(--mono); font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text-2); }
/* A call drawn by what it is: a command and the first lines it printed, a diff, a checklist; its rest one step away. */
.call-io > * + * { margin-top: 6px; }
.call-note { margin: 0; font-size: var(--fs-1); color: var(--text-3); }
.call-note code { font-size: 12px; }
.call-command { color: var(--text); }
.call-rest > summary { display: inline-block; padding: 1px 6px; margin-left: -6px; border-radius: var(--r-1); font-size: var(--fs-1); font-weight: 500; color: var(--accent-text); cursor: pointer; list-style: none; }
.call-rest > summary::-webkit-details-marker { display: none; }
.call-rest > summary:hover { background: var(--surface-2); }
.call-rest[open] > summary { margin-bottom: 4px; }
.call-io .diff-block { max-height: 420px; overflow: auto; background: var(--surface); font-size: 13px; }
.call-prompt { max-height: 320px; overflow: auto; padding: 8px 10px; border-radius: var(--r-1); background: var(--surface-2); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text-2); }
.todo { margin: 0; padding: 4px 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.todo-item { display: flex; align-items: baseline; gap: 10px; color: var(--text); }
.todo-mark { flex: none; display: grid; place-items: center; width: 15px; height: 15px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px var(--line-2); transform: translateY(2px); }
.todo-mark > .icon { width: 12px; height: 12px; stroke-width: 2.4; }
.todo-item.is-completed { color: var(--text-3); text-decoration: line-through; text-decoration-color: var(--line-2); }
.todo-item.is-completed .todo-mark { background: var(--ok-bg); color: var(--ok); box-shadow: inset 0 0 0 1.5px var(--ok-line); }
.todo-item.is-in-progress { font-weight: 500; }
.todo-item.is-in-progress .todo-mark { box-shadow: inset 0 0 0 1.5px var(--accent); background: radial-gradient(circle, var(--accent) 0 3px, transparent 3.5px); }
/* A message the agent sent to a Buzz room: the room, then the message as a person's is drawn, in the accent's shade. */
.turn-sent { padding-top: 10px; }
.sent-to { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font-size: var(--fs-1); color: var(--text-3); }
.sent-to > .icon { width: 14px; height: 14px; color: var(--accent-text); }
.sent-to b { font-weight: 600; color: var(--text); }
.said.sent-text { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line); }
.turn-sent .call { margin-top: 4px; }
.run-end { padding-top: 1px; color: var(--text-2); }
.compacted { display: flex; align-items: center; gap: 10px; padding-top: 2px; font-size: var(--fs-1); font-weight: 500; color: var(--text-3); }
.compacted::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }
.turn-error { color: var(--danger); overflow-wrap: anywhere; }
.convo-empty { padding: 12px; }
.turn-said { padding-top: 10px; }
.turn-reasoning, .turn-tools, .turn-call, .turn-calls { padding-top: 3px; padding-bottom: 3px; }
.turn-helper { padding-top: 8px; padding-bottom: 8px; }
.turn-answer .turn-body { padding-bottom: 4px; }
.turn-compacted .turn-mark > .icon { color: var(--accent); }
.turn-error .turn-mark > .icon { color: var(--danger); }
/* A conversation read in part ends on a line saying the rest is not shown, drawn as a compaction is. */
.turn-cut { padding-top: 8px; padding-bottom: 10px; }
.turn-cut .turn-mark > .icon { color: var(--text-3); }
/* A part of a long conversation: the way to the part before it, above its turns, and to the one after, under them. */
.turn-more { padding-top: 8px; padding-bottom: 10px; }
.turn-more .turn-mark > .icon { color: var(--text-3); }
.sv-earlier, .sv-later { font-size: var(--fs-1); font-weight: 500; }
.convo + .convo { padding-top: 0; }
.convo:has(+ .convo) { padding-bottom: 0; }
.tool-name { color: var(--text); }
/* ---------- a session as a terminal (alex, 2026-10-21): its conversations listed, the one on screen in a frame ---------- */
/* The page is the screen under the bar and does not scroll: the head, then one big terminal, a frame as tall as the
   rest of the screen, its conversations its left panel, whose turns alone scroll, drawn from the bottom up so they open
   at the end with no script. What was beside it is behind Details. */
@media (min-width: 761px) {
  body:has(.sv) { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
  body:has(.sv) > .page { flex: 1; min-height: 0; width: 100%; display: flex; flex-direction: column; padding-bottom: var(--sp-5); }
  .sv { flex: 1; min-height: 320px; display: flex; flex-direction: column; }
  .sv > .sv-frame { flex: 1; }
  .sv-pick { display: none; }
}
/* The terminal in two columns, each with its own head (alex, 2026-10-22): on the left its conversations under their
   title, from the frame's top to its bottom, its head as tall as the terminal's and staying put as the list scrolls;
   folded, with no script, to a slim bar of marks the frame's height, each working (the accent's dot) or done; a
   divider; on the right the terminal, its head, its turns, its status bar. */
.sv-main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.sv-left { flex: none; width: 280px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; border-right: 1px solid var(--line); }
.sv-left:has(> .sv-panel:not([open])) { width: 50px; }
.sv-panel-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 8px 12px 8px 16px; border-bottom: 1px solid var(--line); background: var(--surface); list-style: none; cursor: pointer; font-size: var(--fs-1); color: var(--text-3); }
.sv-panel-head::-webkit-details-marker { display: none; }
.sv-panel-title { font-size: var(--fs-3); font-weight: 600; color: var(--text); }
.sv-fold { width: 16px; height: 16px; margin-left: auto; color: var(--icon); transition: transform var(--t); }
.sv-panel-head:hover .sv-fold { color: var(--text); }
.sv-panel:not([open]) > .sv-panel-head { justify-content: center; padding: 8px 0; }
.sv-panel:not([open]) .sv-panel-title, .sv-panel:not([open]) > .sv-panel-head > .meta { display: none; }
.sv-panel:not([open]) .sv-fold { margin: 0; transform: rotate(180deg); }
.sv-panel > .sv-convs { padding-top: 6px; }
.sv-rail { display: none; flex-direction: column; align-items: center; gap: 4px; padding: 8px 0 10px; }
.sv-panel:not([open]) + .sv-rail { display: flex; }
.sv-mark { position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--r-2); color: var(--icon); }
.sv-mark:hover { background: var(--surface-2); color: var(--text); }
.sv-mark.is-current { background: var(--accent-soft); box-shadow: inset 2px 0 0 var(--accent); color: var(--accent-text); }
.sv-mark > .icon { width: 16px; height: 16px; }
.sv-mark > .sv-dot { position: absolute; top: 4px; right: 4px; color: var(--accent); }
.sv-mark-filter { margin-top: 4px; }
.sv-filter { display: flex; align-items: center; gap: 8px; margin: 2px 6px 10px; padding: 7px 10px; border-radius: var(--r-2); font-size: var(--fs-1); font-weight: 500; color: var(--text-2); text-decoration: none; }
.sv-filter:hover { background: var(--surface-2); color: var(--text); }
.sv-filter > .icon { width: 14px; height: 14px; color: var(--icon); }
.sv-filter.is-on, .sv-filter.is-on > .icon { color: var(--accent-text); }
.sv-filter > .count { margin-left: auto; color: var(--text-3); font-variant-numeric: tabular-nums; }
/* Under Show done, the done ones a group of their own below those at work, under its title, Hide done at its end; in
   the slim bar the same groups a rule apart. */
.sv-group-title { display: flex; align-items: baseline; gap: 8px; margin: 8px 6px 0; padding: 12px 10px 2px; border-top: 1px solid var(--line); font-size: var(--fs-1); font-weight: 600; color: var(--text-2); }
.sv-group-title > .meta { font-weight: 400; font-variant-numeric: tabular-nums; }
.sv-rail-rule { flex: none; width: 22px; height: 1px; margin: 4px 0; background: var(--line); }
.session-head { flex: none; }
.sv-frame {
  display: flex; min-width: 0; min-height: 0;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-3); box-shadow: var(--sh-1), var(--edge); overflow: hidden;
}
.sv-frame-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap; min-height: 52px; padding: 8px var(--sp-4); border-bottom: 1px solid var(--line); }
.sv-frame-title { display: flex; align-items: baseline; gap: 4px 12px; flex-wrap: wrap; min-width: 0; }
.sv-frame-title h2 { font-size: var(--fs-3); font-weight: 600; overflow-wrap: anywhere; }
.sv-frame-end { display: flex; align-items: center; gap: 12px; flex: none; }
.sv-scroll { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column-reverse; overscroll-behavior: contain; }
.sv-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.sv-convo { margin-bottom: auto; }
.sv-convo > .empty { padding-block: var(--sp-8); }
/* Its context at the foot, as Claude Code's own line under the prompt: the share and tokens over a bar, then the session's. */
.sv-foot { flex: none; padding: 9px var(--sp-4) 10px; border-top: 1px solid var(--line); background: var(--surface-2); }
/* Writing into the session (views/session.js writer): a strip above its status bar, as a terminal's prompt; what was written
   held above the field, the field growing no taller than a few lines. */
.sv-write { flex: none; display: flex; flex-direction: column; gap: var(--sp-2); padding: 10px var(--sp-4); border-top: 1px solid var(--line); background: var(--surface); }
.sv-write-note { display: flex; align-items: baseline; gap: var(--sp-2); margin: 0; font-size: var(--fs-1); color: var(--text-3); }
.sv-write-note .tag { flex: none; }
.sv-held { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 9rem; overflow: auto; }
.sv-held .said-head { margin: 0; display: flex; align-items: baseline; gap: var(--sp-2); font-size: var(--fs-1); }
.sv-held-text { margin: 2px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.sv-write-form { display: flex; align-items: flex-end; gap: var(--sp-2); }
.sv-write-text { flex: 1; min-width: 0; min-height: 2.6rem; max-height: 8rem; resize: vertical; font: inherit; }
.sv-gauge { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; font-size: var(--fs-1); color: var(--text-2); }
.sv-gauge-label { color: var(--text-3); margin-right: 6px; }
.sv-gauge-value { color: var(--text); white-space: nowrap; }
.sv-gauge-value b { font-weight: 600; }
.sv-gauge .meter { flex: 1 1 120px; width: auto; max-width: 360px; }
.sv-total { margin-left: auto; white-space: nowrap; color: var(--text); }
/* Working or done: the accent with a pulsing dot while it works, quiet once done. */
.sv-state { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: var(--r-full); font-size: var(--fs-1); font-weight: 500; white-space: nowrap; color: var(--text-3); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.sv-state.is-working { color: var(--accent-text); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line); }
.sv-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: sv-pulse 1.6s var(--ease) infinite; }
@keyframes sv-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .sv-dot { animation: none; } }
.sv-following { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-1); color: var(--accent-text); }
.sv-following[hidden], .sv-refresh[hidden] { display: none; }
/* Full screen, at the frame's top right: the terminal alone filling the window (?full=1, no script), or the browser's
   full screen of the frame; its icon says which way it goes. */
.sv-full > .sv-full-off, .sv.is-full .sv-full > .sv-full-on, .sv-frame:fullscreen .sv-full > .sv-full-on { display: none; }
.sv.is-full .sv-full > .sv-full-off, .sv-frame:fullscreen .sv-full > .sv-full-off { display: block; }
body:has(.sv.is-full) { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
body:has(.sv.is-full) > .topbar, .page:has(> .sv.is-full) > :not(.sv), .sv.is-full > .sv-pick { display: none; }
body:has(.sv.is-full) > .page { flex: 1; min-height: 0; width: 100%; max-width: none; padding: 0; display: flex; flex-direction: column; }
.sv.is-full { flex: 1; min-height: 0; gap: 0; }
.sv.is-full > .sv-frame, .sv-frame:fullscreen { flex: 1; height: auto; min-height: 0; border: 0; border-radius: 0; box-shadow: none; }
/* The list of conversations, the one on screen marked; each a whole row. */
.sv-convs { margin: 0; padding: 6px; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.sv-conv { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-2); color: var(--text); text-decoration: none; }
.sv-conv:hover { background: var(--surface-2); }
.sv-conv.is-current { background: var(--accent-soft); box-shadow: inset 2px 0 0 var(--accent); }
.sv-conv-mark { display: grid; place-items: center; width: 22px; height: 22px; margin: 0; }
.sv-conv-mark > .icon { width: 16px; height: 16px; color: var(--icon); }
.sv-conv-text { display: flex; flex-direction: column; min-width: 0; }
.sv-conv-name { font-size: var(--fs-2); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-conv-meta { font-size: var(--fs-1); color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-conv-end { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.sv-conv-ctx { font-size: var(--fs-1); color: var(--text-3); font-variant-numeric: tabular-nums; }
/* A helper where it started: a line that opens its own conversation. */
.helper-link { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; padding: 7px 12px; border: 1px solid var(--line-2); border-radius: var(--r-2); background: var(--surface); color: var(--text); text-decoration: none; }
.helper-link:hover { background: var(--surface-2); }
.helper-link .helper-go { width: 14px; height: 14px; margin-left: auto; color: var(--icon); }
/* An agent's sessions in progress, first in its Sessions card: each by its title, its main conversation and helpers
   working listed under it as its frame lists them, side by side as the card's width holds them rather than one row
   across it half empty; those done folded into one line, the frame's Show done, that opens in place. */
.live-sessions { margin: 0; padding: 0; list-style: none; }
.live-session + .live-session { border-top: 1px solid var(--line); }
.live-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding: 12px var(--sp-4) 0; }
.live-title { font-weight: 600; color: var(--text); }
.live-session .sv-convs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 2px 8px; padding: 6px; }
.live-session > .sv-convs:last-child { padding-bottom: 10px; }
.sv-done > summary { list-style: none; cursor: pointer; width: fit-content; margin: 0 6px 10px; }
.sv-done > summary::-webkit-details-marker { display: none; }
.sv-done > summary .disclose-mark { width: 14px; height: 14px; color: var(--icon); transition: transform var(--t); }
.sv-done[open] > summary .disclose-mark { transform: rotate(180deg); }
.sv-done[open] > summary { margin-bottom: 0; }
.sv-done > .sv-convs { padding-top: 0; padding-bottom: 10px; }
.done-sessions .row-link { font-weight: 500; }
/* On a phone the list folds under the conversation on screen, above the frame, in place of the panel. */
.sv-pick > summary { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px var(--sp-4); list-style: none; cursor: pointer; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-3); }
.sv-pick > summary::-webkit-details-marker { display: none; }
.sv-pick > summary > .sv-conv-text { flex: 1; }
.sv-pick-name { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-pick .disclose-mark { flex: none; width: 14px; height: 14px; color: var(--icon); transition: transform var(--t); }
.sv-pick[open] .disclose-mark { transform: rotate(180deg); }
.sv-pick[open] > .sv-convs { margin-top: 6px; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-3); }
@media (max-width: 760px) {
  .sv { display: flex; flex-direction: column; gap: var(--sp-4); }
  .sv-left { display: none; }
  .sv-frame { height: calc(100dvh - 132px); min-height: 360px; }
  .sv-frame-head { padding: 8px 12px; }
  .sv-foot { padding: 8px 12px; }
}
@media (max-width: 760px) {
  .turn { grid-template-columns: 38px 20px minmax(0, 1fr); gap: 0 8px; padding: 6px 12px; }
  .convo-day { padding-left: 12px; padding-right: 12px; }
}

/* ---------- a conversation with the Report Writer (views/chat.js): a panel beside the month, the box at its foot ---------- */
/* The month keeps its column and its scroll, which the browser keeps through each reload while a turn is followed; the
   panel stays in view beside it, the height of the screen under the bar, and scrolls on its own.
   While the panel is open the month's head stays under the bar, where it was, Chat in it the way to shut the panel; the
   month scrolls under it, and the panel sits under it on the right and never moves. */
:root { --talk-head: 88px; }
:root:has(.talk-split) { --anchor-gap: calc(var(--bar-h) + var(--talk-head)); }
.talk-split { display: grid; grid-template-columns: minmax(0, 1fr) var(--talk-w, 420px); gap: var(--sp-6); align-items: start; }
@media (min-width: 1500px) { .talk-split { --talk-w: 460px; } }
@media (min-width: 1101px) {
  .page:has(> .talk-split) { padding-top: 0; }
  .page:has(> .talk-split) > .page-head {
    position: sticky; top: var(--bar-h); z-index: 20; box-sizing: border-box; height: var(--talk-head);
    margin: 0; padding: var(--sp-8) 0 var(--sp-6); background: var(--canvas);
  }
}
.talk {
  position: sticky; top: var(--anchor-gap); height: calc(100dvh - var(--anchor-gap) - var(--sp-4));
  display: flex; flex-direction: column; min-width: 0;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-3); box-shadow: var(--sh-1), var(--edge); overflow: hidden;
}
.talk-head { flex: none; padding: 10px var(--sp-3) 10px var(--sp-4); border-bottom: 1px solid var(--line); }
.talk-back { display: none; }
.talk-title-row { display: flex; align-items: center; gap: 10px; min-height: 36px; }
.talk-name { flex: 1; min-width: 0; }
.talk-title { font-size: var(--fs-2); font-weight: 600; line-height: 1.3; }
/* Which conversation this is, under the title: it opens the month's others and a new one (views/chat.js switcher). */
.talk-switch { display: flex; min-width: 0; }
.talk-which {
  display: inline-flex; align-items: center; gap: 4px; max-width: 100%; margin: 0 0 0 -6px; padding: 1px 4px 1px 6px;
  border: 0; border-radius: var(--r-1); background: none; font: inherit; font-size: var(--fs-1); color: var(--text-2); cursor: pointer;
}
.talk-which > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.talk-which > .icon { flex: none; width: 14px; height: 14px; color: var(--icon); }
.talk-which:hover, .talk-which:focus-visible { color: var(--text); background: var(--surface-3); }
.pop-talk { min-width: 340px; max-width: min(400px, calc(100vw - 24px)); }
.pop-talk .role, .talk-item > span { white-space: nowrap; }
.talk-item { display: flex; flex-direction: column; min-width: 0; }
.talk-item > .meta { font-size: var(--fs-1); font-weight: 400; color: var(--text-3); }
/* Newest at the foot: drawn from the bottom up, so it opens on the latest lines with no script; a short one sits at the top. */
.talk-scroll { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column-reverse; overscroll-behavior: contain; }
.talk-convo { margin-bottom: auto; }
.talk-convo .empty { padding-block: var(--sp-8); }
.talk .turn { grid-template-columns: 38px 20px minmax(0, 1fr); gap: 0 8px; padding-left: 12px; padding-right: 14px; }
.talk .convo-day { padding-left: 12px; padding-right: 14px; }
.chat-foot { flex: none; padding: 12px var(--sp-4) 14px; border-top: 1px solid var(--line); }
.chat-compose { margin: 0; }
.chat-compose .textarea { min-height: 76px; }
.chat-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-top: 10px; }
.chat-over + .chat-actions, .chat-over + .chat-compose { margin-top: 10px; }
.turn-pending .turn-body { display: flex; flex-direction: column; gap: 6px; padding-top: 3px; }
/* The Report Writer at work (parts.js atWork): its last few steps, the newest turning, and its thinking's last sentence. */
.at-work { display: flex; flex-direction: column; gap: 3px; margin: 0; padding: 0; list-style: none; }
.at-work > li { display: flex; align-items: flex-start; gap: 8px; color: var(--text-3); line-height: 1.45; }
.at-work > li > .icon, .at-work > li > .spinner { flex: none; width: 14px; height: 14px; margin-top: 3px; }
.at-work > li > .icon { color: var(--ok); }
.at-work > li.is-now { color: var(--text); }
.at-work-thought { display: flex; align-items: flex-start; gap: 8px; margin: 2px 0 0; font-style: italic; color: var(--text-2); line-height: 1.45; }
.at-work-thought > .icon { flex: none; width: 14px; height: 14px; margin-top: 3px; font-style: normal; color: var(--accent); }
.chat-making { margin: 8px 0 0 24px; }
/* Once it made its draft, in the box's place: what became of it. */
.chat-over { display: flex; align-items: flex-start; gap: 8px; margin: 0; color: var(--text-2); line-height: 1.5; }
.chat-over > .icon { flex: none; width: 16px; height: 16px; margin-top: 3px; color: var(--ok); }
.chat-over > .icon.spin { color: var(--icon); animation: spin 1.1s linear infinite; }
/* The month in its narrower column: drawn as it would be on a narrower screen, by the room it has. */
.talk-month { container: month / inline-size; }
.talk-month .domain-main { container-type: inline-size; }
@container month (max-width: 1000px) { .report-top { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--sp-6); } }
@container month (max-width: 760px) { .report-top, .domain { grid-template-columns: minmax(0, 1fr); } }
@container (max-width: 820px) { .talk-month .topics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 821px) { .talk-month .topics { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container (max-width: 520px) { .talk-month .topics { grid-template-columns: minmax(0, 1fr); } }
/* Narrower, the panel takes the screen under the bar: the month's head and the month give way, its head's first line
   the way back to the month. */
@media (max-width: 1100px) {
  .page:has(> .talk-split) { padding-top: var(--sp-3); padding-bottom: var(--sp-3); }
  .page:has(> .talk-split) > .page-head, .talk-month { display: none; }
  .talk-split { display: block; }
  :root:has(.talk-split) { --anchor-gap: calc(var(--bar-h) + var(--sp-3)); }
  .talk { height: calc(100dvh - var(--anchor-gap) - var(--sp-3)); }
  .talk-back { display: inline-flex; align-items: center; gap: 4px; margin: -2px 0 6px -6px; padding: 2px 6px; border-radius: var(--r-1); font-size: var(--fs-1); font-weight: 500; color: var(--text-2); }
  .talk-back:hover { color: var(--text); background: var(--surface-3); }
  .talk-back .icon { width: 16px; height: 16px; }
  .talk-x { display: none; }
}
@media (max-width: 760px) {
  :root:has(.talk-split) { --anchor-gap: calc(var(--bar-h) + 44px + var(--sp-3)); }
  .chat-foot { padding: 10px 12px 12px; }
  .talk-head { padding-left: 12px; }
}

/* ---------- the context across the session: one thin line, static SVG stretched to its card ---------- */
.ctx { margin: 0; padding: 16px 18px 6px; }
.ctx-plot { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: 120px auto; column-gap: 10px; row-gap: 6px; }
.ctx-y { display: flex; flex-direction: column; justify-content: space-between; margin: -7px 0; font-size: var(--fs-1); line-height: 14px; color: var(--text-3); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ctx-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ctx-grid { stroke: var(--line); stroke-width: 1; }
.ctx-base { stroke: var(--line-3); stroke-width: 1; }
.ctx-area { fill: var(--accent); fill-opacity: .1; stroke: none; }
.ctx-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ctx-ring { stroke: var(--surface); stroke-width: 12; stroke-linecap: round; }
.ctx-dot { stroke: var(--accent); stroke-width: 8; stroke-linecap: round; }
.ctx-cut { stroke: var(--text-3); stroke-width: 1; }
.ctx-hits rect { fill: transparent; }
.ctx-hits rect:hover { fill: var(--accent); fill-opacity: .1; }
.ctx-x { grid-column: 2; display: flex; justify-content: space-between; gap: 12px; font-size: var(--fs-1); color: var(--text-3); font-variant-numeric: tabular-nums; }
.ctx-key { display: inline-flex; align-items: center; gap: 6px; }
.ctx-key i { width: 1px; height: 12px; background: var(--text-3); }
.ctx-caption { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 12px; font-size: var(--fs-1); color: var(--text-3); }
.ctx-caption b { font-size: var(--fs-2); font-weight: 600; color: var(--text); }
.ctx-table { margin: 10px -18px 0; border-top: 1px solid var(--line); }
.ctx-table > summary { display: flex; align-items: center; gap: 8px; padding: 10px 18px; list-style: none; cursor: pointer; font-size: var(--fs-1); color: var(--text-3); }
.ctx-table > summary::-webkit-details-marker { display: none; }
.ctx-table > summary:hover { color: var(--text); background: var(--surface-2); }
.ctx-table .disclose-mark { width: 14px; height: 14px; color: var(--icon); transition: transform var(--t); }
.ctx-table[open] > summary .disclose-mark { transform: rotate(180deg); }
.ctx-table .table-wrap { max-height: 360px; overflow: auto; border-top: 1px solid var(--line); }
/* Whatever leads a title (an avatar, an agent's tile, a month's leaf) overhangs its line rather than lowering it, so a
   page's title sits where its section's does, on every page (alex, 2026-10-18). A stray line from a merge, before this
   rule, had dropped it since 7381cbb. */
.page-title .head-part > .avatar, .page-title .head-part > .agent-tile, .page-title .leaf { margin-block: -12px; }

/* ---------- the head only grows: a part with its mark, the page's own title or a page above it, drawn as that page
   draws itself, where it draws it (alex, 2026-10-18: "The previous parts should not change, should not move"); no
   longer faded above (2026-10-22: its mark "gets also grey a little bit, so that it doesn't indicate that you're
   there") ---------- */
.head-part { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
.head-part .title-note { margin-left: 12px; }
/* A title that is its picker, the month's (alex, 2026-10-21): the title as it is, the switcher's ⇅ after it and its
   hover, the padding taken back so the title stays where every other page has its own. */
.head-pick {
  display: inline-flex; align-items: center; gap: 10px; min-width: 0; margin: -6px -8px; padding: 6px 8px; border: 0; border-radius: var(--r-2);
  background: none; color: inherit; font: inherit; letter-spacing: inherit; text-align: left; cursor: pointer; transition: background var(--t-fast);
}
.head-pick:hover, .page-title:has(+ .pop-pick:popover-open) .head-pick { background: var(--surface-2); }
.head-pick .updown { width: 20px; height: 20px; flex: none; color: var(--icon); }
.pop-pick { min-width: 280px; max-width: min(400px, calc(100vw - 24px)); max-height: min(70vh, 520px); }
/* The months in a column as wide as the longest name, their states in one beside them, the tick at the end. */
.pop-pick .menu-item > .ref-month { flex: 0 0 150px; }
.pop-pick .role { display: inline-flex; align-items: center; margin-left: 0; white-space: nowrap; }
/* What sits at the head's end is centred on the title's own line, whatever stands above it (a kicker) or under it (its
   context), on every page (alex, 2026-10-20: "If we show something on the right, it must be properly aligned"): the
   head a grid, the title's parts its first column, row by row, the end in the second, on the title's row. It overhangs
   that line too: a 36px button beside a 32px title lowered it. When the indicators beside the title wrap to a second
   line, the end stays on the first: at the row's top, in a box as tall as a button, its parts centred in it. */
@media (min-width: 761px) {
  .page-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 var(--sp-6); align-items: center; }
  .page-head-text { display: contents; }
  .page-head-text > * { grid-column: 1; }
  .page-head > .page-actions { grid-column: 2; grid-row: 1; margin-block: -2px; }
  .page-head:has(> .page-head-text > :nth-child(2) > .page-title) > .page-actions { grid-row: 2; }
  .page-head:has(> .page-head-text > :nth-child(3) > .page-title) > .page-actions { grid-row: 3; }
  .page-head > .page-actions { align-self: start; min-height: 36px; }
}
/* A topic's share sits beside its title, not at the line's end as on its card. */
.page-head .topic-share { margin-left: 0; }
/* The share in a topic's head is a chip, not a number left flat beside the title (alex, 2026-10-21: "should have some
   kind of background"): the head's chip shape, in the accent's own soft tokens, which each theme sets. */
.page-head .topic-share {
  display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: var(--r-full);
  font-size: var(--fs-3); color: var(--accent-text); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line);
}

/* ---------- the head in fixed slots (alex, 2026-10-20: "when the page changes, the components stay at the same place"):
   one chip beside the title in a slot of one width, whatever it says; on the right up to three actions, each in its
   slot, then the ⋯. A slot is a grid of one cell: what it holds now, and laid hidden under it what it holds in the
   page's other states, so it is as wide as the widest and its button fills it. Every button there is one height. ---------- */
.page-head { --head-chip: 16rem; }
.head-chip { display: flex; align-items: center; width: var(--head-chip); max-width: 100%; flex: none; }
.head-chip > .status-at { width: 100%; max-width: 100%; }
.head-chip .status { max-width: 100%; }
.head-chip .status > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* A chip that is a picker fills its slot, its chevron at the end, as a select does. */
.head-chip .status-fill { width: 100%; }
.head-chip .status-fill > .icon:last-child { margin-left: auto; }
.head-slot { display: inline-grid; flex: none; }
.head-slot > * { grid-area: 1 / 1; display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.slot-room { visibility: hidden; pointer-events: none; }
.slot-now > .btn, .slot-now > .status, .slot-now > .menu-at, .slot-now > .menu-at > .btn, .slot-now > .status-at, .slot-now > .status-at > .status { flex: 1 1 auto; justify-content: center; }
.slot-now > .menu-at { align-items: stretch; }
.page-actions .btn-sm { height: 36px; padding: 0 14px; font-size: var(--fs-2); gap: 8px; }
.page-actions .btn-icon { width: 36px; padding: 0; }
.page-actions .status { height: 36px; border-radius: var(--r-2); padding: 0 14px 0 11px; font-size: var(--fs-2); }
.page-actions .status.is-busy { padding-left: 7px; }
/* A refusal of the ⋯'s form hangs under it, over the page, and never widens the slot. */
.head-more { position: relative; }
.head-more .form-error { position: absolute; top: calc(100% + 6px); right: 0; width: max-content; max-width: 20rem; z-index: 2; }

/* ---------- an analyst's page: its instructions in layers, its output, settings and memory ---------- */
/* Our own agents carry Appollo41's mark, black on paper and light at night, where a person's initials would be. */
.avatar-ours { --av: var(--surface); color: var(--text); box-shadow: 0 0 0 2px var(--surface), inset 0 0 0 1px var(--line-2); }
.avatar-ours svg, .ours-mark svg { width: 8px; height: 14px; color: currentColor; }
.ours-mark { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); flex: none; }
.ref-ours, .ref-server { color: var(--text-2); }
.ref-org .org-mark { width: 18px; height: 18px; border-radius: 5px; font-size: 11px; }
.layers { list-style: none; margin: 0; padding: 12px 18px 18px; display: flex; flex-direction: column; gap: 8px; }
.layer { border: 1px solid var(--line); border-radius: var(--r-2); background: var(--surface); }
.layer-head { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; min-height: 44px; padding: 8px 14px; list-style: none; cursor: pointer; }
.layer-head::-webkit-details-marker { display: none; }
.layer-head:hover { background: var(--surface-2); }
.layer-n { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--surface-2); color: var(--text-2); font-size: var(--fs-1); flex: none; }
.layer-name { color: var(--text); }
.layer-name b { font-weight: 600; }
.layer-what { flex: 1; min-width: 12em; }
.layer-tokens { margin-left: auto; white-space: nowrap; }
.layer[open] > .layer-head { border-bottom: 1px solid var(--line); }
.layer[open] .disclose-mark { transform: rotate(180deg); }
.layer-body { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.layer-text { margin: 0; max-height: 480px; overflow: auto; padding: 12px 14px; border-radius: var(--r-2); background: var(--surface-2); color: var(--text); font-size: 14px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.agent-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
@media (max-width: 960px) { .agent-pair { grid-template-columns: minmax(0, 1fr); } }
.part-label { padding: 14px 18px 8px; font-size: var(--fs-1); font-weight: 500; color: var(--text-3); border-top: 1px solid var(--line); }
.part-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 8px; padding-bottom: 4px; }
.part-head h3 { margin: 0; font: inherit; color: inherit; }
.layer-ref { margin: 0; color: var(--text-2); }
.tag-changed { margin-left: 8px; color: var(--accent-text); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line); }
.tag-warn { color: var(--accent-text); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line); }
.tag-block { color: var(--danger); background: var(--danger-bg); box-shadow: inset 0 0 0 1px var(--danger-line); }
.pop-versions { width: min(420px, calc(100vw - 32px)); }
.version-item { align-items: flex-start; padding-top: 8px; padding-bottom: 8px; height: auto; }
.version-words { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.version-line { display: flex; align-items: center; gap: 8px; }
.version-line b { font-weight: 600; }
.version-note { color: var(--text-2); white-space: normal; line-height: 1.4; }
/* A view, not the Report Writer as it runs (alex, 2026-10-20 17:04): Compare on while two versions are compared,
   and a band right under the head saying what is on screen, with its one way out. */
.btn-secondary.is-on { color: var(--accent-text); background: var(--accent-soft); border-color: var(--accent-line); }
.btn-secondary.is-on .icon { color: var(--accent-text); }
.btn-secondary.is-on:hover { border-color: var(--accent); }
.view-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin: calc(-1 * var(--sp-2)) 0 var(--sp-5);
  padding: 8px 8px 8px 16px; border-radius: var(--r-3); background: var(--accent-bg); border: 1px solid var(--accent-line);
}
.view-bar > .icon { width: 18px; height: 18px; color: var(--accent-text); flex: none; }
.view-bar-text { flex: 1 1 16em; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 16px; margin: 0; color: var(--text-2); }
.view-bar-text b { color: var(--text); font-weight: 600; }
@media (max-width: 760px) { .view-bar { padding: 12px; } .view-bar > .btn { flex: 1 1 100%; } }
.layer-body textarea.layer-text { max-height: none; min-height: 320px; font-family: var(--mono); }
/* A layer as it reads, its Markdown rendered; Edit above it, opening the text to edit in its place (no script). */
.layer-md { max-height: 560px; overflow: auto; padding: 4px 2px; color: var(--text); }
.layer-md h4 { font-size: var(--fs-3); }
.layer-edit > summary { list-style: none; align-self: flex-start; width: fit-content; cursor: pointer; }
.layer-edit > summary::-webkit-details-marker { display: none; }
.layer-edit .when-open, .layer-edit[open] .when-closed { display: none; }
.layer-edit[open] .when-open { display: inline; }
.layer-edit[open] > summary { margin-bottom: 12px; }
.layer-body:has(> .layer-edit[open]) > .layer-md { display: none; }
.pop-dialog-wide { width: min(640px, calc(100vw - 24px)); overflow: auto; }
.pop-dialog .table-edit td { height: 40px; padding-left: 8px; padding-right: 8px; }
/* The Report Writer's output in full: the field limits beside the checker's rules, the rounds of fixes in its last row;
   its card's facts close under the line of what it writes. */
.pop-dialog-output { width: min(1120px, calc(100vw - 24px)); }
.card .output-facts { padding-top: 0; }
.output-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
@media (max-width: 960px) { .output-pair { grid-template-columns: minmax(0, 1fr); } }
.input-inline { display: inline-block; width: 4.5em; margin: 0 4px; vertical-align: middle; }
.table-edit .input-sm { width: 88px; }
.check-row { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font-size: var(--fs-2); color: var(--text); margin-right: 10px; cursor: pointer; }
fieldset.field { border: 0; margin: 0; padding: 0; }
/* The schedule's days, a week on one line: seven short labels, no wrap. */
.days-row { display: grid; grid-template-columns: repeat(7, auto); justify-content: start; gap: 0 4px; }
.days-row .check-row { margin-right: 0; gap: 4px; }
.agent-card .agent-kind { display: inline-flex; gap: 6px; margin-left: auto; }
/* A card's name, and under it, smaller, who manages it (views/agents.js); the groups of Agents, each titled. */
.agent-card .agent-title { display: flex; flex: 1; flex-direction: column; gap: 1px; min-width: 0; }
.agent-card .agent-manager { font-size: var(--fs-1); color: var(--text-3); overflow-wrap: anywhere; }
.agent-card .agent-manager a { color: var(--text-2); }
.agent-card .agent-manager a:hover { color: var(--text); text-decoration: underline; }
.agent-invited { border-style: dashed; }
/* What a group holds, a second line under its title (alex, 2026-10-20), not on the far right. */
.section-row.section-row-under { flex-direction: column; align-items: flex-start; gap: 2px; }
.agent-group .section-row .meta { color: var(--text-3); }
.agent-card .agent-where .ours-mark { width: 18px; height: 18px; }
.agent-card .agent-where .ref-ours, .agent-card .agent-where .ref-server { color: var(--text-2); }

/* Trials and the compare page (views/compare.js; Try this version, views/agent.js). */
.trial-months { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.trial-months .check-row { display: flex; gap: 10px; margin: 0; }
.trial-months .tag { margin-left: auto; }
.tag-trial { color: var(--accent-text); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line); }
/* What only one side has: a tint, and a line under it in the side's colour, readable over a whole paragraph. */
.diff-del, .diff-ins { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; border-radius: 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.diff-del { background: var(--danger-bg); text-decoration-color: var(--danger-line); }
.diff-ins { background: var(--ok-bg); text-decoration-color: var(--ok-line); }
.diff-block { margin: 0; padding: 6px 0; border: 1px solid var(--line); border-radius: 8px; font: var(--fs-1)/1.6 var(--mono); overflow-x: auto; white-space: pre-wrap; }
.diff-line { display: block; padding: 0 12px; }
.diff-line-del { background: var(--danger-bg); }
.diff-line-ins { background: var(--ok-bg); }
.diff-sign { display: inline-block; width: 1.5ch; color: var(--text-2); user-select: none; }
.diff-fold { color: var(--text-2); font-family: var(--font); }
.compare-layer + .compare-layer { padding-top: 0; }
.compare-foot { border-top: 1px solid var(--line); display: grid; gap: 4px; }
.compare-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
.compare-side-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.compare-text { white-space: pre-line; line-height: var(--lh-read); }
.compare-topics { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; line-height: var(--lh); }
.compare-topic.is-only { padding-left: 10px; box-shadow: inset 2px 0 0 var(--accent-line); }
.compare-changes { list-style: none; margin: 0; padding: 0; }
.compare-changes > li { display: flex; align-items: flex-start; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--line); }
.compare-changes > li:first-child { border-top: 0; }
.compare-changes .tag { flex: none; min-width: 72px; justify-content: center; }
.section-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; justify-content: space-between; }
.section-row .section-title { margin: 0; font-size: var(--fs-4, 18px); font-weight: 600; }
.diff-num-del { color: var(--danger); }
.diff-num-ins { color: var(--ok); }
@media (max-width: 960px) { .compare-pair { grid-template-columns: minmax(0, 1fr); } }
/* A part of a month beside the same part of another version (views/report.js, besideDialogs). */
.beside-open { color: var(--icon); flex: none; }
.report-summary { position: relative; }
.report-summary > .beside-open { float: right; margin: 0 0 4px 8px; }
.topic-head .beside-open { margin-left: auto; }
.topic-head .beside-open + .topic-share { margin-left: 4px; }
.beside-picks { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 12px; }
.beside-pick { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: 999px; font-size: var(--fs-1); color: var(--text-2); text-decoration: none; box-shadow: inset 0 0 0 1px var(--line); }
.beside-pick:hover { color: var(--text); box-shadow: inset 0 0 0 1px var(--line-strong); }
.beside-pick.is-current { color: var(--accent-text); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line); }
.beside-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-5); }
.beside-text { white-space: pre-line; line-height: var(--lh-read); margin: 0; }
.beside-legend { margin: 12px 0 0; }
@media (max-width: 760px) { .beside-pair { grid-template-columns: minmax(0, 1fr); } }
.compare-label { margin: 0 0 8px; font-size: var(--fs-1); font-weight: 500; color: var(--text-3); }
.compare-run th.num, .compare-run td.num { text-align: right; }
.compare-run td.diff-num-del { color: var(--danger); }
.compare-run td.diff-num-ins { color: var(--ok); }

/* ---------- a Buzz agent's parts (views/buzz.js) ---------- */
.key-line { display: inline-flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.key { font-family: var(--mono); font-size: var(--fs-1); color: var(--text-2); overflow-wrap: anywhere; }
/* What waits for the deploy service: its control drawn where it will be, disabled, and marked. */
.later { display: inline-flex; align-items: center; gap: var(--sp-2); }
.tag-later { color: var(--text-3); background: transparent; box-shadow: none; border: 1px dashed var(--line-3); }
.ref-room > span { color: var(--text); }
/* At work: one line per room, the room and when it started, then its state and helpers at the end. */
.work-list > li.work-row { justify-content: space-between; gap: var(--sp-4); padding-top: 10px; padding-bottom: 10px; }
.work-room, .work-state { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.work-room .ref-room { font-weight: 500; }
/* The session holding a room, what it did there last: its title, one line, cut with an ellipsis, and when it last wrote. */
.work-session { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--fs-1); }
.work-session > a, .work-session > span:not(.meta) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.work-session > .meta { flex: none; }
.work-session > svg { flex: none; color: var(--text-3); }
.work-state { align-items: flex-end; flex: none; text-align: right; }
.work-state .live-text { white-space: nowrap; }
.live-text.is-working { color: var(--text); font-weight: 500; }
.room-group { display: flex; flex-direction: column; gap: var(--sp-2); }
/* Under the rooms with a session in the last 24 hours, the others by name. */
.room-rest { border-top: 1px solid var(--line); }
/* A Buzz agent's About, its parts under their own small heads (On Buzz, Runs on), what changes how it runs at the end
   of Runs on's. */
.fact-group { border-top: 1px solid var(--line); }
.fact-group-head { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 10px 18px 0; }
.fact-group-head > .icon { width: 15px; height: 15px; color: var(--icon); }
.fact-group-head > h3 { margin: 0; font-size: var(--fs-2); font-weight: 600; }
.fact-group-head > .later { margin-left: auto; }
.fact-group > .facts { padding-top: var(--sp-3); }
/* Its anatomy, under its work and its facts and in step with their columns: What it reads, and Memory in the narrower
   one, each entry's size, versions and when on a line under its name. */
.agent-anatomy { margin-top: var(--sp-5); }
.agent-anatomy .entry-list .end { flex-basis: 100%; margin-left: 28px; }
.room-group-title { display: flex; align-items: baseline; gap: var(--sp-2); margin: 0; font-size: var(--fs-1); font-weight: 500; color: var(--text-3); }
.room-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.room-chips > li { display: inline-flex; max-width: 100%; height: 30px; padding: 0 10px; border-radius: var(--r-2); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.room-chips .ref-room { font-size: var(--fs-1); }
.work-end { display: flex; align-items: center; gap: var(--sp-2); flex: none; }
/* What the relay answered for each room, in the dialog that sent it (static/buzz.js). */
.buzz-result:empty { display: none; }
.buzz-result { display: flex; flex-direction: column; gap: 4px; margin: 0 0 var(--sp-3); font-size: var(--fs-1); }
.buzz-result p { margin: 0; }
.buzz-sent { color: var(--ok); }
.buzz-refused { color: var(--danger); }
/* An agent's fortyone commands, an admin's (views/buzz.js fleetControl): the command it runs, what a run printed, scrolled
   in place when long, and the newest runs under About. */
.fleet-line code { font-size: var(--fs-1); }
.fleet-stand-in { display: flex; align-items: baseline; gap: var(--sp-2); }
.fleet-stand-in .tag { flex: none; }
.fleet-said { margin: 0; max-height: 12rem; overflow: auto; padding: var(--sp-2) var(--sp-3); border-radius: 6px; background: var(--surface-2); color: var(--text-2); font-size: var(--fs-1); white-space: pre-wrap; overflow-wrap: anywhere; }
.fleet-runs { list-style: none; margin: 0; padding: var(--sp-3) 18px 16px; display: flex; flex-direction: column; gap: var(--sp-2); }
.fact-group > p.fleet-none { margin: 0; padding: var(--sp-3) 18px 16px; }
.fleet-run { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fleet-run-line { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.fleet-run-line code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; font-size: var(--fs-1); }
/* Narrow, a line at work wraps: its state and helpers on one line under the room, its ⋯ at the end. */
@media (max-width: 760px) {
  .work-list > li.work-row .work-end { flex-basis: 100%; justify-content: space-between; }
  .work-list .work-state { flex-direction: row; align-items: center; gap: var(--sp-3); }
}
/* What a Buzz agent reads (views/buzz.js reads): a layer that does not open, named, and the line before what it reads
   when the work needs it. */
.layer-fixed > .layer-head { cursor: default; }
.layer-fixed > .layer-head:hover { background: transparent; }
.layer-fixed .layer-name, .layer-fixed .layer-n { color: var(--text-3); }
.layers-sub { margin: var(--sp-2) 0 0; font-size: var(--fs-1); font-weight: 500; color: var(--text-3); }
.part-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.part-chips .chip { font-family: var(--mono); font-size: var(--fs-1); }
/* Its memory (views/buzz.js memory): the entries gone from it under a line of their own, faded. */
.list-head { display: flex; align-items: baseline; gap: var(--sp-2); margin: 0; padding: 12px var(--sp-4) 6px; border-top: 1px solid var(--line); font-size: var(--fs-1); font-weight: 500; color: var(--text-3); }
.list.is-gone b { font-weight: 500; color: var(--text-2); }
.entry-list .list-link { flex-wrap: wrap; row-gap: 2px; padding-top: 8px; padding-bottom: 8px; }
.entry-list .grow { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 760px) { .entry-list .end { flex-basis: 100%; margin-left: 28px; } }
/* One part of what it reads or keeps (views/reads.js): its slug under the title, its text as it reads, its versions on a
   line, newest first, the one on screen filled. */
.part-slug { font: var(--fs-1) var(--mono); color: var(--text-2); }
.part-md { color: var(--text); }
.timeline { list-style: none; margin: 0; padding: 8px 0; }
.timeline > li { position: relative; padding: 0 var(--sp-4) 8px 44px; }
.timeline > li::before { content: ''; position: absolute; left: 23px; top: 0; bottom: 0; width: 2px; background: var(--line-3); }
.timeline > li:first-child::before { top: 18px; }
.timeline > li:last-child::before { height: 18px; bottom: auto; }
.timeline > li:only-child::before { display: none; }
.timeline-dot { position: absolute; left: 18px; top: 13px; width: 12px; height: 12px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 2px var(--line-3); }
.timeline > li.is-current .timeline-dot { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.timeline-link { display: flex; flex-direction: column; gap: 2px; padding: 6px 0 2px; color: inherit; }
.timeline-link:hover b { text-decoration: underline; }
.timeline-compare { font-size: var(--fs-1); }
/* Two versions side by side, a row a line, level on both sides however a line wraps. */
.diff-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; font: var(--fs-1)/1.6 var(--mono); }
.diff-pair > .diff-line { min-height: 1.6em; white-space: pre-wrap; overflow-wrap: anywhere; }
.diff-pair > :nth-child(odd) { border-right: 1px solid var(--line); }
.diff-side-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--surface-2); font: var(--fs-2)/1.4 var(--font); }
.diff-side-head b { font-weight: 600; }
.diff-pad { background: var(--surface-2); }
@media (max-width: 760px) { .diff-pair { font-size: 11px; } .diff-pair > .diff-line { padding: 0 6px; } }
/* ---------- Servers (views/servers.js), an admin's: a card a server, as agents are, what infra/ says on top and how it
   is now at its foot, on a shade of its own beside its Mock. ---------- */
.server-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr)); gap: var(--sp-3); }
.server-card {
  display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 16px 18px 0; border-radius: var(--r-3); overflow: hidden;
  background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--sh-1), var(--edge);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.server-card:hover, .server-card:has(.row-link:focus-visible) { background: var(--surface); border-color: var(--line-3); box-shadow: var(--sh-2), var(--edge); }
.server-card-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.server-tile { flex: none; width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; background: light-dark(#1A1917, #1D2026); color: var(--accent); box-shadow: inset 0 0 0 1px light-dark(transparent, var(--line-2)); }
.server-tile .icon { width: 18px; height: 18px; color: currentColor; }
.server-tile-lg { width: 44px; height: 44px; border-radius: 11px; }
.server-tile-lg .icon { width: 22px; height: 22px; }
.page-title .server-tile { vertical-align: middle; }
.server-title { display: flex; flex: 1; flex-direction: column; gap: 1px; min-width: 0; }
.server-name { color: var(--text); font-size: var(--fs-3); }
.server-name b { font-weight: 600; }
.server-does { font-size: var(--fs-1); color: var(--text-3); }
.server-about { margin: 0; color: var(--text-2); line-height: 1.45; }
.server-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 16px; margin: 0; font-size: var(--fs-1); line-height: 1.45; }
.server-facts > div { display: contents; }
.server-facts dt { color: var(--text-3); }
.server-facts dd { margin: 0; color: var(--text-2); min-width: 0; }
.tags { display: inline-flex; flex-wrap: wrap; gap: 4px 6px; vertical-align: top; }
.tag-mono { font-family: var(--mono); font-weight: 400; }
.text-danger { color: var(--danger); }
.text-warn { color: var(--warn); }
.server-now { display: flex; flex-direction: column; gap: 12px; margin: auto -18px 0; padding: 12px 18px 14px; background: var(--surface-2); border-top: 1px solid var(--line); }
.server-now-head { display: flex; align-items: center; gap: 10px; font-size: var(--fs-1); color: var(--text-3); }
.server-now-head .tag-mock, .server-now-head .tag-real { margin-left: auto; }
/* A reading with its bar: CPU, memory, disk. The bar is SVG, its width the share, the accent's on a lighter step of it. */
.gauges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.gauge { display: flex; flex-direction: column; gap: 5px; min-width: 0; font-size: var(--fs-1); }
.gauge-label { color: var(--text-3); }
.gauge-value { color: var(--text); font-weight: 500; white-space: nowrap; }
.gauge-value .muted { font-weight: 400; }
.meter { display: block; width: 100%; height: 6px; overflow: visible; }
.meter-track { fill: var(--accent-line); }
.meter-fill { fill: var(--accent); }
.meter-warn .meter-track { fill: var(--warn-line); }
.meter-warn .meter-fill { fill: var(--warn); }
.meter-danger .meter-track { fill: var(--danger-line); }
.meter-danger .meter-fill { fill: var(--danger); }
/* A chart drawn on the server (views/charts.js): its head, the scale beside the plot, the moments under it, its table
   folded under it. The plot is stretched SVG, its strokes unscaled; a hovered moment's column shows a crosshair and its
   readout beside it, at the plot's top, on the side with room, by CSS alone. */
.chart { display: flex; flex-direction: column; gap: 10px; min-width: 0; margin: 0; }
.chart-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; font-size: var(--fs-1); color: var(--text-3); }
.chart-title { margin-right: auto; font-size: var(--fs-2); font-weight: 600; color: var(--text); }
.chart-key { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.chart-key b { color: var(--text); font-weight: 600; }
.chart-s1 { --viz: var(--viz-1); }
.chart-s2 { --viz: var(--viz-2); }
.chart-swatch { width: 14px; height: 2px; border-radius: 1px; background: var(--viz); }
.chart-swatch-limit { background: var(--line-strong); height: 1px; }
.chart-body { display: grid; grid-template-columns: max-content minmax(0, 1fr); grid-template-rows: 140px auto; column-gap: 10px; }
.chart-y { display: flex; flex-direction: column; justify-content: space-between; min-width: 36px; font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.chart-y > span { display: flex; align-items: center; justify-content: flex-end; height: 0; white-space: nowrap; }
.chart-plot { position: relative; min-width: 0; }
.chart-plot svg { display: block; width: 100%; height: 100%; overflow: visible; }
.chart-grid { stroke: var(--line); stroke-width: 1; }
.chart-limit { stroke: var(--line-strong); }
.chart-area { fill: var(--viz); fill-opacity: .1; stroke: none; }
.chart-line { fill: none; stroke: var(--viz); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart-ring { stroke: var(--surface); stroke-width: 12; stroke-linecap: round; }
.chart-dot { stroke: var(--viz); stroke-width: 8; stroke-linecap: round; }
.chart-x { grid-column: 2; display: flex; margin-top: 6px; font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.chart-x > span { display: flex; justify-content: center; flex: 1 1 0; min-width: 0; white-space: nowrap; }
.chart-x > span:first-child { justify-content: flex-start; }
.chart-x > span:last-child { justify-content: flex-end; }
.chart-hits { position: absolute; inset: 0; display: flex; }
.chart-hit { position: relative; flex: 1 1 0; min-width: 0; }
.chart-hit:hover::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; border-left: 1px solid var(--line-strong); }
.chart-tip {
  display: none; position: absolute; top: 0; left: calc(50% + 8px); z-index: 3;
  flex-direction: column; gap: 3px; padding: 8px 10px; border-radius: var(--r-2); background: var(--surface);
  box-shadow: var(--sh-3), inset 0 0 0 1px var(--line-2); font-size: var(--fs-1); color: var(--text-2); white-space: nowrap; pointer-events: none;
}
.chart-hit:hover .chart-tip { display: flex; }
.tip-end .chart-tip { left: auto; right: calc(50% + 8px); }
.chart-tip-at { color: var(--text-3); }
.chart-tip-row { display: flex; align-items: center; gap: 6px; }
.chart-tip-row b { color: var(--text); font-weight: 600; }
.chart-tip-key { width: 12px; height: 2px; border-radius: 1px; background: var(--viz); }
.chart-table summary { display: inline-flex; font-size: var(--fs-1); color: var(--text-3); cursor: pointer; }
.chart-table summary:hover { color: var(--text); }
.chart-table[open] summary { margin-bottom: 8px; }
.chart-table .table-wrap { max-height: 280px; overflow: auto; border: 1px solid var(--line); border-radius: var(--r-2); }
.chart-table .table td { height: 32px; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .chart-body { grid-template-rows: 120px auto; } }
/* A server's page (views/server.js): its health over the range in one row above its charts, two charts across (three for
   its agents'), its services and agents beside what infra/ says of it. */
.server-page .section-row { justify-content: flex-start; align-items: center; }
.server-page .section-row .tag-mock, .server-page .section-row .tag-real { margin-left: auto; }
.head-chip .tag-mock, .head-chip .tag-real { margin-left: 6px; }
.server-about-body { padding-bottom: 0; }
.server-health { display: flex; flex-direction: column; gap: 14px; padding: 14px 18px 16px; }
.gauges-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gauge .net { display: flex; flex-wrap: wrap; gap: 2px 12px; }
.gauge .net > span { display: inline-flex; align-items: center; gap: 3px; }
.gauge .net .icon { width: 13px; height: 13px; color: var(--icon); }
.chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.chart-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.chart-card { padding: 14px 16px 12px; }
.section-sub { margin: var(--sp-2) 0 0; font-size: var(--fs-2); font-weight: 600; }
.mono-sm { font-family: var(--mono); font-size: 13px; color: var(--text-2); }
.mono-sm.strong { color: var(--text); }
.server-page .grow { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.server-page .source { font: 12px var(--mono); color: var(--text-3); overflow-wrap: anywhere; }
.agent-limits > li { flex-wrap: wrap; gap: 6px 12px; padding-top: 10px; padding-bottom: 10px; }
.agent-limit-bar { display: flex; flex-direction: column; gap: 5px; flex: 1 1 260px; min-width: 0; margin-left: auto; max-width: 360px; }
.agent-limit-said { font-size: var(--fs-1); color: var(--text-2); }
.agent-limit-said b { color: var(--text); font-weight: 600; }
.limit-bar { display: block; width: 100%; height: 8px; }
.limit-bar-box { fill: var(--surface-3); }
.limit-bar-limit { fill: var(--accent-line); }
.limit-bar-used { fill: var(--accent); }
.limit-bar-warn .limit-bar-limit { fill: var(--warn-line); }
.limit-bar-warn .limit-bar-used { fill: var(--warn); }
.card-foot.text-warn { color: var(--warn); gap: 8px; }
.card-foot .icon { width: 15px; height: 15px; color: currentColor; }
.list > li:is(.backup-row, .item-row, .change-row) { align-items: flex-start; padding-top: 10px; padding-bottom: 10px; line-height: 1.4; }
.backup-row b { font-weight: 500; color: var(--text); }
.backup-row .end .icon { width: 15px; height: 15px; color: var(--ok); }
.backup-none b { color: var(--danger); }
.backup-none .end .icon { color: var(--danger); }
.item-row .tag { flex: none; min-width: 84px; justify-content: center; }
.change-on { flex: none; width: 52px; font-size: var(--fs-1); color: var(--text-3); padding-top: 1px; font-variant-numeric: tabular-nums; }
@media (max-width: 1100px) { .chart-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .chart-grid, .chart-grid-3 { grid-template-columns: minmax(0, 1fr); }
  .gauges, .gauges-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .agent-limit-bar { max-width: none; margin-left: 0; }
}

/* ---------- Releases (views/releases.js), an admin's, under Servers: fortyone's releases, a list of facts; the install
   line on top once one is published ---------- */
.release-install .card-body { padding: 14px 18px 18px; }
.releases-wrap { overflow-x: auto; }
.release-version { display: inline-flex; align-items: center; gap: 8px; vertical-align: middle; font-family: var(--mono); font-size: .93em; }
.release-version .icon { width: 15px; height: 15px; color: var(--text-3); }
.release-state { display: inline-flex; align-items: center; gap: 8px; }

/* ---------- GitHub (views/github.js) ---------- */
.github-register { max-width: 560px; }
/* An admin's Give a repository: a short form, as registering's. */
.github-give { max-width: 560px; }
.github-register .facts { padding: 4px 0; }
.github-repos td .mono { font-size: var(--fs-1); }
.github-choose th.fit { width: 1%; }
.github-choose td .mono { font-size: var(--fs-1); overflow-wrap: anywhere; }
.github-import { flex-wrap: wrap; padding: 10px 18px; }
.github-import .field-label { margin: 0; }
.github-import .select { display: inline-block; min-width: 220px; }
.github-here { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.github-pair { flex-wrap: wrap; }
.github-pair .icon { width: 14px; height: 14px; color: var(--text-3); }
.repo-github { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.repo-github .row-wrap { gap: 8px; }
.github-read { display: flex; gap: 6px; align-items: flex-start; }
.github-read .icon { width: 14px; height: 14px; flex: none; margin-top: 2px; }
.github-read.is-unread .icon { color: var(--warn, var(--accent-text)); }

/* ---------- Buzz as a source (views/buzz-source.js) ---------- */
.buzz-group + .buzz-group { border-top: 1px solid var(--line); }
.buzz-group .group-head { flex-wrap: wrap; padding-top: 10px; padding-bottom: 6px; }
.buzz-group .group-head > .icon { width: 16px; height: 16px; flex: none; color: var(--text-3); }
.buzz-name { width: 260px; max-width: 100%; font-weight: 600; }
.buzz-repos td .mono { font-size: var(--fs-1); }
/* Every group's table alike, its columns aligned down the card and Into never cut: a long key breaks anywhere. */
.buzz-repos { table-layout: fixed; min-width: 920px; }
.buzz-repos th:nth-child(1) { width: 22%; }
.buzz-repos th:nth-child(2) { width: 12%; }
.buzz-repos th:nth-child(3) { width: 32%; }
.buzz-repos th:nth-child(4) { width: 15%; }
.buzz-repos th:nth-child(5) { width: 19%; }
.buzz-repos td { min-width: 0; }
.buzz-key { display: block; overflow-wrap: anywhere; }
.buzz-repos .github-pair { display: flex; margin-top: 4px; }
.buzz-choices { display: flex; flex-direction: column; gap: 10px; }
.buzz-choice { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.buzz-repos .github-pair .mono { overflow-wrap: anywhere; min-width: 0; }
.buzz-said { display: block; margin-top: 2px; }
.buzz-into { display: block; max-width: 100%; }
.buzz-doubt { display: flex; gap: 6px; align-items: center; margin: 0; padding: 8px 18px; border-top: 1px solid var(--line); }
.buzz-doubt .icon { width: 14px; height: 14px; flex: none; color: var(--warn); }
.buzz-import { flex-wrap: wrap; padding: 10px 18px; }
.buzz-import .form-error { flex-basis: 100%; }

/* Features (views/features.js): each feature, what it does under its name, then where it is on. */
.feature-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.feature-on { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }