/* The admin UI's stylesheet, served from this origin: the Briefing console design (signed off
   2026-10-05) inside the ByteTraverse v6 identity. Funnel Display headings, Funnel Sans text,
   Fragment Mono for identifiers, all self-hosted (declared in fonts.css, which every page links:
   every policy, sign-in's too, allows fonts from this origin). Amber fill is for live things only;
   red is an outline or text, never a fill. Light and dark follow the system setting. Nothing
   moves unless the person allows motion. */
/* Metric-matched local fallbacks, so text does not jump when the brand fonts arrive, and a page
   still looks right before they do (or if they never come). */
@font-face { font-family: "Funnel Sans Fallback"; src: local("Arial"), local("Helvetica Neue"), local("Liberation Sans"); size-adjust: 100.1%; ascent-override: 99.9%; descent-override: 25%; line-gap-override: 0%; }
@font-face { font-family: "Funnel Display Fallback"; src: local("Arial"), local("Helvetica Neue"), local("Liberation Sans"); size-adjust: 106.3%; ascent-override: 94.1%; descent-override: 23.5%; line-gap-override: 0%; }

/* Tokens. Text pairs keep 4.5:1, control edges and the focus ring 3:1 (WCAG 1.4.3, 1.4.11);
   tests/admin_ui.rs checks every pair in both schemes. */
:root {
  color-scheme: light;
  --bg: #F3F2EE; --s1: #FBFAF7; --s2: #FFFFFF; --s3: #EBEAE5;
  --ink: #121211; --ink-2: #494843; --ink-3: #66645E; --ink-4: #A3A19A;
  --line: rgba(18, 18, 17, 0.14); --hair: rgba(18, 18, 17, 0.08);
  --edge: 0 0 0 1px rgba(18, 18, 17, 0.08); --hi: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --lit: #FFC933; --lit-edge: #C99700; --lit-ink: #7A5300; --wait-line: #A57A00; --dot-off: rgba(201, 151, 0, 0.14);
  --stop: #C4361F; --stop-ink: #B02F1A;
  --btn: #121211; --btn-hi: #000000; --btn-ink: #F6F5F1; --focus: #121211; --control: #66645E;
  --float: 0 12px 32px -12px rgba(40, 32, 15, 0.35);
  --m-cap: #FFFFFF; --m-edge: rgba(40, 34, 20, 0.2); --m-hi: rgba(255, 255, 255, 0); --m-frame: #5C5A54;
  /* Local faces only, until the shell names the brand ones (below). */
  --f-display: "Funnel Display", "Funnel Display Fallback", sans-serif;
  --f-sans: "Funnel Sans", "Funnel Sans Fallback", sans-serif;
  --f-mono: "Fragment Mono", ui-monospace, Menlo, monospace;
  --e: cubic-bezier(0.2, 0, 0, 1);
  --gutter: 16px; --top: 56px; --tabs: 60px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0A0A0B; --s1: #111113; --s2: #17171A; --s3: #1E1E22;
    --ink: #EDEBE6; --ink-2: #B4B2AC; --ink-3: #8F8D87; --ink-4: #56554F;
    --line: rgba(237, 235, 230, 0.14); --hair: rgba(237, 235, 230, 0.08);
    --edge: 0 0 0 1px rgba(237, 235, 230, 0.08); --hi: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    --lit: #FFC933; --lit-edge: #FFD659; --lit-ink: #FFC933; --wait-line: #FFC933; --dot-off: rgba(255, 201, 51, 0.1);
    --stop: #FF5F4A; --stop-ink: #FF7C6A;
    --btn: #EDEBE6; --btn-hi: #FFFFFF; --btn-ink: #0A0A0B; --focus: #EDEBE6; --control: #8F8D87;
    --float: 0 12px 32px -12px rgba(0, 0, 0, 0.8);
    --m-cap: #17171A; --m-edge: rgba(0, 0, 0, 0.55); --m-hi: rgba(255, 255, 255, 0.08); --m-frame: #9A9892;
  }
}
@media (min-width: 600px) { :root { --gutter: 24px; } }
@media (min-width: 1024px) { :root { --gutter: 40px; } }

/* Base. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 72px; background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--ink-2); font: 400 16px/24px var(--f-sans); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { color: var(--ink); text-wrap: balance; }
h1, h2 { font-family: var(--f-display); font-weight: 450; }
h1 { margin: 0 0 16px; font-size: 30px; line-height: 36px; letter-spacing: -0.035em; }
h2 { margin: 0 0 12px; font-size: 20px; line-height: 28px; letter-spacing: -0.02em; }
h3 { margin: 0 0 8px; font: 600 15px/20px var(--f-sans); }
p { margin: 0 0 12px; max-width: 72ch; }
b, strong { color: var(--ink); font-weight: 600; }
a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--ink-4); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--ink); }
code { font-family: var(--f-mono); font-size: 0.875em; color: var(--ink); overflow-wrap: anywhere; word-break: break-all; }
/* An admin-set Node name (#66): one line, cut with an ellipsis, inside <bdi> so its direction
   cannot reorder the text around it. A page heading that is a long name wraps anywhere. */
.endpoint-name { display: inline-block; max-width: min(24rem, 100%); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
main > h1, main > .page > h1 { overflow: hidden; overflow-wrap: anywhere; }
::selection { background: var(--lit); color: #1A1300; }
/* Every focusable thing shows focus: links, buttons, inputs, selects, textareas, summaries. */
:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
main:focus { outline: none; }
.skip { position: absolute; left: 8px; top: -64px; z-index: 60; padding: 8px 16px; border-radius: 8px; background: var(--btn); color: var(--btn-ink); text-decoration: none; font-weight: 500; }
.skip:focus { top: 8px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.sprite { display: none; }

/* The mark, the pixel byte and icons. */
.m-cap { fill: var(--m-cap); stroke: var(--m-edge); }
.m-hi { stroke: var(--m-hi); fill: none; }
.m-frame { stroke: var(--m-frame); fill: none; }
.m-lit { fill: var(--lit); }
.ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.bits rect { fill: var(--ink-4); }
.bits rect.on { fill: var(--lit); }
.lockup { display: inline-flex; align-items: center; height: 28px; color: var(--ink); text-decoration: none; border-radius: 8px; }
.lockup .mark { margin-right: 10px; flex: none; }
.wm { display: inline-block; font: 520 20px/20px var(--f-display); letter-spacing: -0.025em; color: var(--ink); }
.lockup .bits { align-self: flex-start; margin: 8px 0 0 4px; flex: none; }
.avatar { width: 32px; height: 32px; border-radius: 50%; display: inline-grid; place-items: center; flex: none; background: var(--s3); color: var(--ink); font: 600 13px/1 var(--f-sans); box-shadow: var(--edge); }

/* The shell, phone first: a top bar, the page, and a bottom tab bar with a Menu sheet. */
.topbar { position: sticky; top: 0; z-index: 20; height: var(--top); display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 var(--gutter); background: var(--bg); box-shadow: 0 1px 0 var(--hair); }
/* The avatar leads to Settings: a 44px target around the 32px avatar, pulled into the gutter so the avatar keeps its place. */
.topbar .me { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; margin-right: -6px; border-radius: 50%; text-decoration: none; }
.topbar .me:focus-visible { outline-offset: -3px; }
.topbar .me:hover .avatar { box-shadow: inset 0 0 0 1px var(--ink-3); }
.rail { display: none; }
main { display: block; padding: 20px var(--gutter) calc(var(--tabs) + 48px); min-width: 0; }
.page { max-width: 1120px; margin: 0 auto; }

.tabbar { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding-bottom: env(safe-area-inset-bottom); background: var(--s1); box-shadow: 0 -1px 0 var(--line); }
.tab, .menu-sheet > summary { position: relative; height: var(--tabs); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--ink-3); font: 500 12px/16px var(--f-sans); text-decoration: none; cursor: pointer; list-style: none; }
.menu-sheet > summary::-webkit-details-marker { display: none; }
.tab:focus-visible, .menu-sheet > summary:focus-visible { outline-offset: -4px; border-radius: 8px; }
.tab[aria-current], .menu-sheet[open] > summary, .menu-sheet[data-here] > summary { color: var(--ink); }
.tab[aria-current]::before, .menu-sheet[data-here] > summary::before { content: ""; position: absolute; top: 0; left: 50%; width: 32px; height: 2px; margin-left: -16px; background: var(--ink); border-radius: 0 0 2px 2px; }
.menu-panel { position: fixed; left: 8px; right: 8px; bottom: calc(var(--tabs) + 8px + env(safe-area-inset-bottom)); max-height: calc(100dvh - 140px); overflow-y: auto; padding: 12px 8px 16px; border-radius: 16px; background: var(--s2); box-shadow: var(--float), var(--edge); }
.menu-foot { margin-top: 16px; padding: 16px 12px 0; box-shadow: 0 -1px 0 var(--hair); display: grid; gap: 12px; }

.nav ul { margin: 0; padding: 0; list-style: none; }
.nav-group + .nav-group { margin-top: 16px; }
.nav-label { display: block; padding: 0 12px 4px; font: 500 13px/20px var(--f-sans); color: var(--ink-3); }
.nav a { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 0 12px; border-radius: 8px; color: var(--ink-2); text-decoration: none; font: 500 15px/20px var(--f-sans); }
.nav a:hover { background: var(--hair); color: var(--ink); }
.nav a[aria-current] { background: var(--s2); color: var(--ink); box-shadow: var(--edge), var(--hi); }

.who { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-3); }
.who > span:last-child { min-width: 0; overflow-wrap: anywhere; }
form.signout { margin: 0; }
form.signout button { min-height: 32px; padding: 0 4px; background: none; box-shadow: none; color: var(--ink-3); font: 400 14px/20px var(--f-sans); text-decoration: underline; text-decoration-color: var(--ink-4); text-underline-offset: 3px; }
form.signout button:hover { background: none; color: var(--ink); }

.subnav { display: flex; gap: 8px; margin: -4px 0 20px; overflow-x: auto; scrollbar-width: none; }
.subnav a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 999px; color: var(--ink-2); text-decoration: none; font: 500 14px/20px var(--f-sans); box-shadow: inset 0 0 0 1px var(--line); white-space: nowrap; }
.subnav a[aria-current] { background: var(--btn); color: var(--btn-ink); box-shadow: none; }

@media (min-width: 1024px) {
  .topbar, .tabbar, .subnav { display: none; }
  .app { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 100vh; }
  .rail { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 0; height: 100vh; overflow-y: auto; padding: 24px 12px 16px; background: var(--s1); box-shadow: 1px 0 0 var(--hair); }
  .rail .lockup { margin: 0 8px 4px; }
  .rail .nav { flex: 1; }
  .rail-foot { padding: 16px 8px 0; box-shadow: 0 -1px 0 var(--hair); display: grid; gap: 8px; }
  main { padding: 48px var(--gutter) 96px; }
  h1 { font-size: 40px; line-height: 44px; margin-bottom: 20px; }
}

main.narrow { max-width: 440px; margin: 48px auto; padding: 24px; border-radius: 16px; background: var(--s2); box-shadow: var(--edge); }
@media (max-width: 479px) { main.narrow { margin: 16px; } }

/* Controls. */
input, select, button { font: inherit; padding: 8px 12px; border: 1px solid var(--control); border-radius: 8px; background: var(--s2); color: var(--ink); min-height: 40px; max-width: 100%; }
input[type="radio"], input[type="checkbox"] { accent-color: var(--ink); width: 18px; height: 18px; min-height: 0; margin: 0 8px 0 0; padding: 0; vertical-align: -3px; }
textarea { font: inherit; padding: 8px 12px; border: 1px solid var(--control); border-radius: 8px; background: var(--s2); color: var(--ink); width: 100%; max-width: 40rem; }
button, a.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; background: var(--btn); color: var(--btn-ink); font: 500 15px/20px var(--f-sans); cursor: pointer; white-space: nowrap; }
button:hover, a.button:hover { background: var(--btn-hi); }
a.button { min-height: 40px; padding: 0 16px; border-radius: 8px; text-decoration: none; }
button.danger { background: transparent; color: var(--stop-ink); box-shadow: inset 0 0 0 1px var(--stop); }
button.danger:hover { background: transparent; box-shadow: inset 0 0 0 2px var(--stop); }
button.link { min-height: 0; padding: 0; background: none; color: var(--ink); font-weight: 400; text-decoration: underline; text-decoration-color: var(--ink-4); text-underline-offset: 3px; white-space: normal; }
button.link:hover { background: none; text-decoration-color: var(--ink); }
.stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; max-width: 40rem; }
.stack > label { font: 500 14px/20px var(--f-sans); color: var(--ink); }
.filters { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: end; margin-bottom: 16px; }
.filters label { display: grid; gap: 4px; font: 500 14px/20px var(--f-sans); color: var(--ink); }
.field { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin: 0 0 16px; max-width: 40rem; }
.field label { font: 500 14px/20px var(--f-sans); color: var(--ink); }
/* A real border, not an inset shadow: only a border opens a gap for the legend, so the line
   breaks around the heading. Padding is 1px less than the 16px rhythm so content sits where
   it would without the border; the legend's side padding is the gap, and its negative start
   margin lines the heading's text up with the content below. */
fieldset { margin: 0 0 16px; padding: 12px 15px 11px; max-width: 48rem; min-width: 0; border: 1px solid var(--line); border-radius: 12px; }
fieldset label { display: block; padding: 4px 0; overflow-wrap: anywhere; }
legend { padding: 0 6px; margin-inline-start: -6px; font: 600 14px/20px var(--f-sans); color: var(--ink); }
.hint { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-3); }

