/* Base layer: reset, page, typography, icons. Needs tokens.css and fonts/fonts.css loaded first. */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background:
    radial-gradient(120% 60% at 50% -10%, rgb(var(--glow-rgb) / 0.22), transparent 60%),
    radial-gradient(80% 50% at 100% 100%, rgb(var(--glow-rgb) / 0.10), transparent 70%),
    var(--c-void);
  background-attachment: fixed;
  color: var(--c-text);
  font: 400 var(--fs-body)/var(--lh-body) var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--c-gold); text-underline-offset: 3px; }
h1, h2, h3, h4, p { margin: 0; }
:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }

/* typography */
.t-display { font: 500 var(--fs-display)/var(--lh-display) var(--font-display); letter-spacing: var(--ls-tight); }
.t-h1 { font: 500 var(--fs-h1)/var(--lh-h1) var(--font-display); letter-spacing: var(--ls-tight); }
.t-h2 { font: 500 var(--fs-h2)/var(--lh-h2) var(--font-display); }
.t-h3 { font: 500 var(--fs-h3)/var(--lh-h3) var(--font-display); }
.t-body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); }
.t-body { font-size: var(--fs-body); line-height: var(--lh-body); }
.t-small { font-size: var(--fs-small); line-height: var(--lh-small); }
.t-caption { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--c-text-3); }
.t-label {
  font: 500 var(--fs-caption)/var(--lh-caption) var(--font-mono);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--c-gold);
}
.t-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.t-muted { color: var(--c-text-2); }
.t-faint { color: var(--c-text-3); }

/* icons: <svg class="ico"><use href="#i-alloy"/></svg> with icons/sprite.js loaded */
.ico { width: var(--icon-lg); height: var(--icon-lg); flex: none; display: inline-block; vertical-align: middle; }
.ico--sm { width: var(--icon-sm); height: var(--icon-sm); --icon-stroke: 2; }
.ico--md { width: var(--icon-md); height: var(--icon-md); }
.ico--xl { width: 32px; height: 32px; }
.ico--bold { --icon-stroke: 2; }
.is-alloy { color: var(--c-alloy); }
.is-power { color: var(--c-power); }
.is-ordnance { color: var(--c-ordnance); }
.is-habitat { color: var(--c-habitat); }
.is-armour { color: var(--c-armour); }
.is-seat { color: var(--seat); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* documentation pages (not part of the game UI) */
.doc { max-width: 1180px; margin: 0 auto; padding: var(--sp-4) var(--sp-4) var(--sp-10); }
.doc > header { padding: var(--sp-4) 0 var(--sp-5); border-bottom: 1px solid var(--c-line); margin-bottom: var(--sp-6); }
:where(.doc) h1 { font: 500 var(--fs-h1)/var(--lh-h1) var(--font-display); }
:where(.doc) h2 { font: 500 var(--fs-h2)/var(--lh-h2) var(--font-display); color: var(--c-gold); margin: var(--sp-8) 0 var(--sp-3); }
:where(.doc) h3 { font: 500 var(--fs-h3)/var(--lh-h3) var(--font-display); margin: var(--sp-5) 0 var(--sp-2); }
:where(.doc) :where(p, li) { color: var(--c-text-2); max-width: 78ch; }
:where(.doc) :where(p + p) { margin-top: var(--sp-2); }
:where(.doc) code { font: 400 0.86em var(--font-mono); color: var(--c-text); background: rgb(var(--fg-rgb) / 0.06); padding: 1px 5px; border-radius: var(--r-xs); overflow-wrap: anywhere; }
.doc .crumbs { font: 400 var(--fs-small) var(--font-mono); color: var(--c-text-3); margin-bottom: var(--sp-2); }
.doc .crumbs a { color: var(--c-text-2); }
.specimen {
  border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: var(--sp-4);
  background: rgb(var(--raised-rgb) / 0.45); margin: var(--sp-3) 0;
}
.specimen > .t-label { display: block; margin-bottom: var(--sp-3); }
.row-wrap { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }