/* Additions for the real-time test environment. The palette, the cards and the
   type come from style.css, which this file only extends: a four-across metric
   row, the decision ticker, the progress bar and the check list. */

.grid.four { grid-template-columns: repeat(4, 1fr); }
/* the live run: the ticker earns more room than the chart beside it */
.grid.live { grid-template-columns: 1.45fr 1fr; }
@media (max-width: 900px) { .grid.live { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .grid.four { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .grid.four { grid-template-columns: 1fr; } }

/* A field group inside .grid.fields is display:flex, which outranks the hidden
   attribute. Say it once, here, so hiding a field actually hides it. */
[hidden] { display: none !important; }

/* A grid child defaults to a minimum width of its content, so one long line in
   the ticker would push the chart beside it into a strip. */
.grid > * { min-width: 0; }
.trow .c { min-width: 0; }

/* ---------------------------------------------------------------- the ticker */
/* A fixed height and no scroll anchoring. Rows enter at the top of this box ten
   times a second; without both of these the browser keeps re-anchoring the page
   to the content that has just moved, and a reader trying to scroll up is
   dragged back down again. */
.ticker { height: 534px; overflow: hidden; overflow-anchor: none;
  display: flex; flex-direction: column; gap: 6px; }
.ticker .trow { flex: 0 0 48px; height: 48px; overflow: hidden; }
.grid.live .card { overflow-anchor: none; }
.trow { display: grid; grid-template-columns: 58px 1fr 200px; gap: 10px; align-items: start;
  border: 1px solid var(--border); border-left: 3px solid var(--green); border-radius: 4px;
  padding: 7px 10px; background: var(--card); font-size: 13.5px; transition: opacity .25s linear; }
.trow.no { border-left-color: var(--verm); }
.trow .i { color: var(--slate); font-variant-numeric: tabular-nums; }
.trow .in, .trow .out { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trow .out { color: var(--slate); }
.trow .d { text-align: right; font-variant-numeric: tabular-nums; line-height: 1.35; }
.trow .v { font-weight: 700; }
.trow .v.yes { color: var(--green); }
.trow .v.no { color: var(--verm); }
.trow .why { display: block; color: var(--slate); font-weight: 300; }

/* ------------------------------------------------------------- progress bar */
.bar { height: 8px; border: 1px solid var(--border); border-radius: 999px; background: #efece4; overflow: hidden; }
.bar-fill { height: 100%; width: 0; background: var(--blue); transition: width .15s linear; }

/* ------------------------------------------------------------- chart legend */
.key { display: inline-block; width: 22px; height: 3px; vertical-align: middle; margin-right: 4px; }
.key.k1 { background: var(--blue); }
.key.k2 { background: var(--ink); }
.key.k3 { background: var(--verm); opacity: .35; height: 9px; }
.key.k4 { background: var(--green); }

/* ------------------------------------------------------------- the check list */
ul.checks { list-style: none; padding-left: 0; }
.chk { border-left: 3px solid var(--green); padding: 6px 0 6px 12px; margin: 8px 0; }
.chk.warn { border-left-color: var(--verm); }
.chk.stop { border-left-color: var(--verm); font-weight: 400; }
.chk .tag { display: inline-block; min-width: 96px; font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--slate); margin-right: 8px; }

/* The set-up form's controls are short because their values are short: a number, a
   percentage, a choice from a list. A box the width of the page reads as an empty
   band and tells the reader nothing about what belongs in it. */
#setupform input[type=text], #setupform input[type=number], #setupform select { max-width: 420px; }

/* --------------------------------------------------------------- radio cards */
label.choice { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--border);
  border-radius: 6px; padding: 12px 14px; font-weight: 300; font-size: 14.5px; cursor: pointer; }
label.choice:has(input:checked) { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
label.choice input { margin-top: 3px; }

/* ------------------------------------------------------------ the diagram page */
.flow { width: 100%; height: auto; }
.stack { display: flex; flex-direction: column; gap: 10px; }
.stack .step { display: block; border: 1px solid var(--border); border-radius: 6px; padding: 10px 14px;
  font-size: 14.5px; margin-bottom: 0; }   /* style.css gives a bare .step a flex row; not here */
.stack .step strong { display: block; margin-bottom: 2px; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13.5px;
  background: #f2f1ee; border-radius: 3px; padding: 1px 4px; }
pre.block { background: #f2f1ee; border: 1px solid var(--border); border-radius: 4px; padding: 12px 14px;
  overflow-x: auto; font-size: 13.5px; line-height: 1.5; }

/* ------------------------------------------------------- the passing message */
.flash { border: 1px solid var(--green); border-left: 3px solid var(--green); border-radius: 4px;
  background: var(--card); color: var(--ink); padding: 10px 14px; margin: 16px 0; font-size: 14.5px;
  transition: opacity .6s ease; }
.flash.gone { opacity: 0; }

/* Amount fields read as figures, not as prose. */
input.num { font-variant-numeric: tabular-nums; }

/* A figure and its unit belong on one line. */
.display.nowrap { white-space: nowrap; }
.grid.three > div .display.nowrap { font-size: 33.5px; }

/* While a run holds the page, the navigation is visibly out of reach. */
header.top nav a.locked { opacity: .35; cursor: default; pointer-events: none; }

/* Sub-rows in the results tables, one level under the line they qualify. */
td.indent { padding-left: 22px; color: var(--slate); }

/* ---------------------------------------------------------------- help panels
   Hovering shows a panel; clicking the ? pins it open so it can be scrolled and
   read at length. The extra bottom padding stops the last line sitting on the
   border, which made the panel look cut off. */
.hover .pop { padding: 20px 28px 26px; }
.hover .pop > *:last-child { margin-bottom: 0; }
.hover.pinned .pop { display: block; box-shadow: 0 10px 30px rgba(26,25,23,.16); border-color: var(--slate); }
.hover.pinned button.hint { background: var(--blue); border-color: var(--blue); color: #fff; }
.hover .pop .pin-note { display: none; margin: 10px 0 0; padding-top: 8px; border-top: 1px solid var(--border);
  font-size: 13px; color: var(--slate); }
.hover.pinned .pop .pin-note { display: block; }

/* ------------------------------------------------------- the finishing screen
   The feed stops, the page whitens for a moment, and the panel says so. It fades
   in rather than appearing, because a hard cut reads as a page load. */
.finished { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
  background: rgba(255,255,255,.92); opacity: 0; animation: whiten .45s ease forwards; }
@keyframes whiten { to { opacity: 1; } }
.finished-box { background: var(--card); border: 1px solid var(--border); border-radius: 8px;
  padding: 30px 38px; text-align: center; max-width: 460px;
  box-shadow: 0 24px 60px rgba(26,25,23,.14); }
.finished-box h2 { margin: 0 0 6px; }
.finished-box p { margin: 0 0 18px; font-weight: 300; }
.finished-box .actions { justify-content: center; margin: 0; }
@media (prefers-reduced-motion: reduce) { .finished { animation: none; opacity: 1; } }

/* Chart legend: one item per line, so the colour and its meaning stay paired. */
ul.legend { list-style: none; padding: 0; margin: 10px 0 0; }
ul.legend li { margin: 3px 0; }

.tag { display: inline-block; font-size: 11.5px; letter-spacing: .06em; padding: 1px 7px; border-radius: 3px; margin-right: 4px; color: #fff; }
.t-route { background: #0072B2; } .t-tool { background: #009E73; } .t-attack { background: #D55E00; font-weight: 600; }
table.replay td { padding: 6px 8px; vertical-align: top; }
.grid.four { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 900px) { .grid.four { grid-template-columns: repeat(2, 1fr); } }

body.locked header.top nav, body.locked header.top a { pointer-events: none; opacity: .45; }

/* showcase replays */
table.replay { width: 100%; border-collapse: collapse; }
table.replay td { padding: 7px 10px; border-bottom: 1px solid #ECE7DB; vertical-align: top; }
table.replay tr.held td { background: #fbefe7; }
.counts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 10px 0 14px; }
.counts div { background: #fff; border: 1px solid #E5E0D3; border-radius: 4px; padding: 8px 12px; }
.counts .kicker { min-height: 2.6em; display: flex; align-items: flex-end; }
.counts b { font-size: 26px; font-weight: 700; display: block; }