semlith 0.30.1

/* The portal's stylesheet.
 *
 * Every byte of it is compiled into the binary, so the page renders with the
 * cable unplugged. There is no build step, no preprocessor and no framework —
 * what is here is what the browser gets.
 *
 * Organised as: tokens, reset, shell, primitives, components, pages, narrow.
 * The scales at the top are the point of the file. Before them this stylesheet
 * had fourteen font sizes, fourteen gap values, seven radii and eight box
 * paddings, none of which agreed with each other, and every view invented its
 * own spacing inline. A value that is not in a scale below does not belong in
 * a rule below.
 */

@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/IBMPlexSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/IBMPlexSans-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/IBMPlexSans-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/IBMPlexMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/IBMPlexMono-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

/* ------------------------------------------------------------------ tokens */

:root {
  /* Colour. The light palette is the default and the one the design specifies. */
  --bg: #f4f6f8;
  --panel: #ffffff;
  --soft: #f9fafb;
  --line: #dce3e8;
  --line-soft: #e8edf1;
  --ink: #1e2a35;
  --ink-2: #3a4d5e;
  /* Was #6b7f90, which is 4.14:1 on white and fails AA at the 11-13px sizes
   * most of the secondary text in this product uses. This passes at 4.6:1. */
  --muted: #64778a;
  --accent: #f0a43c;
  --accent-ink: #1e2a35;
  --accent-edge: #c97f14;
  --blue: #4c7088;
  --blue-soft: #e3ecf2;
  --blue-ink: #2f4f68;
  --green: #3e9a6e;
  --green-soft: #eaf4ef;
  --green-ink: #1f5c3e;
  --amber-soft: #fbebd2;
  --amber-ink: #7a4e0a;
  /* A failure has to look different from an absence. Without these, "the
   * request failed" and "nothing matched your filter" rendered identically. */
  --red: #c0392b;
  --red-soft: #fbeae8;
  --red-ink: #8e2a1f;
  --chip: #eef2f5;
  --code-bg: #1e2a35;
  --code-ink: #c8d6e0;
  --code-key: #7e93a3;
  --scrim: rgba(20, 28, 36, 0.38);
  --shadow-nav: 0 18px 40px rgba(16, 26, 36, 0.14);
  --shadow-pop: 0 10px 28px rgba(16, 26, 36, 0.18), 0 1px 2px rgba(16, 26, 36, 0.12);

  /* The fallback families are metric-matched to Plex below, so `font-display:
   * swap` swaps a face rather than a layout. */
  --sans: "IBM Plex Sans", "Plex Sans Fallback", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", "Plex Mono Fallback", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Spacing. Nine steps.
   *
   * The three middle ones (10, 14, 18) and the retuned top two are what took
   * the density down to the design's: it never exceeds 20 for page rhythm and
   * clusters its gaps at 8 to 18, where this scale's old top steps were 24 and
   * 40. The small steps are deliberately untouched — a label and its value
   * still sit at 4, items in a group at 8 to 10 — because tightening those
   * would merge things that are not related, which is a different mistake from
   * the one being fixed. */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-2h: 10px;
  --sp-3: 12px;
  --sp-3h: 14px;
  --sp-4: 16px;
  --sp-4h: 18px;
  --sp-5: 20px;
  --sp-6: 24px;
  /* The floor under the last card on a page. Not on the 4px step the rest of
   * this scale is on, because it is not a gap between two things — it is the
   * design's own `padding: 24px 24px 44px`, and what it buys is that the last
   * card on a page does not sit against the viewport edge. Named rather than
   * written twice, because the narrow breakpoint sets it too and the graph
   * page is the one deliberate exception to it. */
  --view-floor: 44px;

  /* What a pill-shaped control in a filter row stands at. The design holds
   * every one of them to the same height, which is what makes a row of
   * unrelated dials read as one instrument panel. */
  --h-dial: 28px;

  /* Radius. Four steps. */
  --r-1: 4px;
  --r-2: 6px;
  --r-3: 8px;
  --r-4: 10px;
  --r-pill: 999px;

  /* Type. Every size in the product is one of these — there is no raw pixel
   * font size anywhere below this block.
   *
   * The three half steps are the v3 design's, and they are steps rather than
   * artefacts: at ten to thirteen pixels half a pixel is the difference
   * between a freshness word and the badge beside it, and snapping them to
   * the whole steps merged pairs the design deliberately separated. They are
   * half steps and not a second scale — nothing new sits between them. */
  --t-micro: 10px;
  --t-micro-h: 10.5px;
  --t-tiny: 11px;
  --t-tiny-h: 11.5px;
  --t-small: 12px;
  --t-small-h: 12.5px;
  --t-body-sm: 13px;
  --t-body: 14px;
  --t-lead: 16px;
  /* The one figure the design draws larger than anything else on a page: the
   * ledger's stat values. Its own token rather than `--t-display`, because the
   * narrow breakpoint steps `--t-display` down and this one does not follow. */
  --t-stat: 26px;
  --t-title: 18px;
  --t-h1: 21px;
  --t-display: 24px;
  /* What a field's text reads at. 13px on a pointer device, where it matches
   * the prose around it; 16px under a coarse pointer, because anything smaller
   * makes iOS Safari zoom the page when a field takes focus, and that reads as
   * the layout breaking when you tap a box. */
  --t-field: 13px;

  /* Line height, paired with the type steps. Before this the stylesheet had
   * six line-height declarations in 2,283 lines, so almost everything
   * inherited the body's 1.45 — including 12px mono in a table row, which the
   * design sets at 1.6 because a dense monospace row needs the air. */
  --lh-tight: 1.25;
  --lh-heading: 1.3;
  --lh-prose: 1.45;
  --lh-code: 1.6;

  /* Motion. One vocabulary, declared once: no rule below states a duration or
   * a curve of its own. */
  --d-quick: 120ms;
  --d-fade: 130ms;
  --d-hover: 140ms;
  --d-pop: 150ms;
  --d-rise: 160ms;
  --d-slide: 170ms;
  /* Deliberately linear, and deliberately slower: it reports real progress,
   * and an eased progress bar lies about the rate. */
  --d-bar: 0.4s;
  /* The one looping animation in the portal: the daemon's status dot. */
  --d-pulse: 2.4s;
  --e-in-out: ease;
  --e-out: ease-out;
  --e-pop: cubic-bezier(0.2, 0.9, 0.3, 1);
  --e-linear: linear;

  /* One measure for prose, so a subtitle on a 1600px display does not run to
   * 180 characters. Page subtitles are exempt: they sit on their own row under
   * the title and run the page's width, because capping them there is what
   * wrapped them mid-sentence at 1440px. */
  --measure: 68ch;

  --topbar-h: 56px;
  --rail-w: 56px;
  --side-w: 236px;
}

/* Metric-matched fallbacks.
 *
 * The five Plex faces are inside the binary, so `font-display: swap` is a
 * swap between two local fonts — but a swap between two fonts with different
 * metrics still reflows the page, and the header and the stat strip are
 * exactly where that shows. These override the fallback's metrics to Plex's,
 * so the line count before the swap equals the line count after it. Nothing is
 * fetched: the fallback families are system fonts. */
@font-face {
  font-family: "Plex Sans Fallback";
  src: local("Helvetica Neue"), local("Arial"), local("Liberation Sans");
  size-adjust: 100.6%;
  ascent-override: 103%;
  descent-override: 27%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Plex Mono Fallback";
  src: local("Menlo"), local("Consolas"), local("DejaVu Sans Mono");
  size-adjust: 99.4%;
  ascent-override: 103%;
  descent-override: 27%;
  line-gap-override: 0%;
}

:root[data-theme="dark"] {
  --bg: #0f151a;
  --panel: #161f27;
  --soft: #1b242c;
  --line: #26333d;
  --line-soft: #202b34;
  --ink: #e7eef3;
  --ink-2: #b7c6d1;
  --muted: #8a9dab;
  --accent: #f0a43c;
  --accent-ink: #13202b;
  --accent-edge: #c97f14;
  --blue: #86aec7;
  --blue-soft: #1c2b37;
  --blue-ink: #a9c8db;
  --green: #4fb185;
  --green-soft: #16261f;
  --green-ink: #7fcfa8;
  --amber-soft: #2e2310;
  --amber-ink: #e9bc72;
  --red: #e08074;
  --red-soft: #2b1714;
  --red-ink: #f0a79c;
  --chip: #212c35;
  --code-bg: #0a1015;
  --code-ink: #c8d6e0;
  --code-key: #7e93a3;
  --scrim: rgba(0, 0, 0, 0.5);
  --shadow-nav: 0 18px 40px rgba(0, 0, 0, 0.42);
  --shadow-pop: 0 10px 28px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* A machine set to dark should not be shown a white page and asked to find the
 * toggle. The explicit choice, when there is one, still wins: the toggle writes
 * data-theme, and both attribute blocks are more specific than this. */
/* Touch. The zoom floor only applies where there is a touch keyboard to bring
 * the page up to meet. */
@media (pointer: coarse) {
  :root {
    --t-field: 16px;
  }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f151a;
    --panel: #161f27;
    --soft: #1b242c;
    --line: #26333d;
    --line-soft: #202b34;
    --ink: #e7eef3;
    --ink-2: #b7c6d1;
    --muted: #8a9dab;
    --accent-ink: #13202b;
    --blue: #86aec7;
    --blue-soft: #1c2b37;
    --blue-ink: #a9c8db;
    --green: #4fb185;
    --green-soft: #16261f;
    --green-ink: #7fcfa8;
    --amber-soft: #2e2310;
    --amber-ink: #e9bc72;
    --red: #e08074;
    --red-soft: #2b1714;
    --red-ink: #f0a79c;
    --chip: #212c35;
    --code-bg: #0a1015;
    --scrim: rgba(0, 0, 0, 0.5);
    --shadow-nav: 0 18px 40px rgba(0, 0, 0, 0.42);
    --shadow-pop: 0 10px 28px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);
  }
}

/* ------------------------------------------------------------------- reset */

* {
  box-sizing: border-box;
}

/* `hidden` is how this page shows and hides the rail, the drawer and the
 * picker, and the attribute's own `display: none` is a UA-stylesheet rule that
 * any `display: flex` below beats on specificity. Without this the rail and the
 * drawer rendered side by side. */
[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
}

/* Every block of text in this page is spaced by the gap of the flex or grid
 * it sits in. The browser's own paragraph margin is a second, invisible
 * source of spacing on top of that, and it applied only where a block
 * happened to be written as a `<p>` — so the same note had 13px of extra air
 * on one card and none on the next. Classes that want a margin state one. */
p {
  margin: 0;
}

body {
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: var(--lh-prose);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--blue);
  text-decoration: none;
}
a:hover {
  color: var(--ink);
}

/* `textarea` belongs here and was missing, which is the whole of why the Index
 * page's path box wrote in black on a dark background: a textarea does not
 * inherit colour from its ancestors the way the others do, so it fell back to
 * the user agent's own black on a panel that is nearly black in dark mode. */
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

/* A field that follows a paragraph gets room to be a separate thing.
 *
 * A card sets one gap for all its children, and the gap that reads well
 * between two paragraphs is too tight between a sentence explaining a control
 * and the control itself — the helper text looked attached to the box rather
 * than about it. */
.card p + .field,
.card .subtitle + .field,
.card p + .copyfield,
.card .subtitle + .copyfield {
  margin-top: var(--sp-2);
}

/* One size for every placeholder in the portal.
 *
 * A placeholder is a hint, and it was being set at the field's own size — 13px
 * mono, or 16px on a phone where the size exists only to stop iOS zooming the
 * page. Beside the text a person types it read as content rather than as the
 * absence of it. Muted and a step down says what it is. */
::placeholder {
  font-size: var(--t-small);
  font-family: var(--mono);
  color: var(--muted);
  opacity: 1;
}

table {
  border-collapse: collapse;
  width: 100%;
  font-variant-numeric: tabular-nums;
}

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* Screen-reader-only, for the labels every input now carries. A placeholder is
 * not a label: it disappears the moment anyone types. */
.only-narrow {
  display: none;
}

.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;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pill.on i {
    animation: none;
  }

  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ------------------------------------------------------------------- shell */

/* `dvh` rather than `vh`: on a phone the URL bar collapses, and `100vh` is the
 * taller of the two states, so the bottom of the shell sits under it. */
#app {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  flex-shrink: 0;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 0 14px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}

.hamburger,
.icon-button {
  transition: background var(--d-fade) var(--e-in-out), color var(--d-fade) var(--e-in-out),
    border-color var(--d-fade) var(--e-in-out);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
  color: var(--ink-2);
  cursor: pointer;
}
.hamburger:hover,
.icon-button:hover {
  background: var(--soft);
  color: var(--ink);
}

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
  color: var(--ink);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.brand .logo {
  width: 26px;
  height: 26px;
  border-radius: var(--r-2);
  display: block;
}

.wordmark {
  font-weight: 600;
  letter-spacing: -0.01em;
  /* Without this the wordmark cannot shrink, and on a narrow screen it pushes
   * the theme toggle off the end of a bar that does not scroll. */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.divider-v {
  width: 1px;
  height: 22px;
  background: var(--line);
  flex-shrink: 0;
}

.page-title {
  font-weight: 500;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.spacer {
  flex-grow: 1;
}

.search-launcher {
  transition: border-color var(--d-fade) var(--e-in-out), color var(--d-fade) var(--e-in-out),
    background var(--d-fade) var(--e-in-out);
  display: flex;
  align-items: center;
  gap: 9px;
  height: 34px;
  padding: 0 var(--sp-2) 0 var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  background: var(--soft);
  color: var(--muted);
  flex: 0 1 320px;
  min-width: 0;
  cursor: pointer;
}
.search-launcher:hover {
  border-color: var(--blue);
  color: var(--ink);
}
.search-launcher .what {
  font-size: var(--t-body-sm);
  flex-grow: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}

.key-hint {
  font-family: var(--mono);
  font-size: var(--t-micro);
  padding: 2px 6px;
  border-radius: var(--r-1);
  background: var(--panel);
  border: 1px solid var(--line);
  flex-shrink: 0;
}

.body {
  display: flex;
  align-items: stretch;
  flex-grow: 1;
  min-height: 0;
  position: relative;
}

main {
  flex-grow: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* The icon rail, shown where the sidebar is collapsed on a wide screen. The
 * point of it is that navigation never disappears entirely: collapsing the
 * labels should not cost the user the ability to move. */
.rail {
  width: var(--rail-w);
  flex-shrink: 0;
  background: var(--panel);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-3) 0;
  overflow-y: auto;
}

.rail-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
}

.rail-rule {
  width: 20px;
  height: 1px;
  background: var(--line);
  margin: 5px 0;
}

.rail-item {
  transition: background var(--d-fade) var(--e-in-out), color var(--d-fade) var(--e-in-out);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-3);
  flex-shrink: 0;
  border: 0;
  background: none;
  color: var(--ink-2);
  cursor: pointer;
}
.rail-item:hover {
  background: var(--soft);
  color: var(--ink);
}
.rail-item[aria-current="page"] {
  background: var(--blue-soft);
  color: var(--ink);
}

.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  display: inline-block;
  flex-shrink: 0;
  animation: pulse var(--d-pulse) ease-in-out infinite;
}

.sidebar {
  width: var(--side-w);
  flex-shrink: 0;
  background: var(--panel);
  border-right: 1px solid var(--line);
  padding: var(--sp-3) var(--sp-3) var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  overflow-y: auto;
}

.nav-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-group-label {
  font: 500 var(--t-micro) var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  padding: var(--sp-2) var(--sp-3) var(--sp-1);
}

.nav-item {
  transition: background var(--d-fade) var(--e-in-out), color var(--d-fade) var(--e-in-out);
  display: flex;
  align-items: center;
  /* 10px, which is the v3 design's own gap between a nav mark and its word. */
  gap: var(--sp-2h);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-2);
  font-weight: 500;
  font-size: var(--t-body-sm);
  color: var(--ink-2);
  border: 0;
  background: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
}
.nav-item:hover {
  background: var(--soft);
  color: var(--ink);
}
.nav-item[aria-current="page"] {
  background: var(--blue-soft);
  color: var(--ink);
}
.nav-item svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.daemon-card {
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: var(--sp-2h) var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  background: var(--soft);
}
.daemon-card .who {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: 500;
}
.daemon-card .fact {
  font-family: var(--mono);
  font-size: var(--t-tiny);
  color: var(--muted);
}

/* The way back to the first-run screen sits under the daemon card, where the
 * design puts it and nowhere else. It carried a size and an indent of its own
 * while it was a line of muted text; as a chip it is a chip, and a second
 * opinion about its size here would only fight `.chip.sm`. */

.scrim {
  display: none;
}

/* -------------------------------------------------------------- primitives */

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* The page scrolls as one thing.
 *
 * An earlier version bounded the page to the viewport and let exactly one child
 * scroll inside it, which kept the title in place and moved everything under it
 * — and reading a page where the top half is pinned and the bottom half slides
 * is worse than reading a page that simply scrolls. The window still never
 * scrolls: `#app` is the viewport and this is the one region inside it that
 * moves.
 *
 * A table is the exception, below: its header stays while its rows move,
 * because a column of numbers with no heading above it is unreadable. */
.view > * {
  flex-shrink: 0;
}

.view {
  animation: rise var(--d-rise) var(--e-out);
  padding: var(--sp-6) var(--sp-6) var(--view-floor);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4h);
  flex-grow: 1;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
}

/* A block that takes what height is left over rather than only what its content
 * needs — a table on a page that is mostly that table, or the cards at the
 * bottom of the Stores page, which would otherwise leave a band of empty page
 * under them. */
.grow {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.grow > .table-wrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

/* A group of blocks that scroll with the page rather than inside it, and that
 * takes the height left over so the cards at the bottom of a short page fill
 * it instead of floating above a band of empty grey.
 *
 * `flex-shrink: 0` is the whole of the first sentence, and it used to read
 * `flex: 1 1 auto`. `.view > *` above sets `flex-shrink: 0` on every child for
 * exactly this reason, but that rule and this one are both one class deep, so
 * source order decided and this one — later in the file — put the shrink back.
 * On a page whose content overflows, the one child that could shrink absorbed
 * the entire overflow: the page stopped scrolling, this block was crushed
 * toward zero, and `.card { overflow: hidden }` clipped whatever was inside it.
 * The Retrieval ledger was where it showed, but it was never a ledger bug —
 * five pages put a `.scroller` directly under `.view`.
 *
 * `.grow` below keeps `1 1 auto` and is not the same case: it scrolls *inside*
 * itself through `.grow > .table-wrap`, so it has to be allowed to shrink. */
.scroller {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-height: 0;
  flex: 1 0 auto;
}

.scroller.grid {
  display: grid;
}

/* Growing into the window's spare height is for the last thing on a page. A
 * grid with cards after it grew on a tall screen and pushed them a screenful
 * down, below an empty band — Agents' registration card, Privacy's rules. */
.view > .scroller.grid:not(:last-child) {
  flex-grow: 0;
}

/* Cards in a row fill the row rather than leaving the shorter one short. */
.grid.fill {
  flex: 1 1 auto;
  align-items: stretch;
}

.grid.fill > * {
  min-height: 0;
}

/* A page header, the same on every page: the title with its status pill beside
 * it and any actions at the end of that row, then the subtitle on a row of its
 * own at the page's full width. A pill floated to the far side of a header is
 * a pill nobody reads as belonging to the title. */
.page-head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  min-width: 0;
}

.page-head .line {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  min-width: 0;
}

h1 {
  margin: 0;
  font-size: var(--t-h1);
  font-weight: 600;
  letter-spacing: -0.01em;
}

h2 {
  margin: 0;
  font-size: var(--t-lead);
  font-weight: 600;
}

.head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.titles {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  min-width: 0;
}

/* 12.5px, down from 14px, and this one class is the most visible drift there
 * was: it carries nearly every muted explanatory line in the portal, so a
 * whole page of secondary prose sat one and a half pixels above the design on
 * every page at once.
 *
 * The design has three sizes for this, not one, and the other two are below:
 * a page subtitle under an H1 keeps the body size, and a subtitle in a card's
 * header row is 13px. Everything else -- a footnote under a card, a line under
 * a control group -- is this. */
