/**
 * The Quiet Interview — the room scales with the screen.
 *
 * PROJECT-AUTHORED, not upstream. Like `components.css`, this file is ours;
 * unlike `tokens/*.css`, which are verbatim and re-imported by overwriting.
 * That is the whole reason it exists as a separate file: the fix belongs in
 * the token values, but editing the token files would turn the next re-sync
 * from a clean diff into a manual merge. See design/README.md.
 *
 * WHAT IT FIXES
 *
 * The system is authored in fixed pixels against a room about 940 CSS px wide
 * — recoverable from the mockup, where the 250px rail occupies 26.7% of the
 * frame (250 / .267 = 936). Nothing in it responds to width above the phone
 * breakpoint, so on a 1800px display every proportion in the design is exactly
 * half its intended share of the screen at once: the question, the screen
 * padding, the margin rail, the measure. Not four regressions — one fact,
 * observed four times.
 *
 *   at 1800px       before     mockup      here
 *   --said-lg       1.7% vw    3.3% vw     2.5% vw  (45px)
 *   --screen-pad-x  4.2% vw    8.1% vw     8% vw    (144px)
 *   --rail-w       13.9% vw   26.7% vw    25% vw    (450px)
 *
 * LOAD LAST — after components.css, not before.
 *
 * The `:root` blocks would win from anywhere after the token files, but the
 * element rules would not: components.css sets `.ds-room__status { padding }`,
 * and a shorthand beats `padding-inline` at equal specificity. Loading this
 * earlier fails silently in the worst way — the type scales and the insets
 * stay put, which looks like a design decision rather than a load order.
 *
 * UNITS
 *
 * `vw` carries the slope, because the bug *is* that ratios to the viewport
 * collapse; no font-relative unit addresses that. Everything else is `rem`
 * rather than `px`. The two are identical under browser zoom, so zoom is not
 * the argument — the difference is the browser's default font size setting,
 * which a px-anchored page ignores entirely. The readers of a memorial site
 * are the ones most likely to have raised it.
 *
 * The `rem` values assume a 16px root, which is where they reproduce the
 * system's own numbers exactly. Type holds its current value at 940px and
 * reaches about 1.45x at 1800px, then caps: a wider screen is also viewed from
 * further away, so scaling type the full 1.9x would make a headline out of a
 * question. Layout tokens do scale near-proportionally — they are shares of
 * the page rather than readability.
 *
 * Known limit, so it is not rediscovered: `vw` does not respond to root font
 * size, so at a raised root the middle term often still wins. The gain is real
 * at the ends of each clamp and diluted between them. That tension is inherent
 * to fluid type and no unit choice removes it.
 */

