/* stil.css (v872): typsnitt och kontrast i hela appen, mörkt läge (överlämning 11–12/10, Lennie; André 12/10: "Vi kör på Roboto").
   Laddas sist på varje sida och lägger sig över appens egen CSS och Tailwind-klasserna. Typsnittet byts på ett ställe (--font-ui).
   Typsnitten är buntade i fonts/ med licensfilerna (SIL OFL 1.1), inget hämtas från Google Fonts. Ljust läge är pausat (André 12/10). */
@font-face{font-family:"Lora";src:url("fonts/lora-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Lora";src:url("fonts/lora-latin-600-normal.woff2") format("woff2");font-weight:600 700;font-style:normal;font-display:swap}
@font-face{font-family:"Roboto";src:url("fonts/roboto-latin-wght-normal.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
/* ---------- Tokens ---------- */
:root:root{
  --font-ui:"Roboto",system-ui,-apple-system,sans-serif;
  /* Text, mörkt läge. Alla ≥ 4,5:1 mot varje bakgrund i överlämningens avsnitt 3 och appens --bg…--bg-3 (tabell i Typsnitt och kontrast.html). */
  --tx:#F8FAFC;--tx-1:#E2E8F0;--tx-2:#CBD5E1;--tx-dim:#94A3B8;--tx-link:#60A5FA;
  /* Appens egna texttokens (Inställningar, Hjälp, Ärenden, Driftcentralen). --ink-3 var #5E6A82 (2,7–3,5:1); --ink-2 höjs så att ordningen ink-1 > ink-2 > ink-3 står kvar. */
  --ink-2:#A9B4C7;--ink-3:#94A3B8;--ink-4:#94A3B8;
  /* Typskala: 16 px vanlig text, tydligt större siffror för kostnad, effekt och batterinivå. */
  --fs-label:12px;--fs-cap:13px;--fs-small:14px;--fs-body:16px;--fs-lead:17px;--fs-h3:20px;--fs-h2:22px;--fs-num:28px;--fs-key:34px;--fs-key-l:36px;
}
/* ---------- Typsnitt: ett typsnitt överallt, tabulära siffror, inga Geist-varianter ---------- */
html *,html *::before,html *::after{font-family:var(--font-ui)!important;font-feature-settings:normal!important;font-variant-numeric:tabular-nums!important}
html input,html textarea,html select,html button{font-family:var(--font-ui)!important}
/* Ordmärket Gravio HEMS är en logotyp och behåller sina typsnitt: Lora och raden AI Energy Solutions. */
html .tk-brand,html .tk-brand *,html [style*="Lora"]{font-family:Lora,Georgia,serif!important}
html [style*="Lora"]+span{font-family:ui-monospace,SFMono-Regular,Menlo,monospace!important}
/* ---------- Kontrast, mörkt läge (överlämningen avsnitt 3) ---------- */
html .text-slate-500,html .text-slate-600,html .text-slate-700,
html .placeholder\:text-slate-600::placeholder{color:var(--tx-dim)}
html .text-blue-500,html .text-blue-600{color:var(--tx-link)}
/* Samma färger satta inline i JSX (React skriver dem som rgb). */
html [style^="color: rgb(100, 116, 139)"],html [style*="; color: rgb(100, 116, 139)"],
html [style^="color: rgb(71, 85, 105)"],html [style*="; color: rgb(71, 85, 105)"]{color:var(--tx-dim)!important}
html [style^="color: rgb(37, 99, 235)"],html [style*="; color: rgb(37, 99, 235)"]{color:var(--tx-link)!important}
/* Text i SVG (ratten, axlarna): bara text, aldrig ytor eller linjer. */
html :is(text,tspan):is([fill="#64748b" i],[fill="#475569" i]){fill:var(--tx-dim)}
html :is(text,tspan)[fill="#2563eb" i]{fill:var(--tx-link)}
/* Hårdkodade gråa texter i appens CSS, under 4,5:1. */
html .mini-flow .mf-row .dir,html .plan-strip .ps-note,html .cv-batplan,html .hb-t.dis{color:var(--tx-dim)}
/* ---------- Typskala (Gravio-vyerna, Tailwind-klasserna). Text i SVG behåller sin storlek, den hör till grafiken. ---------- */
html :is(.text-\[9px\],.text-\[9\.5px\],.text-\[10px\],.text-\[10\.5px\]):not(svg *){font-size:var(--fs-label)}
html :is(.text-\[11px\],.text-\[11\.5px\]):not(svg *){font-size:var(--fs-cap)}
html :is(.text-\[12px\],.text-\[12\.5px\]):not(svg *){font-size:var(--fs-small)}
html .text-xs:not(svg *){font-size:var(--fs-small);line-height:20px}
html :is(.text-\[13px\],.text-\[13\.5px\],.text-\[14px\]):not(svg *){font-size:var(--fs-body)}
html .text-sm:not(svg *){font-size:var(--fs-body);line-height:22px}
html :is(.text-\[15px\],.text-\[16px\]):not(svg *){font-size:var(--fs-lead)}
html .text-base:not(svg *){font-size:var(--fs-lead);line-height:24px}
html :is(.text-\[18px\],.text-\[19px\]):not(svg *){font-size:var(--fs-h3)}
html .text-lg:not(svg *){font-size:var(--fs-h3);line-height:26px}
html .text-xl:not(svg *){font-size:var(--fs-h2);line-height:28px}
html .text-\[22px\]:not(svg *){font-size:26px}
html .text-2xl:not(svg *){font-size:var(--fs-num);line-height:32px}
/* Nyckeltalen: kostnad (Historik), batterinivå (Historik), lägets värde (48 timmar). */
html :is(.text-\[26px\],.text-\[28px\]):not(svg *){font-size:var(--fs-key)}
html .text-3xl:not(svg *){font-size:var(--fs-key-l);line-height:40px}
/* Ytor */
/* Kanter */
/* Text. Allt ≥ 4,5:1 mot sida #F3F5F9, kort #FFFFFF, upphöjd #E9EEF5, knapp #E2E8F0 och tonade ytor. */
/* ---------- Radbrytningar med större text (granskat i 360 px) ---------- */
/* Versala etiketter: mindre spärrning när texten är större, så korta etiketter inte bryts. */
html :is([class*="tracking-[0.1"],[class*="tracking-[0.2"],.tracking-wider,.tracking-widest):not(svg *){letter-spacing:.06em}
/* Rundade knappar och piller (Idag, ⟲ Nu, Imorgon, flikar) bryts aldrig. */
html :is(button,a).rounded-full:not(svg *){white-space:nowrap}
/* Raden 48 h / 24 h med zoom- och dygnsknapparna i Prognos: knapparna går till nästa rad i stället för att trycka ihop etiketten. */
html div.flex.items-center:has(>span.uppercase+.ml-auto){flex-wrap:wrap;row-gap:6px}
html div.flex.items-center:has(>span.uppercase+.ml-auto)>span.uppercase{white-space:nowrap}
/* Trappan i Historik: etikettkolumnen 96 → 120 px, så "Elen du använde" och "Sol utan batteri" inte klipps. */
html [class*="grid-cols-[96px_"]{grid-template-columns:120px minmax(0,1fr) auto}
/* Rutorna Sol, Köpt och Sålt i Historik (GhTile): samma storlek på alla tre i raden, siffran närmare etiketten och luft mot kanterna.
   I dag byter varje ruta själv till 18 px från 1 000 kWh, så rutorna i en rad fick olika storlek. Här byter hela raden så fort en ruta har 1 000 eller mer.
   Storleken följer rutans bredd (cqi), så "10 500 kWh" ryms med minst 8 px till kanten också i en 360 px bred telefon: högst 28 px, eller 22 px när raden har tusental. */
html div.rounded-xl.text-center:has(>div.mt-2.items-baseline.justify-center){padding:8px 8px 10px;container-type:inline-size}
html div.mt-2.items-baseline.justify-center:not(svg *){margin-top:4px;gap:3px}
html div.mt-2.items-baseline.justify-center>b:not(svg *){font-size:min(28px,34cqi)}
html div.mt-2.items-baseline.justify-center>span:not(svg *){font-size:12px}
html :has(>div>div.mt-2.items-baseline.justify-center>b.text-\[18px\]) div.mt-2.items-baseline.justify-center>b{font-size:min(22px,24cqi)}
/* Rutan I batteriet i Historik: rubriken, Vid start och Senast (Vid slut) står på samma rad som i dag, utan att rubriken bryts till "I / BATTERIET".
   Tabellen är 13 px (i dag 12), rubriken 11 px med mindre spärrning, och kolumnavståndet 6 px, så allt ryms i en 360 px bred telefon. */
html [class*="grid-cols-[minmax(0,1fr)_auto"]:has(>span.uppercase:first-child){column-gap:5px;font-size:13px;line-height:18px;grid-template-columns:minmax(min-content,1fr) repeat(var(--nc,2),auto)}
html div.rounded-xl:has(>[class*="grid-cols-[minmax(0,1fr)_auto"]>span.uppercase:first-child){padding-left:10px;padding-right:10px}
html [class~="grid-cols-[minmax(0,1fr)_auto_auto_auto]"]:has(>span.uppercase:first-child){--nc:3}
html [class*="grid-cols-[minmax(0,1fr)_auto"]:has(>span.uppercase:first-child)>*{font-size:13px}
html [class*="grid-cols-[minmax(0,1fr)_auto"]>span.uppercase:first-child{font-size:11px;letter-spacing:.02em;white-space:nowrap}
html [class*="grid-cols-[minmax(0,1fr)_auto"]:has(>span.uppercase:first-child)>span.text-right{font-size:12px}
/* Rubriken Historik (och andra sidrubriker i samma form): mycket mindre luft runt. Raden är så hög som texten, 24 px i stället för 36, med 4 px under huvudet och 6 px till periodvalet.
   Med knappen Till nu (36 px) blir raden så hög som knappen. */
html [class*="min-h-[36px]"]:has(>h1){min-height:0;margin-top:-6px;margin-bottom:-6px}
html [class*="min-h-[36px]"]>h1.text-xl{line-height:24px}
/* Minustecknet i stora enskilda tal (flödesbilden, korten, nyckeltalen): mindre och i höjd med siffrornas mitt. I tabeller och kolumner står det fulla
   minustecknet kvar, så att talen linjerar. gcNeg i gc-core.jsx sätter klassen; i SVG sköter gcNeg storlek och höjd själv. */
.gc-neg{font-size:.72em;vertical-align:.14em;margin-right:.03em}
/* v876 Genomgång av alla sidor vid 360 px (André 12/10: "Gå igenom alla sidor"). */
/* Hjälp: kommandomärket charge (blå #2196F3 på blå ton) nådde 4,0:1; ljusare blå ger 6,6:1. */
html .cmd-badge[style*="rgb(33, 150, 243)"]{color:#90CAF9!important}
/* Inloggningssidans nyckeltal: etiketterna (BESLUT PER DYGN, AI-ÖVERVAKNING) bröts i tre rader med Roboto och stor spärrning. */
html .stat span{letter-spacing:.06em}
/* Hjälps fälttabell: kolumnrubrikerna bryts inte. */
html .sensor-table th{white-space:nowrap}
/* v886 Rutan I batteriet: fasta kolumnbredder, så talen står på samma plats när man byter period (André 12/10: "Fälten bör ligga still"). Bredderna rymmer
   "100 %", "99,9 kWh" och "999,99 kr" i 13 px Roboto; etikettkolumnen tar resten. */
html .gh-inv-g{grid-template-columns:minmax(min-content,1fr) 66px 66px 54px!important}
@media (max-width:374px){html .gh-inv-g{grid-template-columns:minmax(min-content,1fr) 62px 62px 50px!important}}