.subtitle {
  margin: 0;
  color: var(--muted);
  font-size: var(--t-small-h);
  line-height: var(--lh-prose);
  text-wrap: pretty;
}

/* The page subtitle, which has a row of its own under the heading and is the
 * one the design leaves at the body size. It did not move; it is written down
 * here because the base rule above moved under it. */
.page-head > .subtitle {
  font-size: var(--t-body);
}

/* The third size: a subtitle directly under a card's own title, inside the
 * card's header stack. The design draws that pairing at 13px at every site it
 * appears -- a tight column, the 600-weight title, then this. A footnote at
 * the bottom of the same card is 12.5px and is the base rule above; the
 * difference is position, not importance. */
.titles > .subtitle {
  font-size: var(--t-body-sm);
}

/* Inside a card, prose still wants a measure: a 900px-wide paragraph in a
 * grid cell is unreadable for the same reason a 180-character page subtitle
 * is. The page subtitle above is the exception, because it has a row of its
 * own and wrapping it mid-sentence at 1440px is what the cap caused. */
/* Prose fills the box it is in.
 *
 * These used to stop at a 68ch measure, which is the typographic default and
 * was wrong here in a way that read as a bug rather than as a choice: the page
 * subtitle above was already exempt, so one paragraph on a page ran the full
 * width and the one under it stopped halfway, with the card's right half
 * empty. Consistency is worth more than the measure on a page whose cards are
 * already sized to their content. */
.card .subtitle,
.hero .subtitle {
  max-width: 100%;
}

.eyebrow {
  font: 500 var(--t-tiny) var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* The same eyebrow, half a pixel down, for the ones that sit *inline* in a
 * dense header beside controls rather than above a group of them -- `Model`,
 * `By client`, the ledger's filter labels. The design draws both sizes and
 * uses this one only in that position; everything above a group keeps 11px. */
.eyebrow.sm {
  font-size: var(--t-micro-h);
}

.card-title {
  font-weight: 600;
  font-size: var(--t-body);
}

.actions {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  align-items: center;
}

/* A page header's controls are one row of one height. The small button is
 * 32px, which sat 4px short of the field beside it and read as a row that had
 * not been lined up.
 *
 * Direct children only: a copy control lives inside a field in that same row,
 * and a descendant selector grew it to the field's own height. */
.page-head .actions > .button,
.page-head .actions > .button.small {
  height: 36px;
}

.rule {
  height: 1px;
  background: var(--line-soft);
  border: 0;
  margin: 0;
}

.mono {
  font-family: var(--mono);
}

.muted {
  color: var(--muted);
}

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-4);
  /* Baked in rather than patched per use site: every table in a card was
   * setting this inline to stop the rows squaring off the corner, and the one
   * that forgot looked different from the other three. */
  overflow: hidden;
  min-width: 0;
}

.card.pad {
  padding: var(--sp-4) var(--sp-4h);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-height: 0;
}

/* A card whose content is dense enough that the standard padding reads as
 * dead space around it. */
.card.pad.dense {
  padding: var(--sp-3h) var(--sp-4);
  gap: var(--sp-2h);
}

/* The numbered verification steps on the Privacy page. */
.steps-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.step-row {
  display: flex;
  gap: var(--sp-3);
  min-width: 0;
}

.step-row .n {
  font-family: var(--mono);
  font-size: var(--t-small);
  color: var(--blue);
  width: 16px;
  flex-shrink: 0;
}

.step-row .what {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  min-width: 0;
  flex-grow: 1;
}

.step-row .say {
  font-size: var(--t-body-sm);
  line-height: var(--lh-prose);
  text-wrap: pretty;
}

.grid {
  display: grid;
  /* 280px rather than 320: at 320 the track floor exceeded the container on a
   * small phone and the whole page scrolled sideways. */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-4);
  align-items: start;
  min-height: 0;
}

/* Two columns that keep their proportions rather than wrapping at the first
 * excuse: the About page's facts belong beside its model table, not under it. */
.grid.two {
  grid-template-columns: minmax(320px, 1fr) minmax(0, 1.1fr);
  align-items: stretch;
}

/* The language table spans both columns and comes last, as the v4 About page
 * lays it out. Its 46 rows were what stretched the row it used to sit in and
 * cut the model table beside it off mid-row. */
.about-grid > .lang-card {
  grid-column: 1 / -1;
}

/* Three equal columns that collapse together rather than one at a time: the
 * ledger's command cards are a set, and two-above-one reads as a hierarchy
 * they do not have. */
.grid.three {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  align-items: stretch;
}

/* A grid that is the page's scrolling child scrolls its columns rather than
 * itself, so a long model table does not drag the fact cards up with it. */
.grid.grow > * {
  min-height: 0;
}

.strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.stat {
  flex: 1 1 160px;
  min-width: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-4);
  padding: var(--sp-3h) var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.stat .value {
  font-family: var(--mono);
  /* 26px, up from 24px. The symmetric half of this release's type pass: the
   * design draws several shapes larger than this implementation did, and a
   * pass that only shrank things would have made the portal worse while
   * looking like it was converging. */
  font-size: var(--t-stat);
  font-weight: 500;
  line-height: var(--lh-tight);
  font-variant-numeric: tabular-nums;
}
.stat .sub {
  color: var(--muted);
  font-size: var(--t-small);
  line-height: var(--lh-prose);
}

/* The one figure a page argues for, ringed in the accent. Used on the ledger's
 * measured ratio, which is the number a reader came to the page for and the one
 * that must never be read without its coverage and tier beside it. */
.stat.ringed {
  border-color: var(--accent);
}

.rows {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

/* A stack of facts about one thing — a store's name over its directory over
 * its model — where the gap between them is a hairline rather than a break. */
.rows.tight {
  gap: 2px;
}

/* A root the registry lists and the disk does not have, with the action that
 * fixes it beside the path rather than in a command somewhere else. */
.gone-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
}

/* One setup step: its state, what it is, where it is, and — for the one step
 * this page can perform — the button that performs it. */
.kv.step {
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--sp-2h);
}

.kv.step .card-title {
  width: 62px;
  flex-shrink: 0;
}

.kv {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.kv .k {
  font: 500 var(--t-tiny) var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  width: 120px;
  flex-shrink: 0;
}
.kv .v {
  font-family: var(--mono);
  font-size: var(--t-body-sm);
  min-width: 0;
  overflow-wrap: anywhere;
}

/* A label and its value, as two columns. As a wrapping flex row a long value
 * broke onto a new line at the left edge of the card, under the label rather
 * than beside it; a grid keeps the second line in the value's own column. */
.kv.pair {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  align-items: baseline;
}
.kv.pair .k {
  width: auto;
}

/* -------------------------------------------------------------- components */

.button {
  transition: background var(--d-fade) var(--e-in-out), color var(--d-fade) var(--e-in-out),
    border-color var(--d-fade) var(--e-in-out);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  /* 34px, which is the design's modal control height and what every other
   * shape in the portal is measured against. */
  height: 34px;
  padding: 0 var(--sp-4);
  border-radius: 7px;
  border: 1px solid transparent;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
  font-size: var(--t-body-sm);
  cursor: pointer;
  white-space: nowrap;
}
.button:hover {
  filter: brightness(1.15);
}
.button svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.button.secondary {
  background: var(--panel);
  border-color: var(--line);
  color: var(--ink);
  font-weight: 500;
}
.button.secondary:hover {
  border-color: var(--blue);
  color: var(--blue-ink);
  background: var(--panel);
}

/* A button that opens something stays lit while it is open. Without this the
 * only way to tell whether "Choose folder…" is showing its card is to look for
 * the card. */
.button.secondary[aria-pressed="true"] {
  background: var(--blue-soft);
  border-color: var(--blue);
  color: var(--blue-ink);
}

/* `.button.ghost` stood here: no background, no border, muted text. It had no
 * counterpart anywhere in the v4 design, and what it produced was a control
 * that reads as a sentence -- the graph page's `Reset` was the clearest case,
 * sitting beside `Fit` and `Pause` and looking like a caption. Every one of its
 * fourteen call sites now takes the secondary shape, which is the design's own
 * quiet action: a border, a panel background, and text that is ink rather than
 * muted. Nothing in the portal renders with neither background nor border at
 * rest any more. */

/* A dimmed accent action returns to full opacity and brightens a little less
 * than a live one, so the two are distinguishable while both are under the
 * pointer. */
.button.dim {
  opacity: 0.75;
}
.button.dim:hover {
  opacity: 1;
  filter: brightness(1.08);
}

/* Amber is the portal's one destructive treatment, and it is used nowhere
 * else for a control: border, text and fill together, so "this removes
 * something" is legible before it is clicked. */
.button.danger {
  background: var(--panel);
  border-color: var(--amber-ink);
  color: var(--amber-ink);
  font-weight: 500;
}
.button.danger:hover {
  background: var(--amber-soft);
  border-color: var(--amber-ink);
  color: var(--amber-ink);
  filter: none;
}

.button.small {
  height: 32px;
  padding: 0 var(--sp-3);
  font-size: var(--t-body-sm);
}

/* The design's smallest control, and the only one it fills with ink: the
 * report preview's `Export`. It is smaller than `.button.small` and darker
 * than the accent, which is what makes it read as the toolbar's own action
 * rather than as the page's primary one. */
.button.tiny {
  height: 26px;
  padding: 0 var(--sp-3);
  border-radius: var(--r-2);
  font-size: var(--t-small);
  font-weight: 500;
}
.button.tiny.ink {
  background: var(--ink);
  color: var(--panel);
  border-color: var(--ink);
}

.button[disabled] {
  opacity: 0.55;
  cursor: default;
  pointer-events: none;
}

.chip {
  transition: background var(--d-fade) var(--e-in-out), color var(--d-fade) var(--e-in-out),
    border-color var(--d-fade) var(--e-in-out);
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 var(--sp-3);
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink-2);
  font-size: var(--t-body-sm);
  cursor: pointer;
  white-space: nowrap;
}
.chip:hover {
  border-color: var(--blue);
  color: var(--ink);
}
/* The design's pressed chip is filled with ink and inverted, not washed with
 * blue. The wash is why a row of six pressed graph chips read as tinted text
 * rather than as six controls -- at 13px on a soft blue there is almost nothing
 * between pressed and unpressed but hue.
 *
 * And no `font-weight: 500`. A chip that gains weight on press is a chip that
 * changes width on press, so picking one in a wrapped row reflowed the row
 * under the pointer. The design declares no weight on either state. */
.chip[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--panel);
}
.chip[aria-pressed="true"]:hover {
  border-color: var(--ink);
  color: var(--panel);
}

/* A chip in a row of controls rather than in a filter bar: same shape, one
 * step down in size. The Impact page's `Prefer verified edges` and `Strict`
 * are the design's own use of it. */
.chip.sm {
  font-size: var(--t-small-h);
}
.chip[disabled],
.report-toggle[disabled] {
  opacity: 0.55;
  cursor: default;
}
.chip.static {
  cursor: default;
}
.chip.static:hover {
  border-color: var(--line);
  color: var(--ink-2);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--mono);
  font-size: var(--t-tiny);
  line-height: var(--lh-prose);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink-2);
  white-space: nowrap;
}

/* Two or three pills on one cell: the skill, the hook and the rule block are
 * three answers to one question and read as a row rather than as a column
 * each. They wrap on a phone rather than widening the table. */
.pills {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

/* A pill that reports a state carries a dot. One element, so a pill without a
 * state cannot accidentally look like one with a state. */
.pill i,
.pill .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.pill.on {
  border-color: var(--green);
  background: var(--green-soft);
  color: var(--green-ink);
}

/* A green dot means something is live right now, and it beats wherever it
 * appears: the sidebar's daemon dot, an open endpoint, a cached model, a
 * connected client. A still dot beside a beating one reads as two different
 * states of the same thing. The reduced-motion block at the top of this file
 * stops all of them. */
.pill.on i,
.pill.good i,
.pill.good .dot,
.dot.good {
  animation: pulse var(--d-pulse) ease-in-out infinite;
}

.pill.good {
  border-color: var(--green);
  background: var(--green-soft);
  color: var(--green-ink);
}
.pill.warn {
  border-color: var(--amber-ink);
  background: var(--amber-soft);
  color: var(--amber-ink);
}
.pill.bad {
  border-color: var(--red);
  background: var(--red-soft);
  color: var(--red-ink);
}

.tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--mono);
  font-size: var(--t-tiny);
  padding: 2px var(--sp-2);
  border-radius: var(--r-1);
  background: var(--chip);
  color: var(--ink-2);
}

.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
  flex-shrink: 0;
}

.filters {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  flex-wrap: wrap;
  flex-shrink: 0;
}

/* On a phone the filter row is chips, dials and a store picker, and wrapping
 * them spends the whole first screen before a single result. They scroll
 * sideways instead of stacking, which is what a row of filters does on a phone
 * everywhere else -- nothing is hidden, and the results stay above the fold.
 *
 * The drive gate's finding 4.8 is the standing check: more than two rows of
 * chips at 390px, with no overflow affordance, fails. 0.23.0 added the View
 * dial to this row and pushed it to three. */
@media (max-width: 599px) {
  .search-band .filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .search-band .filters::-webkit-scrollbar {
    display: none;
  }
  /* A flex item in a scrolling row shrinks to nothing without this, which
   * turns every chip into an ellipsis. */
  .search-band .filters > * {
    flex: 0 0 auto;
  }
  /* The note explains the budget dial and is the one thing here worth losing
   * when the row has to scroll. */
  .search-band .dial-note {
    display: none;
  }
}

.field {
  transition: border-color var(--d-fade) var(--e-in-out);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  height: 34px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  background: var(--panel);
  min-width: 0;
}
.field.tall {
  height: 40px;
  padding: 0 14px;
  gap: 10px;
}
.field:focus-within {
  border-color: var(--blue);
}
.field .prefix {
  font-family: var(--mono);
  color: var(--muted);
  flex-shrink: 0;
}
.field svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--muted);
}
.field input,
/* The Index page's path box is a textarea — several paths, one per line — and
   a textarea carries an intrinsic `cols` width that no `flex-grow` overrides.
   It sat at its default twenty columns in a row built for the whole page. */
.field textarea {
  border: 0;
  outline: none;
  background: transparent;
  flex-grow: 1;
  min-width: 0;
  width: 100%;
  font-family: var(--mono);
  font-size: var(--t-field);
}

/* A field that holds a textarea grows with it.
   Every other `.field` is one row of one line, so `.field` pins a height and
   centres its children — which a two-line textarea overflows in both
   directions at once, putting the first line of the placeholder above the
   border and the resize grip below it. Marked with a class rather than
   `:has(textarea)` so the rule is as explicit as the markup it styles. */
.field.area {
  height: auto;
  min-height: 40px;
  align-items: flex-start;
  padding-top: var(--sp-2);
  padding-bottom: var(--sp-2);
}
.field.area textarea {
  resize: vertical;
  line-height: 1.5;
  /* The grip lives inside the border now that the field grows, and a box that
     never shrinks below its two rows does not jump as lines are added. */
  min-height: calc(1.5em * 2);
}
/* On the first line, level with the text, rather than in the middle of a box
   whose height depends on how many paths were typed into it. */
.field.area .prefix {
  line-height: 1.5;
}

/* A select, shaped like the field beside it rather than like a pill. A
 * 999px-radius dropdown next to an 8px-radius input reads as two different
 * kinds of control for what is the same kind of choice. */
select.chip,
select.field {
  appearance: none;
  height: 40px;
  min-width: 140px;
  padding: 0 34px 0 var(--sp-3h);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  background-color: var(--panel);
  /* The arrow, drawn rather than fetched: the CSP allows no external asset and
   * the native one cannot be themed. */
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 18px center, right 13px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  color: var(--ink);
  font: inherit;
  font-size: var(--t-body-sm);
  cursor: pointer;
  transition: border-color var(--d-hover) var(--e-in-out);
}

select.chip:hover,
select.field:hover {
  border-color: var(--blue);
}

select.chip:focus-visible,
select.field:focus-visible {
  border-color: var(--blue);
}

.copyfield {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 7px;
  /* The same height as the buttons it sits beside: a taller box next to a
   * 36px button reads as a misalignment rather than as a field. */
  height: 36px;
  padding: 0 4px 0 var(--sp-3);
  min-width: 0;
}
/* In a field the copy control is the point of the field, so it is always
 * visible. The fade-in is for a code block, where the control would otherwise
 * sit over the text it copies. */
.copyfield .copy {
  opacity: 1;
  width: 28px;
  height: 28px;
}
/* Any control inside the field is inset by the same 4px on all four sides as
 * the copy button: a 32px button in a 36px box left 2px above and below and
 * none at all beside it. */
.copyfield .button {
  height: 28px;
  padding: 0 var(--sp-2h);
}

/* A field whose control says "Copy" rather than showing the icon, for a
 * command a reader is about to paste into a shell. The word needs room, so
 * the button sizes to its text. */
.copyfield.worded .copy {
  width: auto;
  padding: 0 var(--sp-3);
}
/* A command wraps rather than scrolling sideways: a reader who cannot see the
 * end of it cannot check what they are about to paste, and a hidden scrollbar
 * does not tell them there is more. The field grows to hold it.
 *
 * Only in the stanza panel. The endpoint field in a page header holds one
 * short URL and belongs to a row of 36px controls, so it keeps that height. */
