/* Crash Test Center: the crash hall (top left) keeps its colors in dark mode (it is a picture of a real place); the test
 * sheet, momentum chart, graphs and the right-hand controls follow the site tokens. */
.ctc { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr) 372px; gap: 10px; padding: 8px 10px; box-sizing: border-box; }
.ctc-left { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 8px; min-width: 0; min-height: 0; }
.ctc-scene { position: relative; aspect-ratio: 1000 / 440; max-height: 300px; min-height: 0; border-radius: var(--tlg-radius-lg); overflow: hidden; background: #1b2433; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .25); }
.ctc-hall { display: block; width: 100%; height: 100%; }
.ctc-lower { min-height: 0; display: flex; flex-direction: column; gap: 6px; overflow: hidden; }
.ctc-right { display: flex; flex-direction: column; gap: 8px; min-height: 0; overflow-y: auto; padding: 2px 2px 8px; }
.ctc-h { margin: 0; font-size: 17px; font-weight: 800; }
.ctc-h--sub { margin-top: 4px; }
.ctc-help { margin: 0; font-size: 16px; line-height: 1.35; color: var(--tlg-text-muted); }
.ctc-conv { margin: 0; font-size: 16px; color: var(--tlg-text-muted); }

/* hall text (SVG units; the hall is drawn at ~0.68× at 1366 × 768, so 24-unit text renders ≥ 16 px) */
.ctc-tag-bg { fill: #ffffff; fill-opacity: .94; stroke: #0f172a; stroke-width: 2; }
.ctc-tag-t { font: 800 24px var(--tlg-font, system-ui, sans-serif); fill: #0f172a; }
.ctc-tag-t.is-v { font-weight: 700; fill: #1e3a8a; }
.ctc-parrow-t { font: 800 25px var(--tlg-font, system-ui, sans-serif); fill: #ffffff; paint-order: stroke; stroke: #0b1220; stroke-width: 5px; }
.ctc-jersey { font: 900 26px var(--tlg-font, system-ui, sans-serif); fill: #ffffff; }
.ctc-bar-t { font: 700 24px var(--tlg-font, system-ui, sans-serif); fill: #f8fafc; }
.ctc-bar-t.is-lost { font-weight: 600; fill: #fde68a; }
.ctc-screen-txt, .ctc-screen-tag { font-family: var(--tlg-font, system-ui, sans-serif); }
.ctc-rec { animation: ctc-blink 1s steps(2, start) infinite; }
@keyframes ctc-blink { to { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .ctc-rec { animation: none; } }

/* test sheet */
.ctc-sheet { display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.ctc-cards { display: flex; flex-wrap: wrap; gap: 8px; }
.ctc-card { flex: 1 1 200px; min-width: 0; padding: 8px 12px; border-radius: 12px; border: 2px solid var(--tlg-border); background: var(--tlg-surface); }
.ctc-card--note { flex: 0 1 190px; }
.ctc-card--note dd { white-space: nowrap; }
.ctc-card--note p { margin: 4px 0 0; font-size: 16px; }
.ctc-card-h { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 17px; }
.ctc-sw { display: inline-block; width: 14px; height: 14px; border-radius: 4px; flex: none; }
.ctc-dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 6px 0 0; font-size: 16px; }
.ctc-dl dt { color: var(--tlg-text-muted); }
.ctc-dl dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.ctc-dl dd.is-q { color: #b45309; font-weight: 900; }

/* number entry */
.ctc-num .pn-key { min-height: 46px; }
.ctc-num .pn-input { font-size: 28px; }
.ctc-num .pn.is-ok .pn-display { border-color: #15803d; box-shadow: 0 0 0 3px rgba(21, 128, 61, .3); }
.ctc-num .pn.is-bad .pn-display { border-color: #b91c1c; border-style: dashed; }
.ctc-verdict { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ps-chip.ctc-vchip { display: flex; flex-direction: column; align-items: center; min-height: 54px; padding: 4px 10px; font-size: 16px; line-height: 1.2; }
.ps-chip.ctc-vchip span { font-weight: 600; font-size: 16px; }
.ps-chip.ctc-vchip[aria-checked="true"] { background: var(--ps-accent); border-color: var(--ps-accent); color: var(--ps-accent-ink); }

/* momentum chart */
.ctc-chart { display: flex; flex-direction: column; gap: 4px; min-height: 0; }
.ctc-chart-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.ctc-chart-scale { font-size: 16px; color: var(--tlg-text-muted); font-weight: 600; }
.ctc-rows { display: flex; flex-direction: column; gap: 3px; }
.ctc-group { font-size: 16px; font-weight: 800; color: var(--tlg-text-muted); margin-top: 2px; }
.ctc-row { display: flex; align-items: center; gap: 10px; border-radius: 10px; border: 2px solid var(--tlg-border); background: var(--tlg-surface); padding: 0 4px; }
.ctc-row.is-active { border-color: var(--ps-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ps-accent) 30%, transparent); }
.ctc-row.is-given { background: var(--tlg-surface-2); }
.ctc-row.is-ok { border-color: #15803d; }
.ctc-row.is-bad { border-color: #b91c1c; border-style: dashed; }
.ctc-row-lab { flex: 0 0 158px; display: grid; grid-template-columns: 16px 1fr; align-items: center; column-gap: 6px; font-size: 16px; font-weight: 800; line-height: 1.15; }
.ctc-row-lab small { grid-column: 2; font-size: 16px; font-weight: 600; color: var(--tlg-text-muted); }
.ctc-row.is-ok .ctc-row-lab small { color: #15803d; font-weight: 800; }
.ctc-row.is-bad .ctc-row-lab small { color: #b91c1c; font-weight: 800; }
.ctc-row-svg { display: block; flex: 1 1 auto; min-width: 0; height: 56px; overflow: visible; background: #ffffff; border-radius: 6px; }
.ctc-gl { stroke: #e2e8f0; stroke-width: 1.5; }
.ctc-zero { stroke: #334155; stroke-width: 2.5; }
.ctc-end { font: 700 16px var(--tlg-font, system-ui, sans-serif); fill: #64748b; }
.ctc-row-svg .pv-a-label, .ctc-row-svg .pv-c-label { font-size: 17px; }

/* arrow editor */
.ctc-linebtns { display: flex; flex-direction: column; gap: 6px; }
.ctc-linebtn { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 10px; border-radius: 10px; border: 2px solid var(--tlg-border-strong); background: var(--tlg-surface); color: var(--tlg-text); font: inherit; font-size: 16px; text-align: left; cursor: pointer; }
.ctc-linebtn[aria-checked="true"] { border-color: var(--ps-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ps-accent) 30%, transparent); }
.ctc-lb-name { font-weight: 800; }
.ctc-lb-val { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.ctc-editor { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 12px; border: 2px solid var(--tlg-border); background: var(--tlg-surface-2); }
.ctc-ed-row { display: flex; align-items: center; gap: 6px; }
.ctc-k { font-weight: 800; font-size: 16px; margin-right: 2px; }
.ctc-unit { font-weight: 700; font-size: 16px; }
.ctc-size { width: 0; flex: 1 1 auto; min-width: 70px; min-height: 44px; padding: 4px 8px; font: 700 20px var(--tlg-font); border-radius: 8px; border: 2px solid var(--tlg-border-strong); background: var(--tlg-surface); color: var(--tlg-text); font-variant-numeric: tabular-nums; }
.ps-btn.ctc-sq { min-width: 44px; min-height: 44px; padding: 0; font-size: 22px; }
.ctc-dirs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ps-chip.ctc-dir { min-height: 44px; font-size: 16px; }
.ps-chip.ctc-dir[aria-checked="true"] { background: var(--ps-accent); border-color: var(--ps-accent); color: var(--ps-accent-ink); }
.ps-btn.ctc-clear { min-height: 44px; font-size: 16px; }
.ctc-help--keys { font-size: 16px; }

/* graphs (design + AP area) */
.ctc-gbox { position: relative; flex: 1; min-height: 0; }
.ctc-gbox .plg-legend:empty { display: none; }
.ps-btn.ctc-run { min-height: 52px; font-size: 18px; }
.ctc-readout { display: flex; flex-direction: column; gap: 4px; font-size: 16px; }
.ctc-ro { display: flex; justify-content: space-between; gap: 8px; padding: 4px 10px; border-radius: 8px; background: var(--tlg-surface-2); }
.ctc-ro b { font-variant-numeric: tabular-nums; }
.ctc-ro.is-ok b { color: #15803d; }
.ctc-ro.is-bad b { color: #b91c1c; }
.ctc-right .pss { gap: 8px; }
.ctc-right .pss-row { padding: 6px 10px 4px; }

/* Briefing example */
.ctc-ex { display: block; width: 100%; height: auto; }

/* The assignment card's usual corner (bottom-right of the stage) covers the keypad / Run: use the empty bottom of the
   customer column instead (as Free-Body Garage does). */
@media (min-width: 901px) {
  html.ps-locked:has(.ctc) .lga-card { right: auto; left: 12px; }
  html.ps-locked:has(.ctc):has(.lga-card) .ps-side { padding-bottom: 84px; }
}
@media (max-width: 1100px) { .ctc { grid-template-columns: minmax(0, 1fr) 330px; } }
@media (max-width: 900px) {
  .ctc { position: static; grid-template-columns: 1fr; }
  .ctc-left { grid-template-rows: auto auto; }
  .ctc-lower { overflow: visible; }
  .ctc-gbox { min-height: 240px; }
  .ctc-right { overflow: visible; }
}
html.ps-locked:has(.ctc) .ps-side { gap: 8px; }