/* Hem — v2: som v1, plus färskhet, fel och laddläge.
   Hem — v1. En ram för allt: mörk och stram. Scenen i mitten byter innehåll efter
   läget — barnen på morgonen, vädret när det är nyheten, huset annars — aldrig
   på timer. Geist + Geist Mono. */

:root {
  --bg: #0f1114;
  --ink: #ecebe7;
  --ink-2: #a3a7ae;
  --ink-3: #6a6e76;
  --line: #2b2e34;
  --sun: #f0a53a;
  --cheap: #4cc38a;
  --rain: #5aa8e8;

  --sans: 'Geist', -apple-system, 'Helvetica Neue', sans-serif;
  --mono: 'Geist Mono', Menlo, monospace;
}

html, body {
  margin: 0;
  padding: 0;
  width: 1024px;
  height: 748px; /* iPadens yta under statusraden; en pixel till går att scrolla */
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Tid och läge */
.time { position: absolute; left: 40px; top: 24px; }

.clock {
  font-size: 112px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.045em;
  font-feature-settings: 'tnum' 1;
  margin-left: -7px;
}

.date { font-size: 24px; color: var(--ink-2); margin-top: 6px; }

.safe {
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: .02em;
  color: var(--ink-3);
  margin-top: 10px;
}

/* Vädret uppe till höger — tryck för grafen */
.wx { position: absolute; right: 40px; top: 40px; text-align: right; cursor: pointer; }
.wx-now { white-space: nowrap; }

.wx-glyph {
  display: inline-block;
  width: 58px;
  height: 58px;
  margin-right: 10px;
  vertical-align: 8px;
  color: var(--ink);
}

.wx-glyph svg { display: block; width: 58px; height: 58px; }

.wx-temp { font-size: 88px; font-weight: 300; line-height: 1; letter-spacing: -0.04em; }
.wx-head { font-size: 30px; font-weight: 500; letter-spacing: -0.01em; margin-top: 10px; }
.wx-sub { font-size: 20px; color: var(--ink-2); margin-top: 4px; }

/* Glyferna: solen gul, regnet blått */
.gs { stroke: var(--sun); }
.gmoon { fill: #f3d58a; stroke: none; }
.gr { stroke: var(--rain); }
.gfill { fill: var(--bg); }

/* Scenen */
.stage { position: absolute; left: 40px; top: 222px; width: 944px; height: 350px; }

.layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 944px;
  height: 350px;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 600ms ease, visibility 0s 600ms;
  transition: opacity 600ms ease, visibility 0s 600ms;
}

.layer.on {
  opacity: 1;
  visibility: visible;
  -webkit-transition: opacity 600ms ease;
  transition: opacity 600ms ease;
}

.layer svg { display: block; width: 944px; height: 350px; }

/* Ritningen */
.ln { fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.ln2 { fill: none; stroke: var(--ink-3); stroke-width: 1.2; stroke-linecap: round; }
.ln3 { fill: none; stroke: var(--line); stroke-width: 1.2; }
.dash { stroke-dasharray: 3 5; }
.pn { fill: #f7bd5c; stroke: var(--ink); stroke-width: 1.2; }
.fl { fill: none; stroke: var(--sun); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.fv { fill: var(--sun); font-family: var(--mono); font-size: 14px; font-weight: 500; letter-spacing: .02em; }
.tn { fill: var(--ink-3); font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .14em; }
.tv { fill: var(--ink); font-family: var(--sans); font-size: 18px; }
.ts { fill: var(--ink-3); font-family: var(--mono); font-size: 12px; }
.bf { fill: var(--ink-2); }
.tail { fill: none; stroke: #e0624f; stroke-width: 1.4; stroke-linejoin: round; }
.doorlight { fill: #ffd88f; fill-opacity: .22; }
.doorleaf { fill: var(--bg); }
.doorlight.open { fill-opacity: .42; } /* förrådet i 3D: bara färgen i öppningen */
/* Laddkabeln: ett rör, kanalen lyser när bilen laddar */
.cbl-o { fill: none; stroke: var(--ink-2); stroke-width: 4.2; stroke-linecap: round; stroke-linejoin: round; }
.cbl-i { fill: none; stroke: var(--bg); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cbl-i.on { stroke: var(--sun); }
/* Bilens siluett i bakgrundens färg, så att förrådet inte syns genom bilen */
.carmask * { fill: #0f1114 !important; fill-opacity: 1 !important; stroke: #0f1114 !important; stroke-opacity: 1 !important; }
.dooralert { stroke: var(--sun); }
.ts.hot { fill: var(--sun); font-weight: 500; }
.ts.sun { fill: var(--sun); }
.lock { fill: none; stroke: var(--ink-2); stroke-width: 1.4; stroke-linecap: round; }
.lock.warn { stroke: var(--sun); }
.gte { fill: none; stroke: #4aa3ff; stroke-width: 2; stroke-linecap: round; }
.cb-on { fill: var(--sun); }
.cb-ok { fill: var(--cheap); }
.led.ok { fill: var(--cheap); }
.led.on { fill: var(--sun); }
.led.idle { fill: var(--bg); stroke: var(--ink-2); stroke-width: 1.2; }
.led.off { fill: var(--bg); stroke: var(--line); stroke-width: 1.2; }

/* Vädergrafen */
.mday { fill: #ffffff; fill-opacity: .035; }
.mbase { stroke: var(--line); stroke-width: 1; }
.mrain { fill: var(--rain); }
.mrain-max { opacity: .75; }
.mrain-past { fill: var(--ink-3); }
.mtemp { fill: none; stroke-width: 3.2; stroke-linecap: round; }
.mtemp-area { fill-opacity: .05; stroke: none; }
.mtemp-past { fill: none; stroke: var(--ink-3); stroke-width: 2; stroke-linecap: round; }
.mlab { font-family: var(--mono); font-size: 16px; font-weight: 500; }
.mlab-past { fill: var(--ink-3); font-family: var(--mono); font-size: 15px; }
.mnow { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 2 4; }
.mnow-t { fill: var(--ink); font-family: var(--mono); font-size: 12px; font-weight: 500; }
.mhour { fill: var(--ink-3); font-family: var(--mono); font-size: 12px; }
.mday-t { fill: var(--ink-2); font-family: var(--mono); font-size: 12px; font-weight: 500; }
.mglyph { color: var(--ink-2); }

/* Barnen: en bild i ramen */
.window {
  position: absolute;
  top: 0;
  left: 0;
  width: 944px;
  height: 350px;
  border-radius: 14px;
  overflow: hidden;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}

#kids-scene, #kids-scene svg { position: absolute; top: 0; left: 0; width: 944px; height: 350px; }

.kid { position: absolute; }
.kid.big { left: 330px; top: 22px; width: 186px; height: 282px; }
.kid.small { left: 478px; top: 82px; width: 170px; height: 232px; }
.kid .body { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; }
.kid .body svg { display: block; width: 100%; height: 100%; }
.kid .eyes-closed { opacity: 0; }
.kid.blink .eyes-open { opacity: 0; }
.kid.blink .eyes-closed { opacity: 1; }

.kid.hop .body { -webkit-animation: hop 700ms cubic-bezier(.3, .7, .4, 1); animation: hop 700ms cubic-bezier(.3, .7, .4, 1); }

@-webkit-keyframes hop {
  0% { -webkit-transform: translateY(0) scaleY(1); }
  12% { -webkit-transform: translateY(3px) scaleY(.97); }
  42% { -webkit-transform: translateY(-18px) scaleY(1.02); }
  70% { -webkit-transform: translateY(0) scaleY(.96); }
  100% { -webkit-transform: translateY(0) scaleY(1); }
}

@keyframes hop {
  0% { transform: translateY(0) scaleY(1); }
  12% { transform: translateY(3px) scaleY(.97); }
  42% { transform: translateY(-18px) scaleY(1.02); }
  70% { transform: translateY(0) scaleY(.96); }
  100% { transform: translateY(0) scaleY(1); }
}

.kid .ripple {
  position: absolute;
  left: 20%;
  bottom: -9px;
  width: 60%;
  height: 16px;
  border: 1.5px solid rgba(207, 220, 236, .5);
  border-radius: 50%;
  opacity: 0;
}

body:not(.wet) .kid .ripple { display: none; }
.kid.hop .ripple { -webkit-animation: ripple 900ms 440ms ease-out; animation: ripple 900ms 440ms ease-out; }

@-webkit-keyframes ripple {
  0% { opacity: .9; -webkit-transform: scale(.5); }
  100% { opacity: 0; -webkit-transform: scale(1.5); }
}

@keyframes ripple {
  0% { opacity: .9; transform: scale(.5); }
  100% { opacity: 0; transform: scale(1.5); }
}

/* Meningen under scenen */
.caption {
  position: absolute;
  left: 40px;
  top: 584px;
  width: 944px;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* Nedre bandet */
.bottom {
  position: absolute;
  left: 40px;
  top: 630px;
  width: 944px;
  height: 104px;
  border-top: 1px solid var(--line);
}

.cell { position: absolute; top: 16px; }
.cell.inne { left: 0; width: 150px; }
.cell.varme { left: 166px; width: 180px; }
.cell.elen { left: 362px; width: 180px; }
.cell.inne, .cell.varme { cursor: pointer; }

.label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.value { font-size: 40px; font-weight: 300; line-height: 1.1; letter-spacing: -0.03em; margin-top: 6px; white-space: nowrap; }
.value .unit { font-size: 17px; letter-spacing: 0; margin-left: 5px; color: var(--ink-2); }
.sub { font-size: 15px; color: var(--ink-2); margin-top: 4px; white-space: nowrap; }

.strip { position: absolute; left: 556px; top: 16px; width: 388px; height: 84px; }
.strip svg { display: block; }

/* Elpriset */
.b0 { fill: var(--line); }
.b1 { fill: #6f737b; }
.b2 { fill: var(--ink); }
.b3 { fill: var(--cheap); }
.tk { fill: var(--ink-3); font-family: var(--mono); font-size: 11px; }
.bl { fill: var(--cheap); font-family: var(--mono); font-size: 12px; font-weight: 500; }

/* Vädret som avgångar (barnläget) */
.shour { fill: var(--ink-3); font-family: var(--mono); font-size: 11px; font-weight: 500; }
.sglyph { color: var(--ink-2); }
.stemp { font-family: var(--sans); font-size: 20px; font-weight: 300; letter-spacing: -0.02em; }
.sbar { fill: var(--line); }
.srain { fill: var(--rain); }

/* ---- Färskhet, fel och laddning ---- */

/* Värden tonas fram när datan kommer. */
.fade { -webkit-transition: opacity 500ms ease; transition: opacity 500ms ease; }
.pre .fade { opacity: 0; -webkit-transition: none; transition: none; }

/* Platshållare medan inget har kommit. Stilla — ingen skimmer. */
.sk { display: inline-block; background: var(--line); border-radius: 6px; vertical-align: middle; }
/* Spökvyerna: grafens och dagarnas form utan data (startar, eller ingen kontakt och inget sparat) */
.mghost { fill: var(--line); }
.mghost-line { fill: none; stroke: var(--line); stroke-width: 3; stroke-linecap: round; }
.mghost-fill { fill: #ffffff; fill-opacity: .025; }

/* Ritningen som tom förlaga */
.layer.blueprint { opacity: .35; }

/* Det som saknas: strecket och meningen om varför */
.missing { color: var(--ink-3); }
.why { color: var(--ink-3); font-family: var(--mono); font-size: 12px; letter-spacing: .01em; }

/* Läget uppe till vänster: tyst som vanligt, syns när man behöver göra något,
   orange pill när det är en varning (larmet på, eller natt). */
.safe.notice, .safe.alert {
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-top: 10px;
}
.safe.notice { color: var(--ink); }
.safe.notice .also { color: var(--ink-3); font-weight: 400; }
.safe.alert {
  display: inline-block;
  color: #1b1307;
  background: var(--sun);
  padding: 4px 14px 5px;
  border-radius: 20px;
}
.safe.alert .also { display: none; }
.safe .si { width: 22px; height: 22px; vertical-align: -4px; margin-right: 8px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.safe .more { opacity: .7; }
.safe.off { color: var(--ink-2); }
.safe .dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: 1px;
  background: currentColor;
}

/* Bandet nertill när grafen inte kan ritas */
.strip-msg {
  position: absolute;
  left: 0;
  top: 0;
  width: 388px;
  height: 66px;
  border-bottom: 1px dashed var(--line);
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 66px;
  text-align: center;
}

/* Tåligare väder och pris */
.mzero { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 1 4; }
.mzero-t { fill: var(--ink-3); font-family: var(--mono); font-size: 11px; }
.mmax-t { fill: var(--rain); font-family: var(--mono); font-size: 12px; font-weight: 500; }
.msnow { fill: #dde9fb; }
.msleet { fill: #9cc4ee; }
.gt { stroke: var(--sun); }
.bneg { fill: var(--cheap); }
.pzero { stroke: var(--ink-3); stroke-width: 1; }

/* Vind */
.mwind { fill: none; stroke: var(--ink-3); stroke-linecap: round; stroke-linejoin: round; }
.mwind.strong { stroke: var(--sun); }
.mwind-dot { fill: var(--ink-3); }
.mwind-t { fill: var(--sun); font-family: var(--mono); font-size: 11px; font-weight: 500; }

/* Vindpust över barnens himmel: sveper förbi, sedan stilla. */
.gust {
  position: absolute;
  top: 0;
  left: 0;
  width: 944px;
  height: 350px;
  opacity: 0;
  pointer-events: none;
}

.gust svg { display: block; width: 944px; height: 350px; }
.gust.blow { -webkit-animation: gust 2600ms ease-in-out; animation: gust 2600ms ease-in-out; }

@-webkit-keyframes gust {
  0% { opacity: 0; -webkit-transform: translateX(-320px); }
  25% { opacity: 1; }
  75% { opacity: 1; }
  100% { opacity: 0; -webkit-transform: translateX(760px); }
}

@keyframes gust {
  0% { opacity: 0; transform: translateX(-320px); }
  25% { opacity: 1; }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translateX(760px); }
}

/* Vädergrafen går att dra i sidled */
/* Scrollytan går kant till kant (1024); innehållet börjar vid marginalen. */
.mscroll {
  position: absolute;
  top: 0;
  left: -40px;
  width: 1024px;
  height: 350px;
  overflow-x: scroll;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch; /* momentum på iOS 12 */
}
.mscroll::-webkit-scrollbar { display: none; }
/* iOS 12 ritar ett momentum-scrollat lager på fel ställe (för långt ner) medan en förälder
   tonas ut. En vy som stänger scrollar därför vanligt, och tonas ut där den står. */
.layer:not(.on) .mscroll { -webkit-overflow-scrolling: auto; }
.mtrack { height: 350px; padding: 0 40px; }
.layer .mtrack svg { height: 350px; }
.mdayline { stroke: var(--ink-3); stroke-width: 1; stroke-opacity: .6; }

/* Kläderna som bildstöd: bild + ord */
.chip { display: inline-block; white-space: nowrap; margin-right: 26px; font-size: 22px; }
.chip svg { width: 38px; height: 38px; vertical-align: -11px; margin-right: 7px; }

/* Kronorna: ritningen som svag skiss, beloppen där sakerna står. */
.kr-ghost { position: absolute; top: 0; left: 0; width: 944px; height: 350px; opacity: .16; }
.kr { position: absolute; width: 220px; margin-left: -110px; text-align: center; }
.kr.right { margin-left: -220px; text-align: right; }
.kr-l { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .14em; color: var(--ink-3); }
.kr-v { font-size: 36px; font-weight: 300; letter-spacing: -0.02em; line-height: 1.1; margin-top: 2px; white-space: nowrap; }
.kr-v .u { font-size: 17px; color: var(--ink-2); margin-left: 4px; letter-spacing: 0; }
.kr-v.plus { color: var(--cheap); }
.kr-v.sun { color: var(--sun); }
.kr-s { font-size: 14px; color: var(--ink-2); margin-top: 2px; white-space: nowrap; }
.kr-m { font-family: var(--mono); font-size: 12px; color: var(--ink-3); margin-top: 3px; white-space: nowrap; }
.kr-empty { position: absolute; left: 0; top: 150px; width: 944px; text-align: center; color: var(--ink-3); font-size: 18px; }
.plus { color: var(--cheap); }

.close {
  position: absolute;
  right: 0;
  top: 0;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 22px;
  background: rgba(255, 255, 255, .08);
  color: var(--ink);
  font: 400 20px var(--sans);
  line-height: 44px;
  -webkit-appearance: none;
}

.kr.left { margin-left: 0; text-align: left; }
/* Varmt i förrådet: förrådets linjer orange */
#g-forrad.hot [stroke]:not([stroke="none"]) { stroke: var(--sun); }

/* Bilens batteri: procent bredvid ikonen */
.cbt { fill: var(--ink); font-family: var(--sans); font-size: 17px; }
.cbt.ok { fill: var(--cheap); }

/* Värmen ovanifrån */
#varme-plan, #varme-plan svg { position: absolute; top: 0; left: 0; width: 944px; height: 350px; overflow: visible; }
.pn-name { fill: var(--ink-2); font-family: var(--mono); font-size: 11px; letter-spacing: .06em; }
.pn-name.dim { fill: var(--ink-3); }
.pn-temp { fill: var(--ink); font-family: var(--sans); font-size: 22px; font-weight: 300; }
.pn-floor { fill: var(--ink-3); font-family: var(--mono); font-size: 11px; }
.pn-floor.on { fill: var(--sun); }

/* Dörrblad i planritningarna (i filens enheter, cm) */
.pdoor { fill: none; stroke: var(--ink); stroke-width: 9; stroke-linecap: round; }
.pdoor.warn { stroke: var(--sun); }

/* Elkostnaden */
.kmon { fill: var(--ink-2); font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .14em; }
.kbar { fill: #6f737b; }
.kbar.plus { fill: var(--cheap); }
.kline { fill: none; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.klast { fill: none; stroke: var(--ink-3); stroke-width: 1.5; stroke-dasharray: 1 5; stroke-linecap: round; }
.klast-t { fill: var(--ink-3); font-family: var(--mono); font-size: 12px; }
.ksum { font-family: var(--mono); font-size: 15px; font-weight: 500; }
.ksum.now { font-family: var(--sans); font-size: 30px; font-weight: 300; letter-spacing: -0.02em; }
.cell.elen, .strip { cursor: pointer; }

.clock { cursor: pointer; }

/* Bilens laddning */
/* Rubriken ligger still ovanpå tidslinjen och släpper igenom fingret. */
#bil-head { position: absolute; top: 0; left: 0; width: 944px; pointer-events: none; }
.lad-head { position: absolute; left: 0; top: 10px; font-size: 30px; font-weight: 500; letter-spacing: -0.01em; white-space: nowrap; }
.lad-sub { position: absolute; left: 0; top: 54px; font-size: 18px; color: var(--ink-2); white-space: nowrap; }
.lad-hist { position: absolute; right: 0; top: 10px; text-align: right; font-family: var(--mono); font-size: 13px; line-height: 1.55; color: var(--ink-2); z-index: 1; }
.lad-hist .label { margin-bottom: 4px; }
.lgot { fill: var(--sun); }
.lgot.ok { fill: var(--cheap); }
.lplan { fill: var(--sun); fill-opacity: .45; }
.lmark { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 2 4; fill: none; }
.lmark.now { stroke: var(--ink); stroke-dasharray: none; }
.lmark-t { fill: var(--ink-3); font-family: var(--mono); font-size: 12px; }
.lmark.now-t, .now-t { fill: var(--ink); font-family: var(--mono); font-size: 12px; font-weight: 500; }
.lrun { fill: var(--sun); font-family: var(--mono); font-size: 13px; font-weight: 500; }
.lrun.ok { fill: var(--cheap); }

.lprice { font-family: var(--mono); font-size: 13px; font-weight: 500; }

/* Klimat och uppvärmning: en SVG per månad i rad */
.mrow { height: 350px; box-sizing: border-box; }
.mrow:after { content: ''; display: block; clear: both; }
.msvg { display: block; float: left; overflow: visible; }
.kstat { fill: var(--ink-3); font-family: var(--mono); font-size: 12px; }
.ktgt { fill: none; stroke: var(--ink-3); stroke-width: 1.2; stroke-dasharray: 4 4; }
.hbar { fill: #3d4c60; }
.hbar.wet { fill: var(--rain); fill-opacity: .7; }
.ubar { fill: var(--sun); fill-opacity: .75; }
.kline.warm { stroke: var(--sun); }
.ksum.warm { fill: var(--sun); }
.udot { fill: var(--sun); }

/* Raden i barnbilden: när barnen visas av sig själva (tryck → panelen) */
/* Ta med: det dagen kan kräva senare (regnkläder, solkräm, vattenflaskan). Uppe till vänster i bilden. */
.take {
  position: absolute;
  left: 12px;
  top: 12px;
  padding: 7px 16px 8px 14px;
  border-radius: 20px;
  background: rgba(15, 17, 20, .62);
  color: var(--ink);
  font-size: 17px;
  white-space: nowrap;
}
.take:empty { display: none; }
.take-l { color: var(--ink-2); margin-right: 12px; }
.take .chip { font-size: 17px; margin-right: 16px; }
.take .chip:last-child { margin-right: 0; }
.take .chip svg { display: inline-block; width: 28px; height: 28px; vertical-align: -8px; margin-right: 5px; } /* .layer svg gör annars block */

.when {
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 6px 14px 7px;
  border-radius: 16px;
  background: rgba(15, 17, 20, .62);
  color: var(--ink);
  font-size: 15px;
  cursor: pointer;
}

/* Panelen för barnens tider */
#inst { position: absolute; left: 40px; top: 36px; width: 944px; height: 690px; }
.tp-head { font-size: 30px; font-weight: 500; letter-spacing: -0.01em; }
.tp-sub { font-size: 17px; color: var(--ink-2); margin-top: 6px; }
.tp button {
  -webkit-appearance: none;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-2);
  font: 400 18px var(--sans);
  padding: 9px 18px;
  border-radius: 22px;
  margin: 0;
}
.tp button.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.tp .tp-done { position: absolute; right: 0; top: 0; z-index: 2; background: var(--cheap); border-color: var(--cheap); color: #08130d; font-weight: 500; padding: 10px 26px; }
.tp-seg { margin-top: 22px; }
.tp-seg button { margin-right: 10px !important; }
.tp-rows { margin-top: 26px; }
.tp-row { height: 62px; white-space: nowrap; }
.tp-name { display: inline-block; width: 230px; font-size: 22px; color: var(--ink); vertical-align: middle; text-align: left; }
.tp button.tp-name { width: auto; min-width: 190px; margin-right: 40px; font-size: 20px; }
.tp-dash { display: inline-block; width: 30px; text-align: center; color: var(--ink-3); font-size: 22px; vertical-align: middle; }
.tp-none { color: var(--ink-3); font-size: 18px; vertical-align: middle; }
.tp input[type="time"], .tp select.tsel {
  -webkit-appearance: none;
  box-sizing: border-box;
  width: 150px;
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #1a1d22;
  color: var(--ink);
  font: 300 26px var(--sans);
  vertical-align: middle;
}
.tp-cols { display: grid; grid-template-columns: repeat(7, 1fr); grid-column-gap: 10px; }
.tp-col { text-align: center; }
.tp-col button { width: 100%; padding: 8px 0 !important; text-transform: capitalize; }
.tp-col input[type="time"], .tp-col select.tsel { width: 100% !important; margin-top: 10px; font-size: 22px !important; padding: 0 8px !important; }
.tp select.tsel { text-align: center; text-align-last: center; }
.tp-col .tp-none { display: block; margin-top: 22px; }

/* Statusraden går att trycka på; tysta system nämns i orange. */
.safe { cursor: pointer; }
/* Ladda om: när appen inte kommit igång, eller när internet eller prognosen saknas. Till höger på
   raden under grafen, som då är tom. */
.recover { -webkit-appearance: none; position: absolute; right: 40px; top: 580px; z-index: 5; padding: 7px 16px; border: 1px solid var(--line); border-radius: 18px;
  background: transparent; color: var(--ink-2); font: 400 15px var(--sans); cursor: pointer; }
.recover[hidden] { display: none; }
.sysnote { color: var(--sun); }

/* Inställningarna tar hela skärmen: rubrik, meny till vänster, en del i taget till höger */
/* Rullgardinen: sidan ligger ovanför skärmen och glider ner. */
.page {
  position: absolute;
  left: 0;
  top: 0;
  width: 1024px;
  height: 748px;
  background: var(--bg);
  z-index: 20;
  visibility: hidden;
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
  -webkit-transition: -webkit-transform 380ms cubic-bezier(.2, .8, .2, 1), visibility 0s 380ms;
  transition: transform 380ms cubic-bezier(.2, .8, .2, 1), visibility 0s 380ms;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .6);
}
.page.on {
  visibility: visible;
  -webkit-transform: translateY(0);
  transform: translateY(0);
  -webkit-transition: -webkit-transform 380ms cubic-bezier(.2, .8, .2, 1);
  transition: transform 380ms cubic-bezier(.2, .8, .2, 1);
}
/* Handtaget: en liten list, med en större yta att träffa. */
.grabber { position: absolute; left: 432px; top: 0; width: 160px; height: 30px; z-index: 15; cursor: pointer; }
.grabber span { position: absolute; left: 58px; top: 8px; width: 44px; height: 5px; border-radius: 3px; background: var(--ink-3); }
/* Handtaget överst blir en knapp "Inställningar" när någon nyss rört skärmen eller öppnat
   appen, och krymper tillbaka efter några sekunder: så går det inte att missa var
   inställningarna finns. Ingen rörelse på vaktens nivå 2. */
#grabber span { box-sizing: border-box; overflow: hidden; white-space: nowrap; text-align: center;
  -webkit-transition: left 320ms cubic-bezier(.2, .8, .2, 1), top 320ms cubic-bezier(.2, .8, .2, 1), width 320ms cubic-bezier(.2, .8, .2, 1), height 320ms cubic-bezier(.2, .8, .2, 1), border-radius 320ms, background-color 320ms;
  transition: left 320ms cubic-bezier(.2, .8, .2, 1), top 320ms cubic-bezier(.2, .8, .2, 1), width 320ms cubic-bezier(.2, .8, .2, 1), height 320ms cubic-bezier(.2, .8, .2, 1), border-radius 320ms, background-color 320ms; }
#grabber span b { display: block; font: 500 15px/34px var(--sans); color: var(--ink); opacity: 0; -webkit-transition: opacity 160ms; transition: opacity 160ms; }
#grabber.big span { left: 10px; top: 8px; width: 140px; height: 36px; border-radius: 18px; background: #1a1d22; border: 1px solid var(--line); }
#grabber.big span b { opacity: 1; -webkit-transition: opacity 200ms 140ms; transition: opacity 200ms 140ms; }
.lvl-2 #grabber span, .lvl-2 #grabber span b { -webkit-transition: none; transition: none; }
.grabber.up { top: auto; bottom: 0; }
.grabber.up span { top: auto; bottom: 10px; }
.tp-unit { font-size: 15px; color: var(--ink-2); margin-left: 4px; }
.inst-title { font-size: 46px; font-weight: 300; letter-spacing: -0.03em; line-height: 1.1; }
.inst-menu { position: absolute; left: 0; top: 104px; width: 184px; }
.inst-about { position: absolute; left: 0; bottom: 4px; width: 184px; font-size: 14px; line-height: 1.5; color: var(--ink-3); }
/* Språket: ovanför namnet och versionen */
.inst-lang { position: absolute; left: 0; bottom: 84px; width: 184px; }
.tp select.lang-sel { -webkit-appearance: none; box-sizing: border-box; width: 184px; height: 36px; padding: 0 12px; border: 1px solid var(--line);
  border-radius: 10px; background: #1a1d22; color: var(--ink-2); font: 400 15px var(--sans); }
.tp .about-reload { border: 0; padding: 0; margin-top: 4px; font-size: 14px; color: var(--ink-2); text-decoration: underline; border-radius: 0; }
.tp .inst-menu button { display: block; width: 100%; text-align: left; margin: 0 0 10px; padding: 12px 20px; font-size: 20px; }
.inst-body { position: absolute; left: 236px; top: 100px; width: 708px; height: 580px; }
.inst-sec { display: none; }
.inst-sec.on { display: block; }
.inst-sec .tp-head { font-size: 30px; line-height: 44px; }
.tp-note { font-size: 15px; color: var(--ink-3); margin-top: 14px; line-height: 1.4; }
.tp-sub.bad { color: var(--sun); }
.tp-new { color: var(--cheap); }
.place-form { margin-top: 22px; }
.place-form .tp-row { height: 56px; }
.place-form .tp-name { width: 130px; font-size: 19px; }
.place-here { margin: 2px 0 0 124px; }
/* Kartan: OpenStreetMaps rutor, mörkade så att de passar resten */
.place-map { position: relative; width: 708px; height: 210px; overflow: hidden; border-radius: 12px; margin-bottom: 14px; background: #1a1d22; }
.place-map .tiles img { position: absolute; width: 256px; height: 256px; -webkit-filter: invert(1) hue-rotate(180deg) brightness(.85) contrast(.9) saturate(.4); filter: invert(1) hue-rotate(180deg) brightness(.85) contrast(.9) saturate(.4); }
.place-map .pin { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; border: 2px solid var(--bg); }
.place-map .pin.home { background: var(--cheap); }
.place-map .pin-l { position: absolute; font-size: 13px; color: var(--ink); text-shadow: 0 0 4px #000, 0 0 2px #000; white-space: nowrap; }
.place-map .osm { position: absolute; right: 6px; bottom: 4px; font-size: 10px; color: var(--ink-3); }
.place-name { font-size: 22px; vertical-align: middle; }
/* Ny version: knappen bredvid Klar och en liten notis uppe i mitten */
.tp .tp-update { position: absolute; right: 120px; top: 0; z-index: 2; border-color: var(--cheap); color: var(--cheap); padding: 10px 22px; }
.tp.has-edit .tp-update { right: 262px; }
.tp .tp-edit { position: absolute; right: 120px; top: 0; z-index: 2; padding: 10px 22px; color: var(--ink); }
.tp .tp-edit[hidden] { display: none; }
/* Nivåerna: skalan med gränser att dra */
.kl-scale { position: relative; width: 708px; height: 84px; margin: 14px 0 6px; }
.kl-seg { position: absolute; top: 34px; height: 10px; opacity: .75; }
.kl-tick { position: absolute; top: 56px; width: 40px; margin-left: -20px; text-align: center; font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.kl-stop { position: absolute; top: 25px; width: 28px; height: 28px; margin-left: -14px; border-radius: 50%; background: var(--ink); border: 3px solid var(--bg); box-sizing: border-box; cursor: ew-resize; }
.kl-stop b { position: absolute; bottom: 30px; left: 50%; width: 50px; margin-left: -25px; text-align: center; font-weight: 500; font-size: 15px; color: var(--ink); }
.klrow.edit { cursor: default; }
.tp .kl-del { position: absolute; right: 0; top: 9px; padding: 6px 14px; font-size: 15px; background: var(--bg); }
.klrow.add .kl-name { color: var(--ink-2); width: auto; }
.tp .tp-update[hidden] { display: none; }
.newver { position: absolute; left: 50%; top: 56px; z-index: 16; -webkit-transform: translateX(-50%); transform: translateX(-50%); padding: 5px 14px 6px; border-radius: 14px; border: 1px solid var(--cheap); color: var(--cheap); font-size: 14px; white-space: nowrap; cursor: pointer; display: none; }
.newver.on { display: block; }
.tp .tp-small { padding: 9px 18px; vertical-align: middle; margin-left: 6px; }
.place-hits { margin: 6px 0 0 124px; }
.tp .place-hits button { display: block; margin: 0 0 8px; text-align: left; color: var(--ink); }
.tp .tp-step { width: 48px; height: 48px; padding: 0; font-size: 24px; vertical-align: middle; }
.tp-val { display: inline-block; width: 150px; text-align: center; white-space: nowrap; font-size: 26px; font-weight: 300; vertical-align: middle; }
.tp .inst-back { border: 0; padding: 4px 0; margin-bottom: 2px; font-size: 16px; color: var(--ink-2); }
.tp .inst-go { margin-top: 14px; background: var(--ink); border-color: var(--ink); color: var(--bg); }
.inst-form { margin-top: 12px; }
.inst-form .tp-row { height: 56px; }
.inst-form .tp-name { width: 130px; font-size: 19px; }
/* Koden från statussidan (Servern): stora siffror som på statussidan */
.tp input[type="tel"][data-f="key"] { width: 240px; height: 56px; font: 500 28px var(--mono); letter-spacing: .18em; text-align: center; }
.tp input[type="email"], .tp input[type="password"], .tp input[type="text"], .tp input[type="tel"] {
  -webkit-appearance: none;
  box-sizing: border-box;
  width: 340px;
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #1a1d22;
  color: var(--ink);
  font: 400 18px var(--sans);
  vertical-align: middle;
}

/* Systemen som lista: läge, namn och vad de ger, senast */
.sysrow { position: relative; height: 54px; padding-left: 30px; border-bottom: 1px solid var(--line); white-space: nowrap; overflow: hidden; cursor: pointer; }
.sys-dot { position: absolute; left: 3px; top: 15px; width: 11px; height: 11px; border-radius: 50%; background: var(--cheap); }
.sysrow.bad .sys-dot { background: var(--sun); }
.sysrow.na .sys-dot { background: transparent; border: 1.5px solid var(--ink-3); width: 8px; height: 8px; }
.sys-name { display: block; font-size: 21px; font-weight: 500; line-height: 1.3; margin-top: 5px; }
.sysrow.na .sys-name { color: var(--ink-2); font-weight: 400; }
.sys-what { display: block; font-size: 15px; color: var(--ink-3); line-height: 1.3; }
.sys-st { position: absolute; right: 0; top: 10px; font-family: var(--mono); font-size: 14px; color: var(--ink-2); }
.sysrow.bad .sys-st { color: var(--sun); }
.sysrow.na .sys-st { color: var(--ink-3); }
/* Exempeldata (steg 0): en grå punkt, texten nedtonad */
.sysrow.fake .sys-dot { background: var(--ink-3); }
.sysrow.fake .sys-st { color: var(--ink-3); }
/* Strecken skiljer rader åt; efter den sista behövs inget. */
.sysrow:last-child, .klrow:last-child { border-bottom: 0; }
/* Systemen i två grupper efter planen (Gratis, Plus) */
.sys-group { position: relative; margin-top: 10px; height: 28px; line-height: 28px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.sys-plan { position: absolute; right: 0; top: 0; font: 400 14px var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink-2); }
.tp button.sys-plan { border: 0; padding: 0; border-radius: 0; font: 500 15px var(--sans); line-height: 28px; color: var(--cheap); }
/* Ingår i Plus (planen är Gratis): som inte inkopplat */
.sysrow.lock .sys-dot { background: transparent; border: 1.5px solid var(--ink-3); width: 8px; height: 8px; }
.sysrow.lock .sys-name { color: var(--ink-2); font-weight: 400; }
.sysrow.lock .sys-st { color: var(--ink-3); }

/* Konto: som prissidan, Grunden (gratis, grön) och Tillägg (när du vill, gula punkter).
   Prov-knapparna (det kontot och mobilen ska göra) streckade. */
.plans { display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 16px; margin-top: 18px; }
.plan { position: relative; box-sizing: border-box; min-height: 262px; padding: 20px 22px; border-radius: 16px; background: #16181c; }
.plan.free { background: #16181c -webkit-linear-gradient(-45deg, rgba(76, 195, 138, .10), rgba(76, 195, 138, 0) 55%); background: #16181c linear-gradient(135deg, rgba(76, 195, 138, .10), rgba(76, 195, 138, 0) 55%); }
.plan-name { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.plan-what { font-size: 30px; font-weight: 300; letter-spacing: -0.02em; margin-top: 8px; }
.plan.free .plan-what { color: var(--cheap); }
ul.plan-list { list-style: none; margin: 12px 0 0; padding: 0; font-size: 15px; line-height: 1.4; color: var(--ink-2); }
ul.plan-list li { position: relative; padding-left: 18px; margin-top: 8px; }
ul.plan-list li:before { content: ''; position: absolute; left: 0; top: 7px; width: 7px; height: 7px; border-radius: 2px; background: var(--cheap); }
ul.plan-list li.t:before { background: var(--sun); }
.plan-foot { font-size: 13px; line-height: 1.4; color: var(--ink-3); margin-top: 14px; }
.acct-row { margin-top: 16px; }
.acct-st { font-size: 20px; color: var(--ink-2); vertical-align: middle; margin-right: 10px; }
.acct-add { margin-top: 4px; font-size: 15px; line-height: 1.4; color: var(--ink-3); }
.tp button.acct-link { border: 0; padding: 0; border-radius: 0; font-size: 15px; color: var(--cheap); vertical-align: baseline; }
.tp .tp-small.drop { display: block; margin: 18px 0 0; }
.tp .tp-small.area { margin: 0 8px 0 0; min-width: 64px; }
.acct-code { margin: 34px 0 4px; font-family: var(--mono); font-size: 64px; font-weight: 500; letter-spacing: .1em; color: var(--ink); }
.tp .inst-go.prov, .tp .tp-small.prov { background: transparent; border: 1px dashed var(--ink-3); color: var(--ink-2); }
/* Logga in med mobilen: QR-koden (vit, för kameran) och koden som mobilen också visar */
.pair { display: flex; align-items: center; margin-top: 20px; }
.pair-qr { flex: none; width: 216px; height: 216px; border-radius: 8px; background: #fff; overflow: hidden; }
.pair-qr.wait { background: #1a1d22; }
.pair-qr svg { display: block; width: 100%; height: 100%; }
.pair-text { margin-left: 32px; }
.pair-how { font-size: 24px; font-weight: 400; color: var(--ink); }
.pair-sub { font-size: 15px; color: var(--ink-3); margin-top: 12px; }
.pair .acct-code { margin: 2px 0 0; font-size: 52px; line-height: 1.1; }
.pair .tp-small { margin: 10px 0 0; }

/* Kläderna: en rad per väder; tryck för att kryssa i plaggen */
.kl-rows { margin-top: 10px; }
.klrow { position: relative; height: 51px; line-height: 51px; border-bottom: 1px solid var(--line); white-space: nowrap; overflow: hidden; cursor: pointer; }
.kl-name { display: inline-block; width: 176px; font-size: 18px; font-weight: 500; vertical-align: middle; }
.kl-chip { display: inline-block; margin-right: 12px; font-size: 14px; color: var(--ink-2); vertical-align: middle; line-height: 1; }
.kl-chip svg { width: 28px; height: 28px; vertical-align: -9px; margin-right: 3px; }
.kl-go { position: absolute; right: 0; top: 0; padding-left: 16px; background: var(--bg); color: var(--ink-3); font-family: var(--mono); }
.kl-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-column-gap: 10px; grid-row-gap: 10px; margin-top: 20px; }
.tp button.kl-tog { text-align: left; padding: 9px 12px; border-radius: 14px; font-size: 17px; color: var(--ink-3); white-space: nowrap; }
.tp button.kl-tog svg { width: 36px; height: 36px; vertical-align: -12px; margin-right: 8px; pointer-events: none; opacity: .35; }
.tp button.kl-tog.on { background: #20242b; border-color: var(--ink-2); color: var(--ink); }
.tp button.kl-tog.on svg { opacity: 1; }

/* Rubriken ovanpå en tidslinje: ligger still och släpper igenom fingret. */
.lad-overlay { position: absolute; top: 0; left: 0; width: 944px; pointer-events: none; }
/* Elpriset över tid */
.ebest { fill: var(--cheap); }
/* Batteriet */
.bchg { fill: var(--cheap); fill-opacity: .8; }
.bdis { fill: var(--sun); fill-opacity: .8; }
.bearn { fill: var(--cheap); font-family: var(--mono); font-size: 13px; font-weight: 500; }
/* Rummen: golvvärmen */
.kfloor { fill: none; stroke: var(--sun); stroke-width: 1.5; stroke-dasharray: 4 3; }
/* Planritningens rum går att trycka på, även utan färg; texterna släpper igenom. */
#varme-plan [id*="-rum-"] { pointer-events: fill; cursor: pointer; }
#plan-top { pointer-events: none; }