.stanzas .copyfield.worded {
  height: auto;
  min-height: 36px;
  padding-block: 4px;
  align-items: center;
}
.stanzas .copyfield.worded .text {
  overflow-x: visible;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.copyfield .actions {
  gap: 4px;
}
.copyfield .text {
  font-family: var(--mono);
  font-size: var(--t-small);
  color: var(--ink-2);
  flex-grow: 1;
  min-width: 0;
  /* The text scrolls, the button does not: pinning the button to the end of
   * the content put it off-screen for any command longer than the box. */
  overflow-x: auto;
  white-space: pre;
}
.copyfield .button {
  flex-shrink: 0;
}

/* A copy control is a second-order action: it belongs to the thing beside it,
 * and a page showing a column of permanently visible Copy buttons is a page
 * competing with its own content. So it fades in when the pointer enters the
 * block it copies — and appears immediately for a keyboard, which has no
 * pointer to enter with. */
.copy {
  transition: opacity var(--d-quick) var(--e-in-out),
    background var(--d-fade) var(--e-in-out), border-color var(--d-fade) var(--e-in-out),
    color var(--d-fade) var(--e-in-out);
  opacity: 0;
  width: 26px;
  height: 26px;
  padding: 0;
  flex-shrink: 0;
}

.code-block .copy,
.copy.block {
  width: 28px;
  height: 28px;
}

.copyfield:hover .copy,
.copyfield:focus-within .copy,
.code-block:hover .copy,
.code-block:focus-within .copy,
.copy:focus-visible {
  opacity: 1;
}

/* Confirmed, for 1400ms, and wide enough to hold the word rather than
 * clipping it. */
.copy.done {
  opacity: 1;
  width: auto;
  padding: 0 var(--sp-2);
  border-color: var(--green);
  background: var(--green-soft);
  color: var(--green-ink);
}

.copy svg {
  width: 14px;
  height: 14px;
}

/* A code block with its copy control at the top right, over the block rather
 * than under it. */
.code-block {
  position: relative;
  min-width: 0;
}

.code-block .copy {
  position: absolute;
  top: var(--sp-2);
  right: var(--sp-2);
}

/* A message attached to the control that caused it, rather than an alert()
 * that steals focus and says nothing about where the problem is.
 *
 * Inline, with no chrome. This used to be declared twice — here, and again as
 * a padded bordered card in the ledger section — and the later declaration won
 * for every user of the class, which is why the Index page painted an empty
 * bordered box under its controls whenever there was nothing to say. The card
 * variant is `.notice` below; this one stays inline and disappears when it has
 * no text. */
.note {
  font-size: var(--t-body-sm);
  line-height: var(--lh-prose);
  color: var(--muted);
  min-height: 18px;
  /* A note is written as a `<p>` in some places and a `<div>` in others, and
   * the browser's own paragraph margin only applied to the first — so the
   * same note carried 13px of extra air above and below it on one card and
   * none on the next, on top of whatever gap the card already set. */
  margin: 0;
}
.note:empty {
  display: none;
}
/* The Index page's answer to Start indexing, in the button row. It takes the
 * rest of the row and wraps under the buttons when it is long, rather than
 * owning a line above the cards. */
.filters .index-note {
  flex: 1 1 240px;
  min-height: 0;
}
.note.bad {
  color: var(--red-ink);
}

.empty {
  background: var(--panel);
  border: 1px dashed var(--line);
  border-radius: var(--r-4);
  padding: var(--sp-5);
  color: var(--muted);
  text-wrap: pretty;
}

/* An error is not an empty state. It has a cause, and the cause is usually
 * actionable, so it is coloured like a problem rather than like an absence. */
.error {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--red-soft);
  border: 1px solid var(--red);
  border-radius: var(--r-4);
  padding: 14px var(--sp-4);
  color: var(--red-ink);
  text-wrap: pretty;
}
.error svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  margin-top: 1px;
}
.error .what {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* A table scrolls inside its own card while the page scrolls around it.
 *
 * That split is deliberate: a sticky column heading can only stay put inside
 * the box that scrolls it, so a table that flowed with the page would lose its
 * heading the moment the rows went past — and a column of figures with no
 * heading above it is unreadable. Everything that is not a table scrolls with
 * the page.
 *
 * The cap is in viewport units so the rows use the screen they are given, and
 * a table shorter than it simply ends. */
/* A table and its pager. The rows take whatever height the card is given and
 * the pager sits on the bottom edge of it — stretched by a grid row or by a
 * taller sibling, the card used to end in a band of empty white below the
 * pager. */
.table-card {
  display: flex;
  flex-direction: column;
  /* A floor, so a neighbour that grows cannot squeeze the rows down to a
   * sliver of a single line. */
  min-height: 168px;
  /* The cap lives on the card, not on the rows: capping the rows left the
   * pager floating in the middle of a stretched card with white space under
   * it. With the cap here the rows take the rest of the card and the pager is
   * always on its bottom edge. */
  max-height: 76dvh;
}
.table-card > .table-wrap {
  flex: 1 1 auto;
  min-height: 0;
}

.table-wrap {
  overflow: auto;
  min-width: 0;
}

/* Sticky, in every table. A column of figures scrolled past its heading is a
 * column nobody can read, and the wrapper is the scroll container so this is
 * where `top: 0` means the top of the visible rows. */
th {
  position: sticky;
  top: 0;
  z-index: 2;
  text-align: left;
  font: 500 var(--t-tiny) var(--mono);
  line-height: var(--lh-code);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  padding: var(--sp-2h) var(--sp-3h);
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  white-space: nowrap;
}

/* A sticky cell's border scrolls with the cell rather than staying at its
 * edge, so the line under the heading is drawn as a shadow instead. */
thead th {
  box-shadow: inset 0 -1px 0 var(--line);
  border-bottom: 0;
}

td {
  padding: var(--sp-3) var(--sp-3h);
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
  line-height: var(--lh-code);
}

tr:last-child td {
  border-bottom: 0;
}

tbody tr {
  transition: background var(--d-quick) var(--e-in-out);
}
tbody tr:hover {
  background: var(--soft);
}

/* A sortable header. The whole label is the control, so the hit target is the
 * column heading rather than a small arrow beside it. */
th .sort {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  cursor: pointer;
  transition: color var(--d-hover) var(--e-in-out);
}

th .sort:hover {
  color: var(--ink);
}

/* Reserved whether or not this column is the active one, so the header row
 * does not shift sideways when the sort moves to another column. */
th .arrow {
  display: inline-block;
  width: 9px;
  color: var(--accent-edge);
}

/* A cell held to one line, with the whole value on the shared tooltip. A
 * wrapped path makes every row a different height, which is what turns a file
 * list into something you have to read rather than scan. */
.one-line {
  display: block;
  max-width: 46ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Truncated at the start rather than the end, for a path. Every row on the
 * Files page began `/Users/…/Documents/…` and ended in the one part that says
 * which file it is, so cutting the end cut the only part worth reading.
 *
 * `direction: rtl` moves the ellipsis to the front; the text itself is wrapped
 * in an isolate so the segments stay in their real order and a leading `/`
 * does not jump to the other end. */
.one-line.tail {
  direction: rtl;
  text-align: left;
}

.one-line.tail > bdi {
  unicode-bidi: isolate;
}

th.num,
td.num {
  text-align: right;
  font-family: var(--mono);
}

td.path {
  font-family: var(--mono);
  font-size: var(--t-small);
  overflow-wrap: anywhere;
}

td.meta {
  font-family: var(--mono);
  font-size: var(--t-small);
  color: var(--muted);
}

/* 500, down from 600. There is no 600-weight name anywhere in the design; the
 * heaviest it draws a filename is 500, above a block of code. The report
 * preview's toolbar filename is lighter still and takes `.name.plain` below,
 * which is the case that made this visible -- a bolded filename over a
 * 400-weight preview read as a heading for the pane rather than as a label on
 * the file. */
.name {
  font-weight: 500;
}

/* A filename that is a label rather than a heading: the design's report
 * preview toolbar, where it sits at the body's own weight. */
.name.plain {
  font-weight: 400;
}

/* A root the registry still lists but that is no longer on disk. */
.gone {
  color: var(--red-ink);
}

/* The same rule the table cell gets, for the places the directory line is a
 * div rather than a cell. Previously `.meta` only existed as `td.meta`, so
 * those rendered at full ink weight and fought the name above them. */
.meta {
  font-family: var(--mono);
  font-size: var(--t-tiny);
  color: var(--muted);
  overflow-wrap: anywhere;
}

/* A stack of one-line facts under a name — a store's directory and its model.
 * Wrapped, each of those took three lines and a table row became a paragraph. */
.meta.one-line,
.name.one-line {
  max-width: 38ch;
  overflow-wrap: normal;
}

.table-foot {
  flex-shrink: 0;
  border-top: 1px solid var(--line);
  background: var(--soft);
  padding: var(--sp-2h) var(--sp-3h);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

/* The design's last row of a table card: a link onward, inside the same
 * border as the table it follows, reading as the card's own closing line
 * rather than as a control someone dropped underneath it. */
.table-follow {
  flex-shrink: 0;
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
  color: var(--blue);
  font: inherit;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  padding: var(--sp-3) var(--sp-3h);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.table-follow:hover {
  color: var(--ink);
  background: var(--soft);
}
.table-follow svg {
  flex-shrink: 0;
}

/* A pager is a row of controls, not a row of tags: the page sizes and the
 * step buttons are square-cornered here so they read as buttons, which is
 * what the design bundle draws. */
.table-foot .chip {
  height: 30px;
  min-width: 34px;
  justify-content: center;
  padding: 0 var(--sp-2h);
  border-radius: var(--r-2);
  font-family: var(--mono);
}
/* The pager's step buttons. They were `.button.ghost` here and this rule put
 * the border and the panel background straight back, which is the clearest
 * evidence that the ghost shape was never what anyone wanted: the one place it
 * was used at size had to undo it. `.button.secondary` carries both already,
 * so what is left is the pager's own height and its square corner. */
.table-foot .button.secondary {
  height: 30px;
  padding: 0 var(--sp-3);
  border-radius: var(--r-2);
}
.table-foot .button.secondary:hover:not([disabled]) {
  border-color: var(--blue);
  color: var(--blue-ink);
}
.table-foot .button.secondary[disabled] {
  border-color: var(--line-soft);
}

.forget {
  transition: color var(--d-quick) var(--e-in-out);
  border: 0;
  background: none;
  color: var(--amber-ink);
  font: inherit;
  font-size: var(--t-body-sm);
  cursor: pointer;
  padding: 0;
}
.forget:hover {
  color: var(--red-ink);
  text-decoration: underline;
}
.forget[disabled] {
  opacity: 0.5;
  pointer-events: none;
}

pre.code {
  margin: 0;
  background: var(--code-bg);
  color: var(--code-ink);
  border-radius: var(--r-3);
  padding: var(--sp-4);
  font-family: var(--mono);
  /* 11.5px, which is what both of the design's `<pre>` recipes use -- the
   * report preview and the CLI card. The release contract said this class was
   * one the design drew *larger*, at 12.5px; the design file says otherwise at
   * both sites, and the design file is the truth this release was told to
   * follow. */
  font-size: var(--t-tiny-h);
  line-height: var(--lh-code);
  overflow: auto;
  white-space: pre;
  /* No fade at the right edge. A 28px mask stood here to say "the line
   * continues", because a desktop overlay scrollbar only appears while
   * scrolling and a line running off the pane looked like a line that ended
   * there. It cost more than it bought: every block this class draws is a
   * command a user is meant to select and copy, and the fade made the last
   * characters of it unreadable whether or not they were the end. The design's
   * `<pre>` blocks scroll plainly, and the thin scrollbar below is the cue. */
  scrollbar-width: thin;
}
pre.code::-webkit-scrollbar {
  height: 8px;
}
pre.code::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 4px;
}

/* The event log, styled as the terminal it is echoing. */
.log {
  background: var(--code-bg);
  border-radius: var(--r-4);
  padding: var(--sp-4) 18px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-family: var(--mono);
  font-size: var(--t-small);
  color: var(--code-ink);
  /* The log is what gives way. The folder picker, the URL card and the
   * progress bar are each a fixed thing a reader is trying to use; the log is
   * a tail of a run that is already scrolling. So it shrinks to its floor and
   * the others keep their height. */
  flex: 1 1 auto;
  min-height: 120px;
  max-height: 340px;
  overflow-y: auto;
}

/* Everything above the log in the Index view keeps the height it asks for. */
.scroller > .picker,
.scroller > .card {
  flex-shrink: 0;
}
.log .line {
  display: flex;
  gap: 10px;
}
.log .key {
  color: var(--code-key);
  flex-shrink: 0;
  width: 68px;
  text-align: right;
}

/* What happened to the file, in one word, in a fixed column so the paths
 * beside them line up. A file being embedded is the line worth reading; the
 * rest is the run showing that it is still moving. */
.log .outcome {
  flex-shrink: 0;
  width: 76px;
  color: var(--muted);
}
.log .line.indexing .outcome {
  color: var(--accent-edge);
}
.log .line.unchanged,
.log .line.skipped {
  opacity: 0.62;
}
.log .line.removed .outcome {
  color: var(--red);
}
.log .what {
  min-width: 0;
  overflow-wrap: anywhere;
}

.bar {
  height: var(--sp-2);
  border-radius: var(--r-1);
  background: var(--chip);
  overflow: hidden;
}
.bar > span {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: var(--r-1);
  transition: width var(--d-bar) var(--e-linear);
}

.feed {
  font-family: var(--mono);
  font-size: var(--t-small);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  color: var(--ink-2);
  flex-grow: 1;
  min-height: 0;
  /* Capped, not merely scrollable: the card is in a grid row that grows to
   * its content, so an uncapped feed of forty events takes the height from
   * the table above it. */
  max-height: 232px;
  overflow-y: auto;
}
.feed .row {
  display: flex;
  gap: 10px;
}
.feed .at {
  color: var(--muted);
  width: 54px;
  flex-shrink: 0;
}
.feed .what {
  min-width: 0;
  max-width: 100%;
}

.picker {
  display: flex;
  flex-direction: column;
}
.picker {
  overflow: hidden;
}

.picker .crumbs {
  display: flex;
  align-items: center;
  gap: var(--sp-2h);
  padding: var(--sp-3) var(--sp-3h);
  border-bottom: 1px solid var(--line);
  background: var(--soft);
  flex-wrap: wrap;
}
.picker .where {
  font-family: var(--mono);
  font-size: var(--t-body-sm);
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* The picker's line of prose is inset like the row above it and the rows
   below it. It is a direct child of a card with no padding of its own — the
   crumbs bar and the entries each bring theirs — so without this it alone sat
   against the border. */
.picker > .subtitle {
  /* Equal above and below. It was `var(--sp-3) var(--sp-3h) 0` — twelve pixels
   * of air above the sentence and none under it, so the line sat on top of the
   * first row of entries. */
  padding: var(--sp-3) var(--sp-3h);
}
.picker .entries {
  max-height: 320px;
  min-height: 84px;
  overflow-y: auto;
  /* Two columns where there is room: a home directory is forty entries, and a
   * single column of them is a page of scrolling to reach `work`. */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.picker .entry {
  transition: background var(--d-quick) var(--e-in-out);
  display: flex;
  align-items: center;
  gap: var(--sp-2h);
  min-width: 0;
  padding: var(--sp-2) var(--sp-3h);
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  background: none;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
}
.picker .entry:hover {
  background: var(--soft);
}
/* A row that cannot be chosen says so before it is clicked. A file listed at
 * full contrast beside the folders in a folder picker reads as an option. */
.picker .entry.inert,
.picker .entry.inert:hover {
  background: none;
  color: var(--muted);
  cursor: default;
  opacity: 0.6;
}
.picker .entry svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--muted);
}
.picker .entry .name {
  font-family: var(--mono);
  font-size: var(--t-body-sm);
  font-weight: 400;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A tick beside a row rather than on it. Walking into a folder and choosing it
   are different intentions, and one control cannot mean both. */
.picker .entry-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
  padding-left: var(--sp-3);
  border-bottom: 1px solid var(--line-soft);
}
.picker .entry-row .entry {
  flex: 1;
  min-width: 0;
  border-bottom: 0;
}
.picker .tick {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  accent-color: var(--blue);
  cursor: pointer;
}

/* ---------------------------------------------------------------- runs */

/* One card per store with a run. They stack rather than sit in a grid: a card
   carries a log, and a log in a column half the page wide is unreadable. */
.cards {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.run-card .bar {
  margin: var(--sp-2h) 0;
}
.run-card .log {
  max-height: 260px;
  margin-top: var(--sp-2h);
}
.run-card .filters {
  align-items: center;
}

.queue .queue-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2h);
  min-width: 0;
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--line-soft);
}
.queue .queue-row:last-child {
  border-bottom: 0;
}
.queue .queue-row .key {
  font-family: var(--mono);
  font-size: var(--t-body-sm);
  color: var(--muted);
  min-width: 1.5rem;
}
.queue .queue-row .name {
  font-family: var(--mono);
  font-size: var(--t-body-sm);
  font-weight: 600;
}

/* The three derived values, side by side where there is room. Each carries its
   reason under it, which is what makes the number arguable rather than magic. */
.settings {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp-3);
  margin-top: var(--sp-2h);
}
.settings .setting .note {
  margin-top: var(--sp-1);
}

/* --------------------------------------------------------------- search */

/* Sticky, because on a narrow window the two stages stack and the whole page
 * scrolls: the box you type in should not be the thing that scrolls away
 * while you read what it returned. */
.search-band {
  position: sticky;
  top: 0;
  z-index: 5;
  padding: 20px var(--sp-5) var(--sp-4);
  flex-shrink: 0;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

/* What the ranker read in the query and what it did about it — the answer's
 * own words, so the page cannot describe a weighting the hits underneath it
 * did not get. Hidden until the box has something in it. */
.shape-hint {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--mono);
  font-size: var(--t-tiny-h);
  color: var(--muted);
}
.shape-hint .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue);
  flex-shrink: 0;
}

.search-field {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 46px;
  padding: 0 var(--sp-4);
  border: 1.5px solid var(--blue);
  border-radius: var(--r-4);
  background: var(--panel);
}
.search-field svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--blue);
}
.search-field input {
  flex-grow: 1;
  font-size: var(--t-field);
  border: 0;
  outline: none;
  background: transparent;
  min-width: 0;
}
.search-meta {
  font-family: var(--mono);
  font-size: var(--t-small);
  color: var(--muted);
}
.search-meta:empty {
  display: none;
}

.results {
  padding: 18px var(--sp-5) var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  flex-grow: 1;
}

.hit {
  transition: border-color var(--d-fade) var(--e-in-out), box-shadow var(--d-fade) var(--e-in-out);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-4);
  padding: 14px var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.hit:hover {
  border-color: var(--blue);
  box-shadow: var(--shadow-pop);
}

.hit .where {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-family: var(--mono);
}
.hit .where .file {
  font-weight: 500;
  overflow-wrap: anywhere;
}
.hit .where .lines,
.hit .where .from {
  font-size: var(--t-tiny);
  color: var(--muted);
}
/* An image hit shows the image. Bounded so a large screenshot does not take
 * the whole results column, and on the page's own panel colour so a
 * transparent PNG reads as a picture rather than as a hole. */
.hit .preview {
  display: block;
  max-width: 100%;
  max-height: 260px;
  width: auto;
  border-radius: var(--r-3);
  border: 1px solid var(--line-soft);
  background: var(--soft);
  object-fit: contain;
}

.hit pre {
  margin: 0;
  font-family: var(--mono);
  font-size: var(--t-small);
  line-height: var(--lh-code);
  color: var(--ink-2);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------------- loading */

/* The wait, as the mark assembling itself.
 *
 * Every page here opens on a request, so this is the first thing a reader
 * sees on all thirteen of them, and it used to be the word "Loading…" at the
 * top left of an empty page. Sixteen cells in the mark's own four-by-four
 * grid, five of them the mark's amber, lighting along the diagonal.
 *
 * Nothing is fetched and nothing is scripted: one keyframe and a nth-child
 * delay. The resting state of that keyframe is every cell at full opacity,
 * which is what a reader with `prefers-reduced-motion` sees, because the
 * reset above collapses the duration rather than removing the animation. */
.loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  flex-grow: 1;
  min-height: 60vh;
}

.loading .mark {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  width: 64px;
  height: 64px;
}

.loading .cell {
  border-radius: 3px;
  background: var(--blue);
  opacity: 0.18;
  animation: semlithAssemble 1.6s var(--e-in-out) infinite;
}
.loading .cell.hot {
  background: var(--accent);
}

/* Along the diagonal: the delay is the row plus the column, so the wave
 * crosses the mark corner to corner rather than sweeping line by line. */
.loading .cell[data-i="0"] { animation-delay: 0ms; }
.loading .cell[data-i="1"], .loading .cell[data-i="4"] { animation-delay: 90ms; }
.loading .cell[data-i="2"], .loading .cell[data-i="5"], .loading .cell[data-i="8"] { animation-delay: 180ms; }
.loading .cell[data-i="3"], .loading .cell[data-i="6"], .loading .cell[data-i="9"],
.loading .cell[data-i="12"] { animation-delay: 270ms; }
.loading .cell[data-i="7"], .loading .cell[data-i="10"], .loading .cell[data-i="13"] { animation-delay: 360ms; }
.loading .cell[data-i="11"], .loading .cell[data-i="14"] { animation-delay: 450ms; }
.loading .cell[data-i="15"] { animation-delay: 540ms; }

@keyframes semlithAssemble {
  0%,
  70% {
    opacity: 0.18;
    transform: scale(0.82);
  }
  25% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.loading .what {
  font-family: var(--mono);
  font-size: var(--t-small);
  color: var(--muted);
}

/* An indeterminate bar, because the page cannot know how long a store takes
 * to answer and a progress bar that invents a number is a lie. */
.loading .track {
  width: 160px;
  height: 2px;
  border-radius: 1px;
  background: var(--line);
  overflow: hidden;
}
.loading .track .run {
  display: block;
  width: 40%;
  height: 100%;
  border-radius: 1px;
  background: var(--blue);
  animation: semlithSlide 1.4s var(--e-in-out) infinite;
}

@keyframes semlithSlide {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(250%);
  }
}

/* The second stage: the shape of what is coming, where it is coming.
 *
 * A sheen crossing a block rather than a block that blinks — a pulse reads
 * as something wrong, a sheen reads as something on its way. Under
 * `prefers-reduced-motion` the reset above collapses the duration and what
 * is left is a plain grey block, which is exactly the right resting state. */
.skel {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2h);
  width: 100%;
  min-width: 0;
}
.skel .line {
  height: 11px;
  border-radius: var(--r-1);
  background: linear-gradient(
    90deg,
    var(--chip) 0%,
    var(--line-soft) 40%,
    var(--chip) 80%
  );
  background-size: 300% 100%;
  animation: semlithSheen 1.5s var(--e-linear) infinite;
}

@keyframes semlithSheen {
  0% {
    background-position: 140% 0;
  }
  100% {
    background-position: -40% 0;
  }
}

