:root{color-scheme:dark;--bg:var(--argo-bg);--panel:var(--argo-surface-alt);--text:var(--argo-text-primary);--muted:var(--argo-text-secondary);--border:var(--argo-border);--orange:var(--argo-accent);--orange-hover:var(--argo-accent-hover);--orange-active:var(--argo-accent-active);--focus:var(--argo-focus-ring);--cyan:var(--argo-info);--green:var(--argo-success);--amber:var(--argo-warning);--red:var(--argo-error);--heading:var(--argo-heading);--mono:var(--argo-mono)}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:13px -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}button,select{font:inherit;color:inherit;background:var(--panel);border:1px solid var(--border);border-radius:5px;min-height:32px;padding:5px 10px;cursor:pointer}button:hover,select:hover{border-color:var(--orange)}button:active{background:var(--argo-surface)}:focus-visible{outline:2px solid var(--focus);outline-offset:3px}[hidden]{display:none!important}.shell{max-width:1440px;margin:auto;padding:16px 20px}header{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-bottom:12px}.brand{display:flex;gap:14px;align-items:center}.mark{font:700 20px var(--mono);border:1px solid var(--orange);border-left:4px solid var(--orange);padding:8px;color:var(--orange)}.mark span{color:var(--text)}h1{font-size:18px;letter-spacing:.035em;margin:0}h1 span{font-weight:400;color:var(--muted)}header p,.eyebrow,.node label{font:11px var(--mono);letter-spacing:.08em;color:var(--muted);margin:6px 0 0}.node label{display:block;margin-bottom:5px}.node select{min-width:140px;font-family:var(--mono)}.health{display:flex;align-items:center;gap:18px;padding:12px 14px;border:1px solid var(--border);border-left:4px solid var(--amber);border-radius:8px;background:var(--panel)}.eyebrow{margin:0 0 6px}.health strong{font:700 22px var(--mono);color:var(--amber)}.health-note{flex:1}.health-note p{margin:4px 0;font-size:14px}#freshness{font:12px var(--mono);color:var(--muted)}.read-only,.tag{font:10px var(--mono);letter-spacing:.07em;border:1px solid var(--border);padding:6px;color:var(--muted);white-space:nowrap}nav{display:flex;gap:8px;padding:12px 0}nav button{background:transparent;border-color:transparent;min-width:100px}nav button[aria-pressed=true]{color:var(--orange);border-color:var(--orange);background:#241f1c}.section-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}.section-heading h2{font-size:15px;font-weight:600;margin:0}.section-heading>span{font:10px var(--mono);color:var(--muted)}.metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:18px}.metric{position:relative;min-height:92px;text-align:left;padding:10px 12px;background:var(--panel);border-left:3px solid var(--border);border-radius:8px}.metric .label{display:block;color:var(--muted);font-size:13px}.metric .value{display:block;font:600 18px var(--mono);letter-spacing:-.06em;margin:10px 0 7px;white-space:nowrap}.metric .hint{display:block;font:11px var(--mono);color:var(--muted);min-height:13px}.metric.warning{border-left-color:var(--amber)}.metric.critical{border-left-color:var(--red)}.metric small{font-size:14px;color:var(--muted);letter-spacing:0}.details-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.panel{padding:10px 12px;background:var(--panel);border:1px solid var(--border);border-radius:8px;min-width:0;margin-bottom:14px}.row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:6px 0;border-bottom:1px solid var(--border);font-size:13px}.row span{overflow-wrap:anywhere}.state{font:11px var(--mono);color:var(--muted);text-transform:uppercase;white-space:nowrap}.state.healthy,.state.info{color:var(--green)}.state.unavailable,.state.critical{color:var(--red)}.state.warning{color:var(--amber)}.muted,.panel-note,.empty{color:var(--muted);font-size:12px;line-height:1.5}.panel-note{margin:13px 0 0}.event-list{max-height:239px;overflow-y:auto}.event{display:block;width:100%;text-align:left;border:0;border-bottom:1px solid var(--border);border-radius:0;padding:10px 0;background:transparent}.event-meta{display:flex;gap:10px;font:10px var(--mono);color:var(--muted);margin-bottom:6px}.event-message{font-size:13px;line-height:1.4;display:block;overflow-wrap:anywhere}.empty{padding:32px 0;text-align:center}.panel h3{margin-top:0}#filters{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px;font-size:12px}#filters select{max-width:210px}#inspection pre{font:13px/1.6 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere}footer{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:8px 0;font:10px var(--mono);color:var(--muted);border-top:1px solid var(--border)}body.disconnected .metric .value,body.stale .metric .value{color:var(--muted)}body[data-view=hardware] .details-grid,body[data-view=alice] #hardware-panel,body[data-view=events] #hardware-panel,body[data-view=alice] #events-panel,body[data-view=events] #alice-panel{display:none}body[data-view=alice] .details-grid,body[data-view=events] .details-grid{grid-template-columns:1fr}body[data-view=events] .event-list{max-height:480px}
@media(max-width:850px){.shell{padding:20px}.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.metric{min-height:112px}.details-grid{grid-template-columns:1fr}.health{gap:18px}.read-only{display:none}.event-list{max-height:180px}#alice-rows{display:grid;grid-template-columns:1fr 1fr;column-gap:24px}header p{font-size:9px}.brand{gap:10px}h1{font-size:18px}}
@media(max-width:540px){.shell{padding:12px}header{flex-wrap:wrap}.node{display:flex;align-items:center;gap:10px}.health{align-items:flex-start;flex-direction:column;gap:10px}.metric .value{font-size:23px}nav{gap:0;justify-content:space-between}nav button{min-width:0;padding:8px}#alice-rows{grid-template-columns:1fr}.section-heading>span{font-size:9px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* The overview is a summary; every service remains visible in the ALICE view. */
body:not([data-view=alice]) #alice-rows .row{display:none}
body:not([data-view=alice]) #alice-rows .service-alice-api,body:not([data-view=alice]) #alice-rows .service-inference,body:not([data-view=alice]) #alice-rows .service-voice,body:not([data-view=alice]) #alice-rows .service-ledger{display:flex}
@media(min-width:650px) and (max-width:850px){.shell{padding:16px 20px}header{padding-bottom:14px}.health{padding:14px 16px}.health strong{font-size:25px}nav{padding:12px 0}.metrics{gap:10px;margin-bottom:14px}.metric{min-height:96px;padding:11px 14px}.metric .value{font-size:26px;margin:7px 0}.section-heading{margin-bottom:8px}.panel{padding:12px 16px;margin-bottom:10px}.row{padding:7px 0}.event-list{max-height:106px}.empty{padding:16px 0}.panel-note{margin-top:9px;font-size:11px}}
body:not([data-view=alice]) #alice-rows{display:grid;grid-template-columns:1fr 1fr;column-gap:20px}
@media(min-width:851px) and (max-height:850px){.shell{padding:16px 24px}header{padding-bottom:12px}.health{padding:12px 16px}nav{padding:12px 0}.metrics{gap:10px;margin-bottom:14px}.metric{min-height:105px;padding:12px 16px}.metric .value{font-size:27px}.panel{padding:12px 16px}.panel-note{margin-top:10px}}
.metric{min-width:0;overflow-wrap:anywhere}
/* Keep the overview stable when a real event journal fills; full history has its own view. */
body:not([data-view=events]) .event-list{max-height:106px}

.login-card{max-width:480px;margin:18vh auto;padding:28px;background:var(--panel);border:1px solid var(--border);border-left:3px solid var(--orange);border-radius:8px;line-height:1.6}.login-card h1{font-size:28px;margin:15px 0}.login-button{display:block;text-align:center;text-decoration:none;color:var(--bg);background:var(--orange);border-radius:5px;padding:12px;margin:24px 0}.login-button:focus-visible{outline:2px solid var(--text);outline-offset:3px}#sign-out{font-size:12px}@media(max-width:540px){.login-card{margin:12vh 16px;padding:22px}}

.login-button:hover{background:var(--orange-hover)}.login-button:active{background:var(--orange-active)}

/* Charts retain current readings and their units; SVG complexity is bounded by the API. */
.history-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 14px}.history-toolbar label{font-weight:600}.history-toolbar span{font-size:12px;color:var(--muted);flex:1;min-width:180px}.chart{display:block;margin-top:14px}.chart svg{display:block;width:100%;height:90px;overflow:visible}.chart-line{stroke:var(--orange);stroke-width:1.8;fill:none;vector-effect:non-scaling-stroke}.chart-band{fill:var(--orange);opacity:.2}.chart-dot{fill:var(--orange)}.chart-grid{stroke:var(--border);stroke-width:.5}.chart-time{fill:var(--muted);font:9px var(--mono)}.chart-summary{display:block;color:var(--muted);font:10px/1.5 var(--mono);margin-top:6px}.metric .hint{min-height:26px}.state.warming,.state.stale,.state.degraded{color:var(--amber)}#alice-stats{white-space:pre-line;overflow-wrap:anywhere;color:var(--muted);font:12px/1.7 var(--mono);margin-top:12px}.login-button,button:not(.metric):not(.event){align-items:center;justify-content:center}.login-button{display:flex;min-height:48px;line-height:1.25}.shell{padding-top:max(16px,env(safe-area-inset-top));padding-bottom:max(16px,env(safe-area-inset-bottom));padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}@media(max-width:540px){.shell{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}.chart-summary{font-size:9px}.history-toolbar span{flex-basis:100%}}
.metric{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start}.metric .chart{min-height:90px}.metric .chart-summary{margin-top:auto;padding-top:6px}

.service-row{flex-wrap:wrap}.service-detail{display:none;flex-basis:100%;font:12px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--muted)}body[data-view=alice] .service-detail{display:block}

