/* Deep RL crew pairing — static demo site.
   Palette per the dataviz reference (light and dark both selected). */
:root {
  --surface-1: #fcfcfb;
  --page: #f9f9f7;
  --ink: #0b0b0b;
  --ink-2: #52514e;
  --muted: #898781;
  --grid: #e1e0d9;
  --axis: #c3c2b7;
  --border: rgba(11, 11, 11, 0.10);
  --s1: #2a78d6;  /* blue    — sit / train series */
  --s2: #1baf7a;  /* aqua    — short connection / eval series */
  --s3: #eda100;  /* yellow  — crew marker */
  --s5: #4a3aa7;  /* violet  — layover */
  --s6: #e34948;  /* red     */
  --st-serious: #ec835a;   /* critical connection */
  --st-critical: #d03b3b;  /* NCC / strand */
  --st-good: #0ca30c;
  --callout: #c2410c;        /* orange, stepped for 4.9:1 on the light surface */
  --callout-bg: rgba(194, 65, 12, 0.06);
}
@media (prefers-color-scheme: dark) {
  :root {
    --surface-1: #1a1a19;
    --page: #0d0d0d;
    --ink: #ffffff;
    --ink-2: #c3c2b7;
    --muted: #898781;
    --grid: #2c2c2a;
    --axis: #383835;
    --border: rgba(255, 255, 255, 0.10);
    --s1: #3987e5;
    --s2: #199e70;
    --s3: #c98500;
    --s5: #9085e9;
    --s6: #e66767;
    --callout: #eb6834;      /* 6.1:1 on the dark surface */
    --callout-bg: rgba(235, 104, 52, 0.10);
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font: 13px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--page); color: var(--ink);
}
a { color: var(--s1); }

header {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  background: var(--surface-1);
}
header h1 { font-size: 16px; margin: 0; font-weight: 650; letter-spacing: -.01em; }
header .meta, .meta { color: var(--ink-2); }
header .spacer { flex: 1; }
.ghlink { font-size: 12px; text-decoration: none; border-bottom: 1px solid var(--border); }
.ghlink:hover { border-bottom-color: var(--s1); }

#intro {
  max-width: 900px; padding: 14px 16px 4px; color: var(--ink-2);
}
#intro p { margin: 0 0 8px; }
#intro b { color: var(--ink); font-weight: 600; }
#intro .howto {
  color: var(--callout); background: var(--callout-bg);
  border-left: 3px solid var(--callout);
  padding: 8px 12px; border-radius: 0 6px 6px 0;
}
#intro .howto b { color: var(--callout); font-weight: 650; }
#intro .note {
  border-left: 3px solid var(--axis); padding-left: 10px; color: var(--ink-2);
}

#picker {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 16px 0;
}
#picker label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink-2); font-weight: 600;
}
#show-blurb { flex: 1 1 320px; min-width: 0; }

select, button, input[type=range] { font: inherit; color: inherit; }
select, button {
  background: var(--surface-1); border: 1px solid var(--axis);
  border-radius: 6px; padding: 4px 8px; cursor: pointer;
}
button:hover, select:hover { border-color: var(--s1); }
button.active { border-color: var(--s1); color: var(--s1); font-weight: 600; }

main {
  display: grid; gap: 12px; padding: 12px;
  grid-template-columns: minmax(480px, 1.5fr) minmax(340px, 1fr);
  grid-template-rows: auto auto;
}
.panel {
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 12px; min-width: 0;
}
.panel h2 {
  font-size: 12px; margin: 0 0 6px; color: var(--ink-2);
  font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
}

#graph-panel { display: flex; flex-direction: column; grid-row: 1; grid-column: 1; }
#graph-wrap { position: relative; flex: 1; min-height: 520px; }
#graph { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; }
#graph-legend {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; color: var(--ink-2);
}
.chip { display: inline-flex; align-items: center; gap: 5px; }
.chip i { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }
.chip i.dash { background: repeating-linear-gradient(90deg, currentColor 0 3px, transparent 3px 6px); }
.chip i.node { width: 9px; height: 9px; border-radius: 2px; }

#side {
  grid-column: 2; grid-row: 1;
  display: flex; flex-direction: column; gap: 12px; min-width: 0;
}
#charts { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
#charts .panel canvas { width: 100%; height: 120px; display: block; }
.legend { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; color: var(--ink-2); font-size: 12px; }

/* one recording kind at a time */
body[data-kind="solve"] #charts { display: none; }
body[data-kind="training"] #decision-panel { display: none; }

/* The agent-decision text changes height on every step (one to three
   alternatives, each able to wrap). Let that panel take all the slack in the
   column so the panels under it stay pinned to the bottom instead of being
   shoved up and down as the solve plays. */
body[data-kind="solve"] #decision-panel {
  flex: 1 1 auto; min-height: 132px; overflow: auto;
}
body[data-kind="training"] #charts { margin-bottom: auto; }
#flight-panel { min-height: 132px; }

#side-bottom { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.counters { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.counter .v { font-size: 20px; font-weight: 650; font-variant-numeric: tabular-nums; }
.counter .l { color: var(--muted); font-size: 11px; }
.gauge { margin: 6px 0; }
.gauge .bar {
  height: 10px; border-radius: 4px; background: var(--grid);
  overflow: hidden; position: relative; margin-top: 2px;
}
.gauge .fill { height: 100%; border-radius: 4px 0 0 4px; background: var(--s1); }
.gauge .fill.over { background: var(--st-critical); }
.gauge .l { display: flex; justify-content: space-between; color: var(--ink-2); font-size: 12px; }

#replay-bar {
  grid-column: 1 / 3; grid-row: 2;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
#btn-play { min-width: 40px; }
#scrub { flex: 1 1 240px; accent-color: var(--s1); }
#step-info { flex: 1 1 100%; color: var(--ink-2); }
#step-info b { color: var(--ink); }
.rterms { display: inline-flex; gap: 10px; flex-wrap: wrap; font-size: 12px; }

#decision-body .alt { display: flex; gap: 8px; align-items: baseline; padding: 2px 0; }
#decision-body .alt.chosen { color: var(--ink); font-weight: 600; }
#decision-body .alt .q { font-variant-numeric: tabular-nums; color: var(--ink-2); }
#decision-body .alt .bar-q {
  height: 6px; border-radius: 3px; background: var(--s1); opacity: .35; min-width: 2px;
}
#decision-body .alt.chosen .bar-q { opacity: 1; }

#flight-body div { margin: 2px 0; }

footer {
  max-width: 900px; padding: 4px 16px 28px; color: var(--ink-2);
}
footer code {
  background: var(--grid); border-radius: 4px; padding: 1px 4px; font-size: 12px;
}

#tooltip {
  position: fixed; pointer-events: none; display: none; z-index: 10;
  background: var(--surface-1); border: 1px solid var(--axis); border-radius: 6px;
  padding: 6px 8px; font-size: 12px; box-shadow: 0 2px 8px rgba(0,0,0,.15);
}

@media (max-width: 1000px) {
  main { grid-template-columns: 1fr; grid-template-rows: auto; }
  #graph-panel, #side, #replay-bar { grid-column: 1; grid-row: auto; }
  #graph-wrap { min-height: 420px; }
  #charts { grid-template-columns: 1fr; }
}