/* Planisphere console, in the Mac app's register (Logan, Oct 20: "redesign the console to match the mac app").
   Fraunces carries titles, the system face carries text and operations, JetBrains Mono carries labels, keys and
   evidence. Vellum ground, white cards with a brass hairline, orbit blue for actions and the current place, brass for
   eyebrows, green for what is on, and the approved critical red for errors that need action (Oct 5); state is spoken
   in text and shape too, never by colour alone.
   Layout, as on the Mac: a white sidebar with the mark, the grouped pages, and the workspace and sign-in at its foot;
   pages built from a page head, a facts line where one helps, and rounded white cards. */
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 300 400; font-display: swap; src: url("/fonts/fraunces-latin-300-400.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("/fonts/jetbrains-mono-latin-400-600.woff2") format("woff2"); }

:root {
  color-scheme: light;
  --orbit: #0A5EE7;        /* actions, links, the current place; the Mac's orbit blue */
  --orbit-deep: #0953CC;   /* a pressed or hovered action */
  --orbit-tint: #EEF2FC;   /* the selected row and the current page */
  --select: #315ED4;       /* the current page's text and its bar, as in the Mac sidebar */
  --ink: #0A0E14;
  --ground: #F4F1EA;       /* vellum */
  --ground-light: #FBF9F4;
  --paper: #FFFFFF;        /* cards, the sidebar, dialogs */
  --brass: #745030;        /* eyebrows and labels that name a place */
  --brass-light: #B8915A;  /* attention that is not an error */
  --live: #2E8B57;         /* on, passed, connected */
  --ledger: #6B6F76;       /* secondary copy */
  --caption: #8E8E93;      /* captions and quiet labels */
  --line: rgb(116 80 48 / 12%);
  --line-strong: #DAD3C2;  /* a control's outline: a field, a ghost button */
  --mist: #F1EFEA;         /* tracks, empty meters, a hovered quiet control */
  --veil: rgb(116 80 48 / 4%);
  --live-tint: #E8F3EC;
  --warn-tint: #F6EFE3;
  --idle-ring: #B9B3A6;
  --body-ink: #3A424E;
  --label-ink: #A8A095;
  --panel-hi: #FCFBF8;
  --panel-lo: #F8F5EE;
  --rail-line: #ECEAE4;
  --rail-hover: #F7F7F7;
  --rail-text: #1C1C1E;
  --online: #34C759;
  --meter-empty: #E7E1D4;
  --stripe: #EFEADF;
  --danger-deep: #A51F25;
  --select-fill: #F8FAFF;
  --warn-ink: #8A6331;
  --code-ink: #C9CED6;
  --on-ink-muted: rgb(244 241 234 / 66%);
  --on-ink-line: rgb(244 241 234 / 18%);
  /* An error that needs action, as consoles show one (Logan, Oct 5: "industry standard are red notifications"): a red
     banner on the page it belongs to, and a warning on its tab. 5.4:1 on white, so it can carry text. */
  --critical: #C0262D;
  --critical-tint: color-mix(in srgb, var(--critical) 8%, var(--paper));
  /* An irreversible action (revoke a key, remove an endpoint, rotate a secret, expire records) confirms in the
     critical red with an alert mark and a plain verb (Logan, Oct 5: "red buttons"). */
  --danger: var(--critical);
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  /* Two caps labels, both JetBrains Mono and never smaller than 10px: a heading label for eyebrows and card heads, and
     a label for fields, columns, meta lines and chips. Each rule sets its own line height after it. */
  --label-head: 500 10px/1.35 var(--font-mono); --label-head-track: 0.16em;
  --label: 500 10px/1.3 var(--font-mono); --label-track: 0.1em;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --radius: 12px;          /* buttons, fields, notices */
  --radius-card: 22px;     /* cards and dialogs */
  --shadow-card: 0 0 0 1px var(--line), 0 18px 40px -30px rgb(10 14 20 / 35%);
  --header: 0px;           /* no header bar: the sidebar carries the mark and the account */
  --rail: 240px;
  --rail-foot: 148px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
html, body { margin: 0; background: var(--ground); color: var(--ink); }
body { font: 400 14px/1.5 var(--font-body); -webkit-font-smoothing: antialiased; font-synthesis-weight: none;
  background: radial-gradient(900px 520px at 85% -10%, var(--ground-light) 0%, var(--ground) 62%) fixed; }
a { color: var(--orbit); text-underline-offset: 3px; }
h1, h2, h3, p { margin: 0; }
p { max-width: 72ch; }
code, pre, .mono { font-family: var(--font-mono); }
:focus-visible { outline: 2px solid var(--orbit); outline-offset: 2px; }
.icon { width: 18px; height: 18px; flex: none; display: block; }
.num { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }

/* ---------- sidebar: the mark at the top, the pages, the workspace and sign-in at the foot ---------- */
/* The header element keeps its parts; on a wide screen they ride the sidebar, as the Mac app's do. */
.topbar { position: fixed; z-index: 21; left: 0; top: 0; width: var(--rail); height: 60px; display: flex; align-items: center; gap: var(--s2);
  padding: 0 var(--s4) 0 18px; background: var(--paper); border-right: 1px solid var(--rail-line); }
.brand-lockup { display: flex; align-items: center; gap: 9px; text-decoration: none; flex: none; }
.brand-mark { height: 20px; width: auto; display: block; mix-blend-mode: multiply; }  /* the raster carries a paper-white ground */
.brand-wordmark { width: 104px; height: auto; display: block; mix-blend-mode: multiply; }
/* The mark leaves for the website; "Console" returns to Home: a quiet tag beside the mark. */
.console-home { margin-left: auto; font: var(--label); letter-spacing: var(--label-track); line-height: 1; text-transform: uppercase; color: var(--brass); text-decoration: none;
  padding: 6px 0; white-space: nowrap; }
.console-home:hover { color: var(--orbit); }
.topbar-end { position: fixed; z-index: 21; left: 0; bottom: 0; width: var(--rail); display: flex; flex-direction: column; align-items: stretch; gap: 6px;
  padding: var(--s3) var(--s3) var(--s4); background: var(--paper); border-right: 1px solid var(--rail-line); }
/* The plan, as the Mac's sidebar card: what kind of workspace this is and how much of the free allowance is used. */
.standing { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: var(--radius); background: var(--ground-light);
  box-shadow: inset 0 0 0 1px var(--line); }
.standing-dot { width: 7px; height: 7px; margin-top: 3px; border-radius: 50%; background: var(--live); flex: none; }
.standing[data-plan="sandbox"] .standing-dot { background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--idle-ring); }
.standing[data-plan="sample"] .standing-dot { background: var(--brass-light); }
.standing strong { display: block; font: var(--label); letter-spacing: var(--label-track); text-transform: uppercase; color: var(--brass); }
.standing small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.35; color: var(--body-ink); }
.chip-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 34px; padding: 6px 12px; border: 0;
  border-radius: var(--radius); background: var(--paper); box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--ink); text-decoration: none; cursor: pointer;
  font: 500 12.5px/1.2 var(--font-body); white-space: nowrap; }
/* The workspace's name leads to Account, as the Mac's account line does. */
.workspace-link { display: flex; align-items: center; gap: 8px; padding: 6px 10px; font-size: 13px; color: var(--rail-text); text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-radius: 8px; }
.workspace-link::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--online); flex: none; }
.workspace-link span { overflow: hidden; text-overflow: ellipsis; }
.workspace-link:hover { background: var(--rail-hover); }
/* The first stop for a keyboard: hidden until focused. */
.skip-link { position: absolute; left: var(--s4); top: -64px; z-index: 40; padding: 10px 16px; border-radius: var(--radius);
  background: var(--ink); color: var(--paper); font: 500 13.5px/1.2 var(--font-body); text-decoration: none; }
.skip-link:focus { top: var(--s3); }
a.chip-button:hover, button.chip-button:hover { background: var(--ground-light); }
.chip-button.primary { background: var(--orbit); box-shadow: none; color: var(--paper); font-weight: 600; }
.chip-button.primary:hover { background: var(--orbit-deep); }

/* ---------- body and rail ---------- */
.body { display: block; margin-left: var(--rail); min-height: 100vh; }
.rail { position: fixed; z-index: 20; left: 0; top: 60px; bottom: 0; width: var(--rail); overflow-y: auto;
  padding: var(--s2) var(--s3) calc(var(--rail-foot) + var(--s3)); background: var(--paper); border-right: 1px solid var(--rail-line);
  display: flex; flex-direction: column; gap: var(--s2); }
.rail-guide { display: none; }
.nav-group { position: relative; display: grid; gap: 1px; }
.nav-label { margin: 0; padding: var(--s3) 10px 4px; font: var(--label-head); letter-spacing: var(--label-head-track); line-height: 1.2; text-transform: uppercase; color: var(--caption); }
.nav-group:first-of-type .nav-label { display: none; }  /* the first group needs no name, as in the Mac sidebar */
.nav-group a { position: relative; display: flex; align-items: center; gap: 10px; min-height: 32px; padding: 6px 10px;
  border-radius: 8px; color: var(--rail-text); text-decoration: none; font: 400 13px/1.2 var(--font-body); }
