/* oceanic AC platform. Palette is the validated dataviz reference instance;
   light and dark are separately stepped sets, not an automatic flip. */
:root, body {
  color-scheme: light;
  --plane:#f7f9fb; --surface-1:#ffffff; --surface-2:#eef3f8;
  --text-primary:#0b0b0b; --text-secondary:#52514e; --muted:#898781;
  --grid:#e1e0d9; --ring:rgba(11,11,11,0.10);
  --accent:#2a78d6; --accent-ink:#ffffff;
  --good:#0ca30c; --warning:#fab219; --serious:#ec835a; --critical:#d03b3b;
  --cool:#2a78d6; --heat:#eb6834;
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])), :root:where(:not([data-theme="light"])) body {
    color-scheme: dark;
    --plane:#0c0f12; --surface-1:#161a1f; --surface-2:#1e242b;
    --text-primary:#ffffff; --text-secondary:#c3c2b7; --muted:#898781;
    --grid:#2c2c2a; --ring:rgba(255,255,255,0.10);
    --accent:#3987e5; --cool:#3987e5; --heat:#d95926;
  }
}
:root[data-theme="dark"], :root[data-theme="dark"] body {
  color-scheme: dark;
  --plane:#0c0f12; --surface-1:#161a1f; --surface-2:#1e242b;
  --text-primary:#ffffff; --text-secondary:#c3c2b7; --muted:#898781;
  --grid:#2c2c2a; --ring:rgba(255,255,255,0.10);
  --accent:#3987e5; --cool:#3987e5; --heat:#d95926;
}

* { box-sizing:border-box; }
body { margin:0; background:var(--plane); color:var(--text-primary);
       font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
a { color:var(--accent); }

/* ---------- app bar ---------- */
.bar { display:flex; align-items:center; gap:18px; padding:0 22px; height:56px;
       background:var(--surface-1); border-bottom:1px solid var(--ring); flex-wrap:wrap; }
.brand { font-weight:600; font-size:15px; display:flex; align-items:center; gap:9px;
         text-decoration:none; color:inherit; white-space:nowrap; }
.brand .mark { width:18px; height:18px; flex:none; }
.tabs { display:flex; gap:2px; height:100%; align-items:stretch; }
.tabs a { display:flex; align-items:center; padding:0 14px; text-decoration:none;
          color:var(--text-secondary); font-size:14px; border-bottom:2px solid transparent; }
.tabs a:hover { color:var(--text-primary); }
.tabs a[aria-current="page"] { color:var(--text-primary); border-bottom-color:var(--accent); font-weight:600; }
.bar .right { margin-left:auto; display:flex; align-items:center; gap:14px; font-size:13px; }
.whoami { color:var(--text-secondary); } .whoami b { color:var(--text-primary); }
.badge { font-size:10px; text-transform:uppercase; letter-spacing:.6px; padding:2px 7px;
         border-radius:20px; border:1px solid var(--ring); color:var(--text-secondary); }
.linkish { background:none; border:0; color:var(--text-secondary); cursor:pointer; font:inherit; font-size:13px; padding:0; }
.linkish:hover { color:var(--text-primary); }

main { max-width:1200px; margin:0 auto; padding:22px 24px 56px; }
h1.page { font-size:20px; margin:0 0 4px; }
p.lede { color:var(--text-secondary); font-size:14px; margin:0 0 20px; }

.card { background:var(--surface-1); border:1px solid var(--ring); border-radius:10px;
        padding:18px 20px; margin-bottom:20px; }
.card h2 { margin:0 0 3px; font-size:14px; font-weight:600; }
.card .hint { margin:0 0 16px; color:var(--text-secondary); font-size:13px; }

/* ---------- forms ---------- */
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; }
.field { display:flex; flex-direction:column; gap:6px; min-width:0; }
label { font-size:12px; color:var(--text-secondary); text-transform:uppercase; letter-spacing:.6px; }
input, select { background:var(--surface-2); border:1px solid var(--ring); color:var(--text-primary);
                border-radius:7px; padding:9px 11px; font:inherit; width:100%; }
input:focus, select:focus { outline:2px solid var(--accent); outline-offset:-1px; }
input.bad, select.bad { border-color:var(--critical); }
.err { color:var(--critical); font-size:12px; min-height:15px; }
fieldset { border:1px solid var(--ring); border-radius:8px; padding:16px; margin:20px 0 0; }
legend { font-size:12px; color:var(--text-secondary); text-transform:uppercase; letter-spacing:.6px; padding:0 6px; }
.checks { display:flex; gap:18px; flex-wrap:wrap; }
.check { display:flex; align-items:center; gap:8px; font-size:14px; color:var(--text-primary); }
.check input { width:auto; }
.actions { display:flex; gap:12px; align-items:center; margin-top:20px; flex-wrap:wrap; }
button.primary { background:var(--accent); color:var(--accent-ink); border:0; border-radius:7px;
                 padding:10px 18px; font:inherit; font-weight:600; cursor:pointer; }