/* Status, errors and notes: red as an outline or text, never a fill. */
.error { color: var(--stop-ink); font-weight: 600; }
[aria-invalid="true"] { border: 2px solid var(--stop); }
.field-error { margin: 0; }
.field-error::before { content: "Error: "; }
.error-summary { margin: 0 0 24px; padding: 16px; border-radius: 12px; box-shadow: inset 0 0 0 2px var(--stop); color: var(--ink); }
.error-summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.error-summary h2 { margin-top: 0; font-size: 18px; line-height: 24px; }
.risk { color: var(--stop-ink); }
.risk::before { content: "\26A0  "; }
.done { padding: 12px 16px; border-radius: 8px; background: var(--s2); box-shadow: inset 3px 0 0 var(--ink), var(--edge); color: var(--ink); }
.stub { padding: 16px 20px; border-radius: 12px; background: var(--s2); box-shadow: inset 0 0 0 1px var(--ink-3); }
.empty { color: var(--ink-3); }
.yes { font-weight: 600; color: var(--ink); }
.no { color: var(--ink-3); }
.role { display: inline-block; margin-right: 12px; }
code.secret { display: inline-block; padding: 4px 8px; border-radius: 8px; background: var(--s3); font-size: 17px; user-select: all; }

/* Tables and facts. */
table { border-collapse: collapse; font-size: 14px; line-height: 20px; }
/* A wide table with something to Tab to scrolls inside its own box, so the page does not scroll
   sideways, and a keyboard reaches all of it. It is the containing block of its visually hidden
   labels, so they scroll (and clip) with it. A table with nothing to Tab to cannot scroll (a box a
   keyboard cannot reach would hide its far columns), so its cells wrap anywhere to fit instead.
   The section rebuilds replace these tables with rows. */
table:has(a[href], button, input, select, textarea, summary) { position: relative; display: block; max-width: 100%; overflow-x: auto; }
table:not(:has(a[href], button, input, select, textarea, summary)) :is(th, td, td code) { overflow-wrap: anywhere; }
caption { text-align: left; padding: 8px 0; font: 600 15px/20px var(--f-sans); color: var(--ink); }
th, td { text-align: left; vertical-align: top; padding: 10px 12px; box-shadow: inset 0 -1px 0 var(--hair); }
/* In a cell, words and identifiers stay whole: the table grows and scrolls rather than squeezing a
   column to a letter a line. */
td code, th code { word-break: normal; overflow-wrap: normal; }
thead th { font: 500 13px/20px var(--f-sans); color: var(--ink-3); box-shadow: inset 0 -1px 0 var(--line); }
tbody th { color: var(--ink); font-weight: 600; }
.facts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px 16px; margin: 0 0 24px; padding: 16px; border-radius: 12px; background: var(--s2); box-shadow: var(--edge); }
.facts dt { font: 500 13px/20px var(--f-sans); color: var(--ink-3); }
.facts dd { margin: 0 0 8px; color: var(--ink); overflow-wrap: anywhere; }
@media (min-width: 480px) { .facts { grid-template-columns: max-content minmax(0, 1fr); } .facts dd { margin: 0; } }
.facts.record { margin: 0; }
section { margin-top: 32px; }
section.group { margin-top: 16px; padding-left: 16px; box-shadow: inset 2px 0 0 var(--line); }
ul.ops { margin: 0; padding-left: 18px; }
form.inline { display: inline; margin-left: 8px; }

/* Today (the Briefing's first page): the sentence, the queues with severity frames, Live now with
   its one dot-matrix clock, recent revocations as rows, and the calm counts. Amber is for live
   things and waiting outlines only; red is an outline or text; degraded is a neutral outline. */
.dateline { margin: -8px 0 8px; font: 500 14px/20px var(--f-sans); color: var(--ink-3); }
.summary { margin: 0; font-size: 16px; line-height: 24px; max-width: 62ch; color: var(--ink); text-wrap: pretty; }
section.part { margin-top: 32px; }
.group-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.group-h h2, .live-h h2 { margin: 0; }
.group-h .n { font: 500 14px/20px var(--f-sans); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.queue, .livelist, .revoked, .calm ul { margin: 0; padding: 0; list-style: none; }
.queue { display: grid; gap: 8px; }
.qi { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 4px 12px; padding: 16px; border-radius: 12px; background: var(--s2); box-shadow: var(--edge); }
.qi > .ic { margin-top: 2px; color: var(--ink-3); }
.qi .t { display: grid; gap: 2px; min-width: 0; font-size: 15px; line-height: 22px; overflow-wrap: anywhere; }
.qi-link { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 16px; line-height: 24px; }
.qi-link b { font-weight: 700; }
.qi-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.qi-link:focus-visible { outline: none; }
.qi-link:focus-visible::after { outline: 2px solid var(--focus); outline-offset: 2px; }
.qi:hover { background: var(--s1); }
.qi .line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 4px; font-size: 14px; line-height: 20px; color: var(--ink-2); }
.qi-actions { grid-column: 2; position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; }
.qi[data-st="stop"] { box-shadow: inset 0 0 0 2px var(--stop); }
.qi[data-st="wait"] { box-shadow: inset 0 0 0 2px var(--wait-line); }
.qi[data-st="degraded"] { box-shadow: inset 0 0 0 1px var(--ink-3); }
.qi[data-st="stop"] > .ic { color: var(--stop-ink); }
.qi[data-st="wait"] > .ic { color: var(--lit-ink); }
.qi[data-st="degraded"] > .ic { color: var(--ink); }
.st { display: inline-flex; align-items: center; gap: 8px; font: 500 14px/20px var(--f-sans); color: var(--ink-2); }
.st::before { content: ""; width: 8px; height: 8px; border-radius: 2px; flex: none; }
.st-wait { color: var(--lit-ink); }
.st-wait::before { box-shadow: inset 0 0 0 2px var(--wait-line); }
.st-stop { color: var(--stop-ink); font-weight: 600; }
.st-stop::before { box-shadow: inset 0 0 0 2px var(--stop); }
.st time, .meta time, .clock-words time, .dateline time { color: var(--ink-3); font-weight: 400; }
.chip { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; border-radius: 4px; font: 500 13px/16px var(--f-sans); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink-3); }
button.small { min-height: 32px; padding: 0 12px; font-size: 14px; }
button.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--control); }
button.ghost:hover { background: transparent; box-shadow: inset 0 0 0 2px var(--control); }
.go { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font-weight: 500; color: var(--ink); text-decoration: none; }
.go::after { content: ""; width: 6px; height: 6px; border: solid currentColor; border-width: 1.5px 1.5px 0 0; transform: rotate(45deg); }
.go:hover { text-decoration: underline; text-underline-offset: 4px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* Live now: one clock, for the session live the longest; the others are rows. */
.live { padding: 20px; border-radius: 16px; background: var(--s2); box-shadow: var(--edge); }
.live-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.live-h span { font-size: 14px; color: var(--ink-3); }
.soonest { display: grid; gap: 12px; margin-top: 16px; padding-bottom: 20px; box-shadow: 0 1px 0 var(--hair); }
.soonest .label { margin: 0; font-size: 15px; line-height: 22px; color: var(--ink); overflow-wrap: anywhere; }
.clockrow { display: flex; flex-wrap: wrap; align-items: end; gap: 12px 20px; }
.dclock { display: block; width: 198px; max-width: 100%; height: auto; flex: none; }
.dclock .u { fill: var(--dot-off); }
.dclock .on { fill: var(--lit); stroke: var(--lit-edge); stroke-width: 1; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dclock .on { stroke: var(--lit); } }
.clock-words { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-2); }
.clock-units { display: block; color: var(--ink-3); }
.livelist li { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 2px 12px; align-items: baseline; padding: 12px 0; box-shadow: 0 1px 0 var(--hair); font-size: 14px; line-height: 20px; }
.livelist .cell { width: 10px; height: 10px; border-radius: 2px; background: var(--lit); box-shadow: 0 0 0 1px var(--lit-edge); }
.livelist div { min-width: 0; overflow-wrap: anywhere; }
.livelist b { display: block; font-size: 15px; line-height: 22px; }
.livelist .ends { grid-column: 2; color: var(--ink); font-variant-numeric: tabular-nums; }
.live-foot { padding-top: 12px; }
@media (min-width: 600px) {
  .livelist li { grid-template-columns: 10px minmax(0, 1fr) auto; }
  .livelist .ends { grid-column: 3; white-space: nowrap; }
}
@media (min-width: 1024px) {
  .live { padding: 24px 28px; }
  .dclock { width: 264px; }
}

/* Recently revoked: a row each, readable on a phone. */
.revoked { border-radius: 12px; background: var(--s2); box-shadow: var(--edge); }
.revoked li { display: grid; gap: 2px; padding: 12px 16px; font-size: 14px; line-height: 20px; overflow-wrap: anywhere; }
.revoked li + li { box-shadow: 0 -1px 0 var(--hair); }
.revoked b { font-size: 15px; line-height: 22px; }
.revoked .why { color: var(--ink-2); }
.revoked .meta { color: var(--ink-3); }
/* The ids behind each row; its 40px target eats into the row's padding, not the row's height. */
.revoked .tech { margin: 0 0 -10px; }
.revoked .tech > summary { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; cursor: pointer; list-style: none; font: 500 14px/20px var(--f-sans); color: var(--ink-2); border-radius: 4px; }
.revoked .tech > summary::-webkit-details-marker { display: none; }
.revoked .tech > summary::before { content: ""; width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(-45deg); margin: 0 4px 0 2px; }
.revoked .tech[open] > summary::before { transform: rotate(45deg); }
.revoked .tech > summary:hover { color: var(--ink); }
.revoked .facts.mono { margin: 0 0 4px; background: var(--s3); box-shadow: none; }
.revoked .facts.mono dd { font: 400 13px/20px var(--f-mono); color: var(--ink); word-break: break-all; }

/* Everything else: calm counts, each a link. */
.calm ul { border-radius: 12px; background: var(--s2); box-shadow: var(--edge); }
.calm li + li { box-shadow: 0 -1px 0 var(--hair); }
.calm a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 16px; padding: 12px 16px; text-decoration: none; border-radius: 12px; }
.calm a:hover { background: var(--s1); }
.calm-name { font-weight: 600; color: var(--ink); }
.calm-note { grid-row: 2; font-size: 14px; line-height: 20px; color: var(--ink-2); min-width: 0; overflow-wrap: anywhere; }
.calm-n { grid-row: 1 / 3; grid-column: 2; align-self: center; font: 450 20px/1 var(--f-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.assistant { margin-top: 32px; padding: 16px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); }
.assistant h2 { margin: 0 0 4px; font: 600 15px/20px var(--f-sans); color: var(--ink-2); }
.assistant p { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-3); }
@media (min-width: 1024px) {
  .dateline { margin-top: -12px; }
  .summary { font-size: 17px; line-height: 28px; }
  section.part { margin-top: 48px; }
}

/* Motion, only for people who allow it. */
@media (prefers-reduced-motion: no-preference) {
  button, a.button { transition: background-color 200ms var(--e), box-shadow 200ms var(--e); }
  @keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  .menu-sheet[open] .menu-panel { animation: rise 320ms var(--e); }
  @keyframes bit { 0% { fill: var(--lit); } 12.5% { fill: var(--ink-4); } }
  .lockup:hover .bits rect { animation: bit 480ms steps(1, end) 1; }
  .lockup:hover .bits rect:nth-child(2) { animation-delay: 60ms; } .lockup:hover .bits rect:nth-child(3) { animation-delay: 120ms; }
  .lockup:hover .bits rect:nth-child(4) { animation-delay: 180ms; } .lockup:hover .bits rect:nth-child(5) { animation-delay: 240ms; }
  .lockup:hover .bits rect:nth-child(6) { animation-delay: 300ms; } .lockup:hover .bits rect:nth-child(7) { animation-delay: 360ms; }
  .lockup:hover .bits rect:nth-child(8) { animation-delay: 420ms; }
}
@media (forced-colors: active) {
  .facts, .stub, .done, .error-summary, fieldset, .menu-panel, main.narrow, .qi, .live, .revoked, .calm ul { border: 1px solid CanvasText; }
  button, a.button, .subnav a { border: 1px solid ButtonText; }
  .tab[aria-current], .nav a[aria-current], .subnav a[aria-current] { outline: 2px solid Highlight; }
}
@media print {
  .rail, .topbar, .tabbar, .subnav, .skip { display: none !important; }
  main { padding: 0; }
}

/* ---- Audit ---- */
/* The Audit page (web/audit_page.rs): a plain sentence, the integrity findings, a filter sentence,
   readable rows, and the open entry beside the list on a wide screen (above it on a phone). Red is
   an outline or text, never a fill. Uses the shell's tokens only. */
.au-head { display: grid; gap: 16px; margin: -4px 0 28px; }
.au-lede { margin: 0; max-width: 62ch; font-size: 16px; line-height: 24px; color: var(--ink-2); text-wrap: pretty; }
.au-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 8px; background: var(--s2); color: var(--ink); font: 500 15px/20px var(--f-sans); text-decoration: none; box-shadow: inset 0 0 0 1px var(--control); cursor: pointer; list-style: none; white-space: nowrap; }
.au-btn:hover { background: var(--s1); box-shadow: inset 0 0 0 1px var(--ink); }
.au-btn::-webkit-details-marker { display: none; }
.au-export { justify-self: start; }
.au-export[open] > summary { box-shadow: inset 0 0 0 2px var(--ink); }
.au-export-panel { margin-top: 8px; max-width: 360px; padding: 16px; border-radius: 12px; background: var(--s2); box-shadow: var(--float), var(--edge); }
.au-export-panel form { display: grid; gap: 12px; }
.au-export-panel fieldset { margin: 0; padding: 0; border: 0; border-radius: 0; }
.au-export-panel legend { padding: 0; margin: 0 0 4px; }
.au-export-panel fieldset label { display: flex; align-items: center; min-height: 32px; padding: 0; font-size: 14px; line-height: 20px; color: var(--ink); }
.au-export-panel > form > label { display: grid; gap: 4px; font: 500 14px/20px var(--f-sans); color: var(--ink); }
.au-export-panel button { justify-self: start; min-height: 40px; padding: 0 16px; border-radius: 8px; }
@media (min-width: 600px) {
  .au-head { grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 24px; }
  .au-export { position: relative; justify-self: end; }
  .au-export-panel { position: absolute; z-index: 10; right: 0; top: 40px; width: 340px; }
}
@media (min-width: 1024px) { .au-lede { font-size: 17px; line-height: 28px; } }

