@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;600;700;800&display=swap');
:root { --ink:#17231f; --muted:#6f7f76; --paper:#f3f5ef; --line:#dbe2d8; --accent:#d65f35; --green:#315f4d; --ok:#277453; --watch:#b2761d; --bad:#b64235; }
* { box-sizing:border-box; } body { margin:0; color:var(--ink); background:var(--paper); font-family:Manrope,sans-serif; } header { display:flex; justify-content:space-between; align-items:end; padding:38px 6vw 28px; background:var(--green); color:#f5f2e9; } h1,h2,h3,h4,p { margin:0; } h1 { font-size:clamp(2rem,4vw,4rem); } h2 { font-size:clamp(1.4rem,2.5vw,2.4rem); } h3 { font-size:1.35rem; } h4 { font-size:.85rem; text-transform:uppercase; letter-spacing:.08em; } header span { font-family:'DM Mono',monospace; font-size:.75rem; }
main { max-width:1440px; margin:auto; padding:0 6vw 60px; } nav { display:flex; gap:8px; overflow:auto; padding:22px 0; border-bottom:1px solid var(--line); } button { border:0; border-bottom:2px solid transparent; background:transparent; color:var(--muted); cursor:pointer; font:600 .9rem Manrope; padding:10px 15px; white-space:nowrap; } button.active { color:var(--accent); border-color:var(--accent); }
.eyebrow { color:var(--accent); font:500 .72rem 'DM Mono',monospace; margin-bottom:10px; } .intro,.capture-head { display:flex; justify-content:space-between; gap:25px; padding:48px 0 30px; } .intro p:not(.eyebrow),.capture-head p:not(.eyebrow),.section-heading > p { color:var(--muted); margin-top:10px; } .count { text-align:right; } .count strong { display:block; color:var(--accent); font-size:3.6rem; line-height:1; } .count span,.pill,small { color:var(--muted); font-size:.75rem; }
.fleet-strip,.health-summary { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:20px 24px; margin-bottom:38px; background:#fff; border-left:5px solid var(--ok); } .fleet-strip > div span,.summary-label { display:block; color:var(--muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; } .fleet-strip strong { display:block; margin-top:5px; } .fleet-strip p { color:var(--muted); font-size:.78rem; margin-left:auto; max-width:360px; } .health-summary { margin-bottom:30px; } .health-summary strong { display:block; font-size:1.8rem; margin-top:5px; } .health-summary p { color:var(--muted); margin-top:4px; } .summary-watch,.status-watch { border-color:var(--watch); } .summary-bad,.status-bad { border-color:var(--bad); } .summary-legend { display:flex; gap:6px; flex-wrap:wrap; }
.state { display:inline-block; border-radius:999px; padding:5px 9px; color:#fff; font:600 .67rem 'DM Mono',monospace; white-space:nowrap; } .state-ok { background:var(--ok); } .state-watch { background:var(--watch); } .state-bad { background:var(--bad); } .state-neutral { background:var(--muted); }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:25px; margin:30px 0 16px; } .section-heading > p { max-width:420px; text-align:right; font-size:.8rem; } .metric-group { margin:20px 0 28px; } .metric-group > h4 { color:var(--muted); margin-bottom:10px; }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(185px,1fr)); gap:12px; } .metric-card { border-top:3px solid var(--ok); background:#fff; padding:17px 18px; min-height:135px; } .metric-card.status-watch { border-top-color:var(--watch); } .metric-card.status-bad { border-top-color:var(--bad); } .metric-top { display:flex; justify-content:space-between; align-items:start; gap:8px; } .metric-card strong { display:block; font-size:1.55rem; margin:17px 0 12px; } .metric-range { display:flex; justify-content:space-between; color:var(--muted); font:400 .68rem 'DM Mono',monospace; } .guidance { color:var(--muted); font-size:.68rem; margin-top:10px; }
.charts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; } .chart-card { background:#fff; padding:17px 18px 10px; border:1px solid var(--line); } .chart-title { display:flex; justify-content:space-between; align-items:start; } .chart-title h4 { text-transform:none; letter-spacing:0; } .chart-title span { color:var(--muted); font-size:.7rem; } .chart-note { font:400 .67rem 'DM Mono',monospace; } svg { display:block; width:100%; margin-top:12px; overflow:visible; } svg text { fill:var(--muted); font:10px 'DM Mono',monospace; } .axis { stroke:var(--line); stroke-width:1; } .chart-line { fill:none; stroke:var(--accent); stroke-width:3; stroke-linejoin:round; stroke-linecap:round; } .chart-dot { fill:#fff; stroke:var(--accent); stroke-width:3; }
.table-heading { margin-top:45px; } .table-wrap { overflow:auto; background:#fff; border:1px solid var(--line); } table { width:100%; min-width:900px; border-collapse:collapse; font-size:.85rem; } th,td { text-align:left; padding:15px 17px; border-bottom:1px solid var(--line); } th { color:var(--muted); font:500 .72rem 'DM Mono',monospace; text-transform:uppercase; } td:first-child { white-space:nowrap; } .pill { border:1px solid var(--line); border-radius:20px; padding:9px 13px; height:max-content; } .error { color:var(--bad); padding:40px 0; }
@media (max-width:850px) { .charts { grid-template-columns:1fr; } } @media (max-width:700px) { header { padding:28px 5vw 22px; align-items:start; gap:20px; flex-direction:column; } main { padding:0 5vw 40px; } .intro,.capture-head,.section-heading,.fleet-strip,.health-summary { flex-direction:column; align-items:start; padding-top:35px; } .count { text-align:left; } .section-heading > p,.fleet-strip p { text-align:left; margin-left:0; } }