/* Reset, element defaults and accessibility primitives, in the `reset`, `base` and `utilities` layers (see css/layers.css).
   These rules were the first ~1 KB of styles.css and the accessibility half of design-tokens.css; they are MOVED here, not
   copied, and every value is the one the old rule had (a regression run of the whole site confirmed no element changed).
   The legacy stylesheets are unlayered and therefore always win over these rules, exactly as later rules used to. */

@layer reset {
  *{box-sizing:border-box}
  h1,h2,h3,p{margin:0}
  button,input,select{font:inherit}
  button,a,input,select,summary{-webkit-tap-highlight-color:transparent}
  button{cursor:pointer;color:inherit}
  button:disabled{cursor:not-allowed;opacity:.4}
  button,a{touch-action:manipulation}
}

@layer base {
  :root{color-scheme:light}
  body{margin:0;background:var(--surface-page);color:var(--text-primary);font:var(--font-size-body)/var(--line-height-base) var(--font-family-base)}
  a{color:var(--text-accent)}
  button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color-soft);outline-offset:3px}
  button,input,select{border-radius:var(--radius-md)}
  button{border:1px solid var(--border-default);background:var(--surface-panel);padding:8px 13px}
  button:hover{background:var(--surface-hover)}
  h1{font-size:var(--font-size-display);letter-spacing:var(--letter-spacing-heading);line-height:var(--line-height-heading)}
  h2{font-size:var(--font-size-section)}
  h3{font-size:var(--font-size-body)}
  small,.small{font-size:var(--font-size-label);color:var(--text-secondary)}

  /* One consistent keyboard focus indicator for every interactive element. */
  :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-offset);
  }
  :where(a, button, input, select, textarea, summary, [tabindex]):focus:not(:focus-visible) { outline: none; }
  #main:focus { outline: none; }

  /* Skip link: the first tab stop, visible only while focused. */
  .skip-link {
    position: absolute; left: 12px; top: -64px; z-index: 100;
    padding: 10px 16px; border-radius: 10px; background: var(--surface-skip-link); color: var(--text-on-skip-link);
    font-weight: 600; text-decoration: none; transition: top .15s ease;
  }
  .skip-link:focus { top: 12px; }
}

@layer utilities {
  .muted{color:var(--text-secondary)}
  .mono{font-variant-numeric:tabular-nums}
  .hidden,[hidden]{display:none!important}
  .sr-only {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}