.nav-group a .icon { width: 15px; height: 15px; color: var(--caption); }
.nav-group a:hover { background: var(--rail-hover); }
/* Any tab can carry a badge (setBadge in app.js): a count in brass, or a warning in the critical red with its mark. */
.nav-badge { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; gap: 3px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--brass-light); color: var(--paper); font: 700 10.5px/1 var(--font-body); font-variant-numeric: tabular-nums; }
.nav-badge.warning { background: var(--critical); padding-left: 5px; }
.nav-badge .icon { width: 11px; height: 11px; stroke-width: 2.25; color: var(--paper); }
.nav-group a[aria-current] { background: var(--orbit-tint); color: var(--select); font-weight: 600; box-shadow: inset 3px 0 0 var(--select); }
.nav-group a[aria-current] .icon { color: var(--select); }
.rail-links { margin-top: auto; display: grid; gap: 1px; padding-top: var(--s2); }
.rail-links a { display: flex; align-items: center; gap: 10px; min-height: 32px; padding: 6px 10px; border-radius: 8px; color: var(--rail-text); text-decoration: none; font-size: 13px; }
.rail-links a .icon { width: 15px; height: 15px; color: var(--caption); }
.rail-links a:hover { background: var(--rail-hover); }
body.signed-out:not(.sample) .nav-group:not([data-public]) { display: none; }
body.signed-out:not(.sample) .nav-group[data-public] .nav-label { display: block; }

main { min-width: 0; padding: 22px clamp(16px, 2.6vw, 44px) var(--s7); }
main:focus { outline: none; }
#page { display: grid; gap: 18px; max-width: 1320px; }

/* ---------- page head ---------- */
/* The title takes what the meta leaves; below 1240px the meta moves under the title, left-aligned in one row, so it never
   wraps into a right-aligned stack sitting under the title. */
.page-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--s3) var(--s6); }
.page-title { display: grid; gap: 6px; min-width: 0; max-width: 920px; }
.eyebrow { font: var(--label-head); letter-spacing: var(--label-head-track); text-transform: uppercase; color: var(--brass); }
.page-head h1 { font: 300 clamp(28px, 2.6vw, 36px)/1.1 var(--font-display); font-variation-settings: "opsz" 72; letter-spacing: -0.02em; text-wrap: balance; overflow-wrap: anywhere; }
.page-head h1.mono { font: 400 clamp(20px, 2.2vw, 28px)/1.25 var(--font-mono); letter-spacing: 0; }
/* Code a person quoted inside a title: mono, a step smaller so it sits in the line. */
.page-head h1 code { font: 400 0.8em/1 var(--font-mono); letter-spacing: 0; }
.deck { font-size: 14px; line-height: 1.5; max-width: 80ch; color: var(--body-ink); }
.page-meta { display: grid; justify-items: end; gap: var(--s3); }
.meta-line { font: var(--label); letter-spacing: var(--label-track); line-height: 1.4; text-transform: uppercase; color: var(--brass); text-align: right; }
.meta-line:has(> #reviews-pending:empty) { display: none; }  /* until the count arrives */
/* A time is data: inside a caps label it keeps its own case and spacing. */
:is(.meta-line, .card-label) time { text-transform: none; letter-spacing: 0.02em; }
.window { display: inline-flex; align-items: center; gap: var(--s2); font: var(--label); letter-spacing: var(--label-track); line-height: 1; text-transform: uppercase; color: var(--ledger); }

/* ---------- cards and instruments ---------- */
.grid { display: grid; gap: var(--s5); }
.grid.two { grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr); }
.grid.two > .instrument { align-self: start; }
/* Side-by-side cards size to their own content instead of stretching to the taller neighbour. */
.grid.two > .card, .grid.halves > .card, .keys-layout > .card { align-self: start; }
.grid.halves { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* ---------- home ---------- */
.home { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(280px, 1fr); gap: var(--s5); align-items: start; }
.home-side { display: grid; gap: var(--s5); min-width: 0; }
/* Below this width the changes take the full row; decisions and gaps pair up under them. */
@media (max-width: 1240px) {
  .page-head { grid-template-columns: minmax(0, 1fr); }
  .page-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: var(--s3) var(--s5); }
  .meta-line { text-align: left; }
  .home { grid-template-columns: minmax(0, 1fr); }
  .home-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-side.single { grid-template-columns: minmax(0, 1fr); }  /* Decisions alone, while Gaps waits */
}
/* Get started: a new workspace's three steps, side by side on a wide page and stacked below 1240px. A step's mark is
   its number, ringed in blue when it's next, and a filled blue check once done. */
.start-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.start-steps li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: var(--s3); align-items: start; padding: 0 var(--s5); }
.start-steps li:first-child { padding-left: 0; }
.start-steps li:last-child { padding-right: 0; }
.start-steps li + li { border-left: 1px solid var(--line); }
.start-mark { width: 30px; height: 30px; border: 1px solid var(--line-strong); border-radius: 50%; display: grid; place-items: center;
  font: 500 11px/1 var(--font-mono); letter-spacing: 0.04em; color: var(--ledger); }
.start-mark .icon { width: 15px; height: 15px; }
.start-steps li.next .start-mark { border: 1.5px solid var(--orbit); color: var(--orbit); }
.start-steps li.done .start-mark { background: var(--live); border-color: var(--live); color: var(--paper); }
.start-body { display: grid; gap: 4px; justify-items: start; min-width: 0; padding-top: 4px; }
.start-body b { font: 600 14.5px/1.3 var(--font-body); }
.start-steps li.done .start-body b { font-weight: 500; }
.start-body .btn { margin-top: var(--s2); }
@media (max-width: 1240px) {
  .start-steps { grid-template-columns: minmax(0, 1fr); }
  .start-steps li { padding: var(--s3) 0; }
  .start-steps li:first-child { padding-top: 0; }
  .start-steps li:last-child { padding-bottom: 0; }
  .start-steps li + li { border-left: 0; border-top: 1px solid var(--line); }
}
.deck .signal { color: var(--orbit); text-decoration: none; }
.deck-note { display: block; margin-top: 4px; font-size: 13px; }
.deck .signal:hover { text-decoration: underline; text-underline-offset: 3px; }
.deck .signal b { font-weight: 600; }
.changes, .home-list { list-style: none; margin: 0; padding: 0; }
.changes li + li, .home-list li + li { border-top: 1px solid var(--line); }
.change { display: grid; grid-template-columns: 132px 104px minmax(0, 1fr) 16px; gap: var(--s3); align-items: baseline; padding: 10px 0; color: var(--ink); text-decoration: none; }
.changes li:first-child .change { padding-top: 0; }
.change:hover .change-text b { text-decoration: underline; text-underline-offset: 3px; }
.change > .icon { width: 14px; height: 14px; align-self: center; color: var(--ledger); }
.change-when { font: 400 11.5px/1.4 var(--font-mono); color: var(--ledger); white-space: nowrap; }
.change-where { font: var(--label); letter-spacing: var(--label-track); line-height: 1.4; text-transform: uppercase; color: var(--orbit); }
.change-text b { font-weight: 600; font-size: 14.5px; }
.change-count { font: 400 12px var(--font-mono); color: var(--ledger); }
.change-tag { display: block; margin-top: 2px; font-size: 12.5px; color: var(--ledger); }
.home-list a { display: grid; gap: 2px; padding: 9px 0; color: var(--ink); text-decoration: none; font-size: 13.5px; }
.home-list li:first-child a { padding-top: 0; }
.home-list a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.home-list b { font-weight: 600; }
.home-list span { font-size: 12.5px; color: var(--ledger); }
.home-list.gaps span { font-size: 13.5px; color: var(--ink); }
.card-link { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; }
.card-link .icon { width: 14px; height: 14px; }
/* One shrinkable column: a wide table scrolls inside its card instead of pushing past the card's border. */
.card { border: 0; border-radius: var(--radius-card); background: rgb(255 255 255 / 86%); box-shadow: var(--shadow-card); padding: 20px var(--s5) var(--s5); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); align-content: start; min-width: 0; }
.card.flush { padding: 0; gap: 0; }
.card.flush { overflow: hidden; }
.card.flush > .card-head { padding: 20px var(--s5) var(--s3); }
.card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); }
.card-label { font: 300 22px/1.1 var(--font-display); font-variation-settings: "opsz" 48; letter-spacing: -0.01em; text-transform: none; color: var(--ink); }
.card-label.blue { color: var(--ink); }
/* A card's own heading reads as a title, as the Mac's cards do; an eyebrow names its kind where one helps. */
.card h3 { font: 300 28px/1.1 var(--font-display); font-variation-settings: "opsz" 72; letter-spacing: -0.015em; }
/* Zero specificity, so a paragraph's own class (a label, a note, the boundary sentence) sets its size inside a card too. */
:where(.card) p { font-size: 14.5px; }
.note { font-size: 12.5px; line-height: 1.45; color: var(--caption); }
/* Refused records on Connections: a red banner for each problem, with the alert mark, how many and since when, what
   is happening and what to do, then the fix and Dismiss. Past four, the rest fold under Show more. */
.notices { display: grid; gap: var(--s2); }
.notice { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto auto; grid-template-areas: "mark body fix close";
  gap: var(--s1) var(--s3); align-items: start; padding: 10px var(--s3) 10px var(--s4);
  border: 0; border-radius: var(--radius); background: var(--critical); color: var(--paper); box-shadow: 0 4px 10px rgb(192 38 45 / 25%); }
.notice a, .notice .notice-title span { color: var(--paper); }
.notice > .icon { grid-area: mark; width: 18px; height: 18px; margin-top: 2px; color: var(--paper); }
.notice-body { grid-area: body; display: grid; gap: 2px; min-width: 0; }
.notice-body p { font-size: 14px; line-height: 1.45; max-width: 100ch; }
.notice-title b { font-weight: 600; font-variant-numeric: tabular-nums; }
.notice-title span { opacity: 0.85; }
.notice-error { color: var(--paper); font-weight: 600; }
.notice-fix { grid-area: fix; align-self: center; white-space: nowrap; }
.notice-close { grid-area: close; align-self: center; display: grid; place-items: center; width: 32px; height: 32px; padding: 0;
  border: 0; border-radius: 8px; background: transparent; color: var(--paper); cursor: pointer; }
