/* graph.css — HISTORY: the commit graph as a control surface (graph.js).
   Uses dash.css's tokens (--ground --panel --line --ink --dim --faint --accent --sans --mono)
   and its type scale. Branches differ by stroke pattern, not colour: the page has ONE
   accent, and here it means exactly one thing — a capture the quality gate threw away. */

#history .g-lead { margin: 0 0 18px; max-width: 62ch; color: var(--dim); }
#history .g-lead strong { color: var(--ink); font-weight: 600; }
#history .g-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 14px; }
#history .g-toggle {
  font: 500 0.7em / 1 var(--mono); letter-spacing: 0.08em; color: var(--dim); background: none;
  border: 1px solid var(--line); border-radius: 999px; padding: 10px 16px; cursor: pointer;
}
#history .g-toggle[aria-pressed="true"] { color: var(--ground); background: var(--ink); border-color: var(--ink); }
#history .g-tag { margin-left: auto; font: 500 0.62em / 1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }

#history .g-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: clamp(16px, 2.4vw, 32px); align-items: start; }

/* ---- the commit picker: a LIST of commits, deliberately not a second graph ------------------ */
#history .g-pickrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
#history .g-pick-k { font: 600 0.62em / 1 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--faint); }
#history .g-sel {
  flex: 1 1 260px; min-width: 0; max-width: 100%; font: 400 0.76em / 1.3 var(--mono); color: var(--ink);
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; cursor: pointer;
}
#history .g-sel:hover { border-color: var(--dim); }
#history .g-pickrow[data-busy] .g-sel { opacity: 0.6; }

#history .g-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 0 4px; }
#history .g-chip {
  display: inline-flex; align-items: baseline; gap: 9px; padding: 7px 12px; border-radius: 999px; font-size: 0.74em;
  border: 1px solid var(--line); text-decoration: none; color: var(--ink);
}
#history .g-chip:hover { border-color: var(--dim); }
#history .g-gate { font: 600 0.86em / 1 var(--mono); letter-spacing: 0.06em; color: var(--faint); }
#history .g-chip-reject, #history .g-chip[data-gate="reject"] { border-color: var(--accent); background: rgba(242, 160, 60, 0.1); }
#history .g-chip-reject .g-gate, #history .g-chip[data-gate="reject"] .g-gate { color: var(--accent); }

/* ---- the preview: step one. The run control inside it: step two. -------------------------------- */
#history .g-preview { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px 22px; min-height: 220px; }
#history .g-empty-title { margin: 0 0 6px; font-size: 1.15em; font-weight: 600; }
#history .g-empty p:last-child, #history .g-dim { margin: 0; color: var(--dim); }
#history .g-p-head { display: flex; align-items: center; justify-content: space-between; }
#history .g-p-kicker { font: 600 0.68em / 1 var(--mono); letter-spacing: 0.22em; color: var(--dim); }
#history .g-clear { font: 500 0.66em / 1 var(--mono); color: var(--dim); background: none; border: 1px solid var(--line); border-radius: 6px; padding: 7px 10px; cursor: pointer; }
#history .g-p-title { margin: 12px 0 14px; font-size: 1.12em; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
#history .g-p-title .mono { color: var(--dim); font-weight: 500; font-size: 0.85em; }
#history .g-safe {
  margin: 0 0 14px; padding: 10px 14px; border-radius: 10px; border: 1px dashed var(--faint);
  font: 600 0.8em / 1.3 var(--mono); letter-spacing: 0.04em; color: var(--ink);
}
#history .g-sum { margin: 0 0 10px; }
#history .g-ops { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 6px; }
#history .g-op { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto; gap: 4px 12px; align-items: baseline; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 0.86em; }
#history .g-op a { overflow-wrap: anywhere; }
#history .g-op-what { color: var(--dim); }
#history .g-op-zone { color: var(--faint); font-size: 0.85em; }
#history .g-op[data-op="removed"] a { text-decoration: line-through; text-decoration-color: var(--faint); }
#history .g-meta { margin: 0 0 14px; font-size: 0.76em; color: var(--dim); overflow-wrap: anywhere; }
#history .g-trace { color: var(--faint); white-space: pre; }
#history .g-reject {
  display: grid; gap: 4px; margin: 0 0 14px; padding: 12px 14px; border-radius: 10px; text-decoration: none;
  border: 1px solid var(--accent); background: rgba(242, 160, 60, 0.1); font-size: 0.86em;
}
#history .g-reject strong { color: var(--accent); font-weight: 600; }
#history .g-reject .g-gate { color: var(--accent); margin-top: 2px; }

