/* ---- static-site additions (Intro + Replays pages) ---------------------- */
/* These selectors are new; nothing above is modified, so this file stays a
   strict superset of the Flask console's stylesheet. */

#nav .navnote{color:var(--ink-faint);font-size:12px}

/* Intro: "what's different" definition list */
.diffs{margin:10px 0 4px;max-width:820px}
.diffs dt{color:var(--hero);font-size:13px;letter-spacing:.5px;margin-top:12px}
.diffs dd{margin:4px 0 0;color:var(--ink-dim);font-size:12.5px;line-height:1.6}
.diffs dd code{color:var(--item);background:#10111a;padding:1px 5px;border-radius:3px}

/* Replays: filter row above the trial list */
#t-list .filters{margin:0 0 10px}
#t-list .frow{display:flex;align-items:center;flex-wrap:wrap;gap:4px;margin:6px 0}
#t-list .flabel{color:var(--ink-faint);font-size:11px;width:44px}
.fbtn{background:var(--panel);color:var(--ink-dim);border:1px solid var(--ctl-border);
  border-radius:3px;padding:3px 8px;font:inherit;font-size:11px;cursor:pointer}
.fbtn:hover{background:#23242f;color:var(--ink)}
.fbtn[aria-pressed=true]{background:var(--stairs);border-color:var(--stairs);
  color:#10111a;font-weight:bold}

/* Replays: trial rows */
#t-list .f{display:flex;justify-content:space-between;align-items:baseline;gap:8px;
  padding:7px 6px;overflow-wrap:normal}
#t-list .f .fname{white-space:nowrap}
#t-list .f .fmeta{display:flex;align-items:baseline;gap:6px;white-space:nowrap}
#t-list .f .fturns{color:var(--ink-faint);font-size:11px}
/* Outcome chip: the glyph and the depth number carry the meaning; colour is a
   redundant cue, never the only one. */
.chip{font-size:11px;letter-spacing:.5px}
.chip.ok{color:var(--good)}
.chip.no{color:var(--ink-faint)}

/* Replays: summary strip — two stat tiles + one single-hue depth histogram */
#summary{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-start;
  margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid var(--line)}
#summary .tiles{display:flex;gap:10px}
#summary .tile{background:var(--panel-2);border:1px solid var(--line);border-radius:4px;
  padding:8px 12px;min-width:120px}
#summary .tval{color:var(--stairs);font-size:24px;line-height:1.1}
#summary .tof{color:var(--ink-faint);font-size:14px}
#summary .tlab{color:var(--ink-dim);font-size:11px;margin-top:3px}
#summary .chart{flex:1;min-width:230px;max-width:420px}
#summary .ctitle2{color:var(--ink-dim);font-size:11px;letter-spacing:.5px;margin-bottom:5px}
#summary .cn{color:var(--ink-faint)}
#summary .brow{display:flex;align-items:center;gap:7px;margin-bottom:2px}
#summary .blab{color:var(--ink-faint);font-size:11px;width:20px;text-align:right}
#summary .btrack{flex:1;height:9px;background:#10111a;border-radius:2px;overflow:hidden}
#summary .bfill{display:block;height:100%;border-radius:0 2px 2px 0;min-width:2px}
#summary .bval{color:var(--ink);font-size:11px;width:20px}

/* Replays: trial header + play-this-seed hand-off */
.thead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.thead .tname{color:var(--hero);font-size:14px;letter-spacing:.5px}
.playbtn{margin-left:auto;text-decoration:none;display:inline-block}

/* Replays: agent-code / skill panes */
#t-llm .lbl .sub{color:var(--ink-faint);font-weight:normal}
#t-llm .llmdet{margin-top:8px}
#t-llm .llmdet summary{color:var(--ink-dim);cursor:pointer;font-size:11px;padding:2px 0}
#t-llm .mlist{margin:4px 0 8px;padding-left:20px;color:var(--ink-dim);line-height:1.6}
#t-llm .mlist code{color:var(--stairs)}
#t-llm .skres{margin-top:6px;font-size:12px}
#t-llm .skres.ok{color:var(--good)}
#t-llm .skres.no{color:var(--warn)}
/* skill-only trials have no map; keep the slot from collapsing awkwardly */
#t-map[hidden]{display:none}
#t-llm .nomap{color:var(--ink-dim);font-size:12px;line-height:1.6;background:var(--panel-2);
  border:1px dashed var(--line);border-radius:4px;padding:9px 11px;margin-bottom:10px}
#t-llm .nomap b{color:var(--ink)}
#t-llm .nomap code{color:var(--item)}