.notice-close:hover { background: rgb(255 255 255 / 18%); }
.notice-close:disabled { opacity: 0.55; cursor: not-allowed; }
.notice-close .icon { width: 16px; height: 16px; }
.notice-more { justify-self: start; padding: 2px 0; border: 0; background: none; color: var(--critical); cursor: pointer;
  font: 500 13.5px/1.4 var(--font-body); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) {
  .notice { grid-template-columns: 20px minmax(0, 1fr) auto; grid-template-areas: "mark body close" ". fix fix"; }
  .notice-fix { justify-self: start; margin-top: var(--s2); }
  .notice-close { align-self: start; margin: -6px -4px 0 0; }
}
.figure { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.figure b { font: 300 48px/1 var(--font-display); font-variation-settings: "opsz" 144; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.figure span { font-size: 13px; color: var(--ledger); }

.instrument { background: linear-gradient(180deg, var(--panel-hi), var(--panel-lo)); color: var(--ink); border: 0; box-shadow: inset 0 0 0 1px var(--line); border-radius: var(--radius-card); padding: 20px var(--s5) var(--s5);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); align-content: start; min-width: 0; }
.instrument .card-label { color: var(--ink); }
.instrument-body { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s5); align-items: start; }
.instrument-mark { width: 52px; height: 52px; border: 0; border-radius: 15px; background: var(--brass); color: var(--paper); display: grid; place-items: center; margin-top: 4px; box-shadow: inset 0 1px 0 rgb(255 255 255 / 22%), 0 6px 14px -8px rgb(116 80 48 / 80%); }
.instrument-mark .icon { width: 24px; height: 24px; }
.stations { list-style: none; margin: 0; padding: 0 0 0 22px; display: grid; gap: 14px; position: relative; }
.stations::before { content: ""; position: absolute; left: 3px; top: 6px; bottom: 6px; width: 1px; background: var(--line); }
.stations li { position: relative; display: grid; gap: 2px; }
.stations li::before { content: ""; position: absolute; left: -23px; top: 3px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--live); box-shadow: 0 0 0 3px var(--panel-hi); }
.stations li.hollow::before { background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--idle-ring), 0 0 0 3px var(--panel-hi); }
.stations b { font: var(--label); letter-spacing: var(--label-track); text-transform: uppercase; color: var(--brass); }
.stations span { font-size: 12.5px; color: var(--body-ink); }
.instrument-foot { padding-top: var(--s4); border-top: 1px solid var(--line); display: grid; gap: var(--s3); font-size: 12px; color: var(--caption); }
.check-rows { list-style: none; margin: 0; padding: 0; display: grid; }
.check-rows li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--s3); padding: 12px 0; border-top: 1px solid var(--line); }
.check-rows li:last-child { border-bottom: 1px solid var(--line); }
.check-rows .icon { color: var(--live); width: 20px; height: 20px; }
.check-rows b { display: block; font-weight: 600; font-size: 14px; }
.check-rows span { font-size: 12.5px; color: var(--ledger); }

/* ---------- buttons and fields ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 34px; padding: 7px 14px;
  border: 0; border-radius: var(--radius); background: var(--paper); box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--ink);
  font: 500 13px/1.2 var(--font-body); text-decoration: none; cursor: pointer; white-space: nowrap; }
.btn .icon { width: 15px; height: 15px; }
.btn:hover { background: var(--ground-light); }
.btn:active, .chip-button:active { transform: translateY(1px); }
.btn.primary { background: var(--orbit); box-shadow: none; color: var(--paper); font-weight: 600; }
.btn.primary:hover { background: var(--orbit-deep); }
.btn.danger { background: var(--danger); box-shadow: none; color: var(--paper); font-weight: 600; }
.btn.danger:hover { background: var(--danger-deep); }
.btn.small { min-height: 28px; padding: 5px 11px; font-size: 12px; }
.btn.on-ink { background: transparent; color: var(--brass); box-shadow: none; padding-left: 4px; padding-right: 4px; }
.btn.on-ink:hover { background: transparent; color: var(--ink); }
/* Disabled is not-allowed; only a control whose request is in flight (aria-busy) shows the wait cursor. */
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
[aria-busy="true"], .btn[aria-busy="true"]:disabled { cursor: wait; }
.link-button { background: none; border: 0; padding: 4px 0; color: var(--orbit); font: 500 13.5px/1.2 var(--font-body); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.field { display: grid; gap: 6px; min-width: 0; }
.field > span, .field-label { font: var(--label); letter-spacing: var(--label-track); text-transform: uppercase; color: var(--label-ink); }
input, select, textarea { font: 400 13.5px/1.4 var(--font-body); color: var(--ink); background: var(--paper);
  border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 7px 12px; min-height: 34px; min-width: 0; width: 100%; }
select { width: auto; padding-right: 30px; cursor: pointer; }
.window select { min-height: 28px; padding: 4px 28px 4px 10px; font-size: 12.5px; }
input:focus, select:focus, textarea:focus { border-color: var(--orbit); outline: none; box-shadow: 0 0 0 1px var(--orbit); }
textarea { font: 12px/1.6 var(--font-mono); resize: vertical; min-height: 220px; background: var(--ground-light); }
.inline-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s3); align-items: end; }
.inline-form .check-row { grid-column: 1 / -1; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s3); }

/* ---------- chips, marks and checks ---------- */
.chip { display: inline-flex; align-items: center; gap: 6px; height: 20px; padding: 0 9px; border: 0; border-radius: 999px;
  font: 600 10.5px/1 var(--font-body); color: var(--body-ink); white-space: nowrap; background: var(--mist); }
.chip.blue { color: var(--live); background: var(--live-tint); }
.chip.blue::before, .chip.ink::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip.ink { background: var(--ink); color: var(--ground); }
.chip.dashed { color: var(--ledger); background: var(--mist); }
.chip.dashed::before { content: ""; width: 6px; height: 6px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--idle-ring); }
.chip.caps { text-transform: uppercase; font: var(--label); letter-spacing: var(--label-track); }
.chip.warn { color: var(--warn-ink); background: var(--warn-tint); }
.chip.warn::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brass-light); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.check-marks { display: inline-flex; flex-wrap: wrap; gap: 4px 12px; font: 400 12px/1.4 var(--font-mono); }
.check-marks span { display: inline-flex; align-items: center; gap: 4px; }
.check-marks .icon { width: 13px; height: 13px; }
.check-marks .fail { font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* ---------- tables ---------- */
.table-wrap { position: relative; overflow-x: auto; }  /* relative: an sr-only header stays inside the scroller instead of widening the page */
table { border-collapse: collapse; width: 100%; font-size: 13px; }
th { text-align: left; padding: 9px 14px 7px; font: var(--label); letter-spacing: var(--label-track); text-transform: uppercase; color: var(--label-ink);
  border-top: 0; border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: 11px 14px; border-bottom: 1px solid rgb(116 80 48 / 8%); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--panel-hi); }
td.t { font: 400 11px/1.6 var(--font-mono); color: var(--ledger); white-space: nowrap; font-variant-numeric: tabular-nums; }
td .sub, dd .sub { display: block; font: 400 11px/1.4 var(--font-mono); color: var(--label-ink); margin-top: 2px; }
td.ask { color: var(--ledger); min-width: 10em; }
td b { font-weight: 600; }
td b.mono { font-weight: 500; }
/* Every table fits its card at 1024 and up: secondary facts ride a muted sub-line, long text wraps, a name keeps
   enough room that its hyphens don't break it, and the action column hugs its control so it never scrolls away. */
td.name { min-width: 12em; }
td.what { min-width: 10em; }
td.act, td.who, details.log td.t { width: 1%; white-space: nowrap; }
td .checks-line { display: block; margin-top: 4px; }
/* Who started a crossing can be a long service account: its chip stops at 26ch, and its title holds the whole name. */
td.who .chip { display: inline-block; max-width: 26ch; overflow: hidden; text-overflow: ellipsis; vertical-align: top; }
.card > .table-wrap { margin: 0 calc(-1 * var(--s5)) calc(-1 * var(--s5)); }
.card > .table-wrap:not(:last-child) { margin-bottom: 0; border-bottom: 1px solid var(--line); }
.field > .segmented { justify-self: start; }
.card.keep .finding { margin-top: var(--s2); }
.card.keep td b { white-space: nowrap; }
.card.plan-bar { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s2) var(--s5); }
.card.plan-bar > div { display: grid; gap: 6px; }
#billing + #spend { margin-top: calc(-1 * var(--s1)); }
.card.flush > .table-wrap { margin: 0; }
/* A table that runs to its card's edges starts and ends at the card's 24px inset, in line with the card head above it. */
:is(.card > .table-wrap, .card > div > .table-wrap) :is(th, td):first-child { padding-left: var(--s5); }
:is(.card > .table-wrap, .card > div > .table-wrap) :is(th, td):last-child { padding-right: var(--s5); }
.keys-layout { display: grid; gap: var(--s5); grid-template-columns: minmax(280px, 1fr) minmax(0, 2fr); grid-template-areas: "create table"; align-items: start; }
.keys-layout > .key-create { grid-area: create; }
.keys-layout > .key-table { grid-area: table; }
.table-foot { padding: var(--s3) var(--s5); border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: var(--s3); align-items: center; }
.table-foot > .actions { flex: none; flex-wrap: nowrap; }