#history .g-cmd { margin-top: 4px; padding-top: 16px; border-top: 1px solid var(--line); display: grid; gap: 10px; }
#history .g-cmd-what { margin: 0; font-size: 0.82em; color: var(--dim); }
#history .g-run {
  justify-self: start; font: 600 0.95em / 1 var(--sans); color: var(--ground); background: var(--ink);
  border: 0; border-radius: 10px; padding: 15px 22px; cursor: pointer;
}
#history .g-run:disabled { opacity: 0.35; cursor: not-allowed; }
#history .g-run[data-arming] { background: repeating-linear-gradient(115deg, var(--ink) 0 10px, #b9b6b0 10px 20px); }
#history .g-job { display: grid; gap: 4px; font-size: 0.82em; color: var(--dim); min-height: 1.2em; }
#history .g-job strong { color: var(--ink); font-weight: 600; }
#history .g-err, #history .g-note { color: var(--accent); font-size: 0.85em; }
#history .g-note { margin: 12px 2px 0; }

@media (max-width: 900px) {
  #history .g-wrap { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  #history .g-tag { margin-left: 0; width: 100%; }
  #history .g-op { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { #history .g-row[data-new] { animation: none; } }

/* ---- the command console (docs/31): chips propose, text travels, the trace shows where it went ---- */
#history .g-agent { gap: 12px; }
#history .g-cmd-what b { color: var(--ink); }
#history .g-verbs { display: flex; flex-wrap: wrap; gap: 8px; }
#history .g-verb { font-size: 0.8em; padding: 9px 12px; min-height: 38px; border: 1px solid var(--dim); border-radius: 999px; background: transparent; color: var(--ink); cursor: pointer; }
#history .g-verb:hover, #history .g-verb:focus-visible { border-color: var(--ink); background: var(--panel-2); }
#history .g-verb-why { margin: 0; font-size: 0.82em; color: var(--dim); min-height: 2.6em; }
#history .g-line { display: flex; align-items: stretch; gap: 0; border: 1px solid var(--ink); border-radius: 10px; overflow: hidden; background: var(--ground); }
#history .g-prompt { padding: 0 4px 0 12px; display: flex; align-items: center; color: var(--faint); font-size: 0.85em; }
#history .g-line-in { flex: 1 1 auto; min-width: 0; background: transparent; border: 0; color: var(--ink); font-size: 0.95em; padding: 12px 8px; outline: none; }
#history .g-line:focus-within { box-shadow: 0 0 0 2px var(--ink); }
#history .g-send { flex: none; border: 0; border-left: 1px solid var(--ink); background: var(--ink); color: var(--ground); font: 600 0.8em/1 var(--mono); padding: 0 14px; cursor: pointer; }
#history .g-send:disabled { opacity: 0.4; cursor: wait; }
#history .g-bridge { margin: 0; font-size: 0.74em; color: var(--faint); overflow-wrap: anywhere; }
#history .g-plan { display: grid; gap: 10px; }
#history .g-plan:empty { display: none; }
#history .g-served { margin: 0; font-size: 0.85em; color: var(--dim); }
#history .g-served b { color: var(--ink); }
#history .g-path { font: 700 0.78em/1 var(--mono); letter-spacing: 0.1em; padding: 4px 7px; border: 1px solid var(--ink); margin-right: 4px; }
#history .g-served b[data-stub="true"] { background: var(--ink); color: var(--ground); padding: 2px 6px; }
#history .g-hops { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 0; counter-reset: hop; }
#history .g-hop { position: relative; display: grid; gap: 2px; padding: 8px 22px 8px 12px; margin-right: 10px; border: 1px solid var(--line); background: var(--panel-2); max-width: 100%; min-width: 0; }
#history .g-hop:not(:last-child)::after { content: "→"; position: absolute; right: -13px; top: 50%; transform: translateY(-50%); color: var(--dim); font: 14px var(--mono); z-index: 1; }
#history .g-hop-node { font: 700 0.66em/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
#history .g-hop-label { font-size: 0.8em; overflow-wrap: anywhere; }
#history .g-hop-ms { font-size: 0.7em; color: var(--dim); }
#history .g-hop[data-failed="true"] { border-color: var(--accent); }
#history .g-hop[data-failed="true"] .g-hop-node, #history .g-hop[data-failed="true"] .g-hop-label { color: var(--accent); }
#history .g-conflicts { list-style: none; margin: 0; padding: 10px 12px; border: 1px solid var(--accent); border-radius: 10px; display: grid; gap: 6px; font-size: 0.85em; color: var(--dim); }
#history .g-conflicts a { color: var(--accent); }
#history .g-git, #history .g-read { margin: 0; font-size: 0.74em; color: var(--dim); white-space: pre-wrap; overflow-wrap: anywhere; padding: 8px 10px; border: 1px dashed var(--line); max-height: 220px; overflow: auto; }
#history .g-queue { display: grid; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); }

/* ---- the side column: the room from above, then the preview + console ------------------------------------ */
/* the MAP sticks, the preview scrolls under it: the room stays in view while you read the plan beside it */
#history .g-side { display: grid; gap: clamp(12px, 1.6vw, 20px); align-content: start; min-width: 0; }
#history .g-mapwrap { position: sticky; top: 58px; z-index: 2; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px 12px; box-shadow: 0 14px 24px -12px var(--ground); }
#history .rm-caption { margin: 0 0 8px; font-size: 0.85em; color: var(--dim); overflow-wrap: anywhere; }
#history .rm-caption b { font: 700 0.78em/1 var(--mono); letter-spacing: 0.14em; color: var(--ink); margin-right: 4px; }
#history .rm-svg { display: block; width: 100%; height: auto; background: var(--ground); border: 1px solid var(--line); border-radius: 8px; }
#history .rm-zone { fill: rgba(239, 236, 230, 0.035); stroke: var(--faint); stroke-width: 1; stroke-dasharray: 2 5; }
#history .rm-zonelabel { fill: var(--faint); font: 600 10px var(--mono); letter-spacing: 0.16em; text-transform: uppercase; }
#history .rm-scale { stroke: var(--dim); stroke-width: 2; }
#history .rm-scalelabel { fill: var(--faint); font: 10px var(--mono); }
#history .rm-obj { cursor: pointer; }
#history .rm-obj rect { fill: var(--panel-2); stroke: var(--ink); stroke-width: 1.5; }
#history .rm-label { fill: var(--dim); font: 11.5px var(--mono); pointer-events: none; paint-order: stroke; stroke: var(--ground); stroke-width: 3px; stroke-linejoin: round; }
#history .rm-leaving rect { stroke: var(--dim); fill: transparent; opacity: 0.55; }            /* where it is now, about to change */
#history .rm-ghost rect { fill: rgba(239, 236, 230, 0.16); stroke: var(--ink); stroke-width: 1.75; stroke-dasharray: 4 3; }
#history .rm-ghost .rm-label { fill: var(--ink); font-weight: 700; }
#history .rm-arrow { fill: none; stroke: var(--ink); stroke-width: 2; }
#history .rm-arrowhead { fill: var(--ink); }
#history .rm-turn { fill: var(--ink); font: 15px var(--mono); }
#history .rm-cross { stroke: var(--ink); stroke-width: 2.25; stroke-linecap: round; }
#history .rm-gone { fill: var(--ink); font-weight: 700; text-decoration: line-through; }
#history .rm-conflict rect { stroke: var(--accent); fill: rgba(242, 160, 60, 0.14); }
#history .rm-conflict .rm-label { fill: var(--accent); font-weight: 700; }
#history .rm-conflictring { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 3 3; }
#history .rm-hot rect { stroke-width: 3; fill: rgba(239, 236, 230, 0.3); }
#history .rm-hot .rm-label { fill: var(--ink); font-weight: 700; }
#history .rm-tip { margin: 8px 0 0; min-height: 1.35em; font: 0.76em/1.35 var(--mono); color: var(--ink); overflow-wrap: anywhere; }
#history .rm-legend { margin: 2px 0 0; font-size: 0.74em; line-height: 1.4; color: var(--faint); }
#history .g-scrubrow { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
#history .g-scrub { flex: 1 1 auto; min-width: 0; accent-color: var(--ink); height: 26px; }
#history .g-scrub-k { font: 700 0.62em/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); white-space: nowrap; }
#history .g-scrub-label { margin: 2px 0 0; font-size: 0.72em; color: var(--dim); min-height: 1.3em; overflow-wrap: anywhere; }
#history .g-row[data-scrub] { background: var(--panel-2); box-shadow: inset 3px 0 0 var(--ink); }
#history .g-op[data-hot] { border-color: var(--ink); background: var(--panel-2); }

/* ---- the route: five stations down a rail, lit in the order the command reached them — the commit rail's own idiom ---- */
#history .g-route { list-style: none; margin: 0; padding: 10px 12px; display: grid; gap: 0; border: 1px solid var(--line); background: var(--ground); border-radius: 10px; }
#history .g-station { position: relative; display: grid; grid-template-columns: 18px clamp(118px, 30%, 172px) minmax(0, 1fr) 58px; gap: 2px 10px; align-items: baseline; padding: 7px 0; min-width: 0; opacity: 0.42; }
#history .g-station::before { content: ""; position: absolute; left: 6px; top: 0; bottom: 0; width: 2px; background: var(--line); }          /* the rail */
#history .g-station:first-child::before { top: 50%; }
#history .g-station:last-child::before { bottom: 50%; }
#history .g-st-dot { position: relative; z-index: 1; align-self: center; width: 14px; height: 14px; border-radius: 50%; background: var(--ground); border: 2px solid var(--faint); box-sizing: border-box; }
#history .g-st-name { font: 700 0.64em/1.25 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
#history .g-st-who { font-size: 1em; letter-spacing: 0; text-transform: none; padding: 2px 5px; border: 1px solid var(--dim); color: var(--ink); }
#history .g-st-who[data-stub="true"] { background: var(--ink); color: var(--ground); border-color: var(--ink); }
#history .g-st-line { font-size: 0.82em; line-height: 1.3; overflow-wrap: anywhere; }
#history .g-st-ms { font-size: 0.68em; color: var(--dim); white-space: nowrap; text-align: right; }
#history .g-station[data-on="true"] { opacity: 1; }
#history .g-station[data-on="true"] .g-st-dot { background: var(--ink); border-color: var(--ink); }
#history .g-station[data-on="true"]::before { background: var(--ink); }
#history .g-station[data-on="true"] .g-st-name { color: var(--ink); }
#history .g-station[data-k="decipher"][data-on="true"] .g-st-dot { box-shadow: 0 0 0 3px var(--ground), 0 0 0 5px var(--ink); }   /* Andrew's station: the one this panel is about */
#history .g-station[data-skipped="true"] { opacity: 0.6; }
#history .g-station[data-skipped="true"] .g-st-dot { border-style: dashed; }
#history .g-station[data-skipped="true"] .g-st-line { color: var(--dim); }
#history .g-station[data-idle="true"] { opacity: 0.75; }
#history .g-station[data-idle="true"]::before { background: repeating-linear-gradient(var(--faint) 0 3px, transparent 3px 7px); }
#history .g-station[data-idle="true"] .g-st-dot { border-style: dashed; }
#history .g-station[data-failed="true"] { opacity: 1; }
#history .g-station[data-failed="true"] .g-st-dot { background: var(--accent); border-color: var(--accent); }
#history .g-station[data-failed="true"] .g-st-name, #history .g-station[data-failed="true"] .g-st-line { color: var(--accent); }
@media (max-width: 560px) {
  #history .g-station { grid-template-columns: 18px minmax(0, 1fr) auto; }
  #history .g-st-dot, #history .g-st-name { grid-row: 1; }
  #history .g-st-ms { grid-row: 1; grid-column: 3; }
  #history .g-st-line { grid-row: 2; grid-column: 2 / -1; }
}
@media (prefers-reduced-motion: no-preference) {
  #history .g-station[data-on="true"], #history .g-station[data-failed="true"] { animation: g-arrive 0.4s ease-out both; animation-delay: calc(var(--i) * 0.17s); }
  #history .g-station[data-on="true"] .g-st-dot { animation: g-ping 0.5s ease-out both; animation-delay: calc(var(--i) * 0.17s); }
  @keyframes g-arrive { from { opacity: 0.2; } }
  @keyframes g-ping { from { transform: scale(0.4); } 60% { transform: scale(1.35); } to { transform: scale(1); } }
}

/* ---- room clean-up, framed as git ------------------------------------------------------------------------------ */
#history .g-tidy { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin: 0 0 clamp(14px, 2vw, 22px); padding: 16px 20px; border: 1px solid var(--ink); border-radius: 14px; background: var(--panel); }
#history .g-tidy[hidden] { display: none; }
#history .g-tidy-say { flex: 1 1 380px; min-width: 0; display: grid; gap: 4px; }
#history .g-tidy-k { margin: 0; font-size: 0.68em; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); }
#history .g-tidy-line { margin: 0; font-size: 1.08em; line-height: 1.35; }
#history .g-tidy-line b { font-weight: 700; }
#history .g-tidy-sub { margin: 0; font-size: 0.82em; color: var(--dim); }
#history .g-tidy-go { flex: none; font: 700 1em/1 var(--sans); padding: 16px 22px; min-height: 52px; border: 0; border-radius: 12px; background: var(--ink); color: var(--ground); cursor: pointer; }
#history .g-tidy-go:hover { background: #fff; }
#history .g-tidy-go:disabled { opacity: 0.35; cursor: default; }

/* ---- narrow screens, LAST so it wins: the room, then what picking a commit does ---- */
@media (max-width: 900px) {
  #history .g-side { display: contents; }
  #history .g-mapwrap { position: static; box-shadow: none; order: 1; }
  #history .g-pickrow { order: 2; }
  #history .g-preview { order: 3; }
}
@media (max-width: 560px) {
  #history .g-line { flex-wrap: wrap; }
  #history .g-line-in { flex-basis: 60%; }
  #history .g-send { flex-basis: 100%; border-left: 0; border-top: 1px solid var(--ink); padding: 12px 14px; }
}

/* ═══ THE GRAPH ITSELF: the room's commits as a horizontal filmstrip (cloudline.js) ═══════════════
   Time runs left to right and a node is the room's own point cloud at that commit, drawn by
   plyshot.worker.js into a 2D canvas — no WebGL anywhere here, the hero has the page's one context.
   Lanes stack downwards and differ by stroke pattern, never by colour: the accent means one thing. */
#history .g-film { margin: 0 0 clamp(20px, 2.6vw, 34px); }
#history .cl { display: grid; gap: 10px; }
#history .cl-bar { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
#history .cl-k { font: 600 0.62em / 1 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--dim); }
#history .cl-inst { font: 400 0.64em / 1.4 var(--mono); color: var(--faint); overflow-wrap: anywhere; }

#history .cl-scroll {
  position: relative; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 18px;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
#history .cl-scroll::-webkit-scrollbar { height: 9px; }
#history .cl-scroll::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
#history .cl-inner { position: relative; width: max-content; min-width: 100%; }
#history .cl-rails { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; z-index: 0; }
#history .cl-edge { fill: none; stroke: #55555f; stroke-width: 2.5; stroke-linecap: round; }
#history .cl-strip {
  position: relative; z-index: 1; list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-rows: repeat(var(--lanes, 1), auto); gap: 16px 34px; align-items: start;
}
#history .cl-node { --cw: 214px; --ch: 132px; }

