/*
 * The live pitwall. Loaded on top of pitwall.css, which stays the single source
 * of the palette, the buttons and the pills -- this file adds only the layout
 * and the widgets the pit stand needs, all scoped under `body.app` or under a
 * class no other page uses, so radio.html and audio-test.html are untouched.
 *
 * Sizing assumes a second monitor at 1080p seen from a rig: the numbers that
 * change a decision (fuel margin, time remaining) are set large enough to read
 * at a glance, and everything else gets out of their way.
 */

body.app {
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

body.app header { flex: 0 0 auto; }

/* --- mode switcher -------------------------------------------------- */
.mode-switch { display: flex; gap: 0; margin-left: 8px; }
.mode-switch button {
  border-radius: 0;
  border-right-width: 0;
  color: var(--muted);
  padding: 6px 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 12px;
}
.mode-switch button:first-child { border-radius: 7px 0 0 7px; }
.mode-switch button:last-child { border-radius: 0 7px 7px 0; border-right-width: 1px; }
.mode-switch button.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

#app-notice {
  margin: 0;
  padding: 7px 22px;
  background: rgba(210, 153, 34, 0.12);
  border-bottom: 1px solid var(--advisory);
  color: var(--advisory);
  font-size: 13px;
}

body.app #mode-pitwall,
body.app #mode-analysis {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
body.app #mode-analysis { overflow-y: auto; }
body.app #mode-analysis main { max-width: 1100px; }

/* --- 4. status strip ------------------------------------------------- */
.status-strip {
  flex: 0 0 auto;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}

/*
 * Green is the absence of news, so it is a hairline. Anything else takes the
 * full width in that flag's colour: "is there a caution" must never be a
 * question you have to go looking for the answer to.
 */
