/* ==========================================================================
   Skylark — Ireland's sky today

   Direction B, glass cockpit (DESIGN.md). The token table is repeated here
   because this page does not load styles.css; every value below comes from
   that table and nothing is invented inline. Amber and green are the only
   signal colours: amber for today's traffic and arrivals, green for departures
   and climbing aircraft, neutral grey for everything that is not a state.
   ========================================================================== */

:root {
  --bg: #04060a;
  --bg-sunk: #070a0f;
  --bg-raise: #0b0f16;
  --line: #131a24;
  --line-strong: #1d2735;

  --text: #eaf0f7;
  --text-dim: #aab6c6;
  --muted: #5d6b7d;

  --accent: #f5a524;
  --live: #35d07f;
  --alert: #ff5c5c;
  --neutral: #8f9dae;

  --r: 4px;
  --r-sm: 2px;

  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  --font-prose: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;

  --fs-micro: 9.5px;
  --fs-xs: 11.5px;
  --fs-sm: 12px;
  --fs-md: 12.5px;
  --fs-base: 13.5px;
  --fs-num: 22px;
  --fs-num-sm: 17px;

  --sp-1: 4px;
  --sp-2: 6px;
  --sp-3: 8px;
  --sp-4: 10px;
  --sp-5: 12px;
  --sp-6: 16px;
  --sp-7: 20px;
  --sp-8: 28px;

  --t-fast: 120ms;
  --t-base: 180ms;
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);

  color-scheme: dark;
}

/* ------------------------------------------------------------------ base */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { overflow-x: hidden; }

body {
  background: var(--bg);
  color: var(--text);
  font: var(--fs-base)/1.5 var(--font-mono);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  min-width: 320px;
}

a { color: var(--text-dim); text-decoration: underline; text-underline-offset: 2px; }
a:hover, a:focus-visible { color: var(--text); }
:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; border-radius: var(--r-sm); }

.skip {
  position: absolute;
  top: -100px;
  left: var(--sp-4);
  padding: var(--sp-2) var(--sp-4);
  background: var(--bg-raise);
  color: var(--text);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  z-index: 40;
}
.skip:focus { top: var(--sp-4); }

.vh {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Micro label. The only uppercase text on the page. */
.micro {
  margin: 0;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ----------------------------------------------------------------- shell */

.shell {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--sp-6) var(--sp-8);
}

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-6);
  padding: var(--sp-5) 0;
  border-bottom: 1px solid var(--line);
}
.wordmark { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-sm); color: var(--text-dim); }
.wordmark a { display: inline-flex; align-items: center; text-decoration: none; }
.wordmark img { display: block; width: auto; height: 14px; }
.wordmark .brand-mark { height: 18px; }
.top nav { display: flex; gap: var(--sp-5); font-size: var(--fs-sm); }

.title { padding: var(--sp-7) 0 var(--sp-6); }
.title h1 { margin: var(--sp-1) 0 var(--sp-2); font-size: var(--fs-num); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }
.title p { margin: 0; color: var(--text-dim); font-size: var(--fs-sm); }
.title .lede { font-family: var(--font-prose); font-size: var(--fs-base); color: var(--text-dim); max-width: 60ch; }

/* ------------------------------------------------------------------ card */

.card {
  padding: var(--sp-6) 0 var(--sp-7);
  border-top: 1px solid var(--line);
}
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-5); flex-wrap: wrap; margin-bottom: var(--sp-5); }
.card h2 { margin: 0; font-size: var(--fs-num-sm); font-weight: 600; line-height: 1.3; }
.card-head .micro { flex-basis: 100%; }
.card-head .note { margin: 0; font-size: var(--fs-xs); color: var(--muted); }
.card p { margin: 0; }
.card .summary { font-size: var(--fs-sm); color: var(--text-dim); max-width: 80ch; }
.card .quiet { font-size: var(--fs-sm); color: var(--muted); padding: var(--sp-4) 0; }
.card .quiet:empty { display: none; }
.card .summary:empty { display: none; }