/* -------------------------------------------------------------- welcome */

.welcome {
  min-height: 100dvh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-5);
  padding: 48px 20px;
  background: var(--bg);
}

.welcome > * {
  flex-shrink: 0;
}

.welcome .lockup {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.welcome .lockup .logo {
  width: 38px;
  height: 38px;
  border-radius: var(--r-3);
  display: block;
}
.welcome .lockup .name {
  font-size: var(--t-display);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.welcome .lockup .ver {
  font-family: var(--mono);
  font-size: var(--t-small);
  color: var(--muted);
  padding-top: 5px;
}

/* The hero's heading is the page's h1, but it is not a page title — it sits
 * inside a card under the lockup, so it takes the card's size rather than the
 * 21px every titled page uses. */
.hero-title {
  font-size: var(--t-title);
  font-weight: 600;
  letter-spacing: 0;
}

.welcome .hero {
  width: 100%;
  max-width: 640px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 26px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Two by two, not three and a stray.
 *
 * The design's four steps are laid out `flex: 1 1 180px` in a 640px column,
 * which packs three onto the first row and leaves the fourth running the
 * whole width underneath — a row of cards and then a banner. A grid of two
 * makes the four read as four. */
.welcome .steps {
  width: 100%;
  max-width: 640px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
}
.welcome .step {
  min-width: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-4);
  padding: 14px var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.welcome .step .what {
  color: var(--muted);
  font-size: var(--t-body-sm);
  text-wrap: pretty;
}

.welcome .foot {
  font-family: var(--mono);
  font-size: var(--t-tiny);
  color: var(--muted);
  text-align: center;
}

/* Used on both the welcome screen and the Agents page, where it sits in a
 * grid cell rather than on an open page. */
.install-panel {
  width: 100%;
  max-width: 640px;
}


/* ----------------------------------------------------------------- tips */

/* One hover label for the whole portal, drawn in a single fixed element that
 * lives at the end of <body>.
 *
 * It used to be `[data-tip]::after`, positioned inside the element it
 * described — which meant `.table-wrap`'s `overflow: auto` clipped it, and the
 * Files page's whole reason for having a tip (a path too long for its column)
 * was the one place it could not be read. A scroll container clips any
 * positioned descendant, so the fix is to stop being a descendant.
 *
 * The same element carries every hover card — the canvases' and the corpus
 * charts' alike — so there is one tooltip implementation rather than two. */
.tip {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 80;
  max-width: 260px;
  width: max-content;
  padding: 9px 11px;
  border-radius: var(--r-3);
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-pop);
  color: var(--ink);
  font-family: var(--mono);
  font-size: var(--t-small);
  line-height: var(--lh-code);
  white-space: normal;
  overflow-wrap: anywhere;
  opacity: 0;
  transform: scale(0.96);
  transition: opacity var(--d-fade) var(--e-in-out), transform var(--d-pop) var(--e-pop);
  pointer-events: none;
}

.tip[data-open="true"] {
  opacity: 1;
  transform: none;
}

/* A bar, a chart column or a bar segment that carries its own reading says so
 * on approach. Without a cursor change a tooltip on a 6px band is a thing
 * nobody discovers, and every one of these is the only place the number
 * behind the proportion is written down. */
.support-bar .seg[data-tip],
.mix-row[data-tip],
.month[data-tip],
.bar[data-tip] {
  cursor: help;
}
.mix-row[data-tip]:hover,
.month[data-tip]:hover {
  background: var(--soft);
  border-radius: var(--r-2);
}
/* Keyboard parity: these are focusable so the tip is reachable without a
 * pointer, and a focus ring is what says they are. */
.support-bar .seg:focus-visible,
.mix-row:focus-visible,
.month:focus-visible,
.bar:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: var(--r-1);
}

/* ------------------------------------------------------- layout utilities */

/* These exist because the page may not set a `style` attribute: the server's
 * CSP is `style-src 'self'` with no `unsafe-inline`, so every inline style the
 * script tried to apply was blocked by the browser and silently dropped —
 * which is precisely why the layout used to come out wrong. Weakening the CSP
 * to fix the layout would trade the product's central claim for a column
 * width, so the widths live here instead. */

.offscreen {
  position: fixed;
  opacity: 0;
  pointer-events: none;
}

/* A table narrower than this stops being readable and starts being a puzzle,
 * so it scrolls inside its card rather than crushing its columns. */
.w-stores {
  min-width: 640px;
}
/* The roots column shares what is left rather than asking for its longest
 * path: at 1280px it pushed LAST WRITE past the card's edge. Its paths already
 * truncate from the front with the whole path on hover. */
.w-stores td.meta {
  max-width: 0;
  width: 30%;
}
.w-files {
  min-width: 680px;
}
/* Ten columns of counts. Below this they stack into a puzzle, so the table
 * scrolls inside its card like the others. */
.w-coverage {
  min-width: 760px;
}
/* The Agents page's reason column. A repair line carries its own explanation
 * after a `#` and is longer than any screen, so unbounded the cell asks for
 * the width of the whole command and carries its own Copy button past the edge
 * of the card — the one control in the cell, off the only edge that matters.
 * The field is capped rather than the cell: capping the cell collapsed the
 * column to its shortest row, and this leaves the reasons a readable width
 * while the command scrolls inside its own box with the button still beside
 * it. It is a maximum, so the field still shrinks on a phone. */
td.why .copyfield {
  max-width: 30rem;
}

.field.wide {
  width: 280px;
  max-width: 100%;
}

.field.grow {
  flex: 1 1 240px;
  max-width: 420px;
}

/* A field that owns its row. The Index page's path is the reason: it shared a
 * row with four buttons and a store picker, so on a 1440px page the thing the
 * page is about was the narrowest control on it. */
.field.full {
  width: 100%;
}

.tag.wrapped {
  margin: 0 var(--sp-1) var(--sp-1) 0;
}

.stat.fact {
  flex: 1 1 230px;
}

.fact-value {
  font-family: var(--mono);
  font-size: var(--t-body);
  line-height: var(--lh-code);
  font-variant-numeric: tabular-nums;
}

.pct {
  font-family: var(--mono);
  font-size: var(--t-h1);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.search-page {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  min-width: 0;
}

/* Two stages, because a search answers "where" and a read answers "what", and
 * an answer that always does both is an answer that always costs both. The
 * list is a column of locator cards; the panel holds whichever one is open.
 *
 * `auto-fit` rather than a breakpoint: the column that matters is this grid's
 * own width, not the window's, and the window carries a sidebar of a width
 * that is itself a state. The container query below is for the divider, which
 * is the one thing that has to know whether the two columns are side by side. */
.two-stage {
  container-type: inline-size;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  align-items: stretch;
  gap: 0;
  flex-grow: 1;
  min-height: 0;
}
.locate-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
.locate-list {
  gap: var(--sp-3);
}

/* A file is a card, not a run of lines with a heading over it. Eight hits in
 * one file are one file to open, and the card is what says so. */
.locate-group {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-4);
  overflow: hidden;
  min-width: 0;
  flex-shrink: 0;
}
.locate-file {
  display: flex;
  align-items: center;
  gap: var(--sp-2h);
  flex-wrap: wrap;
  padding: var(--sp-2h) var(--sp-3h);
  border-bottom: 1px solid var(--line-soft);
  background: var(--soft);
  font-family: var(--mono);
  font-size: var(--t-small-h);
  font-weight: 500;
  overflow-wrap: anywhere;
}
.locate-file .from {
  font-size: var(--t-tiny);
  font-weight: 400;
  color: var(--muted);
}
/* Which spans of this file are in the list, in the header rather than only in
 * the rows: "three spans, 102-118, 140-149" is what a reader needs to decide
 * whether to open the file at all. */
.locate-file .span-summary {
  font-family: var(--mono);
  font-size: var(--t-tiny);
  font-weight: 400;
  color: var(--muted);
}

.locate-row {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  width: 100%;
  text-align: left;
  padding: var(--sp-2h) var(--sp-3h);
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  min-width: 0;
  transition: background var(--d-fade) var(--e-in-out);
}
.locate-group > .locate-row:last-child {
  border-bottom: 0;
}
/* Kept from before the v3 design, which draws no per-row hover. A row that
 * opens a panel should say so under the pointer. */
.locate-row:hover {
  background: var(--soft);
}
.locate-row[aria-pressed="true"] {
  background: var(--blue-soft);
}
.locate-row.static,
.locate-row.static:hover {
  background: transparent;
  cursor: default;
}
.row-top {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  min-width: 0;
  font-family: var(--mono);
  font-size: var(--t-small);
}
.locate-row .lines {
  color: var(--ink-2);
  white-space: nowrap;
}
.locate-row .sym {
  color: var(--ink);
  overflow-wrap: anywhere;
}
.locate-row .from {
  font-size: var(--t-tiny);
  color: var(--muted);
}
/* Inside the row rather than under it, so the two lines are one hit target.
 * As a sibling, clicking the half of the block with the code in it did
 * nothing at all. */
.locate-excerpt {
  display: block;
  font-family: var(--mono);
  font-size: var(--t-tiny-h);
  line-height: var(--lh-code);
  color: var(--muted);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* A brief is the opened row, so the second stage's column has nothing to hold.
 * Hidden rather than emptied, so the answer takes the whole width. */
.two-stage.one-stage .body-col {
  display: none;
}
.two-stage.one-stage {
  grid-template-columns: 1fr;
}

/* The Brief view: one call's answer, in the column the locate list uses.
 *
 * Deliberately the same type scale, the same rules and the same tags as the
 * list beside it — it is the same store answering the same question, and a
 * second visual language would say otherwise. */
.brief-view {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-2h) var(--sp-5);
  min-width: 0;
}
.brief-symbol {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line-soft);
  min-width: 0;
}
.brief-head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  flex-wrap: wrap;
  min-width: 0;
}
.brief-head .path {
  font-family: var(--mono);
  font-size: var(--t-tiny-h);
  color: var(--ink-2);
  overflow-wrap: anywhere;
}
.brief-head .sym {
  color: var(--ink);
  overflow-wrap: anywhere;
}
.brief-lists {
  display: inline-flex;
  gap: var(--sp-1);
  margin-left: auto;
}
.brief-row {
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--line-soft);
}
/* The budget's reading, as one strip of facts rather than a sentence. */
.brief-summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  width: 100%;
  padding: var(--sp-2h) var(--sp-3h);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  background: var(--soft);
}
.brief-fact {
  display: inline-flex;
  gap: var(--sp-1);
  align-items: baseline;
  min-width: 0;
}
.brief-fact .k {
  color: var(--muted);
}
.brief-fact .v {
  color: var(--ink);
  overflow-wrap: anywhere;
}
.brief-edge {
  display: flex;
  gap: var(--sp-2);
  font-family: var(--mono);
  font-size: var(--t-tiny-h);
  min-width: 0;
}
.brief-edge .k {
  color: var(--muted);
  white-space: nowrap;
}
.brief-edge .v {
  color: var(--ink-2);
  overflow-wrap: anywhere;
}
/* What the budget dropped, said rather than left blank: a span with no text
 * under it looks like a span with no text in it. */
.brief-dropped {
  font-family: var(--mono);
  font-size: var(--t-micro-h);
  color: var(--muted);
  font-style: italic;
}

.locate-footer {
  display: flex;
  align-items: center;
  gap: var(--sp-2h);
  flex-wrap: wrap;
  padding: var(--sp-2h) var(--sp-5) var(--sp-5);
  font-family: var(--mono);
  font-size: var(--t-tiny-h);
  color: var(--muted);
  flex-shrink: 0;
}
.locate-footer .truncated {
  display: inline-flex;
  align-items: center;
  font-size: var(--t-micro-h);
  padding: 2px 7px;
  border-radius: var(--r-1);
  background: var(--amber-soft);
  color: var(--amber-ink);
}

/* The right-hand stage has a ground of its own. Without one the two columns
 * were one surface with a rule drawn down it, and which side a panel belonged
 * to was something the reader worked out. */
.body-col {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3h);
  padding: 18px var(--sp-5);
  background: var(--soft);
  border-left: 1px solid var(--line);
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
}
@container (max-width: 719px) {
  .body-col {
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}

/* One span, wherever it is shown: the Search page's second stage and the Read
 * page's whole answer are the same card. */
.span-card {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-4);
  overflow: hidden;
  flex-shrink: 0;
  min-width: 0;
}
.span-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2h);
  flex-wrap: wrap;
  padding: var(--sp-3h) var(--sp-3h) var(--sp-2h);
  font-family: var(--mono);
  font-size: var(--t-small);
}
.span-head .path {
  font-size: var(--t-small-h);
  font-weight: 500;
  overflow-wrap: anywhere;
}
.span-head .lines {
  color: var(--muted);
}
.span-head .from {
  font-size: var(--t-tiny);
  color: var(--muted);
}
.span-card .prov-note,
.span-card .note {
  margin: 0;
  padding: 0 var(--sp-3h) var(--sp-2h);
  font-size: var(--t-small-h);
  color: var(--muted);
  text-wrap: pretty;
}
.span-card .note {
  color: var(--amber-ink);
}
/* The signature on a line of its own. It is the one line of a definition that
 * answers "is this the thing I meant", and buried at the top of a code block
 * it reads as code rather than as an answer. */
.span-card .sig {
  margin: 0 var(--sp-3h) var(--sp-3);
  padding: 7px 9px;
  font-family: var(--mono);
  font-size: var(--t-tiny-h);
  color: var(--blue-ink);
  background: var(--blue-soft);
  border-radius: var(--r-2);
  white-space: pre;
  overflow-x: auto;
}
.span-card .preview {
  display: block;
  max-width: 100%;
  max-height: 320px;
  margin: 0 var(--sp-3h) var(--sp-3h);
  border-radius: var(--r-3);
  border: 1px solid var(--line-soft);
  background: var(--soft);
  object-fit: contain;
}

/* Numbered from the span's own first line, which is the coordinate every
 * other surface prints. A gutter numbered from one would be a second
 * coordinate system for a reader to convert between. */
.gutter-code {
  padding: var(--sp-3) 4px var(--sp-3) 0;
  border-top: 1px solid var(--line-soft);
  overflow: auto;
  min-width: 0;
  /* Capped so the span stays a span. "Read whole symbol" on a long function
   * returns hundreds of lines, and without a ceiling the card pushed the ring
   * below it off the bottom of the rail — the two are meant to be read
   * together. */
  max-height: 420px;
  overscroll-behavior: contain;
}
.code-line {
  display: flex;
  gap: var(--sp-3);
  font-family: var(--mono);
  font-size: var(--t-small);
  line-height: var(--lh-code);
}
.code-line .ln {
  width: 48px;
  flex-shrink: 0;
  text-align: right;
  color: var(--muted);
  user-select: none;
}
.code-line .lt {
  white-space: pre;
  color: var(--ink-2);
}

.span-foot {
  display: flex;
  align-items: center;
  gap: var(--sp-2h);
  flex-wrap: wrap;
  padding: var(--sp-2h) var(--sp-3h);
  border-top: 1px solid var(--line-soft);
  background: var(--soft);
}
.body-meta {
  font-family: var(--mono);
  font-size: var(--t-tiny);
  color: var(--muted);
}
.span-foot .quiet {
  font-size: var(--t-tiny);
  color: var(--muted);
  transition: color var(--d-hover) var(--e-in-out);
}
.span-foot .quiet:hover {
  color: var(--blue);
}

/* One ring out and then one more, drawn beside the span rather than on a page
 * the span is not on. */
.around-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2h);
  flex-shrink: 0;
}
.around-head .title {
  font-weight: 600;
}
.around-head .sym {
  font-family: var(--mono);
}
.around-head .meta {
  font-family: var(--mono);
  font-size: var(--t-tiny);
  color: var(--muted);
}
/* Tall enough for the ring to be a shape rather than a pile. At 260px a
 * symbol with a dozen neighbours drew every label on top of every other, which
 * is the one thing a graph is for. It grows with the rail rather than sitting
 * at a fixed height, with a floor that keeps it legible on a short window. */
.ego-panel {
  position: relative;
  flex: 1 1 340px;
  min-height: 340px;
  flex-shrink: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-4);
  overflow: hidden;
}
/* On a plate, as the graph legend is. It was bare text over the canvas, and a
 * node that settled into the bottom-left corner drew its label straight
 * through it — two sets of glyphs in the same pixels, neither readable. The
 * legend across the canvas has had a panel, a border and a radius all along;
 * this is the same treatment for the same reason. */
.ego-hint {
  position: absolute;
  left: var(--sp-3);
  bottom: var(--sp-2h);
  padding: var(--sp-1) var(--sp-2);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  font-family: var(--mono);
  font-size: var(--t-micro);
  color: var(--muted);
  pointer-events: none;
}

/* Freshness. Amber rather than red: a stale hit is still the best answer
 * available, it just wants re-reading before it is quoted. The word is beside
 * the dot rather than in its tooltip — a colour alone says nothing in a
 * screenshot, and nothing at all to a reader who cannot hover. */
.fresh {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: help;
}
.fresh .word {
  font-family: var(--mono);
  font-size: var(--t-micro-h);
  color: var(--muted);
}
.fresh-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.fresh-dot.is-fresh {
  background: var(--green);
}
.fresh-dot.is-stale {
  background: var(--accent);
}

/* The dials: k, Prefer, lang, path and Budget. Every one of them is a pill of
 * the same height carrying a micro-label and its control, because they are
 * the same kind of thing — what the caller is asking for — and a row of
 * differently shaped boxes says they are not. */
.store-chips {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.filters .rule {
  width: 1px;
  height: 20px;
  background: var(--line);
  margin: 0 var(--sp-1);
  flex-shrink: 0;
}
.dial {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--h-dial);
  /* Equal on both sides. It was 11px before the label and 8px after the last
   * pill, so the pill sat nearer its border than the label sat to its own and
   * the control looked as though it had been nudged. */
  padding: 0 11px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink-2);
  font-size: var(--t-body-sm);
}
.dial:focus-within {
  border-color: var(--blue);
}

/* A dropdown, shaped like every other control here.
 *
 * `.select` carried no rules at all, so it rendered as the operating system's
 * own control: a different height, a different radius, a different font, and
 * in dark mode a light box in a dark card. It is the same field shape as an
 * input, with room on the right for the arrow the browser draws. */
.select {
  height: 34px;
  padding: 0 var(--sp-6) 0 var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  background: var(--panel);
  color: var(--ink);
  font-size: var(--t-body-sm);
  cursor: pointer;
  min-width: 0;
  max-width: 16rem;
  /* The arrow, drawn here rather than left to the platform, so the control
   * looks the same on all three. */
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentcolor 50%),
    linear-gradient(135deg, currentcolor 50%, transparent 50%);
  background-position: calc(100% - 15px) 15px, calc(100% - 10px) 15px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  transition: border-color var(--d-fade) var(--e-in-out);
}
.select:hover {
  border-color: var(--blue);
}
.select:focus {
  outline: none;
  border-color: var(--accent-edge);
}
.dial-label {
  font-family: var(--mono);
  font-size: var(--t-micro-h);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.dial-prefix,
.dial-value {
  font-family: var(--mono);
  font-size: var(--t-small-h);
}
.dial-prefix {
  color: var(--muted);
}
.dial .unit {
  font-family: var(--mono);
  font-size: var(--t-tiny);
  color: var(--muted);
}
.dial .bare {
  border: 0;
  outline: none;
  background: transparent;
  font-family: var(--mono);
  font-size: var(--t-small-h);
  color: var(--ink);
  min-width: 0;
}
.dial .step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 5px;
  background: var(--soft);
  color: var(--ink-2);
  font-size: var(--t-body-sm);
  line-height: 1;
  cursor: pointer;
  transition: background var(--d-fade) var(--e-in-out), color var(--d-fade) var(--e-in-out);
}
.dial .step:hover {
  background: var(--chip);
  color: var(--ink);
}
.dial .segs {
  display: flex;
  gap: 3px;
}
.dial .seg {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 9px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: var(--t-tiny-h);
  cursor: pointer;
  transition: background var(--d-fade) var(--e-in-out), color var(--d-fade) var(--e-in-out);
}
.dial .seg:hover {
  background: var(--chip);
}
.dial .seg[aria-pressed="true"] {
  background: var(--ink);
  color: var(--panel);
}
.dial-note {
  color: var(--muted);
  font-size: var(--t-small-h);
}

