/* One-screen incident board. Layout only; colours and type come from styles.css tokens.
   The console is the thing judges look at, so it must not require scrolling to understand:
   a fixed board height, three columns, and each column scrolls inside itself. */

.command-heading { margin-bottom: 8px; }
.command-heading h2 { margin: 0; font-size: clamp(20px, 2vw, 28px); letter-spacing: -.03em; line-height: 1.05; }
.command-heading .kicker { margin-bottom: 4px; }
.command-heading .button.small { min-height: 36px; padding-inline: 12px; font-size: 12px; }

.pilot-toolbar { padding: 7px 14px; margin-bottom: 8px; }
.pilot-toolbar select { min-height: 34px; font-size: 12px; }

/* The console sizes to its content and the page scrolls, which is the whole change here.
   It used to be a fixed-height card with three independent scroll regions inside it (phase rail,
   facility matrix, evidence trace). That hid content behind scrollbars nobody notices, trapped the
   wheel when the pointer crossed a panel, and felt cramped at every height I tried. One scrollbar,
   the page's, is simpler to use and simpler to reason about. */
.command { display: grid; grid-template-rows: auto auto 1fr; overflow: hidden; }

.incident-bar { padding: 9px 16px; }
.incident-bar b { font-size: 14px; }
.incident-bar small { font-size: 10px; }
.incident-bar dl div dt { font-size: 9px; }
.incident-bar dl div dd { font-size: 17px; }

.autonomy-command { padding: 6px 16px; }
.autonomy-command small { font-size: 9px; }
.autonomy-command b { font-size: 12px; }

.command-grid { display: grid; grid-template-columns: 224px minmax(0, 1fr) 320px; align-items: stretch; }
.command-grid > * { min-height: 0; min-width: 0; }

/* The phase list must not stretch: a 1fr row pushed the primary action to the bottom of a
   1120px column and below the fold. Rows size to content and the action follows the phases. */
.phase-panel { padding: 16px; display: grid; grid-template-rows: auto auto auto auto; gap: 10px; align-content: start; }
.phase-panel .panel-label { margin: 0; font-size: 9px; }
.phase-panel ol { margin: 0; display: grid; gap: 0; align-content: start; }
.phase-panel ol li { padding: 6px 0; gap: 10px; }
.phase-panel ol li span { width: 22px; height: 22px; font-size: 9px; }
.phase-panel ol li b { font-size: 11.5px; line-height: 1.2; }
.phase-panel ol li small { font-size: 9px; }
.phase-panel .button.full { min-height: 44px; font-size: 13px; margin-top: 0; }
.phase-panel #next-note { margin: 0 0 2px; font-size: 10px; line-height: 1.5; color: var(--faint); }

.operations-panel { display: grid; grid-template-rows: auto auto; align-content: start; }
.ops-tabs { padding: 8px 14px 0; gap: 6px; flex-wrap: wrap; }
.ops-tabs button { padding: 6px 11px; font-size: 11px; }
.ops-view { padding: 14px 16px; }

.facility-table-head { padding: 0 0 6px; font-size: 9px; }
.facility-row { padding: 13px 15px; gap: 12px; align-items: start; }
.facility-row .facility-letter { width: 26px; height: 26px; font-size: 11px; }
.facility-row b { font-size: 12.5px; }
.facility-row .facility-identity small { font-size: 9.5px; }
.facility-row .state-pill { font-size: 9px; padding: 3px 8px; }
.facility-row .task-meter span { font-size: 10px; }

/* styles.css sets `.facility-identity div { flex-direction: column }` as a descendant rule, which
   also catches the chip and action rows nested inside it and stacked every button full width.
   These re-assert the intended axis and top-align the letter badge with the facility name. */
.facility-row .facility-identity { align-items: flex-start; }
.facility-row .facility-identity > .facility-letter { margin-top: 1px; }
/* `.facility-identity div` is (0,0,1,1); a bare `.facility-actions` is (0,0,1,0) and loses to it,
   which is why the buttons kept stacking. Three classes wins cleanly without !important. */
.facility-row .facility-identity .facility-chips,
.facility-row .facility-identity .facility-actions { flex-direction: row; align-items: center; flex-wrap: wrap; }

/* Model receipts read as chips, not paragraphs: three of them must fit on one line. */
.facility-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.facility-chips i { font-style: normal; display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 999px; font-size: 9px; line-height: 1.5; color: var(--muted); background: var(--surface); border: 1px solid var(--line); }
.facility-chips i.ok { color: var(--blue); background: var(--blueSoft); border-color: var(--blue); }
.facility-chips i.warn { color: var(--amber); background: var(--amberSoft); border-color: var(--amber); }
.facility-chips i b { font-size: 9px; font-weight: 700; }
.facility-actions { margin-top: 7px; gap: 5px; }
.facility-actions button { flex: 0 0 auto; width: auto; font-size: 10.5px; line-height: 1.5; padding: 4px 9px; border-radius: 999px; white-space: nowrap; }
.facility-hint { font-size: 9.5px; margin-top: 8px; }

.trace-panel { padding: 16px; display: grid; grid-template-rows: auto auto auto; gap: 12px; align-content: start; }
.trace-panel .trace-title h3 { font-size: 13px; margin: 0; }
.trace-panel .panel-label { font-size: 9px; margin: 0; }
.trace-panel .timeline { max-height: none; overflow: visible; }
.trace-panel .trace-item h4 { font-size: 11.5px; }
.trace-panel .trace-item p { font-size: 9.5px; line-height: 1.45; }
.trace-panel .trace-meta b { font-size: 10px; }
.trace-panel footer { font-size: 9px; gap: 6px; }