.au-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.au-main > section:first-child { margin-top: 0; }
.au-detail { display: grid; gap: 20px; align-content: start; min-width: 0; padding: 20px; border-radius: 16px; background: var(--s2); box-shadow: var(--edge); scroll-margin-top: 72px; }
.au-detail.is-default { display: none; }
.au-back { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; justify-self: start; font: 500 14px/20px var(--f-sans); }
.au-pane-h { display: grid; gap: 8px; }
.au-pane-h h2 { margin: 0; font-size: 22px; line-height: 28px; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.au-detail > p { margin: 0; font-size: 15px; line-height: 24px; }
@media (min-width: 1200px) {
  .au-cols { grid-template-columns: minmax(0, 1fr) 380px; gap: 40px; align-items: start; }
  .au-main { grid-column: 1; grid-row: 1; }
  .au-detail { grid-column: 2; grid-row: 1; position: sticky; top: 24px; max-height: calc(100vh - 48px); overflow-y: auto; }
  .au-detail.is-default { display: grid; }
  .au-back { display: none; }
}

.au-st { display: inline-flex; align-items: center; gap: 8px; justify-self: start; font: 500 14px/20px var(--f-sans); color: var(--ink-2); }
.au-st::before { content: ""; width: 8px; height: 8px; border-radius: 2px; flex: none; }
.au-st-stop { color: var(--stop-ink); font-weight: 600; }
.au-st-stop::before { box-shadow: inset 0 0 0 2px var(--stop); }
.au-st-fine { color: var(--ink-3); }
.au-st-fine::before { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-4); }
.au-st-pending { color: var(--ink); }
.au-st-pending::before { border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ink-2); }
.au-why { display: grid; gap: 10px; padding: 16px; border-radius: 12px; box-shadow: inset 0 0 0 1.5px var(--stop); font-size: 15px; line-height: 22px; color: var(--ink); }
.au-why p { margin: 0; }
.au-k { display: block; font: 600 13px/20px var(--f-sans); color: var(--stop-ink); }
.au-k.au-fix { color: var(--ink-3); }
.au-facts { display: grid; gap: 2px; margin: 0; padding: 12px 16px; border-radius: 12px; background: var(--s3); }
.au-facts > div { display: grid; gap: 0 16px; padding: 4px 0; }
.au-facts dt { font: 500 13px/20px var(--f-sans); color: var(--ink-3); }
.au-facts dd { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink); overflow-wrap: anywhere; }
.au-facts dd code { word-break: normal; overflow-wrap: anywhere; }
.au-mono dd, .au-mono dd code { font: 400 13px/20px var(--f-mono); word-break: break-all; }
@media (min-width: 480px) { .au-facts > div { grid-template-columns: 112px minmax(0, 1fr); } }
.au-links { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 0; font-size: 14px; line-height: 20px; }
.au-links a { display: inline-flex; align-items: center; min-height: 32px; font-weight: 500; }
.au-tech > summary { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; cursor: pointer; list-style: none; font: 500 14px/20px var(--f-sans); color: var(--ink-2); border-radius: 4px; }
.au-tech > summary::-webkit-details-marker { display: none; }
.au-tech > summary::before { content: ""; width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(-45deg); margin: 0 4px 0 2px; }
.au-tech[open] > summary::before { transform: rotate(45deg); }
.au-tech > summary:hover { color: var(--ink); }
.au-tech-body { display: grid; gap: 12px; padding-top: 4px; }
.au-tech-body p { margin: 0; font-size: 14px; }
.au-json { margin: 0; padding: 12px; border-radius: 8px; background: var(--s3); color: var(--ink); font: 400 12px/18px var(--f-mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.au-steps { margin: 0; padding-left: 20px; font-size: 15px; line-height: 22px; }
.au-steps li + li { margin-top: 8px; }

.au-group-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.au-group-h h2 { margin: 0; }
.au-n { font: 500 14px/20px var(--f-sans); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.au-queue { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.au-qi { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 4px 12px; padding: 16px; border-radius: 12px; background: var(--s2); box-shadow: inset 0 0 0 2px var(--stop); }
.au-qi > .ic { margin-top: 2px; color: var(--stop-ink); }
.au-qi:hover { background: var(--s1); }
.au-qt { display: grid; gap: 2px; min-width: 0; font-size: 15px; line-height: 22px; }
.au-qi-link { color: var(--ink); text-decoration: none; font: 600 16px/24px var(--f-sans); }
.au-qi-link::after { content: ""; position: absolute; inset: 0; border-radius: 12px; }
.au-qi-link:focus-visible { outline: none; }
.au-qi-link:focus-visible::after { outline: 2px solid var(--focus); outline-offset: 2px; }
.au-qi-link[aria-current]::after { box-shadow: inset 0 0 0 3px var(--stop); }
.au-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 4px; font-size: 14px; line-height: 20px; color: var(--stop-ink); font-weight: 600; }

.au-filter { margin: 0; }
.au-sentence { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.au-w { color: var(--ink-2); }
.au-pick { min-height: 40px; max-width: 100%; font: 500 15px/20px var(--f-sans); }
select.au-pick { appearance: none; -webkit-appearance: none; padding: 0 32px 0 12px; cursor: pointer;
  background: linear-gradient(45deg, transparent 50%, currentColor 50% calc(50% + 1.5px), transparent calc(50% + 1.5px)) right 16px top 50% / 6px 6px no-repeat,
    linear-gradient(-45deg, transparent 50%, currentColor 50% calc(50% + 1.5px), transparent calc(50% + 1.5px)) right 11px top 50% / 6px 6px no-repeat, var(--s2); }
select.au-pick:hover { border-color: var(--ink); }
input.au-pick { width: 14rem; }
.au-apply { min-height: 40px; padding: 0 16px; border-radius: 8px; }
.au-more { margin-top: 8px; }
.au-more-body { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 12px 16px; padding-top: 4px; }
.au-more-body label { display: grid; gap: 4px; font: 500 14px/20px var(--f-sans); color: var(--ink); }
.au-more-body input { width: 100%; }
.au-more-body .hint { grid-column: 1 / -1; }
.au-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: 12px; padding-bottom: 12px; box-shadow: 0 1px 0 var(--hair); }
.au-exact { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; font-size: 14px; line-height: 20px; color: var(--ink); }
.au-exact input { margin: 0; }
.au-exact label { cursor: pointer; }
.au-tally { margin: 0; font-size: 14px; line-height: 20px; }
.au-r { color: var(--stop-ink); }
.au-note { margin: 12px 0 0; padding: 12px 16px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--ink-3); font-size: 14px; line-height: 20px; color: var(--ink); }

.au-evs { display: grid; margin: 4px 0 0; padding: 0; list-style: none; }
.au-ev + .au-ev { box-shadow: 0 -1px 0 var(--hair); }
.au-ev-link { position: relative; display: grid; grid-template-columns: 64px 20px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 8px; border-radius: 8px; color: var(--ink); text-decoration: none; }
.au-ev-link:hover { background: var(--s2); }
.au-ev-link[aria-current] { background: var(--s2); box-shadow: inset 3px 0 0 var(--ink); }
.au-t { font-size: 13px; line-height: 22px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.au-ev-link > .ic { margin-top: 1px; color: var(--ink-3); }
.au-ev-link.is-refused > .ic { color: var(--stop-ink); }
.au-say { min-width: 0; font-size: 15px; line-height: 22px; color: var(--ink-2); overflow-wrap: anywhere; }
.au-say > b { color: var(--ink); font-weight: 600; }
.au-because { display: block; margin-top: 6px; font-size: 14px; line-height: 22px; color: var(--ink); }
.au-chip { display: inline-flex; align-items: center; min-height: 24px; margin-right: 6px; padding: 0 8px; border-radius: 4px; font: 600 13px/16px var(--f-sans); color: var(--stop-ink); box-shadow: inset 0 0 0 1px var(--stop); vertical-align: 1px; }
.au-soft { display: block; margin-top: 2px; font-size: 14px; line-height: 20px; color: var(--ink-3); }
.au-said { overflow-wrap: anywhere; }
.au-abs { display: none; }
.audit:has(#au-exact:checked) .au-rel { display: none; }
.audit:has(#au-exact:checked) .au-abs { display: inline; }
.au-end { margin: 0; padding-top: 16px; font-size: 14px; line-height: 20px; color: var(--ink-3); }
.au-more-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding-top: 20px; }
.au-more-links:empty { display: none; }
@media (min-width: 1024px) { .au-ev-link { grid-template-columns: 88px 20px minmax(0, 1fr); } }
@media (forced-colors: active) {
  .au-qi, .au-why, .au-detail, .au-chip, .au-btn, .au-note { border: 1px solid CanvasText; }
  .au-ev-link[aria-current], .au-qi-link[aria-current] { outline: 2px solid Highlight; }
}
@media print {
  .au-export, .au-filter, .au-tools, .au-more-links { display: none !important; }
}
/* ---- end Audit ---- */

/* ---- Capabilities ---- */
/* The Capabilities section (web/capabilities.rs): one collapsed row per capability and per domain,
   and a pane with the chosen one's detail or the next step. On a phone and up to 1279px the pane
   replaces the list; from 1280px it sits beside it, and with nothing chosen the first capability
   is open there. Everything is prefixed cap- so it stays out of the other sections' way; the row,
   status, pane and step patterns are candidates for the shared layer. Tokens are the shell's. */
.cap-pane { margin: 0; }
.cap-pane[data-default] { display: none; }
.page:has(> .cap-pane:not([data-default])) > .cap-main { display: none; }
@media (min-width: 1280px) {
  .page:has(> .cap-pane) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 440px); column-gap: 40px; align-items: start; max-width: 1280px; }
  .page:has(> .cap-pane) > * { grid-column: 1; }
  .page:has(> .cap-pane) > .cap-main { display: block; }
  .page:has(> .cap-pane) > .cap-pane { display: block; grid-column: 2; grid-row: 1 / span 2; padding: 20px 28px 32px; border-radius: 16px; background: var(--s1); box-shadow: var(--edge); }
  .cap-back { display: none; }
}

.cap-lede { margin: -4px 0 0; font-size: 16px; line-height: 24px; max-width: 62ch; text-wrap: pretty; }
.cap-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 16px 0 0; }
.cap-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 16px; border: 0; border-radius: 8px; font: 500 15px/20px var(--f-sans); text-decoration: none; white-space: nowrap; cursor: pointer; }
.cap-btn .ic { width: 18px; height: 18px; }
.cap-btn-primary, .cap-btn-primary:hover { background: var(--btn); color: var(--btn-ink); box-shadow: none; }
.cap-btn-primary:hover { background: var(--btn-hi); }
.cap-btn-ghost, .cap-btn-ghost:hover { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--control); }
.cap-btn-ghost:hover { box-shadow: inset 0 0 0 2px var(--control); }

section.cap-group { margin-top: 32px; }
.cap-group-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.cap-group-h h2 { margin: 0; }
.cap-n { font: 500 14px/20px var(--f-sans); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cap-group-p { margin: -4px 0 12px; font-size: 15px; line-height: 24px; max-width: 62ch; }
.cap-empty { margin: 0; color: var(--ink-3); }
@media (min-width: 1024px) {
  .cap-lede { font-size: 17px; line-height: 28px; }
  section.cap-group { margin-top: 48px; }
}

/* Rows: the whole row is the link's target; the chosen one carries a bar on its left. */
.cap-rows { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cap-row { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 12px; align-items: center; padding: 12px 16px 12px 12px; border-radius: 8px; background: var(--s2); box-shadow: var(--edge); }
.cap-row:hover { background: var(--s1); }
.cap-glyph { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 8px; background: var(--s3); color: var(--ink-2); align-self: start; }
.cap-t { display: grid; gap: 2px; min-width: 0; font-size: 14px; line-height: 20px; }
.cap-link { color: var(--ink); font-weight: 600; font-size: 16px; line-height: 24px; text-decoration: none; overflow-wrap: anywhere; }
.cap-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.cap-link:focus-visible { outline: none; }
.cap-link:focus-visible::after { outline: 2px solid var(--focus); outline-offset: 2px; }
.cap-row-st { grid-column: 2; }
.cap-row[data-st="stop"] { box-shadow: inset 0 0 0 2px var(--stop); }
.cap-row[data-st="stop"] .cap-glyph { color: var(--stop-ink); }
.cap-row[data-st="pending"] { box-shadow: inset 0 0 0 1px var(--ink-3); }
.cap-row:has([aria-current])::before { content: ""; position: absolute; left: -12px; top: 16px; bottom: 16px; width: 3px; border-radius: 2px; background: var(--ink); }
@media (min-width: 600px) {
  .cap-row { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .cap-row-st { grid-column: 3; justify-self: end; }
}

/* Status: a mark and words. Red is an outline, never a fill; amber is kept for live things, so
   "asks an approver" is neutral. */
.cap-st { display: inline-flex; align-items: center; gap: 8px; font: 500 14px/20px var(--f-sans); color: var(--ink-2); }
.cap-st::before { content: ""; width: 8px; height: 8px; border-radius: 2px; flex: none; }
.cap-st-fine { color: var(--ink-3); font-weight: 400; }
.cap-st-fine::before { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-4); }
.cap-st-pending { color: var(--ink); }
.cap-st-pending::before { border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ink-2); }
.cap-st-stop { color: var(--stop-ink); font-weight: 600; }
.cap-st-stop::before { box-shadow: inset 0 0 0 2px var(--stop); }
.cap-st-ask { color: var(--ink-2); font-size: 13px; }
.cap-st-ask::before { box-shadow: inset 0 0 0 1.5px var(--ink-3); }

/* The pane. */
.cap-pane-bar { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; }
.cap-back { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 12px 0 8px; margin-left: -8px; border-radius: 8px; color: var(--ink); text-decoration: none; font-weight: 500; }
.cap-back:hover { background: var(--hair); }
.cap-crumb { margin-left: auto; font-size: 13px; line-height: 20px; color: var(--ink-3); }
.cap-pane-in { display: grid; gap: 24px; align-content: start; max-width: 640px; min-width: 0; }
.cap-pane-h { display: grid; gap: 8px; }
.cap-pane-h > .cap-st, .cap-stepn { justify-self: start; }
.cap-pane-h h2 { margin: 0; font-size: 24px; line-height: 30px; letter-spacing: -0.025em; overflow-wrap: anywhere; }
.cap-pane-h p { margin: 0; font-size: 15px; line-height: 24px; text-wrap: pretty; }
.cap-stepn { font: 600 13px/20px var(--f-sans); color: var(--ink-3); }
.cap-sub { display: grid; gap: 10px; min-width: 0; }
.cap-sub h3 { margin: 0; }
.cap-quiet { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-3); }
.cap-pane-in > .cap-actions, .cap-form .cap-actions { margin: 0; }

