/* ============================================================
   The chronology chart and its list — /when/ and /when/{id}.
   Board 4 and 5 of "A Way In". Tokens are reference.css's own;
   the controls come from refui/kit.css.
   ============================================================ */

.chrono{border:1px solid rgba(142,153,194,.22);background:rgba(13,18,40,.55);
  border-radius:16px;padding:14px 16px 10px;margin-top:22px;overflow-x:auto}
.chrono svg{display:block;width:100%;min-width:620px;height:auto}
.chrono.live svg{cursor:crosshair}
.cTrueLbl{display:flex;align-items:baseline;gap:10px;margin-bottom:6px;
  font-size:11px;color:rgba(142,153,194,.8)}

/* the two scales live in the same SVG; a class picks one */
.cScale.true{display:none}
.chrono.trueScale .cScale.equal{display:none}
.chrono.trueScale .cScale.true{display:block}

.cTrue{opacity:.5}
.cCol{opacity:.055;pointer-events:none}
.cBase{stroke:rgba(142,153,194,.28);pointer-events:none}
.cRect{opacity:.30;transition:opacity .15s}
.cBand:hover .cRect,.cBand.on .cRect{opacity:.5}
.cBand.sel .cRect{opacity:.62}
.chrono.live .cBand{cursor:pointer}
.chrono.live .cBand:focus-visible .cRect{stroke:var(--gold);stroke-width:1.6}
.cName{fill:var(--starlight);font-family:var(--font-display);font-size:8.6px;letter-spacing:.07em}
.cYear{fill:rgba(142,153,194,.85);font-family:var(--font-body);font-size:8px}

.cMark{transition:opacity .15s}
.cMark.off,.cSeq.off{opacity:.1}
.cSeq{fill:rgba(142,153,194,.7)}
.chrono.live .cMark,.chrono.live .cSeq{cursor:pointer}
.cMark.me,.cSeq.me{stroke:#EFF3FF;stroke-width:1.4}

.cLegend{display:flex;flex-wrap:wrap;gap:14px;margin-top:9px;
  font-size:10.5px;color:rgba(142,153,194,.8)}
.cLegend i{display:inline-block;width:8px;height:8px;border-radius:2px;
  background:rgba(232,184,115,.8);margin-right:6px;vertical-align:0}
.cLegend i.seq{border-radius:50%;background:rgba(142,153,194,.7)}

.kindRow{display:none}
.js .kindRow{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin:12px 0 4px}

/* an event section the filter has emptied folds away with its heading */
.js .secEmpty{display:none}

.evRow .evT{font-weight:400}
.js .evRow.hid{display:none}
.evList .noHits{padding:14px 4px}

@media(max-width:900px){
  .chrono{padding:12px 10px 8px}
  .cTrueLbl{flex-wrap:wrap;gap:4px}
}
@media(prefers-reduced-motion:reduce){
  .cRect,.cMark{transition:none}
}