/* Delegation and after-action live in tabs so nothing stacks below the fold. */
.delegation, .briefing { margin: 0; border: 0; padding: 0; }
.delegation small, .briefing small { display: block; color: var(--faint); font: 500 9px "Geist Mono", monospace; letter-spacing: .05em; margin-bottom: 8px; }
.delegation-steps { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 6px; }
.delegation-steps li { padding: 9px 11px; background: var(--panel); border: 1px solid var(--line); border-radius: 9px; font-size: 11.5px; display: grid; gap: 3px; }
.delegation-steps li code { color: var(--blue); font-family: "Geist Mono", monospace; }
.delegation-steps li .step-no { color: var(--cyan); font: 600 9px "Geist Mono", monospace; letter-spacing: .08em; }
.delegation-steps li span { color: var(--muted); font-size: 9.5px; }
.delegation-steps li.refused { border-style: dashed; border-color: var(--amber); }
.delegation-steps li.refused .step-no { color: var(--amber); }
.delegation-steps li.refused code { text-decoration: line-through; }
.delegation-stop, .delegation-ceiling { color: var(--faint); font-size: 9.5px; margin: 8px 0 0; }
.briefing-body { display: grid; gap: 6px; font-size: 11.5px; line-height: 1.5; }
.briefing-body h5 { margin: 6px 0 0; color: var(--cyan); font: 600 10px "Geist Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
.briefing-body ul { margin: 0; padding-left: 16px; display: grid; gap: 3px; }
.briefing-body p { margin: 0; }
.empty-note { color: var(--faint); font-size: 10.5px; line-height: 1.6; margin: 0; }

/* A 1280x720 recording: give the board the vertical room the section padding was eating. */
/* The console section carried 105px of top padding on top of the sticky-header offset, so a
   judge scrolling to it met roughly 200px of empty grid before the heading. */
@media (min-height: 941px) and (max-height: 1220px) {
  .command-section { padding-top: 42px; padding-bottom: 60px; }
}

@media (max-height: 940px) {
  .command-section { padding-top: 30px; padding-bottom: 44px; }
  .command-heading { margin-bottom: 6px; }
  .pilot-toolbar { margin-bottom: 6px; }
}

/* Below the three-column breakpoint the board stacks. Letting every panel grow unbounded turned
   the console into a 3300px page; each panel keeps its own scroll instead, so the whole console
   stays thumb-reachable and the phases, facilities and trace are all still discoverable. */
/* Wide displays: the compact type exists for a 1280px recording, not for a 4K monitor. */
@media (min-width: 1660px) {
  .command-grid { grid-template-columns: 250px minmax(0, 1fr) 350px; }
  .command-heading h2 { font-size: clamp(28px, 2.2vw, 38px); }
  .incident-bar b { font-size: 16px; }
  .incident-bar small, .autonomy-command small { font-size: 10.5px; }
  .autonomy-command b { font-size: 13.5px; }
  .incident-bar dl div dd { font-size: 20px; }
  .phase-panel ol li b { font-size: 13px; }
  .phase-panel ol li small, .phase-panel #next-note { font-size: 10.5px; }
  .phase-panel .button.full { min-height: 46px; font-size: 14px; }
  .ops-tabs button { font-size: 12px; padding: 7px 13px; }
  .facility-row b { font-size: 14.5px; }
  .facility-row .facility-identity small { font-size: 11px; }
  .facility-row .state-pill, .facility-chips i, .facility-chips i b { font-size: 10.5px; }
  .facility-actions button { font-size: 11.5px; padding: 5px 11px; }
  .facility-table-head, .facility-hint { font-size: 10.5px; }
  .trace-panel .trace-title h3 { font-size: 15px; }
  .trace-panel .trace-item h4 { font-size: 13px; }
  .trace-panel .trace-item p { font-size: 11px; }
  .trace-panel .trace-meta b { font-size: 11.5px; }
  .delegation-steps li { font-size: 13px; }
  .delegation-steps li span, .delegation-stop, .delegation-ceiling { font-size: 11px; }
  .briefing-body { font-size: 13px; }
}

@media (max-width: 1180px) {
  .command { height: auto; overflow: visible; }
  .command-grid { grid-template-columns: 1fr; overflow: visible; }
  .phase-panel, .trace-panel, .operations-panel { overflow: visible; }
  .phase-panel { grid-template-rows: auto auto auto auto; }
  .trace-panel { grid-template-rows: auto auto auto; }
}

@media (max-width: 760px) {
  /* One thumb, one column: the tab strip scrolls rather than wrapping into three rows. */
  .ops-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
  .ops-tabs::-webkit-scrollbar { display: none; }
  .ops-tabs button { flex: 0 0 auto; white-space: nowrap; }
  .command-heading .button.small { flex: 1 1 auto; }
  .incident-bar { gap: 10px; }
  .facility-row { grid-template-columns: 1fr auto; row-gap: 8px; }
  .facility-actions button { min-height: 32px; padding: 5px 10px; font-size: 11px; }

}

/* Trace log control: an explicit affordance instead of a hidden scroll region. */
.trace-more { width: 100%; margin-top: 4px; padding: 8px 10px; border: 1px dashed var(--line2); border-radius: 9px; background: transparent; color: var(--blue); font: 600 10.5px "Geist Mono", monospace; letter-spacing: .04em; cursor: pointer; }
.trace-more:hover { background: var(--surface); border-style: solid; }

/* Columns keep their own natural height; the shortest no longer stretches into empty space. */
.command-grid { align-items: start; }
.phase-panel, .trace-panel, .operations-panel { height: 100%; }