/*
  The palette is the report's palette, variable for variable (lib/svgutil.js THEME_CSS).

  That is not a style preference. A report is shown inside a frame in this page, so the two
  are on screen at once — a shell with its own colours would make the generated page look
  like a foreign document embedded in a tool, rather than the thing the tool is for.

  The three-block shape below is the generated page's, for the same reason. Default light,
  a media query for a dark OS, and an explicit [data-theme] that outranks it — the
  `:where(:not([data-theme="light"]))` is what lets light be forced on a dark OS without a
  specificity fight. The dark values appear twice because a rule inside a media query and
  one outside it cannot be merged; the generated page duplicates them too.

  The switch sets [data-theme] on this document AND on the framed one, which is same-origin.
  The generated HTML is never rewritten to carry a preference: it is asserted byte-for-byte
  against what the CLI writes, and a saved report is a standalone file that belongs to
  whoever opens it — it should follow THEIR system, not the theme its author was using.
*/
:root {
  color-scheme: light;
  --surface-1: #fcfcfb; --page: #f9f9f7;
  --text-primary: #0b0b0b; --text-secondary: #52514e; --text-muted: #898781;
  --gridline: #e1e0d9; --border: rgba(11,11,11,0.10);
  --series-1: #2a78d6; --series-3: #1baf7a;
  --hover: rgba(11,11,11,0.04);
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --surface-1: #1a1a19; --page: #0d0d0d;
    --text-primary: #ffffff; --text-secondary: #c3c2b7; --text-muted: #898781;
    --gridline: #2c2c2a; --border: rgba(255,255,255,0.10);
    --series-1: #3987e5; --series-3: #199e70;
    --hover: rgba(255,255,255,0.05);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --surface-1: #1a1a19; --page: #0d0d0d;
  --text-primary: #ffffff; --text-secondary: #c3c2b7; --text-muted: #898781;
  --gridline: #2c2c2a; --border: rgba(255,255,255,0.10);
  --series-1: #3987e5; --series-3: #199e70;
  --hover: rgba(255,255,255,0.05);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--page); color: var(--text-primary);
  font: 15px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif;
}
a { color: inherit; text-decoration: none; }

/* ---- the bar ------------------------------------------------------------------------- */

.bar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 10px;
  height: 52px; padding: 0 18px;
  background: var(--surface-1); border-bottom: 1px solid var(--border);
}
.bar .back { font-weight: 600; letter-spacing: -0.01em; }
.bar .back:hover { color: var(--series-1); }
.crumb { color: var(--text-secondary); font-size: 14px; }
.crumb::before { content: "/"; color: var(--text-muted); margin-right: 10px; }
.grow { flex: 1; }
.actions { display: flex; gap: 8px; }

/* Three states, not two, so "follow the system" stays reachable once the switch has been
   touched. The label is the state the switch is IN, not the one it would move to — a button
   that reads "Dark" while the page is light is a coin toss for the reader. */
.theme { display: inline-flex; align-items: center; gap: 6px; padding-left: 10px; padding-right: 11px; }
.theme svg { width: 14px; height: 14px; flex: none; }

button, .btn {
  font: inherit; font-size: 13.5px;
  padding: 6px 13px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface-1); color: var(--text-primary);
}
button:hover, .btn:hover { background: var(--hover); }
button.primary {
  background: var(--text-primary); color: var(--surface-1); border-color: transparent; font-weight: 500;
}
button.primary:hover { opacity: 0.85; }

/* ---- pages --------------------------------------------------------------------------- */

main { max-width: 1080px; margin: 0 auto; padding: 28px 20px 80px; }
h1 { font-size: 26px; margin: 0 0 4px; letter-spacing: -0.01em; }
h2 { font-size: 17px; margin: 0; letter-spacing: -0.005em; }
.sub { color: var(--text-secondary); font-size: 14px; margin: 0 0 24px; }
.loading { color: var(--text-muted); }

.card {
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: 12px; margin: 0 0 18px; overflow: hidden;
}
.card-head {
  display: flex; align-items: baseline; gap: 10px;
  padding: 15px 18px; border-bottom: 1px solid var(--border);
}
.card-head .meta { color: var(--text-secondary); font-size: 13.5px; }
.card-body { padding: 16px 18px; }

