/* Domov – colors, type and layout from the approved design (docs/design/canvas/ViewB.dc.html). */
:root {
  --bg: #F2F4F3; --tile: #FFFFFF; --chip: #F6F8F7; --ink: #111716; --muted: #56625F; --line: #DCE2E0; --line-strong: #B9C3C0;
  --accent: #4B55C8; --good: #1E8E4E; --fair: #C27400; --poor: #C9302C; --fair-soft: #FFF4E0; --poor-soft: #FCEBEA;
  --txt-fair: #8A5300; --txt-poor: #A3261F; --tag-fair-bg: #8A5300; --tag-fair-ink: #FFFFFF; --tag-poor-bg: #A3261F; --tag-poor-ink: #FFFFFF;
  --band-fair: rgba(214,138,0,.14); --band-poor: rgba(201,48,44,.12); --night: rgba(17,23,22,.05); --run: rgba(75,85,200,.10);
  --col-a: #FFFFFF; --col-b: #F0F3F2; --col-head: #E6EBE9; --col-head-hover: #DCE3E0; --dim: rgba(242,244,243,.78);
  --ap-a: #0E7C86; --ap-b: #9B3FA8; --ap-c: #2A6FB0; --ap-d: #8A6A00;
  --f-num: "Barlow Semi Condensed", "Arial Narrow", system-ui, sans-serif;
  --f-ui: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0D1110; --tile: #161B1A; --chip: #1C2322; --ink: #ECF1EF; --muted: #A3AEAA; --line: #2C3432; --line-strong: #46514E;
    --accent: #9AA2FF; --good: #3CC57B; --fair: #F0A53A; --poor: #FF5D55; --fair-soft: #2D2211; --poor-soft: #3A1517;
    --txt-fair: #F5B862; --txt-poor: #FF8A84; --tag-fair-bg: #F0A53A; --tag-fair-ink: #1F1405; --tag-poor-bg: #FF7A73; --tag-poor-ink: #1A0605;
    --band-fair: rgba(240,165,58,.13); --band-poor: rgba(255,93,85,.15); --night: rgba(236,241,239,.05); --run: rgba(154,162,255,.13);
    --col-a: #161B1A; --col-b: #1C2321; --col-head: #232B29; --col-head-hover: #2B3532; --dim: rgba(13,17,16,.75);
    --ap-a: #4CC9D3; --ap-b: #E08BEA; --ap-c: #6FB2F2; --ap-d: #E2C25A;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0D1110; --tile: #161B1A; --chip: #1C2322; --ink: #ECF1EF; --muted: #A3AEAA; --line: #2C3432; --line-strong: #46514E;
  --accent: #9AA2FF; --good: #3CC57B; --fair: #F0A53A; --poor: #FF5D55; --fair-soft: #2D2211; --poor-soft: #3A1517;
  --txt-fair: #F5B862; --txt-poor: #FF8A84; --tag-fair-bg: #F0A53A; --tag-fair-ink: #1F1405; --tag-poor-bg: #FF7A73; --tag-poor-ink: #1A0605;
  --band-fair: rgba(240,165,58,.13); --band-poor: rgba(255,93,85,.15); --night: rgba(236,241,239,.05); --run: rgba(154,162,255,.13);
  --col-a: #161B1A; --col-b: #1C2321; --col-head: #232B29; --col-head-hover: #2B3532; --dim: rgba(13,17,16,.75);
  --ap-a: #4CC9D3; --ap-b: #E08BEA; --ap-c: #6FB2F2; --ap-d: #E2C25A;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink); font-family: var(--f-ui); font-size: 15px; line-height: 1.4; }
body.noscroll { overflow: hidden; }
button { font: inherit; color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
a { color: var(--accent); }
[hidden] { display: none !important; }

.dum {
  min-height: 100vh; display: flex; flex-direction: column; gap: 12px;
  padding: max(14px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
}
.layout { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
#main { flex: 999 1 640px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }

/* building blocks */
.row { display: flex; align-items: center; }
.col { display: flex; flex-direction: column; }
.wrap { flex-wrap: wrap; }
.card { background: var(--tile); border: 1px solid var(--line); border-radius: 16px; display: flex; flex-direction: column; min-width: 0; }
.num { font-family: var(--f-num); font-weight: 600; font-variant-numeric: tabular-nums; }
.tab { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.ink { color: var(--ink); }
.small { font-size: 13px; }
.xs { font-size: 12px; }
.nowrap { white-space: nowrap; }
.title { margin: 0; font-family: var(--f-num); font-weight: 600; font-size: 28px; letter-spacing: .01em; line-height: 1.1; }
.sec { margin: 0; font-family: var(--f-num); font-weight: 600; font-size: 16px; letter-spacing: .08em; text-transform: uppercase; }
.h3 { margin: 0; font-family: var(--f-num); font-weight: 600; font-size: 18px; }
.room { margin: 0; font-family: var(--f-num); font-weight: 600; font-size: 18px; letter-spacing: .06em; text-transform: uppercase; line-height: 1.1; }
.label { font-weight: 700; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.tag { font-weight: 700; letter-spacing: .04em; text-transform: uppercase; border-radius: 5px; }
.pill { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 0 7px; border-radius: 999px; border: 1px solid var(--muted); color: var(--muted); }
.chip { display: inline-flex; align-items: baseline; gap: 5px; padding: 1px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; }
.chip-fair { align-self: center; font-size: 11px; font-weight: 600; padding: 0 6px; border-radius: 5px; border: 1px solid var(--txt-fair); color: var(--txt-fair); }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.seg { border: 1px solid var(--line); background: var(--tile); border-radius: 999px; padding: 4px 13px; cursor: pointer; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }
.plain { border: 0; background: none; padding: 2px 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; text-align: left; }
.legendbar { display: flex; align-items: center; gap: 6px 18px; flex-wrap: wrap; padding: 8px 6px 0; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }

/* header */
#hdr { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }
.views { display: flex; gap: 3px; padding: 3px; border-radius: 999px; background: var(--tile); border: 1px solid var(--line); }
.vlink { display: inline-block; padding: 5px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; text-decoration: none; color: var(--ink); }
.vlink:hover { text-decoration: underline; }
.vlink.off { color: var(--muted); cursor: default; }
.vlink.off:hover { text-decoration: none; }

/* summary */
#sum { background: var(--tile); border-radius: 16px; padding: 11px 16px; display: flex; flex-direction: column; gap: 7px; }

/* matrix */
.colh { margin: 1px 1px 0; border: 0; border-bottom: 1px solid var(--line-strong); border-radius: 9px 9px 0 0; background: var(--col-head); padding: 7px 9px 6px; text-align: left; cursor: pointer; display: flex; flex-direction: column; min-width: 0; }
.colh:hover { background: var(--col-head-hover); }
.mx { margin: 5px; min-width: 0; min-height: 60px; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 5px 8px; border-radius: 8px; cursor: pointer; text-align: left; }
.mx:hover { border-color: var(--accent) !important; }

/* devices */
.devgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.plugs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 10px; }
.dev { width: 100%; display: flex; flex-direction: column; gap: 6px; padding: 9px 10px; border-radius: 10px; background: var(--tile); text-align: left; }
button.dev { cursor: pointer; }
button.dev:hover { background: var(--chip); }
.quad { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.apcard { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--chip); }

/* measured appliances */
.aprow { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 2.1fr) repeat(3, minmax(0, .75fr)) minmax(0, 1.5fr); gap: 4px 14px; align-items: center; padding: 8px 6px; border-top: 1px solid var(--line); }
.aphead { border-top: 0; padding-top: 0; font-size: 12px; font-weight: 600; color: var(--muted); }
.apl { display: none; font-size: 11.5px; color: var(--muted); }
@media (max-width: 820px) {
  .aprow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .aprow > [role="cell"]:first-child, .aprow > [role="cell"]:nth-child(2) { grid-column: 1 / -1; }
  .aphead { display: none; }
  .apl { display: block; }
}

/* history panel */
#panel {
  flex: 1 1 400px; max-width: 480px; min-width: 0; background: var(--tile); border: 1px solid var(--line); border-radius: 16px;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; position: sticky; top: 12px;
}
#panel.big {
  position: fixed; inset: 0; z-index: 1000; max-width: none; border: 0; border-radius: 0; background: var(--bg); overflow: auto;
  padding: max(14px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
}
@media (max-width: 900px) { #panel:not(.big) { position: static; max-width: none; } }
.mhead { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.chart { width: 100%; height: auto; display: block; font-family: var(--f-ui); user-select: none; -webkit-user-select: none; }
.cols-one, .cols-big { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: flex-start; }
.chart-main { flex: 1 1 100%; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.chart-side { flex: 1 1 100%; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.cols-big .chart-main { flex: 3 1 640px; }
.cols-big .chart-side { flex: 1 1 300px; }
.nav { display: flex; flex-direction: column; gap: 4px; border-top: 1px solid var(--line); padding-top: 8px; }
.sliders { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 14px; padding-left: 40px; }
.sliders label { display: flex; flex-direction: column; font-size: 12px; color: var(--muted); }
input[type="range"] { width: 100%; margin: 2px 0 0; accent-color: var(--accent); }
.legend { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 4px 12px; align-items: center; border-top: 1px solid var(--line); padding-top: 8px; font-size: 13px; }
.dbox { max-height: 260px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; }
.dgrid { width: 100%; font-size: 13px; font-variant-numeric: tabular-nums; }
.dgrid [role="row"] { display: flex; }
.dgrid [role="row"] > * { flex: 1 1 0; min-width: 0; }
.dh { position: sticky; top: 0; z-index: 1; background: var(--chip); border-bottom: 1px solid var(--line-strong); padding: 5px 8px; font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.dc { padding: 3px 8px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
.dt { text-align: left; color: var(--muted); }
.about { border-top: 1px solid var(--line); padding-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 14px; font-size: 13px; }
.dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* login */
.login { min-height: 100vh; display: grid; place-items: center; padding: 16px max(16px, env(safe-area-inset-right)) 16px max(16px, env(safe-area-inset-left)); }
.login form { width: min(100%, 360px); display: flex; flex-direction: column; gap: 12px; padding: 22px 22px 20px; }
.login label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: var(--muted); }
.login input { font: inherit; font-size: 16px; color: var(--ink); background: var(--chip); border: 1px solid var(--line-strong); border-radius: 10px; padding: 9px 11px; }
.login .go { border: 0; border-radius: 10px; padding: 10px 14px; background: var(--ink); color: var(--bg); font-weight: 700; cursor: pointer; }
.login .go:disabled { opacity: .6; cursor: default; }
.login .err { margin: 0; font-size: 13px; font-weight: 600; color: var(--txt-poor); min-height: 1.4em; }