/* ---------- boundaries ---------- */
.legend { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); align-items: center; font: 400 11.5px/1.4 var(--font-mono); color: var(--ledger); }
.legend span { display: inline-flex; align-items: center; gap: 8px; }
.legend svg { width: 14px; height: 22px; display: block; }
/* The lane above already draws each boundary's crossings; its card holds the policy, the facts the lane doesn't, and the log. */
.boundary { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); scroll-margin-top: calc(var(--header) + var(--s4)); }
.boundary .policy { display: grid; gap: var(--s3); align-content: start; }
.boundary .title-row { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.sentence { font-size: 16px; line-height: 1.5; }
.fields { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px var(--s4); margin: 0; font-size: 13.5px; }
.fields dt { font: var(--label); letter-spacing: var(--label-track); line-height: 1.9; text-transform: uppercase; color: var(--ledger); }
.fields dd { margin: 0; overflow-wrap: anywhere; }
.evidence { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); align-content: start; min-width: 0; }
.strip-wrap { position: relative; display: grid; gap: 2px; }
.strip { width: 100%; height: auto; display: block; }
/* The day labels and the empty message are HTML, so they stay 10px and 11.5px however narrow the drawing scales. */
.strip-axis { position: relative; height: 14px; container: axis / inline-size; }
.strip-axis span { position: absolute; top: 0; font: 400 10px/1 var(--font-mono); color: var(--ledger); white-space: nowrap; }
.strip-empty { position: absolute; top: 0; left: 0.8%; padding-right: var(--s2); background: var(--paper); font: 400 11.5px/1.4 var(--font-mono); color: var(--ledger); }
.stats { display: flex; flex-wrap: wrap; gap: 6px var(--s5); font-size: 13.5px; }
.stats b { font: 500 13.5px var(--font-mono); font-variant-numeric: tabular-nums; }
.stats .flag { font-weight: 600; }
details.log > summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; min-height: 28px; padding: 5px 12px;
  border: 0; border-radius: var(--radius); background: var(--paper); box-shadow: inset 0 0 0 1px var(--line-strong); font: 500 12px/1.2 var(--font-body); }
details.log > summary::-webkit-details-marker { display: none; }
details.log > summary:hover { background: var(--ground-light); }
details.log[open] > summary { background: var(--orbit-tint); box-shadow: inset 0 0 0 1.5px var(--orbit); color: var(--ink); }
details.log > .table-wrap { margin-top: var(--s3); max-height: 460px; overflow: auto; border-radius: 12px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.boundary > details.log { min-width: 0; }

details.log th { position: sticky; top: 0; background: var(--paper); border-top: 0; }
details.log th, details.log td { padding-left: 10px; padding-right: 10px; }

/* At a glance: every boundary as a lane on one shared time axis. */
.glance { gap: var(--s3); }
.glance-axis, .lane { display: grid; grid-template-columns: 220px minmax(0, 1fr) 168px; gap: 0 var(--s5); align-items: center; }
.axis-days { position: relative; height: 14px; container: axis / inline-size; }
.axis-days span { position: absolute; top: 0; transform: translateX(-50%); font: 400 10px/1 var(--font-mono); color: var(--ledger); white-space: nowrap; }
.axis-counts, .lane-counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); text-align: right; font-variant-numeric: tabular-nums; }
.axis-counts span { font: var(--label); letter-spacing: var(--label-track); line-height: 1; text-transform: uppercase; color: var(--ledger); }
.lanes { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.lanes li + li { border-top: 1px solid var(--line); }
/* A lane's hover band reaches 12px past its text on each side; its content box, and so its columns, stay put. */
.lane { min-height: 52px; padding: 8px var(--s3); margin: 0 calc(-1 * var(--s3)); color: var(--ink); text-decoration: none; }
.lane:hover { background: var(--panel-hi); }
.lane:focus-visible { outline-offset: -2px; }
.lane-label { display: grid; gap: 1px; min-width: 0; }
.lane-label b { font: 600 13px/1.25 var(--font-body); }
.lane-label small { font: var(--label); letter-spacing: var(--label-track); line-height: 1.45; text-transform: uppercase; color: var(--ledger); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lane-label small.gap { color: var(--warn-ink); text-transform: none; letter-spacing: 0.02em; font-size: 10.5px; white-space: normal; }
.lane-track { position: relative; height: 28px; border-radius: 8px; background: var(--ground-light); box-shadow: inset 0 0 0 1px rgb(116 80 48 / 10%); overflow: hidden; }
.lane-track::before { content: none; }
.lane-track.dark { background: repeating-linear-gradient(135deg, var(--ground) 0 6px, var(--stripe) 6px 12px); }

.lane-track > i { position: absolute; top: 5px; bottom: 5px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--orbit); opacity: 0.8; }
.lane-track > i.short { top: 9px; bottom: 9px; background: var(--ink); opacity: 0.45; }
.lane-track > i.passed { background: var(--live); }
.lane-track > i.day { top: 0; bottom: 0; width: 1px; margin-left: 0; border-radius: 0; background: rgb(116 80 48 / 7%); opacity: 1; }
.lane-track > i.failed { background: var(--critical); opacity: 1; top: 2px; bottom: 2px; }
.lane-counts b { font: 500 15px/1 var(--font-mono); }
.lane-counts span { font: 400 13px/1 var(--font-mono); color: var(--ledger); }
.lane-counts .flag { color: var(--critical); font-weight: 500; }
.glance .legend { padding-top: var(--s3); border-top: 1px solid var(--line); }
/* A day label is about 3.5em wide: where the axis can't fit them all, every other one (then every fourth) stands. */
@container axis (max-width: 420px) { span:nth-child(even) { display: none; } }
@container axis (max-width: 210px) { span:nth-child(4n + 3) { display: none; } }
/* Below 1240px each lane's track takes the full width under its label and counts, so its days stay apart. */
@media (max-width: 1240px) {
  .glance-axis { grid-template-columns: minmax(0, 1fr); }
  .glance-axis > span:first-child, .axis-counts { display: none; }
  .lane { grid-template-columns: minmax(0, 1fr) 196px; grid-template-areas: "label counts" "track track"; gap: 6px var(--s3); }
  .lane-counts { column-gap: var(--s2); }  /* the three labels under the counts never touch */
  .lane-label { grid-area: label; }
  .lane-track { grid-area: track; }
  .lane-counts { grid-area: counts; }
  .lane-counts > *::after { content: attr(data-label); display: block; margin-top: 4px; font: var(--label); letter-spacing: var(--label-track); line-height: 1; text-transform: uppercase; color: var(--ledger); }
}

/* ---------- activity ---------- */
.requests { display: grid; grid-template-columns: minmax(0, 1fr); }
.request { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s2); padding: var(--s4) 0; border-top: 1px solid var(--line); }
.request:first-child { border-top: 0; padding-top: 0; }
/* Child selectors: the request's own lines, never the cells of the crossing log inside it (td.ask). */
.request > .when { font: 400 11px/1.4 var(--font-mono); color: var(--ledger); }
.request > .ask { font: 400 18px/1.35 var(--font-display); font-variation-settings: "opsz" 36; }
.request > .row { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; justify-content: space-between; }

/* The records finder: filters on one line under the card head, a key to open at its end. */
.record-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); padding: 0 var(--s5) var(--s3); }
.record-open { display: flex; gap: var(--s2); margin-left: auto; min-width: min(320px, 100%); }
.record-open input { min-height: 28px; padding: 4px 10px; font: 12px/1.4 var(--font-mono); }
.record-status:empty { display: none; }
.record-status { padding: 0 var(--s5) var(--s3); }

/* ---------- connections ---------- */
.options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }
.option { display: grid; gap: 3px; text-align: left; padding: 11px 14px; min-height: 64px; border: 0; border-radius: 14px; box-shadow: inset 0 0 0 1px rgb(116 80 48 / 14%);
  background: var(--paper); color: var(--ink); cursor: pointer; font: inherit; }
.option b { font: 600 13px/1.25 var(--font-body); }
.option span { font-size: 11.5px; line-height: 1.4; color: var(--ledger); }
.option:hover { background: var(--ground-light); }
.option[aria-pressed="true"], .option.radio:has(input:checked) { background: var(--select-fill); box-shadow: inset 0 0 0 2px var(--orbit); color: var(--ink); }
.option[aria-pressed="true"] span, .option.radio:has(input:checked) span { color: var(--ledger); }
.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.steps li { counter-increment: step; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--s3); align-items: center; font-size: 13.5px; color: var(--body-ink); }
.steps li::before { content: counter(step); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--orbit-tint); font: 700 12px/1 var(--font-body); color: var(--orbit); }
.code-block { border: 0; border-radius: var(--radius); background: var(--ink); color: var(--code-ink); min-width: 0; overflow: hidden; }
.code-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); padding: 8px 8px 8px 16px; border-bottom: 1px solid var(--on-ink-line); }
.code-head .card-label { font: var(--label-head); letter-spacing: var(--label-head-track); text-transform: uppercase; color: var(--brass-light); }
.code-block pre { margin: 0; padding: var(--s4); overflow: auto; max-height: 360px; }
.code-block code { font: 400 12px/1.6 var(--font-mono); white-space: pre; }
.secret { display: block; overflow-x: auto; padding: 14px 16px; border: 0; border-radius: var(--radius); background: var(--ink); color: var(--ground);
  font: 400 13.5px/1.4 var(--font-mono); user-select: all; white-space: nowrap; }