/* Read and Pattern: one question, then the answer under it. */
.read-out {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-width: 0;
}

/* ----------------------------------------------------------------- graph */

/* The graph is the one page that is a drawing rather than a document: a header
 * band, then a canvas that fills everything left over beside a rail. It is
 * full-bleed on purpose — page padding around a canvas is space the drawing
 * could have used. */

.graph-page {
  animation: rise var(--d-rise) var(--e-out);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.graph-band {
  flex-shrink: 0;
  padding: var(--sp-5) var(--sp-5) var(--sp-3h);
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.graph-controls {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  min-width: 0;
}

.graph-scope {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex: 1 1 220px;
  min-width: 0;
  /* Less on the right than the left, because the right holds a button and the
   * left holds text. Equal padding put the button hard against the border. */
  padding: 0 var(--sp-1) 0 var(--sp-3);
  height: 36px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  color: var(--muted);
  transition: border-color var(--d-hover) var(--e-in-out);
}

.graph-scope:focus-within {
  border-color: var(--accent-edge);
}

/* A control that sits inside a field's border. Shorter than the field it is in
 * by the padding around it, so the field's edge and the button's edge are not
 * the same line. */
.button.in-field {
  height: 28px;
  flex-shrink: 0;
}

.graph-scope input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--ink);
  outline: none;
}

.graph-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  align-items: stretch;
  flex-grow: 1;
  min-width: 0;
  min-height: 0;
}

.graph-frame {
  position: relative;
  min-width: 0;
  background: var(--soft);
  overflow: hidden;
}

.graph-stage {
  position: absolute;
  inset: 0;
}

.graph-canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: none;
}

/* Said rather than left to the default, so the canvas answers the pointer the
 * way every other draggable surface does. */
.graph-canvas.over-node {
  cursor: pointer;
}

.graph-canvas.dragging {
  cursor: grabbing;
}

/* Floating inside the canvas at its top-left, as the design draws it. */
.graph-legend {
  position: absolute;
  left: var(--sp-4h);
  top: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-2h) var(--sp-3);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  font-family: var(--mono);
  font-size: var(--t-tiny);
  line-height: var(--lh-prose);
  color: var(--ink-2);
  pointer-events: none;
}

.graph-legend .key {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

.graph-legend i {
  width: 18px;
  height: 0;
  border-top: 1.4px solid var(--blue);
  display: inline-block;
}

/* The canvas legend carries the same four values the rail does, drawn the way
 * the canvas draws them: solid for an edge the source settled, dotted for a
 * bare-name match, dashed and amber for a name that could mean several
 * different things. */
.graph-legend .inferred i {
  border-top-style: dotted;
}

.graph-legend .ambiguous i {
  border-top-style: dashed;
  border-top-color: var(--amber-ink);
}

.graph-legend .selected i {
  width: 10px;
  height: 10px;
  border: 1px solid var(--accent-edge);
  border-radius: 3px;
  background: var(--accent);
}

.graph-count {
  position: absolute;
  right: var(--sp-4h);
  bottom: var(--sp-4);
  font-family: var(--mono);
  font-size: var(--t-tiny);
  color: var(--muted);
  pointer-events: none;
}

.graph-rail {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3h);
  min-width: 0;
  min-height: 0;
  padding: var(--sp-4h);
  background: var(--panel);
  border-left: 1px solid var(--line);
  overflow-y: auto;
}

.graph-selected {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

/* A client's name and the sentence about it are one block, not a header row
 * with its own 16px gap: laid out as a row they wrapped, and the wrap left a
 * band of white space between the title and the paragraph. */
.stanzas .head {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-1);
}
.stanzas .head .meta {
  line-height: var(--lh-prose);
}

.graph-selected .sym {
  margin: 0;
  font-family: var(--mono);
  font-size: var(--t-lead);
  font-weight: 500;
  line-height: var(--lh-heading);
  /* One line, ending in an ellipsis with the whole name on hover. Broken
   * anywhere, `index_set_writing` wrapped as `index_set_wri` / `ting`. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.graph-selected .loc {
  font-family: var(--mono);
  font-size: var(--t-small);
  color: var(--muted);
  overflow-wrap: anywhere;
}

.graph-selected .chips {
  margin-top: var(--sp-2);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  /* Centred, so a line of prose beside a pill sits on the pill's centre line
   * rather than at the top of the space the pill makes. */
  align-items: center;
  gap: var(--sp-2);
}

.chip.static.blue {
  background: var(--blue-soft);
  border-color: var(--blue-soft);
  color: var(--blue-ink);
}

/* Every name `--lang` accepts, on the About page rather than on a page of its
 * own: it is a list to scan, and a page to navigate to was a click in front
 * of forty-six lines. Two or three columns depending on the room. */
.lang-card .lang-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--sp-1) var(--sp-4h);
}
.lang-row {
  display: flex;
  align-items: baseline;
  gap: 9px;
  min-width: 0;
  padding: 3px 0;
  border-bottom: 1px solid var(--line-soft);
}
.lang-row .tick {
  display: inline-flex;
  justify-content: center;
  width: 14px;
  flex-shrink: 0;
  font-size: var(--t-small);
  color: var(--green);
}
.lang-row .name {
  font-family: var(--mono);
  font-size: var(--t-small-h);
}

/* The six that carry a grammar. A word beside the name rather than a second
 * tick column: two columns of marks would have a reader working out which
 * mark means what, and the thing being said is small enough to just say. */
.lang-row .graph-mark {
  font-family: var(--mono);
  font-size: var(--t-micro-h);
  color: var(--blue-ink);
  background: var(--blue-soft);
  border-radius: var(--r-2);
  padding: 1px 5px;
  flex-shrink: 0;
}
.lang-row .exts {
  font-family: var(--mono);
  font-size: var(--t-tiny);
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rail-group h3 {
  margin: 0 0 var(--sp-2);
  font: 500 var(--t-tiny) var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.rail-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.rail-list li {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 7px var(--sp-2h);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-2);
  font-size: var(--t-small);
  min-width: 0;
  transition: border-color var(--d-hover) var(--e-in-out);
}

.rail-list li:hover {
  border-color: var(--blue);
}

.rail-list a,
.rail-list .link-button {
  font-family: var(--mono);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Inside the Graph rail a list is the rail's width, whatever its rows hold.
 * `.rail-group` centres its children, which is right for the sidebar's icon
 * rail it was written for; here it sized a list to its widest row and centred
 * it, so a long caller spilled off both sides of the panel and the panel
 * scrolled sideways. Every part of a row may shrink, and names truncate. */
.graph-rail .rail-group {
  align-items: stretch;
  min-width: 0;
}
.graph-rail .rail-group > .chip {
  align-self: flex-start;
}
.rail-list,
.rail-list li > * {
  min-width: 0;
}
.rail-list li > span:not(.conf):not(.via) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rail-list .via,
.rail-list .conf {
  flex-shrink: 0;
}
.graph-scroll {
  overflow-x: hidden;
}

.rail-list .via {
  margin-left: auto;
  font-size: var(--t-micro);
  color: var(--muted);
}

.rail-hint {
  font-size: var(--t-body-sm);
  line-height: var(--lh-prose);
  color: var(--muted);
  text-wrap: pretty;
}

.rail-actions {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  /* The side column's footer: outside its scroller, so a symbol with thirty
   * callers cannot bury these, and nothing can scroll them half out of view. */
  flex-shrink: 0;
  padding: var(--sp-3) var(--sp-4h);
  background: var(--panel);
  border-top: 1px solid var(--line-soft);
}

/* Confidence, everywhere it appears — and it appears everywhere, because a
 * hop or an edge without one is a hop a reader assumes was verified.
 *
 * Four values from 0.15.0. Never colour alone — the word is always in the
 * badge, which is what carries the meaning into a greyscale screenshot and to
 * a reader who cannot hover. The dashed border `ambiguous` used to wear was a
 * second signal for something the word already said, and it made one badge a
 * different shape from its three siblings in a row they are meant to be
 * compared across.
 *
 * `extracted` and `resolved` share a tone deliberately. The difference between
 * them is how the target was settled, not how much it can be relied on: one
 * was named by an import, the other narrowed to exactly one definition. Both
 * are answers, and blue is the tone this product gives an answer. `inferred`
 * is neutral — a bare-name match, which is usually right and is not evidence.
 * `ambiguous` is amber, because it is not an answer at all. */
.conf {
  display: inline-flex;
  align-items: center;
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: var(--r-1);
  white-space: nowrap;
  cursor: help;
}

.conf.extracted,
.conf.resolved {
  background: var(--blue-soft);
  color: var(--blue-ink);
}

.conf.inferred {
  background: var(--chip);
  color: var(--ink-2);
}

.conf.ambiguous {
  background: var(--amber-soft);
  color: var(--amber-ink);
}

/* The legend under the rail: what the four badges claim, said once. */
.conf-legend {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--sp-3) 0 0;
  border-top: 1px solid var(--line-soft);
}
.legend-chip {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
}
.legend-chip .why {
  font-size: var(--t-micro);
  color: var(--muted);
}

/* A collapsed ambiguous row, and whatever it opens. */
.ambiguous-row {
  flex-wrap: wrap;
}
.nested-wrap {
  flex-basis: 100%;
}
.rail-list.nested {
  padding-left: var(--sp-3);
  border-left: 1px solid var(--line-soft);
  margin-top: 4px;
}
.link-button {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--blue);
  cursor: pointer;
  text-align: left;
}
/* Underlined on hover, because the two shapes this portal has for "do
 * something" are a button and a link, and a link has to be one or the other on
 * sight. `.link-button.quiet` stood here -- muted grey at 11px -- and its two
 * call sites now take `.chip.sm` instead: a control that is neither a button
 * nor recognisably a link is the thing nobody clicks. */
.link-button:hover {
  text-decoration: underline;
}

/* Who the ledger recorded. One line, because it is one fact, and it is the
 * fact that says the record is working: a breakdown that reads `portal 31` and
 * nothing else is a ledger measuring its own search box. */
.client-breakdown {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2);
  padding: 0 var(--sp-5) var(--sp-3);
  font-family: var(--mono);
  font-size: var(--t-tiny);
}
.client-breakdown .client-note {
  color: var(--muted);
}

/* Each client is one unbreakable unit: a name and its count belong on one
 * line, and the wrapping happens between clients rather than inside one. */
.client-breakdown .client {
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
}
.client-breakdown .who {
  color: var(--ink-2);
}
.client-breakdown .count {
  color: var(--muted);
  margin-left: 4px;
}
.client-breakdown .sep {
  color: var(--muted);
  margin-right: var(--sp-2);
}

/* ---------------------------------------------------------------- ledger */

/* A standing message with a heading, in a card of its own. Named apart from
 * `.note` because the two are different things: this one has chrome and is
 * meant to be read, that one is a line under a control and is usually empty. */
.notice {
  padding: var(--sp-4);
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: var(--r-4);
  font-size: var(--t-body-sm);
  line-height: var(--lh-prose);
  color: var(--muted);
  text-wrap: pretty;
}

.notice .what {
  font-weight: 600;
  color: var(--ink);
  margin-bottom: var(--sp-1);
}

/* ---------------------------------------------------------------- agents */

/* Group tabs over the client chips: which kind of thing you are configuring,
 * then which one. */
.tabs {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  border-bottom: 1px solid var(--line);
  min-width: 0;
  overflow-x: auto;
}

.tab {
  transition: color var(--d-hover) var(--e-in-out), border-color var(--d-hover) var(--e-in-out);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) 0;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--muted);
  font: inherit;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}

.tab:hover {
  color: var(--ink);
}

.tab[aria-pressed="true"] {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

.tab .count {
  font-family: var(--mono);
  font-size: var(--t-micro);
  padding: 1px var(--sp-2);
  border-radius: var(--r-pill);
  background: var(--chip);
  color: var(--muted);
}

.stanzas {
  min-width: 0;
}

.stanza {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-width: 0;
}

/* Name and purpose in two columns, so a reader scans the names and reads
 * across only where one of them is the answer. */
.tool-grid {
  display: grid;
  grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
  column-gap: var(--sp-4);
  row-gap: var(--sp-2h);
  align-items: baseline;
  min-height: 0;
  overflow-y: auto;
}

.tool-name {
  font-family: var(--mono);
  font-size: var(--t-small);
  white-space: nowrap;
}

.tool-about {
  color: var(--muted);
  font-size: var(--t-body-sm);
  line-height: var(--lh-prose);
  min-width: 0;
  text-wrap: pretty;
}

/* The tool list's own price, boxed off from the list it prices. It is the one
 * number on this page an agent pays whether or not it asks anything, so it
 * reads as a fact about the server rather than as a caption under a heading. */
.cost {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  background: var(--soft);
  border-radius: var(--r-3);
  padding: var(--sp-3) var(--sp-3h);
}

.cost-line {
  font-family: var(--mono);
  font-size: var(--t-small);
  font-variant-numeric: tabular-nums;
}

.cost-note {
  font-family: var(--mono);
  font-size: var(--t-micro-h);
  color: var(--muted);
}

/* Tall enough that the twelve tools are a list rather than a peephole; the
 * grid inside still scrolls once a future release outgrows it. */
.tools {
  max-height: 460px;
}

.who {
  display: flex;
  align-items: center;
  gap: 9px;
}

.dot.good {
  color: var(--green);
}

.w-agents {
  min-width: 420px;
}

/* ----------------------------------------------------- fusion badges */

/* The word, in a pill. A letter in a square needed a tooltip to mean
 * anything, and the thing it meant — that a row was reached through the graph
 * rather than matched — is the thing most worth not hiding. */
.badges {
  display: inline-flex;
  gap: 5px;
  flex-wrap: wrap;
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: var(--r-1);
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.04em;
  cursor: help;
  background: var(--chip);
  color: var(--ink-2);
}

/* Not one of the fusion lists either, and it is the reason a hit is where it
 * is rather than a description of how it was found: an identifier-shaped query
 * lifts the chunks that define that name above the ranking. Filled, like the
 * image badge, because it outranks the tinted three rather than joining them. */
.badge.definition {
  background: var(--blue-ink);
  color: var(--panel);
}

.badge.vector {
  background: var(--blue-soft);
  color: var(--blue-ink);
}

.badge.keyword {
  background: var(--amber-soft);
  color: var(--amber-ink);
}

.badge.graph {
  background: var(--green-soft);
  color: var(--green-ink);
}

/* The image list is the portal's own — the design has no image hits, so it
 * has no role for one. Filled rather than tinted, so it is not mistaken for a
 * fourth shade of the three text lists, and not left as the fallback grey,
 * which reads as a badge that failed to load. */
.badge.image {
  background: var(--ink-2);
  color: var(--panel);
}

/* A capture name from a tree-sitter pattern. Not a fusion list at all — it is
 * what the pattern called the thing it caught. */
.badge.capture {
  background: var(--blue-soft);
  color: var(--blue-ink);
}

/* --------------------------------------------------------------- narrow */


/* A table's secondary columns, dropped where the table would otherwise be
 * three screens wide. The rows that matter — what the file is, and what you do
 * with it — stay; the store name, the reader, the chunk count and the like are
 * a scroll away on a desktop and noise on a phone. The data is unchanged: this
 * hides columns, it does not filter rows. */
/* Five tiles at tablet width broke four across and one alone on a full-width
 * row, which reads as a tile that means more than the other four. Three and
 * two is the same information with no accidental emphasis. */
@media (min-width: 521px) and (max-width: 899px) {
  .strip .stat {
    flex: 1 1 calc(33.333% - var(--sp-3));
  }
}

@media (max-width: 820px) {
  .narrow-drop {
    display: none;
  }
  /* The other half of the same rule: a fact the dropped columns were carrying
   * that nothing else on the row says. A store's roots are what it indexes,
   * and on a phone the ROOTS column goes and nothing replaced it. */
  .only-narrow {
    display: block;
  }
  /* With those columns gone the table fits the card, so the minimum that was
   * holding the full set of them apart is what would keep it scrolling
   * sideways. */
  .w-stores,
  .w-files,
  .w-agents,
  .w-coverage {
    min-width: 0;
  }
  /* A truncating cell still asks for the width of its longest path unless it
   * is allowed to be narrower than its content, which `max-width: 0` on the
   * cell is the standard way to say. The ellipsis then does the work it was
   * added for at any width. */
  td.path,
  td.meta,
  tbody td:first-child {
    max-width: 0;
  }
  .one-line {
    max-width: 100%;
  }
  /* The tool list scrolls inside a fixed-height card on the desktop grid.
   * Stacked in one column there is no height to fit into, and the scrollport
   * only cut the last row in half. */
  .tool-grid {
    max-height: none;
    overflow-y: visible;
  }
}

@media (max-width: 899px) {
  /* Type steps here rather than in each component: before this the only size
   * that changed at either breakpoint was the stat value, so a 24px figure sat
   * beside a 21px heading that had not moved. */
  :root {
    --t-display: 21px;
    --t-h1: 18px;
    --t-title: 16px;
    --t-lead: 14px;
  }

  /* Below the narrow breakpoint the page scrolls rather than trapping a
   * stacked desktop layout in the viewport, which is worse than letting it
   * scroll. Tables still scroll inside their own wrapper.
   *
   * `.view { overflow-y: auto }` stood here too and was a word-for-word repeat
   * of the base rule, which said the same thing at every width. */
  .grow {
    flex: 0 0 auto;
  }

  /* The canvas pages are two columns of real content, so they stack rather
   * than squeeze: a 300px rail beside a 300px canvas is two unusable halves. */
  .graph-body {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Stacked, the canvas cannot fill the page any more, so it takes a stated
   * height and the rail follows it down the page. */
  .graph-page {
    overflow-y: auto;
  }

  .graph-frame {
    height: 360px;
  }

  .graph-band {
    padding: var(--sp-4) var(--sp-4) var(--sp-3);
  }

  .graph-rail {
    border-left: 0;
    border-top: 1px solid var(--line);
    overflow: visible;
  }

  /* The rail is navigation for a wide screen; on a phone the drawer is. */
  .rail {
    display: none;
  }

  .sidebar {
    animation: slide-in var(--d-slide) var(--e-pop);
    position: fixed;
    top: var(--topbar-h);
    bottom: 0;
    left: 0;
    z-index: 40;
    box-shadow: var(--shadow-nav);
  }
  .sidebar[hidden] {
    display: none;
  }

  @keyframes slide-in {
    from {
      transform: translateX(-100%);
    }
  }

  @keyframes fade-in {
    from {
      opacity: 0;
    }
  }

  .scrim {
    animation: fade-in var(--d-slide) var(--e-in-out);
    display: block;
    position: fixed;
    inset: var(--topbar-h) 0 0 0;
    background: var(--scrim);
    z-index: 35;
    border: 0;
    padding: 0;
  }

  .view {
    /* The sides come in at a phone width; the floor does not. A card against
     * the bottom edge reads as a page that was cut off, and that is truer on a
     * phone than anywhere else. */
    padding: 18px var(--sp-4) var(--view-floor);
  }
  .search-band {
    padding: var(--sp-4) var(--sp-4) var(--sp-3);
  }
  .results {
    padding: var(--sp-4) var(--sp-4) var(--sp-6);
  }

  /* The topbar's job on a phone is the menu, the mark and the theme toggle.
   * The page title is already the h1 one line below it, and the search
   * launcher is a nav item away — both were pushing the toggle off the end of
   * a bar that cannot scroll. */
  .page-title,
  .divider-v,
  .search-launcher .what,
  .search-launcher .key-hint {
    display: none;
  }
  .search-launcher {
    flex: 0 0 auto;
    width: 34px;
    justify-content: center;
    padding: 0;
  }
  .wordmark {
    display: none;
  }
}

@media (max-width: 520px) {
  :root {
    --t-display: 18px;
    --t-h1: 16px;
    --t-title: 14px;
    --t-lead: 13px;
    --t-body: 13px;
  }

  /* One column on a phone: two 180px cards side by side at 390px leaves a
   * four-word title on three lines. */
  .welcome .steps {
    grid-template-columns: minmax(0, 1fr);
  }

  /* The actions come after the sentence that says what the page is, not
   * between it and the title. On a phone the header row wraps, so `Adopt
   * existing .semlith` and `Index a folder` landed above the subtitle and the
   * page read title, two buttons, then an explanation of what they were for.
   *
   * `display: contents` lifts the title row's children into the header's own
   * column so they can be ordered against the subtitle, which is their
   * sibling rather than their cousin. */
  .page-head .line {
    display: contents;
  }
  .page-head > .subtitle {
    order: 1;
  }
  .page-head .line > .actions {
    order: 2;
    margin-top: var(--sp-2);
  }
  /* The spacer exists to push the actions to the far end of a row that no
   * longer exists here, and an empty flex child in a column is a blank line. */
  .page-head .line > .spacer {
    display: none;
  }

  .graph-frame {
    height: 280px;
  }

  .graph-controls {
    gap: var(--sp-2);
  }

  .kv .k {
    width: auto;
  }
  .stat {
    flex-basis: 100%;
  }

  /* Nine store chips wrapped to three rows above the results, which on a
   * phone is the whole first screen spent on a filter nobody had asked for.
   * One row, scrolled sideways, with the edge fading to say there is more.
   *
   * This is the one mask left in the file and it stays. The mask that came off
   * `pre.code` was over text a user selects and copies, where hiding the last
   * characters is the whole cost. A row of chips is a set of targets: the fade
   * says there are more of them, nothing is read out of it, and the scrollbar
   * it replaces is hidden on purpose because a phone has no room for one. */
  .store-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    mask-image: linear-gradient(to right, #000 88%, transparent);
  }
  .store-chips::-webkit-scrollbar {
    display: none;
  }
  .store-chips > * {
    flex: 0 0 auto;
  }

  /* The summary bar sits over the results on a phone, so the last card was
   * half-covered by it. */
  .results {
    padding-bottom: var(--sp-8);
  }
}

/* A column of checkboxes, and the bar that appears once one is ticked. */
th.pick,
td.pick {
  width: 34px;
  padding-right: 0;
}

input.pick {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--blue);
  cursor: pointer;
}

.bulk {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2h) var(--sp-3h);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  background: var(--soft);
}

