/* Filz, the Rohrpost visual system (docs/DESIGN.md; catalogue in docs/systems/design-system.md).

   One file, no build step, served through crunch at a content-hashed URL. Font URLs below are
   rewritten to hashed paths when the server starts.

   Cascade layers, lowest priority first:
     tokens      custom properties only: colour, type, spacing, shape. The only place a colour
                 value appears, so a day theme is a token swap.
     base        element defaults (body, links, focus, kbd, code)
     layout      page frame: navigation column, main column, grids, split views
     components  one block per tyxml component in lib/ui (class names match the module)
     utilities   single-purpose helpers (.vh, .tabular)

   Naming: flat component classes (.row, .chip), modifiers with -- (.chip--rule, .btn--primary),
   JS/keyboard state with is-* (.is-selected). State that ARIA can express uses ARIA instead
   (aria-current, aria-pressed, aria-invalid). Components use tokens, never raw values. */

@layer tokens, base, layout, components, utilities;

@font-face { font-family: 'Spectral'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/assets/fonts/spectral-latin-400-normal.cf8daee3b8.woff2) format('woff2'); }
@font-face { font-family: 'Spectral'; font-style: italic; font-weight: 400; font-display: swap;
  src: url(/assets/fonts/spectral-latin-400-italic.db397149a9.woff2) format('woff2'); }
@font-face { font-family: 'Spectral'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/assets/fonts/spectral-latin-500-normal.2b70215ed4.woff2) format('woff2'); }
@font-face { font-family: 'Spectral'; font-style: italic; font-weight: 500; font-display: swap;
  src: url(/assets/fonts/spectral-latin-500-italic.54be969918.woff2) format('woff2'); }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/assets/fonts/hanken-grotesk-latin-400-normal.787b3fdd0b.woff2) format('woff2'); }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/assets/fonts/hanken-grotesk-latin-500-normal.31f666af7b.woff2) format('woff2'); }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/assets/fonts/hanken-grotesk-latin-600-normal.58f23b7ae3.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/assets/fonts/ibm-plex-mono-latin-400-normal.08949f728d.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/assets/fonts/ibm-plex-mono-latin-500-normal.01d2854474.woff2) format('woff2'); }

@layer tokens {
  :root {
    /* Colour (DESIGN.md "Colour"). Contrast of every text/background pair the components use
       is checked by test/test_contrast.ml. */
    --felt: #1E3A2D;
    --felt-deep: #183024;
    --felt-code: #152A20;
    --felt-raised: #26463A;
    --rule: #35574A;
    --rule-strong: #4A6B55;
    --rule-soft: #2B4B3D;
    --bone: #EDE6D6;
    --sage: #A9B5A6;
    --read: #93A597;
    --read-ring: #6E8C7D;
    --brass: #D2AE5E;
    --brass-dim: #8C7443;
    --moss: #B9D3A8;
    --scrim: rgb(21 42 32 / 0.82);

    /* Faces */
    --serif: 'Spectral', Georgia, serif;
    --sans: 'Hanken Grotesk', system-ui, sans-serif;
    --mono: 'IBM Plex Mono', ui-monospace, monospace;

    /* Type scale (DESIGN.md "Type") */
    --fs-display: 44px;
    --fs-display-m: 34px;
    --fs-article: 46px;
    --fs-article-m: 32px;
    --fs-wordmark: 28px;
    --fs-wordmark-m: 22px;
    --fs-panel: 22px;
    --fs-section: 20px;
    --fs-section-m: 19px;
    --fs-body: 19px;
    --fs-body-m: 18px;
    --fs-row-m: 16px;
    --fs-row: 15px;
    --fs-ui: 14px;
    --fs-ui-s: 13px;
    --fs-meta: 12px;
    --fs-kbd: 11px;
    --fs-metric: 32px;
    --fs-query: 14px;
    --lh-ui: 1.45;
    --lh-body: 1.65;
    --lh-body-m: 1.6;
    --lh-row-m: 1.3;
    --lh-query: 1.75;

    /* Spacing and shape (DESIGN.md "Spacing and shape") */
    --nav-w: 216px;
    --nav-pad: 16px;
    --nav-item-h: 36px;
    --page-pad-top: 36px;
    --page-pad-x: 48px;
    --page-pad-m: 20px;
    --page-max: 1344px;
    --grid-col-gap: 44px;
    --grid-row-gap: 32px;
    --stack-gap: 28px;
    --row-h: 25px;
    --row-gap: 3px;
    --row-inner-gap: 10px;
    --row-bleed: 8px;
    --row-h-m: 56px;
    --age-w: 26px;
    --source-max: 30%;
    --source-col: 200px;
    --marker: 6px;
    --marker-m: 7px;
    --star: 10px;
    --bar-h: 2px;
    --chart-h: 120px;
    --r-row: 3px;
    --r-kbd: 3px;
    --r-btn: 4px;
    --r-panel: 4px;
    --r-chip: 12px;
    --r-pill-m: 16px;
    --btn-h: 36px;
    --btn-h-toolbar: 34px;
    --btn-h-m: 44px;
    --seg-h: 30px;
    --seg-inset: 2px;
    --chip-h: 24px;
    --target-m: 44px;
    --measure: 660px;
    --form-w: 420px;
    --narrow-w: 520px;
    --aside-w: 360px;
    --why-w: 368px;
    --topbar-h: 64px;
    --focus-w: 2px;
    --focus-offset: 2px;
    --toast-delay: 4s;
    --toast-fade: 0.4s;

    color-scheme: dark;
  }
}

@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  html { background: var(--felt); color: var(--bone); }
  body { margin: 0; min-height: 100vh; font: var(--fs-ui) / var(--lh-ui) var(--sans);
    background: var(--felt); color: var(--bone); }
  a { color: inherit; }
  a:hover { color: var(--brass); }
  :focus-visible { outline: var(--focus-w) solid var(--brass); outline-offset: var(--focus-offset); }
  h1, h2, h3, h4, h5, h6, p, figure, dl, dd, blockquote { margin: 0; }
  h1, h2, h3, h4, h5, h6 { font-weight: 400; }
  kbd { font: inherit; }
  code, pre { font-family: var(--mono); }
  button, input, select, textarea { font: inherit; color: inherit; }
  [hidden] { display: none !important; }
  ::selection { background: var(--felt-raised); color: var(--bone); }
}

