/* Routing page layout — route list, HUD, arena frame. Visual arena/event/dialog
   styles live in arena.css; chrome (sidebar/topbar/buttons) comes from shell.css. */

.routing-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 0; max-width: 1800px; margin: 0 auto; }
.route-panel {
  position: sticky; top: 60px; height: calc(100vh - 60px); overflow: hidden;
  border-right: 1px solid var(--border); background: rgb(9 20 31 / 70%);
}
.route-panel-head { padding: 16px 16px 12px; border-bottom: 1px solid var(--border); }
.route-panel-head h1 { margin: 0; font-size: 15px; letter-spacing: -.02em; }
.eyebrow { margin: 0 0 4px; color: var(--accent); font-size: 9.5px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.muted, .empty-copy { color: var(--muted); font-size: 11.5px; line-height: 1.5; }
.search-field { display: grid; grid-template-columns: 22px 1fr; align-items: center; margin-top: 12px; padding: 0 9px; border: 1px solid var(--border); border-radius: var(--radius-s); background: var(--bg); color: var(--subtle); }
.search-field input { height: 34px; padding: 0; border: 0; outline: 0; background: transparent; }
.route-list { height: calc(100% - 104px); overflow: auto; padding: 8px; }
.route-button { display: grid; width: 100%; gap: 6px; padding: 11px; border: 1px solid transparent; border-radius: var(--radius-s); background: transparent; color: inherit; text-align: left; }
.route-button:hover { background: var(--surface-2); }
.route-button.active { border-color: rgb(86 217 255 / 30%); background: linear-gradient(110deg, rgb(86 217 255 / 11%), rgb(157 134 255 / 6%)); }
.route-button-top, .route-button-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.route-name { overflow: hidden; font-size: 12.5px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.route-target { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.route-button-meta { justify-content: flex-start; color: var(--subtle); font-size: 10px; }
.route-health { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--accent-2); }
.route-health.warn { background: var(--warn); }
.tag { padding: 2px 6px; border: 1px solid var(--border); border-radius: 99px; color: var(--subtle); font-size: 8px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.route-group-header { padding: 11px 11px 5px; color: var(--subtle); font-size: 9.5px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }

.control-room { min-width: 0; padding: 0 22px 44px 22px; }
.hud { display: grid; grid-template-columns: repeat(5, minmax(88px, 1fr)) minmax(330px, auto); gap: 8px; margin-bottom: 10px; }
.hud .metric { display: grid; min-height: 60px; align-content: center; padding: 9px 12px; border-radius: var(--radius); }
.hud .metric span { color: var(--subtle); font-size: 9px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.hud .metric strong { margin-top: 2px; font-size: 21px; font-variant-numeric: tabular-nums; }
.hud .metric.good strong { color: var(--accent-2); }
.hud .metric.bad strong { color: var(--danger); }
.hud .metric.warn strong { color: var(--warn); }
.hud-controls { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding-left: 8px; }
.speed-control { display: flex; align-items: center; gap: 5px; color: var(--subtle); font-size: 10px; font-weight: 800; }
.speed-control select { width: auto; height: 36px; }

.draft-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; padding: 10px 13px; border: 1px solid rgb(157 134 255 / 32%); border-radius: var(--radius); background: rgb(157 134 255 / 7%); }
.draft-bar strong { display: block; font-size: 12px; }
.draft-bar span { color: var(--muted); font-size: 10.5px; }
.draft-bar[data-tone="live"] { border-color: var(--border); background: var(--surface); }
.notice { margin-bottom: 10px; }

.arena-frame { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: rgb(13 24 36 / 88%); box-shadow: var(--shadow); }
.arena-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.arena-head h2 { margin: 0; font-size: 16px; letter-spacing: -.02em; }
.arena-head p:last-child { margin: 3px 0 0; }
.arena-head-actions { display: flex; align-items: center; gap: 8px; }
.route-controls { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, auto); gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--surface); }
.route-controls[hidden] { display: none; }
.route-mode { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; cursor: pointer; }
.route-mode-copy { display: grid; gap: 2px; min-width: 0; }
.route-mode-copy strong { font-size: 11.5px; }
.route-mode-copy span { color: var(--muted); font-size: 10px; }
.switch-control { position: relative; display: inline-flex; flex: none; }
.switch-control input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.switch-track { position: relative; width: 34px; height: 20px; border: 1px solid var(--border); border-radius: 99px; background: var(--surface-2); transition: background .16s, border-color .16s; }
.switch-track::after { position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--muted); content: ''; transition: transform .16s, background .16s; }
.switch-control input:checked + .switch-track { border-color: var(--accent); background: rgb(86 217 255 / 18%); }
.switch-control input:checked + .switch-track::after { background: var(--accent); transform: translateX(14px); }
.switch-control input:focus-visible + .switch-track { outline: 2px solid var(--accent); outline-offset: 2px; }
.route-insights { min-width: 180px; border-left: 1px solid var(--border); padding-left: 12px; }
.route-insights summary { color: var(--muted); font-size: 10.5px; font-weight: 750; }
.route-insights-body { padding-top: 9px; }
.suggestion-card { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.suggestion-card div { display: grid; gap: 2px; }
.suggestion-card strong { font-size: 10.5px; }
.suggestion-card span { color: var(--muted); font-size: 9.5px; }
.lower-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr); gap: 12px; margin-top: 12px; }
.lower-grid .panel { min-height: 300px; }
.codex-oauth-panel { margin-top: 12px; }

#clearQuarantinesButton:not(:disabled) { color: var(--warn); }
#clearQuarantinesButton:not(:disabled):hover { border-color: rgb(255 200 87 / 40%); background: rgb(255 200 87 / 8%); }

@media (max-width: 1280px) {
  .hud { grid-template-columns: repeat(5, 1fr); }
  .hud-controls { grid-column: 1 / -1; justify-content: flex-start; padding: 0; }
}
@media (max-width: 980px) {
  .routing-layout { grid-template-columns: 1fr; }
  .route-panel { position: relative; top: auto; width: 100%; height: auto; border-right: 0; border-bottom: 1px solid var(--border); }
  .route-list { display: flex; height: auto; gap: 7px; overflow-x: auto; padding: 8px 14px 12px; }
  .route-button { min-width: 210px; }
  .control-room { padding: 14px 14px 40px; }
  .lower-grid { grid-template-columns: 1fr; }
  .arena { padding: 58px 18px 24px 64px; }
}
@media (max-width: 680px) {
  .control-room { padding: 10px 10px 36px; }
  .hud { grid-template-columns: repeat(2, 1fr); }
  .hud .metric:nth-of-type(5) { grid-column: span 2; }
  .draft-bar, .arena-head { align-items: stretch; flex-direction: column; }
  .route-controls { grid-template-columns: 1fr; }
  .route-insights { border-top: 1px solid var(--border); border-left: 0; padding-top: 9px; padding-left: 0; }
  .arena { padding: 56px 10px 20px 46px; }
  .arena-inlet { left: 8px; }
  .stage-header { grid-template-columns: 36px minmax(0, 1fr); }
  .stage-actions { grid-column: 1 / -1; padding-left: 47px; }
  .fallback-controls, .fallback-add { align-items: stretch; flex-direction: column; }
  .lane-cards { grid-template-columns: 1fr; }
  .event-row { grid-template-columns: 56px 68px minmax(0, 1fr); }
  .event-latency { display: none; }
}
@media (pointer: coarse) {
  .drag-handle { width: 38px; height: 42px; }
  .mini-button { width: 30px; height: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .grid-glow { display: none; }
}