@charset "UTF-8";
/* ==========================================================================
   base.css - element defaults of the v2 theme (plan T4.4; design
   docs/design/ia-wizard-design-system.md 4.4 page background, 4.8, 4.9).

   Loaded after tokens.css and the vendor AdminLTE/Bootstrap CSS, before
   admin-bridge.css and components.css. Element and utility selectors only,
   so every class rule in the bridge/components wins without !important.
   No colour literals: every colour is a token from tokens.css.
   ========================================================================== */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  accent-color: var(--accent-fill);          /* native checkbox/radio/range/progress */
  scrollbar-color: var(--label-4) transparent;
  /* No background here: body's background propagates to the canvas, which
     keeps the z-index:-1 wash below (body::after) visible behind content. */
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--bg);
  color: var(--label);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* A very faint accent wash so the glass layer has something to refract.
   Drawn on a fixed pseudo-element, never background-attachment:fixed
   (which repaints the whole page on every scroll). body::before is taken
   by the dev-mode strip in nav.css. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60% 55% at 0% 0%, var(--wash-1), transparent 70%),
    radial-gradient(55% 50% at 100% 100%, var(--wash-2), transparent 72%);
}

/* ── Typography: system font stack, HIG text styles ────────────────────── */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  margin-top: 0;
  margin-bottom: .5em;
  font-family: inherit;
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  color: inherit;
}
h1, .h1 { font-size: var(--fs-title1); font-weight: var(--fw-bold); letter-spacing: var(--tracking-title); }
h2, .h2 { font-size: var(--fs-title2); font-weight: var(--fw-bold); }
h3, .h3 { font-size: var(--fs-title3); }
h4, .h4 { font-size: var(--fs-body); }                 /* headline 17/600 */
h5, .h5 { font-size: var(--fs-callout); }
h6, .h6 { font-size: var(--fs-subhead); }

p { margin-top: 0; margin-bottom: 1em; }
small, .small { font-size: var(--fs-footnote); }
strong, b { font-weight: var(--fw-semibold); }

/* Text-style utilities (HIG names) */
.t-hero     { font-size: var(--fs-hero);     line-height: 1.08;            font-weight: var(--fw-bold); letter-spacing: var(--tracking-title); }
.t-large    { font-size: var(--fs-large);    line-height: var(--lh-tight); font-weight: var(--fw-bold); letter-spacing: var(--tracking-title); }
.t-title1   { font-size: var(--fs-title1);   line-height: var(--lh-tight); font-weight: var(--fw-bold); letter-spacing: var(--tracking-title); }
.t-title2   { font-size: var(--fs-title2);   line-height: var(--lh-tight); font-weight: var(--fw-bold); }
.t-title3   { font-size: var(--fs-title3);   line-height: var(--lh-tight); font-weight: var(--fw-semibold); }
.t-headline { font-size: var(--fs-body);     line-height: 1.3;             font-weight: var(--fw-semibold); }
.t-body     { font-size: var(--fs-body);     line-height: var(--lh-body); }
.t-callout  { font-size: var(--fs-callout);  line-height: var(--lh-body); }
.t-subhead  { font-size: var(--fs-subhead);  line-height: 1.4; }
.t-footnote { font-size: var(--fs-footnote); line-height: 1.38; }
.t-caption  { font-size: var(--fs-caption);  line-height: 1.33; }
.t-caption2 { font-size: var(--fs-caption2); line-height: 1.3; }
.t-secondary { color: var(--label-2); }
.t-tertiary  { color: var(--label-3); }
.t-semibold  { font-weight: var(--fw-semibold); }

/* Numbers: tabular figures for anything that is compared or scanned */
.tabular-nums, .num { font-variant-numeric: tabular-nums; }
.font-rounded { font-family: var(--font-rounded); font-variant-numeric: tabular-nums; }
.font-mono, code, kbd, samp, pre { font-family: var(--font-mono); }
code {
  padding: .1em .35em;
  border-radius: var(--r-xs);
  background: var(--fill-3);
  color: var(--label);
  font-size: .9em;
}
pre code { padding: 0; background: none; }
kbd {
  padding: .1em .4em;
  border-radius: var(--r-xs);
  background: var(--fill-2);
  color: var(--label);
  box-shadow: inset 0 -1px 0 var(--separator);
  font-size: .85em;
}

/* ── Links ───────────────────────────────────────────────────────────────── */
a { color: var(--accent-text); text-decoration: none; text-underline-offset: .15em; }
a:hover { color: var(--accent-text); text-decoration: none; }
a:not([class]):hover { text-decoration: underline; }   /* plain text links only */
a:not([href]):not([class]), a:not([href]):not([class]):hover { color: inherit; text-decoration: none; }

/* ── Misc elements ───────────────────────────────────────────────────────── */
hr { margin: var(--sp-4) 0; border: 0; border-top: 1px solid var(--separator); opacity: 1; }
[hidden] { display: none !important; }
::placeholder { color: var(--label-3); opacity: 1; }
input, select, textarea { font-size: var(--fs-input); }  /* 16px: no iOS focus zoom */
button, [role="button"], summary, label[for] { cursor: pointer; }
:disabled, [aria-disabled="true"] { cursor: default; }

::selection { background: var(--accent-tint-2); color: var(--label); }

/* ── Scrollbars: subtle, never hidden ───────────────────────────────────────
   Chromium/Firefox take the thumb colour from html { scrollbar-color }.
   Safari keeps its native overlay scrollbars on purpose: styling
   ::-webkit-scrollbar would force always-visible classic bars on macOS. */
.scroll-thin { scrollbar-width: thin; }

/* ── Skip link (rendered first in <body> by the shell) ───────────────────── */
.skip-link {
  position: fixed;
  top: var(--sp-2);
  left: var(--sp-2);
  z-index: var(--z-toast);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-capsule);
  background: var(--surface);
  color: var(--accent-text);
  font-weight: var(--fw-semibold);
  box-shadow: var(--shadow-float);
  transform: translateY(calc(-100% - var(--sp-4)));
}
.skip-link:focus, .skip-link:focus-visible { transform: none; }

/* ── Print: no wash, no tinted page ─────────────────────────────────────── */
@media print {
  body { background: none; }
  body::after { display: none; }
}