/* ---------- verify ---------- */
.verdict-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); }
.verdict-title { display: flex; align-items: center; gap: var(--s3); }
.verdict-title .icon { width: 30px; height: 30px; }
.verdict-title h3 { font: 300 26px/1.1 var(--font-display); font-variation-settings: "opsz" 72; }
.card.verdict { box-shadow: var(--shadow-card), inset 3px 0 0 var(--ink); }
.card.verdict.good { box-shadow: var(--shadow-card), inset 3px 0 0 var(--live); }
.card.verdict.good .verdict-title .icon { color: var(--live); }
.verify-checks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 0 var(--s5); }
.verify-checks li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.verify-checks .icon { width: 16px; height: 16px; margin-top: 2px; }
.verify-checks li.pass .icon { color: var(--live); }
.verify-checks li.fail { font-weight: 600; }
.verify-checks b { display: block; font: var(--label); letter-spacing: var(--label-track); line-height: 1.5; text-transform: uppercase; color: var(--ledger); }

/* ---------- reviews ---------- */
.back-link { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; color: var(--ledger); text-decoration: none; font: 500 13px/1.2 var(--font-body); justify-self: start; }
.back-link:hover { color: var(--ink); }
.back-link .icon { width: 16px; height: 16px; }
.segmented { display: inline-flex; gap: 2px; padding: 3px; border: 0; border-radius: 10px; background: var(--mist); }
/* A segmented control is 40px like the selects beside it (32px small, in a card head): its buttons sit inside a 1px border. */
.seg { border: 0; border-radius: 8px; background: transparent; color: var(--body-ink); min-height: 28px; padding: 4px 12px; font: 500 12px/1.2 var(--font-body); cursor: pointer; }

.segmented.small .seg { min-height: 22px; padding: 3px 10px; }
.seg:hover { color: var(--ink); }
.seg[aria-pressed="true"] { background: var(--paper); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgb(10 14 20 / 12%), 0 0 0 1px rgb(116 80 48 / 10%); }
.decision-options { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }
.decision-options legend { margin-bottom: var(--s2); }
.option.radio { position: relative; cursor: pointer; }
.option.radio input { position: absolute; opacity: 0; pointer-events: none; }
.option.radio:has(input:focus-visible) { outline: 2px solid var(--orbit); outline-offset: 2px; }
fieldset:disabled .option.radio, .option.radio:has(input:disabled) { opacity: 0.55; cursor: not-allowed; }
/* The policy ladder offered as a choice: a card per rung, its one line under its name. */
.ladder { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s2); }
.ladder legend { padding: 0; margin-bottom: var(--s2); }
.ladder .option { min-height: 0; align-content: start; }

/* Grapheine uses text-only evidence and exact, inspectable changes. */
.grapheine-list { list-style: none; margin: 0; padding: 0; }
.grapheine-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--s3); padding: var(--s3) 0; border-top: 1px solid var(--line); }
.grapheine-list li:first-child { border-top: 0; }
.grapheine-list a { overflow-wrap: anywhere; }
.grapheine-status { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s3); }
.grapheine-status > div { display: flex; align-items: center; gap: var(--s2); }
.grapheine-status > button { margin-left: auto; }
.grapheine-candidates { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s2); padding: 0; border: 0; margin: 0; min-width: 0; }
.grapheine-candidates legend { margin-bottom: var(--s2); font-size: 14px; }
.grapheine-candidates b { overflow-wrap: anywhere; }
.grapheine-evidence { display: grid; gap: var(--s3); }
.grapheine-evidence details, .grapheine-change { border: 1px solid var(--line); padding: var(--s3); min-width: 0; }
.grapheine-evidence summary, .grapheine-change summary { cursor: pointer; overflow-wrap: anywhere; }
.grapheine-evidence .mono { overflow-wrap: anywhere; }
.grapheine-source, .grapheine-diff { max-height: 440px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font: 12px/1.6 var(--font-mono); background: var(--veil); padding: var(--s3); border: 1px solid var(--line); }
.grapheine-source:focus-visible, .grapheine-diff:focus-visible { outline: 2px solid var(--orbit); outline-offset: 2px; }
.grapheine-diff code { font: inherit; }
.grapheine-diff span { display: block; min-height: 1.6em; white-space: pre-wrap; }
.grapheine-diff .added { background: color-mix(in srgb, var(--orbit) 8%, var(--ground)); color: var(--orbit); }
.grapheine-diff .removed { background: color-mix(in srgb, var(--critical) 8%, var(--ground)); color: var(--critical); }
.grapheine-diff .diff-heading { color: var(--ledger); }
.grapheine-change + .grapheine-change { margin-top: var(--s3); }
.grapheine-full { margin-top: var(--s2); }
.grapheine-authority { padding: var(--s3) 0; border-top: 1px solid var(--line); }
.grapheine-authority:first-child { border-top: 0; }
.grapheine-authority > button { margin-top: var(--s3); }
.grapheine-audit-detail { max-width: 440px; max-height: 220px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font: 11px/1.5 var(--font-mono); margin: 0; }
@media (max-width: 640px) { .grapheine-list li { grid-template-columns: minmax(0, 1fr) auto; } .grapheine-list li > div:nth-child(2) { grid-column: 1; grid-row: 2; } .grapheine-list li > a { grid-column: 2; grid-row: 1 / 3; } }

/* Migration proposals keep the next action and missing evidence readable before exact technical bindings. */
.migration-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }
.migration-heading p { margin-bottom: 0; }
.migration-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); margin: var(--s4) 0; }
.migration-facts dt { font: 11px/1.5 var(--font-mono); text-transform: uppercase; color: var(--ledger); }
.migration-facts dd { margin: var(--s1) 0 0; }
.migration-checks { list-style: none; padding: 0; margin: var(--s3) 0; }
.migration-checks li { border-top: 1px solid var(--line); padding: var(--s3) 0; }
.migration-checks li > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); }
.migration-checks li p { margin: var(--s2) 0 0; }
.migration-run-list { list-style: none; padding: 0; margin: var(--s3) 0 0; }
.migration-run-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--s3); padding: var(--s3) 0; border-top: 1px solid var(--line); }
.migration-run-list li p { margin: var(--s1) 0 0; }
.migration-run-list a, .migration-facts dd { overflow-wrap: anywhere; }
.migration-empty, .migration-message, .migration-hold { border: 1px solid var(--line); background: var(--veil); padding: var(--s3); margin: var(--s3) 0; }
.migration-empty p:last-child, .migration-message p:last-child { margin-bottom: 0; }
.migration-policy-text { font: inherit; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 420px; overflow: auto; padding: var(--s3); background: var(--veil); }
#migration-policy details, #migration-run details { margin-top: var(--s3); }
#migration-policy summary, #migration-run summary { cursor: pointer; }
#migration-run h3 { font-size: 15px; margin-top: var(--s4); }
#migration-run .policy-json { white-space: pre-wrap; overflow-wrap: anywhere; }
.migration-measurements { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); margin: var(--s3) 0; }
.migration-measurements dt { overflow-wrap: anywhere; }
.migration-measurements dd { white-space: pre-wrap; }
@media (max-width: 640px) {
  .migration-facts { grid-template-columns: 1fr; gap: var(--s3); }
  .migration-measurements { grid-template-columns: 1fr; gap: var(--s1); }
  .migration-measurements dd { margin-bottom: var(--s3); }
  .migration-run-list li { grid-template-columns: minmax(0, 1fr) auto; }
  .migration-run-list li > a { grid-column: 1 / -1; justify-self: start; }
  .migration-checks li > div { flex-wrap: wrap; gap: var(--s2); }
}

/* ---------- webhooks ---------- */
input[type="checkbox"], input[type="radio"] { width: auto; min-height: 0; padding: 0; }
.toggle { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 5px 12px; border: 0; border-radius: 999px; box-shadow: inset 0 0 0 1px rgb(116 80 48 / 16%);
  background: var(--paper); color: var(--body-ink); font: 500 12.5px/1.2 var(--font-body); cursor: pointer; }
.toggle:hover { background: var(--ground-light); }
.toggle[aria-pressed="true"] { background: var(--orbit-tint); box-shadow: inset 0 0 0 1.5px var(--orbit); color: var(--ink); }
.event-list { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; }
.event-list legend { margin-bottom: var(--s1); }
.check-row { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--s3); align-items: start; padding: 10px 0; border-top: 1px solid var(--line); cursor: pointer; }
.check-row input { width: 16px; height: 16px; margin: 3px 0 0; accent-color: var(--orbit); }
.check-row b { display: block; font-size: 12.5px; font-weight: 500; }
.check-row span span { display: block; font-size: 13px; color: var(--ledger); }
.derivation { display: block; font: 11px/1.55 var(--font-mono); color: var(--ground); overflow-wrap: anywhere; white-space: normal; }
/* An inspected delivery opens as a full-width row under it, joined to it by one band. */
tr.detail td { padding-top: 0; background: var(--veil); }
tr:has(+ tr.detail:not([hidden])) td { border-bottom-color: transparent; background: var(--veil); }
tbody tr:has(+ tr.detail[hidden]:last-child) td { border-bottom: 0; }
tr.detail pre { margin: 8px 0 0; padding: 12px; max-height: 320px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--paper);
  font: 11.5px/1.5 var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---------- billing and account ---------- */
