/* Writing Assistant · components. docs/09-VISUAL-SPEC.md §6 (catalogue) and §7 (AI states).
   Every value is a token. Hierarchy rule: ONE .wa-btn--primary per surface (top bar, rail, panel, each inline
   card, each dialog). Everything else is ghost / quiet. */

@layer components {

  /* ═════════════════════════ Buttons ═════════════════════════ */
  .wa-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
    min-height: var(--ctl-md); padding: 0 var(--sp-3);
    border-radius: var(--r-md); border: var(--sp-px) solid transparent;
    font: var(--fw-medium) var(--fs-label)/var(--lh-label) var(--font-ui);
    color: var(--text); white-space: nowrap;
    transition: background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
  }
  .wa-btn:active { transform: translateY(.5px); }
  .wa-btn--primary { background: var(--accent); color: var(--on-accent); font-weight: var(--fw-bold); }
  .wa-btn--primary:hover { background: var(--accent-hover); }
  .wa-btn--ghost { border-color: var(--border-strong); background: transparent; }
  .wa-btn--ghost:hover { background: var(--surface-3); border-color: var(--border-control); }
  .wa-btn--quiet { color: var(--text-2); }
  .wa-btn--quiet:hover { background: var(--surface-3); color: var(--text); }
  .wa-btn--danger { background: var(--del); color: var(--canvas); font-weight: var(--fw-bold); }
  .wa-btn--danger-ghost { color: var(--del); border-color: var(--border-strong); }
  .wa-btn--danger-ghost:hover { background: var(--del-tint); }
  .wa-btn--sm { min-height: var(--ctl-sm); padding: 0 var(--sp-2); font-size: var(--fs-meta); line-height: var(--lh-meta); border-radius: var(--r-sm); }
  .wa-btn--lg { min-height: var(--ctl-lg); padding: 0 var(--sp-4); font-size: var(--fs-body); line-height: var(--lh-body); }
  .wa-btn--block { width: 100%; }
  .wa-btn[disabled], .wa-btn[aria-disabled="true"] { color: var(--text-disabled); background: transparent; border-color: var(--border); cursor: not-allowed; transform: none; }
  .wa-btn--quiet[disabled], .wa-btn--quiet[aria-disabled="true"] { border-color: transparent; }   /* disabled never restyles the shape */
  .wa-btn--primary[disabled] { background: var(--surface-3); color: var(--text-disabled); }

  .wa-btn--primary .wa-kbd { background: transparent; color: inherit; border-color: color-mix(in srgb, var(--on-accent) 35%, transparent); }

  .wa-iconbtn {
    display: inline-grid; place-items: center; flex: none;
    width: var(--ctl-md); height: var(--ctl-md);
    border-radius: var(--r-md); color: var(--text-2);
    transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
  }
  .wa-iconbtn:hover { background: var(--surface-3); color: var(--text); }
  .wa-iconbtn[aria-pressed="true"], .wa-iconbtn[aria-expanded="true"] { background: var(--surface-3); color: var(--text); }
  .wa-iconbtn--sm { width: var(--ctl-sm); height: var(--ctl-sm); border-radius: var(--r-sm); }

  /* The assistant toggle: a labelled ghost button (discoverable), icon-only below 768 */
  .wa-assist-toggle[aria-pressed="true"] { background: var(--accent-tint); border-color: transparent; }
  .wa-assist-toggle .wa-i { color: var(--accent); }

  .wa-brand__mark {
    display: grid; place-items: center; width: var(--sp-6); height: var(--sp-6); flex: none;
    border-radius: var(--r-sm); background: var(--accent-tint); color: var(--accent);
  }

  /* ═════════════════════════ Fields ═════════════════════════ */
  .wa-field { display: flex; flex-direction: column; gap: var(--sp-2); }
  .wa-label { font: var(--fw-medium) var(--fs-label)/var(--lh-label) var(--font-ui); color: var(--text); }
  .wa-help { font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--text-3); }
  .wa-input, .wa-textarea, .wa-select {
    width: 100%; min-height: var(--ctl-lg);
    padding: 0 var(--sp-3);
    border-radius: var(--r-md); border: var(--sp-px) solid var(--border-strong);
    background: var(--canvas); color: var(--text);
    font-size: var(--fs-input); line-height: var(--lh-body);
    transition: border-color var(--t-fast);
  }
  .wa-textarea { padding: var(--sp-2) var(--sp-3); resize: vertical; min-height: 88px; }
  .wa-input::placeholder, .wa-textarea::placeholder { color: var(--text-3); opacity: 1; }
  .wa-input:hover, .wa-textarea:hover, .wa-select:hover { border-color: var(--border-control); }
  .wa-input:focus-visible, .wa-textarea:focus-visible, .wa-select:focus-visible { outline: var(--focus-w) solid var(--accent); outline-offset: 0; border-color: transparent; }
  .wa-select { appearance: none; padding-right: var(--sp-8); background-image: none; }
  .wa-selectwrap { position: relative; }
  .wa-selectwrap .wa-i { position: absolute; right: var(--sp-3); top: 50%; translate: 0 -50%; pointer-events: none; color: var(--text-3); }

  .wa-search { position: relative; display: flex; align-items: center; }
  .wa-search .wa-i { position: absolute; left: var(--sp-3); color: var(--text-3); pointer-events: none; }
  .wa-search .wa-input { min-height: var(--ctl-md); padding-left: var(--sp-8); padding-right: var(--sp-10); background: var(--surface-2); border-color: transparent; font-size: var(--fs-label); }
  .wa-search .wa-kbd { position: absolute; right: var(--sp-2); }

  /* Segmented radio: the selected option has a 3:1 indicator (accent outline + tint + tick), not a 1.1:1 fill shift
     (critic r1 M13). The track is an outline, so "selected" can never read as "darker = off". */
  .wa-seg { display: inline-flex; padding: var(--sp-half); gap: var(--sp-half); border-radius: var(--r-md); box-shadow: inset 0 0 0 var(--sp-px) var(--border-strong); }
  .wa-seg__btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
    min-height: var(--ctl-sm); padding: 0 var(--sp-3); border-radius: var(--r-sm);
    font: var(--fw-medium) var(--fs-label)/var(--lh-label) var(--font-ui); color: var(--text-2);
  }
  .wa-seg__btn:hover { color: var(--text); }
  .wa-seg__btn[aria-pressed="true"], .wa-seg__btn[aria-checked="true"] {
    background: var(--accent-tint); color: var(--text); font-weight: var(--fw-bold);
    box-shadow: inset 0 0 0 var(--sp-px) var(--accent);
  }
  .wa-seg__btn[aria-checked="true"]::before { content: "\2713"; color: var(--accent); font-weight: var(--fw-bold); }

  .wa-check { display: flex; align-items: flex-start; gap: var(--sp-3); min-height: var(--sp-6); font-size: var(--fs-label); line-height: var(--lh-label); }
  .wa-check input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--accent); flex: none; }

  /* ═════════════════════════ Menus & popovers ═════════════════════════ */
  .wa-menu {
    position: absolute; z-index: var(--z-popover);
    min-width: 240px; max-width: min(340px, calc(100vw - 2 * var(--gutter)));
    padding: var(--sp-1);
    border-radius: var(--r-md); border: var(--sp-px) solid var(--border-strong);
    background: var(--surface-2); box-shadow: var(--e-2);
    font-family: var(--font-ui); font-size: var(--fs-label); line-height: var(--lh-label);
    animation: wa-pop-in var(--t-med) var(--ease-out);
  }
  .wa-menu__group {
    padding: var(--sp-2) var(--sp-3) var(--sp-1);
    font-size: var(--fs-meta); line-height: var(--lh-meta); font-weight: var(--fw-bold);
    letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-3);
  }
  .wa-menu__sep { height: var(--sp-px); margin: var(--sp-1) calc(var(--sp-1) * -1); background: var(--border); }
  .wa-menu__item {
    display: grid; grid-template-columns: var(--sp-5) minmax(0, 1fr) auto; align-items: center; column-gap: var(--sp-3);
    width: 100%; min-height: var(--ctl-md); padding: var(--sp-1) var(--sp-2);
    border-radius: var(--r-sm); color: var(--text); text-align: left;
  }
  .wa-menu__item > .wa-i { color: var(--text-2); justify-self: center; }
  .wa-menu--plain .wa-menu__item { grid-template-columns: minmax(0, 1fr) auto; padding-left: var(--sp-3); }
  .wa-menu__item:hover, .wa-menu__item[data-active="true"] { background: var(--surface-3); }
  .wa-menu__item[data-active="true"] > .wa-i { color: var(--accent); }
  .wa-menu__item[aria-checked="true"] .wa-menu__tick { color: var(--accent); }
  .wa-menu__text { display: flex; flex-direction: column; min-width: 0; }
  .wa-menu__desc { font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--text-3); }
  .wa-menu__aside { color: var(--text-3); font-size: var(--fs-meta); line-height: var(--lh-meta); display: inline-flex; align-items: center; gap: var(--sp-1); white-space: nowrap; }
  .wa-menu__item--demoted { color: var(--text-2); }
  .wa-menu__item--danger, .wa-menu__item--danger > .wa-i { color: var(--del); }
  .wa-menu__note { padding: var(--sp-1) var(--sp-3) var(--sp-2) calc(var(--sp-5) + var(--sp-5)); font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--text-3); }
  .wa-menu__filter { padding: var(--sp-2) var(--sp-3); color: var(--text-3); font-size: var(--fs-meta); line-height: var(--lh-meta); border-bottom: var(--sp-px) solid var(--border); margin: calc(var(--sp-1) * -1) calc(var(--sp-1) * -1) var(--sp-1); }
  .wa-menu__filter b { color: var(--text); font-weight: var(--fw-bold); }

  .wa-pop {
    position: absolute; z-index: var(--z-popover);
    width: 300px; max-width: calc(100vw - 2 * var(--gutter));
    padding: var(--sp-4);
    border-radius: var(--r-lg); border: var(--sp-px) solid var(--border-strong);
    background: var(--surface-2); box-shadow: var(--e-2);
    display: flex; flex-direction: column; gap: var(--sp-3);
    font-family: var(--font-ui);
    animation: wa-pop-in var(--t-med) var(--ease-out);
  }
  .wa-pop__title { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--fw-bold); }
  .wa-pop__row { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-2); }

  /* ═════════════════════════ Selection bar ═════════════════════════ */
  .wa-selbar {
    position: absolute; z-index: var(--z-bar);
    display: flex; align-items: center; gap: var(--sp-half);
    height: var(--selbar-h); padding: var(--sp-1);
    border-radius: var(--r-md); border: var(--sp-px) solid var(--border-strong);
    background: var(--surface-2); box-shadow: var(--e-2);
    font-family: var(--font-ui); font-size: var(--fs-label); line-height: var(--lh-label);
    white-space: nowrap;
    animation: wa-pop-in var(--t-med) var(--ease-out);
  }
  .wa-selbar__btn {
    display: inline-flex; align-items: center; gap: var(--sp-1);
    height: var(--ctl-md); padding: 0 var(--sp-2);
    border-radius: var(--r-sm); color: var(--text); font-weight: var(--fw-medium);
  }
  .wa-selbar__btn:hover, .wa-selbar__btn[aria-expanded="true"] { background: var(--surface-3); }
  .wa-selbar__btn--icon { width: var(--ctl-md); padding: 0; justify-content: center; color: var(--text-2); }
  .wa-selbar__btn .wa-i--sm { color: var(--text-3); }
  .wa-selbar__btn--ai .wa-i { color: var(--accent); }
  .wa-selbar__sep { width: var(--sp-px); height: var(--sp-5); margin: 0 var(--sp-1); background: var(--border-strong); flex: none; }
  .wa-selbar__ask { color: var(--text-2); }
  .wa-selbar__ask .wa-kbd { margin-left: var(--sp-1); }

  /* ═════════════════════════ Inline AI cards (PM widgets, in page flow) ═════════════════════════ */
  .wa-inline {
    position: relative;
    margin: var(--sp-4) 0 var(--sp-6);
    font-family: var(--font-ui); font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--fw-regular);
    color: var(--text); font-style: normal;
    animation: wa-rise var(--t-med) var(--ease-out);
  }
  /* widgets live inside .wa-doc: cancel page typography (margins/sizes) for everything inside them */
  .wa-inline :where(h1, h2, h3, h4, p, ul, ol, li, blockquote) { margin: 0; padding: 0; font-style: normal; }

  /* Review bar: sits under the passage and sticks to the bottom of the viewport while the passage is on screen. */
  .wa-review {
    position: sticky; bottom: calc(var(--sp-4) + var(--dock-bottom)); z-index: var(--z-bar);   /* above the scroller's edge fade: a stuck bar is never veiled (contract: review-bar, primary) */
    display: flex; flex-direction: column; gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);          /* ONE inner inset: every row's first glyph and last box sit 16px in (critic r2 m-2) */
    border-radius: var(--r-md); border: var(--sp-px) solid var(--border-strong);
    background: var(--surface-2); box-shadow: var(--e-2);
    animation: wa-fade-in var(--t-med) var(--ease-out);   /* enters IN PLACE (no rise): it is in its final slot from the first token */
  }
  .wa-review__row { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--ctl-sm); flex-wrap: wrap; }
  .wa-review__row--actions { justify-content: space-between; margin-left: calc(var(--sp-2) * -1); }   /* quiet buttons: icon on the 16px line */
  .wa-review__group { display: flex; align-items: center; gap: var(--sp-1); }
  .wa-review__group--end { margin-left: auto; }
  .wa-review__label { display: inline-flex; align-items: center; gap: var(--sp-2); flex: 0 1 auto; min-width: 0; font-weight: var(--fw-bold); font-size: var(--fs-label); line-height: var(--lh-label); }
  .wa-review__label .wa-i { color: var(--accent); }
  .wa-review__meta { color: var(--text-3); font-weight: var(--fw-regular); }
  .wa-review__nav { display: inline-flex; align-items: center; gap: var(--sp-half); margin-left: auto; color: var(--text-3); font-size: var(--fs-meta); line-height: var(--lh-meta); white-space: nowrap; }
  .wa-review__navflag { display: inline-flex; align-items: center; gap: var(--sp-1); margin-right: var(--sp-1); color: var(--warning); font-weight: var(--fw-bold); }
  /* The ACTIVE change is judged here, never in a popover over the text (round 4). The row HUGS its content with ONE
     symmetric inset (--row-pad) on every side. ✓/✕ sit in a fixed right column at a fixed offset from the row top and
     are centred on the FIRST text line: the pair is padded down by half the difference between the control height
     and the line height, so line centre = control centre at every viewport. No reserved lines, no clamp: a sentence
     suggestion is always shown in full. The slot (currentwrap) may reserve the tallest row of the review (JS). */
  .wa-review { --row-pad: var(--sp-2); --row-ctl: var(--ctl-sm); --row-lh: calc(1.5 * var(--fs-read-sm)); }
  .wa-review__currentwrap { display: block; margin: 0 calc(var(--row-pad) * -1); }   /* the row's tint reaches 8px past the text line */
  .wa-review__current {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; column-gap: var(--sp-3);
    min-height: calc(var(--row-ctl) + 2 * var(--row-pad));
    padding: var(--row-pad);
    border-radius: var(--r-sm); background: var(--surface-3);
  }
  .wa-review__pair {
    /* the TEXT (ink box) sits centred in the row (critic r4 m-3): the half-leading either side, corrected by Literata's
       ink offset (its glyph box rides .08em high in the line box) */
    --ink: .08em;
    display: block; min-width: 0;
    padding-top: calc(max(0px, (var(--row-ctl) - var(--row-lh)) / 2) + var(--ink));
    padding-bottom: calc(max(0px, (var(--row-ctl) - var(--row-lh)) / 2) - var(--ink));
    font-family: var(--font-page); font-size: var(--fs-read-sm); line-height: var(--row-lh); color: var(--text); overflow-wrap: break-word;
  }
  .wa-review__kind {
    margin-right: var(--sp-2); vertical-align: baseline;
    font: var(--fw-bold) var(--fs-meta)/1 var(--font-ui); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-3);
  }
  /* the model's reason sits between the kind and the change, with a real gap on BOTH sides (critic r5 m-1) */
  .wa-review__why { margin-right: var(--sp-3); font: var(--fw-regular) var(--fs-meta)/1 var(--font-ui); color: var(--text-3); white-space: nowrap; }
  .wa-review__change--short { white-space: nowrap; }   /* "practise → practice" never breaks at the arrow */
  .wa-review__left { margin-left: var(--sp-1); color: var(--text-3); white-space: nowrap; }
  .wa-review__kind .wa-i { display: inline-block; vertical-align: -2px; color: var(--warning); margin-right: var(--sp-1); }
  .wa-review__was { color: var(--text-2); }                     /* the original, readable: NOT struck in the bar */
  .wa-review__arrow { color: var(--text-3); font-family: var(--font-ui); margin: 0 var(--sp-1); }
  .wa-review__pair .wa-ins { padding: 0 .1em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
  .wa-review__ctl { display: flex; gap: var(--sp-1); height: var(--row-ctl); align-items: center; }
  .wa-review__pos { min-width: 5ch; text-align: center; }
  /* n = 1: no ✓/✕ to centre on, so the row is text + the symmetric inset only */
  .wa-review__current--solo { min-height: 0; }
  .wa-review__current--solo .wa-review__pair { padding-top: var(--ink); padding-bottom: 0; margin-bottom: calc(var(--ink) * -1); }
  .wa-review__pair .wa-del { text-decoration-thickness: 1px; }
  .wa-review__now--short { white-space: nowrap; }
  /* what just happened, in the head: "✓ Accepted · Undo" (after ONE decision; critic r4 m-5) */
  .wa-review__done { display: inline-flex; align-items: center; gap: var(--sp-1); min-width: 0; font-weight: var(--fw-regular); color: var(--text-2); }
  .wa-review__done > .wa-i { color: var(--ins); }
  .wa-review__undo { margin-left: var(--sp-1); }
  /* a flagged change asks first: the row becomes the question, the actions step aside (ONE primary on the surface) */
  .wa-review__confirm { grid-template-columns: minmax(0, 1fr); row-gap: var(--sp-2); background: var(--warning-tint); }
  .wa-review__confirmtext { display: flex; gap: var(--sp-2); align-items: flex-start; font-size: var(--fs-label); line-height: var(--lh-label); color: var(--text-2); }
  .wa-review__confirmtext .wa-i { color: var(--warning); flex: none; margin-top: 2px; }
  .wa-review__confirmtext b { color: var(--text); }
  .wa-review__confirmbtns { display: flex; justify-content: flex-end; gap: var(--sp-2); }
  .wa-review[data-confirming] :is(.wa-review__row--actions, .wa-review__flag) { display: none; }   /* the question replaces them */
  /* streaming: the bar is the review bar with only its label, progress and Stop showing; the decision controls keep
     their geometry (resolve moves nothing) but are not drawn: no wall of greyed buttons (critic r4 m-4) */
  .wa-review[data-state="streaming"] :is(.wa-review__ctl, .wa-review__row--actions) { visibility: hidden; }
  /* …and the kept actions line carries the reassurance instead (positioned over it, so the geometry is unchanged) */
  .wa-review__row--actions { position: relative; }
  .wa-review__streamnote { display: none; }
  .wa-review[data-state="streaming"] .wa-review__streamnote { display: block; visibility: visible; position: absolute; inset: 0 auto 0 var(--sp-2); align-content: center; font-size: var(--fs-label); line-height: var(--lh-label); color: var(--text-3); }
  /* a sticky bar that has left its passage fades the line it slides over (critic r3 m-5) */
  .wa-review[data-stuck="true"]::before, .wa-app[data-panel="peek"] .wa-review::before {
    content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% + var(--sp-px)); height: var(--sp-6);
    background: linear-gradient(to bottom, transparent, var(--canvas)); pointer-events: none;
  }
  .wa-chgbtn { display: inline-flex; align-items: center; gap: var(--sp-1); min-height: var(--ctl-sm); padding: 0 var(--sp-2); border-radius: var(--r-sm); font: var(--fw-medium) var(--fs-meta)/var(--lh-meta) var(--font-ui); color: var(--text); }
  .wa-chgbtn--ok:hover { background: var(--ins-tint); }          /* hover lightens toward the action's colour (critic r2 m-9) */
  .wa-chgbtn--no:hover { background: var(--del-tint); }
  .wa-chgbtn--ok .wa-i { color: var(--ins); }
  .wa-chgbtn--no .wa-i { color: var(--del); }
  .wa-review__actions { display: flex; align-items: center; gap: var(--sp-1); flex-wrap: wrap; }
  .wa-review__spacer { flex: 1 1 auto; }
  .wa-review__flag {
    display: flex; align-items: flex-start; gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-2) var(--sp-2) 0; border-top: var(--sp-px) solid var(--border);
    font-size: var(--fs-label); line-height: var(--lh-label); color: var(--text-2);
  }
  .wa-review__flag .wa-i { color: var(--warning); margin-top: 2px; flex: none; }
  .wa-review__flag b { color: var(--text); }
  /* one row while streaming; the error bar is two rows: what happened, then the actions (critic r1 m3, m12) */
  .wa-review__stop { margin-left: auto; min-height: var(--ctl-sm); }
  .wa-review[data-state="streaming"] .wa-chgbtn[disabled] { color: var(--text-disabled); cursor: default; }
  .wa-review[data-state="streaming"] .wa-chgbtn[disabled] .wa-i { color: var(--text-disabled); }
  .wa-review[data-state="streaming"] .wa-review__label .wa-i { animation: wa-pulse 1.2s var(--ease-in-out) infinite; }
  .wa-review[data-state="error"] { border-color: color-mix(in srgb, var(--del) 45%, var(--border-strong)); }
  .wa-review[data-state="error"] .wa-review__label .wa-i { color: var(--del); }
  .wa-review__msg { color: var(--text-2); font-size: var(--fs-label); line-height: var(--lh-label); min-width: 0; }
  .wa-review__msg b { color: var(--text); font-weight: var(--fw-medium); }
  .wa-review__save { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); border-top: var(--sp-px) solid var(--border); padding-top: var(--sp-2); font-size: var(--fs-label); line-height: var(--lh-label); color: var(--text-2); }
  .wa-review__save .wa-i { color: var(--accent); }
  .wa-review__save .wa-card__link { display: inline-flex; align-items: center; min-height: var(--sp-6); font-weight: var(--fw-medium); }
  .wa-menu__item[data-kbd-active="true"] { background: var(--surface-3); }
  @media (hover: none) { .wa-menu__item[data-kbd-active="true"] { background: transparent; } }   /* no pre-highlight on touch (critic r2 polish 2) */

  /* Rewrite ×3 picker */
  .wa-variants {
    position: relative; z-index: var(--z-bar);   /* its sticky footer is never under the scroller's edge fade (contract: variants-primary) */
    border-radius: var(--r-lg); border: var(--sp-px) solid var(--border-strong);
    background: var(--surface-2); box-shadow: var(--e-2);
  }
  .wa-variants__head { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-3) var(--sp-2) var(--sp-4); }
  .wa-variants__head .wa-i { color: var(--accent); }
  .wa-variants__title { font-weight: var(--fw-bold); flex: 1; min-width: 0; }
  .wa-variants__list { display: flex; flex-direction: column; padding: 0 var(--sp-2); gap: var(--sp-1); }
  .wa-variant {
    display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--sp-3); align-items: start;
    width: 100%; padding: var(--sp-3); border-radius: var(--r-md);
    border: var(--sp-px) solid transparent; text-align: left;
    transition: background-color var(--t-fast), border-color var(--t-fast);
  }
  .wa-variant:hover { background: var(--surface-3); }
  .wa-variant[aria-checked="true"] { background: var(--accent-tint); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
  .wa-variant__key { margin-top: var(--sp-half); }
  .wa-variant__body { display: flex; flex-direction: column; gap: var(--sp-1); }
  .wa-variant__tag { font-size: var(--fs-meta); line-height: var(--lh-meta); font-weight: var(--fw-bold); color: var(--text-3); letter-spacing: var(--ls-caps); text-transform: uppercase; }
  .wa-variant[aria-checked="true"] .wa-variant__tag { color: var(--accent); }
  .wa-variant__text { font-family: var(--font-page); font-size: var(--fs-read-sm); line-height: 1.6; color: var(--text); }
  /* the footer (with the primary) sticks to the bottom of the viewport while the card is taller than the space (critic r1 M6) */
  .wa-variants__foot {
    position: sticky; bottom: 0; z-index: 1;
    display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3); margin-top: var(--sp-2);
    border-top: var(--sp-px) solid var(--border); background: var(--surface-2); border-radius: 0 0 var(--r-lg) var(--r-lg);
  }
  .wa-variants__foot .wa-help { flex: 1; min-width: 0; }

  /* Consent / limit / save-account cards: one component, three contents */
  .wa-card {
    border-radius: var(--r-lg); border: var(--sp-px) solid var(--border-strong);
    background: var(--surface-2); box-shadow: var(--e-2);
    padding: var(--sp-5);
    display: flex; flex-direction: column; gap: var(--sp-3);
    max-width: 100%;
  }
  .wa-card--flat { box-shadow: none; }
  .wa-card__head { display: flex; align-items: flex-start; gap: var(--sp-3); }
  .wa-card__icon { display: grid; place-items: center; width: var(--sp-8); height: var(--sp-8); flex: none; border-radius: var(--r-md); background: var(--accent-tint); color: var(--accent); }
  .wa-card__icon--warn { background: var(--warning-tint); color: var(--warning); }
  .wa-card__title { font-size: var(--fs-title); line-height: var(--lh-title); font-weight: var(--fw-bold); margin-bottom: var(--sp-1); }
  .wa-card__text { color: var(--text-2); font-size: var(--fs-label); line-height: var(--lh-label); max-width: 64ch; }
  .wa-card__list { display: flex; flex-direction: column; gap: var(--sp-2); font-size: var(--fs-label); line-height: var(--lh-label); color: var(--text-2); }
  .wa-card__list li { display: flex; gap: var(--sp-2); align-items: flex-start; }
  .wa-card__list .wa-i { color: var(--accent); margin-top: 2px; }
  .wa-card__actions { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; padding-top: var(--sp-1); }
  .wa-card__actions .wa-help { flex: 1 1 200px; }
  .wa-card__link { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

  /* ═════════════════════════ Assistant panel contents ═════════════════════════ */
  .wa-usagepill {
    display: inline-flex; align-items: center; gap: var(--sp-1);
    min-height: var(--sp-6); padding: 0 var(--sp-2); border-radius: var(--r-pill);
    background: var(--surface-3); color: var(--text-2);
    font: var(--fw-medium) var(--fs-meta)/var(--lh-meta) var(--font-ui); white-space: nowrap;
  }
  .wa-usagepill[data-level="low"], .wa-usagepill[data-level="out"] { background: var(--warning-tint); color: var(--warning); }

  .wa-scope {
    display: flex; align-items: center; gap: var(--sp-2);
    min-height: var(--ctl-md); padding: var(--sp-1) var(--sp-1) var(--sp-1) var(--sp-3);
    border-radius: var(--r-md); background: var(--surface-2);
    font-size: var(--fs-label); line-height: var(--lh-label); color: var(--text-2);
  }
  .wa-scope__label { color: var(--text-3); flex: none; }
  .wa-scope__value { min-width: 0; flex: 1; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .wa-scope[data-kind="selection"] { background: var(--accent-tint); }
  .wa-scope[data-kind="selection"] .wa-scope__value { font-family: var(--font-page); font-style: italic; }

  .wa-sectionlabel { font-size: var(--fs-meta); line-height: var(--lh-meta); font-weight: var(--fw-bold); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-3); }
  .wa-intro { color: var(--text-2); font-size: var(--fs-label); line-height: var(--lh-label); }

  .wa-actionlist { display: flex; flex-direction: column; gap: var(--sp-half); margin: 0 calc(var(--sp-2) * -1); }
  .wa-action {
    display: grid; grid-template-columns: var(--sp-8) minmax(0, 1fr); align-items: center; column-gap: var(--sp-3);
    width: 100%; min-height: var(--sp-12); padding: var(--sp-2);
    border-radius: var(--r-md); text-align: left; color: var(--text);
    transition: background-color var(--t-fast);
  }
  .wa-action:hover { background: var(--surface-3); }
  .wa-action__icon { display: grid; place-items: center; width: var(--sp-8); height: var(--sp-8); border-radius: var(--r-md); background: var(--surface-2); color: var(--accent); }
  .wa-action__text { display: flex; flex-direction: column; min-width: 0; }
  .wa-action__title { display: flex; align-items: baseline; gap: var(--sp-2); font-weight: var(--fw-medium); font-size: var(--fs-body); line-height: var(--lh-body); }
  .wa-action__desc { font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--text-3); }

  .wa-thread { display: flex; flex-direction: column; gap: var(--sp-4); }
  .wa-msg { display: flex; flex-direction: column; gap: var(--sp-2); max-width: 100%; }
  .wa-msg--user { align-self: flex-end; max-width: 88%; }
  .wa-msg--user .wa-msg__body { background: var(--surface-3); border-radius: var(--r-lg) var(--r-lg) var(--r-sm) var(--r-lg); padding: var(--sp-2) var(--sp-3); }
  .wa-msg__who { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--text-3); font-weight: var(--fw-medium); }
  .wa-msg__who .wa-i { color: var(--accent); }
  .wa-msg__body { font-size: var(--fs-body); line-height: 1.55; color: var(--text); overflow-wrap: anywhere; }
  .wa-msg__body p + p, .wa-msg__body p + ul, .wa-msg__body ul + p { margin-top: var(--sp-2); }
  .wa-msg__body ul { display: flex; flex-direction: column; gap: var(--sp-1); padding-left: var(--sp-4); list-style: disc; }
  .wa-msg__draft {
    padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--canvas); border: var(--sp-px) solid var(--border);
    font-family: var(--font-page); font-size: var(--fs-read-sm); line-height: 1.65; color: var(--text);
  }
  .wa-msg__quote { font-family: var(--font-page); font-style: italic; color: var(--text-2); font-size: var(--fs-label); line-height: var(--lh-label); }
  .wa-msg__actions { display: flex; flex-wrap: wrap; gap: var(--sp-1); }

  /* Feedback card */
  .wa-fb { display: flex; flex-direction: column; gap: var(--sp-4); }
  .wa-fb__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
  .wa-fb__stat { padding: var(--sp-3); border-radius: var(--r-md); background: var(--surface-2); display: flex; flex-direction: column; gap: var(--sp-half); }
  .wa-fb__k { font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--text-3); }
  .wa-fb__v { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--fw-bold); }
  .wa-fb__lands { display: flex; flex-direction: column; gap: var(--sp-2); font-size: var(--fs-label); line-height: var(--lh-label); color: var(--text-2); }
  .wa-fb__lands li { display: flex; gap: var(--sp-2); }
  .wa-fb__lands .wa-i { color: var(--success); margin-top: 2px; }
  .wa-fix { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3); border-radius: var(--r-md); border: var(--sp-px) solid var(--border); }
  .wa-fix__n { font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--text-3); font-weight: var(--fw-bold); }
  .wa-jump {
    display: block; min-height: var(--sp-6); padding: var(--sp-half) 0; text-align: left; color: var(--text); font-family: var(--font-page); font-style: italic;
    font-size: var(--fs-label); line-height: var(--lh-label);
    text-decoration: underline; text-decoration-color: var(--border-control); text-underline-offset: 3px;
    border-radius: var(--r-sm);
  }
  .wa-jump:hover { text-decoration-color: var(--accent); }
  .wa-jump .wa-i { display: inline-block; vertical-align: -2px; margin-left: var(--sp-1); color: var(--accent); }
  .wa-fix__why { font-size: var(--fs-label); line-height: var(--lh-label); color: var(--text-2); }
  .wa-fix__row { display: flex; gap: var(--sp-1); flex-wrap: wrap; }

  /* Proofread results list */
  .wa-proof { display: flex; flex-direction: column; gap: var(--sp-1); }
  .wa-proof__item { border-radius: var(--r-md); }
  .wa-proof__item:hover { background: var(--surface-2); }
  .wa-proof__item[aria-current="true"] { background: var(--surface-3); box-shadow: inset 2px 0 0 var(--accent); }   /* = the bar's active change (critic r3 m-4) */
  .wa-proof__item[data-state="accepted"] { opacity: .75; }
  .wa-proof__change { display: block; width: 100%; text-align: left; padding: var(--sp-2) var(--sp-3); border-radius: inherit; font-family: var(--font-page); font-size: var(--fs-read-sm); line-height: 1.5; min-width: 0; color: var(--text); }
  .wa-proof__where { display: block; font-family: var(--font-ui); font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--text-3); }

  /* Composer */
  .wa-composer {
    display: flex; flex-direction: column; gap: var(--sp-2);
    padding: var(--sp-2); border-radius: var(--r-lg);
    border: var(--sp-px) solid var(--border-strong); background: var(--canvas);
    transition: border-color var(--t-fast);
  }
  .wa-composer:focus-within { border-color: var(--border-control); }
  .wa-composer__input {
    width: 100%; min-height: var(--sp-12); max-height: 200px; resize: none;
    padding: var(--sp-1) var(--sp-2); border: 0; background: transparent; color: var(--text);
    font-size: var(--fs-input); line-height: var(--lh-body);
  }
  .wa-composer__input:focus-visible { outline: none; }
  .wa-composer__input::placeholder { color: var(--text-3); opacity: 1; }
  .wa-composer__row { display: flex; align-items: center; gap: var(--sp-2); }
  .wa-composer__hint { flex: 1; min-width: 0; font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--text-3); }
  .wa-composer .wa-scope { background: var(--surface-2); }
  .wa-send { width: var(--ctl-md); height: var(--ctl-md); padding: 0; border-radius: var(--r-md); }
  .wa-send[disabled] { background: var(--surface-3); color: var(--text-3); border-color: transparent; }   /* quiet until there is input (critic r1 m14) */

  /* ═════════════════════════ Banners, find bar, toasts ═════════════════════════ */
  .wa-banner {
    display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
    margin: var(--sp-2) auto 0; width: calc(100% - 2 * var(--sp-4)); max-width: var(--chromebar-w);
    padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4);
    border-radius: var(--r-md);
    background: var(--warning-tint); color: var(--text);
    font-family: var(--font-page); font-size: calc(var(--page-fs) * var(--page-scale, 1)); font-weight: var(--fw-page);   /* so --chromebar-w resolves in the page's ch */
  }
  .wa-banner > *, .wa-findbar > * { font-family: var(--font-ui); font-size: var(--fs-label); line-height: var(--lh-label); font-weight: var(--fw-regular); }
  .wa-banner > .wa-i { color: var(--warning); }
  .wa-banner__text { flex: 1 1 240px; min-width: 0; }
  .wa-banner__text strong { font-weight: var(--fw-bold); }
  .wa-banner__actions { display: flex; gap: var(--sp-1); flex-wrap: wrap; }

  .wa-findbar {
    display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
    margin: var(--sp-2) auto 0; width: calc(100% - 2 * var(--sp-4)); max-width: var(--chromebar-w);
    padding: var(--sp-2);
    font-family: var(--font-page); font-size: calc(var(--page-fs) * var(--page-scale, 1)); font-weight: var(--fw-page);   /* same ch as the column → --chromebar-w (critic r2 m-1) */
    border-radius: var(--r-md); border: var(--sp-px) solid var(--border-strong);
    background: var(--surface-2); box-shadow: var(--e-1);
  }
  .wa-findbar__field { position: relative; flex: 1 1 200px; display: flex; align-items: center; }
  .wa-findbar__field .wa-input { min-height: var(--ctl-md); padding-right: 76px; font-size: var(--fs-label); }
  .wa-findbar__count { position: absolute; right: var(--sp-3); font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--text-3); white-space: nowrap; }
  .wa-findbar__group { display: flex; align-items: center; gap: var(--sp-1); }

  .wa-toasts {
    position: absolute; left: 50%; bottom: var(--sp-12); z-index: var(--z-toast);
    translate: -50% 0;
    display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
    pointer-events: none;
  }
  .wa-toast {
    pointer-events: auto;
    display: flex; align-items: center; gap: var(--sp-3);
    min-height: var(--ctl-lg); padding: var(--sp-1) var(--sp-1) var(--sp-1) var(--sp-4);
    border-radius: var(--r-md); background: var(--surface-3); color: var(--text); box-shadow: var(--e-2);
    font-size: var(--fs-label); line-height: var(--lh-label); white-space: nowrap;
    animation: wa-rise var(--t-med) var(--ease-out);
  }
  .wa-toast .wa-i { color: var(--success); }

  /* ═════════════════════════ Dialogs (native <dialog>, the one primitive) ═════════════════════════ */
  .wa-dialog {
    padding: 0;
    width: min(var(--dialog-w), calc(100vw - 2 * var(--sp-6)));
    max-height: min(760px, calc(100dvh - 2 * var(--sp-8)));
    margin: auto;
    border-radius: var(--r-lg); border: var(--sp-px) solid var(--border-strong);
    background: var(--surface-1); color: var(--text); box-shadow: var(--e-3);
    display: flex; flex-direction: column; overflow: hidden;
  }
  .wa-dialog:not([open]) { display: none; }
  .wa-dialog::backdrop { background: var(--backdrop); }
  .wa-dialog--fixed { height: min(640px, calc(100dvh - 2 * var(--sp-8))); }   /* no resize between tabs (critic r2 m-5) */
  .wa-dialog[open] { animation: wa-dialog-in var(--t-slow) var(--ease-out); }
  .wa-dialog--lg { width: min(var(--dialog-w-lg), calc(100vw - 2 * var(--sp-6))); }
  .wa-dialog__head { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-5) var(--sp-4) var(--sp-3) var(--sp-6); flex: none; }
  .wa-dialog__titles { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
  .wa-dialog__title { font-size: var(--fs-display); line-height: var(--lh-display); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); }
  .wa-dialog__sub { font-size: var(--fs-label); line-height: var(--lh-label); color: var(--text-3); }
  .wa-dialog__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--sp-2) var(--sp-6) var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-5); }
  .wa-dialog__foot { flex: none; display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-2); padding: var(--sp-4) var(--sp-6); border-top: var(--sp-px) solid var(--border); }
  .wa-dialog__foot .wa-help { flex: 1; min-width: 0; }

  /* Settings: vertical tabs */
  .wa-settings { display: grid; grid-template-columns: 200px minmax(0, 1fr); min-height: 0; flex: 1 1 auto; }
  .wa-tabs { display: flex; flex-direction: column; gap: var(--sp-half); padding: var(--sp-2) var(--sp-3) var(--sp-6); border-right: var(--sp-px) solid var(--border); }
  .wa-tab {
    display: flex; align-items: center; gap: var(--sp-3); min-height: var(--ctl-md); padding: 0 var(--sp-3);
    border-radius: var(--r-sm); color: var(--text-2); font-size: var(--fs-label); line-height: var(--lh-label); font-weight: var(--fw-medium); text-align: left;
  }
  .wa-tab:hover { background: var(--surface-3); color: var(--text); }
  .wa-tab[aria-selected="true"] { background: var(--surface-3); color: var(--text); }
  .wa-tab[aria-selected="true"] .wa-i { color: var(--accent); }
  .wa-tabpanel { padding: var(--sp-2) var(--sp-6) var(--sp-6); overflow-y: auto; display: flex; flex-direction: column; gap: var(--sp-6); }
  .wa-tabstack { display: flex; flex-direction: column; gap: var(--sp-5); }
  .wa-setting { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sp-2) var(--sp-4); }
  .wa-setting--stack { grid-template-columns: minmax(0, 1fr); }
  .wa-setting__text { display: flex; flex-direction: column; gap: var(--sp-half); min-width: 0; }
  .wa-hr { height: var(--sp-px); background: var(--border); border: 0; margin: 0; }
  .wa-themes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
  .wa-themecard {
    display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-2);
    border-radius: var(--r-lg); border: var(--sp-px) solid var(--border-strong); text-align: left;
    font-size: var(--fs-label); line-height: var(--lh-label); font-weight: var(--fw-medium);
  }
  .wa-themecard[aria-checked="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
  .wa-themecard__swatch { height: 72px; border-radius: var(--r-md); padding: var(--sp-3); display: flex; flex-direction: column; gap: 6px; }
  .wa-themecard__swatch--dark { background: var(--pv-dark-bg); }
  .wa-themecard__swatch--paper { background: var(--pv-paper-bg); }
  .wa-themecard__line { height: 6px; border-radius: 3px; }
  .wa-themecard__swatch--dark .wa-themecard__line { background: var(--pv-dark-line); }
  .wa-themecard__swatch--paper .wa-themecard__line { background: var(--pv-paper-line); }
  .wa-themecard__line:nth-child(1) { width: 62%; }
  .wa-themecard__line:nth-child(2) { width: 88%; }
  .wa-themecard__line:nth-child(3) { width: 74%; }
  .wa-themecard[aria-checked="false"] .wa-themecard__label .wa-i { visibility: hidden; }
  .wa-dialog__title:focus { outline: none; }   /* focused programmatically on open (tabindex=-1) so SR users start at the title */
  .wa-themecard__label { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--sp-1) var(--sp-1); }
  .wa-danger-zone { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4); border-radius: var(--r-lg); background: var(--del-tint); }
  .wa-danger-zone .wa-label { color: var(--del); }

  /* History */
  .wa-history { display: grid; grid-template-columns: 260px minmax(0, 1fr); min-height: 0; flex: 1 1 auto; }
  .wa-history__list { border-right: var(--sp-px) solid var(--border); padding: var(--sp-2) var(--sp-2) var(--sp-4); overflow-y: auto; display: flex; flex-direction: column; gap: var(--sp-half); }
  .wa-snap {
    display: flex; flex-direction: column; gap: var(--sp-half); width: 100%; padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-md); text-align: left; color: var(--text-2);
  }
  .wa-snap:hover { background: var(--surface-3); color: var(--text); }
  .wa-snap { position: relative; }
  .wa-snap[aria-selected="true"] { background: var(--surface-3); color: var(--text); }
  .wa-snap[aria-selected="true"]::before { content: ""; position: absolute; left: 0; top: var(--sp-3); bottom: var(--sp-3); width: var(--sp-half); border-radius: var(--r-pill); background: var(--accent); }
  .wa-snap__time { font-size: var(--fs-label); line-height: var(--lh-label); font-weight: var(--fw-medium); }
  .wa-snap__meta { font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--text-3); display: flex; gap: var(--sp-2); flex-wrap: wrap; }
  .wa-snap__tag { color: var(--accent); }
  .wa-history__preview { padding: var(--sp-4) var(--sp-8) var(--sp-6); overflow-y: auto; background: var(--canvas); }
  .wa-history__preview .wa-prose { font-family: var(--font-page); font-size: var(--fs-lede); line-height: 1.7; max-width: 60ch; }

  /* Shortcuts */
  .wa-shortcuts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6) var(--sp-8); }
  .wa-shortcuts__group { display: flex; flex-direction: column; gap: var(--sp-1); }
  .wa-shortcuts__row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: var(--sp-8); font-size: var(--fs-label); line-height: var(--lh-label); color: var(--text-2); border-bottom: var(--sp-px) solid var(--border); }

  /* Template grid (starter "Start from a template") */
  .wa-tpls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }

  /* Templates picker */
  .wa-tpl {
    display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3);
    border-radius: var(--r-lg); border: var(--sp-px) solid var(--border-strong); text-align: left; background: var(--surface-1);
    transition: border-color var(--t-fast), background-color var(--t-fast);
  }
  .wa-tpl:hover { background: var(--surface-3); }
  .wa-tpl[aria-checked="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 var(--sp-px) var(--accent); background: var(--accent-tint); }
  .wa-tpl__name { display: flex; align-items: center; gap: var(--sp-2); font-weight: var(--fw-bold); font-size: var(--fs-body); line-height: var(--lh-body); }
  .wa-tpl__name .wa-i { color: var(--text-2); }
  .wa-tpl[aria-checked="true"] .wa-tpl__name .wa-i { color: var(--accent); }
  .wa-tpl__preview {
    font-family: var(--font-page); font-size: var(--fs-label); line-height: var(--lh-label); color: var(--text-2);
    padding-top: var(--sp-2); border-top: var(--sp-px) solid var(--border);
  }
  .wa-tpl__preview b { color: var(--text); font-weight: var(--fw-page-bold); }
  .wa-tpl__meta { font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--text-3); min-height: calc(2 * var(--lh-meta)); }   /* dividers line up (critic r2 m-4) */

  /* Brand voices (local to this browser) */
  .wa-voices { display: flex; flex-direction: column; gap: var(--sp-2); }
  .wa-voice {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sp-1) var(--sp-3);
    padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--surface-2);
  }
  .wa-voice[aria-current="true"] { box-shadow: inset 3px 0 0 var(--accent); }
  .wa-voice__name { font-weight: var(--fw-bold); font-size: var(--fs-body); line-height: var(--lh-body); display: flex; gap: var(--sp-2); align-items: baseline; flex-wrap: wrap; }
  .wa-voice__card { grid-column: 1 / -1; font-family: var(--font-page); font-style: italic; font-size: var(--fs-read-sm); line-height: 1.5; color: var(--text-2); }
  .wa-voice__tag { font: var(--fw-medium) var(--fs-meta)/var(--lh-meta) var(--font-ui); color: var(--accent); font-style: normal; }
  .wa-voicecard {
    padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--accent-tint);
    font-family: var(--font-page); font-size: var(--fs-read-sm); line-height: 1.55; color: var(--text);
  }

  /* Guest: tap-to-try chip under the sample paragraph (critic r1 M11) */
  .wa-coachchip { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin-top: var(--sp-3); font-family: var(--font-ui); }
  .wa-coachchip .wa-btn .wa-i { color: var(--accent); }
  .wa-coachchip__alt { font-size: var(--fs-label); line-height: var(--lh-label); color: var(--text-3); }

  /* ═════════════════════════ Motion ═════════════════════════ */
  @keyframes wa-pop-in { from { opacity: 0; transform: translateY(4px) scale(.98); } to { opacity: 1; transform: none; } }
  @keyframes wa-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  @keyframes wa-dialog-in { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }

  @media (prefers-reduced-motion: reduce) {
    .wa-menu, .wa-pop, .wa-selbar, .wa-inline, .wa-toast, .wa-dialog[open] { animation: none; }
    .wa-review[data-state="streaming"] .wa-review__label .wa-i { animation: none; }
  }

  /* ═════════════════════════ Responsive ═════════════════════════ */
  @media (max-width: 1023.98px) {
    /* tablet: while the assistant sheet peeks, the review bar docks above it as on phones */
    .wa-app[data-panel="peek"] .wa-toasts { bottom: calc(var(--peek-h) + var(--sp-4)); }   /* a toast never covers the peeking sheet */
    .wa-app[data-panel="peek"] .wa-review__ctl { align-self: end; }   /* docked: fixed to the bottom anchor edge */
    .wa-app[data-panel="peek"] .wa-review__head { order: -2; }
    .wa-app[data-panel="peek"] .wa-review__flag { order: -1; }
    .wa-app[data-panel="peek"] .wa-review {
      position: fixed; left: 0; right: 0; bottom: var(--dock-bottom);
      z-index: var(--z-dock); margin: 0; box-shadow: var(--e-3); border-radius: var(--r-lg) var(--r-lg) 0 0; border-bottom-width: 0;
    }
    .wa-tpls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  @media (max-width: 767.98px) {
    /* Selection bar docks above the keyboard (bottom inset from visualViewport, set as --kb by JS). */
    .wa-selbar {
      position: fixed; left: var(--sp-2); right: var(--sp-2); bottom: calc(var(--kb, 0px) + var(--sp-2));
      top: auto; height: auto; min-height: 52px; padding: var(--sp-1);
      justify-content: space-between;
      border-radius: var(--r-lg);
    }
    .wa-selbar__btn { height: var(--target); padding: 0 var(--sp-2); }
    .wa-selbar__btn--icon { width: var(--target); }

    /* The review bar DOCKS at the bottom (above the keyboard and above a peeking assistant sheet), thumb-reachable,
       Accept all on the right at full remaining width; Try again / Insert below move into ⋯ (critic r1 M8). */
    .wa-review {
      position: fixed; left: var(--sp-2); right: var(--sp-2); bottom: calc(var(--kb, 0px) + var(--dock-bottom) + var(--sp-2));
      z-index: var(--z-dock); margin: 0; padding: var(--sp-3); border-radius: var(--r-lg); box-shadow: var(--e-3);
    }
    .wa-review .wa-btn { min-height: var(--target); }
    /* ONE card shape on phones for streaming AND review: the head row (label · k of N, or label · Stop) shows in both */
    .wa-review__nav .wa-iconbtn { width: var(--target); height: var(--target); }
    .wa-review { padding: var(--sp-1) var(--sp-4) var(--sp-2); gap: var(--sp-1); --row-ctl: var(--target); --row-pad: var(--sp-1); }
    .wa-review__head { min-height: var(--target); flex-wrap: nowrap; }
    .wa-review__label:has(.wa-review__done) .wa-review__name { display: none; }   /* phone: "✓ Accepted · Undo" replaces the verb; k of N says what is left */
    .wa-review__label { overflow: hidden; }
    .wa-review__meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    /* docked flush to the bottom edge (no sliver of cut text under it), full width, safe-area aware */
    .wa-app[data-reviewing="true"] .wa-review { left: 0; right: 0; bottom: calc(var(--kb, 0px) + var(--dock-bottom)); border-radius: var(--r-lg) var(--r-lg) 0 0; border-width: var(--sp-px) 0 0; padding-bottom: calc(var(--sp-2) + env(safe-area-inset-bottom)); }
    .wa-app[data-reviewing="true"] .wa-review::before {
      content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% + var(--sp-px)); height: var(--sp-6);
      background: linear-gradient(to bottom, transparent, var(--canvas)); pointer-events: none;
    }
    .wa-review__save { font-size: var(--fs-meta); line-height: var(--lh-meta); padding-top: var(--sp-1); }
    /* the streaming row reserves two text lines on a phone (the tallest word-level row), so resolving rarely grows it */
    /* docked: the anchor edge is the bottom (the screen edge), so ✓/✕ ride the LAST judged line: fixed to the anchor */
    .wa-review__ctl { align-self: end; }
    /* docked: the flag note sits ABOVE the change row, so the row + actions keep their distance from the anchor edge */
    .wa-review__head { order: -2; }
    .wa-review__flag { order: -1; }
    .wa-chgbtn { min-height: var(--target); width: var(--target); justify-content: center; padding: 0; }
    .wa-review__row--actions { flex-wrap: nowrap; margin-left: 0; }
    .wa-review__row--actions .wa-review__group--end { flex: 1 1 auto; }
    .wa-review__row--actions .wa-review__group--end .wa-btn--primary { flex: 1 1 auto; }

    /* Rewrite ×3 on phones: a bottom sheet with the options scrolling and the primary pinned (critic r1 M6) */
    .wa-variants {
      position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-dock); margin: 0;
      max-height: 70dvh; display: flex; flex-direction: column;
      border-radius: var(--r-xl) var(--r-xl) 0 0; border-width: var(--sp-px) 0 0; box-shadow: var(--e-3);
    }
    .wa-variants__list { overflow-y: auto; min-height: 0; flex: 1 1 auto; }
    .wa-variants__foot { border-radius: 0; flex-wrap: wrap; }
    .wa-variants__foot .wa-help { flex-basis: 100%; }
    .wa-variants__foot .wa-btn--primary { flex: 1 1 auto; min-height: var(--target); }
    .wa-variants__foot .wa-btn--quiet { min-height: var(--target); }

    .wa-card { padding: var(--sp-4); }
    .wa-card__actions .wa-btn { flex: 1 1 auto; min-height: var(--target); }

    /* phone: menus and popovers become bottom sheets; the 100vmax spread shadow is their scrim */
    .wa-menu { position: fixed; left: var(--sp-2); right: var(--sp-2); bottom: var(--sp-2); top: auto; max-width: none; border-radius: var(--r-lg); box-shadow: 0 0 0 100vmax var(--scrim), var(--e-3); }
    .wa-menu[data-from="selbar"] { bottom: calc(var(--kb, 0px) + var(--sp-2)); }
    .wa-menu__item { min-height: var(--target); }
    .wa-pop { position: fixed; left: var(--sp-2); right: var(--sp-2); bottom: var(--sp-2); top: auto; width: auto; max-width: none; box-shadow: 0 0 0 100vmax var(--scrim), var(--e-3); }

    .wa-iconbtn { width: var(--target); height: var(--target); }
    .wa-iconbtn--sm { width: var(--ctl-md); height: var(--ctl-md); }

    /* Dialogs become full-width bottom sheets */
    .wa-dialog, .wa-dialog--lg {
      width: 100vw; max-width: 100vw; max-height: 92dvh;
      margin: auto 0 0; border-radius: var(--r-xl) var(--r-xl) 0 0;
      border-left: 0; border-right: 0; border-bottom: 0;
    }
    .wa-dialog__head { padding: var(--sp-4) var(--sp-2) var(--sp-2) var(--sp-5); }
    .wa-dialog__body { padding: var(--sp-2) var(--sp-5) var(--sp-5); }
    .wa-dialog__foot { padding: var(--sp-3) var(--sp-5) calc(var(--sp-3) + env(safe-area-inset-bottom)); flex-wrap: wrap; }
    .wa-dialog__foot .wa-btn { min-height: var(--target); flex: 1 1 auto; }
    .wa-dialog__foot .wa-help { flex-basis: 100%; }
    .wa-settings, .wa-history { grid-template-columns: minmax(0, 1fr); }
    .wa-tabs { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: var(--sp-px) solid var(--border); padding: 0 var(--sp-4) var(--sp-2); }
    .wa-tab { flex: 1 1 auto; justify-content: center; min-height: var(--target); padding: 0 var(--sp-2); }
    .wa-tab .wa-i { display: none; }
    .wa-tabpanel { padding: var(--sp-4) var(--sp-5) var(--sp-5); }
    .wa-history__list { border-right: 0; border-bottom: var(--sp-px) solid var(--border); flex-direction: row; overflow-x: auto; max-height: none; padding: var(--sp-2) var(--sp-4); }
    .wa-snap { width: auto; flex: none; min-width: 168px; }
    .wa-history__preview { padding: var(--sp-4) var(--sp-5); }
    .wa-shortcuts { grid-template-columns: minmax(0, 1fr); }
    .wa-themes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .wa-setting { grid-template-columns: minmax(0, 1fr); }
    .wa-tpls { grid-template-columns: minmax(0, 1fr); }
    .wa-tpl__preview { display: none; }
    .wa-fb__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .wa-findbar { width: calc(100% - 2 * var(--sp-2)); }
    .wa-findbar .wa-iconbtn { width: var(--target); height: var(--target); }
    .wa-banner { width: calc(100% - 2 * var(--sp-2)); }
    .wa-banner .wa-btn { min-height: var(--target); }
    .wa-toasts { bottom: var(--sp-20); }
    .wa-btn { min-height: var(--ctl-lg); }
    .wa-btn--sm { min-height: var(--ctl-md); }
    .wa-seg__btn { min-height: var(--ctl-lg); }
    .wa-action { min-height: 56px; }
  }

  /* ───────────────────────── App integration (round 6, lifted from the app's app-extra.css; a11y round 43) ─────────────────────────
     The app floats in-flow UI in the page layer over a spacer in the text; reflow at 320px and 200% zoom. */
  .wa-aislot-space { display: block; pointer-events: none; }
  .wa-floatlayer > .wa-overlay { position: absolute; z-index: var(--z-page-float); }
  .wa-floatlayer > .wa-review.wa-overlay { z-index: var(--z-bar); }
  .wa-floatlayer > .wa-streamblock { font-size: calc(var(--page-fs) * var(--page-scale, 1)); line-height: var(--page-lh); }
  .wa-floatlayer > .wa-starters, .wa-floatlayer > .wa-coachchip { font-size: var(--fs-body); }
  .wa-scroller { scroll-padding-bottom: var(--dock-h, 0px); }
  .wa-composer:focus-within { outline: var(--sp-half) solid var(--accent); outline-offset: var(--sp-half); }
  @media (max-width: 767.98px) {
    .wa-floatlayer > .wa-review.wa-overlay, .wa-floatlayer > .wa-variants.wa-overlay { position: fixed; }
    .wa-app:has(.wa-floatlayer > .wa-variants) .wa-statusline { visibility: hidden; }
  }
  @media (max-width: 359.98px) {
    .wa-review__row--actions { flex-wrap: wrap; row-gap: var(--sp-1); }
    .wa-review__row--actions .wa-review__group--end { flex: 1 1 100%; justify-content: flex-end; }
    .wa-review__actions { flex-wrap: wrap; }
    .wa-review__actions .wa-btn--primary { flex: 1 1 auto; }
    .wa-selbar { flex-wrap: wrap; }
    .wa-selbar__ask .wa-kbd { display: none; }
    .wa-variants { max-height: 55dvh; }
    .wa-history__list { flex-direction: column; overflow-x: hidden; overflow-y: auto; max-height: 40dvh; }
    .wa-history__list .wa-snap { min-width: 0; width: 100%; flex: none; }
  }
  @media (max-height: 520px) {
    .wa-app[data-reviewing="true"][data-panel="peek"] { --peek-h: var(--target); }
    .wa-review__why, .wa-review__save { display: none; }
    .wa-review__current { max-height: calc(3 * var(--row-lh)); overflow-y: auto; }
    .wa-variants { max-height: 50dvh; }
  }

  /* grounding note in a review bar: names the marks, in the accent (a hint), never the warning amber */
  .wa-ground-note { display: flex; align-items: flex-start; gap: var(--sp-2); padding: var(--sp-2) var(--sp-2) var(--sp-2) 0; border-top: var(--sp-px) solid var(--border); font-size: var(--fs-label); line-height: var(--lh-label); color: var(--text-2); }
  .wa-ground-note .wa-i { color: var(--accent); flex: none; margin-top: 2px; }
  .wa-ground-note b { color: var(--text); font-weight: var(--fw-medium); }
  .wa-ground-note[data-pending="true"] { color: var(--text-3); }
}