/* Writing Assistant · reset + base (docs/09-VISUAL-SPEC.md §3). Tokens only. */

@layer reset {
  /* Scoped to the tool's roots so the shared site nav, footer and upgrade modal keep the site's own type. */
  .wa-app, .wa-layer, .wa-landing, .wa-shared {
    box-sizing: border-box;
  }
  :where(.wa-app, .wa-layer, .wa-landing, .wa-shared) *,
  :where(.wa-app, .wa-layer, .wa-landing, .wa-shared) *::before,
  :where(.wa-app, .wa-layer, .wa-landing, .wa-shared) *::after { box-sizing: border-box; }

  :where(.wa-app, .wa-layer, .wa-landing, .wa-shared) :where(h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote, pre) {
    margin: 0; padding: 0; font: inherit;
  }
  :where(.wa-app, .wa-layer, .wa-landing, .wa-shared) :where(ul, ol):where(:not(.wa-doc *, .wa-prose *)) { list-style: none; }
  :where(.wa-app, .wa-layer, .wa-landing, .wa-shared) :where(button, input, textarea, select) {
    font: inherit; color: inherit; letter-spacing: inherit; margin: 0;
  }
  :where(.wa-app, .wa-layer, .wa-landing, .wa-shared) :where(button) {
    background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit;
  }
  :where(.wa-app, .wa-layer, .wa-landing, .wa-shared) :where(a) { color: inherit; text-decoration: none; }
  :where(.wa-app, .wa-layer, .wa-landing, .wa-shared) :where(dialog) { padding: 0; border: 0; color: inherit; max-width: none; max-height: none; }
  :where(.wa-app, .wa-layer, .wa-landing, .wa-shared) :where(svg) { display: block; }
}

@layer base {
  html { -webkit-text-size-adjust: 100%; }
  body.wa-body {
    margin: 0;
    background: var(--canvas);
    min-height: 100dvh;
  }

  .wa-app, .wa-layer, .wa-landing, .wa-shared {
    color: var(--text);
    font-family: var(--font-ui);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    font-weight: var(--fw-regular);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "calt", "case" 0;
    text-rendering: optimizeLegibility;
  }

  /* Focus: one ring everywhere, 2px accent with a 2px offset. Never removed without a replacement. */
  :where(.wa-app, .wa-layer, .wa-landing, .wa-shared) :focus { outline: none; }
  :where(.wa-app, .wa-layer, .wa-landing, .wa-shared) :focus-visible,
  .is-focus-visible {
    outline: var(--focus-w) solid var(--accent);
    outline-offset: var(--sp-half);
  }
  .wa-doc:focus-visible, .wa-doc-title:focus-visible { outline: none; }   /* the caret is the focus indicator for the page */

  :where(.wa-app, .wa-layer, .wa-shared) ::selection { background: var(--sel); color: var(--text); }

  /* Icons: one 20px grid, 1.6 stroke, strokes never scale. <svg class="wa-i"><use href="#i-name"/></svg> */
  .wa-i {
    width: var(--sp-4); height: var(--sp-4); flex: none;
    fill: none; stroke: currentColor; stroke-width: var(--stroke);
    stroke-linecap: round; stroke-linejoin: round; overflow: visible;
  }
  /* strokes stay 1.6 CSS px at any icon size (selector targets the sprite originals, which <use> clones) */
  #wa-sprite :where(path, circle, rect) { vector-effect: non-scaling-stroke; }
  .wa-i--lg { width: var(--sp-5); height: var(--sp-5); }
  .wa-i--sm { width: var(--sp-3); height: var(--sp-3); }
  .wa-i--fill { fill: currentColor; stroke: none; }

  .wa-kbd {
    display: inline-grid; place-items: center;
    min-width: var(--sp-5); height: var(--sp-5); padding: 0 var(--sp-1);
    border-radius: var(--r-sm); border: var(--sp-px) solid var(--border-strong);
    background: var(--surface-2); color: var(--text-3);
    font: var(--fw-medium) var(--fs-meta)/var(--lh-meta) var(--font-ui);
    font-variant-numeric: tabular-nums; white-space: nowrap;
  }
  .wa-kbds { display: inline-flex; gap: var(--sp-half); }

  .wa-num { font-variant-numeric: tabular-nums; }

  .wa-scroll {
    overflow-y: auto; overscroll-behavior: contain;
    scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent;
  }
}