/* Small responsive inventory with explicit severity and freshness states. */
:root { color-scheme: light; font: 16px/1.55 system-ui,sans-serif; color:#243342; background:#f3f5f7; }
* { box-sizing:border-box; }
body { margin:0; }
main { max-width:60rem; margin:0 auto; padding:2rem 1rem 4rem; }
h1,h2 { line-height:1.2; }
a { color:#154d82; text-underline-offset:.2em; overflow-wrap:anywhere; }
header { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:2rem; }
nav { font-size:.9rem; }
button,input { font:inherit; border:1px solid #8798a7; border-radius:.3rem; padding:.65rem .8rem; }
button { background:#243d53; color:white; cursor:pointer; min-height:44px; }
input { width:100%; background:white; margin:.25rem 0 1rem; }
button:focus-visible,input:focus-visible,a:focus-visible { outline:3px solid #be6c11; outline-offset:3px; }
.login { max-width:26rem; margin:3rem auto; padding:1.5rem; background:white; border:1px solid #d6dfe6; border-radius:.5rem; }
.login button { width:100%; }
.eyebrow { text-transform:uppercase; font-size:.8rem; letter-spacing:.1em; }
[role=alert] { border-left:4px solid #9c3b25; padding:.5rem .8rem; background:#fff2ed; }
.resources,.history { list-style:none; padding:0; }
.resources li { padding:1rem; background:white; border:1px solid #d6dfe6; border-radius:.3rem; margin:.65rem 0; display:flex; gap:1rem; align-items:baseline; }
.resources li a { flex:1; font-weight:600; }
.status { color:#4f5f6c; font-size:.9rem; }
.status[data-status="critical"] { color:#972820; font-weight:700; }
.status[data-status="warning"] { color:#855000; font-weight:700; }
.status[data-status="healthy"] { color:#246339; }
.resources li { flex-wrap:wrap; }
.identifier { overflow-wrap:anywhere; font: .85rem/1.5 ui-monospace,monospace; }
.history li { padding:.7rem 0; border-bottom:1px solid #d6dfe6; }
.history span { display:block; font-size:.85rem; }
section { margin-top:2rem; }
@media(max-width:40rem) { main { padding-top:1rem; } .resources li { display:block; } .resources span { display:block; } .login { margin-top:1.5rem; } }
/* Dashboard controls stay in document flow; no nested scrolling on phones. */
main { max-width:75rem; }
h1, h2, h3, p, span, strong, li, summary { overflow-wrap:anywhere; }
.skip { position:absolute; left:-10000px; }
.skip:focus { left:1rem; top:0; background:white; padding:1rem; z-index:2; }
header { flex-wrap:wrap; margin-bottom:1rem; }
.brand { font-weight:750; margin-right:auto; }
header a, nav a, .page-link, summary { min-height:44px; display:inline-flex; align-items:center; padding:.4rem 0; }
header form { margin:0; }
.card { background:white; border:1px solid #cdd8e1; border-radius:.5rem; padding:1rem; margin:.75rem 0; min-width:0; }
.resource-summary span, .resources li span, .categories span { display:block; }
.resource-summary { border-left:5px solid #6e8495; }
.status { font-weight:700; font-size:1rem; }
.resources li { display:block; }
.row-link { display:flex; justify-content:space-between; align-items:center; gap:1rem; min-height:44px; font-weight:650; }
.categories { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.75rem; }
.categories a { display:block; text-decoration:none; }
.categories a strong { display:flex; justify-content:space-between; gap:1rem; }
.hint, footer { color:#455765; font-size:.9rem; }
.freshness { border-left:4px solid #6e8495; padding:.6rem 1rem; background:#e6edf3; margin:.8rem 0; }
#connection { font-weight:650; }
.disconnected #connection { background:#fff0cf; padding:.5rem; border-left:4px solid #855000; }
.disconnected .current::after { content:' · last known'; font-size:1rem; }
.range-form { display:flex; flex-wrap:wrap; align-items:end; gap:.75rem; margin:1rem 0; }
.range-form label { flex:1 1 10rem; min-width:0; }
.range-form input, select { width:100%; min-width:0; max-width:100%; margin:.25rem 0 0; }
input, select, button { font:inherit; min-height:44px; }
select { padding:.65rem .5rem; border:1px solid #8798a7; border-radius:.3rem; background:white; color:inherit; }
select:focus-visible, summary:focus-visible { outline:3px solid #be6c11; outline-offset:3px; }
summary { display:list-item; cursor:pointer; padding:.65rem 0; }
.current { font-size:2rem; font-weight:700; margin:.2rem 0; }
.current small { font-size:1rem; }
.plot { display:flex; height:260px; gap:.5rem; }
.y-axis { display:flex; flex-direction:column; justify-content:space-between; width:4.5rem; flex-shrink:0; padding:10px 0; font-size:.8rem; text-align:right; }
.plot svg { flex:1; min-width:0; width:100%; height:260px; touch-action:pan-y; }
.grid { stroke:#d4dee5; vector-effect:non-scaling-stroke; }
.band { fill:#91bddc; stroke:#38759e; stroke-width:1; vector-effect:non-scaling-stroke; }
.band.uncertain { stroke-dasharray:3 2; fill-opacity:.6; }
.mean { stroke:#112f47; stroke-width:2; vector-effect:non-scaling-stroke; }
.selected .band { fill:#e7b55f; }
.x-axis { display:flex; justify-content:space-between; gap:1rem; font-size:.8rem; }
#point-readout { padding:1rem 0; font-size:.9rem; min-height:5rem; }
.point-data { padding-left:1.5rem; }
.point-data li { margin:1rem 0; }
.stats { display:flex; flex-wrap:wrap; gap:2rem; }
.stats strong { display:block; font-size:1.8rem; }
.stats span { display:block; }
.durations { display:flex; flex-wrap:wrap; list-style:none; gap:1rem; padding:0; }
.alarms li a { display:inline-block; margin-right:1rem; min-height:44px; padding:.5rem 0; }
.alarms li strong { display:block; }
footer { margin-top:3rem; border-top:1px solid #cdd8e1; padding-top:1rem; }
@media(max-width:40rem) { .categories { grid-template-columns:1fr; } .range-form label { flex-basis:100%; } .range-form button { width:100%; } main { padding-left:.75rem; padding-right:.75rem; } .card { padding:.8rem; } h1 { font-size:1.65rem; } .stats { gap:1rem; } }