/* UTBRUTEN ur themes/forre_pulse/views/partials/pulse-override-flik.php rad 537 (2026-09-24, prestandapasset).
   Låg förut som inline <style> och skickades om i HTML:en på VARJE sidvisning;
   som fil cachas den av webbläsaren. Redigera HÄR — <link> sitter kvar på samma
   plats i partialen, så kaskadordningen är oförändrad. */
/* Fallgrop 3: marginalen bor här, inte i pulse-skal.css. */
/* Fallgrop 3: marginalen bor har. 36 = mittflikens synliga hojd (28 + 8). */
/* ★ SKUGGTOKENS PA .skl-wrap, INTE PA .ovf. Baren ar .ovf:s SYSKON, och
   CSS-variabler arvs nedat — aldrig i sidled. Satta pa .ovf sag `.skl` dem
   aldrig: box-shadow blev `none` och ::after fick ingen bakgrund alls,
   uppmatt pa live. `.skl-wrap` ar gemensam foralder till bada.
   Vardena ar delarna ur `--skl-e2` (pulse-skal.css:35 och 45), inte egna. */
/* ★ DEN MJUKA SKUGGAN AR ETT BAND, INTE EN `box-shadow`. En `box-shadow`
   gar inte att maska, och baren malas over flikraden (z 7 mot 6) — alltsa
   foll barens mjuka skugga rakt ner PA Override-fliken. Uppmatt pa live i
   morkt lage, en pixelkolumn rakt genom motet: shoutraden rgb(28,28,28),
   sedan **rgb(20,20,20)** vid flikens overkant, sedan 21, 22, 23 ... tillbaka
   till 28 forst 31 px ner. Atta nivaer, over 31 px. Det ar den "skugga" Kenta
   pekade pa — den ar bokstavligen en skugga, och den enda som aldrig fick
   halet. Slog man av `box-shadow` pa `.skl` blev kolumnen platt 28 hela vagen.

   Banden nedan aterger samma skuggor som en gradient. Det ar ingen
   approximation av FORMEN: baren ar full skarmbredd, sa dess skugga ar redan
   en rent lodrat toning — bara andarna skiljer, och de ligger utanfor
   skarmen. Stoppen ar raknade ur box-shadow-definitionen (gaussisk, sigma =
   halva blurradien, spread flyttar kanten):
       morkt  0 10px 28px -12px rgba(0,0,0,.6)  -> sigma 14, kant y 94
       ljust  0  8px 24px -10px rgba(16,24,40,.16) -> sigma 12, kant y 94
   och stamda mot matningen (morkt: .286 vid 0 px, .185 vid 5, .118 vid 10,
   .067 vid 15, .035 vid 20, 0 vid 32). Avvikelse mot box-shadow: under en
   nivaa. */
/* 30 = mittflikens synliga hojd (28 px som cellerna + `--ovf-mitt` 2). Andras
   `--ovf-mitt` maste denna folja med, annars krockar innehallet under baren
   med flikens underkant. */
.skl-wrap{margin-bottom:30px;
  --ovf-barsk:rgba(16,24,40,.10);
  --ovf-mjuk:linear-gradient(to bottom,
    rgba(16,24,40,.069) 0,rgba(16,24,40,.045) 5px,rgba(16,24,40,.025) 10px,
    rgba(16,24,40,.013) 15px,rgba(16,24,40,.005) 20px,rgba(16,24,40,0) 30px)}
[data-theme="dark"] .skl-wrap{
  --ovf-barsk:rgba(0,0,0,.40);
  --ovf-mjuk:linear-gradient(to bottom,
    rgba(0,0,0,.286) 0,rgba(0,0,0,.185) 5px,rgba(0,0,0,.118) 10px,
    rgba(0,0,0,.067) 15px,rgba(0,0,0,.035) 20px,rgba(0,0,0,0) 32px)}

/* ═══ HALET I BARENS UNDERKANTSLINJE ════════════════════════════════════════
   Kenta: "det ar en linje ovanfor override men den ska hanga ihop med det som
   ar ovanfor ... sa fliken gar ner".

   Linjen ar `.skl{border-bottom:1px solid var(--line2)}` (pulse-skal.css:58).
   Den GAR inte att mala over harifran: flikraden ligger med FLIT under baren
   (z 6 mot 7, satt 2026-09-20 nar Butiken-panelen hamnade under trapetsen),
   och `.ovf` ar dessutom position:absolute med z-index — en egen stacking
   context, sa inget barn kan ta sig over baren hur hogt varde det an far.
   Att hoja `.ovf` till 8 later den tacka alla panelerna igen: samma bugg.

   Losningen gar at andra hallet: **ta bort linjen dar flikarna ar.**
   Kantfargen blir transparent (bredden 1px star kvar sa layouten inte hoppar)
   och linjen ritas i stallet som en background-image med ett HAL. Kanterna pa
   halet sats av JS till flikradens faktiska ytterkanter, sa det foljer med nar
   en cell tillkommer eller faller bort.

   ★ FALLBACK ar 50%/50% = inget hal alls, dvs exakt som forut. Kor inte JS:en
     ser baren ut som den alltid gjort i stallet for att tappa sin linje. */
.skl-wrap > .skl{border-bottom-color:transparent;
  /* ★ HALET AR INTE TRANSPARENT — DET AR SHOUTRADENS YTA. Denna gradient
     ritar barens sista pixelrad (y 95–96, dar `border-bottom` star pa
     transparent). Med `transparent` i halet syntes barens GLAS rakt igenom
     just dar, en 1 px remsa sex nivaer fel tvars over flikens hela bredd —
     det Kenta sag som "en skugga eller vad det ar". `var(--inset)` ar exakt
     shoutradens (`.skl-shw`) och flikens yta, sa raden fortsatter i stallet
     rakt ner i fliken. Se den langa noten vid `.ovf-flik[data-ovf-toggle]`. */
  background-image:linear-gradient(to right,
    var(--line2) 0 var(--ovf-hal-v,50%),
    var(--inset) var(--ovf-hal-v,50%) var(--ovf-hal-h,50%),
    var(--line2) var(--ovf-hal-h,50%) 100%);
  /* ★ `background-origin:border-box`. Utan den positioneras linjen mot
     PADDING-boxen, alltsa y 94–95, och barens genomskinliga `border-bottom`
     (y 95–96) blev en 1 px remsa av bart glas UNDER linjen — exakt i motet
     med fliken. Med border-box hamnar linjen dar baren faktiskt slutar. */
  background-repeat:no-repeat;background-size:100% 1px;
  background-origin:border-box;background-position:left bottom;
  /* ★ OCH SKUGGAN MASTE FA SAMMA HAL. Att bara ta bort LINJEN racker inte:
     `--skl-e2` innehaller `0 1px 2px rgba(0,0,0,.34)`, en tat skugga som
     baren kastar NEDAT och som malas over fliken (bar z 7 > flik z 6) aven
     dar linjen ar borttagen. Bevisat pa live: satte man barens box-shadow
     till `0 3px 0 #e0245e` lade sig det roda bandet rakt over Override
     ocksa. Resultatet var en 2-3 px morkare strimma exakt i motet — det
     Kenta sag efter att linjen forsvunnit.
     Den tata skuggan ritas darfor om som ett eget lager (::after nedan) med
     en horisontell mask, och `.skl` behaller BARA den mjuka langa skuggan,
     som ar for utsmetad for att lasa som en kant. */
  /* Bada skuggorna ligger nu i ::after under EN mask. Se noten vid tokens. */
  box-shadow:none}
