/* assets/constellation.js. Colours are styles.css tokens only. The rows view sits beside the canvas when the
   host is wide and below it otherwise; the canvas keeps its size either way. */
.cst { container-type: inline-size; font-family: var(--serif-body); color: var(--ink); position: relative; --cst-h: 600px; }
.cst-arc { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px 18px; list-style: none; margin: 0 0 12px; padding: 0; font-size: 13.5px; line-height: 1.3; counter-reset: cst; }
.cst-arc li { border-top: 2px solid var(--gold); padding-top: 6px; display: flex; flex-direction: column; gap: 2px; counter-increment: cst; }
.cst-arc b { font-weight: 700; color: var(--ink); }
.cst-arc b::before { content: counter(cst) ". "; color: var(--gold); }
.cst-arc li > span { color: var(--ink-faded); font-size: 12.5px; }
.cst-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.cst-stage { position: relative; min-width: 0; }
.cst-canvas { display: block; width: 100%; height: var(--cst-h); touch-action: manipulation; }
.cst-wait { height: var(--cst-h); margin: 0; display: grid; place-items: center; color: var(--ink-whisper); font-family: var(--han); }
.cst-keys { position: absolute; top: 0; left: 0; opacity: 0; width: 1px; height: 1px; }
.cst-keys:focus { opacity: 1; width: auto; height: auto; font: 14px var(--serif-body); z-index: 2; }
.cst-say { font-size: 15px; line-height: 1.55; color: var(--ink-faded); }
.cst-say p { margin: 0 0 10px; }
.cst-say b, .cst-zh { color: var(--ink); }
.cst-zh { font-family: var(--han); }
.cst-go { margin: 0 0 10px; max-width: 100%; white-space: normal; text-align: left; }
.cst-rows { border-top: 1px solid var(--hairline); padding-top: 12px; }
.cst-rows .ug-q { font-size: 17px; }
@container (min-width: 860px) {
  .cst-body { grid-template-columns: minmax(0, 1fr) 290px; }
  .cst-side { max-height: var(--cst-h); overflow-y: auto; }
}

#viewDash .lc-graphband .dash-graph-shell.cst, .dash-graph-shell.cst { height: auto; min-height: 0; max-height: none; overflow: visible; background: none; border: 0; --cst-h: 520px; }
.dash-graph-shell.cst + .dash-legend { display: none; }
@media (max-width: 600px) { .cst, #viewDash .lc-graphband .dash-graph-shell.cst, .dash-graph-shell.cst { --cst-h: 470px; } }