/*
 * The design system's base styles and v1 components, written in tokens only
 * (no hex here: tokens.css holds every colour). Phone first: one column with a
 * 16px gutter, 24px from tablet up; 44px touch targets.
 */
*, *::before, *::after { box-sizing: border-box; }

/* hidden means hidden, whatever display a component sets. */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: var(--body);
}

h1 { font: var(--title); margin: 0; }
h2 { font: var(--heading); margin: 0 0 var(--space-2); }
p { margin: 0 0 var(--space-3); }
a { color: var(--link); }

:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* Times, credit, dates and trip numbers line up in columns. */
.figures, time, .credit, .trip-number { font-variant-numeric: tabular-nums; }

main {
  max-width: 1440px;
  margin: 0 auto;
  padding: var(--space-4);
  display: grid;
  gap: var(--space-4);
}
main.narrow { max-width: 640px; }
@media (min-width: 640px) { main { padding: var(--space-6); } }

/* Card: content sits on surface; pages sit on bg. */
.card, .panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: var(--space-4);
}

.muted { color: var(--ink-muted); font: var(--small); }
.subtle { color: var(--ink-subtle); font: var(--caption); }

/* Status: colour, icon and word, never colour alone. The word is the text. */
.bad { color: var(--danger); }
.good { color: var(--status-success); }

.status {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 2px var(--space-2); border-radius: var(--radius-pill); font: var(--label);
}
.status.fits { color: var(--status-success); background: var(--status-success-soft); }
.status.warning { color: var(--status-attention); background: var(--status-attention-soft); }
.status.draft { color: var(--status-pending); background: var(--status-pending-soft); }
.status.locked { color: var(--status-locked); background: var(--status-locked-soft); }
.status.breaks { color: var(--danger); background: var(--danger-soft); }

/* Code badge: stations, roster codes, trip pools, trip types. Neutral, never a status colour. */
.code {
  display: inline-block; padding: 1px var(--space-2); border-radius: var(--radius-s);
  background: var(--surface-sunken); color: var(--ink); font: var(--caption);
  font-variant-numeric: tabular-nums;
}

/* Forms. */
form { display: grid; gap: var(--space-3); margin-top: var(--space-3); }
label { display: grid; gap: var(--space-1); font: var(--label); color: var(--ink); }
label:has(> input[type="checkbox"]) { display: flex; align-items: center; gap: var(--space-2); }
input, select, textarea {
  font: var(--field); color: var(--ink); background: var(--surface);
  min-height: var(--touch); padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line-strong); border-radius: var(--radius-s);
}
input[type="checkbox"] { min-height: auto; width: 20px; height: 20px; accent-color: var(--accent); }

/* Buttons: one primary (blue) per screen; secondary outlined; quiet for the rest. */
button, .button {
  font: var(--label); min-height: var(--touch); padding: 0 var(--space-4);
  border-radius: var(--radius-pill); cursor: pointer; justify-self: start;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
  text-decoration: none; display: inline-flex; align-items: center; justify-content: center;
}
button.primary, .button.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
button.primary:hover, .button.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
button.quiet, .button.quiet { background: transparent; border-color: transparent; color: var(--link); }
button:disabled { opacity: .5; cursor: default; }

ul { margin: var(--space-2) 0; padding-left: var(--space-6); }

/* Tabs: a row of quiet buttons; the selected one in accent-soft, as the shell's nav. */
.tabs { display: flex; gap: var(--space-1); flex-wrap: wrap; }
.tabs [role="tab"] { border-color: transparent; background: transparent; color: var(--ink-muted); }
.tabs [role="tab"][aria-selected="true"] { background: var(--accent-soft); color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}