.pricing { display: grid; gap: 4px; padding-top: var(--s3); border-top: 1px solid var(--line); }
.allowance { margin: var(--s2) 0 var(--s1); font-size: 14px; font-variant-numeric: tabular-nums; }
.allowance b { font-weight: 500; }
.meter { height: 6px; background: var(--meter-empty); border-radius: 999px; overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--live); border-radius: 999px; }
.switch { display: inline-flex; align-items: center; gap: 10px; min-height: 34px; background: none; border: 0; padding: 4px 0; cursor: pointer; font: 500 13px/1 var(--font-body); color: var(--ink); }
.switch .track { width: 34px; height: 20px; border-radius: 999px; border: 0; background: var(--meter-empty); position: relative; transition: background 120ms; }
.switch .track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--paper); box-shadow: 0 1px 2px rgb(10 14 20 / 30%); transition: transform 120ms; }
.switch[aria-checked="true"] .track { background: var(--live); }
.switch[aria-checked="true"] .track::after { transform: translateX(14px); }
.switch:disabled { cursor: not-allowed; opacity: 0.6; }
.org-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s4); }
.org-name { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.org-name h3 { font: 300 30px/1.1 var(--font-display); font-variation-settings: "opsz" 72; letter-spacing: -0.015em; }
pre.policy-json { margin: 0; padding: var(--s4); max-height: 320px; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--ground-light); font: 12px/1.55 var(--font-mono); }

/* ---------- landing ---------- */
.landing { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, 1fr); gap: var(--s6); align-items: start; }
.landing-copy { display: grid; gap: var(--s4); }
.landing-copy h1 { font: 300 clamp(32px, 3.2vw, 44px)/1.08 var(--font-display); font-variation-settings: "opsz" 144; letter-spacing: -0.02em; text-wrap: balance; }
.landing-copy .deck { font-size: 16px; }
/* The shell's own landing, for readers without JavaScript; the console replaces it (index.html's noscript shows it). */
.static-landing { display: none; max-width: 760px; }

/* ---------- sample workspace ---------- */
/* The sample says what it is on every page: a dark band above the page, never mistaken for the page's content. */
.sample-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3) var(--s5);
  padding: 7px 10px 7px var(--s4); background: var(--paper); color: var(--body-ink); border: 0; border-radius: 14px;
  box-shadow: inset 0 0 0 1px rgb(184 145 90 / 45%), inset 3px 0 0 var(--brass-light); }
.sample-bar p { flex: 1 1 0; min-width: min(280px, 100%); font-size: 12.5px; max-width: none; }
.sample-bar p b { display: inline-block; margin-right: 10px; font: var(--label-head); letter-spacing: var(--label-head-track); line-height: 1.3; text-transform: uppercase; color: var(--brass); }
.sample-bar .actions { flex: 0 1 auto; }
.sample-off { color: var(--brass); font-size: 12.5px; }

/* ---------- policy backtest ---------- */
.trial-controls { display: grid; grid-template-columns: minmax(180px, 240px) minmax(0, 1fr); gap: var(--s4) var(--s5); align-items: start; }
.trial-controls > .conditions { grid-column: 1 / -1; }
.trial-controls select { width: 100%; }
.rule-controls { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(200px, 2fr); gap: var(--s4) var(--s5); align-items: end; }
.route-field { max-width: 420px; }
.rule-controls select, .rule-controls input { width: 100%; }
.card.rule .finding { margin-top: var(--s2); max-width: 46ch; }
.card.rule .finding b { font-weight: 400; }
#rule-editor:empty { display: none; }
.card.rules .rule-notice { color: var(--ink); margin-bottom: var(--s3); }
.rule-list { list-style: none; margin: 0 calc(-1 * var(--s5)); padding: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.rule-list li { display: grid; grid-template-columns: 150px minmax(0, 1fr) minmax(0, 1.2fr) auto; gap: var(--s2) var(--s4); align-items: center; padding: 12px var(--s5); font-size: 13.5px; }
.rule-list li + li { border-top: 1px solid var(--line); }
.rule-list .chip { justify-self: start; }
.rule-list b { font-weight: 600; }
.rule-list code { font: 400 12px/1.4 var(--font-mono); overflow-wrap: anywhere; }
.seg:disabled { color: var(--caption); cursor: not-allowed; background: transparent; text-decoration: line-through; text-decoration-thickness: 1px; }
.conditions { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 6px; }
.condition { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 13.5px; cursor: pointer; }
.condition input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--orbit); }
.condition-set { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 6px; }
.condition-set:disabled .condition { opacity: 0.55; cursor: not-allowed; }
.trial-result { display: grid; gap: var(--s3); padding-top: var(--s4); border-top: 1px solid var(--line); }
.card .trial-rule { font: 400 15.5px/1.45 var(--font-body); color: var(--ink); max-width: 90ch; }
.trial-rule .field-label { display: block; margin-bottom: 4px; }
.trial-rule b { font-weight: 600; }
.card .finding { font: 300 22px/1.28 var(--font-display); font-variation-settings: "opsz" 72; letter-spacing: -0.01em; max-width: 56ch; text-wrap: balance; }

/* ---------- empty, loading and dialogs ---------- */
.empty { border: 1px dashed rgb(116 80 48 / 25%); border-radius: 14px; padding: var(--s5); display: grid; gap: var(--s2); justify-items: start; }
.empty :is(h1, h2, h3) { font: 300 22px/1.2 var(--font-display); font-variation-settings: "opsz" 48; }
/* Inside a card, the card is the frame: an empty state adds no second, dashed one. */
.card .empty { border: 0; padding: 0; }
/* A failed load never reads as an empty state: a solid ink rule and an alert mark where an empty state is dashed,
   what failed in ink, why in the note, and Try again. */
.state-error { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--s3); align-items: start; padding: var(--s4) var(--s5);
  border: 0; border-radius: var(--radius); background: var(--critical-tint); box-shadow: inset 3px 0 0 var(--critical); }
.state-error > .icon { color: var(--critical); }
.state-error > .icon { width: 20px; height: 20px; margin-top: 1px; }
.state-error-body { display: grid; gap: 4px; justify-items: start; min-width: 0; }
.state-error-title { font: 500 15px/1.35 var(--font-body); color: var(--ink); }
.state-error .actions { margin-top: var(--s2); }
.card.flush .state-error { margin: 0 var(--s5) var(--s5); }
/* In a table footer the failure takes the whole row, not a squeezed flex item. */
.table-foot:has(> .state-error) { display: block; }
.card .table-foot > .state-error { margin: 0; }
.skeleton { display: grid; }
/* The Planisphere mark, its orbit drawing in a loop, centered where the content will go; still when motion is reduced. */
.loader { display: grid; place-items: center; }
.loader-mark { display: block; width: 56px; height: 48px; background: url(loader-still.svg?v=1) center / contain no-repeat; }
.skeleton.title .loader-mark { width: 36px; height: 30px; margin-top: 4px; }
/* A flush card has no padding of its own, so its placeholder takes the card's inset. */
.card.flush .skeleton { padding: 0 var(--s5) var(--s4); }
/* A control whose request is in flight carries a small mark beside its label. */
.btn[aria-busy="true"]::before { content: ""; width: 16px; height: 14px; margin-right: 6px; background: url(loader-still.svg?v=1) center / contain no-repeat; }
@media (prefers-reduced-motion: no-preference) {
  .loader-mark, .btn[aria-busy="true"]::before { background-image: url(loader.svg?v=1); }
}
dialog { width: min(520px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: var(--radius-card); background: var(--paper); color: var(--ink); box-shadow: 0 30px 60px -20px rgb(10 14 20 / 50%); }
dialog::backdrop { background: rgb(10 14 20 / 28%); }
.dialog-body { padding: var(--s5); display: grid; gap: var(--s4); }
.dialog-body h2 { font: 300 26px/1.12 var(--font-display); font-variation-settings: "opsz" 72; letter-spacing: -0.01em; }
.dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s2); padding: var(--s3) var(--s5) var(--s5); border-top: 0; }

