:root{--yellow:#e9ac77;--ink:#193e3c;--muted:#65817a;--paper:#eef4f2;--panel:#fff;--line:#dbe7e2;--green:#247e5b;--red:#c34c45;--amber:#a57c21;--nav:#d7e9e4}
h1{font-weight:700;letter-spacing:-1px}h2{font-size:18px;font-weight:650}button{font-weight:600;border-radius:7px}.primary{background:var(--yellow);color:#193e3c;border-color:var(--yellow)}button:focus-visible,a:focus-visible{outline:3px solid #428d83;outline-offset:3px}
#app:has(.header){display:grid;grid-template-columns:205px minmax(0,1fr);min-height:100vh}.header{background:var(--nav);color:#365e56;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;flex-wrap:nowrap;gap:27px;border:0;padding:28px 18px;position:sticky;top:0;height:100vh;overflow:auto}.brand{flex-direction:column;text-align:center;gap:13px;font-size:14px;font-weight:650;line-height:1.6;letter-spacing:0}.brand img{width:78px;height:78px;padding:6px;background:white;border-radius:50%;box-shadow:0 3px 12px #234b4312}.brand small{font-size:9px;letter-spacing:1px;margin-top:8px;color:#52766c}.nav{display:grid;gap:7px}.nav button{text-align:left;padding:11px 13px;color:#365e56;transition:background .22s ease,box-shadow .22s ease}.nav button:nth-child(5n+1){--nav-tile:#235b62}.nav button:nth-child(5n+2){--nav-tile:#237452}.nav button:nth-child(5n+3){--nav-tile:#b74745}.nav button:nth-child(5n+4){--nav-tile:#b38a2d}.nav button:nth-child(5n){--nav-tile:#7956a3}.nav button.active{background:linear-gradient(135deg,color-mix(in srgb,var(--nav-tile) 86%,white),var(--nav-tile));color:white;box-shadow:0 4px 10px color-mix(in srgb,var(--nav-tile) 30%,transparent),inset 0 1px 0 #fff3}.account{margin-top:auto;flex-wrap:wrap;font-size:11px;gap:8px}.account>span{width:100%}.account button{color:#365e56;border-color:#9dbeb3;font-size:11px}.main{width:100%;max-width:1600px;margin:0 auto;padding:24px 32px 45px;min-width:0}.toolbar{padding-bottom:17px;border-bottom:1px solid var(--line);gap:10px}.toolbar>label{display:flex;align-items:center;margin:0;gap:10px}.toolbar>small:nth-of-type(2){display:none}.toolbar button{padding:7px 10px;font-size:11px}.overview-hero{display:grid;grid-template-columns:1fr 285px;align-items:center;gap:20px;padding:26px 0 3px;min-height:240px}.overview-hero h1{font-size:38px;line-height:1.12;margin:11px 0}.overview-hero p{font-size:12px}.overview-hero .primary{font-size:12px}.kpis{grid-template-columns:repeat(5,minmax(0,1fr));border:0;gap:14px;margin:25px 0 30px}.kpi:nth-child(1){--tile:#235b62;--tile-text:#fff;--tile-sub:#d1e8e8}.kpi:nth-child(2){--tile:#237452;--tile-text:#fff;--tile-sub:#d2ecdf}.kpi:nth-child(3){--tile:#b74745;--tile-text:#fff;--tile-sub:#ffe1dc}.kpi:nth-child(4){--tile:#edc466;--tile-text:#49370f;--tile-sub:#604c23}.kpi:nth-child(5){--tile:#7956a3;--tile-text:#fff;--tile-sub:#e8dcf6}.kpi,.kpi:first-child{position:relative;isolation:isolate;overflow:hidden;padding:19px 15px;border:0;border-radius:11px;color:var(--tile-text);background:linear-gradient(135deg,color-mix(in srgb,var(--tile) 88%,white),var(--tile) 65%,color-mix(in srgb,var(--tile) 92%,#123d3b));box-shadow:0 5px 10px color-mix(in srgb,var(--tile) 20%,transparent),0 13px 24px color-mix(in srgb,var(--tile) 25%,transparent),inset 0 1px 0 #ffffff30;transition:transform .25s ease,box-shadow .25s ease,filter .25s ease;animation:kpi-enter .55s ease both}.kpi:nth-child(2){animation-delay:60ms}.kpi:nth-child(3){animation-delay:120ms}.kpi:nth-child(4){animation-delay:180ms}.kpi:nth-child(5){animation-delay:240ms}.kpi span,.kpi small{color:var(--tile-sub)}.kpi span{font-size:12px}.kpi small{font-size:10px}.kpi strong{color:var(--tile-text);font-size:clamp(27px,3vw,39px);font-weight:700;margin:10px 0;transform-origin:left center;transition:transform .25s ease;font-variant-numeric:tabular-nums}.status-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--tile-text);margin-right:6px;transition:box-shadow .25s ease}.kpi:after{content:'';position:absolute;inset:-100% -80%;background:linear-gradient(110deg,transparent 42%,#ffffff26 49%,transparent 56%);transform:translateX(-70%);pointer-events:none}.panel,.table-wrap{border-radius:11px}.panel{box-shadow:0 4px 16px #123d3b08;padding:22px}.fleet-charts{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-bottom:5px}.fleet-charts .section-title h2{font-size:16px}.condition-body{display:flex;align-items:center;gap:20px;flex-wrap:wrap}.condition-donut{width:180px;height:180px;flex:0 0 180px;overflow:visible;animation:chart-reveal .6s ease}.donut-value{fill:var(--ink);font:700 27px 'Segoe UI',sans-serif}.donut-label{fill:var(--muted);font:11px 'Segoe UI',sans-serif}.condition-donut circle{transition:opacity .25s,stroke-width .25s}.condition-legend{flex:1;min-width:130px;display:grid;gap:15px;font-size:11px}.condition-legend>div{display:flex;justify-content:space-between;gap:12px}.condition-legend span{color:var(--muted)}.condition-legend i{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:7px}.condition-legend b{font-weight:600;font-variant-numeric:tabular-nums}.fleet-bar-row{margin-bottom:12px}.fleet-bar-label{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:5px;font-size:11px}.fleet-bar-label button{background:none;border:0;padding:0;font-size:11px;color:var(--muted);font-weight:400;text-align:left;overflow-wrap:anywhere}.fleet-bar-label b{font-weight:600}.fleet-bar-track{height:8px;background:var(--paper);border-radius:8px;overflow:hidden}.fleet-bar-track>span{display:block;height:100%;background:#b9d5ce;border-radius:8px;transform-origin:left;animation:bar-grow .7s ease both}.fleet-bar-track i{display:block;height:100%;background:#368879;border-radius:8px}.fleet-panel>small{font-size:10px}.condition-panel,.fleet-panel{transition:box-shadow .25s ease,border-color .25s ease}.columns{grid-template-columns:minmax(0,1fr) 300px}.site-summary{gap:14px;grid-template-columns:minmax(110px,1fr) minmax(100px,1.3fr) 40px}.site-summary button{font-size:12px}.type-row{font-size:12px}th{background:var(--paper);color:var(--muted)}:root[data-theme=dark]{--ink:#e5f0eb;--muted:#a0bbb0;--paper:#102824;--panel:#193a33;--line:#2d5147;--green:#8cdbb6;--red:#f09c91;--amber:#edc466;--nav:#d7e9e4}:root[data-theme=dark] .header .brand{color:#234b43}:root[data-theme=dark] .primary{background:var(--yellow);color:#193e3c}:root[data-theme=dark] th{background:var(--paper);color:var(--muted)}.auth .brand{font-size:15px}.auth .brand img{width:70px;height:70px}
@media(hover:hover){.kpi:hover{transform:translateY(-5px);box-shadow:0 8px 14px color-mix(in srgb,var(--tile) 27%,transparent),0 20px 32px color-mix(in srgb,var(--tile) 33%,transparent),inset 0 1px 0 #ffffff40}.kpi:hover:after{animation:kpi-shine .85s ease both}.kpi:hover strong{transform:scale(1.05)}.kpi:hover .status-dot{box-shadow:0 0 5px color-mix(in srgb,var(--tile-text) 65%,transparent),0 0 10px color-mix(in srgb,var(--tile-text) 35%,transparent)}.nav button:not(.active):hover{background:color-mix(in srgb,var(--nav-tile) 12%,#d7e9e4);color:#234b43}.condition-panel:hover,.fleet-panel:hover{box-shadow:0 7px 22px #123d3b10;border-color:var(--muted)}.condition-donut:has(circle:hover) circle{opacity:.4}.condition-donut circle:hover{opacity:1!important;stroke-width:23}.fleet-bar-row:hover .fleet-bar-track>span{filter:brightness(1.07)}}
@keyframes kpi-enter{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}@keyframes kpi-shine{from{transform:translateX(-70%)}to{transform:translateX(70%)}}@keyframes bar-grow{from{scale:0 1}to{scale:1 1}}@keyframes chart-reveal{from{opacity:0}to{opacity:1}}
@media(max-width:1200px){.main{padding:22px}.kpis{gap:10px}.kpi{padding:16px 12px}.fleet-charts{gap:16px}.condition-body{gap:10px}.condition-donut{width:155px;height:155px;flex-basis:155px}.columns{grid-template-columns:1fr}}
@media(max-width:950px){#app:has(.header){grid-template-columns:175px minmax(0,1fr)}.header{padding:22px 12px}.brand{font-size:12px}.main{padding:18px}.kpis{grid-template-columns:repeat(3,minmax(0,1fr))}.fleet-charts{grid-template-columns:1fr}.condition-body{justify-content:center;gap:25px}.condition-legend{max-width:300px}.overview-hero{grid-template-columns:1fr 235px}.overview-hero h1{font-size:32px}}
@media(max-width:650px){#app:has(.header){display:block}.header{position:static;height:auto;overflow:visible;padding:15px;gap:15px}.brand{flex-direction:row;text-align:left;gap:12px;font-size:13px}.brand img{width:48px;height:48px;padding:4px}.brand small{margin-top:3px}.nav{display:flex;order:0;gap:5px;width:100%}.nav button{padding:8px;font-size:11px}.account{margin:0;justify-content:flex-end}.account>span{display:block;width:auto;margin-right:auto}.overview-hero{grid-template-columns:1fr 230px;gap:0;min-height:210px}.overview-hero h1{font-size:29px}.overview-hero p{font-size:11px}.kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.kpi strong{font-size:34px}.toolbar{align-items:center}.toolbar>label{width:100%;justify-content:space-between}.toolbar>.actions{width:auto}.main{padding:17px 15px 35px}.condition-donut{width:165px;height:165px;flex-basis:165px}.site-summary{grid-template-columns:1fr 1fr}.panel{padding:18px}.fleet-panel .section-title{gap:6px}}
@media(max-width:440px){.overview-hero{grid-template-columns:1fr}.overview-hero .fd-scene{width:260px;margin:0 auto;height:195px}.condition-body{gap:12px}.condition-donut{width:145px;height:145px;flex-basis:145px}.condition-legend{min-width:110px;font-size:10px}.toolbar input{font-size:14px}.account>span{font-size:10px}.overview-hero .eyebrow{font-size:9px}}
@media(prefers-reduced-motion:reduce){.kpi,.condition-donut,.fleet-bar-track>span,.overview-hero .fd-boom,.overview-hero .fd-arm{animation:none}.kpi,.kpi strong,.status-dot,.nav button,.condition-panel,.fleet-panel,.condition-donut circle{transition:none}.kpi:hover,.kpi:hover strong{transform:none}.kpi:hover:after{animation:none}}

/* Summary tiles also act as accessible status filters. */
.kpis button.kpi{width:100%;text-align:left;font-family:inherit;line-height:inherit;cursor:pointer}.kpis button.kpi[aria-pressed=true]{outline:2px solid var(--ink);outline-offset:3px}.kpis button.kpi:focus-visible{outline:3px solid var(--ink);outline-offset:4px}

/* Project colours stay with each site when searching or reversing the sort. */
.site-tile{--site-color:#235b62;--site-text:#fff;--site-sub:#d1e8e8;--muted:var(--site-sub);display:flex;flex-direction:column;border:0;border-radius:12px;color:var(--site-text);background:linear-gradient(135deg,color-mix(in srgb,var(--site-color) 88%,white),var(--site-color) 65%,color-mix(in srgb,var(--site-color) 92%,#123d3b));box-shadow:0 5px 10px color-mix(in srgb,var(--site-color) 20%,transparent),0 13px 24px color-mix(in srgb,var(--site-color) 25%,transparent),inset 0 1px 0 #ffffff30;transition:transform .2s ease,box-shadow .2s ease}
.site-tone-1{--site-color:#237452;--site-sub:#d2ecdf}.site-tone-2{--site-color:#b74745;--site-sub:#ffe1dc}.site-tone-3{--site-color:#edc466;--site-text:#49370f;--site-sub:#604c23}.site-tone-4{--site-color:#7956a3;--site-sub:#e8dcf6}
.site-tile h2,.site-tile .count,.site-tile .ok,.site-tile .down{color:var(--site-text)}.site-tile p,.site-tile small{color:var(--site-sub)}.site-tile>.actions{margin-top:auto;padding-top:14px}.site-tile button{color:var(--site-text);border-color:#ffffff60;background:#ffffff16}.site-tile button:hover{background:#ffffff30}.site-tone-3 button{border-color:#49370f50;background:#ffffff50}.site-tone-3 button:hover{background:#ffffff85}.site-tile button.danger{background:#fff;color:#a62e2c;border-color:#fff}.site-tile button:focus-visible{outline:2px solid var(--site-text);outline-offset:3px}.site-tile:hover{transform:translateY(-2px)}
@media(prefers-reduced-motion:reduce){.site-tile{transition:none}.site-tile:hover{transform:none}}

/* A type name, count and the space between them form one phone-sized target. */
.type-row.type-link{display:flex;align-items:center;width:100%;min-height:48px;gap:12px;padding:12px 10px;text-align:left;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:6px;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:rgba(35,91,98,.18);transition:background .15s ease}
.type-link>span:first-child{flex:1;min-width:0;overflow-wrap:anywhere}.type-link b{flex-shrink:0;font-variant-numeric:tabular-nums}.type-arrow{flex-shrink:0;opacity:.55}.type-row.type-link:active{background:color-mix(in srgb,var(--nav) 65%,var(--panel))}.type-row.type-link:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
@media(hover:hover) and (pointer:fine){.type-row.type-link:hover{background:color-mix(in srgb,var(--nav) 50%,var(--panel))}.type-link:hover .type-arrow{opacity:1}}
@media(prefers-reduced-motion:reduce){.type-row.type-link{transition:none}}