/* Base styles. Every value comes from a custom property in tokens.css. */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--link); }

.wrap { max-width: 960px; margin: 0 auto; padding: var(--s-6) var(--s-4); }

.masthead { display: flex; align-items: center; gap: var(--s-2); font-weight: 700; letter-spacing: -0.01em; }
.masthead a { color: inherit; text-decoration: none; display: flex; align-items: center; gap: var(--s-2); }

h1, h2, h3 { font-family: var(--font-display); line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 var(--s-3); }
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
.lede { font-size: var(--fs-lg); color: var(--text-muted); max-width: 40ch; }
.eyebrow { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); font-weight: 600; }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--s-6); }

.button {
  display: inline-flex; align-items: center; gap: var(--s-2);
  background: var(--accent); color: var(--c-ink); border: 0; border-radius: var(--radius-pill);
  padding: var(--s-3) var(--s-6); font-weight: 600; text-decoration: none; cursor: pointer;
}
.button:hover { filter: brightness(1.05); }

.pill { display: inline-block; font-size: var(--fs-xs); font-weight: 600; border-radius: var(--radius-pill); padding: 2px var(--s-2); }
.pill--booked { background: color-mix(in srgb, var(--c-go) 15%, transparent); color: var(--go-text); }
.pill--outstanding { background: color-mix(in srgb, var(--c-hold) 18%, transparent); color: var(--hold-text); }
.pill--skipped { background: var(--border); color: var(--text-muted); }

.stats { display: flex; flex-wrap: wrap; gap: var(--s-6); margin: var(--s-6) 0; }
.stat__value { font-size: var(--fs-xl); font-weight: 700; font-variant-numeric: tabular-nums; }
.stat__label { font-size: var(--fs-sm); color: var(--text-muted); }

.board { width: 100%; border-collapse: collapse; }
.board th { text-align: left; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); padding: var(--s-2); border-bottom: 1px solid var(--border); }
.board td { padding: var(--s-3) var(--s-2); border-bottom: 1px solid var(--border); vertical-align: top; }
.board .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--text-muted); }

@media (max-width: 640px) {
  h1 { font-size: var(--fs-xl); }
  .board thead { display: none; }
  .board tr {
    display: grid; grid-template-columns: auto auto 1fr auto; column-gap: var(--s-3);
    grid-template-areas: "name name name status" "from flight lands lands";
    padding: var(--s-3) 0; border-bottom: 1px solid var(--border);
  }
  .board td { border: 0; padding: var(--s-1) 0; font-size: var(--fs-sm); }
  .board td:nth-child(1) { grid-area: name; font-size: var(--fs-md); }
  .board td:nth-child(2) { grid-area: from; }
  .board td:nth-child(3) { grid-area: flight; }
  .board td:nth-child(4) { grid-area: lands; }
  .board td:nth-child(5) { grid-area: status; }
}