/* ---------- narrow screens ---------- */
@media (max-width: 1180px) {
  .grid.two, .landing, .trial-controls, .rule-controls { grid-template-columns: minmax(0, 1fr); }
  .keys-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "create" "table"; }
}
@media (max-width: 900px) {
  /* The sidebar folds into a bar across the top and a strip of pages under it. */
  :root { --header: 56px; }
  .topbar { position: sticky; top: 0; width: auto; height: var(--header); padding: 0 16px; gap: var(--s3); border-right: 0; border-bottom: 1px solid var(--rail-line); }
  .brand-wordmark, .standing, .console-home { display: none; }
  .topbar-end { position: static; width: auto; margin-left: auto; flex-direction: row; align-items: center; gap: var(--s2); padding: 0; background: none; border: 0; }
  .workspace-link { max-width: 180px; }
  .body { margin-left: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
  .body:has(#mac-connection-panel) { grid-template-rows: auto 1fr; }
  .rail { position: sticky; top: var(--header); bottom: auto; z-index: 10; width: auto; height: auto; flex-direction: row; overflow-x: auto; padding: 6px 12px; gap: 2px;
    border-right: 0; border-bottom: 1px solid var(--rail-line); }
  .nav-label, .rail-links { display: none; }
  .nav-group { display: flex; gap: 2px; }
  .nav-group a { min-height: 34px; white-space: nowrap; }
  .nav-group a[aria-current] { box-shadow: inset 0 -2px 0 var(--select); }
  main { padding: var(--s5) 16px var(--s7); }
  .grid.halves, .boundary, .home-side { grid-template-columns: minmax(0, 1fr); }
  .change { grid-template-columns: minmax(0, 1fr) 16px; gap: 2px var(--s3); }
  .change-when, .change-where, .change-text { grid-column: 1; }
  .change > .icon { grid-column: 2; grid-row: 1 / span 3; }
  .options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .decision-options { grid-template-columns: minmax(0, 1fr); }
  .boundary { scroll-margin-top: calc(var(--header) + 72px); }  /* header plus the sticky page strip */
  .inline-form { grid-template-columns: minmax(0, 1fr); }
  .figure b { font-size: 44px; }
  .card .finding { font-size: 22px; }
  .card.plan-bar { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .rule-list li { grid-template-columns: minmax(0, 1fr) auto; }
  .rule-list li > b, .rule-list li > span:not(.chip) { grid-column: 1; }
  .rule-list li > button { grid-column: 2; grid-row: 1; }
}
@media (max-width: 480px) {
  .chip-button { padding: 8px 10px; }
  #workspace { display: none; }
  .instrument-body { grid-template-columns: minmax(0, 1fr); }
  .instrument-mark { display: none; }
  #spend th { white-space: normal; }
  #spend th, #spend td { padding-left: 10px; padding-right: 10px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } .btn:active, .chip-button:active { transform: none; } }

/* Policy evidence uses the console's shared cards, spacing and palette. */
.policy-board { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.policy-board > div { min-width: 0; }
.policy-control .policy-actions { margin-top: auto; }
.policy-status-line, .policy-actions, .policy-empty { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.policy-actions { justify-content: space-between; }
.policy-actions a { display: inline-flex; align-items: center; gap: var(--s2); }
.policy-empty > a { margin-left: auto; }
.policy-metric { font-size: 20px; }
.policy-report-time { font: 12px/1.5 var(--font-mono); color: var(--ledger); }
.policy-scope, .policy-sources, .policy-control code { overflow-wrap: anywhere; }
.policy-scope, .policy-coverage { color: var(--ledger); }
.policy-detail { min-width: 0; }
.policy-detail > summary, .policy-section > summary { cursor: pointer; }
.policy-detail[open] > summary { margin-bottom: var(--s3); }
.policy-detail p + p, .policy-detail h3 { margin-top: var(--s3); }
.policy-control .policy-json { white-space: pre-wrap; overflow-wrap: anywhere; }
.policy-checks { list-style: none; padding: 0; margin: var(--s3) 0; }
.policy-checks li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s2) var(--s3); padding: var(--s2) 0; border-bottom: 1px solid var(--line); }
.policy-checks b { font: 500 12px/1.5 var(--font-mono); }
.policy-check-strip { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--s1); }
.policy-check-strip > span { height: 4px; background: var(--ledger); }
.policy-check-strip > [data-status="passed"] { background: var(--orbit); }
.policy-check-strip > [data-status="failed"] { background: var(--critical); }
.policy-check-strip > [data-status="stale"] { background: var(--ink); }
.policy-sources { padding-left: var(--s5); font-size: 12px; }
.policy-sources li + li { margin-top: var(--s3); }
.policy-section { min-width: 0; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--header) + var(--s5)); }
.policy-section > summary { padding: var(--s4) 0; font-weight: 500; }
.policy-query-stats { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); }
.policy-query-stats > span { color: var(--ledger); }
.policy-query-stats b { color: var(--ink); font-weight: 500; }

/* ---------- boundary policies (Oct 9 slice, rebuilt on the Mac register Oct 21) ----------
   The workspace's own policies, the crossing guard's outcomes, and the shared pieces every page that lists a crossing
   reuses (status chip, crossing row, timeline, short ids, connection card). Tokens, label styles and control heights
   are the console's own; nothing here adds a colour, a face or a size class. Classes shared across pages are sc-. */

/* Status chip: a state pill like every other, its mark's shape saying how strong the response is. Watch rings,
   Flag raises, Hold pauses, Wall blocks; Hold and Wall stop someone, so they are inked. Text always rides along. */
.sc-chip { display: inline-flex; align-items: center; gap: 6px; height: 20px; padding: 0 9px; border-radius: 999px; background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line-strong); font: var(--label); letter-spacing: var(--label-track); line-height: 1; text-transform: uppercase;
  color: var(--body-ink); white-space: nowrap; vertical-align: middle; }
.sc-chip[data-rung="flag"] { background: var(--warn-tint); box-shadow: none; color: var(--warn-ink); }
.sc-chip:is([data-rung="hold"], [data-rung="wall"]) { background: var(--ink); box-shadow: none; color: var(--ground); }
.sc-mark { display: inline-block; flex: none; width: 8px; height: 8px; }
[data-rung="watch"] .sc-mark { border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor; }
[data-rung="flag"] .sc-mark { background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
[data-rung="hold"] .sc-mark { background: linear-gradient(90deg, currentColor 0 3px, transparent 3px 5px, currentColor 5px 8px); }
[data-rung="wall"] .sc-mark { background: currentColor; border-radius: 1px; }

/* What a policy did, as a short timeline: "Held for Logan Ross → Approved 7 s later → Crossed once". */
.sc-steps { font-size: 13px; line-height: 1.5; color: var(--ink); }
.sc-step b, .sc-step.end { font-weight: 600; }
.sc-then { margin: 0 6px; color: var(--caption); }
.sc-after, .sc-quiet { color: var(--ledger); font-weight: 400; }

/* A crossing as a row: when, what crossed (where and who under it), what its policy did, and its receipt. */
.sc-rows { list-style: none; margin: 0; padding: 0; }
.sc-row { display: grid; grid-template-columns: 108px minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 2px var(--s4); align-items: baseline;
  min-height: 52px; padding: 11px 0; border-top: 1px solid var(--line); }
.sc-rows > .sc-row:first-child { border-top: 0; }
.sc-when { font: 400 11px/1.6 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ledger); white-space: nowrap; }
.sc-what { min-width: 0; }
.sc-headline { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere;
  font: 600 13.5px/1.4 var(--font-body); }
.sc-headline.code, td.name b.code { font: 500 12.5px/1.45 var(--font-mono); }
.sc-meta { display: block; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--ledger); }
.sc-meta.mono { font: 400 11px/1.5 var(--font-mono); color: var(--caption); }
.sc-checks { display: block; margin-top: var(--s1); }
.sc-proof a { font-size: 13px; white-space: nowrap; }
details.log > .sc-rows { margin-top: var(--s3); max-height: 460px; overflow: auto; padding: 0 var(--s4); border-radius: 12px; background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line); }
@media (max-width: 720px) {
  .sc-row { grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--s3); }
  .sc-when, .sc-what, .sc-outcome { grid-column: 1; }
  .sc-proof { grid-column: 2; grid-row: 1 / span 3; align-self: start; }
}

/* A held-then-decided story as a timeline: time, a node on a rail (filled once it happened, hollow while it waits). */
.sc-timeline { list-style: none; margin: 0; padding: 0; }
.sc-timeline li { position: relative; display: grid; grid-template-columns: 108px 16px minmax(0, 1fr) auto; gap: 0 var(--s3); align-items: center;
  min-height: 44px; padding: var(--s2) 0; }
.sc-timeline li::before { content: ""; position: absolute; left: calc(108px + var(--s3) + 7.5px); top: 0; bottom: 0; width: 1px; background: var(--line-strong); }
.sc-timeline li:first-child::before { top: 50%; }
.sc-timeline li:last-child::before { bottom: 50%; }
.sc-timeline li:only-child::before { display: none; }
.sc-time { font: 400 11px/1.6 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ledger); white-space: nowrap; }
.sc-node { position: relative; z-index: 1; justify-self: center; width: 9px; height: 9px; border-radius: 50%; background: var(--orbit); box-shadow: 0 0 0 3px var(--paper); }
.sc-timeline li.waiting .sc-node { background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--idle-ring), 0 0 0 3px var(--paper); }
.sc-timeline li.current .sc-node { outline: 1.5px solid var(--orbit); outline-offset: 2px; }
.sc-words { font-size: 13.5px; line-height: 1.45; }
.sc-words b { font-weight: 600; }
.sc-link { justify-self: end; font-size: 13px; }
.sc-link .mono { font-size: 11px; }
.sc-here { font: var(--label); letter-spacing: var(--label-track); text-transform: uppercase; color: var(--caption); }
@media (max-width: 720px) {
  .sc-timeline li { grid-template-columns: 16px minmax(0, 1fr); gap: 2px var(--s3); align-items: start; }
  .sc-timeline li::before { left: 7.5px; }
  .sc-node { grid-column: 1; grid-row: 1 / span 3; margin-top: 5px; }
  .sc-time, .sc-words, .sc-link { grid-column: 2; justify-self: start; }
}

/* A short identifier with its copy button; the whole value is in the title and goes to the clipboard. */
.sc-id { display: inline-flex; align-items: center; gap: 2px; vertical-align: baseline; }
.sc-id > .mono { font-size: 11.5px; color: var(--ledger); }
.sc-copy { display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 8px; background: transparent;
  color: var(--ledger); cursor: pointer; }
.sc-copy:hover { background: var(--mist); color: var(--ink); }
.sc-copy .icon { width: 15px; height: 15px; }

.card.flush > .card-body { padding: 0 var(--s5) var(--s4); }

/* Connection card: name, what it records, and where it stands (a filled dot once something arrived, a ring while
   quiet). The card is the console's option; only its status line is new. */
.sc-card { align-content: start; min-height: 96px; }
.sc-status { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--s2); font: var(--label); letter-spacing: var(--label-track);
  line-height: 1.3; text-transform: uppercase; color: var(--caption); }