#history .cl-card {
  display: grid; gap: 8px; width: var(--cw); text-align: left; padding: 0;
  background: none; border: 0; color: inherit; font: inherit; cursor: pointer;
}
#history .cl-frame {
  position: relative; display: block; width: var(--cw); height: var(--ch); background: #08080b;
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
}
#history .cl-canvas { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 0.35s ease; }
#history .cl-node[data-drawn] .cl-canvas { opacity: 1; }
#history .cl-node[data-drawn] .cl-fallback { display: none; }
/* honest when there is nothing to draw: a sentence, never an empty black square */
#history .cl-fallback {
  position: absolute; inset: 0; display: grid; place-content: center; padding: 0 14px; text-align: center;
  font: 400 0.58em / 1.5 var(--mono); color: var(--faint);
}
#history .cl-node[data-failed] .cl-fallback { color: var(--accent); }
#history .cl-node[data-loading] .cl-frame { border-color: var(--dim); }
#history .cl-card:hover .cl-frame { border-color: var(--dim); }
#history .cl-card[data-head] .cl-frame { border-color: var(--ink); }
#history .cl-node[data-selected] .cl-frame { border-color: var(--ink); box-shadow: 0 0 0 2px var(--ink); }

#history .cl-meta { display: grid; gap: 3px; }
#history .cl-line1 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; }
#history .cl-sha { font-size: 0.6em; color: var(--dim); }
#history .cl-subject {
  font-size: 0.72em; line-height: 1.32; font-weight: 500; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