.pair { display: grid; gap: var(--sp-6); }
@media (min-width: 900px) {
  .pair { grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
  .pair > .card { border-top: 0; padding-top: 0; }
  .pair-wrap { border-top: 1px solid var(--line); padding-top: var(--sp-6); }
}

/* ------------------------------------------------------------ live strip */

.live {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 var(--sp-5);
  border-top: 1px solid var(--line);
}
.tile { padding: var(--sp-5) 0 var(--sp-4); border-bottom: 1px solid var(--line); min-width: 0; }
.tile .micro { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile .num {
  display: block;
  margin-top: var(--sp-1);
  font-size: var(--fs-num);
  line-height: 1.2;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}
.tile .num.is-live { color: var(--live); }
.tile .num.is-stale { color: var(--muted); }
.tile .sub { display: block; margin-top: var(--sp-1); font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile .num.small { font-size: var(--fs-num-sm); line-height: 1.55; }
@media (min-width: 900px) {
  .live { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------- charts */

.chart { position: relative; width: 100%; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart text { font-family: var(--font-mono); font-size: var(--fs-xs); fill: var(--muted); }
.chart .grid { stroke: var(--line); stroke-width: 1; shape-rendering: crispEdges; }
.chart .axis { stroke: var(--line-strong); stroke-width: 1; shape-rendering: crispEdges; }
.chart .bar { fill: var(--accent); }
.chart .bar--partial { fill: var(--accent); fill-opacity: 0.45; stroke: var(--accent); stroke-width: 1; stroke-dasharray: 2 2; }
.chart .yday { fill: none; stroke: var(--neutral); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.chart .hit { fill: transparent; stroke: none; cursor: default; }
.chart .hit:hover ~ .bar-of, .chart .hit:focus-visible { outline: none; }
.chart .mark { stroke: var(--bg); stroke-width: 2; }
.chart .mark--climb { fill: var(--live); }
.chart .mark--descend { fill: var(--accent); }
.chart .mark--level { fill: var(--neutral); }
.chart .mark.is-hot { stroke: var(--text); }
.chart .bar.is-hot { fill: var(--text); }

.tip {
  position: absolute;
  z-index: 5;
  max-width: 240px;
  padding: var(--sp-2) var(--sp-3);
  background: var(--bg-raise);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  font-size: var(--fs-xs);
  color: var(--text-dim);
  pointer-events: none;
  transform: translate(-50%, calc(-100% - 8px));
  width: max-content;
  white-space: normal;
}
.tip[hidden] { display: none; }
.tip .tip-v { display: block; color: var(--text); font-size: var(--fs-sm); font-weight: 600; }

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-6);
  margin: var(--sp-3) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-xs);
  color: var(--text-dim);
}
.legend li { display: inline-flex; align-items: center; gap: var(--sp-2); }
.legend .sw { display: inline-block; width: 10px; height: 10px; border-radius: var(--r-sm); background: var(--neutral); }
.legend .sw--today { background: var(--accent); }
.legend .sw--partial { background: var(--accent); opacity: 0.45; }
.legend .sw--line { width: 14px; height: 0; border-top: 1.5px solid var(--neutral); border-radius: 0; }
.legend .sw--climb { background: var(--live); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.legend .sw--descend { background: var(--accent); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.legend .sw--level { background: var(--neutral); border-radius: 50%; }
.legend .sw--arr { background: var(--accent); }
.legend .sw--dep { background: var(--live); }

/* --------------------------------------------------------------- bar lists */

.bars { margin: 0; padding: 0; list-style: none; }
.bars li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm);
  min-width: 0;
}
.bars li:first-child { border-top: 0; }
.bars .lbl { min-width: 0; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bars .lbl .code { color: var(--muted); font-size: var(--fs-xs); margin-left: var(--sp-2); }
.bars .bar-cell { min-width: 0; }
.bars .bar-cell svg { display: block; width: 100%; height: 8px; }
.bars .fill { fill: var(--neutral); }
.bars .fill--arr { fill: var(--accent); }
.bars .fill--dep { fill: var(--live); }
.bars .val { text-align: right; white-space: nowrap; color: var(--text); font-weight: 600; }
.bars .val .dim { color: var(--muted); font-weight: 400; font-size: var(--fs-xs); }

@media (max-width: 599px) {
  /* On a phone the label and value share a row and the bar takes the next,
     so an airline or band name is never cut short. */
  .bars li { grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-1) var(--sp-4); }
  .bars .lbl { grid-row: 1; grid-column: 1; }
  .bars .val { grid-row: 1; grid-column: 2; }
  .bars .bar-cell { grid-row: 2; grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------- rows */

.rows { margin: 0; padding: 0; list-style: none; }
.rows li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm);
  min-width: 0;
}
.rows li:first-child { border-top: 0; }
.rows .k { color: var(--text-dim); flex-shrink: 0; }
.rows .v { color: var(--text); text-align: right; min-width: 0; overflow-wrap: anywhere; }
.rows .v strong { font-weight: 600; }
.rows .v .dim { color: var(--muted); }

.record { display: grid; grid-template-columns: 1fr; gap: var(--sp-1); padding: var(--sp-4) 0; border-top: 1px solid var(--line); }
.record:first-child { border-top: 0; }
.record .num { font-size: var(--fs-num-sm); font-weight: 600; line-height: 1.3; }
.record .who { font-size: var(--fs-sm); color: var(--text-dim); overflow-wrap: anywhere; }
.record .when { font-size: var(--fs-xs); color: var(--muted); }
@media (min-width: 900px) {
  .records { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-8); }
  .record { border-top: 0; padding-top: 0; }
}

.attrib { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--line); font-size: var(--fs-xs); color: var(--muted); }
.attrib a { color: var(--text-dim); }

footer.foot { padding: var(--sp-6) 0 0; border-top: 1px solid var(--line); font-size: var(--fs-xs); color: var(--muted); display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6); }

/* ---------------------------------------------------------------- access */

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

@media (prefers-contrast: more) {
  :root { --line: #2a3648; --muted: #93a2b5; --text-dim: #c3cede; }
}