.flag-band {
  height: 4px;
  background: var(--info);
  transition: height 120ms linear;
  font-family: var(--mono);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-align: center;
  color: #0e1116;
  overflow: hidden;
}
.flag-band.alert { height: 30px; line-height: 30px; font-size: 14px; }
.flag-band.flag-green { background: var(--info); }
.flag-band.flag-yellow { background: #f2c744; animation: flagpulse 1.1s ease-in-out infinite; }
.flag-band.flag-red { background: var(--critical); color: #fff; animation: flagpulse 0.7s ease-in-out infinite; }
.flag-band.flag-white { background: #e6edf3; }
.flag-band.flag-checkered {
  color: #0e1116;
  background: repeating-conic-gradient(#e6edf3 0% 25%, #30363d 0% 50%) 50% / 16px 16px;
}
.flag-band.flag-unknown { background: var(--line); color: var(--muted); }

@keyframes flagpulse { 50% { filter: brightness(0.72); } }

.status-row {
  display: flex;
  align-items: stretch;
  gap: 0;
  flex-wrap: wrap;
}
.status-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 22px;
  border-right: 1px solid var(--line);
  min-width: 150px;
}
.status-cell:last-child { border-right: 0; margin-left: auto; align-items: flex-end; }
.status-cell .k {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.status-cell .v { font-size: 16px; font-weight: 600; }
.status-cell .v.big { font-size: 30px; line-height: 1.05; font-variant-numeric: tabular-nums; }
.status-cell .sub { font-family: var(--mono); font-size: 11px; color: var(--muted); }

.pill.conn-live { color: var(--info); border-color: var(--info); }
.pill.conn-replay { color: var(--accent); border-color: var(--accent); }
.pill.conn-stale { color: var(--advisory); border-color: var(--advisory); }
.pill.conn-offline { color: var(--critical); border-color: var(--critical); }
.pill.conn-idle { color: var(--muted); }
.pill.llm-ok { color: var(--info); border-color: var(--info); }
.pill.llm-warn { color: var(--advisory); border-color: var(--advisory); }
.pill.llm-muted { color: var(--muted); }

.replay-bar {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 22px;
  border-top: 1px solid var(--line);
  background: var(--panel-2);
}
.replay-bar .k {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.replay-bar .sub { font-family: var(--mono); font-size: 11.5px; color: var(--muted); margin-left: auto; }

input[type="text"], select {
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 9px;
  font: inherit;
  font-size: 13px;
}
input[type="text"]:focus, select:focus { outline: none; border-color: var(--accent); }

/* --- the grid --------------------------------------------------------- */
.pitwall-grid {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(380px, 1fr) minmax(430px, 1.05fr);
  gap: 12px;
  padding: 12px 12px 0;
}
.right-column {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  overflow-y: auto;
}
@media (max-width: 1180px) {
  .pitwall-grid { grid-template-columns: 1fr; overflow-y: auto; }
}

body.app .panel { padding: 12px 14px; }
body.app .panel h2 { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
button.ghost {
  margin-left: auto;
  padding: 3px 9px;
  font-size: 11px;
  text-transform: none;
  letter-spacing: 0;
}
.muted, .sub.muted { color: var(--muted); }

/* --- 1. radio feed ----------------------------------------------------- */
.panel-radio {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.on-air-strip {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 9px 11px;
  border-radius: 8px;
  border-left: 3px solid var(--line);
  background: var(--panel-2);
  min-height: 40px;
  font-size: 16px;
}
.on-air-strip.critical { border-left-color: var(--critical); }
.on-air-strip.advisory { border-left-color: var(--advisory); }
.on-air-strip.info { border-left-color: var(--info); }
.on-air-strip .live-dot { color: var(--critical); animation: blink 1s steps(2, start) infinite; }
.on-air-strip .who {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
@keyframes blink { 50% { opacity: 0.25; } }

.radio-list {
  flex: 1 1 auto;
  min-height: 140px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 9px;
  padding-right: 4px;
}

.radio-msg {
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: 8px;
  padding: 8px 11px;
  background: var(--panel-2);
}
.radio-msg.critical { border-left-color: var(--critical); background: rgba(248, 81, 73, 0.09); }
.radio-msg.advisory { border-left-color: var(--advisory); }
.radio-msg.info { border-left-color: var(--info); }
.radio-msg.driver { border-left-style: dashed; border-left-color: var(--ink); background: var(--panel); }
.radio-msg.refused { opacity: 0.82; }
.radio-msg.ungrounded { border-style: dotted; }
.radio-msg.on-air { box-shadow: inset 0 0 0 1px var(--accent); }
.radio-msg.flash { animation: flashin 700ms ease-out 1; }
@keyframes flashin {
  0% { background: rgba(248, 81, 73, 0.5); transform: translateX(-3px); }
  100% { background: rgba(248, 81, 73, 0.09); transform: none; }
}

.radio-head {
  display: flex;
  align-items: baseline;
  gap: 9px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--muted);
}
.radio-head .badge { font-weight: 700; letter-spacing: 0.09em; }
.radio-head .when { margin-left: auto; }
.radio-head .verdict { color: var(--muted); }
.radio-head .verdict.dropped { color: var(--critical); }
.radio-head .verdict.interrupted { color: var(--advisory); }

.badge.agent-strategist { color: var(--strategist); }
.badge.agent-vehicle_engineer { color: var(--engineer); }
.badge.agent-spotter { color: var(--spotter); }
.badge.agent-coach { color: var(--coach); }
.badge.agent-driver { color: var(--ink); }
.badge.agent-pitwall { color: var(--muted); }

.radio-msg .spoken { margin-top: 3px; font-size: 15.5px; line-height: 1.35; }
.radio-msg.critical .spoken { font-weight: 600; }
.radio-detail { margin-top: 4px; }
.radio-detail summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 12px;
  list-style: revert;
}
.radio-detail .detail-body { color: var(--muted); font-size: 12.5px; margin-top: 4px; }
.radio-detail .detail-trace {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10.5px;
  margin-top: 4px;
  opacity: 0.8;
}

.radio-thread {
  margin: 7px 0 0 10px;
  padding-left: 10px;
  border-left: 2px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.radio-thread .thread-note {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.radio-controls {
  flex: 0 0 auto;
  border-top: 1px solid var(--line);
  margin-top: 9px;
  padding-top: 9px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.radio-controls .k { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.radio-controls .sub { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.radio-controls .mutes button { font-size: 11.5px; padding: 5px 9px; }
.driver-row { flex-wrap: nowrap; }
.driver-row input { flex: 1 1 auto; }

/* --- 2. strategy ------------------------------------------------------- */
.recommendation {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  padding: 8px 11px;
  border-radius: 8px;
  background: var(--panel-2);
  border-left: 3px solid var(--strategist);
}
.recommendation.empty { border-left-color: var(--line); }
.recommendation.refused { border-left-color: var(--advisory); }
.recommendation.ungrounded { border-left-style: dotted; }
.recommendation .call {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--strategist);
}
.recommendation .call-parts { font-family: var(--mono); font-size: 12.5px; color: var(--ink); }
.recommendation .call-spoken { color: var(--muted); font-size: 12.5px; flex-basis: 100%; }
.recommendation .call-flag { color: var(--advisory); font-family: var(--mono); font-size: 11px; }

canvas.pit-window { width: 100%; height: 86px; display: block; margin-top: 10px; }
canvas.fuel-spark { width: 100%; height: 26px; display: block; margin: 2px 0; }

.fuel-block {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.stat {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-2);
}
.stat-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
}
.stat-value { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.stat-value.big { font-size: 27px; line-height: 1.1; }
.stat .sub { font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.band-green { color: var(--info); }
.band-amber { color: var(--advisory); }
.band-red { color: var(--critical); }
.band-unknown { color: var(--muted); }

.tyre-head { display: flex; align-items: baseline; gap: 10px; margin-top: 12px; }
.tyre-head .k {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.tyre-head .sub { font-family: var(--mono); font-size: 11px; color: var(--muted); }

.tyre-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 7px;
}
.tyre {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "corner temp" "corner pressure";
  align-items: center;
  gap: 1px 9px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-2);
}
.tyre-corner {
  grid-area: corner;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}
.tyre-temp { grid-area: temp; font-variant-numeric: tabular-nums; }
.tyre-pressure { grid-area: pressure; font-variant-numeric: tabular-nums; color: var(--muted); }
.tyre-temp .v { font-size: 20px; font-weight: 600; }
.tyre-pressure .v { font-size: 13px; }
.tyre .u { font-family: var(--mono); font-size: 10px; color: var(--muted); margin-left: 2px; }
.tyre .t { margin-left: 6px; font-size: 11px; }
.tyre .t.up { color: var(--critical); }
.tyre .t.down { color: var(--accent); }
.tyre .t.flat { color: var(--muted); }

/* --- 3. timing tower --------------------------------------------------- */
.tower-head, .tower-row {
  display: grid;
  grid-template-columns: 46px 52px 78px 90px 1fr;
  align-items: center;
  gap: 6px;
  padding: 4px 7px;
  font-variant-numeric: tabular-nums;
}
.tower-head {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.tower-body { display: flex; flex-direction: column; }
.panel-tower.no-field .tower-head,
.panel-tower.no-field [data-role="tower-toggle"] { display: none; }
.tower-empty.no-field { display: flex; flex-direction: column; gap: 8px; }
.tower-empty-title { color: var(--muted); padding: 6px 0; }
.tower-row {
  border-bottom: 1px solid rgba(38, 45, 56, 0.55);
  font-size: 14px;
}
.tower-row.player {
  background: rgba(47, 129, 247, 0.16);
  box-shadow: inset 3px 0 0 var(--accent);
  font-weight: 600;
}
.tower-row.in-pit { color: var(--muted); }
.tower-row .pos { font-family: var(--mono); color: var(--muted); }
.tower-row.player .pos { color: var(--ink); }
.tower-row .car { font-family: var(--mono); }
.tower-row .gap { font-family: var(--mono); }
.tower-row .last { font-family: var(--mono); font-size: 13px; color: var(--muted); }
.tower-row .trend { margin-left: 5px; font-size: 10px; }
.tower-row .trend.closing { color: var(--critical); }
.tower-row .trend.opening { color: var(--info); }
.tower-row .trend.steady { color: var(--muted); }
.tower-row .status { display: flex; gap: 5px; justify-content: flex-end; }
.tower-row .tag {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid currentColor;
}
.tower-row .tag.pit { color: var(--advisory); }
.tower-row .tag.blue_flag { color: #58a6ff; }
.tower-row .tag.traffic_close { color: var(--critical); }
.tower-row .tag.rival_pitted { color: var(--muted); }
.tower-row.warn-blue_flag { background: rgba(88, 166, 255, 0.1); }
.tower-row.warn-traffic_close { background: rgba(248, 81, 73, 0.09); }
.tower-empty { padding: 10px 4px; }

/* --- 5. event ticker --------------------------------------------------- */
.ticker {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 12px;
  border-top: 1px solid var(--line);
  background: var(--panel);
  margin-top: 12px;
}
.ticker-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.ticker-label .sub { display: block; letter-spacing: 0; text-transform: none; }
.ticker-strip {
  flex: 1 1 auto;
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scrollbar-width: thin;
  white-space: nowrap;
  padding-bottom: 2px;
}
.tick {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--muted);
}
.tick-lap { color: var(--ink); }
.tick-key { color: var(--accent); }
.tick.sev-advisory .tick-key { color: var(--advisory); }
.tick.sev-critical .tick-key { color: var(--critical); }
.tick.sev-critical .tick-text { color: var(--ink); }
.tick-tag {
  border: 1px solid var(--strategist);
  color: var(--strategist);
  border-radius: 999px;
  padding: 0 5px;
  font-size: 9px;
}

/* --- analysis mode ----------------------------------------------------- */
.sessions { display: flex; flex-direction: column; }
.session-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 60px auto;
  align-items: center;
  gap: 10px;
  padding: 7px 4px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 12.5px;
}
.session-row .sid { color: var(--ink); overflow: hidden; text-overflow: ellipsis; }
.session-row .track, .session-row .car, .session-row .kind { color: var(--muted); }
.session-row .actions { display: flex; gap: 8px; justify-content: flex-end; }
.session-row .actions button { font-size: 12px; padding: 5px 9px; }
a.button-link {
  background: var(--panel-2);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 5px 9px;
  font-size: 12px;
  text-decoration: none;
}
a.button-link:hover { border-color: var(--accent); }