.sc-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--idle-ring); }
.sc-status time { text-transform: none; }
.sc-status[data-state="connected"] { color: var(--live); }
.sc-status[data-state="connected"] .sc-dot { background: var(--online); box-shadow: none; }
.sc-status[data-state="quiet"] .sc-dot { box-shadow: inset 0 0 0 1.5px var(--caption); }
div.sc-card { cursor: default; }
div.sc-card:hover { background: var(--paper); }
.option-group + .option-group { margin-top: var(--s5); }
.option-group > .field-label { display: block; margin-bottom: var(--s2); }
.connected-lead { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); font-size: 13.5px; }
.connected-lead .sc-status { margin-top: 0; }
details.setup-fold > summary, details.gaps-more > summary { cursor: pointer; padding: 4px 0; font-size: 13px; font-weight: 500; color: var(--orbit); }
details.setup-fold[open] > summary { margin-bottom: var(--s4); }
details.gaps-more[open] > summary { margin-bottom: var(--s2); }

/* Policies: one row a boundary, like the rules in force: name and version, the policy in the team's words, its guard,
   its response, Edit. The row open in the editor carries the current-place tint. */
.policy-list { list-style: none; margin: 0 calc(-1 * var(--s5)); padding: 0; border-top: 1px solid var(--line); }
.policy-row { display: grid; grid-template-columns: minmax(150px, 210px) minmax(0, 1fr) minmax(140px, 190px) 76px 64px; gap: var(--s2) var(--s4);
  align-items: start; padding: 14px var(--s5); font-size: 13.5px; }
.policy-row + .policy-row { border-top: 1px solid var(--line); }
.policy-row.current { background: var(--orbit-tint); box-shadow: inset 3px 0 0 var(--orbit); }
.policy-row b { font-weight: 600; }
.policy-row .sub { display: block; margin-top: 3px; font: 400 11px/1.45 var(--font-mono); color: var(--ledger); overflow-wrap: anywhere; }
.policy-row .sub.words { font: 400 12px/1.45 var(--font-body); color: var(--ledger); }
.policy-text p { max-width: 72ch; }
.policy-row code, .boundary dd code { font: 400 11.5px/1.4 var(--font-mono); color: var(--ink); }
.policy-guard .sub { margin: 0 0 2px; font: var(--label); letter-spacing: var(--label-track); text-transform: uppercase; color: var(--label-ink); }
.policy-response { padding-top: 1px; }
.policy-act { justify-self: end; }
.saved-notice { padding: 10px 14px; border-radius: var(--radius); background: var(--live-tint); color: var(--ink); font-size: 13px; }
.policies-card > .note { margin-top: calc(-1 * var(--s2)); }
details.starters { border-top: 1px solid var(--line); margin: 0 calc(-1 * var(--s5)); padding: var(--s3) var(--s5) 0; }
.policy-list + details.starters { margin-top: 0; }
details.starters > summary, details.advanced > summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  min-height: 28px; padding: 5px 12px; border-radius: var(--radius); background: var(--paper); box-shadow: inset 0 0 0 1px var(--line-strong);
  font: 500 12px/1.2 var(--font-body); color: var(--ink); }
details.starters > summary::-webkit-details-marker, details.advanced > summary::-webkit-details-marker { display: none; }
details.starters > summary:hover, details.advanced > summary:hover { background: var(--ground-light); }
details.starters[open] > summary, details.advanced[open] > summary { background: var(--orbit-tint); box-shadow: inset 0 0 0 1.5px var(--orbit); }
details.starters[open] > summary { margin-bottom: var(--s3); }
details.starters > .policy-list { border-top: 1px solid var(--line); }
.note.version { font-size: 12.5px; }

/* The editor: the policy in the team's words, who guards it and how Planisphere responds come first; what crosses it
   reads as plain choices; the patterns and a live match wait under Advanced. */
.editor { display: grid; gap: var(--s5); }
.editor-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 280px); gap: var(--s4) var(--s5); align-items: start; }
.editor-row.respond { grid-template-columns: minmax(200px, 280px) minmax(0, 1fr); }
.editor-row select { width: 100%; }
.editor textarea, .policy-words textarea { min-height: 64px; font: 400 15px/1.45 var(--font-body); background: var(--paper); }
.editor .field small.note { font-size: 12px; line-height: 1.4; }
.crosses-plain { border: 0; border-top: 1px solid var(--line); padding: var(--s4) 0 0; margin: 0; min-width: 0; display: grid; gap: var(--s3); }
.crosses-plain > legend { float: left; width: 100%; padding: 0; margin-bottom: var(--s3); }
.crosses-plain > legend + * { clear: both; }
.crosses-summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin: 0; }
.crosses-summary b { font-size: 14px; font-weight: 600; }
.crosses-summary .note { font: var(--label); letter-spacing: var(--label-track); text-transform: uppercase; color: var(--label-ink); }
.cross-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.cross-entry { display: grid; grid-template-columns: 160px 176px minmax(0, 360px) 28px; justify-content: start; gap: var(--s2) var(--s3); align-items: center; }
.cross-noun { font-size: 13.5px; color: var(--ink); }
.cross-entry input { font: 400 12.5px/1.4 var(--font-mono); }
.cross-entry.custom { grid-template-columns: 160px minmax(0, max-content) minmax(0, max-content) 28px; }
.cross-entry.custom code { font: 400 12px/1.4 var(--font-mono); padding: 4px 10px; border-radius: 8px; background: var(--mist); overflow-wrap: anywhere; }
.cross-entry.custom .note { font-size: 12px; }
.cross-add { display: flex; flex-wrap: wrap; gap: var(--s2); }
.cross-add .btn .icon { width: 14px; height: 14px; }
details.advanced { border-top: 1px solid var(--line); padding-top: var(--s4); }
.advanced-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s5); padding-top: var(--s4); }
.pattern-fields { display: grid; gap: var(--s3); align-content: start; }
.pattern-fields .field > span small { margin-left: 6px; font: 400 12px/1.3 var(--font-body); letter-spacing: 0; text-transform: none; color: var(--ledger); }
.pattern-fields textarea { min-height: 52px; font: 400 12px/1.6 var(--font-mono); }
.match-preview { display: grid; gap: var(--s3); align-content: start; padding: var(--s4); border-radius: 14px; min-width: 0;
  background: linear-gradient(180deg, var(--panel-hi), var(--panel-lo)); box-shadow: inset 0 0 0 1px var(--line); }
.match-preview input { font: 400 12.5px/1.4 var(--font-mono); }
.match-preview .sc-row { grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--s3); }
.match-preview .sc-when, .match-preview .sc-what, .match-preview .sc-outcome { grid-column: 1; }
.match-preview .sc-proof { grid-column: 2; grid-row: 1 / span 3; align-self: start; }
.try-result { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 24px; margin: 0; font-size: 13.5px; }
.try-result .icon { flex: none; width: 16px; height: 16px; }
.condition small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.4; color: var(--ledger); }
.check-add { display: grid; grid-template-columns: minmax(200px, 320px) minmax(0, 280px); gap: var(--s3); margin-top: var(--s2); align-items: end; }
.check-add select { width: 100%; }
.ladder .option b { display: inline-flex; align-items: center; gap: 7px; }
.ladder .option .sc-mark { color: var(--ledger); }
.ladder .option.radio:has(input:checked) .sc-mark { color: var(--orbit); }
.policy-save { display: grid; gap: var(--s2); padding-top: var(--s4); border-top: 1px solid var(--line); }
.policy-save .note.flag { color: var(--warn-ink); }
.save-actions { display: flex; flex-wrap: wrap; gap: var(--s3); }
.save-actions > #policy-remove { margin-left: auto; }
.btn.quiet-danger { color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); background: var(--paper); }
.btn.quiet-danger:hover { background: var(--critical-tint); }
#policy-explore > .grid { padding-bottom: var(--s5); }
@media (max-width: 900px) {
  .policy-row { grid-template-columns: minmax(0, 1fr) auto; }
  .policy-name, .policy-text, .policy-guard { grid-column: 1; }
  .policy-response { grid-column: 2; grid-row: 1; justify-self: end; }
  .policy-act { grid-column: 2; grid-row: 2; }
  .editor-row, .editor-row.respond, .advanced-grid, .check-add { grid-template-columns: minmax(0, 1fr); }
  .cross-entry, .cross-entry.custom { grid-template-columns: minmax(0, 1fr) 28px; }
  .cross-entry > :not(.sc-copy) { grid-column: 1; }
  .cross-entry > .sc-copy { grid-column: 2; grid-row: 1; }
}

/* Boundaries: the starters nothing crossed, in one list that says what to do with them. */
.starter-list { list-style: none; margin: 0 calc(-1 * var(--s5)) calc(-1 * var(--s5)); padding: 0; border-top: 1px solid var(--line); }
.starter-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s4); align-items: center; padding: 14px var(--s5);
  scroll-margin-top: calc(var(--header) + var(--s4)); }
.starter-list li + li { border-top: 1px solid var(--line); }
.starter-text { display: grid; gap: 4px; min-width: 0; }
.starter-text .title-row { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.starter-text b { font-weight: 600; font-size: 14px; }
.starter-text p { font-size: 13.5px; line-height: 1.5; max-width: 72ch; }
.starter-text .sub { font-size: 12px; color: var(--ledger); }
.legend svg.dash { width: 22px; height: 14px; }

/* Home: the gaps, most pressing first, on one line with the rest behind a count. */
.gap-lead a { display: block; color: var(--ink); text-decoration: none; font-size: 13.5px; line-height: 1.45; }
.gap-lead a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.gap-lead b { font-weight: 600; }
td .outcome-line { display: flex; align-items: center; gap: 5px; margin-top: 5px; font: 500 12px/1.4 var(--font-body); color: var(--ink); }
td .outcome-line .icon { width: 13px; height: 13px; flex: none; }
td.name code, .home-list code { font: 400 12px/1.4 var(--font-mono); overflow-wrap: anywhere; }