/* Two actions at the end of a row, on one line. */
.row-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  justify-content: flex-end;
}

/* A row's actions, behind one control. The host is fixed to the viewport
 * because a popup inside a table cell is clipped by the table's own scroll. */
.menu {
  position: fixed;
  z-index: 60;
  min-width: 180px;
  padding: var(--sp-1);
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  box-shadow: 0 10px 30px rgb(15 21 26 / 18%);
}

.menu-item {
  transition: background var(--d-quick) var(--e-in-out);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border: 0;
  border-radius: var(--r-2);
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: var(--t-body-sm);
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}
.menu-item:hover {
  background: var(--soft);
}
.menu-item.bad {
  color: var(--red-ink);
}
.menu-item.bad:hover {
  background: var(--red-soft);
}

/* The icon-only button the menu hangs off. */
.button.icon {
  width: 32px;
  padding: 0;
}

th.row-end,
td.row-end {
  width: 44px;
  text-align: right;
}

/* A question that stops the page until it is answered. The element is a
 * native `<dialog>`, so the centring, the focus trap and the backdrop are the
 * browser's rather than three more things to get right here. */
.modal {
  width: min(440px, calc(100vw - 2 * var(--sp-4)));
  padding: var(--sp-4h);
  border: 1px solid var(--line);
  border-radius: var(--r-4);
  background: var(--panel);
  color: var(--ink);
  box-shadow: 0 24px 60px rgb(15 21 26 / 22%);
}
.modal::backdrop {
  background: rgb(15 21 26 / 45%);
}
.modal .card-title {
  margin: 0 0 var(--sp-2);
  font-size: var(--t-title);
}
.modal .subtitle {
  margin: 0;
  /* A path has no spaces in it, so without this the line cannot break and the
   * dialog's own text pushes out past both its edges. */
  overflow-wrap: anywhere;
}
/* A tall dialog scrolls in its middle only: the title and the buttons stay
 * on screen, so the choice is never scrolled away from what it is about. */
.modal[open] {
  display: flex;
  flex-direction: column;
  max-height: min(86dvh, 760px);
}
.modal.wide {
  width: min(560px, calc(100vw - 2 * var(--sp-4)));
}
.modal-head,
.modal-foot {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.modal-body {
  flex: 1 1 auto;
  min-height: 0;
  margin-top: var(--sp-3);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.modal-foot:has(> *:not(:empty)) {
  margin-top: var(--sp-3);
}
.modal .card-title {
  margin: 0;
}
.modal .actions {
  flex-shrink: 0;
}
.modal .card-title {
  overflow-wrap: anywhere;
}
.modal .actions {
  margin-top: var(--sp-4);
}
/* The button that destroys something is red, not the amber of an action that
 * merely needs care. */
.modal .button.danger {
  border-color: var(--red);
  color: var(--red-ink);
}
.modal .button.danger:hover {
  background: var(--red-soft);
  border-color: var(--red);
  color: var(--red-ink);
}

/* The menu control: a bordered square, and dots dark enough to find. */
.button.icon {
  width: 32px;
  height: 32px;
  padding: 0;
  color: var(--ink-2);
}
.button.icon:hover,
.button.icon[aria-expanded="true"] {
  color: var(--ink);
  border-color: var(--blue);
}
.button.icon[aria-expanded="true"] {
  background: var(--chip);
}
.button.icon svg {
  width: 18px;
  height: 18px;
}

/* The Privacy page's Rules section.
 *
 * One row per rule, with the daemon's own reading of it on the right. The
 * reading is the point: a row that only stated the rule would be a sentence
 * somebody wrote, and these are meant to be checkable. */
.rules {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.rule-row {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-3) 0 0;
  border-top: 1px solid var(--line);
}
.rule-row:first-child {
  border-top: 0;
  padding-top: 0;
}
.rule-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
}
.rule-id {
  font-weight: 600;
  white-space: nowrap;
}
.rule-text {
  color: var(--muted);
  margin: 0;
  /* Full width, like every other paragraph. See `.card .subtitle`. */
  max-width: 100%;
}
/* What the daemon found, under the rule it is about. A column beside the rule
 * spends the card's whole width on the one row whose reading is a path, and
 * wraps every other one into ragged thirds. */
.rule-found {
  align-items: baseline;
  display: flex;
  gap: var(--sp-2);
  min-width: 0;
}
.rule-found .eyebrow {
  flex-shrink: 0;
}
.rule-check {
  color: var(--fg);
  font-size: 0.85em;
  min-width: 0;
  overflow-wrap: anywhere;
}
.rule-row.bad .rule-check {
  color: var(--red);
}

/* A path that was refused rather than skipped. A skipped file is one semlith
 * has no reader for; a refused one is a file semlith will not read, and the
 * difference is the whole reason the outcome is its own word. */
.log .line.refused .outcome {
  color: var(--red);
}
.log .line.refused {
  opacity: 1;
}

/* A failure is not a decision: a skipped file is one semlith chose not to
   read, a failed one is a file it tried to read and could not. They are
   different colours because they are different news. */
.log .line.failed .outcome {
  color: var(--red);
}
.log .line.failed {
  opacity: 1;
}

/* Impact — the graph read backwards.
 *
 * A list rather than a picture: the question is "who would notice", and an
 * answer to that is read top to bottom by hop, not laid out in space. The
 * row shape is the locate row's, because both are "a name, where it is, and
 * what it is worth" and two shapes for that would read as two kinds of fact. */
/* Every control on this page is a control shaped like the rest of the portal.
 *
 * The inputs here were bare `<input>` elements — no border token, no radius,
 * no height, the browser's own box — sitting in a row with 34px buttons and
 * pill chips. It was the one page where the shapes did not agree with any
 * other, which is what "not proper" was pointing at. */
.impact-band {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2h);
  align-items: center;
  margin-bottom: var(--sp-4);
}

.impact-band input[type="search"],
.impact-band .hops,
.path-band input {
  height: 34px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  background: var(--panel);
  color: var(--ink);
  font-family: var(--mono);
  font-size: var(--t-field);
  outline: none;
  transition: border-color var(--d-fade) var(--e-in-out);
}

.impact-band input[type="search"]:focus,
.impact-band .hops:focus,
.path-band input:focus {
  border-color: var(--accent-edge);
}

.impact-band input[type="search"] {
  flex: 1 1 12rem;
  min-width: 0;
}
/* What the three figures mean, once, under them. */
.impact-guide {
  margin: var(--sp-3) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  font-size: var(--t-body-sm);
  line-height: var(--lh-prose);
  color: var(--muted);
}
.impact-guide b {
  color: var(--ink-2);
  font-weight: 500;
}
.hops-label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--t-small-h);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-family: var(--mono);
}
.hops-label .hops {
  width: 4.5rem;
}
/* The hop label itself: the group's name and how many definitions it holds,
 * on one baseline. The rule that used to sit under it is gone — the row it
 * labels already has one. */
.impact-hop {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
}
.impact-hop h2 {
  font-size: var(--t-small);
  margin: 0;
}
/* The reached answer, and the files under it, are tables.
 *
 * They were `div`s on a shared grid, which is a table only while every row
 * agrees about its tracks — a symbol longer than its heading pushed that row's
 * columns out of line with the heading above it and the block stopped reading
 * as columns at all. A `table` sizes its columns from the whole column, and
 * the sticky heading, the hover row and the rules all come from the shared
 * table rules above rather than being drawn again here. */
.impact-table {
  /* These sit under the headline in a flowing column rather than in a grid
   * cell, so the shared 168px floor would stretch a two-row answer. */
  min-height: 0;
  margin-bottom: var(--sp-4);
}
.impact-table td {
  font-family: var(--mono);
  font-size: var(--t-small);
  padding: var(--sp-2) var(--sp-3h);
}
/* One line, truncated, with the whole name in the title. Rust test names run
 * past forty characters and `overflow-wrap: anywhere` turned one of them into
 * four lines, so a row of a four-line name sat beside rows of one — which is a
 * list of paragraphs rather than a table. */
.impact-table .sym {
  max-width: 26ch;
}
.impact-table .sym code {
  display: block;
  font: inherit;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* `path:line` on one line. The shared `td.path` breaks anywhere, which is right
 * for a column of long paths and wrong here: this column is narrow, and
 * `corpus/daemon.rs:1858` broken over three lines made every row three rows
 * tall. The cell truncates instead, and the table scrolls if it has to. */
.impact-table .where {
  color: var(--ink-2);
  overflow-wrap: normal;
  white-space: nowrap;
  max-width: 22ch;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* The support badge rides with the edge it describes rather than taking a
 * column of its own: it is a property of the via, not a fourth fact. */
.impact-table .via {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  min-width: 0;
  color: var(--muted);
}

/* The hop label, on a row that spans the table. `position: static` because the
 * shared rule makes every `th` sticky, which is right for a column heading and
 * wrong for a group label — five sticky labels stack on top of one another at
 * the top of the box as the rows scroll past. */
.impact-hop-row th {
  position: static;
  text-transform: none;
  letter-spacing: normal;
  font: inherit;
  padding: var(--sp-3h) var(--sp-3h) var(--sp-1);
  background: var(--soft);
  box-shadow: none;
}
/* A group label is not a row of data; it should not light up under the
 * pointer with the rows. */
.impact-table tbody tr.impact-hop-row:hover {
  background: var(--soft);
}

/* The heading over a table that has one. `Files` needs saying; the reached
 * table is already introduced by the headline above it. */
.table-head {
  padding: var(--sp-3h) var(--sp-3h) 0;
}
.table-head h2 {
  font-size: var(--t-body);
  margin: 0;
}
.headline {
  font-size: var(--t-body);
  color: var(--ink);
  margin-bottom: var(--sp-3);
}
/* Said once, above the list, rather than on every ambiguous row: the warning
 * is about the walk, not about any one edge — each row still carries its own
 * badge. */
.note.hypothesis {
  color: var(--amber-ink, var(--ink-2));
  margin-bottom: var(--sp-3);
}

/* The `Changing` line, inside the card the design puts it in. It was a
 * page-wide unboxed band with a rule under it, which is why the rule and the
 * margin below are gone: a card already has an edge, and a second one inside
 * it is a line for its own sake. */
.impact-subject-row {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2h);
  flex-wrap: wrap;
}

/* The answer beside the two questions that follow from it, as the v4 page
 * lays it out. `auto-fit` rather than a breakpoint, so the columns collapse
 * on the width of this block and not on the width of the window — which
 * carries a sidebar whose width is itself a state. */
.impact-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: var(--sp-4);
  align-items: start;
  min-width: 0;
}

/* The answer's headline and its two tables, spaced like the column they
 * sit in. The Where column shares what is left rather than asking for its
 * longest path, so Via and Hops stay in view in half the page's width. */
.impact-results {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-width: 0;
}
.impact-table td.where {
  max-width: 0;
  width: 40%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.impact-table td.via .one-line {
  white-space: normal;
}

/* One column of the pair. Both are a plain stack; the grid above decides
 * whether they sit beside each other or under one another. */
.impact-col {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-width: 0;
}

/* The canvas card: a fixed 320px, as the design draws it, because reverse
 * reachability at an arbitrary height is a picture that changes meaning with
 * the window. `overflow: hidden` keeps the rings inside the radius. */
.impact-canvas-card {
  position: relative;
  /* The design's 320px is drawn against its own five-node mock. A real store
   * answers with dozens, and the rings need the room to keep their labels
   * apart — so this is the design's height as a floor rather than as a cap. */
  height: clamp(320px, 42vh, 460px);
  overflow: hidden;
  padding: 0;
}
/* The caption floats over the canvas at its top-left, on a plate for the same
 * reason the graph legend and the ego hint have one: a label sat in the same
 * pixels as a node is two labels and no reading. */
.canvas-caption {
  position: absolute;
  left: var(--sp-3h);
  top: var(--sp-3);
  padding: var(--sp-1) var(--sp-2);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  font-family: var(--mono);
  font-size: var(--t-tiny);
  color: var(--muted);
  pointer-events: none;
}
.impact-subject {
  font-family: var(--mono);
  font-size: var(--t-body);
  color: var(--ink);
}
.impact-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}
/* Each cell takes an equal share and may wrap: three figures side by side in
 * a 340px column, and stacked below that, which is what the design's own
 * `flex: 1 1 110px` does. */
.impact-stat {
  display: flex;
  flex: 1 1 110px;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}
.impact-stat .n {
  font-family: var(--mono);
  font-size: 22px;
  color: var(--ink);
}
.impact-row .hops-n {
  color: var(--muted);
}

/* `.path-card` and `.trace-card` carried `margin-top` here while their column
 * already spaced them with a gap, so the whole right column started 24px below
 * the left one for no reason a reader could see. The column does the stacking
 * now, once. */
.card-head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.card-head h2 {
  font-size: var(--t-body);
  margin: 0;
}
.mono-chip {
  font-family: var(--mono);
  font-size: var(--t-tiny);
  color: var(--muted);
}
.path-band {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2h);
  align-items: center;
  margin-bottom: var(--sp-4);
}
.path-band input {
  flex: 1 1 9rem;
  min-width: 0;
}
/* `.chip-toggle` stood here: 11px mono, 3px of vertical padding, about 17px
 * tall. Beside the 34px buttons it shares a row with on the Impact page it
 * read as a footnote rather than as a control, and the two shapes disagreed on
 * every property that matters -- height, family, radius and what "on" looks
 * like. There is one chip in this portal now: `.chip.sm`, pressed through
 * `aria-pressed` like every other, which is also where its ink fill comes
 * from. The design draws these two toggles as chips and nothing else. */
.hop {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2);
  padding: var(--sp-1) 0;
  font-family: var(--mono);
  font-size: var(--t-small);
}
.hop .n {
  color: var(--muted);
  min-width: 1.2em;
}
.hop .end {
  color: var(--ink);
  overflow-wrap: anywhere;
}
.hop .arrow,
.hop .kind {
  color: var(--ink-2);
}
/* The weld, drawn between the two hops it joins rather than as a hop of its
 * own: a seam that counted as a hop would inflate the hop count and hide the
 * join, which is the thing worth seeing. */
.seam {
  margin: 0 0 var(--sp-1) var(--sp-5);
  padding-left: var(--sp-2);
  border-left: 1.4px dashed var(--accent);
  font-family: var(--mono);
  font-size: var(--t-tiny);
  color: var(--amber-ink);
}
.trailer {
  margin-top: var(--sp-2);
  font-size: var(--t-tiny);
  color: var(--muted);
}
.refusal {
  border: 1px solid var(--line);
  border-radius: var(--r-4);
  padding: var(--sp-3);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-3);
}
.refusal .mono {
  font-family: var(--mono);
  font-size: 12.5px;
  margin: 0;
}
.link {
  background: none;
  border: 0;
  padding: 0;
  color: var(--accent);
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
}
.answer {
  margin: var(--sp-1) 0 var(--sp-4);
  line-height: var(--lh-prose);
}
.support {
  margin-bottom: var(--sp-3);
}
.support code {
  display: block;
  font-family: var(--mono);
  font-size: var(--t-small);
  background: var(--shade, var(--line-soft));
  border-radius: var(--r-2, 4px);
  padding: var(--sp-2);
  overflow-x: auto;
  white-space: pre;
}
.support-foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: baseline;
  margin-top: var(--sp-1);
  font-family: var(--mono);
  font-size: var(--t-tiny);
}
.support-foot .hop-of {
  color: var(--muted);
}
/* Two marks, and the difference between them is the whole point: one is a
 * fact the source states, the other is a name match somebody has to check. */
.mark.fact {
  color: var(--blue-ink, var(--accent));
}
.mark.candidate {
  color: var(--amber-ink);
}

/* The right column of the Graph page: the selection rail, and the Map under
 * it. Two panels rather than one, because selecting a node replaces the rail
 * and must not take the map of the store with it. */
.graph-side {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border-left: 1px solid var(--line);
}
/* The part of the side column that scrolls: the rail and the Map. The
 * selected symbol's actions sit under it, outside. */
.graph-scroll {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
/* Both panels keep their own height and the column scrolls past them.
 *
 * Without this the Map's own height — one row per community, and a large
 * store has dozens — shrank the selection rail above it to a few pixels in
 * the flex column. The rail overflows visibly by design, so what it drew was
 * the selected symbol, its callers and its callees painted straight over the
 * map underneath, with the rail's own buttons at the bottom of the page. */
.graph-side .graph-rail {
  flex-shrink: 0;
  border-left: 0;
  overflow-y: visible;
}
.map-panel {
  flex-shrink: 0;
  padding: var(--sp-4h);
  border-top: 1px solid var(--line);
}
.map-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.map-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  padding: var(--sp-2);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background: var(--panel);
  cursor: pointer;
  min-width: 0;
}
.map-row:hover {
  border-color: var(--blue-ink);
}
.map-row .line {
  font-family: var(--mono);
  font-size: var(--t-tiny);
  color: var(--ink-2);
  overflow-wrap: anywhere;
}
.map-row .line.one {
  display: flex;
  gap: var(--sp-2);
  align-items: baseline;
  font-size: var(--t-small);
  color: var(--ink);
}
.map-row .size {
  color: var(--muted);
}
.map-shown {
  margin-top: var(--sp-2);
  font-family: var(--mono);
  font-size: var(--t-tiny);
  color: var(--muted);
}
@media (max-width: 899px) {
  .graph-side {
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .graph-scroll {
    overflow: visible;
  }
}

/* Inside the index: the language mix, chunks by month, and graph health.
 *
 * Three cards of counted things, drawn as bars rather than as numbers alone
 * because the question each answers is a proportion — how much of the corpus
 * is this language, how much of the graph is settled. */
.health {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  /* One height for the three, which is what a row of cards has to have to read
   * as a row. They were `align-items: start` so each was as tall as its own
   * content, and three cards of three different heights side by side read as a
   * layout that had gone wrong rather than as three answers. The empty band
   * that used to leave is handled in the cards themselves: the month chart
   * grows its bars into the space and the other two push their footnote to the
   * bottom. */
  align-items: stretch;
}
.health-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  /* The last child takes the slack, so a card shorter than its neighbours
   * pads at the bottom rather than stretching its rows apart. */
  justify-content: flex-start;
  padding: var(--sp-3);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-4);
  min-width: 0;
}
/* The rows spread through the card rather than bunching at its top. Eight
 * languages in a card sized by its tallest neighbour is otherwise a list with
 * a hand's width of empty panel under it. */