#history .cl-facts { font-size: 0.56em; line-height: 1.5; color: var(--faint); }
#history .cl-ref { font: 500 0.54em / 1 var(--mono); letter-spacing: 0.04em; padding: 4px 7px; border-radius: 5px; border: 1px solid var(--line); color: var(--dim); white-space: nowrap; }
#history .cl-ref[data-head] { color: var(--ground); background: var(--ink); border-color: var(--ink); }
#history .cl-ref[data-kind="tag"] { border-style: dashed; }
#history .cl-badge { font: 600 0.52em / 1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; padding: 4px 7px; border-radius: 5px; border: 1px solid var(--accent); color: var(--accent); white-space: nowrap; }
#history .cl-badge[data-kind="now"] { border-color: var(--ink); color: var(--ground); background: var(--ink); }

#history .cl-axis { display: flex; align-items: center; gap: 12px; font: 600 0.56em / 1 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--faint); }
#history .cl-axis-line { flex: 1 1 auto; height: 1px; background: linear-gradient(90deg, rgba(109, 106, 102, 0.15), var(--dim)); }

/* ---- one commit, larger: what clicking a node does ------------------------------------------- */
#history .cl-detail { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px 20px; display: grid; gap: 12px; }
#history .cl-detail[hidden] { display: none; }
#history .cl-big-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#history .cl-kicker { font: 600 0.62em / 1 var(--mono); letter-spacing: 0.22em; text-transform: uppercase; color: var(--dim); }
#history .cl-close { font: 500 0.6em / 1 var(--mono); color: var(--dim); background: none; border: 1px solid var(--line); border-radius: 6px; padding: 7px 10px; cursor: pointer; }
#history .cl-big-title { margin: 0; font-size: 1.05em; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
#history .cl-big-title .mono { color: var(--dim); font-weight: 500; font-size: 0.82em; }
#history .cl-big-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; align-items: start; }
#history .cl-big-frame { position: relative; background: #08080b; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
#history .cl-big { display: block; width: 100%; height: auto; }
#history .cl-big-state { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 7px 10px; font: 400 0.58em / 1.4 var(--mono); color: var(--faint); background: linear-gradient(transparent, rgba(6, 6, 8, 0.85) 40%); }
#history .cl-big-state[data-done] { color: var(--dim); }
#history .cl-facts-list { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 5px 14px; margin: 0; font-size: 0.66em; }
#history .cl-facts-list dt { color: var(--faint); letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.86em; }
#history .cl-facts-list dd { margin: 0; overflow-wrap: anywhere; }
#history .cl-links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; font-size: 0.64em; color: var(--dim); }
#history .cl-note { margin: 8px 2px 0; font-size: 0.78em; color: var(--accent); }
#history .cl-note[hidden] { display: none; }

@media (max-width: 760px) {
  #history .cl-big-grid { grid-template-columns: minmax(0, 1fr); }
  #history .cl-scroll { padding: 14px; }
  #history .cl-strip { gap: 14px 24px; }
}
@media (prefers-reduced-motion: reduce) { #history .cl-canvas { transition: none; } }