.cap-ops, .cap-whos { display: grid; margin: 0; padding: 0; list-style: none; border-radius: 12px; background: var(--s2); box-shadow: var(--edge); }
.cap-ops li, .cap-whos li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; padding: 12px 16px; }
.cap-ops li + li, .cap-whos li + li { box-shadow: 0 -1px 0 var(--hair); }
.cap-ops li > div, .cap-whos li > div { flex: 1 1 200px; display: grid; min-width: 0; font-size: 14px; line-height: 20px; }
.cap-ops b { font-size: 15px; line-height: 22px; }
.cap-whos li { flex-wrap: nowrap; justify-content: flex-start; align-items: flex-start; }
.cap-whos li > .ic { margin-top: 2px; color: var(--ink-3); }
.cap-who { justify-self: start; color: var(--ink); font-weight: 600; font-size: 15px; line-height: 24px; overflow-wrap: anywhere; }

.cap-facts { display: grid; gap: 2px 16px; margin: 0; padding: 12px 16px; border-radius: 12px; background: var(--s3); }
.cap-facts > div { display: grid; gap: 0 16px; padding: 4px 0; }
.cap-facts dt { font: 500 13px/20px var(--f-sans); color: var(--ink-3); }
.cap-facts dd { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink); overflow-wrap: anywhere; }
.cap-mono dd { font: 400 13px/20px var(--f-mono); word-break: break-all; }
@media (min-width: 480px) { .cap-facts > div { grid-template-columns: 112px minmax(0, 1fr); } }

.cap-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cap-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 32px; padding: 0 10px; border-radius: 4px; font: 500 14px/20px var(--f-sans); color: var(--ink); text-decoration: none; box-shadow: inset 0 0 0 1px var(--ink-3); }
.cap-chip:hover { box-shadow: inset 0 0 0 2px var(--ink-3); }
.cap-chip .ic { width: 16px; height: 16px; color: var(--ink-3); }
.cap-chip > span { min-width: 0; }
.cap-chip code { word-break: break-all; }
.cap-chip-note { color: var(--ink-3); font-weight: 400; }

.cap-tech > summary { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; cursor: pointer; list-style: none; font: 500 14px/20px var(--f-sans); color: var(--ink-2); border-radius: 4px; }
.cap-tech > summary::-webkit-details-marker { display: none; }
.cap-tech > summary::before { content: ""; width: 6px; height: 6px; margin: 0 4px 0 2px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(-45deg); }
.cap-tech[open] > summary::before { transform: rotate(45deg); }
.cap-tech > summary:hover { color: var(--ink); }
.cap-tech[open] > :not(summary) { margin-top: 8px; }

.cap-done, .cap-refused { display: grid; gap: 6px; padding: 12px 16px; border-radius: 12px; background: var(--s2); color: var(--ink-2); }
.cap-done { box-shadow: inset 3px 0 0 var(--ink), var(--edge); }
.cap-refused { box-shadow: inset 0 0 0 2px var(--stop); }
.cap-done p, .cap-refused p { margin: 0; }
.cap-refused ul { display: grid; gap: 4px; margin: 0; padding-left: 20px; }

/* Numbered steps, the first one filled. */
.cap-steps { counter-reset: s; display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 14px; line-height: 20px; }
.cap-steps li { counter-increment: s; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; }
.cap-steps li::before { content: counter(s); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line); font: 600 12px/1 var(--f-sans); color: var(--ink-2); }
.cap-steps li:first-child::before { background: var(--btn); color: var(--btn-ink); box-shadow: none; }
.cap-steps-quiet { color: var(--ink-3); }

/* Where the guided definition is: done steps link back, the current one is filled. */
.cap-progress { counter-reset: p; display: flex; flex-wrap: wrap; gap: 6px; margin: -8px 0 0; padding: 0; list-style: none; }
.cap-progress li { counter-increment: p; display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 10px 0 4px; border-radius: 999px; font: 500 13px/20px var(--f-sans); color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line); }
.cap-progress li::before { content: counter(p); display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font: 600 11px/1 var(--f-sans); box-shadow: inset 0 0 0 1px var(--line); }
.cap-progress li[aria-current] { background: var(--btn); color: var(--btn-ink); box-shadow: none; }
.cap-progress li[aria-current]::before { box-shadow: inset 0 0 0 1px var(--btn-ink); }
.cap-progress li[data-done] a { color: var(--ink); }

/* The DNS record: each value whole, wrapping anywhere on a phone, selected with one tap. */
.cap-record { display: grid; gap: 8px; margin: 0; }
.cap-record > div { display: grid; gap: 4px; padding: 12px; border-radius: 8px; background: var(--s3); }
.cap-record dt { font: 500 13px/20px var(--f-sans); color: var(--ink-3); }
.cap-record dd { margin: 0; min-width: 0; }
.cap-record code { display: block; font: 400 14px/20px var(--f-mono); color: var(--ink); overflow-wrap: anywhere; word-break: break-all; -webkit-user-select: all; user-select: all; }

.cap-form { display: grid; gap: 4px; margin: 0; min-width: 0; }
.cap-form .field { margin-bottom: 12px; }
.cap-form input[type="text"], .cap-form select { width: 100%; }
.cap-fieldset { margin: 0 0 12px; padding: 12px 15px 3px; }
.cap-check { display: flex; align-items: center; min-height: 40px; margin-bottom: 8px; font: 500 14px/20px var(--f-sans); color: var(--ink); }
.cap-json { min-height: 240px; max-width: none; font: 400 13px/20px var(--f-mono); resize: vertical; }

@media (forced-colors: active) {
  .cap-row, .cap-ops, .cap-whos, .cap-facts, .cap-record > div, .cap-done, .cap-chip, .cap-btn-ghost { border: 1px solid CanvasText; }
  .cap-row[data-st="stop"], .cap-refused { border: 2px solid CanvasText; }
  .cap-progress li[aria-current] { outline: 2px solid Highlight; }
}
.cap-refused code { white-space: nowrap; }
/* ---- end Capabilities ---- */
/* ---- Nodes ---- */
/* Nodes (/admin/endpoints…): the list, one Node, and enrolling one. Name-first rows; a red
   outline for an offline Node or a capability not serving, never a fill; a neutral outlined
   "Degraded"; amber only for what is live now (open sessions). Class names follow Today's
   (#72: .summary, .part, .group-h, .st, .st-stop, .chip, .go, .livelist); until Today lands,
   this block carries its own copies, scoped to .nodes. */
.nodes .summary { margin: 0; font-size: 16px; line-height: 24px; max-width: 62ch; color: var(--ink); text-wrap: pretty; }
.nodes .note { margin: 16px 0 0; color: var(--ink-2); font-size: 14px; line-height: 20px; }
.nodes .part { margin-top: 32px; }
.nodes .group-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.nodes .group-h h2 { margin: 0; }
.nodes .group-h .n { font: 500 14px/20px var(--f-sans); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.nodes .st { display: inline-flex; align-items: center; gap: 8px; font: 500 14px/20px var(--f-sans); color: var(--ink-2); }
.nodes .st::before { content: ""; width: 8px; height: 8px; border-radius: 2px; flex: none; box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.nodes .st-on { color: var(--ink); }
.nodes .st-on::before { border-radius: 50%; background: var(--ink-2); box-shadow: none; }
.nodes .st-stop { color: var(--stop-ink); font-weight: 600; }
.nodes .st-stop::before { box-shadow: inset 0 0 0 2px var(--stop); }
.nodes .st-live { color: var(--ink); }
.nodes .st-live::before { background: var(--lit); box-shadow: 0 0 0 1px var(--lit-edge); }
.nodes .st-pend { color: var(--ink); }
.nodes .st-pend::before { border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ink-2); }
.nodes .chip { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; border-radius: 4px; font: 500 13px/16px var(--f-sans); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink-3); }
.nodes .go { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font-weight: 500; color: var(--ink); text-decoration: none; }
.nodes .go::after { content: ""; width: 6px; height: 6px; border: solid currentColor; border-width: 1.5px 1.5px 0 0; transform: rotate(45deg); }
.nodes .go:hover { text-decoration: underline; text-underline-offset: 4px; }
.nodes time { color: var(--ink-3); }
.nd-actions { margin: 16px 0 0; }

/* The list: one row per Node, the whole row a link to it. */
.nd-rows, .nd-list, .nodes .livelist, .steps { margin: 0; padding: 0; list-style: none; }
.nd-rows { display: grid; gap: 8px; }
.nd-row { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 12px; padding: 12px 16px 12px 12px; border-radius: 12px; background: var(--s2); box-shadow: var(--edge); }
.nd-row[data-st="stop"] { box-shadow: inset 0 0 0 2px var(--stop); }
.nd-row .glyph { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 8px; background: var(--s3); color: var(--ink-2); }
.nd-row[data-st="stop"] .glyph { color: var(--stop-ink); }
.nd-row .t { display: grid; gap: 2px; min-width: 0; align-content: center; font-size: 14px; line-height: 20px; }
.nd-link { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 16px; line-height: 24px; overflow-wrap: anywhere; }
.nd-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.nd-link:focus-visible { outline: none; }
.nd-link:focus-visible::after { outline: 2px solid var(--focus); outline-offset: 2px; }
.nd-row:hover { background: var(--s1); }
.nd-id { font-size: 12px; color: var(--ink-3); }
.nd-about { color: var(--ink-2); overflow-wrap: anywhere; }
.nd-st { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 14px; line-height: 20px; color: var(--ink-2); }
@media (min-width: 600px) {
  .nd-row { grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; }
  .nd-st { grid-column: 3; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
}

/* One Node: status, the sentence, facts, then rows for sessions, grants and what it serves. */
.nd-status { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin: -4px 0 12px; font-size: 14px; line-height: 20px; color: var(--ink-2); }
.nodes > .facts { margin: 20px 0 0; }
.nd-list { display: grid; border-radius: 12px; background: var(--s2); box-shadow: var(--edge); }
.nd-list > li { display: grid; gap: 2px; padding: 12px 16px; font-size: 14px; line-height: 20px; min-width: 0; overflow-wrap: anywhere; }
.nd-list > li + li { box-shadow: 0 -1px 0 var(--hair); }
.nd-list > li > b, .nd-list > li > code:first-child { font-size: 15px; line-height: 22px; }
.nd-list > li[data-st="stop"] { border-radius: 12px; box-shadow: inset 0 0 0 2px var(--stop); }
.nd-list > li[data-st="degraded"] { border-radius: 12px; box-shadow: inset 0 0 0 1px var(--ink-3); }
.nd-list .line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 2px; color: var(--ink-2); }
.nodes .livelist { border-radius: 12px; background: var(--s2); box-shadow: var(--edge); }
.nodes .livelist li { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 2px 12px; align-items: baseline; padding: 12px 16px; font-size: 14px; line-height: 20px; }
.nodes .livelist li + li { box-shadow: 0 -1px 0 var(--hair); }
.nodes .livelist .cell { width: 10px; height: 10px; border-radius: 2px; background: var(--lit); box-shadow: 0 0 0 1px var(--lit-edge); }
.nodes .livelist div { display: grid; min-width: 0; overflow-wrap: anywhere; }
.nodes .livelist b { font-size: 15px; line-height: 22px; }
.nodes .livelist .ends { grid-column: 2; color: var(--ink); font-variant-numeric: tabular-nums; }
@media (min-width: 600px) {
  .nodes .livelist li { grid-template-columns: 10px minmax(0, 1fr) auto; }
  .nodes .livelist .ends { grid-column: 3; white-space: nowrap; }
}

/* Engineer depth, behind "Technical record". */
.nodes .tech { margin-top: 8px; }
.nodes .tech > summary { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; cursor: pointer; list-style: none; font: 500 14px/20px var(--f-sans); color: var(--ink-2); border-radius: 4px; }
.nodes .tech > summary::-webkit-details-marker { display: none; }
.nodes .tech > summary::before { content: ""; width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(-45deg); margin: 0 4px 0 2px; }
.nodes .tech[open] > summary::before { transform: rotate(45deg); }
.nodes .tech > summary:hover { color: var(--ink); }
.nodes .tech-body { display: grid; gap: 8px; padding-top: 4px; }
.nd-tech { margin-top: 32px; }
.nodes .facts.mono { background: var(--s3); box-shadow: none; }
.nodes .facts.mono dd, .nodes .raw { font: 400 13px/20px var(--f-mono); color: var(--ink); word-break: break-all; }
.nodes .raw { display: block; padding: 8px 12px; border-radius: 8px; background: var(--s3); }
.nodes .stub p { margin: 0; }

/* Enrolling: three steps, the code shown once, and the command that wraps on a phone. */
.steps { display: grid; gap: 12px; margin-top: 24px; counter-reset: none; }
.steps > li { padding: 16px; border-radius: 12px; background: var(--s2); box-shadow: var(--edge); min-width: 0; }
.steps > li > h2 { margin: 0 0 8px; font-size: 18px; line-height: 24px; }
.steps > li.done > h2 { color: var(--ink-2); }
.steps > li > p:last-child { margin-bottom: 0; }
.steps .stack { margin-top: 8px; }
.cmd { margin: 0 0 12px; padding: 12px 16px; border-radius: 8px; background: var(--s3); color: var(--ink); font: 400 13px/22px var(--f-mono); white-space: pre-wrap; overflow-wrap: anywhere; word-break: normal; user-select: all; }
.cmd code { font-size: inherit; }
.nd-minted { margin-top: 0; padding: 16px; border-radius: 12px; background: var(--s2); box-shadow: inset 0 0 0 1px var(--ink-3); }
.nd-minted h2 { margin-bottom: 8px; }
.nd-code { margin: 0; }
.nd-code code.secret { display: block; padding: 12px; font-size: 15px; line-height: 22px; overflow-wrap: anywhere; word-break: break-all; }
@media (min-width: 1024px) {
  .nodes .summary { font-size: 17px; line-height: 28px; }
  .nodes .part { margin-top: 48px; }
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
}
@media (forced-colors: active) {
  .nd-row, .nd-list, .nodes .livelist, .steps > li, .nd-minted, .cmd { border: 1px solid CanvasText; }
}
/* ---- end Nodes ---- */
/* ---- Approvals ---- */
/* Approvals (/admin/approvals…): the requests waiting for a decision as sentences with an amber
   outline (a person's decision waits: the owner's rule for amber outlines), one-tap Approve and
   Refuse, then the decided ones, quiet. Red stays for errors, as an outline or text. Class names
   follow Today's (#72: .summary, .part, .group-h, .st, .st-wait, .go, button.small, button.ghost)
   and Nodes' (#76: .tech, .facts.mono); until those land, this block carries its own copies,
   scoped to .approvals. */
