/* base.css: the Digital Iceberg base layer.
   Load after dist/tokens.css and css/fonts.css. Reads role tokens only.
   Holds the reset, root typography, surface switching, focus, selection, links, reduced motion,
   forced colours and two utilities (.lit-line, .visually-hidden). No component styles: buttons,
   cards, routes and the rest live in components/. */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; tab-size: 4; hanging-punctuation: first last; }
body { margin: 0; min-height: 100vh; overflow-x: clip; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, pre { margin: 0; }
img, picture, svg, video, canvas { display: block; max-width: 100%; }
img, video { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
:where(button, [role="button"]):disabled { cursor: not-allowed; }
table { border-collapse: collapse; }
hr { height: 0; border: 0; border-top: var(--line-hair) solid var(--rule); color: inherit; }
abbr[title] { text-decoration: underline dotted; }
[hidden] { display: none !important; }

/* ---------- Root typography ----------
   Verdana Regular for running interface text; Verdana Bold for headings, labels, buttons and
   navigation. Verdana has 400 and 700 only: nothing asks for 500 or 600. */
html {
  background-color: var(--surface);
  color: var(--text-2);
  font-family: var(--font-sans);
  font-size: 100%;
  font-weight: var(--fw-regular);
  line-height: var(--lh-ui);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis-weight: none;
}
body { font-size: var(--fs-ui); }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  color: var(--text-1);
  text-wrap: balance;
}
h1 { font-size: var(--fs-title); line-height: var(--lh-title); letter-spacing: var(--tr-title); }
h2 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--tr-h1); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--tr-h3); }
h4, h5, h6 { font-size: var(--fs-ui); line-height: var(--lh-ui); }
p, li, dd, figcaption { text-wrap: pretty; }
b, strong { font-weight: var(--fw-bold); }
small { font-size: var(--fs-small); line-height: var(--lh-small); }
code, kbd, samp, pre { font-family: var(--font-mono); font-size: max(0.86em, var(--fs-small)); }
pre { font-size: var(--fs-code); line-height: var(--lh-code); overflow-x: auto; }

/* ---------- Surfaces ----------
   dist/tokens.css re-points every role on [data-surface]; this paints the ground and the default
   text colour, so an ink island inside a paper page (or the reverse) is complete on its own. */
[data-surface] { background-color: var(--surface); color: var(--text-2); }

/* ---------- Links ----------
   Colour plus an underline, so a link never depends on colour alone. */
a { color: var(--link); text-decoration-line: underline; text-decoration-color: var(--link-underline); text-decoration-thickness: var(--line-hair); text-underline-offset: 0.2em; transition: color var(--dur-fast) var(--ease), text-decoration-color var(--dur-fast) var(--ease); }
a:hover { color: var(--link-hover); text-decoration-color: currentColor; }

/* ---------- Focus ----------
   A solid ring with an offset, never a glow. The offset shows the surface between the ring and an
   orange control, because blue against orange is 1.36:1. */
:focus-visible { outline: var(--focus-w) solid var(--focus); outline-offset: var(--focus-offset); }
:focus:not(:focus-visible) { outline: none; }

/* ---------- Selection ---------- */
::selection { background-color: var(--selection-bg); color: var(--selection-fg); }

/* ---------- Utilities ---------- */

/* The lit line: 1px, unlit at the ends, white hot at --lit-at. The brand gradient became this line;
   there is no glow wash anywhere in the interface. Move the core with style="--lit-at: 72%". */
.lit-line {
  display: block;
  height: var(--line-lit-w);
  border: 0;
  margin: 0;
  background-image: linear-gradient(90deg,
    var(--lit-unlit) 0%,
    var(--lit-stroke) clamp(0%, calc(var(--lit-at, 50%) - 30%), 100%),
    var(--lit-edge) clamp(0%, calc(var(--lit-at, 50%) - 9%), 100%),
    var(--lit-core) var(--lit-at, 50%),
    var(--lit-edge) clamp(0%, calc(var(--lit-at, 50%) + 9%), 100%),
    var(--lit-stroke) clamp(0%, calc(var(--lit-at, 50%) + 30%), 100%),
    var(--lit-unlit) 100%);
}

.visually-hidden:not(:focus):not(:active) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ---------- Motion ----------
   Tokens drop every duration to 0 under reduced motion; this also stops any animation or smooth
   scroll a component did not route through the tokens. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Forced colours ----------
   Shadows and glows disappear; nothing depends on them. Lines and focus use system colours. */
@media (forced-colors: active) {
  .lit-line { background-image: none; background-color: CanvasText; }
  :focus-visible { outline-color: Highlight; }
}

/* ---------- Print ----------
   A printed page keeps every surface as designed: an ink head stays navy with white type, paper
   stays white. Whitening the grounds would leave the role colours on their ink values (white text
   on white paper), so the grounds print exactly, even with background graphics turned off.
   Only the two blurred shadows go; inset marks that carry state (the chosen score ring, the selected
   segment, --sh-print itself) stay. The page margins take the light scheme. */
@media print {
  :root { color-scheme: light; --sh-lead: none; --sh-book: none; }
  :root, [data-surface] { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  * { text-shadow: none !important; }
}