button.primary:hover { filter:brightness(.93); }
button.primary:disabled { opacity:.55; cursor:default; }
button.ghost { background:transparent; border:1px solid var(--ring); color:var(--text-secondary);
               border-radius:7px; padding:9px 15px; font:inherit; cursor:pointer; }
button.ghost:hover { color:var(--text-primary); border-color:var(--muted); }
button.danger { background:transparent; border:1px solid var(--ring); color:var(--text-secondary);
                border-radius:6px; padding:3px 10px; font:inherit; font-size:12px; cursor:pointer; }
button.danger:hover { color:var(--critical); border-color:var(--critical); }

.banner { display:none; padding:11px 14px; border-radius:8px; margin-bottom:18px; font-size:14px; }
.banner.ok { display:block; background:color-mix(in srgb, var(--good) 12%, transparent);
             border:1px solid color-mix(in srgb, var(--good) 35%, transparent); color:var(--good); }
.banner.bad { display:block; background:color-mix(in srgb, var(--critical) 12%, transparent);
              border:1px solid color-mix(in srgb, var(--critical) 35%, transparent); color:var(--critical); }
.banner.warn { display:block; background:color-mix(in srgb, var(--warning) 14%, transparent);
               border:1px solid color-mix(in srgb, var(--warning) 40%, transparent); color:var(--text-primary); }

table { width:100%; border-collapse:collapse; font-size:13px; }
th, td { text-align:left; padding:9px 10px; border-bottom:1px solid var(--ring); }
th { color:var(--text-secondary); font-size:11px; text-transform:uppercase; letter-spacing:.5px; font-weight:600; white-space:nowrap; }
td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; }
.scroll { overflow-x:auto; }
.sub2 { color:var(--muted); font-size:11px; }
.empty { color:var(--text-secondary); font-size:13px; padding:20px 10px; }

/* ---------- state chips: colour + glyph + word, never colour alone ---------- */
.chip { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600;
        padding:2px 9px 2px 7px; border-radius:20px; border:1px solid var(--ring); white-space:nowrap; }
.chip .g { font-size:11px; line-height:1; }
.s-ON { color:var(--accent); } .s-OFF { color:var(--muted); }
.s-OFFLINE { color:var(--serious); } .s-NEVER_SEEN { color:var(--muted); }

/* ---------- room cards ---------- */
.rooms { display:grid; grid-template-columns:repeat(auto-fill,minmax(248px,1fr)); gap:14px; }
.room { background:var(--surface-1); border:1px solid var(--ring); border-radius:12px; padding:14px; }
.room.running { border-color:color-mix(in srgb, var(--accent) 45%, var(--ring)); }
.room.offline { opacity:.82; }
.r-head { display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.r-room { font-size:17px; font-weight:600; }
.r-where { color:var(--muted); font-size:11px; }
.r-body { display:flex; align-items:center; gap:14px; margin:10px 0 4px; }
.r-temp { font-size:30px; font-weight:600; line-height:1; font-variant-numeric:tabular-nums; }
.r-temp .u { font-size:15px; color:var(--text-secondary); font-weight:400; }
.r-meta { display:flex; flex-direction:column; gap:2px; font-size:11px; color:var(--text-secondary); }
.r-meta b { color:var(--text-primary); font-weight:600; }
.r-foot { display:flex; align-items:center; justify-content:space-between; gap:8px;
          margin-top:10px; padding-top:10px; border-top:1px solid var(--ring); }
.r-ctrl { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.ctl { background:var(--surface-2); border:1px solid var(--ring); color:var(--text-primary);
       border-radius:7px; padding:4px 9px; font:inherit; font-size:12px; cursor:pointer; min-width:28px; }
.ctl:hover:not(:disabled) { border-color:var(--accent); color:var(--accent); }
.ctl:disabled { opacity:.45; cursor:not-allowed; }
.ctl.on { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); font-weight:600; }
.setpoint { font-variant-numeric:tabular-nums; min-width:46px; text-align:center;
            font-size:12px; font-weight:600; }

/* ---------- the fan ----------
   Spins only while the unit is actually running, so motion means something.
   Honour reduced-motion: the blades stop and the word "Running" carries it. */
.fan { width:54px; height:54px; flex:none; }
.fan .blades { transform-origin:50% 50%; }
.fan.spin-low    .blades { animation:fan-spin 2.4s linear infinite; }
.fan.spin-medium .blades { animation:fan-spin 1.5s linear infinite; }
.fan.spin-high   .blades { animation:fan-spin 0.85s linear infinite; }
.fan.spin-auto   .blades { animation:fan-spin 1.8s linear infinite; }
@keyframes fan-spin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .fan .blades { animation:none !important; }
}