.skl-wrap > .skl::after{content:"";position:absolute;left:0;right:0;
  /* `top:100%` ar PADDING-boxens underkant = y 95. Baren slutar vid 96, sa
     bandet ska borja en pixel lagre — annars lagger det sig pa linjen. */
  top:calc(100% + 1px);height:32px;
  pointer-events:none;
  background:linear-gradient(to bottom,var(--ovf-barsk) 0,transparent 4px),
    var(--ovf-mjuk);
  -webkit-mask-image:linear-gradient(to right,#000 0 var(--ovf-hal-v,50%),
    transparent var(--ovf-hal-v,50%) var(--ovf-hal-h,50%),#000 var(--ovf-hal-h,50%) 100%);
  mask-image:linear-gradient(to right,#000 0 var(--ovf-hal-v,50%),
    transparent var(--ovf-hal-v,50%) var(--ovf-hal-h,50%),#000 var(--ovf-hal-h,50%) 100%)}

/* ★ [hidden]-GUARDEN. En klassregel med display:grid/flex slår ut webbläsarens
   egen [hidden]{display:none} — bandet renderades som en tom grön remsa med
   rubrik och knapp fast det inte fanns något nytt. Raden ska stå kvar. */
.ovf [hidden],.ovf[hidden]{display:none !important}

/* ★ EGEN box-sizing. Uppmätt i provrenderingen: raderna blev 613 px breda i en
   592 px kolumn — exakt 12+9 px padding utanpå width:100%, alltså content-box.
   Partialen ska inte vara beroende av att en global reset finns; komponenten
   bär sin egen. 21 px vågrät rullning i en lista är inte ett skönhetsfel,
   det gömmer kopieringsknappen. */
.ovf,.ovf *,.ovf *::before,.ovf *::after{box-sizing:border-box}

/* ── FLIKEN ───────────────────────────────────────────────────────────────
   YTAN ÄR BARENS EGEN. Samma var(--inset) som .skl-shw och samma var(--line2)
   som .skl:s border-bottom — och eftersom flikens topp ligger exakt där den
   linjen går är det SAMMA linje. Baren dyker ner runt ordet i stället för att
   fliken ligger på baren.
   HÅRFIN KANT PÅ EN LUTANDE SIDA: två lager med samma clip-path, det bakre i
   kantfärgen, det främre inskjutet 1 px i ytfärgen. En border klipps bort av
   clip-path och en box-shadow följer inte formen.
   MARKERINGEN är formen plus drop-shadow, som FÖLJER clip-path — box-shadow
   ritar runt elementets fyrkant och sticker ut som två vingar vid axlarna. */
.ovf{--ovf-yta:var(--inset);--ovf-kant:var(--line2);--ovf-hov:var(--card);
  /* ★ UTSTICKET (Kenta 2026-09-20: "skulle villja fa ut dem mer").
     --ovf-h ar TOTALHOJD: --ovf-in gar in under baren, resten sticker ut.
     44 - 20 = 24 px synligt blev 48 - 20 = 28. Mitten far 8 px till, 36. */
  --ovf-axel:13px;--ovf-in:20px;--ovf-h:48px;--ovf-gap:7px;
  /* ★ MITTEN STICKER UT DJUPARE AN CELLERNA (Kenta 2026-09-20: "override
     fliken ska ocksa ga ut"). `--ovf-mitt` ar ENBART utsticket nedat: hur
     manga px Override hanger under sidocellernas underkant. Cellerna ar 28 px
     synliga, Override 28 + detta matt.
     ★ 2 px, inte 8 (Kenta 2026-09-20: "gora override lite smalare pa hojden
       sa den gar lite over menyerna till vanster och hoger kanske med 2
       pixlar"). Atta px last som ett eget objekt som hangde under raden; tva
       ger samma besked — mitten ar mitten — utan att bryta radens underkant.
       Konturen blir en grund krona i stallet for ett hack.
     ★ ANDRAS DETTA: `.skl-wrap{margin-bottom}` ar flikens synliga hojd
       (28 + detta) och maste folja med. Luckan foljer automatiskt, den
       raknar `--ovf-h + --ovf-mitt + --ovf-gap`. */
  --ovf-mitt:2px;
  /* Tre skuggstyrkor, en per djupsteg. Se skuggtrappan langre ner. */
  --ovf-sk1:color-mix(in srgb,var(--ink) 26%,transparent);
  --ovf-sk2:color-mix(in srgb,var(--ink) 15%,transparent);
  --ovf-sk3:color-mix(in srgb,var(--ink) 9%,transparent);
  --ovf-ljus:var(--card);
  --ovf-form:polygon(0 0,100% 0,calc(100% - var(--ovf-axel)) 100%,var(--ovf-axel) 100%);
  position:absolute;top:calc(100% - var(--ovf-in));left:0;right:0;height:0;z-index:6;
  display:flex;justify-content:center;pointer-events:none}

/* ★ OVERRIDE STÅR STILL. GRID, INTE FLEX.  (Kenta 2026-09-20:
   "override meny alltid vara absolut mitten vill inte att den nagonsin ska rora pa sig")
   Med flex + justify-content:center flyttade sig fliken varje gang en sidoflik
   dok upp eller forsvann — uppmatt i mockupen: -177 px till +12 px, spann 189 px.
   `minmax(0,1fr) auto minmax(0,1fr)` gor de tva sidospalterna EXAKT lika breda
   oavsett innehall, sa auto-spalten hamnar alltid pa 50 %. Matt efterat:
   0,00 px avvikelse i 18 kombinationer.
   ★ minmax(0,1fr), inte 1fr: utan det vagrar spalten krympa under sitt
     min-content och trycker ut mitten igen nar raden blir trang.
   ★ OVERLAPPET BOR PA SPALTEN, INTE PA CELLEN. Forsta forsoket gav forsta
     hogercellen margin-left:0 via :first-child — men :first-child bryr sig
     inte om display:none och traffade en dold cell, sa nasta cell kop 13 px
     in under mittens form och klippte sin egen forsta siffra. Spalten bar
     darfor overlappet, symmetriskt, och ar immun mot vilka celler som ar
     dolda just nu. */
/* ★ HETER ovf-grid, INTE ovf-in. `.ovf-in` ar sedan tidigare LUCKANS SOKFALT
   (regeln langre ner: flex:1, height:30px). Forsta forsoket dopte grid-wrappern
   till samma namn: wrappern arvde sokfaltets height:30px, OCH luckans JS
   (`rita()`, som gor `falt.value.trim()`) plockade upp wrappern i stallet for
   inputen och kastade TypeError vid varje sidladdning. Bade CSS och JS blev
   fel av ETT ateranvant klassnamn. */
.ovf-grid{width:100%;max-width:var(--shell-w,1200px);
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:start}
.ovf-sida{display:flex;align-items:flex-start;min-width:0;pointer-events:none}
/* ═══ ETT AXELSTEG TILL — SA DE FAKTISKT OVERLAPPAR ═════════════════════════
   Kenta: "ser fortfarande ingen skugga sa override overlappar vanster och
   hoger". Han hade ratt och orsaken var geometrisk, inte en skugginstallning:
   med EN axels overlapp sammanfoll flikarnas kanter EXAKT. De motte varandra
   kant i kant — det fanns alltsa ingen yta for en skugga att falla PA.

   Nu ar overlappet TVA axlar (26 px). Mittens form slutar 13 px in pa
   grannens synliga yta, sa dess kant ligger verkligen ovanpa och skuggan har
   nagot att landa i. Samma sak mellan alla steg: hela raden blir en fjader
   dar varje flik vilar pa den utanfor.

   ★ INNEHALLETS PADDING MASTE FOLJA MED. 26 px overlapp och 11 px padding
     hade lagt cellens forsta tecken TVA px under grannens form — samma
     klippning som `9/73`-buggen, med en annan orsak. Den inre sidan far
     darfor `axel + 11`. Netto blir cellen lika bred som forut: 13 px mer
     padding, 13 px mer overlapp. */
.ovf-sida.v{justify-content:flex-end;margin-right:calc(-2 * var(--ovf-axel))}
/* ★ PADDINGEN MASTE MOTSVARA MARGINALEN, ANNARS BLIR SIDORNA OLIKA.
   Med margin -26 och padding 13 lade sig hogerspalten 13 px for langt in, och
   cellens egen -26 ovanpa det gav 39 px overlapp mot vansterns 26 — uppmatt
   pa live. Mitten stod fortfarande centrerad (grid bryr sig inte om
   marginaler), sa felet syntes bara som att hogercellen kop for langt in
   under fliken och dess forsta siffra hamnade tva px under formen. */
.ovf-sida.h{justify-content:flex-start;margin-left:calc(-2 * var(--ovf-axel));
  padding-left:calc(2 * var(--ovf-axel))}
.ovf-flik,.ovf-cell{pointer-events:auto;position:relative;display:inline-flex;align-items:center;
  gap:9px;height:var(--ovf-h);
  padding:var(--ovf-in) calc(var(--ovf-axel) + 11px) 0;border:0;
  background:none;cursor:pointer;color:var(--ink2);
  font-family:Roboto,system-ui,sans-serif;font-weight:800;font-size:10px;
  line-height:1;letter-spacing:.13em;text-transform:uppercase;
  transition:color .12s ease-out;
  filter:drop-shadow(0 1px 1px color-mix(in srgb,var(--ink) 15%,transparent))
         drop-shadow(0 3px 4px color-mix(in srgb,var(--ink) 10%,transparent))}
[data-theme="dark"] .ovf{--ovf-sk1:rgba(0,0,0,.8);--ovf-sk2:rgba(0,0,0,.55);
  --ovf-sk3:rgba(0,0,0,.38);--ovf-ljus:#242424}
[data-theme="dark"] .ovf-flik{
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.6)) drop-shadow(0 4px 6px rgba(0,0,0,.45))}
.ovf-flik::before,.ovf-flik::after,
.ovf-cell::before,.ovf-cell::after{content:"";position:absolute;inset:0;
  clip-path:var(--ovf-form);transition:background .12s ease-out}
.ovf-flik::before,.ovf-cell::before{background:var(--ovf-kant)}
.ovf-flik::after,.ovf-cell::after{inset:1px;background:var(--ovf-yta)}
.ovf-flik>*,.ovf-cell>*{position:relative;z-index:1}
.ovf-flik[data-ovf-toggle]{color:var(--ink);letter-spacing:.14em}
.ovf-flik:hover,.ovf-flik:focus-visible{color:var(--ink);outline:0}
.ovf-flik:hover::after{background:var(--ovf-hov)}
.ovf-flik:focus-visible::before{background:var(--accent)}
.ovf-n{font-size:10px;font-weight:800;letter-spacing:.02em;text-transform:none;
  color:var(--ink);background:color-mix(in srgb,var(--gold) 20%,transparent);
  border-radius:999px;padding:2px 6px;line-height:1;font-variant-numeric:tabular-nums}
[data-theme="dark"] .ovf-n{color:var(--gold);
  background:color-mix(in srgb,var(--gold) 16%,transparent)}
.ovf-n.ny{color:var(--live);background:color-mix(in srgb,var(--live) 18%,transparent)}
/* "klart" ar ett besked, inte en vantande uppgift — darfor neutral, inte guld.
   Det haller ocksa max-tva-accenter nar bade gron prick och bla samlingssiffra
   redan star pa raden. */
.ovf-n.klar{color:var(--dim);background:color-mix(in srgb,var(--ink) 8%,transparent)}
[data-theme="dark"] .ovf-n.klar{color:var(--dim);background:rgba(255,255,255,.07)}
.ovf[data-nytt="nya"] .ovf-n:not(.ny){display:none}
.ovf[data-nytt="sett"] .ovf-n.ny{display:none}
.ovf-kar{width:9px;height:9px;opacity:.75;transition:transform .14s ease-out;
  display:block}
.ovf.oppen .ovf-kar{transform:rotate(180deg)}
.ovf.oppen .ovf-flik{color:var(--ink)}

/* ═══ CELLERNA  (C · SIDORNA, Kenta 2026-09-20) ══════════════════════════════
   VANSTER AR VARLDEN, HOGER AR JAG. Vansterspalten bar bara sadant som hander
   UTAN besokaren (besokare i dag, vilka som ar inne). Hogerspalten bara sadant
   som ar HANS (samlingen, nasta handelse). Ingenting byter sida. Regeln avgor
   sjalv var en framtida cell hamnar — shop-timern hoger, ny medlem vanster.

   ★ PARALLELLOGRAM, INTE TRAPETSER. Tva trapetser bredvid varandra mots BARA i
     overkanten; nedtill star en kil pa 13 x 24 px = 156 px2 tom. Det ar glappet.
     Sidocellerna har darfor bada kanterna lutande AT SAMMA HALL, sa att den inre
     kanten ar parallell med grannens och de kan laggas pa varandra exakt
     axelns bredd. Uppmatt: overlappet blir 13,0 px i varje mote.

   ★ DJUPLED: mitten overst (z 5), sedan avtagande utat. Cellerna gar in UNDER
     Override-fliken, som mappflikar i en parm — fliken ar alltid hel.

   ★ DEN DOLDA DELEN BAR INGEN FARG. --ovf-in (20 px) av varje cell ligger
     bakom barens glas (rgba(255,255,255,.82) ljust / rgba(23,23,23,.86) morkt
     = 18 % / 14 % genomslapp + blur 16px, pulse-skal.css:56). En fargton dar
     fungerar tekniskt — den smetas ut till ett mjukt falt — men den LASES som
     en glow, och glow ar inte husets sprak. Kenta 2026-09-20: "ingen glow tack".
     Formen far synas genom glaset; fargen stannar under barens kant. */
/* ═══ MATERIALET ════════════════════════════════════════════════════════════
   En platt gra platta ser ut som en platta. Den synliga delen (24 px under
   barens kant) far darfor en NEUTRAL tonskillnad: ljusast precis vid kanten,
   avklingande nedat. Det ar inte en glow — ingen farg, inget ljus som stracker
   sig utanfor formen — det ar hur en fysisk flik fangar ljuset uppifran.
   De 20 px som ligger bakom glaset ar oforandrade; tonen borjar dar baren
   slutar, annars hade den synt igenom och blivit just det Kenta inte vill ha. */
/* ═══ FLIKEN BORJAR I SHOUTRADEN OCH GAR NER ════════════════════════════════
   Kenta: "det ar en linje ovanfor override men den ska hanga ihop med det som
   ar ovanfor ... sa fliken gar ner".

   ★ LINJEN AR BARENS EGEN `border-bottom` (pulse-skal.css:58) och den KAN inte
     brytas harifran. Flikraden ligger med FLIT under baren (z 6 mot 7, satt
     2026-09-20 nar Butiken-panelen hamnade under Override-trapetsen), och en
     hojning over baren later fliken tacka alla panelerna igen — samma bugg
     tillbaka. `.ovf` ar dessutom position:absolute med z-index, alltsa en egen
     stacking context: inget barn kan ta sig over baren, hur hogt varde det an
     far.

   ★ DET SOM GAR: lata flikens OVRE del bara shoutradens exakta yta
     (--inset, pulse-skal.css:664). Da mots linjen av samma farg pa bada sidor
     och lasningen blir "raden fortsatter ner i en flik" i stallet for "en
     flik sitter under ett streck". Flikens egen yta tar over forst nagra px
     langre ner, dar ogat redan last den som en flik. */
/* ★ BARA MITTEN SMALTER MED SHOUTRADEN. Sidocellerna ligger UNDER baren och
   ska bara sin egen yta anda upp — det ar just skillnaden mellan "vuxit ner
   ur raden" och "ligger under raden" som bar effekten. */
.ovf-cell::after{
  background:linear-gradient(to bottom,
    var(--ovf-yta) 0, var(--ovf-yta) 17px,
    var(--ovf-ljus) 22px, var(--ovf-yta) 44px)}
/* Mitten ar atta px hogre, sa dess toning far klinga ut atta px senare —
   annars slutar ljuset mitt i cellen och underkanten ser avhuggen ut. */
/* Mitten ar nu 36 px hog och HELT synlig — toningen raknas fran dess egen
   overkant: shoutradens yta overst sa motet blir somlost, flikens egen strax
   under, och den ljusa punkten dar ogat las overgangen. */
/* ═══ SKARVEN LAG ALDRIG I FLIKEN — DET AR BARENS SISTA PIXELRAD ═══════
   ★ FEM FORSOK LETADE PA FEL ELEMENT. Baren ar inte EN yta utan tva:
         `.skl`     y 0–96  glas, `--skl-glas` + blur(16px) saturate(1.25)
         `.skl-shw` y 56–95  OPAK `var(--inset)` (pulse-skal.css:664)
     Shoutraden ligger som en egen opak platta OVANPA glaset — och det ar DEN,
     inte glaset, som moter Override. Men `.skl-shw` slutar vid y=95 och `.skl`
     vid y=96. **Daremellan star en pixelrad av bart glas.**

   ★ UPPMATT PA LIVE (morkt lage), en kolumn rakt genom motet:
         y 56–94  shoutraden   `--inset`  = rgb(28,28,28)  opak
         y 95     glasremsan   rgba(23,23,23,.86) over rgb(18,18,18)
                               renderas ~rgb(22,22,22)
         y 96–   fliken       `--inset`  = rgb(28,28,28)
     En 1 px remsa, sex nivaer fel, tvars over hela flikens bredd, exakt i
     motet. Det ar "skuggan". Raden ar barens `border-bottom`-omrade: fargen
     star pa transparent och linjen ritas som `background-image` med ett HAL
     over fliken — och i halet syntes glaset rakt igenom.

   ★ FIXEN LIGGER I BAREN, INTE HAR: halets segment ar `var(--inset)` i
     stallet for `transparent` (se `.skl-wrap > .skl` ovan). Da fortsatter
     shoutradens yta rakt ner i fliken och de tre raderna blir ETT falt.

   ★ OCH DARFOR AR FLIKEN OPAK IGEN. Ett forsok gav fliken barens GLAS
     (`--skl-glas` + `backdrop-filter`) efter en matning pa y=95 — alltsa mot
     glasremsan, som var defekten. Det matchade remsan men gjorde fliken sex
     nivaer morkare an SHOUTRADEN: samma fel spegelvant, och Kenta sag det
     direkt. Fliken ska bara samma yta som `.skl-shw`: opak `var(--inset)`,
     satt via `--ovf-yta` nedan. Inget `backdrop-filter` — en opak yta har
     ingen backdrop att blurra och kan darfor aldrig glida isar i rorelse.

   ★ LARDOMEN: mat inte "baren" som om den vore ett element. Mat den
     pixelrad som faktiskt GRANSAR till det du jamfor med. */
.ovf-cell{cursor:default}
a.ovf-cell{text-decoration:none}
/* ★ EN HJALTE, RESTEN DAMPAT. Samlingen ar det enda talet pa raden som ror
   sig av vad DU gor — den far ljusare yta och accentfargen. De ovriga tre
   bar --dim pa sina tal i stallet for --ink, sa hjalten far vara ensam om
   full svarta. Utan det blev raden fem likvardiga rutor, vilket ar samma sak
   som ingen hierarki alls. */
/* ★ HJALTEN MARKERAS MED FARG, INTE MED YTA. Ytan ar upptagen — den bar
   djupet (valortrappan ovan). Samlingen ar det enda talet som ror sig av vad
   DU gor, sa den far accenten; de andra talen dampas ett steg sa hjalten far
   vara ensam om full styrka. En hero, resten dampat. */
.ovf-cell.hjalte .ovf-tal{color:var(--accent-ink)}
.ovf-cell.dampad .ovf-par b{color:var(--ink2)}
.ovf-cell,.ovf-flik{margin-left:calc(-2 * var(--ovf-axel))}
/* ═══ MITTEN GAR INTE IN UNDER BAREN — DEN BORJAR DAR BAREN SLUTAR ═════════
   Kenta: "ser fortfarande nagot som skiljer, en linje eller skugga, den ska
   bort darifran sa dem gar ihop".

   ★ DET VAR GLASKANTEN, och den gar att rakna. Mitten gick in 20 px bakom
     baren. Bakom glaset (rgba(23,23,23,.86) i morkt lage) blir flikens
     `--inset` #1c1c1c till ~#181818, medan dess synliga del strax under
     kanten ar ~#1f1f1f. **Sju till tolv nivaers skillnad exakt vid kanten** —
     en morkare strimma ovanfor fliken som ingen linje kunde forklara. Att
     ljusa upp den dolda delen tills den matchar genom glaset hade krävt
     ~#505050, och blur(16px) hade smetat ut det till precis den glow som inte
     ska finnas.

   ★ RATT LOSNING AR ATT TA BORT DEN DOLDA DELEN HELT. Mitten ska enligt
     Kenta "hora till den ovre delen ... bara vaxt ner", och sidocellerna
     "gar in under". Da ska mitten inte ha nagon del bakom glaset alls:
     `margin-top:--ovf-in` skjuter ner den till barens underkant och hojden
     kompenseras med samma matt, sa underkanten hamnar precis dar den lag.
     Ingen dold del, ingen glaskant, inget att forklara bort.

   ★ OCH INGEN KANT I TOPPEN. Nu nar flikens overkant ar synlig skulle
     `::before`:s 1 px rita exakt den linje som just togs bort ur baren.
     Darfor `inset:0 1px 1px 1px` pa `::after` — ytan gar anda upp och
     tacker topplinjen, men kanterna pa sidor och botten star kvar. */
.ovf-flik[data-ovf-toggle]{margin-left:0;margin-right:0;z-index:5;
  margin-top:var(--ovf-in);padding-top:0;
  height:calc(var(--ovf-h) + var(--ovf-mitt) - var(--ovf-in))}
.ovf-flik[data-ovf-toggle]::after{inset:0 1px 1px 1px}
/* ★ 16 px, inte 11 (Kenta 2026-09-20: "dra ut det lite sa man ser vad det
   star alltsa lite bredare"). Etiketterna ar 8 px och damade — de behover
   luft omkring sig for att lasas, annars klibbar de i axeln. */
.ovf-cell.v{--ovf-form:polygon(0 0,calc(100% - var(--ovf-axel)) 0,100% 100%,var(--ovf-axel) 100%);
  padding-left:calc(var(--ovf-axel) + 16px);padding-right:calc(var(--ovf-axel) + 16px)}
.ovf-cell.h{--ovf-form:polygon(var(--ovf-axel) 0,100% 0,calc(100% - var(--ovf-axel)) 100%,0 100%);
  padding-left:calc(var(--ovf-axel) + 16px);padding-right:calc(var(--ovf-axel) + 16px)}
/* ═══ VALORTRAPPAN — DET AR DEN SOM GOR ATT DE LIGGER OMLOTT ════════════════
   z-index sager VEM som ligger over vem. Valoren SHOWAR det. Mitten ar ljusast
   (den ligger overst och fangar mest ljus), och varje steg utat ar en aning
   morkare — precis som staplade kort. Utan den ar raden fem likadana plattor
   och skarven ar bara en tunn linje man maste leta efter.
   ★ Stegen ar sma med flit: 2-3 % per steg. Mer och det laser som olika
     KOMPONENTER i stallet for samma sak i olika djup. */
/* ★ MITTEN HAR BARENS EXAKTA YTA (Kenta 2026-09-20: "override ska ha samma
   bakgrund som baren ovan ... ska ha vaxt ihop"). `--inset` ar shoutradens
   bakgrund (pulse-skal.css:664) — samma varde, inget narliggande. Da finns
   ingen tonskillnad kvar att uppfatta som en kant, och fliken laser som en
   utvaxt av raden i stallet for som ett eget objekt under den.
   ★ DARFOR FLYTTAS HELA VALORTRAPPAN NER ETT STEG. Lag mitten kvar pa --card
     och cellerna pa --inset skulle n1 vara LJUSARE an mitten och djupet peka
     at fel hall. Nu: mitten ljusast (= baren), sedan avtagande utat. */
.ovf-cell.n1{z-index:4;--ovf-yta:color-mix(in srgb,var(--line) 30%,var(--inset))}
.ovf-cell.n2{z-index:3;--ovf-yta:color-mix(in srgb,var(--line) 55%,var(--inset))}
.ovf-cell.n3{z-index:2;--ovf-yta:color-mix(in srgb,var(--line) 80%,var(--inset))}
.ovf-flik[data-ovf-toggle]{--ovf-yta:var(--inset)}

/* ═══ MORKT LAGE: LJUSET BAR DJUPET, INTE SKUGGAN ═══════════════════════════
   Kenta sag skuggan i ljust lage men fragade "vart?" om det morka. Han hade
   ratt, och orsaken ar matbar: sidbakgrunden ar #121212 och cellerna #1c1c1c.
   En svart skugga pa 80 % over #1c1c1c ger ~#090909 — arton nivaer morkare an
   ytan den ligger pa. Det ar under vad ogat plockar upp bredvid en LJUS text
   som drar all uppmarksamhet. Svart skugga mot nastan svart ar ingen skugga.

   Morka granssnitt loser djup med LJUS I KANTEN i stallet: det som ligger
   overst fangar mest ljus och far darfor den ljusaste konturen. Kanttrappan
   gar at samma hall som valor- och skuggtrappan — hogst upp ljusast — sa alla
   tre sager samma sak och forstarker varandra.

   ★ LJUSA LAGET ROR VI INTE. Dar fungerar skuggan (vitt kort, morkt kast) och
     en ljusare kant hade bara gjort flikarna suddiga i konturen. */
[data-theme="dark"] .ovf{--ovf-kant:#303030}
[data-theme="dark"] .ovf-cell.n1{--ovf-yta:#171717;--ovf-kant:#343434}
[data-theme="dark"] .ovf-cell.n2{--ovf-yta:#131313;--ovf-kant:#2b2b2b}
[data-theme="dark"] .ovf-cell.n3{--ovf-yta:#101010;--ovf-kant:#242424}
/* #1c1c1c = --inset i morkt lage = shoutradens exakta bakgrund. */
[data-theme="dark"] .ovf-flik[data-ovf-toggle]{--ovf-yta:#1c1c1c;--ovf-kant:#3c3c3c}
/* Ensam cell (ingen Override-flik att sitta ihop med) far bada axlarna. */
.ovf-cell.ensam{--ovf-form:polygon(0 0,100% 0,calc(100% - var(--ovf-axel)) 100%,var(--ovf-axel) 100%);
  padding-left:calc(var(--ovf-axel) + 11px);padding-right:calc(var(--ovf-axel) + 11px);
  margin-left:0}
/* ═══ DJUPET KOMMER FRAN SKUGGA, INTE FARG  (Kenta 2026-09-20) ══════════════
   "ingen glow tack, sen nagon skugga sa det blir typ att dem gar in i varandra"

   FORSTA FORSOKET la en fargton i den dolda delen sa att glaset (18 % / 14 %
   genomslapp + blur 16px) smetade ut den till ett falt. Tekniskt fint — men
   det LASES som en glow, och glow ar inte husets sprak. Tonerna ar borta.

   I stallet gor SKUGGAN jobbet, och den ar RIKTAD. Varje flik kastar sin
   skugga UTAT, mot den granne som ligger under den. Riktningen foljer
   z-ordningen (mitten 5, sedan 4-3-2 utat): mitten kastar at bada hall,
   sidocellerna bara utat. Det ar det som far raden att lasa som flikar som
   skjuts in i varandra i stallet for som en remsa med streck i.

   ★ drop-shadow, aldrig box-shadow. box-shadow ritar runt elementets FYRKANT
     och sticker ut som tva vingar vid de lutande axlarna; drop-shadow foljer
     clip-path. Samma skal som filhuvudet redan ger for markeringen.
   ★ Skuggan maste vara MORKARE an den under baren, annars syns den inte mot
     den 20 px som ligger bakom glaset. 20 % / 72 % ar uppmatta varden, inte
     valda — under det forsvinner skarven, over det ser raden smutsig ut. */
/* ═══ SKUGGTRAPPAN — FOLJER VALORTRAPPAN, STEG FOR STEG ═════════════════════
   Forsta bygget gav ALLA flikar samma skugga: -3px/1px/3px vid 20 %. Da
   kastar den understa cellen lika tungt som mitten, och da ar det ingen
   stapel — det ar fem plattor som rakar ligga bredvid varandra. Djup betyder
   att det som ligger hogst kastar mest.

   Mitten ligger overst i z-stapeln OCH sticker ut sex px langre ner, med fri
   luft under sig — den far darfor bade det langsta sidokastet och en riktig
   skugga NEDAT. Utat avtar bade offset och styrka i tre steg.

   ★ VARIABLERNA SATTS AV DJUPKLASSEN, FILTRET AV RIKTNINGSKLASSEN. Bada har
     specificitet (0,2,0), sa en regel `.ovf-cell.n1{filter:...}` hade
     overskrivit `.ovf-cell.v{filter:...}` beroende pa ordningen i filen —
     riktningen hade forsvunnit for vissa celler och skuggan lagt sig at fel
     hall. Med `--d`/`--s1`/`--s2` kan de tva axlarna satas oberoende. */
.ovf-cell.n1{--d:4px;--s1:var(--ovf-sk1);--s2:var(--ovf-sk2)}
.ovf-cell.n2{--d:3px;--s1:var(--ovf-sk2);--s2:var(--ovf-sk3)}
.ovf-cell.n3{--d:2px;--s1:var(--ovf-sk3);--s2:var(--ovf-sk3)}
.ovf-cell.v{filter:drop-shadow(calc(-1 * var(--d,3px)) 1px 4px var(--s1,var(--ovf-sk2)))
                   drop-shadow(0 2px 3px var(--s2,var(--ovf-sk3)))}
.ovf-cell.h{filter:drop-shadow(var(--d,3px) 1px 4px var(--s1,var(--ovf-sk2)))
                   drop-shadow(0 2px 3px var(--s2,var(--ovf-sk3)))}
/* ★ OFFSET >= BLUR, ANNARS SMETAR SKUGGAN UPPAT IN I BAREN. `1px 6px` nadde
   fem px OVANFOR flikens overkant, alltsa in i baren — och eftersom baren ar
   glas (86 % opak) skymtade den igenom som precis den skugga som inte ska
   finnas i motet. Med y-offset 4 och blur 4 borjar skuggan exakt vid
   overkanten och gar bara nedat. Sidokastet ar kvar i full styrka. */
.ovf-flik[data-ovf-toggle]{filter:drop-shadow(-5px 4px 4px var(--ovf-sk1))
                                  drop-shadow(5px 4px 4px var(--ovf-sk1))
                                  drop-shadow(0 5px 7px var(--ovf-sk1))}
.ovf-cell.ensam{filter:drop-shadow(0 1px 1px var(--ovf-sk1))
                       drop-shadow(0 3px 4px var(--ovf-sk2))}
a.ovf-cell:hover::after,a.ovf-cell:focus-visible::after{background:var(--ovf-hov)}
a.ovf-cell:hover,a.ovf-cell:focus-visible{color:var(--ink);outline:0}
a.ovf-cell:focus-visible::before{background:var(--accent)}
/* Innehallet i cellerna. Alla tal tabulara sa kolumnen inte hoppar. */
.ovf-par{display:flex;align-items:baseline;gap:5px}
/* Tva talpar i samma cell behover luft emellan, inte ett streck. */
.ovf-par + .ovf-par{margin-left:13px}
/* ═══ TYPOGRAFISK RYTM ═══════════════════════════════════════════════════════
   Forsta bygget gav tal 11,5 px och etikett 9 px — en skillnad pa 2,5 px. Ogat
   las dem da som EN grot, och raden blev fem likadana gra plattor utan nagot
   att vila pa. Nu 14 mot 8: **talet ar nastan dubbelt sa stort som ordet**.
   Spärrningen gar omvänt mot storleken (02c-regeln): talet -.02em, etiketten
   +.14em. Det ar den enskilt storsta skillnaden mellan "statusrad" och "snyggt". */
.ovf-par b{font-size:14px;font-weight:800;color:var(--ink);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;line-height:1}
.ovf-par span{font-size:8px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);line-height:1}
/* Delarstrecket ar borttaget (2026-09-20). Tva tal med var sin etikett behover
   ingen linje emellan — mellanrummet gor redan jobbet, och strecket var det
   enda lodrata i en rad som annars bara har vagrata linjer. */
.ovf-del{display:none}
/* ★ ANSIKTEN PROVADES OCH BACKADES (2026-09-20). Husregeln sager "ansikten
   fore siffror nar det handlar om manniskor" — men den galler nar det FINNS
   plats for ett ansikte. Fyra 17 px-avatarer i ett 24 px band blev fargat
   brus: Fortnite-skins ar for detaljerade for den storleken, de las inte som
   personer, och raden vaxte fran 545 till 593 px. Den grona pricken sager
   samma sak pa 5 px och stor ingen. Bygg dem inte igen utan att forst ge
   dem en yta som taler det (luckan, inte raden). */

/* ★ INGEN RING. Prickens box-shadow var den sista glowen i raden
   (Kenta 2026-09-20: "sen ser jag glow ändå?"). En 5 px prick i --live syns
   utmärkt utan halo — det är FÄRGEN som bär signalen, inte ljuset runt den. */
.ovf-pk{width:5px;height:5px;border-radius:50%;background:var(--live);flex:none}
/* ═══ FRAMSTEGET AR CELLENS UNDERKANT ═══════════════════════════════════════
   Den lilla stapeln inuti cellen var 52 px dekoration som konkurrerade med
   talet bredvid sig. Borta. I stallet ar SJALVA CELLENS NEDRE KANT matare:
   en 2 px accentlinje som gar 85 % av vagen. Den kostar noll bredd, den
   laser som en del av flikens material i stallet for som ett diagram, och
   den ar det enda pa hela raden som ror sig av vad Kenta sjalv gor.

   ★ clip-path MASTE ligga pa fyllningen ocksa. Formen bor pa ::before och
     ::after — ett vanligt absolut barn skulle sticka ut genom de lutande
     axlarna och rita en liten tunga utanfor fliken. */
/* ★ FYLLNINGEN MASTE VARA LIKA STOR SOM CELLEN. Forsta forsoket gjorde
   elementet 2 px hogt och la clip-path pa det — men polygonen raknas pa
   ELEMENTETS egen box, sa `13px 0 -> 0 100%` blev en nastan vagrat kil pa
   2 px hojd och linjen klipptes snett. Nu tacker elementet hela cellen (och
   far darmed exakt samma form), och SJALVA LINJEN ar en bakgrund langst ned
   som fylls till --p procent. */
.ovf-fyll{position:absolute;inset:0;display:block;z-index:2;pointer-events:none;
  clip-path:var(--ovf-form);
  background:linear-gradient(to right,
    var(--accent) 0 var(--p,0%), color-mix(in srgb,var(--line) 70%,transparent) var(--p,0%) 100%)
    bottom left / 100% 2px no-repeat}
.ovf-cell.hjalte:hover .ovf-fyll{
  background:linear-gradient(to right,
    var(--accent-ink) 0 var(--p,0%), color-mix(in srgb,var(--line) 70%,transparent) var(--p,0%) 100%)
    bottom left / 100% 2px no-repeat}
.ovf-tal{font-size:14px;font-weight:800;color:var(--ink);letter-spacing:-.02em;
  text-transform:none;font-variant-numeric:tabular-nums;line-height:1}
.ovf-tal em{font-style:normal;color:var(--dim);font-weight:700;font-size:10px;
  letter-spacing:0}
/* Ordet efter talet ar en etikett, inte ett tal — samma viskning som
   "totalt" och "idag" pa andra sidan, sa raden far EN typografisk regel. */
.ovf-kvar{font-size:8px;font-weight:700;color:var(--faint);letter-spacing:.14em;
  text-transform:uppercase;line-height:1}
/* Nedrakningen ar DAMPAD tills den betyder nagot. Guld ar en varning, och
   "om 3 dygn" ar ingen varning. Under tre timmar tands den; nar det pagar
   blir den gron. Samma regel som resten av huset: farg = betydelse. */
.ovf-ned{font-size:12px;font-weight:800;color:var(--ink2);letter-spacing:-.01em;
  text-transform:none;font-variant-numeric:tabular-nums;line-height:1}
.ovf-ned.snart{color:var(--gold)}
.ovf-ned.nu{color:var(--live)}
.ovf-cik{font-size:11px;color:var(--faint);line-height:1}
.ovf-cell:hover .ovf-cik{color:var(--dim)}

/* ── LUCKAN ───────────────────────────────────────────────────────────── */
.ovf-lucka{pointer-events:auto;position:absolute;
  /* ★ RAKNAT FRAN RADENS TOPP, sa den maste innehalla BADE det som gar in
     under baren och mittflikens extra djup. Missas --ovf-mitt hamnar luckan
     sex px upp i fliken. */
  top:calc(var(--ovf-h) + var(--ovf-mitt) + var(--ovf-gap));left:50%;
  transform:translateX(-50%) translateY(-7px);
  width:min(860px,calc(100vw - 28px));
  background:var(--card);border:1px solid var(--line2);border-radius:var(--r);
  box-shadow:var(--skl-e3,0 2px 8px rgba(0,0,0,.4));overflow:hidden;
  opacity:0;visibility:hidden;
  transition:opacity .14s ease-out,transform .14s ease-out,visibility 0s .14s}
.ovf.oppen .ovf-lucka{opacity:1;visibility:visible;
  transform:translateX(-50%) translateY(0);transition-delay:0s}
/* ★ TOPPEN SKA SYNAS (Kenta 2026-09-14). Skymningen låg på position:fixed
   inset:0 och tonade ner navbaren också. .ovf hänger i wrappens underkant och
   är redan sidbred (.skl-wrap har ingen max-width), så left:0/right:0 räcker —
   inget 100vw som drar in en vågrät rullist. top:0 är alltså exakt barens
   underkant, och 100vh täcker allt därunder. Baren står kvar tänd. */
/* ★ top:var(--ovf-in), inte 0. Raden borjar nu 20 px UPPE I baren, sa top:0
   hade lagt skymningen over barens nedre kant. Barens underkant ar --ovf-in
   ned fran radens topp. "Baren star kvar tand" galler fortfarande. */
.ovf-skym{position:absolute;top:var(--ovf-in);left:0;right:0;height:100vh;z-index:-1;
  background:color-mix(in srgb,var(--ink) 40%,transparent);
  -webkit-backdrop-filter:blur(1.5px);backdrop-filter:blur(1.5px);
  opacity:0;visibility:hidden;transition:opacity .16s ease-out,visibility 0s .16s}
[data-theme="dark"] .ovf-skym{background:rgba(0,0,0,.66)}
.ovf.oppen .ovf-skym{opacity:1;visibility:visible;transition-delay:0s;pointer-events:auto}

.ovf-hd{display:flex;align-items:center;gap:10px;height:38px;padding:0 13px;
  background:var(--inset);border-bottom:1px solid var(--line)}
.ovf-hd .ic{width:20px;height:20px;border-radius:var(--r-sm);flex:0 0 auto;
  display:grid;place-items:center;background:var(--accent-wash);color:var(--accent-ink);
  font-size:11px}
.ovf-hd .tt{font-size:12.5px;font-weight:700;color:var(--ink);white-space:nowrap}
.ovf-hd .sub{font-size:11.5px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;min-width:0}
.ovf-hd .hoger{margin-left:auto;display:flex;align-items:center;gap:6px;flex:0 0 auto}
.ovf-hela{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 10px;
  border-radius:var(--r-sm);background:var(--card);border:1px solid var(--line2);
  font-size:11.5px;font-weight:700;color:var(--ink2);text-decoration:none}
.ovf-hela:hover{color:var(--ink);border-color:var(--dim)}
.ovf-hela i{color:var(--ink2);font-size:11px}
.ovf-hela .m{font-weight:600;color:var(--dim);font-size:10.5px}
.ovf-x{width:24px;height:24px;border-radius:var(--r-sm);border:1px solid var(--line2);
  background:var(--card);color:var(--dim);display:grid;place-items:center;
  cursor:pointer;font-size:11px}
.ovf-x:hover{color:var(--ink)}

/* ★ minmax(0,1fr), INTE 1fr: ett grid-spår har min-width:auto, så kodradernas
   min-content-bredd trycker ut sidokolumnen ur luckan. Klassisk grid-fälla. */
.ovf-kropp{display:grid;grid-template-columns:minmax(0,1fr) 268px;
  align-items:stretch;height:min(62vh,486px);overflow:hidden}
.ovf-kropp>.ovf-vanster{display:flex;flex-direction:column;min-height:0}
.ovf-sido{background:var(--inset);border-left:1px solid var(--line);padding:9px 10px;
  display:flex;flex-direction:column;gap:8px;overflow:auto;scrollbar-width:thin}

.ovf-term{display:flex;align-items:center;gap:9px;padding:9px 13px 7px;
  background:var(--inset)}
.ovf-prompt{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;
  font-weight:700;color:var(--accent-ink);flex:0 0 auto}
.ovf-in{flex:1;min-width:0;height:30px;border-radius:var(--r);
  border:1px solid var(--line2);background:var(--card);color:var(--ink);padding:0 11px;
  font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:700;font-size:13px}
.ovf-in::placeholder{font-family:Roboto,system-ui,sans-serif;font-weight:400;
  font-size:12.5px;color:var(--dim);letter-spacing:0}
.ovf-in:focus{outline:0;border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.ovf-tr{font-size:11.5px;color:var(--dim);flex:0 0 auto;white-space:nowrap}
.ovf-tr b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}

.ovf-filt{display:flex;align-items:center;gap:4px;padding:0 13px 8px;
  background:var(--inset);border-bottom:1px solid var(--line);flex-wrap:wrap}
.ovf-fc{height:22px;padding:0 9px;border-radius:999px;border:1px solid var(--line2);
  background:var(--card);color:var(--ink2);font-family:Roboto,system-ui,sans-serif;
  font-weight:700;font-size:10.5px;cursor:pointer;display:inline-flex;
  align-items:center;gap:5px;white-space:nowrap;
  transition:background .12s ease-out,color .12s ease-out,border-color .12s ease-out}
.ovf-fc:hover{color:var(--ink);border-color:var(--dim)}
.ovf-fc[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--card)}
.ovf-fc i{font-style:normal;font-size:9.5px;color:var(--faint);
  font-variant-numeric:tabular-nums}
.ovf-fc[aria-pressed="true"] i{color:color-mix(in srgb,var(--card) 62%,transparent)}
.ovf-fc.oanv{margin-left:auto}
.ovf-fc.oanv[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:#fff}
[data-theme="dark"] .ovf-fc.oanv[aria-pressed="true"]{color:#1b1403}

/* ── LISTAN: 32 px rad, klistrad grupprubrik ─────────────────────────────
   44 px kom av att hela raden var en knapp och behövde vara en träffyta. Nu
   är knappen knappen, och raden får vara en rad. Gruppen stod som etikett på
   varje rad — 26 upprepningar — och är en rubrik per grupp i stället. */
.ovf-tlista{flex:1;min-height:0;overflow:auto;scrollbar-width:thin;position:relative}
/* Nytt-gruppen ligger ALLTID först och bär grön etikett. Bandet som låg
   ovanför listan är borttaget: två ytor för samma sak, och den översta raden i
   listan är närmare "högst upp" än en egen låda ovanför den. */
.ovf-ghd.nytt{color:var(--live);
  background:color-mix(in srgb,var(--live) 6%,var(--inset));
  border-bottom-color:color-mix(in srgb,var(--live) 24%,var(--line))}
[data-theme="dark"] .ovf-ghd.nytt{background:color-mix(in srgb,var(--live) 10%,var(--inset))}
.ovf-ghd .sett{margin-left:auto;font-family:Roboto,system-ui,sans-serif;
  font-weight:700;font-size:10.5px;letter-spacing:.02em;text-transform:none;
  color:var(--ink2);background:none;border:0;cursor:pointer;padding:3px 6px;
  border-radius:var(--r-sm)}
.ovf-ghd .sett:hover{background:var(--card);color:var(--ink)}
.ovf-ghd{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:7px;
  height:23px;padding:0 12px;background:var(--inset);
  border-bottom:1px solid var(--line);font-size:9.5px;font-weight:800;
  letter-spacing:.11em;text-transform:uppercase;color:var(--dim)}
.ovf-ghd i{font-style:normal;margin-left:auto;font-size:10px;letter-spacing:.02em;
  color:var(--faint);font-variant-numeric:tabular-nums}
/* ★ KNAPPARNA I LOD (Kenta 2026-09-14: "ser bara bökigt ut"). Taggkolumnen
   var `auto` — då flyttade Kopiera-knappen i sidled beroende på om raden hade
   en tagg och hur lång den var, och 31 knappar hamnade på sju olika x-lägen.
   Ett FAST spår (110 px) gör att knappen står på samma pixel i varje rad.
   Rader utan tagg lämnar spåret tomt; det kostar 110 px belöningsbredd och
   köper en rak kant, vilket är rätt byte när ögat ska hitta knappen. */
/* ★ KODKOLUMNEN ÄR minmax(0,auto), INTE ETT FAST TAL. Med 148 px kapades
   `ChatWhereDoYouFindTheKey` (24 tecken ≈ 166 px) mitt i ordet, och en halv
   kod ser ut som ett fel även om knappen kopierar hela. auto = max-content,
   alltså exakt så brett som den LÄNGSTA koden i listan behöver — och minmax
   med 0 som golv gör att spåret ändå kan krympa om en framtida kod är orimligt
   lång, i stället för att trycka ut belöningen ur luckan. */
.ovf-trad{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr) 110px auto;
  align-items:center;gap:10px;width:100%;padding:0 9px 0 12px;min-height:32px;
  background:var(--card);border-bottom:1px solid var(--line)}
.ovf-trad:hover,.ovf-trad.pa{background:var(--zebra)}
.ovf-trad.pa{box-shadow:inset 0 0 0 1px var(--accent)}
.ovf-trad .tk{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11.5px;
  font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;letter-spacing:-.02em}
.ovf-trad .tb{font-size:11.5px;color:var(--ink2);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.ovf-trad .tt{font-size:10px;font-weight:700;color:var(--dim);white-space:nowrap;
  background:var(--inset);border-radius:999px;padding:2px 7px;line-height:1;
  justify-self:end;max-width:110px;overflow:hidden;text-overflow:ellipsis}
/* Nytt sedan du var här — grön, och den enda taggen som är en händelse. */
.ovf-trad .tt.ny{color:var(--live);background:var(--live-wash)}
.ovf-trad.brukad .tk{color:var(--dim);text-decoration:line-through;
  text-decoration-thickness:1px}
.ovf-trad.brukad .tb{color:var(--faint)}
/* Strecket är en envägsdörr om det inte går att ta bort. Bara STRUKNA rader
   är klickbara — affordansen kostar noll pixlar och syns på pekaren. */
.ovf-trad.brukad{cursor:pointer}
.ovf-trad.kopierad{background:color-mix(in srgb,var(--live) 8%,var(--card))}
.ovf-trad.kopierad .tk,.ovf-trad.kopierad .tb{color:var(--live)}
/* ★ grid-column:4 — INTE bara ett fast taggspår. Grid placerar barn i tur och
   ordning, så en rad UTAN tagg la kopieringsknappen i taggens spår (110 px) i
   stället för i sitt eget. Uppmätt: knapparna stod på x=752 och x=808, alltså
   56 px isär, vilket är exakt vad som såg bökigt ut. Raden behöver inte en tom
   platshållar-span; en rad i CSS gör samma sak. */
.ovf-kop{grid-column:4;display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 8px;
  border-radius:var(--r-sm);border:1px solid var(--line2);background:var(--inset);
  color:var(--ink2);font-family:Roboto,system-ui,sans-serif;font-weight:700;
  font-size:11px;cursor:pointer;flex:0 0 auto;
  transition:background .12s ease-out,color .12s ease-out,border-color .12s ease-out}
.ovf-kop:hover{background:var(--card);color:var(--ink);border-color:var(--dim)}
.ovf-kop i{font-size:11px}
.ovf-kopt{font-size:10.5px}
.ovf-kop.kopierad{background:var(--live-wash);color:var(--live);
  border-color:color-mix(in srgb,var(--live) 34%,var(--line))}
/* ★ REDIGERA (admin, Kenta 2026-09-27). Pennan får ett eget 5:e spår bara på
   admin-rader — besökarnas rader behåller sina fyra och flyttar inte en pixel.
   Redigeringsläget döljer radens innehåll och låter formuläret ta hela bredden.
   Inga lodräta lister, ingen glow: fokus visas med kantfärg. */
.ovf-trad.adm{grid-template-columns:minmax(0,auto) minmax(0,1fr) 110px auto auto;gap:6px 10px}
.ovf-trad.adm .ovf-kop{margin-right:-4px}
.ovf-pen{grid-column:5;display:inline-grid;place-items:center;width:24px;height:24px;
  border-radius:var(--r-sm);border:1px solid transparent;background:transparent;
  color:var(--dim);font-size:11px;cursor:pointer;padding:0;
  transition:background .12s ease-out,color .12s ease-out,border-color .12s ease-out}
.ovf-pen:hover,.ovf-pen:focus-visible{background:var(--inset);color:var(--ink);
  border-color:var(--line2);outline:0}
.ovf-trad.red{display:block;padding:5px 9px 5px 12px;background:var(--zebra)}
.ovf-trad.red > :not(.ovf-red){display:none}
.ovf-red{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) auto auto;
  align-items:center;gap:6px}
.ovf-red input{min-width:0;height:26px;border-radius:var(--r-sm);
  border:1px solid var(--line2);background:var(--card);color:var(--ink);padding:0 8px;
  font-family:Roboto,system-ui,sans-serif;font-weight:600;font-size:11.5px}
.ovf-red input.rk{font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:700;
  letter-spacing:-.02em}
.ovf-red input:focus{outline:0;border-color:var(--accent)}
.ovf-red button{height:26px;padding:0 10px;border-radius:var(--r-sm);cursor:pointer;
  font-family:Roboto,system-ui,sans-serif;font-weight:800;font-size:11px}
.ovf-red .ok{border:0;background:color-mix(in srgb,var(--accent) 74%,#000);color:#fff}
[data-theme="dark"] .ovf-red .ok{background:var(--accent);color:#07121f}
.ovf-red .ok:disabled{opacity:.6;cursor:default}
.ovf-red .av{border:1px solid var(--line2);background:var(--inset);color:var(--ink2)}
.ovf-red .av:hover{background:var(--card);color:var(--ink)}
.ovf-red .fel{grid-column:1/-1;font-size:11px;font-weight:700;color:var(--danger,#d64545)}
.ovf-tom{padding:22px 13px;text-align:center;font-size:12.5px;color:var(--dim)}
.ovf-tom b{display:block;color:var(--ink);font-size:13px;margin-bottom:3px}

/* ── SIDOKOLUMNEN ─────────────────────────────────────────────────────── */
.ovf-blk{border:1px solid var(--line);border-radius:var(--r);background:var(--card);
  padding:8px 9px}
.ovf-bl{display:flex;align-items:center;gap:6px;font-size:9.5px;font-weight:800;
  letter-spacing:.11em;text-transform:uppercase;color:var(--dim);margin-bottom:7px}
.ovf-bl .hg{margin-left:auto;letter-spacing:.02em;text-transform:none;
  font-size:10.5px;font-weight:700;color:var(--ink2)}
.ovf-hnd{display:flex;align-items:flex-start;gap:8px}
.ovf-hnd .hi{width:26px;height:26px;border-radius:var(--r-sm);flex:0 0 auto;display:grid;
  place-items:center;background:var(--inset);color:var(--ink2);font-size:13px}
.ovf-hnd.nu .hi{background:var(--live-wash);color:var(--live)}
.ovf-hnd .hk{min-width:0}
.ovf-hnd .hn{display:block;font-size:12.5px;font-weight:700;color:var(--ink);
  line-height:1.25}
.ovf-hnd .ht{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:700;
  color:var(--dim);margin-top:1px}
.ovf-hnd.nu .ht{color:var(--live)}
.ovf-hnd .hd{display:block;font-size:11px;color:var(--ink2);margin-top:4px;line-height:1.4}
.ovf-pdot{width:6px;height:6px;border-radius:50%;background:var(--live);flex:0 0 auto}
.ovf-sen{margin-top:8px;border-top:1px solid var(--line);padding-top:7px;display:grid;gap:4px}
.ovf-sen .r{display:flex;align-items:baseline;gap:7px;font-size:11px;color:var(--dim)}
.ovf-sen .r b{color:var(--ink2);font-weight:700;flex:1;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.ovf-sen .r .n{flex:0 0 auto;font-variant-numeric:tabular-nums}
.ovf-var{display:grid;gap:5px}
.ovf-vr{display:grid;grid-template-columns:16px minmax(0,1fr) auto;align-items:center;gap:8px}
.ovf-vr .vi{width:16px;height:16px;border-radius:3px;display:grid;place-items:center;
  color:var(--card);font-size:9px;background:var(--ink2)}
.ovf-vr .vn{font-size:11.5px;font-weight:700;color:var(--ink);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.ovf-vr .vt{font-size:11px;font-weight:700;color:var(--dim);
  font-variant-numeric:tabular-nums}
.ovf-vr .vs{grid-column:2/-1;font-size:10.5px;color:var(--dim);line-height:1.35;
  margin-top:-2px}
.ovf-vr.f-gold .vi{background:var(--gold)}
.ovf-vr.f-cheatmaster .vi{background:var(--champ)}
.ovf-vr.f-hacker .vi{background:var(--elite)}
.ovf-sum{display:flex;align-items:center;gap:8px;margin-top:8px;padding-top:7px;
  border-top:1px solid var(--line);font-size:10.5px;color:var(--dim)}
.ovf-sum b{margin-left:auto;color:var(--ink2);font-weight:700;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.ovf-gast{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--ink2);
  background:var(--accent-wash);border-radius:var(--r-sm);padding:8px 10px}
.ovf-adm{display:flex;gap:5px}
.ovf-adm input{flex:1;min-width:0;height:28px;border-radius:var(--r-sm);
  border:1px solid var(--line2);background:var(--card);color:var(--ink);padding:0 8px;
  font-family:Roboto,system-ui,sans-serif;font-weight:600;font-size:11.5px}
.ovf-adm button{height:28px;padding:0 11px;border-radius:var(--r-sm);border:0;
  background:color-mix(in srgb,var(--accent) 74%,#000);color:#fff;
  font-family:Roboto,system-ui,sans-serif;font-weight:800;font-size:11.5px;cursor:pointer}
[data-theme="dark"] .ovf-adm button{background:var(--accent);color:#07121f}

/* ── FOTEN ────────────────────────────────────────────────────────────── */
.ovf-fot{display:flex;align-items:center;gap:9px;min-height:34px;padding:6px 13px;
  background:var(--inset);border-top:1px solid var(--line);font-size:11px;
  color:var(--dim);flex-wrap:wrap}
.ovf-fot .st{display:flex;align-items:center;gap:5px;color:var(--ink2)}
.ovf-fot .st i{font-style:normal;width:14px;height:14px;border-radius:50%;
  background:var(--card);border:1px solid var(--line2);color:var(--dim);
  font-weight:800;font-size:8.5px;line-height:12px;text-align:center;flex:0 0 auto}
.ovf-fot .sep{color:var(--line2)}
.ovf-kbd{margin-left:auto;display:inline-flex;align-items:center;gap:4px;
  color:var(--dim);font-size:10.5px}
.ovf-kbd kbd{font-family:Roboto,system-ui,sans-serif;font-weight:700;font-size:9.5px;
  line-height:14px;min-width:16px;height:16px;padding:0 4px;text-align:center;
  background:var(--card);border:1px solid var(--line2);border-radius:3px;color:var(--ink2)}

/* ── DRIFT-FLIKEN (2026-09-16) ─────────────────────────────────────────
   Samma trapets som Override, men GUL: ytan är guld-tonad inset, kanten guld.
   ★ DEN LIGGER UNDER OVERRIDE, INTE BREDVID (Kenta 2026-09-16: "gula ska gå
   in i override och override ska lite shadow över så nästan den gula växt ut
   från override"). Fliken skjuts in 2×axel+2 px bakom Override — då göms
   hela dess vänstra \-sida bakom Overrides /-kant, och det som syns börjar
   exakt där Override slutar. Override får z-index över och en skugga som
   faller ÅT HÖGER (drop-shadow följer clip-path), så den gula ser ut att
   komma fram underifrån. Står fliken ensam (ingen Override) står den i
   mitten utan inskjut.
   Det är en LÄNK, inte en knapp: den fäller ingen lucka, den går till
   serverstatus-sidan där hela komponentlistan finns. Ikonen är plattformens
   godkända Bootstrap-ikon (bi-xbox/bi-playstation/bi-windows/…). */
.ovf{gap:0}
/* ★ 2026-09-20: HAR STOD `z-index:2`. Den raden ar aldre an cellerna och
   satte bara Override over drift-fliken (som har 1). Nar sidocellerna kom
   fick de 2-3-4 — och eftersom den HAR regeln star SENARE i filen an
   `.ovf-flik[data-ovf-toggle]{z-index:5}` och har EXAKT samma specificitet
   (0,2,0) vann tvaan. Override hamnade alltsa BAKOM alla sina egna celler.
   Uppmatt: computed z-index 2 mot cellernas 4.
   ★ Skriv aldrig samma selektor pa tva stallen i den har filen. Vill du andra
     mittflikens djup: gor det i djupblocket langre upp, inte har. */
.ovf.har-drift .ovf-flik[data-ovf-toggle]{
  filter:drop-shadow(0 1px 1px color-mix(in srgb,var(--ink) 15%,transparent))
         drop-shadow(5px 2px 5px color-mix(in srgb,var(--ink) 24%,transparent))}
[data-theme="dark"] .ovf.har-drift .ovf-flik[data-ovf-toggle]{
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.6)) drop-shadow(7px 1px 7px rgba(0,0,0,.8))}
.ovf-dr{--ovf-yta:color-mix(in srgb,var(--gold) 16%,var(--inset));
  --ovf-kant:color-mix(in srgb,var(--gold) 55%,var(--line2));
  --ovf-hov:color-mix(in srgb,var(--gold) 26%,var(--inset));
  z-index:1;color:color-mix(in srgb,var(--gold) 70%,var(--ink));text-decoration:none;
  transform-origin:left center;
  animation:ovfDrVax .6s cubic-bezier(.2,.9,.25,1.06) both}
/* Inskjutet bakom Override — bara när Override står direkt före. */
/* ★ 2026-09-20: drift-fliken ar nu en CELL i hogerspalten och arver spaltens
   overlapp. Den gamla dubbla inskjutningen (-2 x axeln) behovdes bara for att
   dolja kilen mellan tva trapetser — med parallellogram finns ingen kil. */
.ovf-dr{
  padding-left:calc(3 * var(--ovf-axel) + 8px)}
.ovf-dr:hover,.ovf-dr:focus-visible{color:var(--ink)}
.ovf-dr:focus-visible::before{background:var(--gold)}
[data-theme="dark"] .ovf-dr{color:var(--gold)}
.ovf-dr .ik{font-size:12px;line-height:1;display:block;color:inherit}
.ovf-dr .ik+.ik{margin-left:-3px}
.ovf-dr .pk{width:6px;height:6px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 0 0 color-mix(in srgb,var(--gold) 60%,transparent);
  animation:ovfDrPuls 2.2s ease-out infinite}
.ovf-dr .ok{font-weight:500;letter-spacing:0;text-transform:none;font-size:10.5px;
  color:var(--dim);white-space:nowrap;display:inline-flex;align-items:center;gap:4px;
  margin-left:3px;padding-left:9px;border-left:1px solid color-mix(in srgb,var(--gold) 35%,var(--line2))}
.ovf-dr .ok i{font-size:11px;color:var(--live)}
@keyframes ovfDrVax{from{transform:translateX(-48px) scaleX(.7);opacity:0}
  55%{opacity:1}to{transform:none;opacity:1}}
@keyframes ovfDrPuls{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--gold) 55%,transparent)}
  70%{box-shadow:0 0 0 5px transparent}100%{box-shadow:0 0 0 0 transparent}}

/* ═══ COMPANION-TEXTEN  (Kenta 2026-09-20, forslag D) ═════════════════
   *"bredvid om 1 d vill jag ha en text bara ingen flik"* — och sedan
   *"B och C sa man ser kon ocksa"*. Alltsa: bricka + namn + kotal + pil.
   INGEN flik: ingen yta, ingen kant, ingen clip-path. Det ar skillnaden.

   ★ BRICKAN AR RADENS EGEN. Tonerna ar inte valda har utan kopierade rakt av
     fran `.ovf-n` (Override-brickan, ~rad 683). Den loser redan ljust lages
     guldproblem: guld som TEXT direkt pa sidbakgrunden ger 4,05:1
     (tokenkommentaren i forre_pulse.css sager det sjalv), sa i LJUST lage bar
     brickan `--ink` pa guldtvatt och i MORKT lage `--gold`. Samma bricka, samma
     losning, noll nya beslut.

   ★ LANKTEXTEN STAR PA `--dim`, INTE `--faint`. `--faint` (#5c5c5c) ger 2,6:1
     mot `--inset` och duger for cellernas mikroetiketter — tokenfilen sager
     sjalv att den bar "dekor, inte text som maste lasas". En LANK ar text som
     maste lasas. `--dim` ger 5,16:1 mot `--bg` i morkt lage.

   ★ HOJDEN: `--ovf-h` med `padding-top:--ovf-in`, precis som cellerna. De 20
     px som ligger bakom barens glas ar padding, sa texten centreras i de 28 px
     som faktiskt syns — inte i hela 48. */
.ovf-txt{display:inline-flex;align-items:center;gap:8px;
  height:var(--ovf-h);padding-top:var(--ovf-in);margin-left:18px;
  min-width:0;white-space:nowrap;text-decoration:none;
  transition:color .12s ease-out}
.ovf-txt-sn{font-size:8px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  line-height:1;border-radius:999px;padding:3px 7px;
  color:var(--ink);background:color-mix(in srgb,var(--gold) 20%,transparent)}
[data-theme="dark"] .ovf-txt-sn{color:var(--gold);
  background:color-mix(in srgb,var(--gold) 16%,transparent)}
/* ★ NAMNET BAR FULL SVARTA/VITHET (Kenta 2026-09-20: *"gorna gora texten vit
   eller nagot snyggt med i morkt lage, snygga till texten"*). Raden ar annars
   `--ink2` rakt igenom; att namnet ar det enda som star pa `--ink` ar inte en
   avvikelse utan ett BESKED: det ar radens enda lank. Talen sager nagot, den
   har tar dig nagonstans — och da ska den se klickbar ut.
   Spaerren ar 0,08em, ett snapp over resten: ett ord i versaler pa 10,5 px
   behover luft mellan bokstaverna for att lasas som ett NAMN och inte som en
   etikett. */
.ovf-txt-nm{font-size:10.5px;font-weight:800;letter-spacing:.08em;color:var(--ink)}
.ovf-txt-de{font-size:10px;color:var(--faint)}
.ovf-txt-ko{font-size:10.5px;font-weight:600;color:var(--dim)}
.ovf-txt-ko b{font-weight:800;color:var(--ink2);font-variant-numeric:tabular-nums}
/* Pilen glider tva px at hoger vid hover. Enda rorelsen pa raden, och den
   pekar at det hall lanken gar — dekor som betyder nagot. */
.ovf-txt-pil{font-size:11px;line-height:1;color:var(--dim);margin-left:-3px;
  transition:transform .14s ease-out,color .12s ease-out}
.ovf-txt:hover .ovf-txt-pil,.ovf-txt:focus-visible .ovf-txt-pil{
  color:var(--ink);transform:translateX(2px)}
.ovf-txt:hover .ovf-txt-ko,.ovf-txt:focus-visible .ovf-txt-ko{color:var(--ink2)}
.ovf-txt:focus-visible{outline:2px solid var(--accent);outline-offset:2px;
  border-radius:var(--r-sm)}

/* ═══ TRAPPAN NER NAR UTRYMMET TAR SLUT ══════════════════════════
   ★ UPPMATT I MOCKUPEN (design-proposals/companion-textlank-2026-09-20.html),
     textens overskott forbi radens hogerkant (minus = ryms):
         bredd:            A 171 px · B 178 · C 198 · **D 246**
         1200 utan drift:  −55      1200 MED drift: **+65**
         1024 utan drift:  **+16**   1024 med drift: **+136**
     D spricker alltsa bade nar driftfliken tands och pa en 1024 px skarm.
     Att lata den spilla ar inget alternativ — den skulle ligga utanfor
     appbredden.

   ★ DET SOM FALLER ar talet forst, sedan brickan, sist hela texten. ALDRIG
     namnet eller lanken: de bar hela poangen. Utan brickan sager namnet anda
     det den ska — sidan den lankar till berattar sjalv att appen inte ar
     slappt.
   ★ Steg 2 finns for att en matning visade **+0,7 px** med bara talet borta.
     En halv pixel over kanten ar fortfarande over kanten. */
/* ═══ "VI SES PA BUSSEN"  (Kenta 2026-09-20, forslag B) ════════════════
   *"nagon animation pa vanster sida som kommer fram sen fadar ut och kommer
   fram igen efter ett litet tag"*. Ligger i den fria ytan till VANSTER om
   raknarcellerna — uppmatt 240,5 px, och pa den sida som enligt radens egen
   regel bar VARLDEN, inte DIG. Ett "vi ses" hor hemma dar.

   ★ INGEN ABSOLUT POSITIONERING. `.ovf-sida.v` ar `justify-content:flex-end`,
     sa ett forsta barn med `margin-right:auto` hamnar langst till vanster och
     cellerna star kvar precis dar de stod. Inget kan hamna ovanpa nagot.

   ★ BUSSFARGEN AR ETT PAR, INTE ETT VARDE. Kentas `#6DB8FA` ar lysande i
     morkt lage (**8,82:1** mot `--bg`) men **1,89:1** i ljust — gransen for
     text ar 4,5. Bada matta alfakomponerat pa live. Ljust lage far darfor
     `#1268c9`, som rakar vara husets egen `--accent-ink` ljus (4,86:1) och
     samma kulor. Morkt lage behaller Kentas varde exakt.
     (Sidoupptackt: `--accent-ink` i MORKT lage ar `#5cb4f8` — en nivaa fran
      `#6DB8FA`. Bussen ar alltsa inte en fjarde accent pa raden utan i
      praktiken radens befintliga bla.)

   ★ "LITE TJOCK" (Kentas ord) = vikt 900 och 11 px, ett snapp over radens
     800/10,5. Tillrackligt for att ordet ska lasas som ett EGENNAMN utan att
     bli en rubrik bland 8 px-etiketter. */
.ovf{--ovf-buss:#1268c9}
[data-theme="dark"] .ovf{--ovf-buss:#6DB8FA}
/* ★ CENTRERAT OVER MINIPROFILEN (Kenta 2026-09-20: *"kan du fa det mer
   centrerat over miniprofilen?"*). Forsta versionen lag `margin-right:auto`
   och klistrade sig i rutnatets vanstra kant — 158,6 px bred med mitten pa
   754, medan vansterspalten (`.shell.c3`, `250px 1fr 320px`, padding 16) har
   sin mitt pa **rutnatets vanstra kant + 141 px**. Sextio px fel.

   ★ OCH DEN MASTE VARA ABSOLUT POSITIONERAD. Att i stallet ge den en fast
     bredd pa 2 x 141 = 282 px och centrera innehallet hade varit finare i
     flodet — men den fria ytan till vanster om cellerna ar **240,5 px**.
     En 282 px bred lada i flodet trycker cellerna at hoger, och da flyttar
     Override ur mitten. Det ar det enda som absolut inte far handa.
   ★ DARFOR TVA LAGER: det yttre placerar (absolut, `translateX(-50%)`), det
     inre animerar (opacitet + egen translate). Ett enda element hade behovt
     bada transformerna samtidigt. */
.ovf-sida.v{position:relative}
.ovf-bud{position:absolute;left:var(--ovf-bud-c,141px);top:0;
  transform:translateX(-50%);
  height:var(--ovf-h);padding-top:var(--ovf-in);
  display:flex;align-items:center;pointer-events:none}
.ovf-bud-i{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;opacity:0}
.ovf-bud .fr{font-size:10.5px;font-weight:600;letter-spacing:.04em;color:var(--dim)}
.ovf-bud .bs{font-size:11px;font-weight:900;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ovf-buss)}
.ovf-bud .ik{width:22px;height:13px;flex:none;color:var(--ovf-buss);display:block}

/* ★ IN FRAN VANSTER, STA STILL, UT AT HOGER. Bussen aker — riktningen ar
   sjalva poangen, och den ar den enda rorelsen pa hela raden. */
.ovf-bud-i{transform:translateX(-26px);
  transition:opacity .38s ease-out,transform .52s cubic-bezier(.2,.9,.25,1.02)}
.ovf.bud-in .ovf-bud-i{opacity:1;transform:none}
.ovf.bud-ut .ovf-bud-i{opacity:0;transform:translateX(30px);
  transition:opacity .34s ease-in,transform .46s ease-in}

/* ★ UTRYMMET TAR SLUT FORE 1150 px. Meddelandet ar ~150 px och den fria ytan
   ar 240 px vid 1200 — men den krymper med rutnatet, och en krock skulle
   trycka cellerna in under Override. Da ar det meddelandet som gar, inte
   talen. */
@media (max-width:1150px){ .ovf-bud{display:none} }

/* ═══ RADEN SCROLLAR UPP MED SIDAN ════════════════════════════════
   Kenta 2026-09-20: *"nar jag scrollar sa ska override raden scrollas upp den
   med annars ar den i vagen for annat i den raden"*.

   ★ PROBLEMET AR ATT RADEN ARVER BARENS STICKY. `.ovf` ar `position:absolute`
     i `.skl-wrap`, som ar `position:sticky;top:0`. Baren SKA sta kvar — den ar
     navigationen — men raden hangde med och lag som ett 30 px band over allt
     som passerade under den. `.skl-wrap`s `margin-bottom` reserverar plats i
     flodet, men den marginalen scrollar bort; baren star kvar. Alltsa hamnade
     sidans innehall rakt under raden.

   ★ LOSNINGEN AR EN TRANSFORM, INTE EN OMBYGGNAD. Att flytta `.ovf` ur det
     sticky elementet hade brutit allt som raden mater mot baren (halet i
     linjen, skuggbandet, mittens lasning). I stallet forskjuts raden uppat
     exakt lika mycket som sidan scrollat, tills den ar helt bakom baren:
     `translateY(-min(scrollY, synlig hojd))`. Den ser alltsa ut att scrolla
     precis som resten av sidan, och forsvinner in under baren.
   ★ `.ovf-skym` ar `position:absolute` (rad ~1109), inte fixed — darfor ar
     transformen ofarlig for luckans skymning. Ar luckan OPPEN star raden still:
     panelen ar forankrad i fliken och far inte glida ivag under fingret. */
.ovf{will-change:transform}
/* ★ HELT BORTA NAR DEN AR UPPE, inte bara flyttad. Flikarnas
   `drop-shadow(0 5px 7px)` racker ~12 px under formen, sa en rad som star
   precis bakom barens underkant kastar anda sin skugga NEDANFOR baren —
   ovanpa sidans innehall, och ovanpa barens egen skuggband. Det blev ett
   morkare band under baren sa fort man scrollat. `visibility:hidden` tar bort
   bade skuggan och all traff; den sitter redan helt bakom baren nar den slar
   till, sa det syns ingen blinkning. */
.ovf.ovf-uppe{pointer-events:none;visibility:hidden}

.ovf.har-drift .ovf-txt-ko,
.ovf.har-drift .ovf-txt-de,
.ovf.har-drift .ovf-txt-sn{display:none}
@media (max-width:1100px){
  .ovf-txt-ko,.ovf-txt-de{display:none}
  .ovf.har-drift .ovf-txt{display:none}
}

/* ── MOBIL: ETT ARK, EN RULLNING ──────────────────────────────────────────
   Nästlad scroll i två spalter är fel på telefon: man drar i listan och hela
   sidan rörs. Arket får en rullning och rubrikraden fastnar i toppen. */
@media (max-width:820px){
  .ovf-lucka{width:calc(100vw - 12px);max-height:calc(100dvh - 190px);
    overflow:auto;overscroll-behavior:contain}
  .ovf-kropp{grid-template-columns:1fr;height:auto;overflow:visible}
  .ovf-tlista,.ovf-sido{overflow:visible;min-height:0}
  .ovf-sido{border-left:0;border-top:1px solid var(--line)}
  .ovf-hd{position:sticky;top:0;z-index:3}
  .ovf-kop{height:36px;padding:0 10px}
  .ovf-trad{min-height:44px;grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"kod knapp" "bel knapp";row-gap:1px;padding:6px 9px 6px 12px}
  .ovf-trad .tk{grid-area:kod}
  .ovf-trad .tb{grid-area:bel}
  .ovf-trad .tt{display:none}
  .ovf-trad .ovf-kop{grid-area:knapp}
  .ovf-kopt{display:none}
  .ovf-fot{flex-wrap:wrap;row-gap:6px}
  .ovf-kbd{display:none}
  .ovf-hela .m{display:none}
  /* ★ CELLERNA FALLER, SPALTERNA STÅR KVAR. `display:none` på .ovf-sida hade
     tagit bort grid-cellerna och flyttat Override till första kolumnen —
     alltså vänsterställd. Tomma spalter håller mitten i mitten.
     ★ OCH DEN HÄR REGELN MÅSTE LIGGA I max-width-BLOCKET. Första försöket
     hamnade i @media (prefers-reduced-motion:reduce) — ankaret
     `.ovf-dr .pk{animation:none}` bor där, inte i mobilblocket. Resultatet:
     cellerna försvann på DESKTOP för alla som kör med reducerad rörelse
     påslaget. Uppmätt på live innan det rättades. */
  .ovf-cell:not(.ensam){display:none}
  /* ★ TEXTEN AR INGEN CELL och trillar darfor inte bort med regeln ovan —
     utan den har raden hade den statt ensam bredvid Override pa telefon.
     Och regeln MASTE ligga har, i max-width-blocket. Samma falla som
     2026-09-20 da en regel hamnade i `prefers-reduced-motion` i stallet och
     cellerna forsvann pa DESKTOP for alla som kor med reducerad rorelse. */
  .ovf-txt{display:none}
  /* Meddelandet ar heller ingen cell — samma sak, samma block. */
  .ovf-bud{display:none}
  .ovf-flik[data-ovf-toggle]{
    --ovf-form:polygon(0 0,100% 0,calc(100% - var(--ovf-axel)) 100%,var(--ovf-axel) 100%)}
}
@media (prefers-reduced-motion:reduce){
  .ovf-lucka,.ovf-skym,.ovf-kar,.ovf-trad,.ovf-kop,.ovf-flik{transition:none}
  .ovf-dr,.ovf-dr .pk{animation:none}
  /* ★ BUSSEN KOR INTE, MEN MEDDELANDET KOMMER ANDA. Uppmatt pa live
     2026-09-20: Kentas egen Chrome har `prefers-reduced-motion: reduce`
     paslaget — samma installning som samma dag fick hela flikraden att
     forsvinna pa hans skarm nar en regel hamnade i FEL media-block. Darfor
     star de har raderna i ratt block, och darfor faller bara FORFLYTTNINGEN
     bort. En ren opacitetstoning ar inte "motion" i WCAG 2.3.3:s mening, sa
     meddelandet tonar fram pa plats i stallet — langsammare, sa bytet blir
     mjukt och inte hackigt. */
  .ovf-bud-i,.ovf.bud-ut .ovf-bud-i{transform:none;
    transition:opacity .6s ease-in-out}
}