@layer layout {
  /* Sections grid: 3 columns from 1200px, 2 from 800px, 1 below. */
  .sections { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--grid-col-gap); row-gap: var(--grid-row-gap); }
  @media (max-width: 1200px) { .sections { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 800px) { .sections { grid-template-columns: minmax(0, 1fr); row-gap: 18px; } }

  /* Page frame: navigation column and main column (Layout.page). */
  .frame { display: grid; grid-template-columns: var(--nav-w) minmax(0, 1fr); min-height: 100vh;
    background: var(--felt-deep); }
  .frame > .nav { position: sticky; top: 0; height: 100vh; overflow-y: auto; }
  .main { display: flex; flex-direction: column; gap: var(--stack-gap); min-width: 0;
    padding: var(--page-pad-top) var(--page-pad-x) 64px; background: var(--felt); border-left: 1px solid var(--rule); }
  .main > * { max-width: var(--page-max); }
  .frame--solo { display: block; background: var(--felt); }
  .frame--solo .main { max-width: var(--narrow-w); margin: 8vh auto 0; padding-inline: var(--page-pad-m);
    border-left: 0; }
  .stack { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
  .split { display: flex; align-items: flex-start; gap: var(--page-pad-x); }
  .split > :first-child { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 32px; }
  .split-aside { flex: none; width: var(--aside-w); display: flex; flex-direction: column; gap: var(--stack-gap); }
  @media (max-width: 1200px) {
    .split { flex-direction: column; }
    .split > :first-child, .split-aside { width: 100%; flex: none; }
  }

  @media (max-width: 800px) {
    /* The header row keeps its height on short pages; the main column takes the rest. */
    .frame { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
    .frame > .nav { position: static; height: auto; overflow: visible; }
    .main { padding: 24px var(--page-pad-m) 48px; gap: 22px; border-left: 0; }
  }
}

@layer components {
  /* Icon (lib/ui/icon.ml) */
  .icon { flex: none; display: inline-block; vertical-align: middle; }

  /* Kbd */
  .kbd { display: inline-block; min-width: 1.7em; padding: 0 5px; font: var(--fs-kbd) / 16px var(--sans);
    text-align: center; color: var(--bone); border: 1px solid var(--rule-strong); border-radius: var(--r-kbd); }
  .kbds { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
  .kbd-sep { color: var(--sage); font-size: var(--fs-meta); }

  /* Button: .btn--primary (at most one per view), --secondary, --quiet; --toolbar, --icon */
  .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: var(--btn-h); padding: 0 14px; border: 1px solid transparent; border-radius: var(--r-btn);
    background: transparent; color: var(--bone); font: 400 var(--fs-ui-s) / 1 var(--sans);
    white-space: nowrap; text-decoration: none; cursor: pointer; }
  .btn--primary { background: var(--brass); border-color: var(--brass); color: var(--felt); font-weight: 600; }
  .btn--primary:hover { color: var(--felt); filter: brightness(1.06); }
  .btn--secondary { border-color: var(--rule-strong); }
  .btn--secondary:hover { color: var(--bone); background: var(--felt-raised); }
  .btn--quiet { color: var(--sage); }
  .btn--quiet:hover, .btn--quiet[aria-pressed=true] { color: var(--bone); }
  .btn--quiet[aria-pressed=true] { background: var(--felt-raised); }
  .btn--toolbar { height: var(--btn-h-toolbar); padding: 0 12px; }
  .btn--icon { width: var(--btn-h); padding: 0; }
  .btn--icon.btn--toolbar { width: var(--btn-h-toolbar); }
  .btn .kbd { font-weight: 400; }
  .btn:disabled, .btn--primary:disabled { background: transparent; color: var(--sage);
    border-color: var(--rule-strong); cursor: default; filter: none; }

  /* Segmented control */
  .segmented { display: inline-flex; padding: var(--seg-inset); border: 1px solid var(--rule-strong);
    border-radius: var(--r-btn); }
  .seg { display: inline-flex; align-items: center; height: var(--seg-h); padding: 0 12px; border: 0;
    border-radius: var(--r-row); background: transparent; color: var(--sage);
    font: var(--fs-ui-s) / 1 var(--sans); text-decoration: none; cursor: pointer; white-space: nowrap; }
  .seg:hover { color: var(--bone); }
  .seg[aria-pressed=true], .seg[aria-current] { background: var(--felt-raised); color: var(--bone); }

  /* Menu (RF): an icon button (<summary>) that opens a small list below it, right-aligned.
     Phones use it where a segmented control doesn't fit (lib/ui/menu.ml). */
  .menu { position: relative; flex: none; }
  .menu-button { display: inline-flex; align-items: center; justify-content: center;
    width: var(--btn-h); height: var(--btn-h); border: 1px solid var(--rule-strong); border-radius: var(--r-btn);
    color: var(--bone); list-style: none; cursor: pointer; }
  .menu-button::-webkit-details-marker { display: none; }
  .menu-button:hover, .menu[open] > .menu-button { background: var(--felt-raised); }
  .menu-list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 7; min-width: 200px;
    list-style: none; margin: 0; padding: 6px; display: flex; flex-direction: column;
    background: var(--felt-deep); border: 1px solid var(--rule-strong); border-radius: var(--r-panel); }
  .menu-item { display: flex; align-items: center; justify-content: space-between; gap: 12px;
    min-height: var(--btn-h); padding: 0 12px; border-radius: var(--r-row); color: var(--bone);
    font: var(--fs-ui) / 1.2 var(--sans); text-decoration: none; }
  .menu-item:hover { color: var(--bone); background: var(--felt-raised); }
  .menu-item[aria-current] .icon { color: var(--brass); }
  .menu-sep { height: 1px; margin: 6px 0; background: var(--rule); }
  .menu-extra .form--inline, .menu-extra .btn { width: 100%; }
  .menu-extra .btn { justify-content: flex-start; padding: 0 12px; font-size: var(--fs-ui); }

  /* Tag chip: provenance dot, feed = sage ring, rule = brass ring, manual = solid bone */
  .chip { display: inline-flex; align-items: center; gap: 6px; height: var(--chip-h); padding: 0 9px;
    border: 1px solid var(--rule-strong); border-radius: var(--r-chip); color: var(--bone);
    font: var(--fs-ui-s) / 1 var(--sans); text-decoration: none; white-space: nowrap; }
  a.chip:hover { color: var(--bone); border-color: var(--sage); }
  .chip-dot { flex: none; width: var(--marker); height: var(--marker); border-radius: 50%;
    border: 1px solid var(--sage); }
  .chip--rule .chip-dot { border-color: var(--brass); }
  .chip--manual .chip-dot { border-color: var(--bone); background: var(--bone); }
  .chip-count { color: var(--sage); font-variant-numeric: tabular-nums; margin-left: 2px; }
  .chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

  /* Item row: marker, title, source, age. One line on desktop. */
  .rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column;
    gap: var(--row-gap); min-width: 0; }
  .rows > li { min-width: 0; }
  .row { display: flex; align-items: center; gap: var(--row-inner-gap); height: var(--row-h);
    padding: 0 var(--row-bleed); margin: 0 calc(-1 * var(--row-bleed)); min-width: 0;
    border-radius: var(--r-row); color: var(--bone); text-decoration: none; }
  .row:hover { color: var(--bone); }
  .row:hover .row-title { text-decoration: underline; text-decoration-color: var(--rule-strong);
    text-underline-offset: 3px; }
  .row.is-selected { background: var(--felt-raised); }
  .row-marker { flex: none; position: relative; box-sizing: border-box; width: var(--marker);
    height: var(--marker); margin: 0 2px; border-radius: 50%; }
  .marker--dot { background: var(--brass); border: 1px solid var(--brass); }
  .marker--ring { background: transparent; border: 1px solid var(--read-ring); }
  .marker--star { width: var(--star); height: var(--star); margin: 0; border-radius: 0; color: var(--brass);
    display: inline-flex; }
  .marker--star .icon { width: var(--star); height: var(--star); }
  .row-title { flex: 1 1 0; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
    font: 400 var(--fs-row) / 1.3 var(--serif); }
  .row.is-read .row-title { color: var(--read); }
  .row.is-read.is-selected .row-title { color: var(--sage); }
  .row-summary { display: none; }
  .row-meta { display: contents; }
  .row-source { flex: 0 0 auto; max-width: var(--source-max); overflow: hidden; white-space: nowrap;
    text-overflow: ellipsis; }
  .row-source, .row-status, .row-age { font: var(--fs-meta) / 1.3 var(--sans); color: var(--sage); }
  .row-status { flex: none; }
  .row-age { flex: none; width: var(--age-w); text-align: right; font-variant-numeric: tabular-nums;
    white-space: nowrap; }
  .row-status + .row-age { width: calc(var(--age-w) + 18px); }

  /* Two-line rows: phones, and lists that ask for it (.rows--two-line). */
  .rows--two-line { gap: 0; }
  .rows--two-line .row { display: grid; grid-template-columns: var(--marker-m) minmax(0, 1fr);
    column-gap: 12px; row-gap: 2px; align-items: start; height: auto; min-height: var(--row-h-m);
    padding: 9px 0; margin: 0; border-radius: 0; border-bottom: 1px solid var(--rule-soft); }
  .rows--two-line .row.is-selected { padding-inline: var(--row-bleed); margin-inline: calc(-1 * var(--row-bleed));
    border-radius: var(--r-row); }
  .rows--two-line .row-marker { grid-row: 1 / span 3; margin: 8px 0 0; width: var(--marker-m); height: var(--marker-m); }
  .rows--two-line .marker--star { width: var(--star); height: var(--star); margin: 5px 0 0 -1px; }
  .rows--two-line .row-title { grid-column: 2; white-space: normal; display: -webkit-box;
    -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
    font-size: var(--fs-row-m); line-height: var(--lh-row-m); }
  .rows--two-line .row-summary { grid-column: 2; display: -webkit-box; -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere;
    font: var(--fs-ui-s) / 1.4 var(--sans); color: var(--sage); }
  .rows--two-line .row-meta { grid-column: 2; display: flex; gap: 10px; min-width: 0; }
  .rows--two-line .row-source { max-width: 70%; }
  .rows--two-line .row-age, .rows--two-line .row-status + .row-age { width: auto; text-align: left; }

  /* Expanded rows (RF): the one-line row's title, source and age, with the summary beneath
     the title in the title's column (a fixed source column keeps that width the same on
     every row), at most two lines. The summary was trimmed at a word boundary with "…"
     by the server; the clamp ends a narrower second line with an ellipsis. */
  .rows--expanded { gap: 0; }
  .rows--expanded .row { display: grid; align-items: center; height: auto; row-gap: 3px;
    grid-template-columns: var(--marker) minmax(0, 1fr) min(var(--source-col), var(--source-max)) var(--age-w);
    padding: 10px 0; margin: 0; border-radius: 0; border-bottom: 1px solid var(--rule-soft); }
  .rows--expanded .row.is-selected { padding-inline: var(--row-bleed); margin-inline: calc(-1 * var(--row-bleed));
    border-radius: var(--r-row); }
  .rows--expanded .row-marker { grid-column: 1; grid-row: 1; margin: 0; }
  .rows--expanded .marker--star { margin-left: -2px; }
  .rows--expanded .row-title { grid-column: 2; grid-row: 1; }
  .rows--expanded .row-summary { grid-column: 2; grid-row: 2; display: -webkit-box; -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere;
    font: var(--fs-ui-s) / 1.45 var(--sans); color: var(--sage); }
  .rows--expanded .row-source { grid-column: 3; grid-row: 1; max-width: none; justify-self: end; }
  .rows--expanded .row-age { grid-column: 4; grid-row: 1; }

  /* Below 800px every row list is two-line: the rules above with .rows (keep in sync). */
  @media (max-width: 800px) {
    .rows { gap: 0; }
    .rows .row { display: grid; grid-template-columns: var(--marker-m) minmax(0, 1fr);
      column-gap: 12px; row-gap: 2px; align-items: start; height: auto; min-height: var(--row-h-m);
      padding: 9px 0; margin: 0; border-radius: 0; border-bottom: 1px solid var(--rule-soft); }
    .rows .row.is-selected { padding-inline: var(--row-bleed); margin-inline: calc(-1 * var(--row-bleed));
      border-radius: var(--r-row); }
    .rows .row-marker { grid-row: 1 / span 3; margin: 8px 0 0; width: var(--marker-m); height: var(--marker-m); }
    .rows .marker--star { width: var(--star); height: var(--star); margin: 5px 0 0 -1px; }
    .rows .row-title { grid-column: 2; white-space: normal; display: -webkit-box;
      -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
      font-size: var(--fs-row-m); line-height: var(--lh-row-m); }
    .rows .row-summary { grid-column: 2; display: -webkit-box; -webkit-box-orient: vertical;
      -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere;
      font: var(--fs-ui-s) / 1.4 var(--sans); color: var(--sage); }
    .rows .row-meta { grid-column: 2; display: flex; gap: 10px; min-width: 0; }
    .rows .row-source { max-width: 70%; }
    .rows .row-age, .rows .row-status + .row-age { width: auto; text-align: left; }
  }

  /* Section: brass italic name, count, 2px load bar, rows, "N more". */
  .section { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
  .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
  .section-name { font: italic 400 var(--fs-section) / normal var(--serif); color: var(--brass); }
  .section-count { font: var(--fs-meta) var(--sans); color: var(--sage); font-variant-numeric: tabular-nums;
    white-space: nowrap; }
  .load { display: block; width: 100%; height: var(--bar-h); margin-top: -2px; }
  .load-track { fill: var(--rule); }
  .load-fill { fill: var(--brass-dim); }
  .section-more { align-self: flex-start; padding-left: calc(var(--marker) + 4px + var(--row-inner-gap));
    font: var(--fs-ui-s) var(--sans); color: var(--brass); text-decoration: none; }
  .section-more:hover { color: var(--brass); text-decoration: underline; }

  /* Nav: felt-deep panel, wordmark, groups, account footer, key hints at the bottom. */
  .nav { display: flex; flex-direction: column; gap: var(--stack-gap); padding: var(--page-pad-top) var(--nav-pad) 28px;
    background: var(--felt-deep); font: var(--fs-ui) / var(--lh-ui) var(--sans); }
  .wordmark { padding-left: 12px; font: italic 400 var(--fs-wordmark) / normal var(--serif); color: var(--brass);
    text-decoration: none; }
  .wordmark:hover { color: var(--brass); }
  .frame--solo .wordmark { padding-left: 0; }
  .nav-groups { display: flex; flex-direction: column; gap: var(--stack-gap); }
  .nav-group { display: flex; flex-direction: column; gap: 2px; }
  .nav-label { padding: 0 12px 6px; font: 400 var(--fs-meta) / 1.3 var(--sans); color: var(--sage); }
  .nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
  .nav-item { display: flex; align-items: center; justify-content: space-between; gap: 8px;
    min-height: var(--nav-item-h); padding: 0 12px; border-radius: var(--r-row); color: var(--sage);
    text-decoration: none; }
  .nav-item:hover { color: var(--bone); }
  .nav-item[aria-current] { background: var(--felt-raised); color: var(--bone); }
  .nav-count { font-size: var(--fs-meta); font-variant-numeric: tabular-nums; }
  .nav-foot { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 0 12px;
    font-size: var(--fs-meta); color: var(--sage); }
  .nav-foot .btn { height: auto; padding: 0; border: 0; }
  .nav-foot-link { color: var(--sage); text-decoration: none; }
  .nav-foot-link:hover { color: var(--bone); }
  .nav-keys { margin: auto 0 0; padding: 0 12px; display: grid; grid-template-columns: 52px 1fr;
    row-gap: 8px; align-items: center; font-size: var(--fs-meta); color: var(--sage); }
  .nav-keys dd { margin: 0; }

  /* Page header: title in display type, summary or meta row, rule-strong underline, actions. */
  .page-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px;
    padding-bottom: 20px; border-bottom: 1px solid var(--rule-strong); }
  .page-header-text { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
  .display { margin: 0; font: 400 var(--fs-display) / 1 var(--serif); color: var(--bone); overflow-wrap: anywhere; }
  .page-summary { font: var(--fs-ui) / var(--lh-ui) var(--sans); color: var(--sage); }
  .page-eyebrow { font: var(--fs-ui-s) var(--sans); color: var(--sage); }
  .page-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font: var(--fs-ui-s) var(--sans);
    color: var(--sage); }
  .page-meta .quiet-link { color: var(--sage); text-decoration-color: var(--rule-strong); }
  .page-meta .quiet-link:hover { color: var(--bone); }
  .page-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 12px; }

  /* Breadcrumb: lens / section / position */
  .breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px;
    font: var(--fs-ui-s) var(--sans); color: var(--sage); }
  .breadcrumb li + li::before { content: "/" / ""; margin-right: 10px; }
  .breadcrumb a { color: var(--sage); text-decoration: none; }
  .breadcrumb a:hover { color: var(--bone); }
  .breadcrumb [aria-current] { color: var(--bone); }

  /* Panel, facts, card */
  .panel { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; border-radius: var(--r-panel);
    font-size: var(--fs-ui-s); min-width: 0; }
  .panel--deep { background: var(--felt-deep); }
  .panel--bordered { border: 1px solid var(--rule); }
  .panel--plain { padding: 0; gap: 14px; }
  .panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
  .panel-heading { font: italic 400 var(--fs-section) / normal var(--serif); color: var(--brass); }
  .panel-aside { font-size: var(--fs-meta); color: var(--sage); }
  .panel p { color: var(--sage); line-height: 1.5; }
  .facts { display: flex; flex-direction: column; gap: 8px; }
  .facts > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
  .facts dt { color: var(--sage); }
  .facts dd { margin: 0; min-width: 0; text-align: right; overflow-wrap: anywhere; }
  .facts dd:has(> code) { text-align: left; }
  .panel-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
  .panel-links li { display: flex; flex-direction: column; gap: 2px; }
  .panel-links a { font: 400 var(--fs-row) / 1.3 var(--serif); text-decoration: none; }
  .panel-links a:hover { text-decoration: underline; text-decoration-color: var(--rule-strong); }
  .panel-links span { font-size: var(--fs-meta); color: var(--sage); }
  .card { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border: 1px solid var(--rule);
    border-radius: var(--r-panel); font-size: var(--fs-ui-s); }
  .card-head { display: flex; justify-content: space-between; gap: 12px; }
  .card-title { font-weight: 500; }
  .card-aside, .card-line { color: var(--sage); }
  .card-aside.is-active { color: var(--brass); }

  /* Toast: informational, fades on its own. */
  .toast { position: fixed; left: 50%; bottom: 24px; z-index: 10; transform: translateX(-50%);
    display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--felt-deep);
    border: 1px solid var(--rule-strong); border-radius: var(--r-panel); color: var(--bone);
    font: var(--fs-ui-s) var(--sans); animation: toast-out var(--toast-fade) ease-in var(--toast-delay) forwards; }
  .toast .icon { color: var(--brass); }
  .toast--inline { position: static; transform: none; align-self: flex-start; animation: none; }
  @keyframes toast-out { to { opacity: 0; visibility: hidden; } }

  /* Empty state: what to do next, no celebration. */
  .empty { display: flex; flex-direction: column; gap: 10px; padding: 24px 0; max-width: var(--narrow-w); }
  .empty-title { font: 400 var(--fs-panel) / 1.2 var(--serif); color: var(--bone); }
  .empty-body { color: var(--sage); line-height: 1.5; }
  .empty-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }

  /* Error page: status in sage, one display line, one sentence, plain next steps. Calm:
     no red, no icon. */
  .error-page { display: flex; flex-direction: column; gap: 14px; max-width: var(--narrow-w);
    padding-top: 8vh; }
  .error-status { font: 400 var(--fs-meta) var(--sans); color: var(--sage); font-variant-numeric: tabular-nums; }
  .error-message { font: 400 var(--fs-ui) / var(--lh-ui) var(--sans); color: var(--bone); }
  .error-ref { font: 400 var(--fs-ui-s) / var(--lh-ui) var(--sans); color: var(--sage); }
  .error-ref code { font: 400 var(--fs-ui-s) var(--mono); color: var(--bone); }
  .error-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
  .frame--solo .error-page { padding-top: 32px; }

  /* Notice */
  .notice { padding: 12px 14px; background: var(--felt-deep); border: 1px solid var(--rule);
    border-radius: var(--r-panel); line-height: 1.5; }
  .notice--error { border-left: 3px solid var(--brass); }
  .notice p + p { margin-top: 6px; }
  .notice code { font-size: var(--fs-ui-s); word-break: break-all; }

  /* Table */
  .table-wrap { overflow-x: auto; min-width: 0; }
  .table { width: 100%; border-collapse: collapse; font-size: var(--fs-ui-s); }
  .table th { padding: 6px 12px 6px 0; border-bottom: 1px solid var(--rule); text-align: left;
    font: 400 var(--fs-meta) var(--sans); color: var(--sage); white-space: nowrap; }
  .table td { padding: 8px 12px 8px 0; border-bottom: 1px solid var(--rule); vertical-align: middle; }
  .table .cell-title { font: 400 var(--fs-row) / 1.3 var(--serif); }
  .table .cell-title a { text-decoration: none; }
  .table .cell-meta { color: var(--sage); font-size: var(--fs-meta); font-variant-numeric: tabular-nums; }
  .table .cell-actions { text-align: right; white-space: nowrap; }
  .table .cell-actions .btn { height: 28px; padding: 0 8px; }
  .table .cell-sub { margin-top: 2px; font: var(--fs-meta) var(--sans); color: var(--sage); overflow-wrap: anywhere; }
  .table .cell-hint { display: inline-block; margin-top: 4px; font: var(--fs-meta) var(--sans); color: var(--brass);
    text-decoration: none; }
  .table .cell-hint:hover { text-decoration: underline; }
  .table .cell-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }

  /* Form */
  .form { display: flex; flex-direction: column; gap: 18px; max-width: var(--form-w); margin: 0; }
  .form--inline { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
  .field { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
  .field-label { padding: 0; font: 400 var(--fs-ui-s) / 1.3 var(--sans); color: var(--sage); }
  .input { width: 100%; height: var(--btn-h); padding: 0 10px; background: var(--felt-deep); color: var(--bone);
    border: 1px solid var(--rule-strong); border-radius: var(--r-btn); font: var(--fs-ui) var(--sans); }
  .input::placeholder { color: var(--sage); opacity: 1; }
  .input:hover { border-color: var(--sage); }
  .input--area { height: auto; min-height: 8em; padding: 8px 10px; line-height: 1.5; resize: vertical; }
  .input--mono { font: var(--fs-query) / var(--lh-query) var(--mono); background: var(--felt-code); }
  .input--bare { width: auto; height: 30px; padding: 0 8px; font-size: var(--fs-ui-s); }
  .input--file { height: auto; padding: 5px; }
  .input--file::file-selector-button { height: 28px; margin-right: 10px; padding: 0 12px; background: transparent;
    color: var(--bone); border: 1px solid var(--rule-strong); border-radius: var(--r-btn); font: var(--fs-ui-s) var(--sans);
    cursor: pointer; }
  .field.is-invalid .input { border-color: var(--brass); }
  .field-hint { font-size: var(--fs-meta); color: var(--sage); }
  .field-error { font-size: var(--fs-ui-s); color: var(--brass); }
  .check { display: flex; align-items: center; gap: 8px; min-height: 28px; color: var(--bone); font-size: var(--fs-ui); }
  .check input { width: 16px; height: 16px; margin: 0; accent-color: var(--brass); }
  .check-hint { flex-basis: 100%; padding-left: 24px; font-size: var(--fs-meta); color: var(--sage); }
  .check:has(.check-hint) { flex-wrap: wrap; row-gap: 2px; }
  .input--select { padding-right: 8px; }
  .choices { gap: 4px; }
  .form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-top: 4px; }

  /* Copy field: a value to copy (inbound address) and its Copy button. */
  .copy-field { display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; }
  .copy-value { flex: 0 1 auto; min-width: 0; min-height: var(--btn-h); display: flex; align-items: center;
    padding: 4px 10px; background: var(--felt-deep); color: var(--bone); border: 1px solid var(--rule-strong);
    border-radius: var(--r-btn); font: var(--fs-ui-s) / 1.4 var(--mono); white-space: nowrap; user-select: all; }
  .copy-field-button { flex: none; }

  /* Metric strip: cells separated by 1px rule lines. */
  .metrics { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 1px; margin: 0;
    background: var(--rule); border: 1px solid var(--rule); border-radius: var(--r-panel); overflow: hidden; }
  .metric { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 6px;
    padding: 18px 20px; background: var(--felt); min-width: 0; }
  .metric-value { margin: 0; font: 400 var(--fs-metric) / 1 var(--serif); color: var(--bone); white-space: nowrap; }
  .metric-value.is-missing { color: var(--sage); }
  .metric-label { font: var(--fs-ui-s) var(--sans); color: var(--sage); }

  /* Bar chart: brass-dim bars, the current one brass, rule-strong baseline. */
  .chart { display: flex; flex-direction: column; gap: 10px; margin: 0; }
  .chart-bars { display: block; width: 100%; height: var(--chart-h); border-bottom: 1px solid var(--rule-strong); }
  .bar { fill: var(--brass-dim); }
  .bar.is-current { fill: var(--brass); }
  .chart-axis { display: flex; justify-content: space-between; gap: 8px; font: var(--fs-meta) var(--sans);
    color: var(--sage); }

  /* Query code: Plex Mono on felt-code; keywords sage, tags brass, literals moss. */
  .query { margin: 0; padding: 20px 22px; overflow-x: auto; background: var(--felt-code);
    border: 1px solid var(--rule); border-radius: var(--r-panel); color: var(--bone);
    font: var(--fs-query) / var(--lh-query) var(--mono); white-space: pre; }
  .query code, .query-inline { font: inherit; }
  .query-inline { font: var(--fs-query) / var(--lh-query) var(--mono); color: var(--bone); }
  .q-kw { color: var(--sage); }
  .q-tag { color: var(--brass); }
  .q-lit { color: var(--moss); }

  /* Article: reading column with the sanitised body in .prose. */
  .article { display: flex; flex-direction: column; gap: var(--stack-gap); width: 100%; max-width: var(--measure);
    margin-inline: auto; }
  .article-header { display: flex; flex-direction: column; gap: 16px; }
  .article-title { font: 400 var(--fs-article) / 1.1 var(--serif); color: var(--bone); overflow-wrap: anywhere; }
  .article-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font: var(--fs-ui-s) var(--sans); color: var(--sage); }
  .article-feed { color: var(--brass); text-decoration: none; }
  .article-feed:hover { color: var(--brass); text-decoration: underline; }
  .prose { font: 400 var(--fs-body) / var(--lh-body) var(--serif); color: var(--bone); overflow-wrap: break-word; }
  .prose :where(p, ul, ol, dl, blockquote, pre, figure, table, details, h3, h4, h5, h6, hr, div) { margin: 0 0 22px; }
  .prose :where(div, li, blockquote, details) > :last-child, .prose > :last-child { margin-bottom: 0; }
  .prose > :first-child { margin-top: 0; }
  .prose :where(h3, h4, h5, h6) { margin-top: 36px; font-family: var(--serif); line-height: 1.25; }
  .prose h3 { font-size: 28px; }
  .prose h4 { font-size: 23px; }
  .prose h5 { font-size: var(--fs-body); font-weight: 500; }
  .prose h6 { font-size: var(--fs-body); font-style: italic; }
  .prose a { color: var(--bone); text-decoration: underline; text-decoration-color: var(--rule-strong);
    text-underline-offset: 3px; }
  .prose a:hover { color: var(--brass); text-decoration-color: currentColor; }
  .prose :where(ul, ol) { padding-left: 1.4em; }
  .prose li + li { margin-top: 6px; }
  .prose dt { font-weight: 500; }
  .prose dd { margin: 0 0 8px 1.4em; }
  .prose blockquote { padding-left: 20px; border-left: 2px solid var(--rule-strong); color: var(--sage); font-style: italic; }
  .prose code { padding: 1px 5px; background: var(--felt-code); border-radius: var(--r-kbd); font: 0.8em var(--mono); }
  .prose pre { padding: 16px 18px; overflow-x: auto; background: var(--felt-code); border: 1px solid var(--rule);
    border-radius: var(--r-panel); font: var(--fs-query) / 1.6 var(--mono); white-space: pre; }
  .prose pre code { padding: 0; background: none; font: inherit; }
  .prose img { display: block; max-width: 100%; height: auto; border-radius: var(--r-panel); }
  .prose figure img { margin-inline: auto; }
  .prose figcaption { margin-top: 8px; font: var(--fs-ui-s) / 1.45 var(--sans); color: var(--sage); }
  .prose table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse;
    font: var(--fs-ui) / 1.45 var(--sans); }
  .prose :where(th, td) { padding: 6px 12px 6px 0; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
  .prose th { font-weight: 500; color: var(--sage); }
  .prose caption { padding-bottom: 6px; text-align: left; color: var(--sage); font-size: var(--fs-ui-s); }
  .prose hr { height: 0; margin: 36px 0; border: 0; border-top: 1px solid var(--rule); }
  .prose mark { background: var(--felt-raised); color: var(--bone); }
  .prose :where(small, sub, sup) { font-size: 0.75em; }
  .prose summary { cursor: pointer; font: var(--fs-ui) var(--sans); color: var(--sage); }
  .prose details[open] summary { margin-bottom: 10px; }

  /* Help overlay: the keyboard map, as a modal panel over a scrim. */
  .help-overlay { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: var(--page-pad-m);
    background: var(--scrim); overflow-y: auto; }
  .help-overlay--inline { position: static; display: block; padding: 0; background: none; }
  .help-panel { display: flex; flex-direction: column; gap: 20px; width: 100%; max-width: 760px; padding: 28px 32px;
    background: var(--felt-deep); border: 1px solid var(--rule); border-radius: var(--r-panel); font-size: var(--fs-ui-s); }
  .help-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 40px; }
  .help-group { display: flex; flex-direction: column; gap: 10px; }
  .help-group-title { font: 400 var(--fs-meta) var(--sans); color: var(--sage); }
  .help-keys { display: flex; flex-direction: column; gap: 8px; margin: 0; }
  .help-keys > div { display: grid; grid-template-columns: 112px 1fr; gap: 12px; align-items: baseline; }
  .help-keys dd { margin: 0; }
  .help-note { color: var(--sage); }
  /* A confirmation built by script on the help overlay's scrim (sign out with queued
     marks, PO): heading, one sentence, the actions in a row that wraps. */
  .confirm-panel { max-width: 480px; font-size: var(--fs-ui); }
  .confirm-actions { display: flex; flex-wrap: wrap; gap: 12px; }
  .help-actions { display: flex; justify-content: flex-end; }

  /* RV screens: lens layouts (day headings, paging, caught-up line), onboarding. The List
     rows take the full content width, like the header above them (RF). */
  .lens-view { display: flex; flex-direction: column; gap: var(--stack-gap); min-width: 0; }
  .list-view { display: flex; flex-direction: column; gap: var(--grid-row-gap); min-width: 0; }
  .day { display: flex; flex-direction: column; gap: 8px; }
  .day-heading { font: italic 400 var(--fs-section) / normal var(--serif); color: var(--sage); }
  .paging { display: flex; gap: 12px; align-items: center; }
  .caught-up { color: var(--sage); }
  .caught-up a { color: var(--brass); text-decoration: none; }
  .caught-up a:hover { text-decoration: underline; }
  .onboarding { display: flex; flex-direction: column; gap: 14px; max-width: var(--measure); }
  .onboarding-intro { color: var(--sage); line-height: 1.5; }
  .onboarding-steps { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 22px; }
  .onboarding-step { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px; }
  .onboarding-n { font: italic 400 var(--fs-section) / 1.2 var(--serif); color: var(--sage); }
  .onboarding-text { display: flex; flex-direction: column; gap: 6px; }
  .onboarding-title { font: 400 var(--fs-section) / 1.2 var(--serif); color: var(--bone); }
  .onboarding-text p { color: var(--sage); line-height: 1.5; }
  .onboarding-actions { display: flex; gap: 12px; margin-top: 4px; }

  /* Library pages: feed filters, panel actions, search. */
  .filters { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
  .filter-chips { flex-basis: 100%; }
  .filter-chip[data-on] .chip { background: var(--felt-raised); border-color: var(--sage); }
  .panel > .btn { align-self: flex-start; }
  .panel-actions { display: flex; flex-wrap: wrap; gap: 12px; }
  .panel-actions .btn { padding: 0; height: auto; }
  .feed-source { overflow-wrap: anywhere; }
  .search-form { display: flex; gap: 8px; align-items: center; }
  .search-form .input--bare { height: var(--btn-h); width: min(420px, 60vw); font-size: var(--fs-ui); }
  .search-summary { display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
    color: var(--sage); }
  .search-hint { max-width: var(--measure); color: var(--sage); line-height: 1.5; }

  /* Reading view: 64px top bar, article column centred in the space, Why it's here panel. */
  .main--flush { padding: 0; gap: 0; }
  .main--flush > * { max-width: none; }
  .reading { display: flex; flex-direction: column; min-height: 100vh; }
  .reading-bar { position: sticky; top: 0; z-index: 5; flex: none; display: flex; align-items: center;
    justify-content: space-between; gap: 16px; height: var(--topbar-h); padding: 0 40px;
    background: var(--felt); border-bottom: 1px solid var(--rule); }
  .reading-bar .breadcrumb { min-width: 0; }
  .reading-bar .breadcrumb ol { flex-wrap: nowrap; white-space: nowrap; }
  .reading-bar .breadcrumb li { overflow: hidden; text-overflow: ellipsis; }
  .reading-tools { display: flex; flex: none; align-items: center; gap: 8px; }
  .tool { display: contents; }
  .tool-divider { flex: none; width: 1px; height: 22px; margin: 0 6px; background: var(--rule); }
  .why-toggle[aria-expanded=true] { background: var(--felt-raised); }
  .btn--collapsible .icon { display: none; }
  .reading-body { flex: 1 0 auto; display: flex; align-items: stretch; min-height: 0; }
  .reading-column { flex: 1 1 auto; min-width: 0; padding: 56px 72px 96px; }
  .reading-empty { max-width: var(--measure); margin: 24px auto 0; color: var(--sage); }
  .article-note { color: var(--sage); }
  .reading-mbar, .reading-bottom { display: none; }
  .nav-search, .bottom-bar { display: none; }

  .why { flex: none; width: var(--why-w); display: flex; flex-direction: column; gap: 30px;
    padding: 40px 32px; background: var(--felt-deep); border-left: 1px solid var(--rule);
    font-size: var(--fs-ui-s); }
  .why-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
  .why-head .panel-heading { font-size: var(--fs-panel); }
  .why-hide { color: var(--sage); text-decoration: none; white-space: nowrap; }
  .why-block { display: flex; flex-direction: column; gap: 10px; }
  .why-label { font: 400 var(--fs-ui-s) var(--sans); color: var(--sage); }
  .why-clauses, .why-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
  .why-clause { display: flex; align-items: center; gap: 10px; min-height: 24px; }
  .why-mark { flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 14px; height: 14px; color: var(--brass); }
  .why-mark--fails::before, .why-mark--unknown::before { content: ''; width: var(--marker); height: var(--marker);
    border: 1px solid var(--read-ring); border-radius: 50%; }
  .why-mark--unknown::before { border-style: dashed; }
  .why-text { flex: 1 1 auto; min-width: 0; font: var(--fs-ui-s) / 1.4 var(--sans); color: var(--bone); overflow-wrap: anywhere; }
  .why-reason { flex: none; max-width: 55%; color: var(--sage); text-align: right; }
  .why-section { display: flex; justify-content: space-between; gap: 12px; padding-top: 8px; border-top: 1px solid var(--rule); }
  .why-section-name { color: var(--brass); }
  .why-tags li { display: flex; align-items: center; gap: 10px; min-height: 26px; }
  .why-tags .why-reason { text-align: left; }
  .why-none { color: var(--sage); }
  .why-rules { display: flex; flex-direction: column; gap: 10px; }
  .why-rules .card-line { overflow-wrap: anywhere; }
  .why-archive { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--rule); }
  .why-link { color: var(--brass); text-decoration: none; }
  .why-link:hover { color: var(--brass); text-decoration: underline; }

  /* Article-text pages outside the reading view (Revisions, RF): the header and the text
     in one column centred in the space, at least the reading measure wide (or the whole
     width, if narrower) and as wide as its content needs up to the page. */
  .column-page { display: flex; flex-direction: column; gap: var(--stack-gap); width: fit-content;
    min-width: min(100%, var(--measure)); max-width: 100%; margin-inline: auto; }

  /* Revisions side by side, each at most the reading measure */
  .revisions { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(320px, var(--measure)); gap: 32px;
    overflow-x: auto; }
  .revision { display: flex; flex-direction: column; gap: 12px; min-width: 0; max-width: var(--measure); }
  .revision-label { font: var(--fs-meta) var(--sans); color: var(--sage); }
  .revision-title { font: 400 24px / 1.2 var(--serif); }
  .prose--small { font-size: var(--fs-row-m); }

  /* 800–1200px: the reading toolbar collapses Star, Mark unread and Ignore to icons. */
  @media (min-width: 801px) and (max-width: 1200px) {
    .btn--collapsible.btn--toolbar { width: var(--btn-h-toolbar); padding: 0; }
    .btn--collapsible.btn--toolbar .icon { display: inline-block; }
    .btn--collapsible.btn--toolbar .btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden;
      clip: rect(0 0 0 0); white-space: nowrap; }
    .reading-bar { padding: 0 24px; }
    .reading-column { padding: 48px 40px 96px; }
  }

  /* Lens editor (OF): the query text over a highlighted mirror, validation, notes and
     preview on the left; the builder (drawn by assets/js/lens-editor.js) on the right. */
  .lens-editor { display: flex; flex-direction: column; gap: var(--stack-gap); margin: 0; }
  .lens-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px;
    align-items: start; }
  .lens-pane { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
  .lens-pane-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
  .lens-text { position: relative; }
  .lens-mirror { display: none; min-height: 12em; white-space: pre-wrap; overflow-wrap: anywhere; }
  .lens-input { display: block; width: 100%; min-height: 12em; margin: 0; padding: 20px 22px;
    background: var(--felt-code); color: var(--bone); border: 1px solid var(--rule);
    border-radius: var(--r-panel); font: var(--fs-query) / var(--lh-query) var(--mono);
    white-space: pre-wrap; overflow-wrap: anywhere; resize: vertical; }
  .lens-text.is-live .lens-mirror { display: block; }
  .lens-text.is-live .lens-input { position: absolute; inset: 0; height: 100%; min-height: 0;
    overflow: hidden; resize: none; background: transparent; border-color: transparent;
    color: transparent; caret-color: var(--bone); }
  .lens-text.is-live .lens-input::selection { color: transparent; background: var(--felt-raised); }
  .q-err { text-decoration: underline wavy var(--brass); text-decoration-thickness: 1px;
    text-underline-offset: 4px; }
  .lens-complete { position: absolute; z-index: 5; min-width: 180px; max-width: 320px; max-height: 240px;
    margin: 0; padding: 4px; overflow-y: auto; list-style: none; background: var(--felt-deep);
    border: 1px solid var(--rule-strong); border-radius: var(--r-panel); font: var(--fs-ui-s) / 1.3 var(--mono); }
  .lens-complete li { display: flex; justify-content: space-between; gap: 12px; padding: 5px 8px;
    border-radius: var(--r-row); color: var(--bone); cursor: pointer; }
  .lens-complete li[aria-selected=true] { background: var(--felt-raised); }
  .lens-complete .lc-note { color: var(--sage); font-family: var(--sans); font-size: var(--fs-meta); }
  .lens-status { display: flex; align-items: center; gap: 10px; min-height: 20px; font-size: var(--fs-ui-s);
    color: var(--bone); }
  .lens-status .icon { color: var(--brass); }
  .lens-status.is-invalid { color: var(--brass); }
  .lens-errors { list-style: none; margin: -8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px;
    font-size: var(--fs-ui-s); color: var(--bone); }
  .lens-errors:empty { display: none; }
  .lens-error-at { padding: 0; border: 0; background: none; color: var(--brass); font: inherit;
    text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
  .lens-notes { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border: 1px solid var(--rule);
    border-radius: var(--r-panel); font-size: var(--fs-ui-s); line-height: 1.55; color: var(--sage); }
  .lens-check { display: flex; }
  .lens-preview-pane { display: flex; flex-direction: column; gap: 14px; padding-top: 8px; }
  .lens-preview { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
  .lens-preview li { display: flex; align-items: baseline; gap: 12px; }
  .lens-preview li::before { content: ""; flex: none; width: var(--marker); height: var(--marker);
    border-radius: 50%; background: var(--brass); transform: translateY(-2px); }
  .lens-preview-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; font: 400 var(--fs-row) / 1.3 var(--serif); color: var(--bone); text-decoration: none; }
  .lens-preview-title:hover { text-decoration: underline; text-decoration-color: var(--rule-strong); }
  .lens-preview-feed { flex: none; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: var(--fs-meta); color: var(--sage); }
  .lens-preview-empty { color: var(--sage); font-size: var(--fs-ui-s); }
  .lens-builder { display: flex; flex-direction: column; gap: 16px; }
  .lens-builder-off { color: var(--sage); font-size: var(--fs-ui-s); }
  .lens-publish-title { font: 600 var(--fs-ui-s) / 1.3 var(--sans); color: var(--bone); }
  .lens-publish-actions { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
  .lens-delete { display: flex; justify-content: flex-end; }

  /* Rules and sweeps (RP; not designed in the comps, built like the lens editor). */
  .rule-name { font: 400 var(--fs-row) / 1.3 var(--serif); color: var(--bone); text-decoration: none; }
  .rule-name:hover { text-decoration: underline; text-decoration-color: var(--rule-strong); }
  .rule-body { display: block; margin-top: 4px; font-size: var(--fs-meta); overflow-wrap: anywhere; }
  .rules-note { max-width: 70ch; color: var(--sage); font-size: var(--fs-ui-s); line-height: 1.55; }
  .rule-input { min-height: 7em; }
  .rule-help p { margin: 0; }
  .rule-scope { display: flex; flex-direction: column; gap: 12px; }
  .rule-scope-values { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: flex-end; }
  .rule-scope-values > * { flex: 1 1 10em; }
  .rule-preview { display: flex; flex-direction: column; gap: 14px; padding-top: 8px; }
  .rule-preview-summary { color: var(--sage); font-size: var(--fs-ui-s); }
  .rule-effects { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
  .rule-effect { display: block; margin-bottom: 8px; font-weight: 500; color: var(--bone); }
  .rule-samples li::before { background: var(--brass-dim); }
  .rule-runs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px;
    color: var(--sage); font-size: var(--fs-ui-s); line-height: 1.5; }
  .rule-sweeps { display: flex; flex-direction: column; gap: 14px; }
  .rule-sweeps-status { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
    gap: 12px 24px; color: var(--sage); font-size: var(--fs-ui-s); line-height: 1.55; }
  .rule-sweeps-status p { margin: 0; max-width: 70ch; }
  .rule-undo { display: flex; flex-direction: column; gap: 20px; max-width: 70ch; }
  .card-link { color: inherit; text-decoration: none; }
  .card-link:hover .card-title { text-decoration: underline; text-decoration-color: var(--rule-strong); }

  .lens-versions { display: flex; flex-direction: column; gap: 32px; }
  .lens-version { display: flex; flex-direction: column; gap: 12px; }
  .lens-version-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; }
  .lens-version-title { font: italic 400 var(--fs-section) / normal var(--serif); color: var(--brass); }
  .lens-version-meta { flex: 1 1 auto; font-size: var(--fs-ui-s); color: var(--sage); }
  .lens-diff { padding: 16px 20px; }
  .diff-line { display: block; }
  .diff-added { color: var(--moss); }
  .diff-removed { color: var(--sage); }

  /* Builder: groups, clause rows (field, operator, value, effect), chips, sliders. */
  .lb-group { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--rule);
    border-radius: var(--r-panel); font-size: var(--fs-ui-s); }
  .lb-group .lb-group { background: var(--felt-deep); padding: 14px; }
  .lb-group.is-stale { opacity: 0.6; }
  .lb-group-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 24px; }
  .lb-group-name { font-weight: 600; color: var(--bone); }
  .lb-group-kind { height: 26px; margin-left: -6px; padding: 0 4px; background: transparent; color: var(--bone);
    border: 1px solid transparent; border-radius: var(--r-btn); font: 600 var(--fs-ui-s) var(--sans);
    field-sizing: content; cursor: pointer; }
  .lb-group-kind:hover { border-color: var(--rule-strong); }
  .lb-meta { display: flex; align-items: center; gap: 10px; color: var(--sage); font-variant-numeric: tabular-nums; }
  .lb-row { display: grid; grid-template-columns: minmax(84px, max-content) minmax(0, max-content) minmax(0, 1fr) 96px 24px;
    gap: 8px; align-items: center; }
  .lb-control { height: 32px; min-width: 0; padding: 0 10px; background: transparent; color: var(--bone);
    border: 1px solid var(--rule-strong); border-radius: var(--r-btn); font: var(--fs-ui-s) var(--sans); }
  .lb-control:hover { border-color: var(--sage); }
  select.lb-control { field-sizing: content; padding-right: 6px; cursor: pointer; }
  input.lb-control[type=number] { min-width: 4.5em; }
  .lb-control--tag { color: var(--brass); }
  .lb-control--mono { font-family: var(--mono); }
  .lb-op-fixed { display: inline-flex; align-items: center; }
  .lb-value { display: flex; gap: 6px; min-width: 0; }
  .lb-value > .lb-control { flex: 1 1 auto; width: 100%; }
  .lb-value > .lb-unit { flex: 0 0 auto; width: auto; }
  .lb-row--wide .lb-value { grid-column: 1 / 4; grid-row: 2; }
  .lb-row--wide > .lb-effect { grid-column: 4; grid-row: 1; }
  .lb-row--wide > .lb-remove { grid-column: 5; grid-row: 1; }
  .lb-effect { text-align: right; color: var(--sage); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .lb-remove { width: 24px; height: 24px; padding: 0; border: 0; border-radius: var(--r-row); background: none;
    color: var(--sage); font: 16px / 1 var(--sans); cursor: pointer; }
  .lb-remove:hover { color: var(--bone); background: var(--felt-raised); }
  .lb-error { color: var(--brass); font-size: var(--fs-meta); }
  .lb-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  .lb-chip { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 6px 0 11px;
    border: 1px solid var(--rule-strong); border-radius: 15px; color: var(--brass); font: var(--fs-ui-s) / 1 var(--sans); }
  .lb-chip .chip-count { margin: 0; }
  .lb-chip .lb-remove { width: 18px; height: 18px; font-size: 14px; }
  .lb-chip-input { width: 9em; height: 30px; padding: 0 11px; background: transparent; color: var(--brass);
    border: 1px solid var(--rule-strong); border-radius: 15px; font: var(--fs-ui-s) var(--sans); }
  .lb-adds { display: flex; flex-wrap: wrap; gap: 8px; }
  .lb-add { height: 30px; padding: 0 12px; background: transparent; color: var(--sage);
    border: 1px dashed var(--rule-strong); border-radius: 15px; font: var(--fs-ui-s) var(--sans); cursor: pointer; }
  .lb-row > .lb-add, .lb-adds > .lb-add { border-radius: var(--r-btn); }
  .lb-add:hover { color: var(--bone); border-color: var(--sage); }
  .lb-slider { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: end; min-width: 0; }
  .lb-hist { grid-column: 1; display: block; width: 100%; height: 28px; }
  .lb-bin { fill: var(--rule-strong); }
  .lb-bin.is-in { fill: var(--brass-dim); }
  .lb-range { grid-column: 1; width: 100%; height: 16px; margin: 0; accent-color: var(--brass); }
  .lb-readout { grid-column: 2; grid-row: 1 / span 2; align-self: center; min-width: 4.5em; text-align: right;
    color: var(--bone); font-variant-numeric: tabular-nums; }
  .lb-props { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .lb-props .field-label { font-size: var(--fs-ui-s); }
  .lb-props .input { font-size: var(--fs-ui-s); }
  .lb-limit { display: flex; align-items: center; gap: 8px; color: var(--sage); font-size: var(--fs-ui-s); }
  .lb-limit .input { width: 5em; }
  @media (max-width: 1100px) {
    .lens-cols { grid-template-columns: minmax(0, 1fr); }
  }

  /* Offline (OF): a quiet note in the corner while offline or while changes wait to sync. */
  .offline-banner { position: fixed; right: 24px; bottom: 24px; z-index: 11;
    max-width: min(360px, calc(100vw - 2 * var(--page-pad-m))); margin: 0; padding: 8px 14px; background: var(--felt-deep);
    border: 1px solid var(--rule-strong); border-radius: var(--r-panel); color: var(--bone);
    font: var(--fs-ui-s) / 1.4 var(--sans); }

  /* Phones: the navigation becomes a header with one scrolling row of pills. */
  @media (max-width: 800px) {
    .copy-value { white-space: normal; overflow-wrap: anywhere; }
    .error-page { padding-top: 8px; }
    .nav { gap: 10px; padding: 12px var(--page-pad-m) 8px; background: var(--felt); border-right: 0;
      border-bottom: 1px solid var(--rule); }
    .wordmark { display: flex; align-items: center; min-height: var(--target-m); padding-left: 0;
      font-size: var(--fs-wordmark-m); }
    .nav-groups { flex-direction: row; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--page-pad-m));
      padding-inline: var(--page-pad-m); }
    .nav-group, .nav-list, .nav-list > li { display: contents; }
    .nav-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .nav-item { flex: none; position: relative; isolation: isolate; min-height: var(--target-m); gap: 6px;
      color: var(--bone); background: none; }
    .nav-item::before { content: ''; position: absolute; inset: 6px 0; z-index: -1; border: 1px solid var(--rule-strong);
      border-radius: var(--r-pill-m); }
    .nav-item[aria-current] { background: none; }
    .nav-item[aria-current]::before { background: var(--felt-raised); border-color: var(--felt-raised); }
    .nav-count { color: var(--sage); }
    .nav-foot { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px; padding: 0; }
    .nav-foot .btn { min-height: var(--target-m); }
    .nav-keys { display: none; }

    .page-header { flex-direction: column; align-items: stretch; gap: 16px; }
    .display { font-size: var(--fs-display-m); }
    .page-actions { justify-content: flex-start; }
    .btn { height: var(--btn-h-m); }
    .btn--icon { width: var(--btn-h-m); }
    .seg { height: calc(var(--btn-h-m) - 2 * var(--seg-inset) - 2px); }
    .input { height: var(--btn-h-m); }
    .check { min-height: var(--target-m); }
    .toast { bottom: 16px; max-width: calc(100vw - 2 * var(--page-pad-m)); }
    .table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
    .table tr { padding: 10px 0; border-bottom: 1px solid var(--rule); }
    .table td { display: flex; gap: 12px; padding: 3px 0; border: 0; }
    .table td[data-label]::before { content: attr(data-label); flex: none; width: 6.5em; color: var(--sage);
      font: var(--fs-meta) / 1.8 var(--sans); }
    .table td.cell-title { display: block; }
    .table td.cell-title::before { content: none; }
    .table td:empty { display: none; }
    .table .cell-actions { text-align: left; margin-left: -8px; }
    .metrics { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .metric:last-child:nth-child(odd) { grid-column: span 2; }
    .metric { padding: 14px 16px; }
    .article-title { font-size: var(--fs-article-m); }
    .section-name { font-size: var(--fs-section-m); }
    .prose { font-size: var(--fs-body-m); line-height: var(--lh-body-m); }
    .help-panel { padding: 20px; }
    .help-groups { grid-template-columns: minmax(0, 1fr); }
    .offline-banner { right: var(--page-pad-m); bottom: 84px; }
    .lens-builder, .lens-pane--builder > .lens-pane-head,
    .lens-pane-head .panel-aside:not([id]) { display: none; }

    /* Lens view on phones: search beside the wordmark, only the lens pills, the header's
       actions move to the bottom bar (Lenses, Caught up, Starred). */
    .nav { position: relative; }
    .nav-search { position: absolute; top: 12px; right: var(--page-pad-m); display: inline-flex;
      align-items: center; justify-content: center; min-width: var(--target-m); min-height: var(--target-m);
      color: var(--bone); }
    .frame:has(.lens-view) .nav-group + .nav-group, .frame:has(.lens-view) .nav-foot { display: none; }
    .lens-view { display: flex; flex-direction: column; gap: 22px; padding-bottom: 72px; }
    /* The header keeps only its menu (Layout: Grouped / List / Expanded and Make default,
       or the Ignored view's Period) as an icon button beside the title (RF); the
       breadcrumb is the way back, the bottom bar has the actions (PO). */
    .lens-view .page-header { flex-direction: row; align-items: flex-start; padding-bottom: 14px; }
    .lens-view .page-header-text { flex: 1 1 auto; }
    .lens-view .page-actions { flex: none; }
    .lens-view .page-actions > :not(.menu) { display: none; }
    .menu-button { width: var(--target-m); height: var(--target-m); }
    .lens-view .toast { bottom: 84px; }
    .bottom-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; display: block;
      padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--felt-deep);
      border-top: 1px solid var(--rule); }
    .bottom-bar ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .bottom-item a, .bottom-item button { display: flex; flex-direction: column; align-items: center;
      justify-content: center; gap: 6px; width: 100%; min-height: 64px; padding: 0; background: none; border: 0;
      color: var(--bone); font: var(--fs-ui-s) var(--sans); text-decoration: none; cursor: pointer; }
    .bottom-item .icon { width: 20px; height: 20px; }
    .bottom-item--brass button { color: var(--brass); }

    /* Reading view on phones: back link, position and "?" on top; Ignore, Star and
       "Next in <section>" at the bottom; Why it's here as a bottom sheet. */
    .frame:has(.reading) > .nav { display: none; }
    .reading-bar { display: none; }
    .reading-mbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center;
      justify-content: space-between; gap: 12px; min-height: 56px; padding: 0 var(--page-pad-m);
      background: var(--felt); border-bottom: 1px solid var(--rule); }
    .reading-back { display: inline-flex; align-items: center; gap: 8px; min-height: var(--target-m);
      color: var(--brass); text-decoration: none; font: var(--fs-ui) var(--sans); }
    .reading-back:hover { color: var(--brass); }
    .reading-pos { color: var(--sage); font: var(--fs-ui-s) var(--sans); }
    .reading-why { display: inline-flex; align-items: center; justify-content: center; min-width: var(--target-m);
      min-height: var(--target-m); color: var(--bone); text-decoration: none; font: 400 18px var(--sans); }
    .reading-why[aria-expanded=true] { color: var(--brass); }
    .reading-column { padding: 24px var(--page-pad-m) 120px; }
    .reading-bottom { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; display: flex; gap: 10px;
      padding: 12px var(--page-pad-m) calc(12px + env(safe-area-inset-bottom, 0px));
      background: var(--felt-deep); border-top: 1px solid var(--rule); }
    .reading-bottom .tool--next { display: block; flex: 1 1 auto; min-width: 0; }
    .reading-bottom .tool--next .form--inline, .reading-bottom .tool--next .btn { width: 100%; }
    .why { position: fixed; left: 0; right: 0; bottom: 0; z-index: 8; width: auto; max-height: 75vh;
      overflow-y: auto; gap: 22px; padding: 24px var(--page-pad-m) calc(24px + env(safe-area-inset-bottom, 0px));
      border-left: 0; border-top: 1px solid var(--rule-strong); border-radius: var(--r-chip) var(--r-chip) 0 0; }
    .why-archive { margin-top: 0; }
    .revisions { grid-auto-flow: row; grid-auto-columns: auto; }
    /* Feeds on phones (PO): one compact block per feed: name and URL, then status, the
       numbers and tags flowing on one or two lines, instead of a labelled line each. */
    #subscriptions .table tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
    #subscriptions .table td { display: inline-flex; width: auto; gap: 6px; padding: 0; }
    #subscriptions .table td.cell-title { display: block; flex-basis: 100%; }
    #subscriptions .table td[data-label]::before { width: auto; }
    #subscriptions .table td[data-label="Status"]::before,
    #subscriptions .table td[data-label="Tags"]::before { content: none; }
    #subscriptions .table .cell-actions { flex-basis: 100%; margin-left: -8px; }
  }

}

@layer utilities {
  .vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .tabular { font-variant-numeric: tabular-nums; }
  .js .js-hide { display: none; }
  /* Only on phones (< 800px). */
  @media (min-width: 801px) { .m-only { display: none; } }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; }
  }
}