/* Writing Assistant · the page: typography, title, first run, and every editor decoration
   (selection, diff, stream, find match). docs/09-VISUAL-SPEC.md §4 and §7.
   In production `.wa-doc` is the ProseMirror root (class="ProseMirror wa-doc"); decorations are PM Decorations
   and widgets, so none of these classes ever reach the saved HTML. */

@layer components {

  /* ───────────────────────── Page column ───────────────────────── */
  .wa-page {
    position: relative;
    font-family: var(--font-page);
    font-size: calc(var(--page-fs) * var(--page-scale, 1));
    line-height: var(--page-lh);
    font-weight: var(--fw-page);
    font-optical-sizing: auto;
    font-feature-settings: "kern", "liga", "calt", "onum" 0;
    color: var(--text);
    width: 100%;
    max-width: calc(var(--measure) + 2 * var(--page-pad-x));
    margin: 0 auto;
    padding: var(--page-pad-top) var(--page-pad-x) 40vh;   /* 40vh tail: the last line can be written at eye level */
    hanging-punctuation: first;
  }

  /* Title: a real H1-level field, separate from the body (Notion/Lex pattern). */
  .wa-titlerow { position: relative; margin-bottom: var(--sp-4); }
  .wa-doc-title {
    flex: 1; min-width: 0;
    font-family: var(--font-page);
    font-size: calc(var(--page-h1) * var(--page-scale, 1));
    line-height: 1.18;
    font-weight: var(--fw-page-bold);
    letter-spacing: var(--ls-display);
    color: var(--text);
    text-wrap: balance;
    overflow-wrap: anywhere;
    caret-color: var(--accent);
  }
  .wa-doc-title:empty::before { content: attr(data-placeholder); color: var(--text-3); }
  /* "Suggest title" lives at the end of the meta row and only shows while the title area is hovered/focused
     or the title is still empty (it folds the unused "Title ideas" chip into the place it is needed). */
  .wa-title-suggest { opacity: 0; transition: opacity var(--t-fast); }
  @media (hover: none) { .wa-chip.wa-title-suggest { display: none; } }   /* (0,2,0): beats .wa-chip's display, which comes later */   /* touch: it lives in the title's ⋯, never an invisible row (critic r2 m-6) */
  .wa-page:has(.wa-titlerow:hover, .wa-titlerow:focus-within, .wa-doc-meta:hover, .wa-doc-meta:focus-within) .wa-title-suggest,
  .wa-title-suggest[aria-expanded="true"], .wa-title-suggest:focus-visible { opacity: 1; }

  .wa-doc-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
    margin: 0 0 var(--sp-10);
    font-family: var(--font-ui); font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--text-3);
  }
  .wa-chip {
    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); border: var(--sp-px) solid var(--border-strong);
    color: var(--text-2); font: var(--fw-medium) var(--fs-meta)/var(--lh-meta) var(--font-ui);
    white-space: nowrap;
  }
  button.wa-chip:hover { background: var(--surface-3); color: var(--text); }
  .wa-chip--quiet { border-color: transparent; color: var(--text-3); }

  /* Guest page: the SEO H1 is a quiet line above the sample document (the editor itself is the hero, D7). */
  .wa-guestline {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-3);
    margin-bottom: var(--sp-6);
    font: var(--fw-bold) var(--fs-label)/var(--lh-label) var(--font-ui); color: var(--accent);
    letter-spacing: var(--ls-caps); text-transform: uppercase;
  }
  .wa-guestline__sub { font-weight: var(--fw-regular); color: var(--text-3); letter-spacing: 0; text-transform: none; }

  /* ───────────────────────── Body typography ─────────────────────────
     Every selector is `.wa-doc :where(…)` so its specificity stays (0,1,0): UI widgets rendered inside the page
     (review bar, cards, starters) win with their own single class and never inherit page headings/margins. */
  .wa-doc, .wa-prose { caret-color: var(--accent); overflow-wrap: break-word; }
  .wa-doc > :where(* + *), .wa-prose > :where(* + *) { margin-top: var(--page-gap); }
  .wa-doc :where(p), .wa-prose :where(p) { text-wrap: pretty; }
  .wa-doc :where(h1), .wa-prose :where(h1) { font-size: calc(var(--page-h2) * 1.2); line-height: 1.25; font-weight: var(--fw-page-bold); letter-spacing: var(--ls-display); margin-top: 1.6em; }
  .wa-doc :where(h2), .wa-prose :where(h2) {
    font-size: calc(var(--page-h2) * var(--page-scale, 1)); line-height: 1.3; font-weight: var(--fw-page-bold);
    letter-spacing: var(--ls-tight); margin-top: 1.7em; text-wrap: balance;
  }
  .wa-doc :where(h3), .wa-prose :where(h3) { font-size: calc(var(--page-h3) * var(--page-scale, 1)); line-height: 1.4; font-weight: var(--fw-page-bold); margin-top: 1.4em; }
  .wa-doc > :where(h1, h2, h3) + *, .wa-prose > :where(h1, h2, h3) + * { margin-top: .5em; }
  .wa-doc > :where(:first-child), .wa-prose > :where(:first-child) { margin-top: 0; }

  .wa-doc :where(ul, ol), .wa-prose :where(ul, ol) { padding-left: 1.35em; }
  .wa-doc :where(ul), .wa-prose :where(ul) { list-style: disc; }
  .wa-doc :where(ol), .wa-prose :where(ol) { list-style: decimal; }
  .wa-doc :where(li + li), .wa-prose :where(li + li) { margin-top: .3em; }
  .wa-doc :where(li)::marker, .wa-prose :where(li)::marker { color: var(--text-3); }
  .wa-doc :where(ol li)::marker, .wa-prose :where(ol li)::marker { font-variant-numeric: tabular-nums; }

  .wa-doc :where(blockquote), .wa-prose :where(blockquote) {
    padding: .1em 0 .1em 1.1em;
    border-left: 3px solid var(--border-strong);
    color: var(--text-2); font-style: italic;
  }
  .wa-doc :where(a:not(.wa-btn)), .wa-prose :where(a:not(.wa-btn)) {
    color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px;
    text-underline-offset: .18em; text-decoration-color: color-mix(in srgb, var(--accent) 55%, transparent);
  }
  .wa-doc :where(a:not(.wa-btn):hover), .wa-prose :where(a:not(.wa-btn):hover) { text-decoration-color: currentColor; }
  .wa-doc :where(strong), .wa-prose :where(strong) { font-weight: var(--fw-page-bold); }
  .wa-doc :where(code), .wa-prose :where(code) {
    font-family: var(--font-mono); font-size: .86em;
    padding: .1em .3em; border-radius: var(--r-sm); background: var(--surface-2);
    box-shadow: inset 0 0 0 var(--sp-px) var(--border-strong);   /* visible on Paper too (critic r1 m15) */
  }
  .wa-doc :where(pre), .wa-prose :where(pre) {
    font-family: var(--font-mono); font-size: .82em; line-height: 1.6;
    padding: var(--sp-4); border-radius: var(--r-md); background: var(--surface-2); overflow-x: auto;
  }
  .wa-doc :where(hr), .wa-prose :where(hr) { border: 0; height: auto; margin: 2em 0; text-align: center; color: var(--text-3); }
  .wa-doc :where(hr)::after, .wa-prose :where(hr)::after { content: "\2022\2002\2022\2002\2022"; font-size: .8em; letter-spacing: .3em; }

  /* Placeholder for the current empty paragraph (PM decoration: class wa-empty on the node). */
  .wa-doc .wa-empty::before {
    content: attr(data-placeholder);
    color: var(--text-3); pointer-events: none; float: left; height: 0;
  }
  .wa-kbd-inline { font-family: var(--font-ui); font-size: .72em; padding: .05em .4em; border-radius: var(--r-sm); border: var(--sp-px) solid var(--border-strong); color: var(--text-3); vertical-align: .12em; }

  /* ───────────────────────── First run / empty doc ───────────────────────── */
  /* Rendered as a PM widget BELOW the empty first line, so a click anywhere on the page still lands in the text
     (the old empty-state card swallowed clicks: 05 §1.2). */
  .wa-starters { margin-top: var(--sp-10); font-family: var(--font-ui); }
  .wa-starters__lede { font-size: var(--fs-label); line-height: var(--lh-label); color: var(--text-3); margin-bottom: var(--sp-3); }
  .wa-starters__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
  .wa-starter {
    display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--sp-3); row-gap: var(--sp-half);
    align-items: start;
    padding: var(--sp-3) var(--sp-4); min-height: 72px;
    border-radius: var(--r-lg); border: var(--sp-px) solid var(--border);
    background: transparent; color: var(--text); text-align: left;
    transition: background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
  }
  .wa-starter:hover { background: var(--surface-2); border-color: var(--border-strong); }
  .wa-starter__icon {
    grid-row: span 2; display: grid; place-items: center;
    width: var(--sp-8); height: var(--sp-8); border-radius: var(--r-md);
    background: var(--surface-2); color: var(--text-2);
  }
  .wa-starter:hover .wa-starter__icon { background: var(--surface-3); }
  .wa-starter[data-ai="true"] .wa-starter__icon { color: var(--accent); background: var(--accent-tint); }
  .wa-starter__title { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--fw-bold); display: flex; align-items: center; gap: var(--sp-2); }
  .wa-starter__desc { font-size: var(--fs-label); line-height: var(--lh-label); color: var(--text-3); }
  .wa-starters__hint { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-6); font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--text-3); }
  .wa-starters__hint span { display: inline-flex; align-items: center; gap: var(--sp-2); }
  .wa-cost { font: var(--fw-medium) var(--fs-meta)/var(--lh-meta) var(--font-ui); color: var(--text-3); white-space: nowrap; }

  /* ───────────────────────── Decorations ─────────────────────────
     Class map to the editor core (public_html/writing-assistant/assets/js/editor/suggestions.js), so either
     markup gets the same look:  .wa-chg ≙ .wa-sugg · .wa-del ≙ .wa-sugg-del · .wa-ins ≙ .wa-sugg-ins ·
     [data-active] ≙ .wa-sugg--active · [data-flag] ≙ .wa-sugg--numbers · .wa-blockdiff ≙ .wa-sugg-ins--block */

  /* Persistent selection: shown while focus is in the selection bar, a menu, a card or the composer (D5). */
  .wa-sel { background: var(--sel); border-radius: 2px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

  /* One change = one focusable unit. Whitespace is NEVER inside a mark (spec §7.2): a pure deletion's owned space is
     rendered as plain text next to the mark and removed with it on accept. */
  /* Round 5: marks add NO horizontal geometry anywhere (no margin, no padding; the tint reaches 1px past the glyphs
     with side box-shadows instead: 1px, so two marks a word-space apart never touch), so (a) activating a change never re-wraps a line and (b) a mark that starts a line
     sits flush on the column edge, like the text around it (critic r4 polish 1). Fragments SLICE (not clone), so a
     continuation line gets no repeated inset. */
  .wa-chg, .wa-sugg {
    border-radius: 3px;
    cursor: pointer;
    transition: background-color var(--t-fast);
  }
  .wa-chg:hover { background: var(--surface-3); }
  /* Active change = dashed accent outline (focus-visible keeps the solid ring, so selected ≠ focused) */
  .wa-chg[data-active="true"], .wa-sugg--active { background: var(--surface-3); outline: var(--sp-px) dashed var(--accent); outline-offset: 1px; }   /* 2px outside the mark: inside the word space either side (critic r2 m-8) */
  .wa-chg:focus-visible { outline: var(--focus-w) solid var(--accent); outline-offset: 2px; }
  /* a sentence spans lines: an outline would shatter into boxes, so the active SENTENCE gets a 2px accent rule 2px
     BELOW every line of its marks (a canvas gap first, so it never merges with the insertion's green rule: critic r4
     polish 2). Sliced fragments still paint their own bottom edge. */
  .wa-chg--sentence[data-active="true"] { outline: none; background: transparent; }   /* no grey slabs between fragments */
  .wa-chg--sentence[data-active="true"] .wa-del { box-shadow: -1px 0 0 var(--del-tint), 1px 0 0 var(--del-tint), 0 2px 0 var(--canvas), 0 4px 0 var(--accent); }
  .wa-chg--sentence[data-active="true"] .wa-ins { box-shadow: inset 0 -2px 0 var(--ins), -1px 0 0 var(--ins-tint), 1px 0 0 var(--ins-tint), 0 2px 0 var(--canvas), 0 4px 0 var(--accent); }

  .wa-del, .wa-sugg-del {
    color: var(--del); background: var(--del-tint); box-shadow: -1px 0 0 var(--del-tint), 1px 0 0 var(--del-tint);
    text-decoration: line-through; text-decoration-thickness: 1.5px; text-decoration-color: color-mix(in srgb, var(--del) 70%, transparent);
  }
  /* Inserted words: tint + a 2px solid rule, NOT an underline, so an insertion can never be mistaken for a link
     (links inside a passage under review drop their colour, below). */
  .wa-ins, .wa-sugg-ins {
    color: var(--ins); background: var(--ins-tint); text-decoration: none;
    box-shadow: inset 0 -2px 0 var(--ins), -1px 0 0 var(--ins-tint), 1px 0 0 var(--ins-tint);
  }
  .wa-chg .wa-del + .wa-ins { margin-left: .2em; }                 /* a visual gap only, never a text space */
  /* Punctuation / capitalisation / spacing / spelling changes are shown as whole words ("true." → "true:") at the
     normal padding: the display unit is the word plus its attached punctuation (round 3 ruling 1). */
  /* Sentence-level change (churn > 40%): the whole sentence struck, then the whole new sentence */
  .wa-chg--sentence .wa-del { text-decoration-thickness: 1px; }
  .wa-chg--sentence .wa-del + .wa-ins { margin-left: .3em; }

  /* Validator flag (numbers changed/removed): drawn on the CHANGE, so it shows for pure deletions too.
     Amber rule under the whole change + a "!" badge; the review bar names the number. */
  .wa-chg[data-flag], .wa-sugg--numbers { box-shadow: 0 3px 0 -1px var(--warning); }
  /* The "!" badge: ONE rule for word mode and block mode, so the copy "marked in amber with “!”" is always true.
     16px, 11px bold glyph, 3px clear of its neighbours (critic r2 B-2, m-8). */
  .wa-chg[data-flag]::after, .wa-sugg--numbers::after, .wa-blockdiff mark[data-flag]::after, .wa-blockold mark[data-flag]::after {
    content: "!"; display: inline-grid; place-items: center;
    width: var(--sp-4); height: var(--sp-4); margin: 0 3px 0 4px; vertical-align: 2px;
    border-radius: 50%; background: var(--warning-tint); color: var(--warning); box-shadow: inset 0 0 0 1.5px var(--warning);
    font: var(--fw-bold) 11px/1 var(--font-ui); text-decoration: none;
  }

  /* Links inside a passage under review hand their colour to the diff */
  .wa-passage :where(a) { color: var(--text); text-decoration-style: dotted; text-decoration-color: var(--text-3); }

  /* "this block is under review": a 3px accent rule in the left margin, outside the measure */
  .wa-passage { position: relative; }
  .wa-passage::before {
    content: ""; position: absolute; left: calc(var(--sp-5) * -1); top: .35em; bottom: .35em;
    width: 3px; border-radius: var(--r-pill); background: var(--accent);
  }

  /* Block-level change (churn > 50%, or structure changed): original and suggestion stacked, both readable */
  .wa-blockdiff { display: flex; flex-direction: column; gap: var(--sp-3); }
  .wa-blockdiff__old, .wa-blockdiff__new { position: relative; padding-left: var(--sp-4); }
  .wa-blockdiff__old { color: var(--text-2); box-shadow: inset 3px 0 0 var(--del); }
  .wa-blockdiff__new { box-shadow: inset 3px 0 0 var(--ins); }
  .wa-blockdiff__tag {
    display: block; margin-bottom: var(--sp-1);
    font: var(--fw-bold) var(--fs-meta)/var(--lh-meta) var(--font-ui); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-3);
  }
  .wa-blockdiff__new .wa-blockdiff__tag { color: var(--ins); }
  .wa-blockdiff.wa-passage::before { display: none; }   /* the red/green rules already say "under review" */
  .wa-blockdiff mark[data-flag], .wa-blockold mark[data-flag] { background: var(--warning-tint); color: inherit; box-shadow: 0 2px 0 var(--warning); border-radius: 2px; }

  /* Streaming: the original stays untouched at full ink; the new text streams into a draft block BELOW it (no reflow
     of the original), then cross-fades into the diff (200ms; instant under reduced motion). */
  /* The draft sits in the SAME column box as the text (no indent), with its rule in the margin like .wa-passage,
     so it wraps like the final text (critic r2 M-4). */
  .wa-streamblock {
    position: relative; margin: var(--sp-3) 0 0;
    font-family: var(--font-page); font-size: inherit; line-height: inherit; color: var(--text-2);
  }
  .wa-streamblock::before { content: ""; position: absolute; left: calc(var(--sp-5) * -1); top: .35em; bottom: .35em; width: 2px; border-radius: var(--r-pill); background: var(--accent); }
  /* RESOLVE (stream → diff), a real mechanism: the AI slot keeps the streamed height as a min-height, so nothing
     below moves; the draft fades out over the diff while the marks and the review bar fade in (--t-med). */
  .wa-aislot { position: relative; display: flow-root; }   /* no margin collapses through it: its height is its height */
  .wa-streamblock--out { position: absolute; left: 0; right: 0; pointer-events: none; animation: wa-fade-out var(--t-med) var(--ease-out) forwards; }
  /* the bar's CONTENTS cross-fade; the bar itself (background, border) is never translucent over text */
  .wa-resolving .wa-review > * { animation: wa-fade-in var(--t-med) var(--ease-out); }
  .wa-stream { color: var(--text-2); }
  .wa-caret {
    display: inline-block; width: 2px; height: 1.1em; margin-left: 1px; margin-right: -3px; vertical-align: -.16em;   /* zero advance: removing it re-wraps nothing */
    background: var(--accent); border-radius: 1px;
    animation: wa-blink var(--t-caret) steps(1) infinite;
  }

  /* Find & replace matches */
  .wa-match { background: var(--mark); border-radius: 2px; color: inherit; }
  .wa-match[data-current="true"] { outline: var(--focus-w) solid var(--warning); outline-offset: 1px; }

  /* Feedback / proofread jump target flash */
  .wa-flash { background: var(--sel); border-radius: 2px; animation: wa-flash 1.6s var(--ease-out) 1 forwards; }

  /* Focus mode: the current paragraph stays at full ink, the rest steps down to --text-3 (still ≥4.5:1). */
  .wa-app[data-focus="on"] .wa-doc > :not([data-current="true"]) { color: var(--text-3); transition: color var(--t-med); }
  .wa-app[data-focus="on"] .wa-doc > :not([data-current="true"]) :is(a, .wa-sel) { color: inherit; }
  .wa-app[data-focus="on"] .wa-doc-title { color: var(--text-3); }

  @keyframes wa-blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
  @keyframes wa-flash { from { background: var(--sel); } to { background: transparent; } }
  @keyframes wa-fade-in { from { opacity: 0; } to { opacity: 1; } }
  @keyframes wa-fade-out { from { opacity: 1; } to { opacity: 0; visibility: hidden; } }

  @media (prefers-reduced-motion: reduce) {
    .wa-caret, .wa-flash, .wa-resolving .wa-review > * { animation: none; }
    .wa-streamblock--out { animation: none; visibility: hidden; }
  }

  @media (max-width: 767.98px) {
    .wa-starters__grid { grid-template-columns: minmax(0, 1fr); }
    .wa-starter { min-height: 64px; }
    .wa-doc-meta { margin-bottom: var(--sp-6); }
    .wa-streamblock::before { left: calc(var(--sp-3) * -1); }
    .wa-passage::before { left: calc(var(--sp-3) * -1); }
    .wa-blockdiff__old, .wa-blockdiff__new { padding-left: var(--sp-3); }
  }

  /* ───────────────────────── Core twins (round 6, lifted from the app's app-extra.css; docs/40 D1, R6) ─────────────────────────
     What the editor core renders that has no .wa-chg twin above. Same rules as the app's shim, so the shim can go. */
  .wa-sugg-del + .wa-sugg-ins { margin-left: .2em; }                                  /* a visual gap, never a text space */
  .wa-sugg-ins:empty { background: none; box-shadow: none; }                          /* a pure deletion's empty anchor paints nothing… */
  .wa-sugg-del.wa-sugg--numbers::after { content: none; }                             /* …but the ONE "!" badge per change, on that anchor */
  .wa-sugg-ins--block { display: block; margin-top: var(--sp-2); padding-left: var(--sp-4); box-shadow: inset 3px 0 0 var(--ins); background: none; color: var(--text); }
  /* a block change in the core's markup: Original (readable, red rule) above Suggested (green rule), = .wa-blockdiff */
  .wa-blockold { position: relative; padding-left: var(--sp-4); box-shadow: inset 3px 0 0 var(--del); color: var(--text-2); }
  .wa-blockold.wa-passage::before {
    content: "Original"; position: static; display: block; width: auto; height: auto; background: none; border-radius: 0;
    margin-bottom: var(--sp-1); font: var(--fw-bold) var(--fs-meta)/var(--lh-meta) var(--font-ui);
    letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-3);
  }
  .wa-blockold.wa-passage[data-words]::before { content: "Original · " attr(data-words) " words"; }   /* D7: the tag names its length, like .wa-blockdiff__tag */
  .wa-blockold::after { content: none; }
  /* D7: the block's ONE badge sits on the changed number in the original; the block insert carries none */
  .wa-blockold .wa-sugg-ins--block.wa-sugg--numbers::after, .wa-blockold .wa-sugg--numbers.wa-sugg-del::after { content: none; }
  .wa-blockold .wa-sugg-ins--block.wa-sugg--numbers { box-shadow: inset 3px 0 0 var(--ins); }
  .wa-blockold .wa-sugg-del { text-decoration: none; background: none; color: inherit; box-shadow: none; }
  .wa-blockold .wa-sugg-del, .wa-blockold .wa-sugg--active { outline: none; margin: 0; }
  .wa-blockold .wa-blockdiff__new { margin: var(--sp-3) 0 0 calc(var(--sp-4) * -1); padding: var(--sp-3) 0 0 var(--sp-4); background: var(--canvas); box-shadow: inset 3px 0 0 var(--ins); color: var(--text); }
  .wa-blockold .wa-blockdiff__new > p { margin: 0; }
  .wa-blockold .wa-blockdiff__new.wa-sugg--active { outline: none; }
  .wa-blockold > br.ProseMirror-trailingBreak, .wa-blockold > img.ProseMirror-separator { display: none; }

  /* ───────────────────────── Grounding (round 7, docs/40 D6): "Not in your notes: check this" ─────────────────────────
     A HINT, not a warning, so it never borrows the warning's amber or the insertion's solid rule:
     · a fine DOTTED accent underline, set low (below the descenders' reach), continuous through descenders, that
       says "look again" without shouting; it strengthens to a light accent tint on hover/focus, so pointing at it
       explains it;
     · ONE "?" after the claim, in the flag badge's geometry (16px, 3–4px clear) but OUTLINED, not filled: the
       flag's filled amber disc means "we changed a fact", the outlined "?" means "we could not find this";
     · the reason is never colour alone: the badge glyph, the note that names the marks, and the accessible
       description "Not in your notes: check this" read before the words. */
  mark.wa-ground, .wa-ground--doc {
    background: none; color: inherit; border-radius: 2px;
    text-decoration-line: underline; text-decoration-style: dotted; text-decoration-color: color-mix(in srgb, var(--accent) 75%, transparent);   /* calmer than the solid accent; still ≥ 3:1 */
    text-decoration-thickness: 1.5px; text-underline-offset: .3em; text-decoration-skip-ink: none;
    transition: background-color var(--t-fast);
  }
  mark.wa-ground:hover, mark.wa-ground:focus-visible, .wa-ground--doc:hover { background: var(--accent-tint); }
  mark.wa-ground:focus-visible { outline: var(--focus-w) solid var(--accent); outline-offset: 2px; }
  .wa-ground__badge {
    display: inline-grid; place-items: center; width: var(--sp-4); height: var(--sp-4); margin: 0 1px 0 4px; vertical-align: 2px;   /* 1px after: "people ?," never reads as a spaced comma */
    border-radius: 50%; background: transparent; color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent);
    font: var(--fw-bold) 11px/1 var(--font-ui); text-decoration: none; font-style: normal;
  }
  .wa-draft { color: var(--text); }   /* a finished draft preview reads at full ink (the streaming draft is --text-2) */
  @media (forced-colors: active) {
    mark.wa-ground, .wa-ground--doc { text-decoration-color: LinkText; }
    .wa-ground__badge { forced-color-adjust: none; background: Canvas; color: LinkText; box-shadow: inset 0 0 0 1.5px LinkText; }
  }
}