/* Compact shared card language. Overview uses sparklines; detailed views keep full charts. */
body[data-view="overview"] .metric .chart,
body:not([data-view]) .metric .chart { min-height: 32px; margin-top: 8px; }
body[data-view="overview"] .chart svg,
body:not([data-view]) .chart svg { height: 32px; }
body[data-view="overview"] .chart-time,
body:not([data-view]) .chart-time { display: none; }
body[data-view="overview"] .metric .hint,
body:not([data-view]) .metric .hint { min-height: 14px; }
body[data-view="overview"] .metric,
body:not([data-view]) .metric { padding: 10px 12px; }
@media (any-pointer: coarse) {
    button:not(.metric):not(.event), select, .login-button { min-height: 44px; }
}

h1,h2,h3,button:not(.metric):not(.event),.metric .label {font-family:var(--heading);font-weight:600;}

/* Density is consistent across desktop and tablet; controls expand for touch. */
.metric{min-height:92px;padding:10px 12px}.metric .value{font-size:18px;margin:6px 0}
.panel{padding:10px 12px}.health{padding:10px 12px}.health strong{font-size:22px}
.row{padding:6px 0}.login-card{padding:16px}.login-card h1{font-size:22px}

/* Missing history needs a sentence, not an empty chart-sized gap. */
.metric .chart:empty{display:none}