.approvals .summary { margin: 0; font-size: 16px; line-height: 24px; max-width: 62ch; color: var(--ink); text-wrap: pretty; overflow-wrap: anywhere; }
.approvals .summary b { font-weight: 600; }
.approvals .note { margin: 16px 0 0; color: var(--ink-2); font-size: 14px; line-height: 20px; }
.approvals .done { margin: 0 0 20px; max-width: 62ch; }
.approvals .part { margin-top: 32px; }
.approvals .group-h { display: block; margin-bottom: 12px; }
.approvals .group-h h2 { display: inline; margin: 0 10px 0 0; }
.approvals .group-h .n { white-space: nowrap; font: 500 14px/20px var(--f-sans); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.approvals .ap-lead { margin: -4px 0 12px; max-width: 62ch; }
.approvals .st { display: inline-flex; align-items: center; gap: 8px; font: 500 14px/20px var(--f-sans); color: var(--ink-2); }
.approvals .st::before { content: ""; width: 8px; height: 8px; border-radius: 2px; flex: none; box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.approvals .st-wait { color: var(--lit-ink); }
.approvals .st-wait::before { box-shadow: inset 0 0 0 2px var(--wait-line); }
.approvals .st-yes { color: var(--ink); }
.approvals .st-yes::before { border-radius: 50%; background: var(--ink-2); box-shadow: none; }
.approvals .st-no { color: var(--ink-2); }
.approvals time { color: var(--ink-3); font-weight: 400; }
.approvals .go { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font-weight: 500; color: var(--ink); text-decoration: none; }
.approvals .go::after { content: ""; width: 6px; height: 6px; border: solid currentColor; border-width: 1.5px 1.5px 0 0; transform: rotate(45deg); }
.approvals .go:hover { text-decoration: underline; text-underline-offset: 4px; }
.approvals button.small { min-height: 32px; padding: 0 12px; font-size: 14px; }
.approvals button.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--control); }
.approvals button.ghost:hover { background: transparent; box-shadow: inset 0 0 0 2px var(--control); }
.approvals .actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* Rows: one per request, the whole row a link to it, the form above the link. */
.ap-rows { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ap-row { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 4px 12px; padding: 16px; border-radius: 12px; background: var(--s2); box-shadow: var(--edge); }
.ap-row > .ic { margin-top: 2px; color: var(--ink-3); }
.ap-row[data-st="wait"] { box-shadow: inset 0 0 0 2px var(--wait-line); }
.ap-row[data-st="wait"] > .ic { color: var(--lit-ink); }
.ap-row .t { display: grid; gap: 2px; min-width: 0; font-size: 15px; line-height: 22px; overflow-wrap: anywhere; }
.ap-link { color: var(--ink); text-decoration: none; font-weight: 500; font-size: 16px; line-height: 24px; }
.ap-link b { font-weight: 700; }
.ap-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.ap-link:focus-visible { outline: none; }
.ap-link:focus-visible::after { outline: 2px solid var(--focus); outline-offset: 2px; }
.ap-row:hover { background: var(--s1); }
.ap-row .line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 4px; font-size: 14px; line-height: 20px; color: var(--ink-2); }
.ap-why { margin-top: 4px; font-size: 14px; line-height: 20px; color: var(--ink-2); }
.ap-actions { grid-column: 2; position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; }
.ap-done .ap-row { padding: 12px 16px; }
.ap-done .ap-link { font-size: 15px; line-height: 22px; }
.ap-more { margin: 12px 0 0; }

/* One request: status, the sentence, what approving does, the form, facts, the record. */
.ap-status { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin: -4px 0 12px; font-size: 14px; line-height: 20px; color: var(--ink-2); }
.ap-outcome { margin: 12px 0 0; max-width: 62ch; font-size: 15px; line-height: 22px; color: var(--ink-2); }
.ap-detail > .ap-why { margin: 16px 0 0; max-width: 62ch; padding: 12px 16px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); font-size: 15px; line-height: 22px; }
.ap-decide { margin: 20px 0 0; padding: 16px; border-radius: 12px; background: var(--s2); box-shadow: inset 0 0 0 2px var(--wait-line); max-width: 40rem; }
.ap-decide .field { margin-bottom: 12px; }
.ap-decide .hint { margin: 0; }
.ap-decide textarea { max-width: 100%; }
.approvals .error-line { margin: 0 0 16px; max-width: 62ch; padding: 12px 16px; border-radius: 12px; box-shadow: inset 0 0 0 2px var(--stop); color: var(--ink); font-weight: 500; }
.ap-detail > .facts { margin: 24px 0 0; }
.ap-detail .chain { margin: 0; padding-left: 20px; }
.approvals .tech { margin-top: 16px; }
.approvals .tech > summary { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; cursor: pointer; list-style: none; font: 500 14px/20px var(--f-sans); color: var(--ink-2); border-radius: 4px; }
.approvals .tech > summary::-webkit-details-marker { display: none; }
.approvals .tech > summary::before { content: ""; width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(-45deg); margin: 0 4px 0 2px; }
.approvals .tech[open] > summary::before { transform: rotate(45deg); }
.approvals .tech > summary:hover { color: var(--ink); }
.approvals .facts.mono { margin: 4px 0 0; background: var(--s3); box-shadow: none; }
.approvals .facts.mono dd { font: 400 13px/20px var(--f-mono); color: var(--ink); word-break: break-all; }
.ap-back { margin: 24px 0 0; }
@media (min-width: 1024px) {
  .approvals .summary { font-size: 17px; line-height: 28px; }
  .approvals .part { margin-top: 48px; }
  .ap-row { grid-template-columns: 20px minmax(0, 1fr) auto; align-items: start; }
  .ap-actions { grid-column: 3; grid-row: 1; margin: 0; flex-wrap: nowrap; }
}
@media (forced-colors: active) {
  .ap-row, .ap-decide, .approvals .error-line, .ap-detail > .ap-why { border: 1px solid CanvasText; }
}
/* ---- end Approvals ---- */
/* ---- People ---- */
/* People (/admin/people…): the list, one person, inviting, and the groups; one job per view or
   step, each opening with one sentence. Name-first rows; role in plain words, never coloured;
   red only as an outline or text; amber unused (nothing here is live). Shared names follow Today
   and Nodes (#72, #76: .summary, .part, .group-h, .chip, .go, .tech); until those land, this
   block carries its own copies, scoped to .people. Everything else is prefixed pp-. */
.people { max-width: 880px; }
.people .summary { margin: 0; font-size: 16px; line-height: 24px; max-width: 62ch; color: var(--ink); text-wrap: pretty; }
.people .note { margin: 16px 0 0; color: var(--ink-2); font-size: 14px; line-height: 20px; }
.people .part { margin-top: 32px; }
.people .group-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.people .group-h h2, .people .group-h h3 { margin: 0; }
.people .group-h .n { font: 500 14px/20px var(--f-sans); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.people .chip { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; border-radius: 4px; font: 500 13px/16px var(--f-sans); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink-3); }
.people .go { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font-weight: 500; color: var(--ink); text-decoration: none; }
.people .go::after { content: ""; width: 6px; height: 6px; border: solid currentColor; border-width: 1.5px 1.5px 0 0; transform: rotate(45deg); }
.people .go:hover { text-decoration: underline; text-underline-offset: 4px; }
.people time { color: var(--ink-3); }
.people .done, .people .error[role="alert"] { margin: 0 0 16px; }
.pp-actions { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin: 16px 0 0; }
.pp-more { margin: 8px 0 0; }
.pp-you { display: inline-flex; align-items: center; min-height: 20px; padding: 0 6px; border-radius: 4px; font: 500 12px/16px var(--f-sans); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
.pp-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
.pp-email { overflow-wrap: anywhere; }

/* Everyone: one row per person, the whole row a link to them. */
.pp-rows, .pp-list, .pp-chips { margin: 0; padding: 0; list-style: none; }
.pp-rows { display: grid; gap: 8px; }
.pp-row { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 12px; align-items: center; padding: 12px 16px 12px 12px; border-radius: 12px; background: var(--s2); box-shadow: var(--edge); }
.pp-row:hover { background: var(--s1); }
.pp-row .avatar { width: 40px; height: 40px; font-size: 14px; }
.pp-row .t { display: grid; gap: 2px; min-width: 0; font-size: 14px; line-height: 20px; }
.pp-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.pp-link { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 16px; line-height: 24px; overflow-wrap: anywhere; }
.pp-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.pp-link:focus-visible { outline: none; }
.pp-link:focus-visible::after { outline: 2px solid var(--focus); outline-offset: 2px; }
.pp-about { color: var(--ink-2); overflow-wrap: anywhere; }
.pp-role { grid-column: 2; font: 500 14px/20px var(--f-sans); color: var(--ink); }
@media (min-width: 600px) {
  .pp-row { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .pp-role { grid-column: 3; text-align: right; }
}

/* Lists of things a person holds, each with its one action on the right. */
.pp-list { display: grid; border-radius: 12px; background: var(--s2); box-shadow: var(--edge); }
.pp-list > li { display: grid; gap: 2px; padding: 12px 16px; font-size: 14px; line-height: 20px; min-width: 0; overflow-wrap: anywhere; color: var(--ink-2); }
.pp-list > li + li { box-shadow: 0 -1px 0 var(--hair); }
.pp-list > li b, .pp-strong { color: var(--ink); font-weight: 600; font-size: 15px; line-height: 22px; }
.pp-list > li.pp-held { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.pp-held > div { display: grid; gap: 2px; flex: 1 1 240px; min-width: 0; }
.pp-strong { text-decoration: none; justify-self: start; }
.pp-strong:hover { text-decoration: underline; }
.pp-past > li { color: var(--ink-3); }
.pp-inline { margin: 0; }
button.pp-quiet { min-height: 36px; padding: 0 12px; background: transparent; color: var(--ink); font-weight: 500; font-size: 14px; box-shadow: inset 0 0 0 1px var(--control); }
button.pp-quiet:hover { background: transparent; box-shadow: inset 0 0 0 2px var(--control); }
.pp-remove { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0; }
.pp-why { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-2); max-width: 62ch; }
.pp-held > .pp-why { flex: 1 1 200px; }

/* A job: its heading, one sentence, and its form. */
.pp-lede { margin: -4px 0 12px; font-size: 15px; line-height: 24px; max-width: 62ch; text-wrap: pretty; }
.pp-job > .pp-list + * { margin-top: 16px; }
.pp-form { display: grid; gap: 12px; max-width: 40rem; margin: 0; }
.pp-form .field { margin: 0; }
.pp-form input[type="email"], .pp-form input[type="text"], .pp-form select { width: 100%; }
.pp-pick { grid-template-columns: minmax(0, 1fr); align-items: end; }
@media (min-width: 600px) { .pp-pick { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) auto; max-width: 48rem; } }
.pp-check { display: flex; align-items: center; min-height: 40px; font: 500 14px/20px var(--f-sans); color: var(--ink); overflow-wrap: anywhere; }
.pp-choices { margin: 0; padding: 0; border: 0; max-width: none; display: grid; gap: 8px; }
.pp-choices > legend { padding: 0; margin: 0 0 8px; font: 600 15px/20px var(--f-sans); color: var(--ink); }
.pp-choice { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 16px; border-radius: 12px; background: var(--s2); box-shadow: var(--edge); cursor: pointer; }
.pp-choice:hover { box-shadow: inset 0 0 0 1px var(--control); }
.pp-choice:has(input:checked) { box-shadow: inset 0 0 0 2px var(--ink); }
.pp-choice input { margin: 2px 0 0; }
.pp-choice > span { display: grid; gap: 2px; font-size: 14px; line-height: 20px; color: var(--ink-2); }
.pp-choice b { font-size: 15px; line-height: 20px; }
.pp-soon { margin: 16px 0 0; padding-left: 12px; font-size: 14px; line-height: 20px; color: var(--ink-3); box-shadow: inset 2px 0 0 var(--line); max-width: 62ch; }
.pp-end { margin-top: 4px; }

/* The code, shown once. */
.pp-code { margin: 0 0 24px; padding: 16px; border-radius: 12px; background: var(--s2); box-shadow: inset 0 0 0 1px var(--ink-3); color: var(--ink); }
.pp-code h2 { margin-bottom: 8px; }
.pp-secret { margin: 0; }
.pp-secret code.secret { display: block; padding: 12px; font-size: 15px; line-height: 22px; overflow-wrap: anywhere; word-break: break-all; }

/* Groups: chips on the list; a card per group on Groups. */
.pp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pp-chip { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 8px; color: var(--ink); text-decoration: none; font: 500 14px/20px var(--f-sans); background: var(--s2); box-shadow: var(--edge); }
.pp-chip:hover { box-shadow: inset 0 0 0 1px var(--control); }
.pp-chip-n { color: var(--ink-3); font-weight: 400; white-space: pre; }
.pp-groups { display: grid; gap: 12px; }
section.pp-group { margin: 0; padding: 16px; border-radius: 16px; background: var(--s1); box-shadow: var(--edge); min-width: 0; }
.pp-group h3 { font: 600 16px/24px var(--f-sans); overflow-wrap: anywhere; }
.pp-group .pp-list { background: none; box-shadow: 0 -1px 0 var(--hair); border-radius: 0; margin-top: 8px; }
.pp-group .pp-list > li { padding-inline: 0; }
.pp-group > .hint { margin-top: 8px; }

/* Engineer depth and destructive steps, behind a disclosure. */
.people .tech > summary { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; cursor: pointer; list-style: none; font: 500 14px/20px var(--f-sans); color: var(--ink-2); border-radius: 4px; }
.people .tech > summary::-webkit-details-marker { display: none; }
.people .tech > summary::before { content: ""; width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(-45deg); margin: 0 4px 0 2px; }
.people .tech[open] > summary::before { transform: rotate(45deg); }
.people .tech > summary:hover { color: var(--ink); }
.pp-delete { margin-top: 8px; }
.pp-delete[open] > form { margin-top: 4px; }
.pp-tech { margin-top: 40px; }
.people .facts.mono { margin: 8px 0 0; background: var(--s3); box-shadow: none; }
.people .facts.mono dd { font: 400 13px/20px var(--f-mono); color: var(--ink); word-break: break-all; }
@media (min-width: 1024px) {
  .people .summary { font-size: 17px; line-height: 28px; }
  .people .part { margin-top: 48px; }
}
@media (forced-colors: active) {
  .pp-row, .pp-list, .pp-choice, .pp-chip, .pp-code, section.pp-group { border: 1px solid CanvasText; }
  .pp-choice:has(input:checked) { outline: 2px solid Highlight; }
}
/* ---- end People ---- */
/* ---- Agents ---- */
/* Agents (/admin/agents…): the list, "What can X do?", and the guided new-agent form. Name-first
   rows; amber only for what is in use now; a revoked agent gets a neutral struck mark and quieter
   row, never a live look. Class names follow Today's and Nodes' (#72, #76: .summary, .part,
   .group-h, .st, .chip, .go, .tech); until they land, this block carries its own copies, scoped
   to .agents (the lead consolidates later). */
.agents .summary { margin: 0; font-size: 16px; line-height: 24px; max-width: 62ch; color: var(--ink); text-wrap: pretty; }
.agents .note { margin: 16px 0 0; color: var(--ink-2); font-size: 14px; line-height: 20px; }
.agents .part { margin-top: 32px; }
.agents .group-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.agents .group-h h2 { margin: 0; }
.agents .group-h .n { font: 500 14px/20px var(--f-sans); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.agents .st { display: inline-flex; align-items: center; gap: 8px; font: 500 14px/20px var(--f-sans); color: var(--ink-3); }
.agents .st::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1.5px var(--ink-4); }
.agents .st-live { color: var(--ink); }
.agents .st-live::before { border-radius: 2px; background: var(--lit); box-shadow: 0 0 0 1px var(--lit-edge); }
.agents .st-off { color: var(--ink-2); }
.agents .st-off::before { border-radius: 2px; box-shadow: inset 0 0 0 1.5px var(--ink-3); background: linear-gradient(135deg, transparent 43%, var(--ink-3) 43%, var(--ink-3) 57%, transparent 57%); }
.agents .seen { font-size: 13px; }
.agents .chip { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; border-radius: 4px; font: 500 13px/16px var(--f-sans); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink-3); }
.agents .go { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; font-weight: 500; color: var(--ink); text-decoration: none; }
.agents .go::after { content: ""; width: 6px; height: 6px; border: solid currentColor; border-width: 1.5px 1.5px 0 0; transform: rotate(45deg); }
.agents .go:hover { text-decoration: underline; text-underline-offset: 4px; }
.agents time { color: var(--ink-3); }
.ag-actions { margin: 16px 0 0; }

