/* Crossfilter — themed to match the data landing page. Stands alone:
   no external imports, system fonts only, dark editorial palette,
   orange-red accent reserved for the brush + active selection. */

:root {
  --bg:       #0d0e10;
  --bg-2:     #15171a;
  --bg-3:     #1d2024;
  --fg:       #e8e6e1;
  --fg-dim:   #8a8a86;
  --fg-faint: #4a4a48;
  --rule:     #232528;
  --accent:   #ff5e3a;
  --pos:      #67dba1;

  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Hide scrollbars but stay scrollable. Mainly a polish for the
     embedded iframe view, where the parent auto-resizes us anyway. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar { display: none; }

body {
  font: 16px/1.55 var(--sans);
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 3rem) 0 4rem;
  width: 960px;
  max-width: 100%;
  position: relative;
}

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

a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--fg-faint);
}
a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* ---------- loader ---------- */

.loader {
  position: fixed;
  inset: 0;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  z-index: 100;
  padding: 2rem;
  text-align: center;
}
.loader-mark {
  font-size: clamp(3rem, 8vw, 5rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  margin-bottom: 1.4rem;
  color: var(--fg);
  line-height: 0.9;
}
.loader-cursor {
  color: var(--accent);
  animation: blink 1.05s steps(1) infinite;
  margin-left: 0.05em;
}
@keyframes blink { 50% { opacity: 0; } }

.loader-status {
  color: var(--fg-dim);
  font-size: 0.875rem;
  margin-bottom: 1.25rem;
  text-transform: lowercase;
}
.loader-status::before {
  content: '// ';
  color: var(--fg-faint);
}
.loader-bar {
  width: 360px;
  max-width: 80vw;
  height: 6px;
  background: var(--bg-2);
  border: 1px solid var(--rule);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 0.85rem;
  position: relative;
}
.loader-bar-fill {
  height: 100%;
  background: var(--accent);
  width: 0%;
  transition: width 180ms ease-out;
  box-shadow: 0 0 10px var(--accent), 0 0 22px var(--accent);
}
.loader-meta {
  font-size: 0.8125rem;
  color: var(--fg-dim);
  font-variant-numeric: tabular-nums;
  display: flex;
  gap: 0.55rem;
  align-items: baseline;
  white-space: nowrap;
}
.loader-meta .loader-pct { color: var(--accent); font-weight: 500; }
.loader-sep { color: var(--fg-faint); }
.loader-detail {
  margin-top: 1.2rem;
  color: var(--fg-faint);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}
.loader.done {
  opacity: 0;
  transition: opacity 350ms ease-out;
  pointer-events: none;
}

/* ---------- header ---------- */

h1 {
  font: 500 clamp(3rem, 8vw, 5rem)/0.95 var(--mono);
  letter-spacing: -0.04em;
  margin: 0;
  color: var(--fg);
  text-transform: lowercase;
}
h1::after {
  content: '_';
  color: var(--accent);
  margin-left: 0.05em;
  animation: blink 1.05s steps(1) infinite;
}

h2 {
  font: 400 1rem/1.4 var(--mono);
  color: var(--fg-dim);
  margin: 0.6rem 0 1.5rem;
  text-transform: lowercase;
  letter-spacing: 0;
}
h2::before { content: '// '; color: var(--fg-faint); }

body > p {
  line-height: 1.6;
  max-width: 64ch;
  color: var(--fg);
  margin: 0 0 1rem;
}

code {
  font-family: var(--mono);
  background: var(--bg-2);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 0.1em 0.4em;
  font-size: 0.875em;
  color: var(--fg);
}

/* ---------- selection counter ---------- */

aside {
  display: inline-block;
  background: var(--bg-2);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 0.65rem 1rem;
  margin: 0.5rem 0 0;
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--fg-dim);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
aside span:first-child,
aside span:nth-child(3) {
  color: var(--accent);
  font-weight: 500;
  font-size: 0.9375rem;
}

/* ---------- chart grid ----------
   Explicit two-row layout so charts don't reflow randomly:
   row 1 holds the three small histograms (time/delay/distance);
   row 2 holds the wide date histogram, justified to the start so its
   card hugs the SVG (which is sized via an attribute, not CSS).
   Card widths add 2px to each SVG width to absorb the 1px borders. */

#charts {
  display: grid;
  grid-template-columns: 262px 232px 422px;
  gap: 0.75rem;
  padding: 1.25rem 0 0.5rem;
}