.mix {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  flex: 1 1 auto;
  justify-content: space-evenly;
}
.mix-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--mono);
  font-size: var(--t-tiny);
}
.mix-row .k {
  flex: 0 0 7rem;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}
.mix-row .meter {
  flex: 1 1 auto;
  height: 6px;
  background: var(--line-soft);
  border-radius: 999px;
  overflow: hidden;
}
.mix-row .meter span {
  display: block;
  height: 100%;
  background: var(--blue-ink);
}
.mix-row .v {
  color: var(--muted);
  white-space: nowrap;
}
/* Grows into whatever height the row has. The three cards are one height now,
 * and a 96px chart in a 260px card left two thirds of it empty — a bar chart
 * is the one thing here with an obvious use for vertical space. */
.months {
  display: flex;
  align-items: flex-end;
  gap: var(--sp-1);
  min-height: 96px;
  flex: 1 1 auto;
}
.month {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  /* Capped, so one month reads as a column rather than as a slab filling
   * the card. A store indexed in a single pass is the common case. */
  flex: 0 1 44px;
  min-width: 0;
  height: 100%;
  justify-content: flex-end;
}
.months {
  justify-content: flex-start;
}
.month .col {
  display: flex;
  align-items: flex-end;
  width: 100%;
  flex: 1 1 auto;
}
.month .col span {
  display: block;
  width: 100%;
  background: var(--blue-ink);
  border-radius: 2px 2px 0 0;
}
.month .m,
.month .c {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--muted);
}
/* The four support classes as one bar, in the order they are worth trusting.
 * A single "resolution %" hid the difference between an edge the source
 * named and one nothing could place. */
.support-bar {
  display: flex;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--line-soft);
}
.support-bar .seg.extracted {
  background: var(--blue-ink);
}
.support-bar .seg.resolved {
  background: var(--accent);
}
.support-bar .seg.ambiguous {
  background: var(--amber-ink);
}
.support-bar .seg.unresolved {
  background: var(--line);
}
.health-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}
.health-facts .fact {
  display: flex;
  flex-direction: column;
}
.health-facts .v {
  font-family: var(--mono);
  font-size: var(--t-body);
  color: var(--ink);
}
.health-facts .k {
  font-size: var(--t-tiny);
  color: var(--muted);
}

/* The sessions table's columns. Same shape as the rows table beside it, one
 * column wider, so the two read as one page rather than as two designs. */
.w-sessions {
  table-layout: fixed;
  width: 100%;
}
.w-sessions th:nth-child(1),
.w-sessions td:nth-child(1) {
  width: 16%;
}
.w-sessions th:nth-child(2),
.w-sessions td:nth-child(2) {
  width: 14%;
}
.w-sessions th:nth-child(5),
.w-sessions td:nth-child(5),
.w-sessions th:nth-child(6),
.w-sessions td:nth-child(6),
.w-sessions th:nth-child(7),
.w-sessions td:nth-child(7) {
  width: 11%;
}

/* Session replay: one row per transcript, the outcomes under it, and then the
 * answers themselves as a timeline — which is what the design draws and what
 * this panel was missing. A transcript summarised to four counts says how the
 * week went; the timeline says what happened after each question, which is the
 * thing nobody else can show. */
.replay-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.replay-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--line-soft);
}

/* Which transcript, whose, and how much of it: the line the design puts beside
 * the panel's title. */
.replay-meta {
  font-family: var(--mono);
  font-size: var(--t-tiny);
  color: var(--muted);
}

/* The off state. One dashed strip rather than a paragraph, because it is an
 * empty state and not a failure, and the button is the only way from here to
 * the page that turns it on. */
.replay-off {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3h);
  padding: var(--sp-3h);
  border: 1px dashed var(--line);
  border-radius: var(--r-2);
}
.replay-off p {
  flex: 1 1 200px;
  min-width: 200px;
  margin: 0;
  font-size: var(--t-small);
  color: var(--muted);
}

/* One answer, and what the agent did after it. The 2px rule down the left is
 * what makes a list of these read as a timeline rather than as rows. */
.replay-answer {
  display: flex;
  gap: var(--sp-2h);
  margin-top: var(--sp-2h);
}
.replay-answer .at {
  flex: 0 0 58px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--muted);
}
.replay-what {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-1);
  min-width: 0;
  padding-left: var(--sp-3);
  border-left: 2px solid var(--line);
}
.replay-what .line.one {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2h);
  font-family: inherit;
  font-size: var(--t-small);
}
.replay-what .q {
  color: var(--ink);
  overflow-wrap: anywhere;
}
.replay-what .muted {
  font-family: var(--mono);
  font-size: var(--t-tiny);
}

/* The badge, coloured by what the agent did: green for an answer that was
 * enough, amber for a whole-file read semlith should have saved, and a neutral
 * chip for a grep — a miss is not an error, it is a question this store could
 * not answer. */
.replay-badge {
  display: inline-flex;
  align-self: flex-start;
  font-family: var(--mono);
  font-size: var(--t-tiny);
  padding: 2px var(--sp-2);
  border-radius: var(--r-1);
  background: var(--chip);
  color: var(--ink-2);
}
.replay-badge.sufficed {
  background: var(--green-soft);
  color: var(--green-ink);
}
.replay-badge.refund {
  background: var(--amber-soft);
  color: var(--amber-ink);
}
.replay-badge.unknown {
  color: var(--muted);
}

/* The Privacy page's control: the whole row is the switch, as the design draws
 * it, and the square knob is the state. A `button` so the keyboard reaches it,
 * stripped of the button shape because it is a row. */
.replay-switch {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  width: 100%;
  padding: var(--sp-3) 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background: var(--bg);
  text-align: left;
  cursor: pointer;
  transition:
    background var(--d-quick) var(--e-in-out),
    border-color var(--d-quick) var(--e-in-out);
}
.replay-switch:hover:not([disabled]) {
  border-color: var(--ink-2);
}
.replay-switch[disabled] {
  cursor: default;
  opacity: 0.6;
}
.replay-switch.on {
  border-color: var(--green);
  background: var(--green-soft);
}
.replay-switch .knob {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  margin-top: 2px;
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  background: var(--panel);
}
/* The accelerator lanes: a lane and its one action close together, lanes
 * further apart, and the action under the lane's words rather than under its
 * switch. At 2px under its lane and 8px over the next, the Remove button read
 * as belonging to neither. */
.accel-lanes {
  gap: var(--sp-3);
}
.accel-lane {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.accel-remove {
  /* The switch's border, padding, knob and gap: where its words start. */
  padding-left: calc(1px + 13px + 15px + 11px);
}
.replay-switch.on .knob {
  border-color: var(--green-ink);
  background: var(--green-ink);
}
.replay-switch-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.replay-state {
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--ink);
}
.replay-switch-note {
  font-size: 12.5px;
  color: var(--muted);
}
.replay-row .line.one {
  display: flex;
  gap: var(--sp-2);
  align-items: baseline;
  font-family: var(--mono);
  font-size: var(--t-small);
}
.replay-counts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  font-family: var(--mono);
  font-size: var(--t-tiny);
}
/* The three outcomes are different facts and are never summed: a refund is
 * an agent that did not ask, a miss is an answer that was not good enough,
 * an edit is the answer having been enough. */
.replay-count.refund {
  color: var(--amber-ink);
}
.replay-count.miss {
  color: var(--red-ink, var(--amber-ink));
}
.replay-count.sufficed {
  color: var(--blue-ink);
}
.replay-count.unknown {
  color: var(--muted);
}

/* Reports: a row of types to choose from, then the builder and the preview
 * side by side. The type cards are the selection, so the selected one carries
 * the ink border the design gives a chosen card rather than a tick. */
.report-types {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(264px, 1fr));
  gap: var(--sp-3);
}
.report-type {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  text-align: left;
  padding: var(--sp-3h) var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-4);
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  min-width: 0;
  transition: border-color var(--d-fade) var(--e-in-out), background var(--d-fade) var(--e-in-out);
}
.report-type:hover {
  border-color: var(--blue);
}
.report-type.on {
  border-color: var(--ink);
  background: var(--blue-soft);
}
.report-type .name {
  font-weight: 600;
  font-size: var(--t-body);
}
.report-type .what {
  color: var(--muted);
  font-size: var(--t-small-h);
  text-wrap: pretty;
}
.report-type .for-whom {
  font-family: var(--mono);
  font-size: var(--t-tiny);
  color: var(--ink-2);
}

.report-builder {
  gap: var(--sp-3);
}
.report-builder .titles {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

/* The preview is a document in a frame: a bar naming the file, the text, and
 * a line saying how big it is. No padding on the card itself, because each of
 * the three has its own. */
.report-preview-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}
/* Both bars hold their height. In a flex column with a tall `<pre>` between
 * them the default `flex-shrink: 1` squeezed the top bar to a few pixels and
 * clipped the file name and both controls out of the card. */
.report-preview-card .report-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-2h);
  flex-wrap: wrap;
  flex-shrink: 0;
  padding: var(--sp-3) var(--sp-3h);
  border-bottom: 1px solid var(--line);
}
.report-preview-card .report-bar .name {
  font-family: var(--mono);
  font-size: var(--t-small);
  color: var(--ink-2);
  overflow-wrap: anywhere;
}
/* The copy control on this bar is the only way to take the text, so it is not
 * one of the ones that appears on hover, and it carries the word rather than
 * the icon because it sits beside Export and the two are a pair. */
.report-preview-card .report-bar .copy {
  opacity: 1;
  width: auto;
  height: 28px;
  padding: 0 var(--sp-3);
}
.report-preview-card .foot {
  flex-shrink: 0;
  border-top: 1px solid var(--line);
  background: var(--soft);
  padding: var(--sp-2h) var(--sp-3h);
}
.report-text {
  font-family: var(--mono);
  font-size: var(--t-tiny-h);
  line-height: var(--lh-code);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 0;
  padding: var(--sp-4);
  background: var(--bg);
  max-height: 22rem;
  overflow: auto;
  min-height: 4rem;
}

/* A labelled row of chips: an eyebrow over the row it names. Five groups on
 * the Reports page take this shape and the design draws all five alike. */
.chip-group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-width: 0;
}
/* The variant that sits *beside* a heading instead of above a column. The
 * design uses the 10.5px eyebrow only in this position -- see `.eyebrow.sm`. */
.chip-group.inline {
  flex-direction: row;
  align-items: center;
  gap: var(--sp-2);
}

/* The report's own sentence about the span it was taken over, under the two
 * lines naming it. Mono, because it is a statement from the file rather than
 * prose about the file, and the three reports that have no window say so
 * here at length. */
.report-builder .span-note {
  font-family: var(--mono);
  font-size: var(--t-tiny-h);
}

/* The three redaction toggles: a filled square, not a sliding switch, then a
 * two-line label stack. They are disabled in this build and still carry a
 * border and a background at rest, which is the rule for every control here. */
.report-toggles {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-width: 0;
}
.report-toggle {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2h);
  text-align: left;
  padding: var(--sp-3) var(--sp-3);
  border-radius: var(--r-3);
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  min-width: 0;
}
.report-toggle[aria-pressed="true"] {
  border-color: var(--green);
  background: var(--green-soft);
}
.report-toggle .knob {
  width: 15px;
  height: 15px;
  border-radius: var(--r-1);
  border: 1px solid var(--line);
  background: var(--panel);
  flex-shrink: 0;
  margin-top: 2px;
}
.report-toggle[aria-pressed="true"] .knob {
  border-color: var(--green-ink);
  background: var(--green-ink);
}
.report-toggle .stack {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  min-width: 0;
}
.report-toggle .label {
  font-size: var(--t-body-sm);
  font-weight: 500;
}
.report-toggle .why {
  color: var(--muted);
  font-size: var(--t-small);
  text-wrap: pretty;
}

/* The preview's footer carries the meta line and the one accent action on the
 * page, so it is a row rather than a single line of text. */
.report-preview-card .foot {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.report-preview-card .foot .meta {
  font-family: var(--mono);
  font-size: var(--t-tiny-h);
  color: var(--muted);
}
/* 30px: the design's `Save to disk`, between the 34px secondary shape and the
 * 26px toolbar controls above it. */
.report-preview-card .foot .button {
  height: 30px;
  padding: 0 var(--sp-3h);
}

/* The savings breakdown: a header of dials, four line items, the net, and a
 * strip of badges that say how far the figure can be trusted. */
.savings-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2h);
  flex-wrap: wrap;
}
.savings-head > .rule {
  width: 1px;
  height: 20px;
  background: var(--line);
  margin: 0 var(--sp-1);
  flex-shrink: 0;
}
.savings-lines {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-width: 0;
}
.savings-line {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding-bottom: var(--sp-2h);
  border-bottom: 1px solid var(--line-soft);
  min-width: 0;
}
.savings-line .row,
.savings-net {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2h);
  flex-wrap: wrap;
  min-width: 0;
}
.savings-line .name {
  font-size: var(--t-body);
  font-weight: 500;
}
.savings-line .tok,
.savings-net .tok {
  font-family: var(--mono);
  font-size: var(--t-body);
  color: var(--ink-2);
}
/* Named `amount` because `.cost` is already the MCP page's boxed price block
 * (see above); a second meaning for one class is how a figure in this card
 * inherited a panel background it never asked for. */
.savings-line .amount {
  font-family: var(--mono);
  font-size: var(--t-lead);
  font-weight: 500;
  min-width: 96px;
  text-align: right;
}
.savings-net .name {
  font-size: var(--t-lead);
  font-weight: 600;
}
.savings-net .amount {
  font-family: var(--mono);
  /* The largest figure on this card, and the one a reader came for. */
  font-size: var(--t-display);
  font-weight: 600;
  min-width: 96px;
  text-align: right;
}

/* Six badges under the net: what the number covers, what it missed, how fast
 * the reads were, whether the chain verifies. A figure with no denominator
 * beside it is the thing this card exists not to print. */
.trust-strip {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.trust {
  display: inline-flex;
  align-items: center;
  font-family: var(--mono);
  font-size: var(--t-tiny);
  padding: var(--sp-1) var(--sp-2h);
  border-radius: var(--r-pill);
  background: var(--chip);
  color: var(--ink-2);
  max-width: 100%;
  overflow-wrap: anywhere;
}
.trust.blue {
  background: var(--blue-soft);
  color: var(--blue-ink);
}
.trust.green {
  background: var(--green-soft);
  color: var(--green-ink);
}
.trust.amber {
  background: var(--amber-soft);
  color: var(--amber-ink);
}

/* Written reports: a strip naming the directory, then the log. The table is
 * wider than a phone, so it scrolls sideways inside the card rather than
 * pushing the page. */
.written-head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2h);
  flex-wrap: wrap;
  padding: var(--sp-3h) var(--sp-4);
  border-bottom: 1px solid var(--line);
}
.written-card .scroll-x {
  overflow-x: auto;
}
.written-table {
  min-width: 620px;
}
.written-table .right {
  text-align: right;
}
.written-table .file,
.written-table .size,
.written-table .when {
  font-family: var(--mono);
  font-size: var(--t-small);
}
.written-table .when {
  color: var(--muted);
}
.written-table .type,
.written-table .window {
  font-size: var(--t-body-sm);
}
.written-table .window {
  color: var(--muted);
}
.written-card .empty {
  border: 0;
  border-top: 1px dashed var(--line);
  border-radius: 0;
}

/* The design's one centred dashed empty state, on the Schedules card. */
.empty.centred {
  text-align: center;
  font-size: var(--t-small-h);
  padding: var(--sp-4) var(--sp-3h);
}

/* `.card-head` is a baseline flex row, so a mono label in it is sized by its
 * content and an absolute store home ran straight out of the card at 390px. */
.schedules-card .card-head {
  flex-wrap: wrap;
}
.schedules-card .card-head .mono-chip {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Schedules: the daemon's own records, drawn as rows. Everything here is read
 * back from the daemon after every change, because page state that disagrees
 * with the file is the failure this card is for. */
.schedule-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.schedule-row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2h);
  padding: var(--sp-3) var(--sp-3);
  border-radius: var(--r-3);
  border: 1px solid var(--line);
  background: var(--bg);
  min-width: 0;
}
.schedule-knob {
  width: 15px;
  height: 15px;
  border-radius: var(--r-1);
  border: 1px solid var(--line);
  background: var(--panel);
  flex-shrink: 0;
  margin-top: 3px;
  cursor: pointer;
  padding: 0;
}
.schedule-knob.on {
  border-color: var(--green-ink);
  background: var(--green-ink);
}
.schedule-row .stack {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  min-width: 0;
}
.schedule-row .name {
  font-size: var(--t-body-sm);
  font-weight: 500;
}
.schedule-row .spec,
.schedule-row .wrote {
  font-family: var(--mono);
  font-size: var(--t-tiny-h);
  color: var(--muted);
  overflow-wrap: anywhere;
}
.schedule-row .next {
  font-size: var(--t-tiny-h);
  color: var(--ink-2);
}
/* A destination that has gone away is the failure this feature will meet, and
 * the whole error chain is printed rather than a shrug: a schedule that says
 * it is running beside a folder that never fills is the worst outcome here. */
.schedule-row .failed {
  font-size: var(--t-small);
  color: var(--red-ink);
  overflow-wrap: anywhere;
}
.state-pill {
  font: 500 var(--t-micro) var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: var(--r-1);
  flex-shrink: 0;
  background: var(--chip);
  color: var(--ink-2);
}
.state-pill.on {
  background: var(--green-soft);
  color: var(--green-ink);
}
.state-pill.paused {
  background: var(--amber-soft);
  color: var(--amber-ink);
}
.schedule-remove {
  width: 24px;
  height: 24px;
  border-radius: var(--r-2);
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--muted);
  font-size: var(--t-body);
  line-height: 1;
  flex-shrink: 0;
  cursor: pointer;
  padding: 0;
  transition: border-color var(--d-hover) var(--e-in-out), color var(--d-hover) var(--e-in-out),
    background var(--d-hover) var(--e-in-out);
}
.schedule-remove:hover {
  border-color: var(--amber-ink);
  color: var(--amber-ink);
  background: var(--amber-soft);
}
.new-schedule {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2h);
  border-top: 1px solid var(--line);
  padding-top: var(--sp-3h);
  min-width: 0;
}
/* The design writes this line in ink rather than muted: it is what the button
 * under it will do, not a footnote about it. */
.new-schedule .subtitle.strong {
  color: var(--ink-2);
}
/* The one non-uppercase mono label in the design, and the only one: `write to`
 * sits inline in front of the chips it names rather than above them. */
.write-to {
  font: 500 var(--t-tiny) var(--mono);
  color: var(--muted);
}
/* 32px: taller than a chip, shorter than the standard 34px action. The design
 * gives this one button its own height. */
.button.add-schedule {
  height: 32px;
  padding: 0 var(--sp-3h);
  border-color: var(--accent-edge);
}

/* The CLI card. Its `<pre>` is bordered and scrolls sideways only -- the
 * preview's is unbordered and height-capped, and they are not the same block. */
.report-cli-card .card-head .copy {
  height: 26px;
  padding: 0 var(--sp-2h);
  width: auto;
  opacity: 1;
}
pre.report-cli {
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: var(--sp-3) var(--sp-3h);
  background: var(--bg);
  color: var(--ink);
}

/* Everything the v4 design has no panel for, after every panel it does have.
 * Separated rather than woven in, so a reader can tell which lines came from
 * the design and which are this build talking about itself. */
.report-extras {
  border-style: dashed;
}

/* A destination is an absolute path and a chip is one line. The label is the
 * tail; the whole path is in the title, in the spec line under the button and
 * in the command the CLI card offers to copy. */
.new-schedule .chip {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  line-height: 26px;
}

