/* 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. */
.gc-root .gc-kpi-row{
  grid-template-columns:none; grid-auto-flow:column;
  grid-auto-columns:minmax(94px,1fr);
  overflow-x:auto; overscroll-behavior-x:contain;
  scrollbar-width:none; -ms-overflow-style:none;
  scroll-snap-type:x proximity;
}
.gc-root .gc-kpi-row::-webkit-scrollbar{display:none}
.gc-root .gc-kpi-row > *{scroll-snap-align:start}

/* 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){
  .gc-sticky .gc-sel-row{flex-wrap:wrap;row-gap:4px}
  .gc-sticky .gc-sel-row .gc-sel-mode{width:100%;justify-content:flex-start}
  .gc-sticky .gc-sel-row .gc-sel-mode .truncate{overflow:visible;text-overflow:clip;white-space:nowrap}
}
/* 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){
    .gc-sticky .gc-sel-row{flex-wrap:wrap;row-gap:4px}
    .gc-sticky .gc-sel-row .gc-sel-mode{width:100%;justify-content:flex-start}
    .gc-sticky .gc-sel-row .gc-sel-mode .truncate{overflow:visible;text-overflow:clip;white-space:nowrap}
  }
}

/* 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%}
  }
}

.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. */
@container (max-width: 419px){
  .gc-root .gc-plan-row{flex-wrap:wrap;row-gap:1px}
  .gc-root .gc-plan-row .gc-plan-what{width:100%;order:3}
  .gc-root .gc-plan-row .gc-plan-dur{order:2}
  .gc-root .gc-plan-row .gc-plan-price{order:4}
}
@supports not (container-type: inline-size){
  @media (max-width: 440px){
    .gc-root .gc-plan-row{flex-wrap:wrap;row-gap:1px}
    .gc-root .gc-plan-row .gc-plan-what{width:100%;order:3}
    .gc-root .gc-plan-row .gc-plan-dur{order:2}
    .gc-root .gc-plan-row .gc-plan-price{order:4}
  }
}

/* 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}