/* Reset, page frame and the type ladder.
   Hierarchy is carried by opacity, never by extra greys. */

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

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  background: var(--surface-app);
  color: var(--text-primary);
  font: 400 var(--fs-body) / var(--lh-body) var(--font);
  letter-spacing: var(--tracking-tight);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, figure, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }

img { max-width: 100%; display: block; }

button, input, textarea, select {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  background: none;
  border: none;
  margin: 0;
}

button { cursor: pointer; }
button:disabled, [aria-disabled="true"] { opacity: .4; cursor: default; }

a { color: inherit; text-decoration: none; }

/* Focus is always visible. Never remove this. */
:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-input);
}
:focus:not(:focus-visible) { outline: none; }

/* ---- Type ladder ---------------------------------------------------- */

.t-display {
  font: 700 var(--fs-display) / var(--lh-display) var(--font);
  letter-spacing: var(--tracking-tight);
}
.t-h1 {
  font: 700 var(--fs-h1) / var(--lh-h1) var(--font);
  letter-spacing: var(--tracking-tight);
}
.t-h2 {
  font: 700 var(--fs-h2) / var(--lh-h2) var(--font);
  letter-spacing: var(--tracking-tight);
}
.t-h3 {
  font: 700 var(--fs-h3) / var(--lh-h3) var(--font);
  letter-spacing: var(--tracking-tight);
}
.t-row {
  font: 500 var(--fs-row) / var(--lh-row) var(--font);
}
.t-body {
  font: 450 var(--fs-body) / var(--lh-body) var(--font);
  letter-spacing: var(--tracking-tight);
}
.t-body-sm {
  font: 400 13px / 1.5 var(--font);
}
.t-meta {
  font: 400 var(--fs-meta) / var(--lh-meta) var(--font);
  color: var(--text-meta);
}

/* Eyebrow / label. The workhorse of this design system. */
.t-label {
  font: 450 var(--fs-label) / var(--lh-label) var(--font);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-meta);
}
.t-label-11 { font-size: 11px; }
.t-label-12 { font-size: 12px; }

.t-timecode {
  font: 450 12px / 1.2 var(--font-mono);
  letter-spacing: 0;
}

/* Colour utilities — the opacity ladder */
.c-primary   { color: var(--text-primary); }
.c-body      { color: var(--text-body); }
.c-secondary { color: var(--text-secondary); }
.c-meta      { color: var(--text-meta); }
.c-ok        { color: var(--status-ok); }
.c-warn      { color: var(--status-warn); }
.c-risk      { color: var(--status-risk); }

/* Italic is only ever a single word of emphasis. */
em { font-style: italic; }

/* Measure: body copy sits at roughly 66ch. */
.measure    { max-width: 66ch; }
.measure-60 { max-width: 60ch; }
.measure-64 { max-width: 64ch; }

/* ---- The one directional glyph -------------------------------------- */
/* Text links shift to amber on hover and slide the arrow ~4px right.
   Never underline on hover. */
.arrow-link {
  font: 450 var(--fs-label) / var(--lh-label) var(--font);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color var(--dur-fast) var(--ease);
}
.arrow-link::after {
  content: "\2192";
  transition: transform var(--dur-fast) var(--ease);
}
.arrow-link:hover { color: var(--status-warn); }
.arrow-link:hover::after { transform: translateX(4px); }

.text-link { transition: color var(--dur-fast) var(--ease); }
.text-link:hover { color: var(--status-warn); }

/* ---- Layout helpers -------------------------------------------------- */
.stack { display: flex; flex-direction: column; }
.row   { display: flex; align-items: center; }
.row-b { display: flex; align-items: baseline; }
.row-t { display: flex; align-items: flex-start; }
.row-e { display: flex; align-items: flex-end; }
.between { justify-content: space-between; }
.push { margin-left: auto; }
.push-top { margin-top: auto; }
.grow { flex: 1; }
.none { flex: none; }
.wrap { flex-wrap: wrap; }
.nowrap { white-space: nowrap; }

.g-1 { gap: 4px; }   .g-2 { gap: 8px; }   .g-3 { gap: 12px; }
.g-4 { gap: 16px; }  .g-5 { gap: 20px; }  .g-6 { gap: 24px; }
.g-7 { gap: 28px; }  .g-8 { gap: 32px; }

.hairline { height: 1px; background: var(--border-hairline); border: 0; }
.divider-v { width: 1px; height: 20px; background: rgba(242, 242, 242, .2); flex: none; }

.hidden, [hidden] { display: none !important; }
.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;
}

/* ---- Scroll ---------------------------------------------------------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-hairline);
  border-radius: var(--radius-pill);
  border: 3px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); background-clip: padding-box; }