@layer reset, base, components, pages, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { min-width: 320px; scroll-behavior: smooth; }
  body, h1, h2, h3, p, dl, dd, figure { margin: 0; }
  body { min-height: 100dvh; }
  img, svg, iframe { display: block; max-width: 100%; }
  button, input, select, textarea { font: inherit; }
  button, summary { cursor: pointer; }
  table { border-collapse: collapse; }
}

@layer base {
  html { background: var(--color-canvas); color: var(--color-text); font-family: var(--font-ui); font-size: 100%; font-kerning: normal; }
  body { background: var(--color-canvas); color: var(--color-text); font-size: var(--text-body); line-height: var(--leading-body); text-rendering: optimizeLegibility; }
  h1, h2, h3 { color: var(--color-text); font-weight: var(--weight-bold); line-height: var(--leading-tight); overflow-wrap: anywhere; text-wrap: balance; }
  h1 { font-size: var(--text-h1); letter-spacing: -0.025em; }
  h2 { font-size: var(--text-h2); letter-spacing: -0.015em; }
  h3 { font-size: var(--text-h3); }
  p { text-wrap: pretty; }
  a { color: var(--color-action); text-underline-offset: 0.18em; text-decoration-thickness: 0.08em; }
  a:hover { color: var(--color-action-hover); }
  code { font-family: var(--font-mono); font-size: 0.9em; overflow-wrap: anywhere; }
  :focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
  ::selection { background: var(--accent-200); color: var(--neutral-950); }
  [hidden] { display: none !important; }
  [aria-disabled="true"] { pointer-events: none; }
  .js-only { display: none; }
  html[data-js="enabled"] .js-only:not([hidden]) { display: inline-flex; }
  .sr-only { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }
  .skip-link { background: var(--neutral-950); color: var(--neutral-0); left: var(--space-4); padding: var(--space-3) var(--space-4); position: fixed; top: var(--space-3); transform: translateY(-200%); transition: transform var(--duration-fast) var(--ease-out); z-index: var(--z-toast); }
  .skip-link:focus { color: var(--neutral-0); transform: translateY(0); }
  .eyebrow { color: var(--color-text-secondary); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: 0.1em; text-transform: uppercase; }
  .text-link { align-items: center; display: inline-flex; font-weight: var(--weight-semibold); min-height: 2.75rem; }
  .text-link--danger { color: var(--danger-strong); }
  .breadcrumbs { align-items: center; color: var(--color-text-secondary); display: flex; flex-wrap: wrap; font-size: var(--text-sm); gap: var(--space-2); margin-bottom: var(--space-6); }
  .page-frame { margin-inline: auto; max-width: var(--content-public); padding: var(--space-8) max(var(--space-4), env(safe-area-inset-left), env(safe-area-inset-right)) max(var(--space-16), env(safe-area-inset-bottom)); width: 100%; }
  .narrow-page { max-width: 46rem; padding-top: var(--space-16); }
  .prose-page { max-width: 54rem; }
  .prose-page > section { border-top: 1px solid var(--color-border); display: grid; gap: var(--space-3); padding-block: var(--space-8); }
  .prose-page > section p { color: var(--color-text-secondary); max-width: var(--measure-prose); }
  .prose-page p { overflow-wrap: anywhere; }
  .methodology-page { counter-reset: method; }
  .methodology-page > section { grid-template-columns: auto minmax(0, 1fr); }
  .methodology-page > section::before { align-items: center; background: var(--warning-soft); border: 1px solid var(--neutral-300); border-radius: var(--radius-md); color: var(--warning-strong); content: counter(method, decimal-leading-zero); counter-increment: method; display: flex; font-family: var(--font-mono); font-size: var(--text-sm); font-weight: var(--weight-bold); height: 2.6rem; justify-content: center; width: 2.6rem; }
  .methodology-page > section h2, .methodology-page > section p { grid-column: 2; }
  .prose-actions, .result-actions, .form-actions { align-items: center; display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }
  .prose-actions > *, .result-actions > *, .form-actions > * { max-width: 100%; }
  .numeric { font-variant-numeric: tabular-nums; text-align: right; }
  .icon { display: inline-block; flex: 0 0 auto; height: 1.25rem; width: 1.25rem; }
}

@layer utilities {
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 1ms !important; }
  }
}