/* The list: one row per principal, the whole row a link to "What can it do?". */
.ag-rows, .caps { margin: 0; padding: 0; list-style: none; }
.ag-rows { display: grid; gap: 8px; }
.ag-row { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 12px; padding: 12px 16px 12px 12px; border-radius: 12px; background: var(--s2); box-shadow: var(--edge); }
.ag-row .glyph { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 8px; background: var(--s3); color: var(--ink-2); }
.ag-row[data-st="live"] .glyph { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--lit-edge); }
.ag-row[data-st="off"] { background: transparent; box-shadow: inset 0 0 0 1px var(--hair); }
.ag-row[data-st="off"] .glyph { background: transparent; color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--hair); }
.ag-row .t { display: grid; gap: 2px; min-width: 0; align-content: center; font-size: 14px; line-height: 20px; }
.ag-link { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 16px; line-height: 24px; overflow-wrap: anywhere; }
.ag-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.ag-link:focus-visible { outline: none; }
.ag-link:focus-visible::after { outline: 2px solid var(--focus); outline-offset: 2px; }
.ag-row:hover { background: var(--s1); }
.ag-about { color: var(--ink-2); overflow-wrap: anywhere; }
.ag-st { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 14px; line-height: 20px; }
@media (min-width: 600px) {
  .ag-row { grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; }
  .ag-st { grid-column: 3; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
}

/* One principal: status, the sentence, facts, then one row per capability. */
.ag-status { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin: -4px 0 12px; }
.agents > .facts { margin: 20px 0 0; }
.agents .key { margin: -4px 0 12px; font-size: 14px; line-height: 20px; color: var(--ink-2); }
.agents .key span { font-weight: 600; color: var(--ink); }
.caps { display: grid; border-radius: 12px; background: var(--s2); box-shadow: var(--edge); }
.cap { display: grid; gap: 4px; padding: 14px 16px 6px 16px; min-width: 0; box-shadow: inset 4px 0 0 var(--mark, transparent); }
.cap + .cap { border-top: 1px solid var(--hair); }
.cap[data-v="yes"] { --mark: var(--ink); }
.cap[data-v="ask"] { --mark: var(--ink-3); }
.cap[data-v="no"] { --mark: transparent; }
.cap-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; }
.cap-name { font: 500 14px/22px var(--f-mono); color: var(--ink); overflow-wrap: anywhere; }
.cap-v { color: var(--ink-3); }
.verdict { display: inline-flex; align-items: center; gap: 6px; font: 600 14px/20px var(--f-sans); color: var(--ink); }
.verdict::before { content: ""; width: 10px; height: 10px; flex: none; border-radius: 50%; }
.cap[data-v="yes"] .verdict::before { background: var(--ink); }
.cap[data-v="ask"] .verdict::before { box-shadow: inset 0 0 0 2px var(--ink-2); }
.cap[data-v="no"] .verdict { color: var(--ink-2); }
.cap[data-v="no"] .verdict::before { border-radius: 2px; box-shadow: inset 0 0 0 1.5px var(--ink-3); background: linear-gradient(135deg, transparent 43%, var(--ink-3) 43%, var(--ink-3) 57%, transparent 57%); }
.cap .why, .cap .fix { margin: 0; font-size: 14px; line-height: 20px; max-width: 70ch; overflow-wrap: anywhere; }
.cap .why { color: var(--ink); }
.cap .fix { color: var(--ink-2); }
.cap .fix::before { content: "Fix: "; font-weight: 600; color: var(--ink); }

/* Engineer depth, behind "Technical record". */
.agents .tech { margin-top: 4px; }
.agents .tech > summary { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; cursor: pointer; list-style: none; font: 500 14px/20px var(--f-sans); color: var(--ink-2); border-radius: 4px; }
.agents .tech > summary::-webkit-details-marker { display: none; }
.agents .tech > summary::before { content: ""; width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(-45deg); margin: 0 4px 0 2px; }
.agents .tech[open] > summary::before { transform: rotate(45deg); }
.agents .tech > summary:hover { color: var(--ink); }
.agents .tech-body { display: grid; gap: 8px; padding: 4px 0 10px; }
.ag-tech { margin-top: 32px; }
.agents .facts.mono { margin: 0; background: var(--s3); box-shadow: none; }
.agents .facts.mono dd { font: 400 13px/20px var(--f-mono); color: var(--ink); word-break: break-all; }
.agents .stub p { margin: 0; }
.agents .stub .tech p { margin-top: 4px; }

/* The guided form: each kind a choice with its one line, each field explained. */
.ag-new .summary { margin-bottom: 24px; }
.ag-form { max-width: 40rem; gap: 0; }
.ag-form .kinds { display: grid; gap: 8px; padding: 0; border: 0; }
.ag-form .kinds legend { padding: 0; margin: 0 0 2px; }
.ag-form .kinds > .hint { margin-bottom: 4px; }
.ag-form .kind { position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 16px; border-radius: 12px; background: var(--s2); box-shadow: var(--edge); }
.ag-form .kind:has(input:checked) { box-shadow: inset 0 0 0 2px var(--ink); }
.ag-form .kind input { margin: 3px 0 0; }
.ag-form .kind label { display: grid; gap: 2px; padding: 0; font-size: 14px; line-height: 20px; color: var(--ink-2); cursor: pointer; }
.ag-form .kind label b { font-size: 15px; line-height: 22px; color: var(--ink); }
.ag-form .kind label::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.ag-form .field { margin-top: 8px; }
.ag-cancel { display: inline-flex; align-items: center; min-height: 40px; color: var(--ink); font-weight: 500; }
.ag-submit { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: 8px; }
@media (min-width: 1024px) {
  .agents .summary { font-size: 17px; line-height: 28px; }
  .agents .part { margin-top: 48px; }
}
@media (forced-colors: active) {
  .ag-row, .caps, .ag-form .kind { border: 1px solid CanvasText; }
}
/* ---- end Agents ---- */
/* ---- Sessions ---- */
/* Sessions (/admin/sessions) and Connections (/admin/connectivity). Name-first rows that stack on
   a phone (no tables); amber only for a live session; a relay region that is down gets a red
   outline and one line, a degraded one the neutral outline with "If it stops, this turns red".
   .summary, .note, .part, .group-h, .st, .chip, .go and .tech are copies of Today's, Nodes' and
   Agents' (#72, #76, #79), scoped to .sessions and .conn until the lead consolidates them. */
:is(.sessions, .conn) .summary { margin: 0; font-size: 16px; line-height: 24px; max-width: 62ch; color: var(--ink); text-wrap: pretty; }
:is(.sessions, .conn) .note { margin: 16px 0 0; color: var(--ink-2); font-size: 14px; line-height: 20px; }
:is(.sessions, .conn) .part { margin-top: 32px; }
:is(.sessions, .conn) .part > .hint { margin: -6px 0 12px; max-width: 70ch; }
:is(.sessions, .conn) .group-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
:is(.sessions, .conn) .group-h h2 { margin: 0; }
:is(.sessions, .conn) .group-h .n { font: 500 14px/20px var(--f-sans); color: var(--ink-3); font-variant-numeric: tabular-nums; }
:is(.sessions, .conn) .st { display: inline-flex; align-items: center; gap: 8px; font: 500 14px/20px var(--f-sans); color: var(--ink-2); }
:is(.sessions, .conn) .st::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1.5px var(--ink-4); }
:is(.sessions, .conn) .st-live { color: var(--ink); }
:is(.sessions, .conn) .st-live::before { border-radius: 2px; background: var(--lit); box-shadow: 0 0 0 1px var(--lit-edge); }
:is(.sessions, .conn) .st-ok { color: var(--ink); }
:is(.sessions, .conn) .st-ok::before { background: var(--ink-2); box-shadow: none; }
:is(.sessions, .conn) .st-stop { color: var(--stop-ink); font-weight: 600; }
:is(.sessions, .conn) .st-stop::before { border-radius: 2px; box-shadow: inset 0 0 0 2px var(--stop); }
:is(.sessions, .conn) .seen { font-size: 13px; line-height: 20px; }
:is(.sessions, .conn) time { color: var(--ink-3); }
:is(.sessions, .conn) .chip { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; border-radius: 4px; font: 500 13px/16px var(--f-sans); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink-3); }
:is(.sessions, .conn) .go { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; font-weight: 500; color: var(--ink); text-decoration: none; }
:is(.sessions, .conn) .go::after { content: ""; width: 6px; height: 6px; border: solid currentColor; border-width: 1.5px 1.5px 0 0; transform: rotate(45deg); }
:is(.sessions, .conn) .go:hover { text-decoration: underline; text-underline-offset: 4px; }
:is(.sessions, .conn) .glyph { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 8px; background: var(--s3); color: var(--ink-2); }

/* The filter: three buttons in one GET form, the current one pressed. */
.ss-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 20px 0 0; }
.ss-filter-l { font: 500 14px/20px var(--f-sans); color: var(--ink-2); }
.seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 10px; background: var(--s3); }
.seg button { min-height: 40px; padding: 0 16px; border-radius: 8px; background: transparent; color: var(--ink-2); font-size: 14px; }
.seg button:hover { background: var(--s1); color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--s2); color: var(--ink); font-weight: 600; box-shadow: var(--edge); }