.chart {
  background: var(--bg-2);
  border: 1px solid var(--rule);
  border-radius: 6px;
  overflow: hidden;
}
.chart:nth-child(4) {
  grid-column: 1 / -1;
  width: 922px;
  max-width: 100%;
  justify-self: start;
}
.chart svg { display: block; }

.title {
  font: 500 0.7rem/1 var(--mono);
  color: var(--fg-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--rule);
  background: var(--bg);
}

.reset {
  margin-left: 0.6em;
  color: var(--accent);
  font-size: 0.7rem;
  text-transform: lowercase;
  letter-spacing: 0;
  border-bottom: 0;
  cursor: pointer;
}
.reset:hover { color: var(--accent); border-bottom: 0; }

/* ---------- bars ---------- */

.background.bar { fill: var(--rule); }
.foreground.bar { fill: var(--accent); }

/* ---------- axis ---------- */

.axis path,
.axis line {
  fill: none;
  stroke: var(--fg-faint);
  shape-rendering: crispEdges;
}
.axis text {
  font: 10px var(--mono);
  fill: var(--fg-faint);
}

/* ---------- brush ---------- */

.brush { pointer-events: all; }
.brush .background {
  visibility: hidden;
  cursor: crosshair;
}
.brush rect.extent {
  cursor: move;
  fill: var(--accent);
  fill-opacity: 0.18;
  stroke: var(--accent);
  stroke-opacity: 0.55;
  stroke-width: 1;
}
.brush .resize { cursor: ew-resize; }
.brush .resize rect { visibility: hidden; }
.brush .resize path {
  fill: var(--accent);
  stroke: var(--bg);
  stroke-width: 0.5;
}

/* ---------- flight list ---------- */

.list {
  margin-top: 1.5rem;
  min-height: 600px;
  font-family: var(--mono);
  font-size: 0.8125rem;
}

.list .date { margin-bottom: 1.25rem; }

.list .day {
  color: var(--fg-dim);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.4rem;
  padding: 0 0.5rem;
}

.list .flight {
  display: grid;
  grid-template-columns: 90px 90px 90px 1fr 1fr;
  gap: 0;
  background: var(--bg-2);
  border: 1px solid var(--rule);
  border-radius: 4px;
  margin-bottom: 2px;
  padding: 0.4rem 0.5rem;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
  max-width: 720px;
}

.list .flight div { padding: 0 0.5rem; }

.list .time          { color: var(--fg-dim); }
.list .origin,
.list .destination   { color: var(--fg); }
.list div.distance,
.list div.delay      { text-align: right; }
.list .delay         { color: var(--accent); }
.list .delay.early   { color: var(--pos); }

/* ---------- footer ---------- */

footer {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  color: var(--fg-dim);
  font: 0.8125rem var(--mono);
}

/* ---------- responsive ---------- */

/* Stack the chart row only when the viewport is genuinely narrower than
   the three-up grid (≈ 940 px). The landing-page iframe is 1000 px wide
   on desktop, so the threshold has to sit below that or every embedded
   view falls back to single-column. */
@media (max-width: 940px) {
  body { width: 100%; padding-left: 1rem; padding-right: 1rem; }
  #charts { grid-template-columns: 1fr; }
  .chart:nth-child(4) { width: auto; }
  .list .flight { grid-template-columns: 80px 70px 70px 1fr 1fr; max-width: 100%; }
}