/* ============================================================
   FS25 Portal — Reset, typography, and signature primitives
   Depends on: 01-tokens.css
   ============================================================ */

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* A faint tramline field. Two hairline sets at the width a seed
     drill leaves behind — visible enough to give the page a floor,
     quiet enough to never compete with content. */
  background-image:
    repeating-linear-gradient(
      90deg,
      transparent 0 119px,
      var(--tramline-ink) 119px 120px
    );
}

/* ---------- Headings: stencilled equipment lettering ---------- */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--track-caps);
  color: var(--text);
  text-wrap: balance;
}

h1 { font-size: var(--fs-xl);   font-weight: 700; }
h2 { font-size: var(--fs-lg);   }
h3 { font-size: var(--fs-md);   }
h4 { font-size: var(--fs-base); }
h5, h6 {
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: var(--track-plate);
  color: var(--text-dim);
}

p { text-wrap: pretty; }

/* ---------- Links ---------- */

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--t) var(--ease);
}

a:hover { color: var(--accent-hover); }

/* Underline links inside prose only — chrome links are identified by
   position and colour, and underlining them makes the UI noisy. */
.post-content a,
.forum-post-content a,
.prose a {
  text-decoration: underline;
  text-decoration-color: var(--amber-line);
  text-underline-offset: 2px;
}

/* ---------- Focus: non-negotiable accessibility floor ---------- */

:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

:focus:not(:focus-visible) { outline: none; }

/* ---------- Form element inheritance ---------- */

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

button { background: none; border: none; cursor: pointer; }

img, svg, video { max-width: 100%; display: block; }
img, video { height: auto; }

/* Because the rule above makes <svg> a block, `text-align: center` on a
   parent no longer centres it — a block box ignores text-align. Centre it
   explicitly wherever a container is centring its contents, so a standalone
   icon above a heading lines up with the text beneath it. */
[style*="text-align:center"] > svg,
[style*="text-align: center"] > svg,
.text-center > svg {
  margin-inline: auto;
}

.text-center { text-align: center; }

table { border-collapse: collapse; width: 100%; }

::placeholder { color: var(--text-faint); opacity: 1; }

::selection {
  background: var(--amber);
  color: var(--bg);
}

/* ---------- Scrollbars ---------- */

* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border: 2px solid var(--bg);
  border-radius: var(--r-pill);
}
::-webkit-scrollbar-thumb:hover { background: var(--amber-dim); }

/* ============================================================
   Signature primitives
   ============================================================ */

/* ---------- Tramline ----------
   The parallel guide lines a tractor follows down a field. Used as
   a section divider: two hairlines with a gap, never a single rule.
   This is the page's structural signature, so it earns its keep by
   separating real sections rather than decorating arbitrary gaps. */

hr,
.tramline {
  border: 0;
  height: 3px;
  border-top: var(--hairline) solid var(--border);
  border-bottom: var(--hairline) solid var(--border);
  background: transparent;
  margin: var(--s6) 0;
}

.tramline-tight { margin: var(--s4) 0; }

/* ---------- Data ----------
   Versions, timestamps, IDs, counts. Monospace because they are
   machine output, and tabular figures so columns of them line up. */

.data,
.mono,
time,
code,
kbd {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.92em;
  letter-spacing: -0.01em;
}

code {
  background: var(--bg-sunk);
  border: var(--hairline) solid var(--border-faint);
  border-radius: var(--r-sm);
  padding: 0.1em 0.36em;
  color: var(--amber);
}

/* ---------- Micro-label ----------
   The stamped caption on a data plate: FIELD NAME above its value. */

.plate-label,
.stat-label,
.form-hint,
.toggle-hint {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--track-plate);
  color: var(--text-faint);
}

/* ---------- Spec plate ----------
   The signature component. A stamped metal block carrying an
   entry's machine data — the amber edge is the only place raw
   accent colour touches a panel border. */

.spec-plate {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2) var(--s5);
  background: var(--surface-2);
  border: var(--hairline) solid var(--border);
  border-left: var(--plate-edge) solid var(--amber);
  border-radius: 0 var(--r) var(--r) 0;
  padding: var(--s3) var(--s4);
  box-shadow: var(--edge-light);
}

.spec-plate .plate-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.spec-plate .plate-value {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- Utility ---------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--s5);
}

.container-narrow { max-width: var(--container-narrow); }

.text-muted  { color: var(--text-dim); }
.text-faint  { color: var(--text-faint); }
.flex-grow   { flex: 1 1 auto; min-width: 0; }
.full-width  { width: 100%; }

.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;
}

/* Skip link — keyboard users shouldn't tab the whole nav on every page. */
.skip-link {
  position: absolute;
  top: var(--s2);
  left: var(--s2);
  z-index: 200;
  padding: var(--s2) var(--s4);
  background: var(--amber);
  color: var(--bg);
  font-weight: 600;
  border-radius: var(--r);
  transform: translateY(-200%);
  transition: transform var(--t) var(--ease);
}
.skip-link:focus { transform: translateY(0); color: var(--bg); }

/* ---------- Motion preference ----------
   Honour the OS setting rather than assuming everyone wants motion. */

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