/* ---- tables -------------------------------------------------------------------------- */

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th {
  text-align: left; font-weight: 500; font-size: 11.5px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-muted);
  padding: 9px 18px; border-bottom: 1px solid var(--border);
}
td { padding: 10px 18px; border-bottom: 1px solid var(--gridline); }
tr:last-child td { border-bottom: none; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
tr.pick { cursor: pointer; }
tr.pick:hover td { background: var(--hover); }
.dim { color: var(--text-muted); }
.best { color: var(--series-3); font-weight: 600; }

.tag {
  display: inline-block; font-size: 11.5px; padding: 1px 7px; border-radius: 999px;
  border: 1px solid var(--border); color: var(--text-secondary);
}

/* ---- the session page ---------------------------------------------------------------- */

.stats { display: flex; flex-wrap: wrap; gap: 28px; margin: 0 0 22px; }
.stat .k { font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.stat .v { font-size: 21px; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

.gen { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 0 0 22px; }
@media (max-width: 720px) { .gen { grid-template-columns: 1fr; } }
.gen p { color: var(--text-secondary); font-size: 13.5px; margin: 0 0 14px; }
.opts { display: flex; flex-wrap: wrap; gap: 12px 16px; margin: 0 0 16px; }
.opt { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--text-secondary); }
.opt input[type=number], .opt select {
  font: inherit; font-size: 14px; width: 110px;
  padding: 5px 8px; border-radius: 7px;
  border: 1px solid var(--border); background: var(--page); color: var(--text-primary);
}
.opt.check { flex-direction: row; align-items: center; gap: 7px; align-self: end; padding-bottom: 6px; }
/* Dimmed rather than hidden: an option that is not offered for THIS recording is worth
   knowing about, and the title says why. */
.opt.check.off { opacity: 0.45; cursor: help; }

/* ---- the recorder -------------------------------------------------------------------- */

/* A dot rather than a word, so a glance at the page says whether frames are being written.
   Steady green is writing; a pulse is alive but not recording yet — waiting for a race. */
.rec-dot, .beacon::before {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: var(--text-muted); display: inline-block;
}
.rec-dot.on, .beacon.on::before { background: var(--series-3); }
.rec-dot.pending, .beacon.pending::before { background: var(--series-2, #eb6834); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .rec-dot.pending, .beacon.pending::before { animation: none; } }

.beacon {
  display: none; align-items: center; gap: 7px;
  font-size: 12.5px; color: var(--text-secondary); font-variant-numeric: tabular-nums;
}
.beacon.on, .beacon.pending { display: inline-flex; }
.beacon::before { content: ""; }

.card.rec .card-head { gap: 8px; }
.card.rec .card-head .meta { flex: 1; }

.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.out:not(:empty) { margin-top: 14px; }
.out pre {
  margin: 0; padding: 14px 16px; border-radius: 10px; overflow-x: auto;
  background: var(--page); border: 1px solid var(--border);
  font: 12.5px/1.5 ui-monospace, Consolas, "Courier New", monospace;
  color: var(--text-secondary); white-space: pre;
}
.out .note { margin: 0; }
.card-head .grow { flex: 1; }
.card-head .btn { align-self: center; }
td input[type=checkbox] { width: 16px; height: 16px; cursor: pointer; }
button[disabled] { opacity: 0.45; cursor: default; }
button[disabled]:hover { background: var(--surface-1); }

.note {
  border: 1px solid var(--border); border-left: 3px solid var(--series-1);
  border-radius: 8px; padding: 11px 14px; margin: 0 0 18px;
  font-size: 13.5px; color: var(--text-secondary); background: var(--surface-1);
}
.error h1 { margin-bottom: 10px; }
.error pre {
  white-space: pre-wrap; font-size: 13px; line-height: 1.5;
  background: var(--hover); border-radius: 10px; padding: 14px 16px;
}

/* ---- the frame ----------------------------------------------------------------------- */

.frame-wrap { position: fixed; inset: 52px 0 0 0; background: var(--page); }
.frame-wrap iframe { width: 100%; height: 100%; border: 0; display: block; }
.frame-loading { position: absolute; inset: 0; padding: 40px 24px; margin: 0; background: var(--page); }