/* 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); }
  /* A pressed toggle in the toolbar (the reading view's Star): brass and filled, like the
     phone bar's, so the state shows. */
  .btn--secondary[aria-pressed=true], .btn--secondary[aria-pressed=true]:hover {
    color: var(--brass); border-color: var(--brass); }
  .btn--secondary[aria-pressed=true] .icon path { fill: currentColor; }
  .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; }
  /* A quiet button that can't act (Up on the first lens) dims instead of gaining a frame. */
  .btn--quiet:disabled { border-color: transparent; opacity: 0.4; }
  /* MB: the phone reading bar's compact controls (Ui.Button.bar_button): icon over a
     short label, sage until pressed (a starred item's star is brass: state). */
  .btn--bar { flex-direction: column; gap: 5px; min-width: var(--target-m); height: 52px;
    padding: 0 5px; color: var(--sage); font: 400 var(--fs-meta) / 1 var(--sans); }
  .btn--bar:hover { color: var(--bone); }
  .btn--bar .icon { width: 20px; height: 20px; }
  .btn--bar[aria-pressed=true] { color: var(--brass); }
  .btn--bar[aria-pressed=true] .icon path { fill: currentColor; }
  .btn--bar[aria-disabled=true] { opacity: 0.5; cursor: default; }
  .btn--bar .icon--alt, .reading:not([data-state=read]) .btn--bar .icon--main { display: none; }
  .reading:not([data-state=read]) .btn--bar .icon--alt { display: inline-block; }
  .btn--next .next-head { flex: none; }
  .btn--next .next-tail { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

  /* 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; }
  /* Pull up for next (touch screens: phones and iPads): shown by items.js while the
     reader pulls past the end of the article; brass once releasing goes next. Centred
     under the reading column on wide layouts (right of the nav), above the bottom bar on phones. Hidden where there's
     no touch screen. The fill is scaled by the script (transform, no inline style). */
  .pull-next { --pull-w: min(480px, calc(100vw - var(--nav-w) - 32px));
    position: fixed; left: calc(var(--nav-w) + (100vw - var(--nav-w)) / 2); width: var(--pull-w);
    margin-left: calc(var(--pull-w) / -2);
    z-index: 7; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 10px;
    padding: 10px 14px; border: 1px solid var(--rule-strong); border-radius: var(--r-btn);
    background: var(--felt-deep); color: var(--bone); font: var(--fs-ui-s) var(--sans);
    opacity: 0; transform: translateY(8px); pointer-events: none;
    transition: opacity 120ms ease, transform 120ms ease; }
  @media (max-width: 800px) {
    .pull-next { left: 12px; right: 12px; width: auto; margin-left: 0;
      bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  }
  @media not (any-pointer: coarse) { .pull-next:not(.pull-next--inline) { display: none; } }
  .pull-next.is-pulling { opacity: 1; transform: none; }
  .pull-next-label { color: var(--sage); white-space: nowrap; }
  .pull-next.is-ready .pull-next-label { color: var(--brass); }
  .pull-next-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pull-next-track { grid-column: 1 / -1; height: 2px; background: var(--rule); }
  .pull-next-fill { display: block; height: 100%; background: var(--brass);
    transform: scaleX(0); transform-origin: left center; }
  .pull-next--inline { position: static; opacity: 1; transform: none; width: auto;
    max-width: 390px; margin-left: 0; }
  @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--wide { max-width: none; }
  .form--wide .input--mono { white-space: pre; overflow-wrap: normal; overflow-x: auto; }
  .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;
    transition: opacity 160ms ease, transform 160ms ease; }
  /* Previous/next pressed (or pulled): the article leaves at once, the way it's going. */
  .reading.is-leaving .reading-body { opacity: 0.2; transform: translateY(-24px); }
  .reading.is-leaving-back .reading-body { opacity: 0.2; transform: translateY(24px); }
  /* While a pull is in progress items.js sets the body's opacity and offset directly. */
  .reading.is-dragging .reading-body { transition: none; }
  .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; }
    /* MB: Star, Unread/Read, Ignore, Original as compact icon-over-label controls (44px
       targets), then Next taking the rest; the list's name ("in Essays") drops when the
       button is too narrow for more than a few of its letters. */
    .reading-bottom { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; display: flex;
      align-items: center; gap: 2px;
      padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
      background: var(--felt-deep); border-top: 1px solid var(--rule); }
    .reading-bottom > .tool > .form--inline, .reading-bottom > .btn--bar { flex: none; }
    .reading-bottom .tool--next { display: block; flex: 1 1 auto; min-width: 0; margin-left: 6px;
      container-type: inline-size; }
    .reading-bottom .tool--next .form--inline { display: block; width: 100%; }
    .btn--next { width: 100%; height: 48px; gap: 0.3em; padding: 0 12px; font-size: var(--fs-ui); }
    .btn--next.btn--secondary { gap: 8px; }
    @container (max-width: 7rem) { .btn--next .next-tail { display: none; } }
    .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; }
    .reading.is-leaving .reading-body, .reading.is-leaving-back .reading-body { transform: none; }
  }
}