/*
 * base.css · scoped reset + typographic roots + focus ring + icon primitive          (docs/09-VISUAL-SPEC.md §2, §7)
 * The reset is SCOPED to the tool's own roots so the site nav, footer, upgrade modal and Keeper keep their styles.
 * NEVER set overflow-x on html/body (it kills position:sticky and hides overflow from scrollWidth checks).
 */
@layer reset {
  :where(.sw-app, .sw-dialog, .sw-toasts, .sw-tabbar, .sw-land, .sw-about, .sw-pop), :where(.sw-app, .sw-dialog, .sw-toasts, .sw-tabbar, .sw-land, .sw-about, .sw-pop) :where(*, *::before, *::after) { box-sizing: border-box; }
  :where(.sw-app, .sw-dialog, .sw-toasts, .sw-tabbar, .sw-land, .sw-about, .sw-pop) :where(h1, h2, h3, h4, p, ul, ol, li, figure, blockquote, dl, dd, fieldset, legend, pre) { margin: 0; padding: 0; }
  :where(.sw-app, .sw-dialog, .sw-toasts, .sw-tabbar, .sw-land, .sw-about, .sw-pop) :where(ul, ol) { list-style: none; }
  :where(.sw-app, .sw-dialog, .sw-toasts, .sw-tabbar, .sw-land, .sw-about, .sw-pop) :where(button, input, textarea, select) { font: inherit; color: inherit; letter-spacing: inherit; }
  :where(.sw-app, .sw-dialog, .sw-toasts, .sw-tabbar, .sw-land, .sw-about, .sw-pop) :where(button) { cursor: pointer; background: none; border: 0; padding: 0; }
  :where(.sw-app, .sw-dialog, .sw-toasts, .sw-tabbar, .sw-land, .sw-about, .sw-pop) :where(fieldset) { border: 0; min-width: 0; }
  :where(.sw-app, .sw-dialog, .sw-toasts, .sw-tabbar, .sw-land, .sw-about, .sw-pop) :where(img, svg) { display: block; max-width: 100%; }
  dialog.sw-dialog { margin: auto; padding: 0; border: 0; max-width: none; max-height: none; color: inherit; }
}

@layer base {
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: var(--scroll-top); scroll-padding-bottom: calc(var(--tabbar-h) + var(--cookie-h) + var(--sp-6)); }
  body.sw-body {
    margin: 0; background: var(--canvas); 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; text-rendering: optimizeLegibility;
    padding-bottom: calc(var(--tabbar-h) + var(--cookie-h));
  }
  .sw-app, .sw-dialog, .sw-toasts, .sw-tabbar, .sw-land, .sw-about, .sw-pop { font-family: var(--font-ui); color: var(--text); }
  :where(.sw-app, .sw-dialog, .sw-land, .sw-about) :where(a:not([class])) { color: var(--accent-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
  :where(.sw-app, .sw-dialog, .sw-land, .sw-about) :where(a:not([class])):hover { text-decoration-thickness: 2px; }
  :where(.sw-app, .sw-dialog, .sw-land, .sw-about) :where(p > a:only-child) { display: inline-flex; align-items: center; min-height: 24px; }
  :where(.sw-app, .sw-dialog, .sw-land, .sw-about) :where(code, kbd, samp) { font-family: var(--font-mono); font-size: .92em; }
  ::selection { background: var(--accent-tint-strong); color: var(--text); }

  /* THE focus ring. One rule, 2px + 2px offset, survives every dark surface (>= 3:1 on canvas/surface-1/2/3 and on the indigo fill). */
  :where(.sw-app, .sw-dialog, .sw-tabbar, .sw-land, .sw-about, .sw-pop) :where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--focus); outline-offset: 2px; border-radius: inherit;
  }
  :where(.sw-app, .sw-dialog) :where(input, textarea, select):focus-visible { outline-offset: 0; border-color: var(--focus); }
  .sw-app :where([tabindex="-1"]):focus { outline: none; }
  .sw-app :where(h1, h2)[tabindex="-1"]:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: var(--r-sm); }
  .sw-skip { position: absolute; left: var(--sp-2); top: -64px; z-index: var(--z-dialog); background: var(--accent); color: var(--on-accent); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); font: var(--fw-medium) var(--fs-body)/1 var(--font-ui); text-decoration: none; }
  .sw-skip:focus { top: var(--sp-2); outline: 2px solid var(--focus); outline-offset: 2px; }

  .ico { display: inline-block; vertical-align: -0.2em; width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
  .ico--sm { width: 14px; height: 14px; } .ico--lg { width: 20px; height: 20px; } .ico--xl { width: 24px; height: 24px; }
  @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
}