/* GC — lokal reset för Gravio-kopian.
   Tailwind körs med preflight AV (annars skulle den skriva om gamla designen),
   så appens egna element-regler i styles.css följer med in i hans skal: knappar
   får ram och platta, länkar blir understrukna. Här nollas de — men bara inne i
   .gc-root, och genom :where() så att specificiteten är noll. Varje
   Tailwind-klass vinner alltså över reglerna nedan, precis som i hans fil. */
/* text-align ÄR INTE med här. UA-defaulten på button är center, och hans
   knappar bär ingen text-align-utility — de förlitar sig på den. Ärvd
   text-align gav 'start' och sköt texten mot vänsterkanten i varje
   fullbreddsknapp. Samma klass av fel som border-style: resetten tog med sig
   en UA-default som hans markup byggde på. Övriga egenskaper nedan strippar
   gamla appens knappkrom (ram, platta, padding) och ska vara kvar. */
:where(.gc-root) :where(button){appearance:none;-webkit-appearance:none;background:none;border:0;border-radius:0;padding:0;margin:0;color:inherit;font:inherit;line-height:inherit;letter-spacing:inherit;box-shadow:none;cursor:pointer}
:where(.gc-root) :where(button:disabled){cursor:default;opacity:1}
:where(.gc-root) :where(button:hover,button:focus){background:none;box-shadow:none;transform:none}
:where(.gc-root) :where(a){color:inherit;text-decoration:none;background:none}
:where(.gc-root) :where(a:hover){color:inherit;text-decoration:none}
:where(.gc-root) :where(p,h1,h2,h3,h4,ul,ol,figure){margin:0;padding:0}
:where(.gc-root) :where(ul,ol){list-style:none}
:where(.gc-root) :where(input,select,textarea){font:inherit;color:inherit}
:where(.gc-root) :where(svg){display:block}
/* Oportade vyer renderas i sin gamla form och behöver appens egen typografi. */
.gc-root .gc-legacy{font-family:Geist,system-ui,sans-serif}

/* ---- Preflight-ersättning (2026-08-16) --------------------------------
   Tailwind körs med preflight AV. Preflight sätter två saker som HELA hans
   ramverkslinje bygger på: border-style:solid på allt, och border:0 på
   formulärfält. Utan dem gäller UA-defaulten border-style:none — och en
   bredd utan stil ritar ingenting. Tailwinds `border`/`border-b-2` sätter
   BARA bredd, aldrig stil, så varje ram i nya designen försvann: kortens
   kanter, linjen under flikraden, den blå markören under aktiv flik,
   segmentknapparnas ramar. Bara border-dashed syntes, för den utilityn
   sätter stilen själv.
   Åt andra hållet slog UA igenom på fälten: namn-inputen fick 2px inset
   grå fasad ram i stället för hans ramlösa rubrik.
   :where() ger noll specificitet — varje Tailwind-klass vinner över detta.
   .gc-legacy undantas: de oportade vyerna bär appens egna border-regler. */