/* One row per session: who, what on which Node, the path; status beside it from 600px. */
.ss-rows, .cn-regions, .cn-paths { margin: 0; padding: 0; list-style: none; }
.ss-rows { display: grid; gap: 8px; }
.ss-row { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 12px; padding: 12px 16px 4px 12px; border-radius: 12px; background: var(--s2); box-shadow: var(--edge); }
.ss-row[data-st="live"] .glyph { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--lit-edge); }
.ss-row[data-st="ended"], .ss-row[data-st="failed"] { background: transparent; box-shadow: inset 0 0 0 1px var(--hair); }
.ss-row[data-st="ended"] .glyph, .ss-row[data-st="failed"] .glyph { background: transparent; color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--hair); }
.ss-row .t { display: grid; gap: 2px; min-width: 0; align-content: start; font-size: 14px; line-height: 20px; }
.ss-row .t p { margin: 0; overflow-wrap: anywhere; }
.ss-who { font-size: 16px; line-height: 24px; }
.ss-who a { color: var(--ink); font-weight: 600; text-decoration: none; }
.ss-who a:hover { text-decoration: underline; text-underline-offset: 4px; }
.ss-for { color: var(--ink-2); }
.ss-what { color: var(--ink-2); }
.ss-what a { color: var(--ink); }
.ss-cap { font-size: 13px; color: var(--ink); }
.ss-path { color: var(--ink-3); }
.ss-row[data-st="failed"] .ss-path { color: var(--ink); font-weight: 500; }
.ss-st { grid-column: 2; grid-row: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; font-size: 14px; line-height: 20px; }
.ss-row .t { grid-row: 1; }
.ss-row .glyph { grid-row: 1; }
.ss-row .ss-more { order: 9; display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px; }
.ss-more > details[open] { flex-basis: 100%; }
@media (max-width: 599.98px) {
  /* On a phone the status reads right under the name, before the details. */
  .ss-row .t { display: contents; }
  .ss-row .t > * { grid-column: 2; }
  .ss-who { grid-row: 1; }
  .ss-st { grid-row: 2; }
  .ss-row .glyph { grid-row: 1 / span 2; }
}
@media (min-width: 600px) {
  .ss-row { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .ss-st { grid-column: 3; grid-row: 1; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
}

/* Engineer depth, behind "Technical record". */
:is(.sessions, .conn) .tech > summary { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; cursor: pointer; list-style: none; font: 500 14px/20px var(--f-sans); color: var(--ink-2); border-radius: 4px; }
:is(.sessions, .conn) .tech > summary::-webkit-details-marker { display: none; }
:is(.sessions, .conn) .tech > summary::before { content: ""; width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(-45deg); margin: 0 4px 0 2px; }
:is(.sessions, .conn) .tech[open] > summary::before { transform: rotate(45deg); }
:is(.sessions, .conn) .tech > summary:hover { color: var(--ink); }
:is(.sessions, .conn) .tech-body { display: grid; gap: 8px; padding: 4px 0 10px; }
:is(.sessions, .conn) .facts.mono { margin: 0; background: var(--s3); box-shadow: none; }
:is(.sessions, .conn) .facts.mono dd { font: 400 13px/20px var(--f-mono); color: var(--ink); word-break: break-all; }

/* End session: a quiet button on a live row (owners and admins). Opening it is the confirm step,
   so it needs no script; it says what ending does not do before the button that does it. */
.ss-row .ss-end { margin: 2px 0; }
.ss-row .ss-end[open] { margin-bottom: 12px; }
.ss-end > summary { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 8px; cursor: pointer; list-style: none; font: 500 14px/20px var(--f-sans); color: var(--ink); box-shadow: inset 0 0 0 1px var(--control); }
.ss-end > summary::-webkit-details-marker { display: none; }
.ss-end > summary:hover { box-shadow: inset 0 0 0 2px var(--control); }
.ss-end[open] > summary { color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--hair); }
.ss-end-body { display: grid; gap: 12px; justify-items: start; margin-top: 8px; padding: 12px 14px; border-radius: 10px; background: var(--s1); box-shadow: inset 0 0 0 1px var(--hair); }
.ss-row .ss-end-body p { max-width: 60ch; color: var(--ink-2); }
.ss-end-body a { color: var(--ink); }
.ss-end-body form { margin: 0; }

/* Connections: one card per relay region, its facts as a short list. */
.cn-regions { display: grid; gap: 8px; }
.cn-region { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 14px 16px 14px 12px; border-radius: 12px; background: var(--s2); box-shadow: var(--edge); }
.cn-region[data-h="degraded"] { box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.cn-region[data-h="down"] { box-shadow: inset 0 0 0 2px var(--stop); }
.cn-region[data-h="down"] .glyph { color: var(--stop-ink); background: transparent; box-shadow: inset 0 0 0 1px var(--stop); }
.cn-region .t { display: grid; gap: 6px; min-width: 0; }
.cn-name { margin: 0; font: 600 16px/24px var(--f-sans); color: var(--ink); }
.cn-wire { margin-left: 4px; font-size: 13px; font-weight: 400; color: var(--ink-3); }
.cn-health { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; font-size: 14px; line-height: 20px; }
.cn-line { color: var(--ink-2); }
.cn-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px 16px; margin: 2px 0 0; font-size: 14px; line-height: 20px; }
.cn-facts div { display: contents; }
.cn-facts dt { color: var(--ink-3); }
.cn-facts dd { margin: 0; color: var(--ink); font-variant-numeric: tabular-nums; }
.cn-paths { display: grid; border-radius: 12px; background: var(--s2); box-shadow: var(--edge); }
.cn-path { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px 16px; padding: 12px 16px; font-size: 14px; line-height: 20px; }
.cn-path + .cn-path { border-top: 1px solid var(--hair); }
.cn-pw { font-size: 15px; line-height: 22px; font-weight: 500; color: var(--ink); overflow-wrap: anywhere; min-width: 0; }
.cn-n { color: var(--ink-2); font-variant-numeric: tabular-nums; text-align: right; }
.cn-path[data-st="live"] .cn-n::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 2px; background: var(--lit); box-shadow: 0 0 0 1px var(--lit-edge); }
.cn-more { margin: 8px 0 0; }
.conn .part > p:not([class]) { margin: 0; max-width: 70ch; color: var(--ink-2); }
@media (min-width: 1024px) {
  :is(.sessions, .conn) .summary { font-size: 17px; line-height: 28px; }
  :is(.sessions, .conn) .part { margin-top: 48px; }
  .cn-regions { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
}
@media (forced-colors: active) {
  .ss-row, .cn-region, .cn-paths, .seg button[aria-pressed="true"], .ss-end > summary, .ss-end-body { border: 1px solid CanvasText; }
  .cn-region[data-h="down"] { border-width: 3px; }
}
/* ---- end Sessions ---- */
/* ---- Developers ---- */
/* Developers (/admin/developers): what the page is for, each workload trust as a name-first row
   (which tokens sign in, as which agent), what a CI job needs, and the guided "Add a trust" form
   with its refusals at the top and beside the field. No amber: the page has no usage data. A
   trust whose agent was revoked gets the neutral struck mark and a risk line. The helpers below
   (.summary, .part, .group-h, .st, .tech, the row and choice shapes) are copies of the Agents
   block's (#79), scoped to .developers; the lead consolidates later. */
.developers .summary { margin: 0; font-size: 16px; line-height: 24px; max-width: 62ch; color: var(--ink); text-wrap: pretty; }
.developers .note { margin: 16px 0 0; color: var(--ink-2); font-size: 14px; line-height: 20px; }
.developers .done, .developers .dv-notice { margin: 0 0 20px; max-width: 62ch; }
.developers .dv-notice { padding: 16px; border-radius: 12px; background: var(--s2); box-shadow: var(--edge); }
.developers .dv-notice h2 { margin-top: 0; }
.developers .part { margin-top: 32px; }
.developers .group-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.developers .group-h h2 { margin: 0; }
.developers .group-h .n { font: 500 14px/20px var(--f-sans); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.developers .st { display: inline-flex; align-items: center; gap: 8px; font: 500 14px/20px var(--f-sans); color: var(--ink-2); }
.developers .st::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.developers .st-off::before { border-radius: 2px; box-shadow: inset 0 0 0 1.5px var(--ink-3); background: linear-gradient(135deg, transparent 43%, var(--ink-3) 43%, var(--ink-3) 57%, transparent 57%); }
.developers .empty { margin: 0; }
.developers .dv-after { margin-top: 12px; max-width: 62ch; }

/* One row per trust: which tokens sign in, as which agent; claims, delete and the record below. */
.dv-rows { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.dv-row { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 12px; padding: 12px 16px 4px 12px; border-radius: 12px; background: var(--s2); box-shadow: var(--edge); }
.dv-row .glyph { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 8px; background: var(--s3); color: var(--ink-2); }
.dv-row[data-st="off"] { background: transparent; box-shadow: inset 0 0 0 1px var(--hair); }
.dv-row[data-st="off"] .glyph { background: transparent; color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--hair); }
.dv-row .t { display: grid; gap: 2px; min-width: 0; align-content: center; font-size: 14px; line-height: 20px; }
.dv-from { font-weight: 600; font-size: 16px; line-height: 24px; color: var(--ink); overflow-wrap: anywhere; }
.dv-as { color: var(--ink-2); overflow-wrap: anywhere; }
.dv-as a { color: var(--ink); font-weight: 500; text-underline-offset: 3px; }
.dv-st { grid-column: 2; display: flex; align-items: center; }
.dv-more { grid-column: 2; display: grid; gap: 8px; min-width: 0; padding-top: 4px; }
.dv-more .risk { margin: 0; font-size: 14px; line-height: 20px; max-width: 62ch; }
.dv-claims { display: grid; gap: 4px; font-size: 14px; line-height: 20px; }
.dv-k { color: var(--ink-2); }
.developers .claims { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.developers .claims li { min-width: 0; max-width: 100%; padding: 2px 8px; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--hair); font-size: 13px; line-height: 20px; color: var(--ink-2); overflow-wrap: anywhere; }
.developers .claims code { font: 400 13px/20px var(--f-mono); color: var(--ink); word-break: normal; overflow-wrap: anywhere; }
.dv-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px; }
.dv-foot form.inline { display: inline-flex; }
button.link.dv-del { display: inline-flex; align-items: center; min-height: 40px; font: 500 14px/20px var(--f-sans); }
.dv-foot details[open] { flex-basis: 100%; }
@media (min-width: 600px) {
  .dv-row { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .dv-st { grid-column: 3; grid-row: 1; align-self: center; }
  .dv-more { grid-column: 2 / 4; }
}

/* Engineer depth, behind "Technical record". */
.developers .tech > summary { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; cursor: pointer; list-style: none; font: 500 14px/20px var(--f-sans); color: var(--ink-2); border-radius: 4px; }
.developers .tech > summary::-webkit-details-marker { display: none; }
.developers .tech > summary::before { content: ""; width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(-45deg); margin: 0 4px 0 2px; }
.developers .tech[open] > summary::before { transform: rotate(45deg); }
.developers .tech > summary:hover { color: var(--ink); }
.developers .tech-body { padding: 0 0 10px; }
.developers .facts.mono { margin: 0; background: var(--s3); box-shadow: none; }
.developers .facts.mono dd { font: 400 13px/20px var(--f-mono); color: var(--ink); overflow-wrap: anywhere; word-break: normal; }

/* What a CI job needs: two values that wrap, never a table. */
.dv-facts { margin: 0; }
.dv-facts code { overflow-wrap: anywhere; word-break: normal; }
.developers .part > .hint { margin-top: 12px; max-width: 62ch; }

/* The form: each field explained, the refusal under its label, each agent a choice. */
.dv-lead { margin: 0 0 16px; font-size: 14px; line-height: 20px; color: var(--ink-2); max-width: 62ch; }
.dv-form { max-width: 40rem; }
.dv-form input[type="url"], .dv-form input[type="text"], .dv-form textarea { width: 100%; }
.developers .field-error { font-size: 14px; line-height: 20px; }
.dv-fix { display: block; font-weight: 400; color: var(--ink); }
.dv-picks { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; background: none; min-width: 0; }
.dv-picks legend { padding: 0; margin: 0 0 2px; font-weight: 600; }
.dv-picks > .hint { margin-bottom: 4px; }
.dv-pick { position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 16px; border-radius: 12px; background: var(--s2); box-shadow: var(--edge); }
.dv-pick:has(input:checked) { box-shadow: inset 0 0 0 2px var(--ink); }
.dv-pick input { margin: 3px 0 0; }
.dv-pick label { display: grid; gap: 2px; padding: 0; min-width: 0; font-size: 14px; line-height: 20px; color: var(--ink-2); cursor: pointer; overflow-wrap: anywhere; }
.dv-pick label b { font-size: 15px; line-height: 22px; color: var(--ink); }
.dv-pick label::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.dv-submit { margin-top: 8px; }
.dv-stub { margin-top: 48px; max-width: 62ch; box-shadow: inset 0 0 0 1px var(--hair); background: transparent; }
.dv-stub h2 { margin-top: 0; font-size: 16px; line-height: 24px; }
.dv-stub p { margin: 0; color: var(--ink-2); font-size: 14px; line-height: 20px; }
@media (min-width: 1024px) {
  .developers .summary { font-size: 17px; line-height: 28px; }
  .developers .part { margin-top: 48px; }
}
/* The desk: trusts and what CI needs on the left, the form beside them. */
@media (min-width: 1200px) {
  .dv-cols[data-form="yes"] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); gap: 0 48px; align-items: start; }
}
@media (forced-colors: active) {
  .dv-row, .dv-pick, .dv-notice, .developers .claims li { border: 1px solid CanvasText; }
}
/* ---- end Developers ---- */
/* ---- Policies ---- */
/* Policies (/admin/policies…): the list, one policy, the two-step new policy and always-on access.
   Name-first rows, each policy one sentence; no tables, so nothing is cut off at 390px. Amber is
   never used here: a policy is not "live", its leases are. Class names follow Today's, Nodes' and
   Agents' (#72, #76, #79: .summary, .part, .group-h, .st, .chip, .go, .tech); until they land,
   this block carries its own copies scoped to .policies (the lead consolidates later). */
.policies .summary { margin: 0; font-size: 16px; line-height: 24px; max-width: 62ch; color: var(--ink); text-wrap: pretty; }
.policies .note { margin: 16px 0 0; padding: 12px 16px; border-radius: 8px; background: var(--s2); box-shadow: inset 3px 0 0 var(--ink-3), var(--edge); color: var(--ink); font-size: 14px; line-height: 20px; max-width: 62ch; }
.policies .done, .policies > .error { margin: 0 0 16px; max-width: 62ch; }
.policies .part { margin-top: 32px; }
.policies .group-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.policies .group-h h2 { margin: 0; }
.policies .group-h .n { font: 500 14px/20px var(--f-sans); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.policies .st { display: inline-flex; align-items: center; gap: 8px; font: 500 14px/20px var(--f-sans); color: var(--ink-2); }
.policies .st::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.policies .st-on { color: var(--ink); }
.policies .st-on::before { background: var(--ink); box-shadow: none; }
.policies .st-off::before { border-radius: 2px; background: linear-gradient(135deg, transparent 43%, var(--ink-3) 43%, var(--ink-3) 57%, transparent 57%); }
.policies .st time { color: var(--ink-3); font-weight: 400; }
.policies .chip { display: inline-flex; align-items: center; min-height: 24px; padding: 2px 8px; border-radius: 4px; font: 500 13px/16px var(--f-sans); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink-3); }
.policies .go { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; font-weight: 500; color: var(--ink); text-decoration: none; }
.policies .go::after { content: ""; width: 6px; height: 6px; border: solid currentColor; border-width: 1.5px 1.5px 0 0; transform: rotate(45deg); }
.policies .go:hover { text-decoration: underline; text-underline-offset: 4px; }
.policies time { color: var(--ink-3); }
.po-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.po-actions .button.quiet { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--control); }
.po-actions .button.quiet:hover { background: var(--s2); }