/* Two columns become one on a narrow screen — every `.grid.two`, not one page's.
 *
 * `.grid.two` is `minmax(320px, 1fr) minmax(0, 1.1fr)`, and a 320px minimum on
 * the first track cannot be honoured at 390px with a gutter: the browser keeps
 * two columns and gives the second whatever is left, which on the Reports page
 * was about thirty pixels of preview setting one character per line. The About
 * page had the same defect and nobody had looked at it on a phone; the comment
 * on `.grid.two` arguing for two columns at every width was written about a
 * models table that this release removes. */
@media (max-width: 899px) {
  .grid.two {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 599px) {
  /* A 620px table cannot be made to fit 390px, so the card scrolls it and the
   * page does not. */
  .written-table {
    min-width: 520px;
  }
  .savings-line .amount,
  .savings-net .amount {
    min-width: 0;
    text-align: left;
  }
}

/* The Cloud page's three rows and its two command blocks. */
/* The design holds this page to 780px: it is prose and two commands, and a
 * sentence that runs the width of a 1 440px display is not read, it is
 * skimmed. The head is capped with the card so the two edges line up. */
.cloud-page > .page-head,
.cloud-page > .subtitle,
.cloud-page > .card {
  max-width: 780px;
}

.cloud-rows {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3h);
  margin-bottom: var(--sp-4);
}
.cloud-row {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  line-height: var(--lh-prose);
}
.cloud-row .lead {
  font-weight: 600;
  font-size: var(--t-body-sm);
}
.cloud-row .what {
  color: var(--muted);
  font-size: var(--t-body-sm);
  text-wrap: pretty;
}
.cloud-foot {
  display: flex;
  align-items: baseline;
  gap: var(--sp-1);
  flex-wrap: wrap;
  margin-top: var(--sp-4);
  font-size: var(--t-body-sm);
  color: var(--muted);
}
.cloud-block {
  margin-bottom: var(--sp-3);
}

/* Stores that could not be read, over the page the rest of them drew.
 *
 * Its own slot rather than a card appended to the content: the notice belongs
 * above what it qualifies, and a page whose results are short by a store has to
 * say so before the reader has finished reading them. Empty when nothing
 * failed, which is the normal state, so it collapses to nothing. */
.unreadable-slot:empty {
  display: none;
}

.notice.bad {
  border-color: var(--amber-ink);
  color: var(--ink-2);
}
.notice.bad .what {
  color: var(--amber-ink);
}

/* One store, with its path on the summary line and the SQLite chain behind the
 * disclosure. The error is the evidence a reader pastes into an issue; the
 * remedy above it is the sentence they act on. */
.unreadable > summary {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  cursor: pointer;
  min-width: 0;
}
.unreadable > summary::marker {
  color: var(--muted);
}
.unreadable > .subtitle {
  margin: var(--sp-1) 0 var(--sp-2) var(--sp-4);
}
.unreadable > pre.code {
  margin-left: var(--sp-4);
}

/* What a tab row reveals. The gap is the tab's own underline plus air, so the
 * content does not sit on the line that selects it. */
.tab-panel {
  margin-top: var(--sp-4);
  min-width: 0;
}
/* In a view the column's own gap is already the air under the tabs; the
 * margin on top of it doubled it. */
.view > .tabs + .tab-panel {
  margin-top: 0;
}

/* The Agents page's own cards, in pairs rather than as a column of full-width
 * bands. Equal height, because two cards side by side at two different heights
 * read as a layout that failed rather than as two things. */
/* Both rows of the Agents page on one column grid, so their cards line up
 * and collapse at the same width. The top row was auto-fit at 1fr/1fr and
 * went to one column near 600px; the bottom was 1fr/1.1fr and went at 900px,
 * so between the two the page had one row in columns and one not, and at
 * every width the two rows' middle edges were out of line. */
.grid.agent-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 899px) {
  .grid.agent-row {
    grid-template-columns: minmax(0, 1fr);
  }
}
.agent-extras {
  align-items: stretch;
}
.agent-extras > * {
  min-width: 0;
}

/* The command block fills the card rather than leaving a hand's width of empty
 * panel under it. The CLI card sits beside the schedules card, which is much
 * taller, and a stretched card with a short block in it read as unfinished. */
.report-cli-card .report-cli {
  flex: 1 1 auto;
}
.report-cli-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

/* The Privacy page's rule list, two abreast once there is room. Eight rules of
 * prose in a single narrow column is a page that scrolls for one card. */
.rules-card .rules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: var(--sp-4) var(--sp-5);
  align-items: start;
}
/* Every rule opens on its rule line: in a grid the first row holds two or
 * three rules, and only the first of them had one. */
.rules-card .rule-row:first-child {
  border-top: 1px solid var(--line);
  padding-top: var(--sp-3);
}

/* ------------------------------------------------------- inside the index
 *
 * The design's CORPUS page. It was the bottom half of the indexing page and is
 * its own page now, so these are the shapes that page needs and nothing else
 * reuses: a row of figures, a mix drawn as one bar and as a list, four
 * key/value panels, and three cards that state a fact rather than a metric.
 */

/* A row of figures that wraps, unlike `.cards`, which is the indexing page's
 * column of run cards. */
.stat-cards {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.stat-cards .stat {
  flex: 1 1 190px;
}

/* The whole mix as one bar, above the list that names its parts. The list
 * alone makes a reader add seven percentages up to see the shape; the bar
 * alone gives a shape with no numbers on it. */
.mix-bar {
  display: flex;
  gap: 2px;
  height: 10px;
  margin: var(--sp-3) 0;
  border-radius: 5px;
  overflow: hidden;
}
.mix-bar .seg {
  min-width: 2px;
  border-radius: 2px;
  transition: filter var(--d-quick) var(--e-in-out);
}
.mix-bar .seg:hover,
.mix-bar .seg:focus-visible {
  filter: brightness(1.15);
}

/* Six tones, in the order the design uses them, so the bar and the swatch
 * beside a language's name are the same colour. Sixth and beyond repeat,
 * which is what `tone-${i % 6}` in the page means: past six languages the
 * bar is a shape rather than a key. The colour is also a property, so a rule
 * more specific than these — a meter's fill, a legend dot — can still take it. */
.tone-0 {
  --tone: var(--accent);
}
.tone-1 {
  --tone: var(--blue);
}
.tone-2 {
  --tone: var(--green);
}
.tone-3 {
  --tone: var(--blue-ink);
}
.tone-4 {
  --tone: var(--amber-ink);
}
.tone-5 {
  --tone: var(--muted);
}
.tone-0,
.tone-1,
.tone-2,
.tone-3,
.tone-4,
.tone-5 {
  background: var(--tone);
}

.mix-row .swatch {
  flex: 0 0 9px;
  height: 9px;
  border-radius: 3px;
}
/* The corpus card's rows, as the design draws them: packed under the bar
 * rather than spread down the card, each meter filled in its language's
 * colour, the figures in fixed columns so they line up down the list. */
.mix-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.mix-card .card-head {
  flex-wrap: wrap;
  margin: 0;
}
.mix-card .mix-bar {
  margin: 0;
}
.mix-card .mix {
  flex: 0 0 auto;
  justify-content: flex-start;
  gap: 9px;
}
.mix-card .mix-row {
  gap: 10px;
  margin: 0 -6px;
  padding: 0 6px;
  border-radius: 5px;
}
.mix-card .mix-row .k {
  flex: 0 0 96px;
  font-size: var(--t-small-h);
  color: var(--ink);
}
.mix-card .mix-row .meter {
  min-width: 40px;
  background: var(--chip);
  border-radius: 3px;
}
.mix-card .mix-row .meter span {
  background: var(--tone, var(--blue-ink));
}
.mix-card .mix-row .v {
  flex: 0 0 74px;
  text-align: right;
  font-size: var(--t-small);
  color: var(--ink-2);
}
.mix-card .mix-row .pct {
  flex: 0 0 36px;
}
.mix-card .note {
  margin: 0;
}
/* Every property said here, because the bare `.pct` above is the Reports
 * page's big headline percentage — 21px and weight 500 — and a legend row that
 * inherited it drew `100%` larger than the language it belonged to. */
.mix-row .pct {
  flex: 0 0 2.5rem;
  text-align: right;
  font-family: var(--mono);
  font-size: var(--t-tiny);
  font-weight: 400;
  color: var(--muted);
}

/* The four small panels. A grid rather than a flex row, so a panel with five
 * rows and one with four still line up along their tops. */
.kv-panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  align-items: start;
}
.kv-panel h2 {
  font-size: var(--t-body);
  margin: 0 0 var(--sp-3);
}
/* Not `.kv`: that is the row every other page draws a label and value in,
 * and a column rule under the same name stacked the Agents page's setup steps
 * and centred them. */
.kv-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.kv-row {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
}
/* The label keeps its line and the value wraps under itself: `Longest file`
 * broken over two lines against a path on one read as two rows. */
.kv-row .k {
  flex: 0 0 auto;
  font-size: var(--t-body-sm);
  color: var(--muted);
  white-space: nowrap;
}
.kv-row .v {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
  font-family: var(--mono);
  font-size: var(--t-body-sm);
  color: var(--ink);
  text-align: right;
}

/* The three at the foot. A different shape from every other card on the page
 * on purpose: they are the page's argument rather than its measurements, and
 * the design draws them filled and borderless so they do not read as another
 * row of figures. */
.fact-cards {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.fact-card {
  flex: 1 1 250px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 15px 17px;
  border-radius: var(--r-4);
  background: var(--blue-soft);
}
.fact-card h2 {
  margin: 0;
  font-family: var(--mono);
  font-size: 17px;
  font-weight: 500;
  color: var(--blue-ink);
}
.fact-card p {
  margin: 0;
  font-size: var(--t-small);
  color: var(--ink-2);
}

/* The corpus page's own arrangement, from the v4 prototype.
 *
 * The mix on the left at the height of the four panels beside it, and those
 * four as a two-by-two. They were a full-width mix over a row of four, which
 * gives the mix a band to itself and squeezes each panel into a quarter of the
 * page — the two shapes the design does not have. */
.corpus-top {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
  align-items: start;
}
/* The four panels wrap two abreast in their half, one abreast once it is
 * narrower than two of them, and the two on a line share its height. */
.corpus-panels {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  min-width: 0;
}
.corpus-panels > .kv-panel {
  flex: 1 1 260px;
  min-width: 0;
}

/* Chunks added per month: twelve columns across the card, bottom-aligned, the
 * current month in the accent. */
.months-card .card-head {
  margin-bottom: var(--sp-4);
}
.month-chart {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 150px;
}
.month-col {
  display: flex;
  flex: 1 1 0;
  min-width: 6px;
  height: 100%;
  align-items: flex-end;
  border-radius: var(--r-2);
}
.month-col .col {
  display: block;
  width: 100%;
  background: var(--blue);
  border-radius: 4px 4px 2px 2px;
  transition: filter var(--d-quick) var(--e-in-out);
}
/* A month the corpus does not reach at all still draws its sliver, in the
 * track colour rather than in the series colour: an empty column and a column
 * of nothing are different statements and the chart has to make both. */
.month-col.none .col {
  background: var(--line-soft);
}
.month-col.now .col {
  background: var(--accent);
}
.month-col:hover .col,
.month-col:focus-visible .col {
  filter: brightness(1.08);
}
.month-col:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
.month-axis {
  display: flex;
  gap: 6px;
  margin-top: var(--sp-2);
}
.month-axis span {
  flex: 1 1 0;
  min-width: 6px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--muted);
}

/* Graph health, full width: the tier bar, its legend, and three columns. */
.health-card-full .card-head {
  margin-bottom: var(--sp-4);
}
.tier-bar {
  display: flex;
  gap: 2px;
  height: 12px;
  margin: var(--sp-2) 0 var(--sp-3);
  border-radius: 6px;
  overflow: hidden;
}
.tier-bar .seg {
  min-width: 2px;
  transition: filter var(--d-quick) var(--e-in-out);
}
.tier-bar .seg:hover,
.tier-bar .seg:focus-visible {
  filter: brightness(1.15);
}
.tier-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3h);
  font-family: var(--mono);
  font-size: var(--t-small);
  color: var(--ink-2);
}
.tier-key {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
/* A series' key: the rounded square the legends and the hover card draw.
 * Not `.dot`, which is the round status light every other page uses — a rule
 * under that name turned the Privacy page's green rule lights grey. */
.legend-dot {
  width: 9px;
  height: 9px;
  border-radius: 3px;
  flex: 0 0 auto;
  background: var(--tone, var(--muted));
}
.legend-dot.extracted,
.seg.extracted {
  background: var(--blue-ink);
}
.legend-dot.resolved,
.tier-bar .seg.resolved {
  background: var(--green);
}
.legend-dot.unresolved,
.tier-bar .seg.unresolved {
  background: var(--line);
}
.legend-dot.ambiguous,
.tier-bar .seg.ambiguous {
  background: var(--accent);
}
.legend-dot.blue {
  background: var(--blue);
}
.legend-dot.accent {
  background: var(--accent);
}

.health-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-4);
  align-items: start;
}
.health-col {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-width: 0;
}
.health-figure {
  font-family: var(--mono);
  font-size: 18px;
  color: var(--ink);
}
/* A name, not a control: the design draws these as flat chips and nothing
 * happens when one is pressed, so they are not buttons. */
.chip-flat {
  display: inline-flex;
  padding: 2px var(--sp-2);
  border-radius: var(--r-1);
  background: var(--chip);
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: var(--t-tiny);
  cursor: help;
}

/* The hover card the design draws: a title with the series' own colour, then
 * label and value rows, sized off the design's own tip. Every card in the
 * portal is this one; the plain string tip stays for everything that is one
 * sentence rather than a reading. */
.tip-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 128px;
}
.tip-head {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--ink);
}
.tip-head .legend-dot {
  width: 8px;
  height: 8px;
}
.tip-head .name {
  font-family: var(--mono);
  font-size: var(--t-small-h);
  font-weight: 500;
  overflow-wrap: anywhere;
}
.tip-rows {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.tip-row {
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  justify-content: space-between;
}
.tip-row .k {
  color: var(--muted);
  font-family: var(--sans);
  font-size: var(--t-tiny-h);
  /* One line. `chunks added` broken over two lines against a figure on the
   * first of them reads as two rows with one number between them. */
  white-space: nowrap;
}
.tip-row .v {
  min-width: 0;
  font-family: var(--mono);
  font-size: var(--t-tiny-h);
  color: var(--ink);
  text-align: right;
  /* A file path is the one value that can outrun the card. */
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}

/* 0.30.0: the Index page's scan panel and its bar, the decision dialog, the
   Files page's tree and Decisions tab, and the sidebar's count of files
   waiting for a decision. Every value is a token the rest of the page uses. */

/* The Index bar: the ways to choose what to read, then where it goes and
   the button that reads it, which stay together when the line wraps. */
.index-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-4);
}
.index-bar-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
}
.index-bar-group.end {
  margin-left: auto;
  flex-wrap: nowrap;
}
.index-bar .select {
  max-width: 18rem;
  padding-right: 34px;
}
.decisions .section-title {
  margin: var(--sp-2) 0 calc(-1 * var(--sp-2));
}
.index-note:empty {
  display: none;
}

/* The scan panel: the summary first, then what needs a person, then one
   line for what needs nothing. */
.scan-panel {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.scan-panel > .eyebrow {
  margin: var(--sp-2) 0 calc(-1 * var(--sp-2));
}
.scan-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--sp-3);
}
.scan-stat {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-3);
  background: var(--soft);
  min-width: 0;
}
.scan-stat strong {
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.scan-stat .meta {
  font-size: var(--t-small);
}
.scan-panel .table-card {
  box-shadow: none;
}
.scan-skipped {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-2h) var(--sp-4);
  border: 1px dashed var(--line);
  border-radius: var(--r-3);
}
.scan-panel > .note {
  margin: 0;
}
.decide {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-2);
}
td.decide-col {
  width: 1%;
  white-space: nowrap;
}
.w-scan-review .path,
.w-decisions .path {
  max-width: 34rem;
}

/* The decision dialog: the file, what was found in it, the choice. One font
   per role, so the findings read as a list and not as a paragraph. */
.dialog-path {
  display: block;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-2);
  background: var(--chip);
  font-family: var(--mono);
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--ink);
  overflow-wrap: anywhere;
  word-break: break-all;
}
.findings {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-2);
}
.findings li {
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-2);
  min-width: 0;
}
.finding-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-1) var(--sp-2);
  font-size: var(--t-body-sm);
  color: var(--ink-2);
}
.finding-value {
  font-family: var(--mono);
  font-size: var(--t-small);
  padding: 1px var(--sp-1);
  border-radius: var(--r-1);
  background: var(--chip);
  color: var(--ink);
}
.finding-conf {
  font-size: var(--t-body-sm);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.finding-signals {
  margin-top: var(--sp-1);
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.reviewed {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--t-body-sm);
  color: var(--ink);
  cursor: pointer;
}
.reviewed input {
  margin: 0;
}

/* The Files page's tree: one row per entry, like an editor's explorer. */
.ftree {
  padding: var(--sp-2) 0;
  font-size: var(--t-body-sm);
  overflow-x: auto;
}
.ftree ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ftree-row {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding-right: var(--sp-4);
  border-radius: var(--r-2);
  color: var(--ink);
  cursor: default;
  white-space: nowrap;
  min-width: max-content;
}
.ftree-row:hover {
  background: var(--soft);
}
.ftree-row.dir {
  cursor: pointer;
}
.ftree-row:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: -2px;
}
.ftree-row .indent {
  flex-shrink: 0;
  align-self: stretch;
  width: 16px;
  border-left: 1px solid var(--line-soft);
  margin-left: 7px;
}
.ftree-row .indent.lead {
  border-left: 0;
  margin-left: 0;
  width: 8px;
}
.ftree-row .chev {
  flex-shrink: 0;
  width: 16px;
  display: inline-flex;
  justify-content: center;
  color: var(--muted);
  transition: transform var(--d-fade) var(--e-in-out);
}
.ftree-row[aria-expanded="true"] .chev {
  transform: rotate(90deg);
}
.ftree-row .ficon {
  flex-shrink: 0;
  display: inline-flex;
  color: var(--muted);
}
.ftree-row.dir .ficon {
  color: var(--blue);
}
.ftree-row .fname {
  color: var(--ink);
}
.ftree-row.root .fname {
  font-weight: 600;
}
.ftree-row .fmeta {
  margin-left: var(--sp-3);
  font-family: var(--mono);
  font-size: var(--t-tiny);
  color: var(--muted);
}
.ftree-row.off .fname,
.ftree-row.off .ficon {
  color: var(--muted);
}
.ftree-row.off .fname {
  text-decoration: line-through;
  text-decoration-color: var(--line);
}
.ftree-row.stale .fmeta::after {
  content: " · changed since indexed";
  color: var(--amber-ink);
}
.ftree .ft-rust { color: #c9713a; }
.ftree .ft-js,
.ftree .ft-ts { color: #b8912a; }
.ftree .ft-py { color: #3f79b0; }
.ftree .ft-md { color: var(--blue); }
.ftree .ft-data { color: var(--green); }
.ftree .ft-web { color: #c0572b; }
.ftree .ft-image { color: #8a5bb0; }
.ftree-more {
  padding: var(--sp-1) 0 var(--sp-1) 40px;
  font-size: var(--t-small);
  color: var(--muted);
}

/* The Files page's filter rows: the path box and types on one line, the
   stores on the next, each led by what it filters. */
.files-filters {
  display: grid;
  gap: var(--sp-3);
}
/* A Files tab's blocks: the filters, the table, the footnote under it. */
.rows.files-pane {
  gap: var(--sp-4);
}
.rows.files-pane > .subtitle {
  margin: 0;
}
.files-filters .filters {
  row-gap: var(--sp-2);
}
.filter-label {
  min-width: 3.5rem;
  font-size: var(--t-tiny);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.files-filters .store-chips {
  flex-wrap: wrap;
}
.pill.class-credential {
  background: var(--red-soft);
  color: var(--red-ink);
}
.pill.class-content {
  background: var(--amber-soft);
  color: var(--amber-ink);
}

/* On a phone the Index bar's right-hand group is wider than the screen, so
   it wraps under the choosers instead of holding one line. */
@media (max-width: 599px) {
  .index-bar-group.end {
    flex-wrap: wrap;
    margin-left: 0;
  }
  .index-bar .select {
    max-width: 100%;
  }
}