/* Watts Where - warm paper, aubergine ink, an amber-to-ember ramp for the share of the bill, green for what a plan saves. */
:root {
  --bg: #f6f1e7; --paper: #fffdf8; --soft: #f1ebdf; --ink: #231b2e; --muted: #675d72; --line: #e0d6c5;
  --plum: #4b2a6b; --plum-ink: #fffdf8; --amber: #d99a00; --save: #2b7a57; --warn: #a65a00; --bad: #b3261e;
  --h1: #fbf0cc; --h2: #f6d68c; --h3: #efad57; --h4: #dd7038; --h5: #bb3f2b; --t-dark: #2a1d14; --t-light: #fffaf0;
  --hatch-bg: rgba(255,255,255,.35); --hatch-ln: rgba(35,27,46,.45);
  --keep: #8a8194; --trim: #2b7a57; --shift: #2f62a8; --swap: #a8327a;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; --sans: "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;
  --r: 14px;
}
:root[data-theme="dark"] {
  --bg: #15111b; --paper: #201a28; --soft: #2a2233; --ink: #f2ebdc; --muted: #ab9fb6; --line: #3a3046;
  --plum: #c9a6ef; --plum-ink: #1a1320; --amber: #f2be3a; --save: #5fcf98; --warn: #f0a85a; --bad: #ff8a80;
  --h1: #3b3326; --h2: #5d4523; --h3: #87531f; --h4: #a3461f; --h5: #c03a2a; --t-dark: #f8efe0; --t-light: #fff7ea;
  --hatch-bg: rgba(0,0,0,.18); --hatch-ln: rgba(255,240,220,.5);
  --keep: #9d93a8; --trim: #5fcf98; --shift: #7fb0f5; --swap: #f08cc8;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.5 var(--sans); }
a { color: var(--plum); }
code { font-family: var(--mono); font-size: .86em; background: var(--soft); padding: 1px 4px; border-radius: 4px; }
.hidden { display: none !important; }
.small { font-size: .86rem; } .muted { color: var(--muted); } .mono { font-family: var(--mono); } .warn { color: var(--warn); }
h1, h2, h3 { line-height: 1.2; }
h2 { font-size: 1.2rem; margin: 0 0 10px; } h3 { font-size: 1rem; margin: 16px 0 8px; }

/* header */
.bar { display: flex; align-items: center; gap: 14px; padding: 10px 20px; background: var(--paper); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
.back { color: var(--muted); text-decoration: none; font-size: .9rem; white-space: nowrap; }
.brand { display: flex; align-items: center; gap: 8px; font-size: 1.05rem; }
.logo { width: 28px; height: 28px; }
.lg-roof { fill: none; stroke: var(--plum); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.lg-wall { fill: var(--h2); stroke: var(--plum); stroke-width: 2; }
.lg-bolt { fill: var(--h5); }
.session { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.pill { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); border-radius: 999px; padding: 5px 13px; font: inherit; font-size: .88rem; cursor: pointer; text-decoration: none; white-space: nowrap; }
.pill:hover { border-color: var(--plum); }
.pill.solid { background: var(--plum); color: var(--plum-ink); border-color: var(--plum); }
.pill.ghost { cursor: default; background: var(--soft); }
.pill.tiny { padding: 1px 9px; font-size: .76rem; }
.pill.big { padding: 10px 22px; font-size: 1rem; font-weight: 600; }
.pill:disabled { opacity: .5; cursor: not-allowed; }

/* layout */
.wrap { max-width: 1160px; margin: 0 auto; padding: 18px 20px 40px; }
.hero { padding: 18px 2px 8px; }
.kicker { font-family: var(--mono); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--warn); margin: 0 0 6px; }
.hero h1 { font-size: clamp(1.8rem, 4.4vw, 2.8rem); margin: 0 0 10px; letter-spacing: -.01em; }
.hero h1 em { font-style: normal; background: linear-gradient(transparent 62%, var(--h2) 62%); }
.lede { max-width: 760px; color: var(--muted); margin: 0 0 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chips-label { font-size: .86rem; color: var(--muted); }
.chip { border: 1px dashed var(--plum); background: transparent; color: var(--plum); border-radius: 999px; padding: 4px 12px; font: inherit; font-size: .86rem; cursor: pointer; }
.chip.on { background: var(--plum); color: var(--plum-ink); border-style: solid; }
.two { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; margin-top: 14px; }
.sheet { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; margin-top: 16px; min-width: 0; }
.two .sheet { margin-top: 0; }
.stepno { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--amber); color: #231b2e; font-size: .8rem; font-weight: 700; margin-right: 6px; vertical-align: 2px; }

/* inputs */
textarea, input[type="text"], select { width: 100%; font: inherit; font-size: .95rem; color: var(--ink); background: var(--soft); border: 1px solid var(--line); border-radius: 9px; padding: 7px 9px; }
textarea { resize: vertical; font-family: var(--mono); font-size: .86rem; line-height: 1.45; }
textarea:focus, input:focus, select:focus { outline: 2px solid var(--amber); outline-offset: 1px; }
.drop { border: 1px dashed transparent; border-radius: 10px; }
.drop.over { border-color: var(--amber); background: var(--soft); }
.drop-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.filebtn { font-size: .86rem; color: var(--plum); text-decoration: underline; cursor: pointer; }
.filebtn input { display: none; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
.f { display: flex; flex-direction: column; gap: 3px; font-size: .84rem; color: var(--muted); min-width: 0; }
.f.wide, .tou.wide { grid-column: 1 / -1; }
.opt { font-size: .74rem; color: var(--muted); opacity: .85; }
.tou { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px 10px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; min-width: 0; }
.tou legend { font-size: .84rem; color: var(--muted); padding: 0 4px; }
.notes { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 4px; }
.notes li { font-size: .88rem; padding: 6px 10px; border-radius: 8px; background: var(--soft); border-left: 3px solid var(--line); }
.notes li.warn { border-left-color: var(--warn); color: var(--ink); }
.notes li.bad { border-left-color: var(--bad); }
.notes li.ok { border-left-color: var(--save); }
.notes li.info { border-left-color: var(--shift); }
.notes li.none { border-left-color: var(--line); color: var(--muted); }

/* the map */
.map-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.map-top h2 { margin: 0; }
.verdict-tag { font-size: .84rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--soft); }
.verdict-tag:empty { display: none; }
.v-lean { background: color-mix(in srgb, var(--save) 18%, var(--paper)); color: var(--save); }
.v-trim { background: color-mix(in srgb, var(--amber) 22%, var(--paper)); color: var(--warn); }
.v-overhaul { background: color-mix(in srgb, var(--h5) 20%, var(--paper)); color: var(--h5); }
:root[data-theme="dark"] .v-overhaul { color: #ff9a85; }
.seggroup { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; margin-left: auto; }
.seg { border: 0; background: var(--paper); color: var(--ink); font: inherit; font-size: .84rem; padding: 5px 13px; cursor: pointer; }
.seg.on { background: var(--plum); color: var(--plum-ink); }
.housebox { margin-top: 10px; }
svg.house { width: 100%; height: auto; display: block; }
.house .roof { fill: none; stroke: var(--plum); stroke-width: 10; stroke-linejoin: round; stroke-linecap: round; }
.house .chimney { fill: var(--soft); stroke: var(--plum); stroke-width: 4; }
.house .shell { fill: var(--soft); stroke: var(--plum); stroke-width: 6; }
.house .roof-t { font-size: 30px; font-weight: 700; fill: var(--ink); font-family: var(--sans); }
.house .roof-s { font-size: 17px; fill: var(--muted); font-family: var(--sans); }
.house .room { cursor: pointer; }
.house .room:focus { outline: none; }
.house .room:focus .tile, .house .room.sel .tile { stroke: var(--plum); stroke-width: 5; }
.house .tile { stroke: var(--paper); stroke-width: 1; transition: fill .2s; }
.house .h1 .tile { fill: var(--h1); } .house .h2 .tile { fill: var(--h2); } .house .h3 .tile { fill: var(--h3); }
.house .h4 .tile { fill: var(--h4); } .house .h5 .tile { fill: var(--h5); }
.house text { font-family: var(--sans); pointer-events: none; }
.house .rn { font-weight: 700; } .house .rc { font-weight: 700; font-family: var(--mono); } .house .rk { font-size: 15px; }
.house .h1 text, .house .h2 text, .house .h3 text { fill: var(--t-dark); }
.house .h4 text, .house .h5 text { fill: var(--t-light); }
.house .hatch-bg { fill: var(--hatch-bg); } .house .hatch-ln { stroke: var(--hatch-ln); stroke-width: 3; }
.house .badge { stroke: none; } .house .badge-t { font-size: 13px; font-weight: 700; fill: #fff; text-transform: uppercase; letter-spacing: .04em; }
.house .badge.a-keep { fill: var(--keep); } .house .badge.a-trim { fill: var(--trim); } .house .badge.a-shift { fill: var(--shift); } .house .badge.a-swap { fill: var(--swap); }
:root[data-theme="dark"] .house .badge-t { fill: #15111b; }
.legend { margin: 8px 0 0; }
.key { display: inline-block; width: 16px; height: 12px; border-radius: 3px; vertical-align: -1px; margin-right: 2px; border: 1px solid var(--line); }
.key.h1 { background: var(--h1); } .key.h2 { background: var(--h2); } .key.h3 { background: var(--h3); } .key.h4 { background: var(--h4); } .key.h5 { background: var(--h5); }
.key.hatchkey { background: repeating-linear-gradient(45deg, var(--soft) 0 3px, var(--muted) 3px 5px); margin-left: 6px; }
.maptwo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 18px; }
.readflags { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.readflags li { font-size: .88rem; padding: 7px 10px; border-radius: 9px; background: var(--soft); }
.readflags .lv { display: inline-block; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 1px 7px; border-radius: 999px; background: var(--line); margin-right: 2px; }
.readflags .lv-big .lv { background: var(--h5); color: #fff; } .readflags .lv-drain .lv { background: var(--muted); color: var(--paper); }
.readflags .lv-shift .lv { background: var(--shift); color: #fff; } .readflags .lv-check .lv { background: var(--amber); color: #231b2e; }
.readflags li.ok { border-left: 3px solid var(--save); } .readflags li.none { color: var(--muted); }
.devlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-height: 520px; overflow-y: auto; padding-right: 4px; }
.dev-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-size: .9rem; }
.did { font-size: .72rem; color: var(--muted); }
.droom { font-size: .76rem; color: var(--muted); }
.dnum { margin-left: auto; font-size: .8rem; }
.track { position: relative; height: 10px; background: var(--soft); border-radius: 5px; overflow: hidden; display: flex; margin: 3px 0 2px; }
.track .run { background: var(--h3); height: 100%; }
.track .sbar { height: 100%; background: repeating-linear-gradient(45deg, var(--h2) 0 3px, var(--muted) 3px 5px); }
.dev.c-heat .run { background: var(--h5); } .dev.c-water .run { background: var(--h4); } .dev.c-cold .run { background: #3f8aa6; }
.dev.c-light .run { background: var(--amber); } .dev.c-ev .run { background: var(--shift); } .dev.c-screens .run { background: var(--plum); }
.cutmark { position: absolute; top: 0; bottom: 0; width: 3px; background: var(--save); box-shadow: 0 0 0 1px var(--paper); }
.dmeta { margin: 0; font-size: .76rem; }
.none { color: var(--muted); list-style: none; }

/* ask + progress */
.runrow { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 8px; }
.gate { background: var(--soft); border-left: 3px solid var(--amber); padding: 8px 10px; border-radius: 8px; font-size: .9rem; }
.ptitle { font-weight: 600; margin: 0 0 6px; }
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 3px; }
.step { font-size: .9rem; color: var(--muted); } .step.active { color: var(--ink); font-weight: 600; } .step.done { color: var(--save); }
.step-ic { display: inline-block; width: 14px; font-family: var(--mono); }
.raw { white-space: pre-wrap; font-size: .8rem; max-height: 320px; overflow: auto; background: var(--soft); padding: 10px; border-radius: 8px; }

/* result */
.rhead { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rhead h2 { margin: 0; }
.stamp { font-family: var(--mono); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; padding: 4px 12px; border-radius: 6px; border: 2px solid currentColor; }
.summary { font-size: 1.02rem; }
.totals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.totals:empty { display: none; }
.tot { background: var(--soft); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; }
.tot b { font-size: 1.3rem; font-family: var(--mono); color: var(--save); }
.moves { margin: 0; padding-left: 22px; display: grid; gap: 8px; }
.mv p { margin: 3px 0 0; font-size: .92rem; }
.mv-h { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.kind, .eff, .badge-h { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 8px; border-radius: 999px; color: #fff; }
.k-trim .kind, .k-unplug .kind { background: var(--trim); } .k-shift .kind { background: var(--shift); } .k-swap .kind { background: var(--swap); }
.k-unplug .kind { background: var(--muted); }
.eff { background: var(--soft); color: var(--ink); border: 1px solid var(--line); }
.save { margin-left: auto; font-size: .82rem; color: var(--save); font-weight: 600; }
:root[data-theme="dark"] .kind, :root[data-theme="dark"] .badge-h { color: #15111b; }
.cite { border: 1px solid var(--line); background: var(--paper); color: var(--ink); border-radius: 6px; font: inherit; font-size: .8rem; padding: 1px 7px; cursor: pointer; }
.cite.bad { border-color: var(--bad); color: var(--bad); text-decoration: line-through; cursor: default; }
.roomcalls { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.rc { background: var(--soft); border-radius: 10px; padding: 8px 10px; border-left: 4px solid var(--keep); }
.rc.a-trim { border-left-color: var(--trim); } .rc.a-shift { border-left-color: var(--shift); } .rc.a-swap { border-left-color: var(--swap); }
.rc p { margin: 4px 0 0; font-size: .88rem; }
.rc-h { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.badge-h.a-keep { background: var(--keep); } .badge-h.a-trim { background: var(--trim); } .badge-h.a-shift { background: var(--shift); } .badge-h.a-swap { background: var(--swap); }
.roomlink { border: 0; background: none; color: var(--plum); font: inherit; font-weight: 600; cursor: pointer; padding: 0; text-decoration: underline; }
.billcheck p { margin: 0; }
.twocol { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.checklist { padding-left: 20px; margin: 0; } .checklist li { margin: 3px 0; }
.lines { padding-left: 18px; margin: 0; } .lines li { margin: 3px 0; font-size: .92rem; }
.tools { display: flex; flex-wrap: wrap; gap: 8px; }
.hist { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.hrow { display: flex; align-items: center; gap: 8px; background: var(--soft); padding: 7px 10px; border-radius: 9px; }
.hinfo { display: flex; flex-direction: column; flex: 1; min-width: 0; }

/* footer + toasts */
.foot { max-width: 1160px; margin: 0 auto; padding: 8px 20px 40px; font-size: .84rem; color: var(--muted); }
.toasts { position: fixed; right: 16px; bottom: 16px; display: grid; gap: 6px; z-index: 20; max-width: 360px; }
.toast { background: var(--ink); color: var(--paper); padding: 9px 13px; border-radius: 10px; font-size: .86rem; transition: opacity .5s; box-shadow: 0 4px 14px rgba(0,0,0,.18); }
.toast.err { background: var(--bad); color: #fff; }
.toast a { color: inherit; font-weight: 700; }
.toast.gone { opacity: 0; }

/* docs pages */
.doc { max-width: 920px; margin: 0 auto; padding: 18px 20px 40px; }
.doc pre { background: var(--soft); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; overflow: auto; font-size: .82rem; max-width: 100%; }
.doc table { border-collapse: collapse; width: 100%; font-size: .88rem; display: block; overflow-x: auto; }
.doc th, .doc td { border: 1px solid var(--line); padding: 5px 8px; text-align: left; vertical-align: top; }
.codegroup { margin: 10px 0; }
.tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
.tab { border: 1px solid var(--line); background: var(--paper); color: var(--ink); border-radius: 6px; padding: 3px 9px; font: inherit; font-size: .8rem; cursor: pointer; }
.tab.active { background: var(--plum); color: var(--plum-ink); border-color: var(--plum); }
.panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; margin: 14px 0; }
.mask { font-family: var(--mono); overflow-wrap: anywhere; }

@media (max-width: 900px) {
  .two, .maptwo { grid-template-columns: minmax(0, 1fr); }
  .totals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .wrap { padding: 12px 16px 32px; }
  .bar { padding: 8px 12px; gap: 8px; flex-wrap: wrap; }
  .back { font-size: .8rem; }
  .sheet { padding: 14px 14px; }
  .tou { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tou label:last-child { grid-column: 1 / -1; }
  .twocol, .roomcalls { grid-template-columns: minmax(0, 1fr); }
  .seggroup { margin-left: 0; }
  .save { margin-left: 0; width: 100%; }
  .toasts { left: auto; right: 10px; bottom: 10px; max-width: 260px; }
  .toast { font-size: .78rem; padding: 7px 10px; }
  .foot { padding: 8px 16px 32px; }
}
:root[data-theme="dark"] .lg-wall { fill: var(--amber); } :root[data-theme="dark"] .lg-bolt { fill: #6b1d12; }
.readflags .lv.lv-first { background: var(--ink); color: var(--paper); margin-right: 4px; }