/* SolarSentinel shared styles. Flat colour only: no gradients, no shadows, no glass.
   Colour carries meaning (state, water, sleep). Everything else is ink on paper. */

@font-face{font-family:"Atkinson Hyperlegible Next";src:url(fonts/ahn-latin.woff2) format("woff2");font-weight:200 800;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Atkinson Hyperlegible Next";src:url(fonts/ahn-latin-ext.woff2) format("woff2");font-weight:200 800;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Atkinson Hyperlegible Mono";src:url(fonts/ahm-latin.woff2) format("woff2");font-weight:200 800;font-style:normal;font-display:swap}

:root{
  --sans:"Atkinson Hyperlegible Next",ui-sans-serif,system-ui,"Segoe UI",Roboto,sans-serif;
  --mono:"Atkinson Hyperlegible Mono",ui-monospace,Menlo,Consolas,monospace;
  --paper:#FFFFFF; --ground:#F3F4F2; --ink:#16191C; --ink2:#444B51; --ink3:#626C73; --rule:#D5D9DC; --rule2:#A9B0B6;
  --frame:#B9C0C7; --cell:#1C3555;
  --sun:#FFC21A; --on-sun:#16191C;
  --ok:#1A8553; --dust:#A07800; --shade:#2D4FC8; --hot:#E4501A; --fault:#B01674; --water:#1496D8; --asleep:#6A7078;
  --ok-bg:#E3F2EA; --dust-bg:#FAEED3; --shade-bg:#E2EBFA; --hot-bg:#FBE4DA; --fault-bg:#F8DDEC; --water-bg:#DCEFF9; --asleep-bg:#ECEEF0;
  --r:6px; color-scheme:light;
}
[data-theme=dark]{
  --paper:#13161A; --ground:#1B1F24; --ink:#EEF1F3; --ink2:#C0C7CC; --ink3:#97A1A8; --rule:#2B323A; --rule2:#47515A;
  --frame:#5A646D; --cell:#1C3555;
  --ok:#4CC38C; --dust:#E0A832; --shade:#7C9BFF; --hot:#FF7A4A; --fault:#F06AB0; --water:#4DB8F2; --asleep:#9AA3AB;
  --ok-bg:#16302A; --dust-bg:#33290F; --shade-bg:#192640; --hot-bg:#38201A; --fault-bg:#38172B; --water-bg:#122C3A; --asleep-bg:#23282D;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.5 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4,p,dl,dd,figure,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
button,input,select{font:inherit;color:inherit}
a{color:inherit}
svg{display:block}
img,canvas{max-width:100%}
.num{font-variant-numeric:tabular-nums}
.mono{font-family:var(--mono)}
.muted{color:var(--ink3)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:100%;max-width:1360px;margin-inline:auto;padding-inline:clamp(16px,3vw,32px)}
:focus-visible{outline:3px solid var(--ink);outline-offset:2px}

/* ---- header ---- */
.top{z-index:30;background:var(--paper);border-bottom:1.5px solid var(--ink)}
@media (min-width:720px){.top{position:sticky;top:0}}
.top-in{display:flex;align-items:center;flex-wrap:wrap;gap:8px 24px;min-height:60px;padding-block:8px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:800;font-size:20px;letter-spacing:-.01em;white-space:nowrap}
.brand svg{width:28px;height:28px;flex:none}
.brand small{font-weight:400;font-size:15px;color:var(--ink3);letter-spacing:0}
.top-r{margin-left:auto;display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px}
.live{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;min-width:0}
.dot{width:10px;height:10px;border-radius:50%;background:var(--ink3);flex:none}
.dot.ok{background:var(--ok)}.dot.bad{background:var(--fault)}.dot.sleep{background:var(--asleep)}
.clock{font-size:15px;color:var(--ink2)}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:0 16px;border:1.5px solid var(--ink);border-radius:var(--r);background:var(--paper);color:var(--ink);font-weight:600;font-size:15px;line-height:1.2;cursor:pointer;text-align:center}
.btn:hover{background:var(--ground)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--sun);color:var(--on-sun)}
.btn.primary:hover{background:#FFCF4D}
.btn[aria-pressed=true],.btn.on{background:var(--ink);color:var(--paper)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn.sm{min-height:36px;padding:0 12px;font-size:14px}

/* ---- state marks: colour + shape + word, never colour alone ---- */
.state{display:inline-flex;align-items:center;gap:8px;font-weight:700;white-space:nowrap}
.state i{width:14px;height:14px;flex:none;border-radius:50%;background:var(--ink3)}
.s-ok i{background:var(--ok)}
.s-dust i{background:var(--dust);border-radius:0;clip-path:polygon(50% 4%,100% 94%,0 94%)}
.s-shading i{background:var(--shade);border-radius:2px}
.s-hotspot i{background:var(--hot);border-radius:0;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.s-fault i{background:var(--fault);border-radius:0;clip-path:polygon(18% 0,50% 32%,82% 0,100% 18%,68% 50%,100% 82%,82% 100%,50% 68%,18% 100%,0 82%,32% 50%,0 18%)}
.s-washing i,.s-drying i{background:var(--water);border-radius:50% 50% 50% 0;transform:rotate(-45deg) scale(.9)}
.s-asleep i{background:transparent;border:3px solid var(--asleep)}
.s-offline i{background:transparent;border:3px dashed var(--ink3)}

/* ---- sections, lists, tables ---- */
.sec{padding-block:clamp(24px,4vw,40px);border-top:1px solid var(--rule)}
.sec:first-child{border-top:0}
.h2{font-size:22px;line-height:1.25;font-weight:800;letter-spacing:-.01em}
.h3{font-size:17px;line-height:1.3;font-weight:700}
.lede{color:var(--ink2);max-width:68ch}
.grid{display:grid;gap:clamp(16px,2.4vw,28px);align-items:start}
.grid>*{min-width:0}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.facts{display:grid;gap:0;border-top:1px solid var(--rule)}
.facts>div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:10px 0;border-bottom:1px solid var(--rule)}
.facts dt{color:var(--ink2)}
.facts dd{font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.scroll{overflow-x:auto;max-width:100%}
table{width:100%;border-collapse:collapse;font-size:15px}
th,td{padding:7px 12px 7px 0;border-bottom:1px solid var(--rule);text-align:left;vertical-align:top;font-variant-numeric:tabular-nums}
th{font-weight:700;color:var(--ink2);white-space:nowrap}
tr.grp th{padding-top:16px;color:var(--ink);font-size:16px}
td.r,th.r{text-align:right}

/* ---- the few numbers that matter, large ---- */
.figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:20px 32px;margin-top:32px}
.figs dt{color:var(--ink2);font-size:15px}
.figs dd{font-size:clamp(34px,4vw,52px);font-weight:800;letter-spacing:-.02em;line-height:1.05;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.figs small{font-size:16px;font-weight:600;color:var(--ink2);letter-spacing:0;margin-left:6px}

/* ---- panel picture: a real module with a silver frame ---- */
.pv{position:relative;padding:24px 0}
.pv-frame{position:relative;border:6px solid var(--frame);border-radius:4px;background:var(--cell);aspect-ratio:2/1;overflow:hidden}
.pv-frame canvas{display:block;width:100%;height:100%}
.pv.asleep canvas{filter:grayscale(1);opacity:.4}
.pv-tag{position:absolute;left:8px;top:8px;padding:3px 10px;border-radius:3px;background:var(--paper);color:var(--ink);font-weight:700;font-size:14px}
.ldr{position:absolute;display:inline-flex;align-items:center;gap:5px;font-weight:700;font-size:13px;line-height:1;color:var(--ink2);font-variant-numeric:tabular-nums}
.ldr svg{width:12px;height:12px}
.ldr.tl{left:2px;top:2px}.ldr.tr{right:2px;top:2px}.ldr.bl{left:2px;bottom:2px}.ldr.br{right:2px;bottom:2px}
.pv.uneven .ldr{color:var(--shade)}
.fx{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .2s}
.fx.on{opacity:1}
.fx i{position:absolute;display:block}
.fx.water i{top:-14px;width:5px;height:14px;border-radius:3px;background:var(--water);animation:drop .9s linear infinite;animation-delay:var(--d)}
.fx.air i{left:-30%;height:3px;width:22%;border-radius:2px;background:#fff;opacity:.85;animation:gust .7s linear infinite;animation-delay:var(--d)}
.fx i{animation-play-state:paused}.fx.on i{animation-play-state:running}
@keyframes drop{to{transform:translateY(260px)}}
@keyframes gust{to{transform:translateX(560%)}}
.legend{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;font-size:13px;color:var(--ink2)}
.legend .sw{display:flex;height:10px;border:1px solid var(--rule2)}
.legend .sw i{flex:1}

/* ---- charts ---- */
.chart{position:relative}
.chart svg text{font-family:var(--sans);font-size:13px;fill:var(--ink3);font-variant-numeric:tabular-nums}
.chart .g line{stroke:var(--rule);stroke-width:1}
.chart .ln{fill:none;stroke:var(--ink);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.chart .mk line{stroke:var(--water);stroke-width:2;stroke-dasharray:4 4}
.chart .mk text{fill:var(--ink2);font-weight:700}
.tip{position:absolute;pointer-events:none;background:var(--ink);color:var(--paper);padding:6px 10px;border-radius:4px;font-size:14px;line-height:1.3;white-space:nowrap;transform:translate(-50%,-110%);z-index:5}

/* ---- control panel (demo and console) ---- */
.ctl h3{font-size:15px;font-weight:700;margin:18px 0 8px}
.ctl h3:first-child{margin-top:0}
.ctl .hint{font-size:14px;color:var(--ink3);margin:-4px 0 8px}
.ctl .row{display:flex;flex-wrap:wrap;gap:8px}

/* ---- logs ---- */
.log li{display:grid;grid-template-columns:5.5em 1fr;gap:12px;padding:8px 0;border-bottom:1px solid var(--rule);font-size:15px}
.log time{color:var(--ink3);font-variant-numeric:tabular-nums}
.log li>span{min-width:0;overflow-wrap:anywhere}

/* ---- notes, drawers ---- */
.note{padding:14px 16px;border-left:4px solid var(--ink);background:var(--ground);color:var(--ink2);max-width:80ch}
.note b{color:var(--ink)}
details.drawer{border:1.5px solid var(--ink);border-radius:var(--r)}
details.drawer>summary{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:48px;padding:0 16px;font-weight:700;cursor:pointer;list-style:none}
details.drawer>summary::-webkit-details-marker{display:none}
details.drawer>summary::after{content:"Show";font-weight:600;color:var(--ink3)}
details.drawer[open]>summary::after{content:"Hide"}
details.drawer>div{padding:4px 16px 20px;border-top:1px solid var(--rule)}
.empty{padding:28px 0;color:var(--ink2)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}