:where(.gc-root :not(.gc-legacy,.gc-legacy *)){border-width:0;border-style:solid;border-color:#334155}
:where(.gc-root :not(.gc-legacy,.gc-legacy *))::before,
:where(.gc-root :not(.gc-legacy,.gc-legacy *))::after{border-width:0;border-style:solid;border-color:#334155}
:where(.gc-root :not(.gc-legacy,.gc-legacy *)) :where(input,select,textarea,button){background-color:transparent;background-image:none}
:where(.gc-root) :where(input[type=range]){background:0 0;border:0}

/* Oportade vyer i hans 648 px-kolumn. Appens kortrubriker är byggda för en
   bredare spalt och bryter mitt i "Prognos 48 timmar" — samma regler som
   appens egen smalskärmsbrytning, här bundna till kolumnen i stället för
   till viewporten. */
.gc-root .gc-legacy .schema-head{flex-wrap:wrap;row-gap:6px;padding:14px 16px}
.gc-root .gc-legacy .schema-head h3{font-size:14px}
.gc-root .gc-legacy .schema-head .right{width:100%;margin-left:0;justify-content:flex-start}
.gc-root .gc-legacy .schema-head .sub,.gc-root .gc-legacy .schema-cur{font-size:10.5px}
.gc-root .gc-legacy .pill,.gc-root .gc-legacy .schema-cur{white-space:nowrap}

/* Hans Schema-vy klistrar sin valda-kvart-rad mot top 0. I appen ligger den
   under vår topbar; på egen sida gäller 0. Samma fix som .cv-sticky fick. */
.coll-wrap .gc-sticky,.gc-root .gc-sticky{top:0}

/* Oportade vyer (Bil, Statistik) ritas i sin egen markup. Ett skin-försök
   här riktade sig mot .card/.ev-card/.sc-card — klasser de inte använder, så
   noll element träffades. Hellre ingen CSS än CSS som låtsas göra något. */

/* KPI-raden: sex kolumner så länge korten rymmer sitt innehåll. I en 360 px-vy
   blir varje kort 55 px medan SoC-subraden ("11,7 av 25,6 kWh") behöver 86 —
   och .truncate gömde att den klipptes. Golvet 94 px håller den hel; raden
   rullar i stället, och fyller bredden som förut när den får plats.
   Ingen mediefråga: raden bor i en 648 px-kolumn, så det är kolumnens bredd
   som avgör, inte skärmens. */
/* v318 (Lennie 14/9): inget sidsvep. Korten bryter rad i stället —
   auto-fit med golv 104 px ger 6 kolumner i 648 px-kolumnen och 3 per rad
   (två rader) på en 390 px-telefon. Batteriraden använder samma spår så
   batterikortet blir lika brett som KPI-korten. */
.gc-root .gc-kpi-row{
  grid-template-columns:repeat(auto-fit,minmax(104px,1fr));
  overflow:visible;
}

/* Vald-raden: läge + pris flyttar till egen rad när kolumnen är smalare än
   380 px. Vänstergruppen har ett hårt minimum på ~210 px (VALD + ‹ + nowrap-tid
   + › + "= NU"), så på en 320 px-skärm återstår 78 px till högergruppen — varav
   örestalet och gapen tar 69. Lägesnamnet fick 9 px och blev "T.".
   Två rader är deterministiskt: höjden är konstant PER BREDD, vilket var hela
   poängen med nowrap-fixen, och ingen text krymper till noll.
   @container kräver container-type på föräldern; brytpunkten mäts på kolumnen,
   inte på viewporten, eftersom raden bor i ett kort. */
.gc-sticky{container-type:inline-size}
@container (max-width: 379px){
}
/* Fallback för webbläsare utan container queries: samma brytning mot viewporten.
   Kolumnen är ~viewportbredden på telefon, så tröskeln stämmer där. */
@supports not (container-type: inline-size){
  @media (max-width: 400px){
    }
}

/* Avläsningspanelen i Avancerat får inte ändra HÖJD när vald kvart byts — den
   uppdateras medan fingret drar i grafen, och varje radbrytning som kommer och
   går flyttar grafen under fingret. Tre element gjorde det: nyckeltalsrutorna
   (etikett + värde i två kolumner à ~140 px), timraderna (villkorligt "timmen X"
   plus avvikelsekolumn) och timrubrikens statustext.
   Under 420 px kolumnbredd: ett nyckeltal per rad, och timraderna bryts ALLTID
   med namnet på egen rad. Då är höjden konstant per bredd i stället för att
   variera med innehållet. Två klasser i selektorn — Tailwinds utilities ligger
   senare i dokumentet och vinner annars på ordning. */
.gc-root .ga-wrap{container-type:inline-size}
@container (max-width: 419px){
  .gc-sticky .ga-kpi-grid,.gc-root .ga-kpi-grid{grid-template-columns:minmax(0,1fr)}
  .gc-root .ga-hour-row{row-gap:1px}
  .gc-root .ga-hour-row .ga-hour-name{width:100%}
}
@supports not (container-type: inline-size){
  @media (max-width: 440px){
    .gc-root .ga-kpi-grid{grid-template-columns:minmax(0,1fr)}
    .gc-root .ga-hour-row{row-gap:1px}
    .gc-root .ga-hour-row .ga-hour-name{width:100%}
  }
}

/* Ikonrutorna under hjulet (v508): hårdkodat grid-cols-2 klippte etiketterna
   på telefon — "Hemförbrukni…" och "Laddbox garag…" vid 366–390 px kolumn
   (verifieraren 21/9), eftersom ikonruta + gap + padding tar ~64 px och två
   kolumner lämnade ~108 px text mot ~125 px behov. Samma auto-fit-lösning som
   .gc-kpi-row ovan: rutorna faller till EN kolumn när två inte ryms, i stället
   för att texten ger vika. 196 px = 64 px krom + 132 px text. Ingen Tailwind-
   kolumnklass i markupen, så en enkel klass räcker mot specificiteten. */
/* Två i bredd, ALLTID (André 21/9: "bredvid varandra två och två ... sol och
   batteri, Hus och nät"). Rutorna ligger parvis i markupen, så spårantalet är
   parindelningen — inte en följd av bredden.

   Första försöket var auto-fit minmax(148px,1fr). Det styr bara minsta
   spårbredd, inte antalet, så antalet landade på 4 och 5 på vägen upp: vid 648
   px grid (fönster 924) blev det fyra spår och "sol, batteri, hus, nät" på
   SAMMA rad, och vid 764–917 px fem spår med Laster ensam på rad två
   (verifieraren 21/9). Varken 4 eller 5 delar sex jämnt, och 3 delar det jämnt
   men bryter paret hus+nät över radbrytningen — bara 2 håller ihop paren vid
   varje bredd. Tre rader om två på skrivbordet är avsikten, inte en förlust:
   rutorna blir breda och undertexten slipper radbryta.

   Ingen brytpunkt och ingen container query behövs — det är samma antal överallt. */
.cv-tile-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}

.gc-root .gco-wrap{container-type:inline-size}
/* Underordnat spår i planlistan: laddning, laster och bilar löper INUTI ett
   täckningsspann, de följer inte efter det. Indrag + hörnstreck läser som
   "samtidigt, inuti raden ovan" i stället för som nästa order i kön. */
.gc-root .gc-plan-sub{position:relative;padding-left:13px}
.gc-root .gc-plan-sub::before{content:"";position:absolute;left:4px;top:5px;width:5px;height:5px;border-left:1px solid #2b394f;border-bottom:1px solid #2b394f}
.gc-root .gc-plan-sub:first-child::before{top:0}
/* Planlistan: tid vänster, beslut i mitten, längd höger. Under 420 px
   kolumnbredd tar tid + längd en egen rad och beslutet en egen — beslutstexten
   ("Batterierna laddas från nätet", 30 tecken) får då full bredd i stället för
   att truncate:as till en tredjedel. Samma regel som avläsningspanelen: hellre
   två rader med hel text än en rad där semantiken försvinner. Två klasser i
   selektorn — Tailwinds utilities ligger senare i dokumentet. */
/* Prischipet (gc-plan-price) sist på EGEN rad i smalt läge: chip + dur är
   shrink-0 och åt annars upp hela bredden så beslutstexten truncades till
   0–6 px vid 328 px innermått (verifieraren 29/8) — etiketten får aldrig bli
   den som ger vika. Ordningen blir tid+taggar+längd / beslut / chip. */
/* Smalt läge (André 24/9): tid + NU + längd på rad 1, beslut + prischip på rad 2.
   Chipet på egen rad gav tre rader per beslut och en lista som sköt iväg.
   Beslutet får resten av bredden (100 % − chip − gap) och truncas vid behov;
   utan chip växer det till hela raden. */
@container (max-width: 419px){
  .gc-root .gc-plan-row{flex-wrap:wrap;row-gap:2px}
  .gc-root .gc-plan-row .gc-plan-what{order:3;flex:1 1 calc(100% - 8.25rem);min-width:0}
  .gc-root .gc-plan-row .gc-plan-dur{order:2;margin-left:auto}
  .gc-root .gc-plan-row .gc-plan-price{order:4;margin-left:0}
  .gc-root .gc-plan-row .gc-plan-more{order:2}
}
@supports not (container-type: inline-size){
  @media (max-width: 440px){
    .gc-root .gc-plan-row{flex-wrap:wrap;row-gap:2px}
    .gc-root .gc-plan-row .gc-plan-what{order:3;flex:1 1 calc(100% - 8.25rem);min-width:0}
    .gc-root .gc-plan-row .gc-plan-dur{order:2;margin-left:auto}
    .gc-root .gc-plan-row .gc-plan-price{order:4;margin-left:0}
    .gc-root .gc-plan-row .gc-plan-more{order:2}
  }
}

/* Planens batterikommando för valda (icke-NU) kvartar. En rad, samma yta som
   batterikorten ovan — planen är bankens, inte per enhet. */
.cv-batplan{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;margin-top:4px;padding:4px 6px;border-radius:8px;background:rgba(15,23,42,.7);font-size:9px;color:#64748b}
.cv-batplan-l{font-weight:600;text-transform:uppercase;letter-spacing:.06em}

/* Inbäddad flik (admin.html popup, ?embed=): bara innehållet, ingen header/flikrad. */
.gc-embed .gc-embed-hide{display:none!important}
.gc-embed .gc-root>div{padding-top:8px}

/* Låst huvud (André 24/9): Schema-notens sticky ligger under huvudet, inte bakom det. */
.gc-root .gc-sticky{top:112px}

/* v762 (André 29/9, variant A i Headset-varianter.html): nytt i Support/Driftcentralen = röd siffra i hörnet av headset-ikonen, som siffran på HEMS-ikonen på hemskärmen. 9+ över nio. Ingen puls (ersätter pulsen från 24/9); siffran hoppar fram när den kommer eller ändras. */
.gc-root .gc-hs-on{border-color:rgba(148,163,184,.6);color:#f1f5f9}
.gc-root .gc-hs-on:hover{border-color:rgba(56,189,248,.6);color:#bae6fd}
.gc-root .gc-hs-badge{position:absolute;top:-6px;right:-7px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#DC2626;color:#fff;font-size:11px;font-weight:700;line-height:18px;text-align:center;font-variant-numeric:tabular-nums;box-shadow:0 0 0 2px #0a0f1a;pointer-events:none;animation:gc-hs-pop .5s cubic-bezier(.3,1.6,.5,1) both}
@keyframes gc-hs-pop{0%{transform:scale(0)}100%{transform:scale(1)}}
@media (prefers-reduced-motion: reduce){.gc-root .gc-hs-badge{animation:none}}

/* Ingen scroll-ankring (André 24/9): när ett kort ovanför byter höjd (Igår/Idag,
   utfällning) höll webbläsaren fast innehållet under och flyttade hela sidan.
   Nu står sidan still och det under puttas ner. */
.gc-root, .gc-root *{overflow-anchor:none}

/* v594 Elnät-panelen (gc-oversikt GcoPhPanel): "Stråle och bredd", rask (0,465 s). --ax = pilens x i panelen. */
.gco-ph{position:absolute;z-index:5;box-sizing:border-box;background:#0f172a;border:1px solid #1e293b;border-radius:14px;padding:8px 12px 6px;color:#cbd5e1;box-shadow:0 18px 40px rgba(0,0,0,.5),0 0 22px rgba(96,165,250,.18)}
.gco-ph-arw{position:absolute;width:12px;height:12px;background:#0f172a;border:1px solid #1e293b;transform:rotate(45deg)}
.gco-ph-up .gco-ph-arw{bottom:-7px;border-left:0;border-top:0}.gco-ph-down .gco-ph-arw{top:-7px;border-right:0;border-bottom:0}
@keyframes gcoPhUp{0%{clip-path:inset(100% calc(99% - var(--ax)) -12px calc(var(--ax) - 1%) round 14px)}42%{clip-path:inset(0 calc(99% - var(--ax)) -12px calc(var(--ax) - 1%) round 14px)}100%{clip-path:inset(-12px round 14px)}}
@keyframes gcoPhDown{0%{clip-path:inset(-12px calc(99% - var(--ax)) 100% calc(var(--ax) - 1%) round 14px)}42%{clip-path:inset(-12px calc(99% - var(--ax)) 0 calc(var(--ax) - 1%) round 14px)}100%{clip-path:inset(-12px round 14px)}}
.gco-ph-up{animation:gcoPhUp .465s cubic-bezier(.65,0,.35,1) both}.gco-ph-down{animation:gcoPhDown .465s cubic-bezier(.65,0,.35,1) both}
@keyframes gcoPhIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.gco-ph-i{animation:gcoPhIn .255s cubic-bezier(.2,.8,.2,1) both}
.gco-ph>:nth-child(2){animation-delay:.315s}.gco-ph>:nth-child(3){animation-delay:.36s}.gco-ph>:nth-child(4){animation-delay:.405s}.gco-ph>:nth-child(5){animation-delay:.45s}.gco-ph>:nth-child(6){animation-delay:.495s}
@media (prefers-reduced-motion:reduce){.gco-ph,.gco-ph-i{animation:none}}
.gco-ph>:nth-child(7){animation-delay:.54s}.gco-ph>:nth-child(8){animation-delay:.585s}.gco-ph>:nth-child(9){animation-delay:.63s}.gco-ph>:nth-child(10){animation-delay:.675s}
/* v615: strålen körs med Web Animations (gcoBeam i gc-oversikt.jsx); CSS-keyframes med var() i clip-path animerade inte i iOS Safari. */
.gco-ph-up,.gco-ph-down{animation:none}

/* v766 (förenklad Bil-flik): Spara/Ångra i en rad ovanför bottenflikarna (54 px + nederkantens marginal). Inbäddad flik saknar flikar. */
.gc-root .gbu-savebar{bottom:calc(max(env(safe-area-inset-bottom), 10px) + 62px)}
.gc-embed .gbu-savebar{bottom:12px}