/* Design v8 status and control layout: one panel (main, see the operations
   rules of base.css) with the header of the boards. Model cards are hairline
   boxes and breaker states are v8 badges (normal green, tripped red, probe
   due amber). Buttons, fields, badges, notices and tables come from
   base.css; this file only places them. */
.routing-page .routing-notes > summary { padding: 4px 0; color: var(--ink); font-weight: 500; }
.routing-page .routing-notes > p { margin: var(--space-2) 0 0; }
.routing-page .routing-tabs { margin: 0 0 var(--space-4); }
.routing-page > p { margin: 0 0 var(--space-3); }
.routing-page p:has(+ .routing-hint) { margin-bottom: 0; }
.routing-page .routing-hint { margin: var(--space-1) 0 var(--space-3); }
.routing-page p:has(> label + :is(input, select, textarea)) > label { display: block; margin-bottom: 6px; }
.routing-page p > :is(input:not([type="checkbox"]):not(.otp-input), select) { width: min(100%, 480px); }
.routing-page textarea { display: block; width: min(100%, 720px); }
.routing-page label:has(> input[type="checkbox"]) { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--control-height); margin-right: var(--space-4); font-weight: 400; }
.routing-page fieldset { margin: var(--space-4) 0; }

/* Status band: the existing status lines read as badges and collapse when empty. */
.routing-page p.badge { max-width: 100%; margin: 0 0 var(--space-3); padding-block: 1px; white-space: normal; }
.routing-page p.badge:empty { display: block; min-height: 0; margin: 0; padding: 0; }

/* Channel and health views */
.routing-page section > h2 { margin: var(--space-6) 0 var(--space-3); }
/* No bare heading before anything is read. */
.routing-page #routing-channels:has(> #routing-channels-content:empty) { display: none; }
.routing-page .routing-panel { margin-top: var(--space-6); }
.routing-page .routing-panel > h2 { margin-top: 0; }
.routing-page .routing-models { display: grid; gap: var(--space-4); }
.routing-page .routing-model-card { min-width: 0; padding: var(--space-4) 18px; background: none; border: 1px solid var(--line); border-radius: var(--radius-card); }
.routing-page .routing-model-card > h3 { margin: 0 0 var(--space-2); overflow-wrap: anywhere; }
.routing-page dl { display: grid; grid-template-columns: minmax(140px, 30%) minmax(0, 1fr); gap: 6px var(--space-4); margin: var(--space-2) 0; font-size: var(--text-table); line-height: var(--line-table); }
.routing-page dt { color: var(--secondary); }
.routing-page dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.routing-page dd > dl { margin: 0; padding: var(--space-2) var(--space-3); background: var(--paper); border-radius: var(--radius-control); }
.routing-page ol { margin: 0; padding-left: 20px; }
.routing-page li + li { margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--line); }
.routing-page .routing-table-scroll { max-width: 100%; margin-top: var(--space-3); overflow-x: auto; }
.routing-page .routing-table-scroll > table { display: table; overflow: visible; }
.routing-page .routing-table-scroll details[open] { min-width: 280px; white-space: normal; }
.routing-page .routing-number { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.routing-page .routing-state > span { display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border-radius: var(--radius-control); color: var(--status-idle-ink); background: var(--status-idle-fill); font-size: var(--text-small); line-height: 1; font-weight: 600; }
.routing-page .routing-state-normal > span { color: var(--status-ok-ink); background: var(--status-ok-fill); }
.routing-page .routing-state-open > span { color: var(--status-fail-ink); background: var(--status-fail-fill); }
.routing-page .routing-state-probe_due > span { color: var(--status-warn-ink); background: var(--status-warn-fill); }

/* Control rows: stop is solid danger, resume is ink. */
.routing-page #routing-health-actions:not(:empty) { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(240px, 2fr); gap: var(--space-1) var(--space-4); align-items: center; margin: var(--space-5) 0; padding: var(--space-4); background: none; border: 1px solid var(--line); border-radius: var(--radius-card); }
.routing-page #routing-health-actions > h3 { margin: 0; overflow-wrap: anywhere; }
.routing-page .intake-actions { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); }
.routing-page .intake-stop:enabled { color: var(--surface); background: var(--danger); border-color: var(--danger); }
.routing-page .intake-resume:enabled { color: var(--on-ink); background: var(--ink); border-color: var(--ink); }
.routing-page .intake-resume:enabled:hover { background: var(--ink-hover); border-color: var(--ink-hover); }

/* The confirmation form opens as a panel below the top bar. */
.routing-page #intake-form:not(.intake-selected) { display: none; }
.routing-page #intake-form.intake-selected { position: fixed; z-index: 30; inset: var(--topbar-height) 0 0 auto; width: min(var(--drawer-width), 100vw); overflow: auto; padding: var(--space-6); background: var(--surface); border-left: 1px solid var(--line); box-shadow: var(--shadow-overlay); }
.routing-page #intake-form > h3 { margin: 0 0 var(--space-3); font-size: var(--text-title); line-height: var(--line-title); }
.routing-page #intake-form > button { margin: 0 var(--space-2) var(--space-3) 0; }
.routing-page #intake-form :is(input:not([type="checkbox"]):not(.otp-input), textarea) { width: 100%; }
.routing-page #intake-form input[readonly] { background-color: var(--inset); font-family: var(--mono); }
.routing-page #intake-summary:not(:empty) { padding: var(--space-3); background: var(--inset); border-radius: var(--radius-control); overflow-wrap: anywhere; }
.routing-page #intake-receipt:not(:empty) { margin-top: var(--space-3); padding: 10px 12px; background: var(--success-soft); border: 1px solid var(--success-line); border-radius: var(--radius-control); }

@media (max-width: 640px) {
  .routing-page dl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .routing-page dd { margin-bottom: var(--space-2); }
  .routing-page .routing-model-card { padding: var(--space-3); }
  .routing-page #routing-health-actions:not(:empty) { grid-template-columns: minmax(0, 1fr); }
  .routing-page #intake-form.intake-selected { inset-block-start: 0; padding: var(--space-4); }
}