@media (min-width: 861px) {
  :root {
    /*
     * THE WIDTH EVERYTHING SCALES AGAINST — normally the viewport.
     *
     * A page may cap it by setting `--room-cap`, after which the room stops
     * growing and the surplus becomes margin around it rather than more space
     * between things. Uncapped by default, so this is inert unless a page opts
     * in: `min(100vw, 100vw)` is `100vw`.
     *
     * The cap has to live HERE rather than as a `max-width` on the page's own
     * container, because every value below is a share of the viewport. Freeze
     * the box alone and the type and the rail keep growing inside it — at
     * 1920px against a 1280px box that is 47px type where 37px was intended,
     * and a rail taking 37.5% of the room instead of 25%. Which is the crowding
     * a cap is meant to prevent, arrived at from the other direction.
     *
     * Slopes are unchanged: `1.62vw` is `1.62%` of the reference width, so
     * `0.0162 * var(--room-w)` is the same number wherever the width comes from.
     */
    --room-w: min(100vw, var(--room-cap, 100vw));

    /*
     * THE GUTTERS — what the surplus becomes once the room stops growing.
     *
     * Derived here so both rooms share one definition; each page applies them,
     * because the selectors differ and so does the side the raised column is
     * on (the card is left on /tell, the rail is right on /interview). Hence
     * NEAR and FAR rather than left and right: near flanks the raised column,
     * far flanks the floor.
     *
     * Both are measured against `--gutter-anchor` — the tone of the column each
     * one borders — but NOT in the same direction in both rooms, because
     * "recede" is not one direction.
     *
     * PAPER (below): the room is a page lying on a darker desk, so the gutters
     * step DOWN, past the raised column rather than short of it. Stopping short
     * lands them between the card and the floor, which reads as a lighter band
     * beside a darker card instead of as a mat behind a page.
     *
     * NIGHT (further down): the floor is already near-black, so stepping down
     * again gives two bands nobody can tell apart and the room loses its edge.
     * There the gutters lift off the floor and stop SHORT of the raised column,
     * so it stays the lightest surface and the eye goes to the question rather
     * than to the edge of the window.
     *
     * Stated twice rather than as one formula that happens to invert. A single
     * mix toward --text-said gets paper right and night wrong, which is how
     * this started.
     *
     * Zero-width and inert unless a page caps the room.
     */
    --gutter-w: max(0px, calc((100vw - var(--room-cap, 100vw)) / 2));
    --room-h:   min(100svh, var(--room-cap-h, 100svh));
    --gutter-near: color-mix(in oklab, var(--gutter-anchor, var(--surface-margin)), var(--text-said) 10%);
    --gutter-far:  color-mix(in oklab, var(--gutter-anchor, var(--surface-margin)), var(--text-said) 4%);

    /* Said — the speaker's own words. Slope 0.0523c vw, intercept 0.0318c rem. */
    --said-lg:    clamp(1.9375rem, calc(0.0162 * var(--room-w) + 0.99rem), 3rem);      /* 31 -> 45 */
    --said-md:    clamp(1.5625rem, calc(0.0131 * var(--room-w) + 0.79rem), 2.375rem);  /* 25 -> 36 */
    --said-sm:    clamp(1.4375rem, calc(0.0120 * var(--room-w) + 0.73rem), 2.1875rem); /* 23 -> 33 */
    --said-prior: clamp(1rem, calc(0.0084 * var(--room-w) + 0.51rem), 1.5rem);         /* 16 -> 23 */

    /* Notes — the follow-ups. Always smaller than what was said, at every size. */
    --note-lg:    clamp(1.25rem, calc(0.0105 * var(--room-w) + 0.64rem), 1.875rem);    /* 20 -> 29 */
    --note-md:    clamp(1.0625rem, calc(0.0089 * var(--room-w) + 0.54rem), 1.625rem);  /* 17 -> 25 */
    --note-sm:    clamp(1rem, calc(0.0084 * var(--room-w) + 0.51rem), 1.5rem);         /* 16 -> 23 */

    /* Meta — status, counts, hints. */
    --label:      clamp(0.625rem, calc(0.0052 * var(--room-w) + 0.32rem), 0.875rem);   /* 10 -> 14 */
    --meta:       clamp(0.6875rem, calc(0.0058 * var(--room-w) + 0.35rem), 1rem);      /* 11 -> 15 */
    --body:       clamp(0.75rem, calc(0.0063 * var(--room-w) + 0.38rem), 1.0625rem);   /* 12 -> 16 */

    /* Layout — shares of the page. */
    --screen-pad-x: clamp(4.75rem, calc(0.08 * var(--room-w)), 11rem);       /*  76 -> 144 */
    --rail-w:       clamp(15.625rem, calc(0.25 * var(--room-w)), 32.5rem);   /* 250 -> 450 */
  }

  /*
   * NIGHT — the other direction, and the reason the gutters are defined twice.
   *
   * "Recede" is not one direction. On paper it means darker; at night the floor
   * is already near-black, so stepping down again produces two bands nobody can
   * tell apart, and the room loses its edge entirely. Here the gutters lift off
   * the floor instead, stopping SHORT of the raised column so it stays the
   * lightest surface and the eye still goes to the question rather than to the
   * edge of the window.
   *
   * Same relationship stated twice rather than one formula that happens to
   * invert: the gutters sit between the floor and the raised column at night,
   * and beyond the raised column on paper. A single mix toward --text-said gets
   * paper right and night wrong, which is how this started.
   */
  [data-theme="night"] {
    --gutter-near: color-mix(in oklab, var(--surface-page), var(--gutter-anchor, var(--surface-margin)) 60%);
    --gutter-far:  color-mix(in oklab, var(--surface-page), var(--gutter-anchor, var(--surface-margin)) 25%);
  }

  /*
   * Measure, in characters rather than pixels.
   *
   * 560px / 31px = 18em, so this reproduces the system exactly at the
   * authoring width AND holds the line length constant in characters at every
   * scale — which is the thing a measure is actually for. A vw-clamped measure
   * re-derives that by hand and drifts out of the readable band the moment the
   * type slope is touched. `--said-measure` stays defined and goes unused.
   */
  .ds-said__line { max-width: 18em; }
  .composer      { max-width: 22.4em; }  /* 560 / 25, the composer's own type */

  /*
   * The status line hugs the room's edge and the floor is inset further —
   * upstream 34:76. Keep the relationship rather than freezing the numerator:
   * at a 144px floor inset, a status still at 34px detaches from the question
   * by 110px and reads as an accident rather than as chrome.
   */
  .ds-room__status { padding-inline: calc(var(--screen-pad-x) * .45); }

  /*
   * Horizontal only. The rail's top padding matches the status row's, so the
   * two columns start on the same line — that mattered more when the rail
   * still had a visible label to align, and it is still what keeps the margin
   * from starting higher than the room does.
   */
  .ds-rail { padding: var(--s-6) clamp(1.625rem, 2.2vw, 2.75rem); }

  .ds-mic { --mic-size: clamp(3.125rem, 3.3vw, 4rem); }
}