/*!
 * FORRE.NU — BLADET: skalets aktiva flik ansluter till shoutraden
 * =============================================================================
 * VAR LIGGER VAD (samma funktion, fem filer)
 *   themes/forre_pulse/views/partials/pulse-skal.php  markupen (.skl-r, .skl-w)
 *   themes/forre_pulse/css/pulse-skal.css             skalets bas — RÖRS INTE HÄR
 *   themes/forre_pulse/css/pulse-skal-blad.css        DEN HÄR FILEN — bara aktiv flik
 *   app/Helpers/PulseAssets.php                       laddar filen (en rad, efter skalet)
 *   design-proposals/navbar-notisen-2026-09-14.html   mockupen, form 4 "Bladet"
 *
 * VARFÖR EN EGEN FIL
 *   pulse-skal.css och pulse-skal.php skrevs båda 2026-09-14 kl 19:36 av en
 *   parallell session. CLAUDE.md fil-säkerhet §3: föredra små dedikerade filer
 *   framför jättefilen när flera sessioner kör samtidigt — en samtidig skrivning
 *   trunkerade forre_pulse.css 2026-07-12. Den här filen rör ingen annans rader.
 *   ROLLBACK = ta bort raden i PulseAssets.php. Ingenting annat rörs.
 *
 * ★ VAD SOM BÄR (rör man dessa rör man resultatet)
 *   §1  tungan       — de 10 px mellan flikens fot och shoutraden
 *   §2  scoop-hörnen — det som gör att fliken SMÄLTER IHOP med raden
 *   §3  z-index      — utan den hamnar tungan UNDER shoutradens topplinje
 *   §4  ikontonen    — aktiv flik behåller rummets färg (Kentas order 2026-09-14)
 *
 * UPPMÄTT PÅ LIVE 2026-09-14, INTE GISSAT (www.forre.nu, inloggad, ljust läge)
 *   .skl        y   0–96   background var(--card)      ← baren
 *   .skl-nav    y   0–56   height:56px, align-items:center
 *   .skl-r      y  10–46   height:36px                 ← alltså 10 px luft under
 *   .skl-shw    y  56–95   background var(--inset) + border-top 1px var(--line)
 *   .skl-r.on   background:var(--inset)                ← REDAN shoutradens färg
 *
 *   Det sista är hela poängen: den aktiva fliken bär redan exakt den färg raden
 *   under har. Bladet uppfinner ingen ny yta — det låter de två mötas.
 *
 * FALLGROPAR SOM REDAN KOSTAT TID
 *   • .skl-shw ligger EFTER .skl-in i DOM och vinner därför stacking utan §3.
 *     Tungan ritas då bakom raden och syns inte alls — det ser ut som att
 *     regeln inte gäller, fast den gör det.
 *   • Tungan måste vara 11 px, inte 10. Shoutraden har border-top 1px; 10 px
 *     slutar precis ovanför linjen och fliken får ett hårstreck under foten.
 *   • corner-shape:scoop är Chrome 139+. Utan den blir tungan rak — fortfarande
 *     ansluten, bara utan svängen. @supports längst ned.
 */

/* ── §3 · STACKING (läs fallgropen ovan innan du rör den) ─────────────────── */
.skl .skl-nav{position:relative;z-index:2}

/* ── §1 · FLIKEN FÅR PLATT FOT ───────────────────────────────────────────── */
.skl-nav .skl-r.on{position:relative;border-radius:var(--r) var(--r) 0 0}

/* ── §1+§2 · TUNGAN MED KONKAVA HÖRN ─────────────────────────────────────────
   left/right -8 gör den 16 px bredare än fliken. De två övre hörnen är scoop,
   alltså URSKURNA — genom urtaget ser man baren (var(--card)), och det är den
   svängen som läser som "fliken och raden är samma blad".
   11 px: 10 px luft + shoutradens 1 px topplinje, som ska brytas just här. */
.skl-nav .skl-r.on::after{
  content:"";position:absolute;left:-8px;right:-8px;top:100%;height:11px;
  background:var(--inset);
  border-top-left-radius:8px;border-top-right-radius:8px;
  corner-shape:scoop;
  pointer-events:none}

/* ── §4 · AKTIV FLIK BEHÅLLER RUMMETS FÄRG ───────────────────────────────────
   Kenta 2026-09-14: "har färger på ikonerna nu dem vill jag ha kvar men kanske
   ha någon mörkare eller ljusare variant när vi väljer BLADET".

   pulse-skal.css släcker rumstonen på aktiv flik (.skl-r.on>svg → --accent-ink)
   och målar de fem tonerna bara på :not(.on). Här kommer tonen tillbaka — i en
   egen variant, så "var jag är" fortfarande är en synlig skillnad och inte bara
   samma ikon igen.

   Tonerna är INTE nya värden: det är exakt de fem pulse-skal.css redan använder,
   lyfta till en variabel så varianten kan räknas ur dem i stället för skrivas av.
   Ändras en ton där ska den ändras här också — annars glider aktiv och vilande
   flik isär. Det är priset för att ha dem på två ställen, och det är billigare
   än att röra en fil en annan session skriver i.

   Riktningen är olika per läge med flit: aktiv flik ligger på var(--inset), som
   är LJUSARE än baren i mörkt läge och MÖRKARE i ljust. Ikonen går åt motsatt
   håll mot sin egen yta, annars tappar den kontrast just där den ska vara som
   tydligast. */
.skl-r--lfg        {--skl-rum:color-mix(in srgb,var(--live) 76%,#000)}
.skl-r--leaderboard{--skl-rum:var(--gold)}
.skl-r--wall       {--skl-rum:var(--accent-ink)}
.skl-r--sprites    {--skl-rum:var(--champ)}
.skl-r--shop       {--skl-rum:var(--elite)}

/* (0,3,1) — slår pulse-skal.css .skl-r.on>svg (0,2,1) utan !important. */
.skl-r.on[class*="skl-r--"]>svg,
.skl-r.on[class*="skl-r--"]>i{color:color-mix(in srgb,var(--skl-rum) 84%,#000)}
[data-theme="dark"] .skl-r.on[class*="skl-r--"]>svg,
[data-theme="dark"] .skl-r.on[class*="skl-r--"]>i{color:color-mix(in srgb,var(--skl-rum) 72%,#fff)}

/* Ordet i aktiv flik står kvar på var(--ink) från pulse-skal.css. Ikonen bär
   rummet, ytan bär "du är här" — två signaler, inte tre. */

/* ── UTAN corner-shape ───────────────────────────────────────────────────────
   Tungan blir rak och exakt lika bred som fliken. Anslutningen finns kvar,
   svängen gör det inte. Inget hoppar och inget går sönder. */
@supports not (corner-shape:scoop){
  .skl-nav .skl-r.on::after{left:0;right:0;border-radius:0}
}

/* ── UTAN SHOUTRAD ───────────────────────────────────────────────────────────
   Saknas .skl-shw finns ingen rad att möta, och tungan skulle hänga som en
   ljusare klump ut i sidan. :has() på föräldern släcker den då. */
.skl:not(:has(.skl-shw)) .skl-nav .skl-r.on::after{display:none}
.skl:not(:has(.skl-shw)) .skl-nav .skl-r.on{border-radius:var(--r)}