/* The list: one row per policy, the whole row a link to it. */
.po-rows { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.po-row { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 8px 12px; padding: 12px 16px 12px 12px; border-radius: 12px; background: var(--s2); box-shadow: var(--edge); }
.po-row .glyph, .po-chosen .glyph { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 8px; background: var(--s3); color: var(--ink-2); }
.po-row[data-st="off"], .po-row[data-st="later"] { background: transparent; box-shadow: inset 0 0 0 1px var(--hair); }
.po-row[data-st="off"] .glyph, .po-row[data-st="later"] .glyph { background: transparent; color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--hair); }
.po-row .t, .po-chosen .t { display: grid; gap: 2px; min-width: 0; align-content: center; font-size: 14px; line-height: 20px; }
.po-link { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 16px; line-height: 24px; overflow-wrap: anywhere; }
.po-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.po-link:focus-visible { outline: none; }
.po-link:focus-visible::after { outline: 2px solid var(--focus); outline-offset: 2px; }
.po-row:hover { background: var(--s1); }
.po-about { color: var(--ink); overflow-wrap: anywhere; max-width: 72ch; }
.po-limits { color: var(--ink-2); overflow-wrap: anywhere; }
.po-st { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 14px; line-height: 20px; }
@media (min-width: 760px) {
  .po-row { grid-template-columns: 40px minmax(0, 1fr) minmax(0, 15rem); align-items: center; }
  .po-st { grid-column: 3; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; }
}

/* One policy: status, the sentence, facts, what it may do, limits, then stop or change. */
.po-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: -4px 0 12px; }
.po-one .po-facts { margin: 20px 0 0; }
.po-para { margin: 0 0 12px; color: var(--ink-2); font-size: 14px; line-height: 20px; max-width: 62ch; }
.po-ops { display: grid; margin: 0; padding: 0; list-style: none; border-radius: 12px; background: var(--s2); box-shadow: var(--edge); }
.po-ops li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: baseline; padding: 12px 16px; box-shadow: inset 4px 0 0 var(--mark, transparent); }
.po-ops li + li { border-top: 1px solid var(--hair); }
.po-ops li[data-a="asks"] { --mark: var(--ink-3); }
.po-ops li[data-a="up-front"] { --mark: var(--ink); }
.po-op { font: 500 14px/22px var(--f-mono); color: var(--ink); overflow-wrap: anywhere; }
.po-ask { font: 500 14px/20px var(--f-sans); color: var(--ink-2); text-align: right; }
.po-ops li[data-a="asks"] .po-ask { color: var(--ink); }
.po-op-about { grid-column: 1 / -1; color: var(--ink-2); font-size: 14px; line-height: 20px; }
.po-limits-list dt code, .po-limits-list dd code { overflow-wrap: anywhere; word-break: break-word; }
.po-meaning { display: block; color: var(--ink-2); font-size: 14px; line-height: 20px; }
.po-acts { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.po-acts > li { display: grid; gap: 8px; justify-items: start; padding: 16px; border-radius: 12px; background: var(--s2); box-shadow: var(--edge); }
.po-acts h3 { margin: 0; font-size: 16px; line-height: 24px; }
.po-acts p { margin: 0; max-width: 62ch; color: var(--ink-2); font-size: 14px; line-height: 20px; }
.po-acts form.inline { margin: 0; }
.po-delete { display: grid; gap: 12px; justify-items: start; width: 100%; }
.po-delete fieldset { margin: 0; padding: 0; border: 0; width: 100%; }
.po-delete legend { padding: 0; margin: 0; font-weight: 600; font-size: 16px; line-height: 24px; color: var(--ink); }
.policies .tech { margin-top: 32px; }
.policies .tech > summary { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; cursor: pointer; list-style: none; font: 500 14px/20px var(--f-sans); color: var(--ink-2); border-radius: 4px; }
.policies .tech > summary::-webkit-details-marker { display: none; }
.policies .tech > summary::before { content: ""; width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(-45deg); margin: 0 4px 0 2px; }
.policies .tech[open] > summary::before { transform: rotate(45deg); }
.policies .tech > summary:hover { color: var(--ink); }
.policies .facts.mono { margin: 4px 0 0; background: var(--s3); box-shadow: none; }
.policies .facts.mono dd { font: 400 13px/20px var(--f-mono); color: var(--ink); word-break: break-all; }

/* The forms: step one picks a capability, step two (and always-on) says who, what, where, limits, when. */
.po-new .summary { margin-bottom: 20px; }
.po-alt { margin: -8px 0 16px; color: var(--ink-2); font-size: 14px; line-height: 20px; }
.po-caps { max-width: 44rem; }
.po-caps > fieldset { display: grid; gap: 8px; margin: 0 0 16px; padding: 0; border: 0; }
.po-cap, .pick { position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px; align-items: start; cursor: pointer; }
.po-cap { padding: 12px 16px; border-radius: 12px; background: var(--s2); box-shadow: var(--edge); }
.po-cap:has(input:checked) { box-shadow: inset 0 0 0 2px var(--ink); }
.po-cap input, .pick input { margin: 3px 0 0; }
.pick-t { display: grid; gap: 2px; min-width: 0; color: var(--ink); overflow-wrap: anywhere; }
.pick-t .sub { color: var(--ink-2); font-size: 14px; line-height: 20px; }
.pick-t code { justify-self: start; }
.pick-t .asks { justify-self: start; margin-top: 2px; padding: 0 6px; border-radius: 4px; font: 500 13px/20px var(--f-sans); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink-3); }
.po-cap-name { font: 600 15px/22px var(--f-mono); color: var(--ink); overflow-wrap: anywhere; }
.po-ver { font-weight: 400; color: var(--ink-3); }
.po-form { max-width: 44rem; gap: 0; }
.po-form > fieldset, .po-form > .field, .po-form > details { margin: 0 0 16px; }
.po-form fieldset > legend { font-weight: 600; }
.po-step > legend, .po-when > legend, .po-form > fieldset > legend { font-size: 16px; line-height: 24px; }
.po-inner { margin: 8px 0 0; padding: 0; border: 0; }
.po-inner > legend { font: 500 13px/20px var(--f-sans); color: var(--ink-3); padding: 0; margin: 0; }
.picks { display: grid; gap: 0; }
.picks .pick { padding: 8px 0; }
.picks .pick + .pick { border-top: 1px solid var(--hair); }
.policies details.more { margin-top: 8px; }
.policies details.more > summary { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; cursor: pointer; list-style: none; font-weight: 500; color: var(--ink); border-radius: 4px; }
.policies details.more > summary::-webkit-details-marker { display: none; }
.policies details.more > summary::before { content: ""; width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(-45deg); margin: 0 4px 0 2px; }
.policies details.more[open] > summary::before { transform: rotate(45deg); }
.policies details.more > fieldset { margin: 8px 0 0; }
.po-chosen { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 12px; align-items: center; margin: 0 0 16px; padding: 12px 16px 12px 12px; border-radius: 12px; background: var(--s2); box-shadow: var(--edge); }
.po-chosen .sub { color: var(--ink-2); }
.po-change { grid-column: 2; justify-self: start; display: inline-flex; align-items: center; min-height: 40px; font-weight: 500; color: var(--ink); }
@media (min-width: 600px) {
  .po-chosen { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .po-change { grid-column: 3; }
}
.po-choice { display: grid; gap: 0; }
.po-at { display: grid; gap: 8px; margin-top: 8px; }
.po-when:not(:has(input[value="at"]:checked)) .po-at { display: none; }
.po-at .field { margin: 0; }
.po-grants { display: grid; gap: 8px; margin: 0 0 24px; }
.po-grants section { margin: 0; padding: 16px; border-radius: 12px; background: var(--s2); box-shadow: var(--edge); }
.po-grants h2 { margin: 0 0 8px; font-size: 16px; line-height: 24px; }
.po-grants ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 14px; line-height: 20px; color: var(--ink-2); max-width: 62ch; }
.po-grants b { color: var(--ink); }
@media (min-width: 1024px) { .po-grants { grid-template-columns: 1fr 1fr; } }
.po-submit { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: 8px; }
.po-cancel { display: inline-flex; align-items: center; min-height: 40px; color: var(--ink); font-weight: 500; }
@media (min-width: 1024px) {
  .po-acts { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
  .po-acts > li { align-content: start; }
  .policies .summary { font-size: 17px; line-height: 28px; }
  .policies .part { margin-top: 48px; }
}
@media (forced-colors: active) {
  .po-row, .po-ops, .po-acts > li, .po-cap, .po-chosen, .po-grants section { border: 1px solid CanvasText; }
}
/* ---- end Policies ---- */
/* ---- Settings ---- */
/* Settings (web/settings.rs), the refusals inside the shell (views::problem_page and the signed-in
   404), and the pages outside it: sign-in, "Signed in" and the messages around them (views.rs,
   prefix si-). Uses the shell's tokens only. The "Technical record" disclosure and the mono facts
   are copies of Nodes' (#76), scoped here until they move to one place. */
.se-fix { margin: 0; color: var(--ink-2); }
.se-fix + .actions { margin-top: 16px; gap: 8px 24px; }
.settings { max-width: 760px; }
.settings .facts { margin: 0; }
.se-id { display: grid; gap: 2px; }
.se-id code { justify-self: start; max-width: 100%; -webkit-user-select: all; user-select: all; }
.se-id .hint { font-size: 13px; }
.se-idps { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; padding: 0; list-style: none; }
.se-idps li { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 8px; font: 500 14px/20px var(--f-sans); color: var(--ink); background: var(--s2); box-shadow: var(--edge); }
.settings .calm-name { min-width: 0; overflow-wrap: anywhere; }
.se-run a { align-items: center; }
.se-role { grid-row: 1; grid-column: 2; font: 500 14px/20px var(--f-sans); color: var(--ink-2); }
.se-else a { grid-template-columns: 20px minmax(0, 1fr); gap: 2px 12px; }
.se-else .ic { grid-row: 1 / 3; margin-top: 2px; color: var(--ink-3); }
.se-else .calm-note { grid-column: 2; }
.settings .calm a:focus-visible { outline-offset: -2px; }
.se-you { font-weight: 400; color: var(--ink-3); }
.se-after { margin-top: 8px; }
.se-later h2 { margin-bottom: 4px; font: 600 15px/20px var(--f-sans); letter-spacing: 0; color: var(--ink-2); }
.se-later p { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-3); }
.se-tech { margin-top: 32px; }
.settings .tech > summary { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; cursor: pointer; list-style: none; font: 500 14px/20px var(--f-sans); color: var(--ink-2); border-radius: 4px; }
.settings .tech > summary::-webkit-details-marker { display: none; }
.settings .tech > summary::before { content: ""; width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(-45deg); margin: 0 4px 0 2px; }
.settings .tech[open] > summary::before { transform: rotate(45deg); }
.settings .tech > summary:hover { color: var(--ink); }
.settings .facts.mono { margin-top: 4px; background: var(--s3); box-shadow: none; }
.settings .facts.mono dd { font: 400 13px/20px var(--f-mono); color: var(--ink); word-break: break-all; }
.se-authority { margin: 12px 0 0; font-size: 14px; line-height: 20px; color: var(--ink-2); max-width: 62ch; }

/* Outside the shell: the lockup, then one card. */
.si { min-height: 100vh; min-height: 100dvh; padding: 0 var(--gutter) 48px; }
.si-top, .si-card { max-width: 440px; margin: 0 auto; }
.si-top { padding: 20px 0 16px; }
.brand { margin: 0; max-width: none; }
.brand-product { margin-left: 10px; font: 500 15px/20px var(--f-sans); color: var(--ink-3); }
.si-card { padding: 24px 20px; border-radius: 16px; background: var(--s2); box-shadow: var(--edge); }
.si-card h1 { margin-bottom: 8px; }
.si-lede { margin: 0 0 24px; font-size: 15px; line-height: 22px; color: var(--ink-2); }
.si-why { margin: 0 0 8px; color: var(--ink); font-weight: 500; }
.si-fix { margin: 0; color: var(--ink-2); }
.si-next { margin: 24px 0 0; }
.si-error { margin: 0 0 20px; padding: 12px 16px; border-radius: 12px; box-shadow: inset 0 0 0 2px var(--stop); color: var(--ink); font-weight: 500; }
.si-form { display: grid; gap: 16px; }
.si-form .field { margin: 0; }
.si-form .field-error { font-size: 14px; line-height: 20px; font-weight: 500; }
.si-form input[type="text"] { width: 100%; min-height: 44px; font-family: var(--f-mono); font-size: 15px; }
.si-invite > summary { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; cursor: pointer; list-style: none; font: 500 14px/20px var(--f-sans); color: var(--ink-2); border-radius: 4px; }
.si-invite > summary::-webkit-details-marker { display: none; }
.si-invite > summary::before { content: ""; width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(-45deg); margin: 0 4px 0 2px; }
.si-invite[open] > summary::before { transform: rotate(45deg); }
.si-invite > summary:hover { color: var(--ink); }
.si-invite .field { padding-top: 4px; }
.si-providers { display: grid; gap: 8px; margin-top: 4px; }
.si-providers button { width: 100%; min-height: 44px; }
.si-foot { margin: 20px 0 0; font-size: 14px; line-height: 20px; color: var(--ink-3); }
@media (min-width: 600px) {
  .si { padding-top: max(24px, 8vh); }
  .si-top { padding: 0 4px 20px; }
  .si-card { padding: 32px; }
}
@media (forced-colors: active) {
  .si-card, .si-error { border: 1px solid CanvasText; }
  .se-idps li { border: 1px solid CanvasText; }
}
/* ---- end Settings ---- */