/*
 * base.css · scoped reset + typographic roots + focus ring + icon primitive      (docs/09-VISUAL-SPEC.md §3, §5)
 * The reset is SCOPED to the tool's own roots (.pg-app, .pg-dialog, .pg-toasts, .pg-share) so the site nav, footer,
 * upgrade modal and Keeper widget keep their own styles untouched.
 */
@layer reset {
  :where(.pg-app, .pg-dialog, .pg-toasts, .pg-share), :where(.pg-app, .pg-dialog, .pg-toasts, .pg-share) :where(*, *::before, *::after) { box-sizing: border-box; }
  :where(.pg-app, .pg-dialog, .pg-toasts, .pg-share) :where(h1, h2, h3, h4, p, ul, ol, li, figure, blockquote, dl, dd, fieldset, legend) { margin: 0; padding: 0; }
  :where(.pg-app, .pg-dialog, .pg-toasts, .pg-share) :where(ul, ol) { list-style: none; }
  :where(.pg-app, .pg-dialog, .pg-toasts, .pg-share) :where(button, input, textarea, select) { font: inherit; color: inherit; letter-spacing: inherit; }
  :where(.pg-app, .pg-dialog, .pg-toasts, .pg-share) :where(button) { cursor: pointer; background: none; border: 0; padding: 0; }
  :where(.pg-app, .pg-dialog, .pg-toasts, .pg-share) :where(fieldset) { border: 0; min-width: 0; }
  :where(.pg-app, .pg-dialog, .pg-toasts, .pg-share) :where(a) { color: inherit; }
  :where(.pg-app, .pg-dialog, .pg-toasts, .pg-share) :where(img, svg) { display: block; max-width: 100%; }
  :where(.pg-app, .pg-dialog, .pg-toasts, .pg-share) :where(ins, del) { text-decoration: none; }
}

@layer base {
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: var(--scroll-top); scroll-padding-bottom: var(--keeper-clear); }
  body.pg-body {
    margin: 0;
    background: var(--canvas);
    color: var(--text);
    font-family: var(--font-ui);
    font-size: var(--fs-15);
    line-height: var(--lh-15);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }
  .pg-app, .pg-dialog, .pg-toasts, .pg-share { font-family: var(--font-ui); color: var(--text); }
  .pg-app :where(a:not([class])), .pg-dialog :where(a:not([class])), .pg-share :where(a:not([class])) {
    color: var(--accent-text);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
  }
  .pg-app :where(a:not([class])):hover, .pg-dialog :where(a:not([class])):hover { text-decoration-thickness: 2px; }
  /* a link that stands alone on its line is a 24px target (2.5.8); links inside sentences keep the inline exception */
  :where(.pg-app, .pg-dialog, .pg-share) :where(p > a:only-child) { display: inline-flex; align-items: center; min-height: 24px; }

  /* ONE focus ring for every focusable thing in the tool: 2px accent-text outline, 2px offset. Never removed without
     a replacement; the harness (contract `focus`) asserts a painted ring on every control class. */
  :where(.pg-app, .pg-dialog, .pg-toasts, .pg-share) :focus-visible {
    outline: var(--focus-w) solid var(--accent-text);
    outline-offset: var(--focus-offset);
  }
  :where(.pg-app, .pg-dialog, .pg-toasts, .pg-share) :focus:not(:focus-visible) { outline: none; }

  /* Icons: <svg class="pg-icon"><use href="#i-name"/></svg>. currentColor, 1.75 stroke, sized by the font. */
  .pg-icon {
    width: 1.25em;
    height: 1.25em;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    display: inline-block;
    vertical-align: middle;
  }
  .pg-icon--sm { width: 16px; height: 16px; }
  .pg-icon--md { width: 20px; height: 20px; }
  .pg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

  .pg-kbd {
    font-family: var(--font-mono);
    font-size: var(--fs-12);
    line-height: var(--lh-12);
    padding: 0 var(--s-1);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    color: var(--text-3);
  }
}