/* ============================================================================
   FORRE.NU — pulse-skal.css
   SKALET: den 100 % breda navytan med innehallet last till var(--shell-w).
   Prefix: skl-  ·  Tema: forre_pulse  ·  Bada lagena obligatoriska.

   ★ VARFOR EGEN FIL
     forre_pulse.css har trunkerats vid samtidig sync (verifierat 2026-07-12)
     och ar 217 kB. Skalet ar en egen, avgransad yta -> egen fil, samma monster
     som pulse-topbar-rad1.css och pulse-navbar-marke.css.
     ROLLBACK = ta bort den har filen + raden i app/Helpers/PulseAssets.php.
     Filen ar REN CSS. Den ritar ingenting forran markupen finns (steg 2).

   ★ REGLER SOM GALLER HAR (.clinerules/02-ui-facit.md)
     §0.5  Inga lodrata fargade linjer. Ingen border-left/right som farglist,
           inget box-shadow:inset Npx 0 0. Ton pa HELA ytan i stallet.
     §4    Radius: var(--r) 6px pa ytor, var(--r-sm) 4px pa etiketter,
           50 % pa avatarer/ikonknappar, 999px pa pillar. Inga egna px-radier.
     §7    Sidbredd: var(--shell-w). Ingen egen siffra.
     §8    Ingen gradient som YTBAKGRUND. Ingen hardkodad hex dar token finns.
           Max tva accenter samtidigt synliga.

   ★ TRE NYA TOKENS, OCH VARFOR DE BOR HAR OCH INTE I forre_pulse.css
     Skalet behover tre saker temat inte har: en genomskinlig glasyta, tre
     hojdsteg, och tva tvattar (guld/rott) som motsvarigheter till de befintliga
     --accent-wash och --live-wash. De definieras i den har filen sa att
     rollback ar en radering, inte en merge i en 217 kB-fil som redan
     trunkerats en gang. Blir de delade primitiver flyttas de dit senare.
   ========================================================================== */

:root{
  /* Glasytan. TRANSPARENS, inte toning — backdrop-filter ar inte en gradient. */
  --skl-glas:rgba(255,255,255,.82);
  /* Tre hojdsteg. Djupet kommer fran LJUS och SKUGGA, aldrig fran en tonad yta. */
  --skl-e1:0 1px 2px rgba(16,24,40,.05);
  --skl-e2:0 1px 2px rgba(16,24,40,.06), 0 8px 24px -10px rgba(16,24,40,.16);
  --skl-e3:0 2px 6px rgba(16,24,40,.08), 0 18px 42px -14px rgba(16,24,40,.26);
  /* Tvattar i samma slakt som --accent-wash / --live-wash. */
  --skl-gold-wash:#fdf4e0;
  --skl-danger-wash:#fdeaf0;
}
[data-theme="dark"]{
  --skl-glas:rgba(22,24,29,.86);
  --skl-e1:0 1px 2px rgba(0,0,0,.3);
  --skl-e2:0 1px 2px rgba(0,0,0,.34), 0 10px 28px -12px rgba(0,0,0,.6);
  --skl-e3:0 2px 8px rgba(0,0,0,.4), 0 20px 46px -16px rgba(0,0,0,.7);
  --skl-gold-wash:#2a2112;
  --skl-danger-wash:#2d1520;
}

/* ---------------------------------------------------------------- YTAN ---- */
/* 100 % bred. Innehallet last till var(--shell-w) via .skl-in, sa loggan
   linjerar med railen och avataren med hogerkolumnen. Underkanten ar en
   VAGRAT linje — temats sprak. Inga lodrata linjer nagonstans i filen. */
.skl-wrap{position:sticky;top:0;z-index:80;margin:0 0 14px}
.skl{background:var(--skl-glas);-webkit-backdrop-filter:blur(16px) saturate(1.25);
  backdrop-filter:blur(16px) saturate(1.25);
  border-bottom:1px solid var(--line2);box-shadow:var(--skl-e2);overflow:visible}
.skl-in{max-width:var(--shell-w);margin:0 auto;padding:0 14px}
.skl-nav{display:flex;align-items:center;gap:5px;height:56px;min-width:0}

/* Markets ord. Faller bort forst nar raden blir trang — market ensamt AR
   varumarket, samma beslut som redan star i pulse-topbar-rad1.css:195-215. */
.skl-mk{display:flex;align-items:center;font-size:15.5px;font-weight:900;
  letter-spacing:-.045em;color:var(--ink);flex:0 0 auto;padding-right:9px;
  line-height:1;text-decoration:none}
.skl-mk .skl-ring{width:21px;height:21px;margin-right:8px;flex:0 0 auto;
  color:var(--accent);display:block}
.skl-mk b{color:var(--accent)}
[data-theme="light"] .skl-mk b,:root:not([data-theme="dark"]) .skl-mk b{color:var(--accent-ink)}

/* ----------------------------------------------------------- RUMMEN ------ */
.skl-rum{display:flex;align-items:center;gap:1px;flex:0 0 auto}
.skl-w{position:relative;flex:0 0 auto}
.skl-r{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 8px;
  border-radius:var(--r);font-size:11.5px;font-weight:700;color:var(--dim);
  letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;text-decoration:none;
  transition:background .12s ease-out,color .12s ease-out}
.skl-r:hover,.skl-r:focus-visible{color:var(--ink2);background:var(--inset)}
.skl-r.on{background:var(--inset);color:var(--ink)}
.skl-r>i{font-size:15px;line-height:1;color:var(--dim);flex:0 0 auto;
  display:inline-flex;align-items:center}
.skl-r.on>i{color:var(--accent-ink)}
.skl-r>svg{width:16px;height:16px;color:var(--dim);flex:0 0 auto}
.skl-r.on>svg{color:var(--accent-ink)}
/* Karet: pekar NED nar panelen ar stangd, UPP nar den ar oppen. */
.skl-kar{display:inline-flex;align-items:center;color:var(--faint);margin-left:-1px;
  font-size:10px;line-height:1;transform:rotate(90deg);transition:transform .18s ease}
.skl-kar>i{font-size:10px;line-height:1;display:inline-flex}
.skl-w:hover .skl-kar,.skl-w:focus-within .skl-kar{transform:rotate(-90deg)}
/* Brickan. Fargen har en ROLL: gron=narvaro, bla=nagot att gora,
   rott=nagon vantar pa ditt svar, gra=tyst. Aldrig farg for dekoration. */
.skl-t{font-size:9.5px;font-weight:800;height:16px;min-width:16px;padding:0 4px;
  border-radius:999px;display:inline-grid;place-items:center;
  font-variant-numeric:tabular-nums;flex:0 0 auto}
.skl-t.narv{background:var(--live-wash);color:var(--live)}
.skl-t.gora{background:var(--accent-wash);color:var(--accent-ink)}
.skl-t.tyst{background:var(--inset);color:var(--dim)}
.skl-t.svar{background:color-mix(in srgb,var(--danger) 26%,transparent);color:var(--ink)}
[data-theme="dark"] .skl-t.svar{background:color-mix(in srgb,var(--danger) 30%,transparent);
  color:#ff9aad}

/* ------------------------------------------------------------- SOKET ----- */
.skl-sok{margin-left:auto;display:flex;align-items:center;gap:8px;height:34px;
  padding:0 11px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--inset);font-size:12.5px;color:var(--dim);min-width:106px;
  max-width:270px;flex:1 1 106px;overflow:hidden;white-space:nowrap;
  text-decoration:none;transition:border-color .12s ease-out}
.skl-sok:hover,.skl-sok:focus-visible{border-color:var(--line2)}
.skl-sok>svg{width:15px;height:15px;flex:0 0 auto}
.skl-sok>i{font-size:14px;line-height:1;flex:0 0 auto;display:inline-flex}
.skl-sok .skl-txt{overflow:hidden;text-overflow:ellipsis}
/* Ctrl+K-chippet bor i PALETTEN, inte i raden. Uppmatt: pa 1200 px last bredd
   blir faltet ~106 px och chippet at upp hela ordet ("S." blev kvar). Klassen
   star kvar for paletten sjalv. */
.skl-kbd{margin-left:auto;font-size:9.5px;font-weight:700;padding:2px 5px;
  border-radius:var(--r-sm);background:var(--card);color:var(--dim);
  box-shadow:0 0 0 1px var(--line);flex:0 0 auto}

/* ------------------------------------------- EPIC + DISCORD (ALLTID) ----- */
/* Tva knappar som ALLTID syns, ocksa utloggat — sa man vet utan att leta.
   Gruppen avgransas med VAGRATA regler? Nej: med luft och en egen yta.
   §0.5 forbjuder lodrata linjer, sa gruppen bar en insatt platta i stallet. */
.skl-kop{display:flex;align-items:center;gap:2px;padding:3px 4px;margin:0 1px;
  flex:0 0 auto;border-radius:999px;background:var(--inset)}
.skl-kb{position:relative;display:grid;place-items:center;width:30px;height:30px;
  border-radius:50%;color:var(--ink2);text-decoration:none;
  transition:background .12s ease-out,color .12s ease-out}
.skl-kb:hover,.skl-kb:focus-visible{background:var(--card);color:var(--ink)}
.skl-kb svg{width:17px;height:17px}
/* Pricken bar laget. Ingen text i raden — hela meningen bor i panelen. */
.skl-d{position:absolute;right:1px;bottom:1px;width:7px;height:7px;border-radius:50%;
  background:var(--dim);opacity:.5;box-shadow:0 0 0 2px var(--inset)}
.skl-kb:hover .skl-d{box-shadow:0 0 0 2px var(--card)}
.skl-d.klar{background:var(--live);opacity:1}
.skl-d.halv{background:var(--gold-r);opacity:1}

/* --------------------------------------------------- IKONKNAPPARNA ------ */
.skl-ib{position:relative;display:grid;place-items:center;width:32px;height:32px;
  border-radius:50%;color:var(--ink2);text-decoration:none;flex:0 0 auto;
  transition:background .12s ease-out,color .12s ease-out}
.skl-ib:hover,.skl-ib:focus-visible{background:var(--inset);color:var(--ink)}
.skl-ib svg{width:19px;height:19px}
.skl-ib>i{font-size:17px;line-height:1;display:inline-flex}
.skl-tema{border:0;background:none;cursor:pointer;font:inherit;padding:0}
.skl-tema:hover,.skl-tema:focus-visible{background:var(--inset)}
.skl-pt{position:absolute;top:-1px;right:-2px;min-width:15px;height:15px;padding:0 4px;
  border-radius:999px;font-size:9px;font-weight:800;display:grid;place-items:center;
  font-variant-numeric:tabular-nums;line-height:1;color:#fff;
  box-shadow:0 0 0 2px var(--card)}
.skl-pt.gora{background:var(--accent)}
.skl-pt.svar{background:var(--danger)}
/* Du: F-ringen som matare runt avataren. Ringen har redan en glugg. */
.skl-du{display:flex;align-items:center;gap:3px;height:34px;padding:0 4px 0 2px;
  border-radius:999px;text-decoration:none;flex:0 0 auto;
  transition:background .12s ease-out}
.skl-du:hover,.skl-du:focus-visible{background:var(--inset)}
.skl-du svg{width:12px;height:12px;color:var(--faint);flex:0 0 auto}
/* Avataren: vyn levererar <img> eller .skl-av som platshallare. Runt, 26 px,
   med en harfin ring i stallet for en border (border andrar elementets storlek). */
.skl-du .skl-av,.skl-du img{width:26px;height:26px;border-radius:50%;display:block;
  flex:0 0 auto;background:var(--inset);box-shadow:0 0 0 1px var(--line);object-fit:cover}

/* --------------------------------------------------------- PANELERNA ---- */
/* Tredje hojdsteget. Tva rader som bar SVARET, en fot som ar utgangen. */
.skl-p{position:absolute;top:calc(100% + 8px);left:0;width:250px;z-index:1200;
  background:var(--card);border:1px solid var(--line2);border-radius:var(--r);
  box-shadow:var(--skl-e3);overflow:hidden;
  opacity:0;visibility:hidden;transform:translateY(-6px) scale(.985);
  transform-origin:top left;
  transition:opacity .15s ease-out,transform .15s cubic-bezier(.2,.9,.3,1),
    visibility .15s}
.skl-w:hover>.skl-p,.skl-w:focus-within>.skl-p{opacity:1;visibility:visible;
  transform:none}
.skl-p.bred{width:296px}
/* Panelen far aldrig sticka ut ur fonstret. De tre hograste rummen oppnar
   hogerstallt; alla far ett tak pa fonsterbredden minus sidluften. */
.skl-p{max-width:calc(100vw - 28px)}
.skl-rum .skl-w:nth-last-child(-n+3)>.skl-p{left:auto;right:0;transform-origin:top right}
.skl-p.hoger{left:auto;right:0;transform-origin:top right}
.skl-p.bred.hoger{width:336px}

.skl-pr{display:flex;align-items:center;gap:9px;padding:8px 11px;
  border-top:1px solid var(--line);text-decoration:none;
  transition:background .12s ease-out}
.skl-pr:first-child{border-top:0}
.skl-pr:hover,.skl-pr:focus-visible{background:var(--inset)}
.skl-pi{width:26px;height:26px;border-radius:var(--r-sm);display:grid;
  place-items:center;background:var(--inset);color:var(--dim);flex:0 0 auto;
  box-shadow:0 0 0 1px var(--line)}
.skl-pi svg{width:15px;height:15px}
.skl-pi>i{font-size:14px;line-height:1;display:inline-flex}
/* Ansikte i en panelrad. Rund, harfin ring via box-shadow — aldrig border,
   den andrar elementets storlek. */
.skl-pav{width:26px;height:26px;border-radius:50%;display:block;flex:0 0 auto;
  background:var(--inset);box-shadow:0 0 0 1px var(--line)}
/* Rariteten bor i ikonchippets FYLLNING — aldrig som en linje (§0.5). */
.skl-pi.my{background:color-mix(in srgb,var(--danger) 16%,transparent);color:var(--danger)}
.skl-pi.le{background:color-mix(in srgb,var(--gold-r) 18%,transparent);color:var(--gold)}
.skl-pi.ep{background:var(--champ-w);color:var(--champ)}
.skl-pi.ra{background:var(--dia-w);color:var(--dia)}
.skl-pi.narv{background:var(--live-wash);color:var(--live)}
.skl-pi.gora{background:var(--accent-wash);color:var(--accent-ink)}
.skl-pi.svar{background:var(--skl-danger-wash);color:var(--danger)}
.skl-pk{min-width:0;flex:1 1 auto;display:grid;gap:1px}
.skl-pt2{font-size:12px;color:var(--ink2);line-height:1.35;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.skl-pt2 b{color:var(--ink);font-weight:700}
.skl-pm{font-size:10.5px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.skl-hg{font-size:10.5px;font-weight:800;padding:3px 7px;border-radius:var(--r-sm);
  background:var(--inset);color:var(--dim);white-space:nowrap;flex:0 0 auto;
  font-variant-numeric:tabular-nums}
.skl-hg.narv{background:var(--live-wash);color:var(--live)}
.skl-hg.gora{background:var(--accent-wash);color:var(--accent-ink)}
.skl-hg.svar{background:var(--skl-danger-wash);color:var(--danger)}
.skl-hg.guld{background:var(--skl-gold-wash);color:var(--gold)}
.skl-fot{display:flex;align-items:center;justify-content:center;gap:6px;
  padding:9px 11px;border-top:1px solid var(--line);background:var(--inset);
  font-size:11.5px;font-weight:700;color:var(--accent-ink);text-decoration:none;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:background .12s ease-out}
.skl-fot:hover,.skl-fot:focus-visible{background:var(--accent-wash)}
.skl-fot svg{width:12px;height:12px}
.skl-fot>i{font-size:11px;line-height:1;display:inline-flex}

.skl-p.du{width:288px;left:auto;right:0;transform-origin:top right}

/* ---- Panelhuvud: "Kraver svar" och liknande. VAGRAT avdelare, aldrig lodrat. */
.skl-ph{display:flex;align-items:center;gap:8px;padding:9px 11px 8px;
  font-size:9.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  color:var(--dim);border-bottom:1px solid var(--line)}
.skl-ph>i{font-size:12px;line-height:1;display:inline-flex;letter-spacing:0}
.skl-pn{margin-left:auto;font-style:normal;font-size:10px;font-weight:800;
  letter-spacing:0;min-width:16px;height:16px;padding:0 4px;border-radius:999px;
  display:inline-grid;place-items:center;font-variant-numeric:tabular-nums;
  background:color-mix(in srgb,var(--danger) 26%,transparent);color:var(--ink)}
[data-theme="dark"] .skl-pn{background:color-mix(in srgb,var(--danger) 30%,transparent);
  color:#ff9aad}

/* ---- Fragerad: svarsknapparna ligger PA raden, inte under den. Det var hela
   skalet till att klockan gick fran 740 till 436 px i mockupen. */
.skl-ask .skl-pr,.skl-ar{background:color-mix(in srgb,var(--danger) 4%,var(--card))}
[data-theme="dark"] .skl-ask .skl-pr,[data-theme="dark"] .skl-ar{
  background:color-mix(in srgb,var(--danger) 8%,var(--card))}
.skl-ar{cursor:default}
.skl-ak{display:flex;align-items:center;gap:4px;flex:0 0 auto}
.skl-ja,.skl-nej{display:grid;place-items:center;width:28px;height:28px;padding:0;
  border:0;border-radius:var(--r-sm);cursor:pointer;font:inherit;
  transition:filter .12s ease-out}
.skl-ja>i,.skl-nej>i{font-size:14px;line-height:1;display:inline-flex}
.skl-ja{background:var(--live-wash);color:var(--live)}
.skl-nej{background:var(--inset);color:var(--dim)}
.skl-ja:hover,.skl-nej:hover{filter:brightness(1.08)}
[data-theme="dark"] .skl-ja:hover,[data-theme="dark"] .skl-nej:hover{filter:brightness(1.3)}

/* ---- Profilmenyn. */
.skl-mh{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:center;
  padding:11px;text-decoration:none;border-bottom:1px solid var(--line);
  transition:background .12s ease-out}
.skl-mh:hover{background:var(--inset)}
.skl-mav{width:38px;height:38px;border-radius:50%;display:block;flex:0 0 auto;
  background:var(--inset);box-shadow:0 0 0 1px var(--line)}
.skl-mk2{min-width:0;display:grid;gap:2px}
.skl-mk2 .n{font-size:14px;font-weight:800;color:var(--ink);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.skl-mk2 .m{font-size:11px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.skl-mg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:8px}
.skl-mi{display:flex;align-items:center;justify-content:center;gap:7px;height:36px;
  border-radius:var(--r);background:var(--inset);color:var(--ink2);font-size:12px;
  font-weight:700;text-decoration:none;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;transition:background .12s ease-out,color .12s ease-out}
.skl-mi>i{font-size:14px;line-height:1;display:inline-flex;flex:0 0 auto}
.skl-mi:hover{background:var(--accent-wash);color:var(--accent-ink)}
.skl-mf1{grid-template-columns:minmax(0,1fr) !important}
.skl-mf{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:8px;
  border-top:1px solid var(--line);background:var(--inset)}
.skl-mb{display:flex;align-items:center;justify-content:center;gap:7px;height:34px;
  padding:0 8px;border:0;border-radius:var(--r);background:var(--card);
  box-shadow:0 0 0 1px var(--line);color:var(--ink2);font:inherit;font-size:11.5px;
  font-weight:700;text-decoration:none;cursor:pointer;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;transition:background .12s ease-out,
  color .12s ease-out}
.skl-mb>i{font-size:12px;line-height:1;display:inline-flex;flex:0 0 auto}
.skl-mb:hover{background:var(--accent-wash);color:var(--accent-ink)}

/* Kopplingspanelernas huvud (Epic/Discord). */
.skl-kh{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;
  align-items:center;padding:11px 11px 0}
.skl-ki{display:grid;place-items:center;width:34px;height:34px;
  border-radius:var(--r);background:var(--inset);flex:0 0 auto}
.skl-ki svg{width:19px;height:19px;color:var(--ink)}
.skl-ki.klar{background:var(--live-wash)}
.skl-ki.klar svg{color:var(--live)}
.skl-ki.halv{background:var(--skl-gold-wash)}
.skl-ki.halv svg{color:var(--gold)}
.skl-kn{min-width:0;display:grid;gap:1px}
.skl-kn .t{font-size:13.5px;font-weight:800;color:var(--ink)}
.skl-kn .m{font-size:11px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.skl-kp{margin:8px 11px 10px;font-size:11.5px;color:var(--ink2);line-height:1.55}
.skl-kp b{color:var(--ink)}
/* Epics egen varumarkesregel: morkt underlag, market till vanster, EN rad text.
   Darfor --board-bg/--board-ink, temats enda medvetet morka yta i bada lagena. */
.skl-cta{display:flex;align-items:center;justify-content:center;gap:8px;height:36px;
  margin:0 11px 11px;border-radius:var(--r);background:var(--board-bg);
  color:var(--board-ink);font-size:12.5px;font-weight:800;text-decoration:none;
  transition:filter .12s ease-out}
.skl-cta:hover,.skl-cta:focus-visible{filter:brightness(1.18)}
.skl-cta svg{width:16px;height:16px}

/* ----------------------------------------------------- GASTKNAPPARNA ---- */
.skl-lg,.skl-bli{display:grid;place-items:center;height:32px;padding:0 13px;
  border-radius:var(--r);font-size:12.5px;font-weight:800;text-decoration:none;
  flex:0 0 auto}
.skl-lg{color:var(--ink2)}
.skl-lg:hover,.skl-lg:focus-visible{background:var(--inset);color:var(--ink)}
/* Fylld primar: --accent ger bara 3,1:1 mot vitt. Morkad 74 % ger 4,9:1. */
.skl-bli{background:color-mix(in srgb,var(--accent) 74%,#000);color:#fff;
  box-shadow:var(--skl-e1)}
[data-theme="dark"] .skl-bli{background:var(--accent);color:#07121f}
.skl-bli:hover,.skl-bli:focus-visible{filter:brightness(1.08)}

/* ------------------------------------------------------- SHOUTRADEN ----- */
/* Ligger I ytan som en lag rad, inte som ett eget block pa sidan. */
.skl-shw{border-top:1px solid var(--line);background:var(--inset)}
.skl-sh{display:flex;align-items:center;gap:10px;height:38px}
.skl-sh .rad{flex:1;min-width:0;font-size:12.5px;color:var(--ink2);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:7px;
  text-decoration:none}
.skl-sh .rad b{color:var(--ink);font-weight:700}
.skl-sh .rad .sp{color:var(--dim);font-weight:400;overflow:hidden;
  text-overflow:ellipsis}
.skl-sh .pl{width:20px;height:20px;border-radius:var(--r-sm);display:grid;
  place-items:center;flex:0 0 auto;color:#fff;background:var(--accent)}
.skl-sh .pl svg{width:12px;height:12px}
.skl-sh .pl>i{font-size:11px;line-height:1;display:inline-flex}
.skl-sh .rad>i{font-size:13px;line-height:1;color:var(--gold);flex:0 0 auto;
  display:inline-flex}
.skl-sh .pl.tw{background:#7c3fd6}
.skl-sh .pl.ki{background:#2f8f0b}
.skl-sh .pl.yt{background:#c4302b}
.skl-rx{display:flex;align-items:center;gap:5px;flex:0 0 auto}
.skl-v{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 8px;
  border-radius:999px;background:var(--card);color:var(--dim);font-size:10.5px;
  font-weight:800;text-decoration:none;box-shadow:0 0 0 1px var(--line);
  transition:background .12s ease-out,color .12s ease-out}
.skl-v:hover,.skl-v:focus-visible{background:var(--inset);color:var(--ink2)}
.skl-v svg{width:12px;height:12px}
.skl-v>i{font-size:11px;line-height:1;display:inline-flex}
.skl-v.guld{color:var(--gold)}
.skl-gast{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--dim);
  flex:0 0 auto}
.skl-gast svg{width:13px;height:13px}
.skl-gast>i{font-size:12px;line-height:1;display:inline-flex}
.skl-bra{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 9px;
  border-radius:999px;font-size:11.5px;font-weight:700;color:var(--ink2);
  text-decoration:none;flex:0 0 auto}
.skl-bra:hover,.skl-bra:focus-visible{background:var(--card)}
.skl-bra i{font-style:normal;font-size:10px;font-weight:800;color:var(--dim);
  font-variant-numeric:tabular-nums}
.skl-bra svg{width:12px;height:12px;color:var(--faint)}
.skl-bra>i{font-size:11px;line-height:1;color:var(--faint);display:inline-flex}

/* --------------------------------------- SEX RUM (om Dueller blir eget) -- */
/* .tat sätts av vyn nar raden bar SEX etiketter. Ordet faller bort och soket
   krymper till en ikon — samma ordning som vid smala skarmar, bara tidigare.
   Priset for en sjatte etikett, utskrivet i CSS:en. */
.skl-wrap.tat .skl-mk .skl-ord{display:none}
.skl-wrap.tat .skl-mk{padding-right:6px}
.skl-wrap.tat .skl-mk .skl-ring{margin-right:0}
.skl-wrap.tat .skl-r{padding:0 7px;gap:5px}
.skl-wrap.tat .skl-sok{min-width:40px;flex:0 1 40px;padding:0 10px;gap:0}
.skl-wrap.tat .skl-sok .skl-txt,.skl-wrap.tat .skl-sok .skl-kbd{display:none}
/* Sex rum pa 1024 px: behovde 998 px i en 996 px behallare. Fyra pixlar ur
   kopplingsgruppens sidluft, uppmatt — inte gissat. */
.skl-wrap.tat .skl-kop{padding:3px 2px}

/* ------------------------------------------------------------ TRANGT ---- */
/* Nar raden blir trang faller ORDET bort forst, sedan sokfaltets text.
   Aldrig ett rum. Aldrig Epic eller Discord — de tva ar hela poangen. */
@media (max-width:1330px){
  .skl-mk .skl-ord{display:none}
  .skl-mk{padding-right:6px}
  .skl-mk .skl-ring{margin-right:0}
  .skl-r{padding:0 8px;gap:5px}
}
@media (max-width:1230px){
  .skl-sok{min-width:44px;flex:0 1 44px;padding:0 9px;gap:0}
  .skl-sok .skl-txt,.skl-sok .skl-kbd{display:none}
}
/* Under 1100 px blir brickan en PRICK. Fargen — och darmed vad som vantar —
   star kvar; siffran bor anda i panelen och i railen, dar det finns plats att
   saga vad den betyder. Ett rum faller aldrig bort. */
@media (max-width:1100px){
  .skl-t{width:8px;min-width:8px;height:8px;padding:0;border-radius:50%;
    font-size:0;line-height:0;overflow:hidden}
  .skl-t.narv{background:var(--live)}
  .skl-t.gora{background:var(--accent)}
  .skl-t.tyst{background:var(--line2)}
  .skl-t.svar{background:var(--danger)}
  .skl-r{gap:5px;padding:0 7px}
  /* Karet ar en genvag, inte information: panelen oppnas anda pa hover och
     pa fokus. Under 1100 px vager etiketten mer an pilen. */
  .skl-kar{display:none}
}
/* 821-900 px: soket lamnar raden helt. Ctrl+K och stabdackets Sok star kvar,
   och under 821 px ager ladan + bottenraden navigeringen. */
@media (max-width:900px){
  .skl-sok{display:none}
  .skl-rum{margin-left:auto}
  /* Gasten: "Logga in" lamnar raden, "Bli medlem" star kvar. Samma beslut
     som forre_pulse.css:2342 redan gor for .tb-login under 560 px — och
     ladan har bada kvar. Uppmatt: utan detta spiller raden 10 px pa 821 px. */
  .skl-lg{display:none}
  /* 821-900 px: bara det AKTIVA rummet bar sitt ord, de ovriga blir ikon +
     prick. Uppmatt: fem etiketter + ikoner + prickar behover 832 px och
     behallaren ar 793 pa 821 px skarm.
     ★ OPEN: den riktiga fragan ar om skalet ska lamna over till ladan redan
     vid 900 px i stallet for 820. Det kraver att ladans egen brytpunkt i
     forre_pulse.css flyttas (delad fil, backup kravs) — det hor till
     mobilpasset, inte hit. Tills dess ar det har regeln. */
  .skl-r:not(.on)>span{display:none}
  .skl-r{padding:0 8px}
}
/* Under 820 px ager pulse-drawer.php + pulse-bottom-nav.php navigeringen,
   precis som i dag. Skalet lamnar plats — mobilpasset ar ett eget steg. */
@media (max-width:820px){
  .skl-wrap{display:none}
}

@media (prefers-reduced-motion:reduce){
  .skl-p{transition:none}
  .skl-kar{transition:none}
  .skl-r,.skl-ib,.skl-kb,.skl-sok,.skl-fot,.skl-cta,.skl-v{transition:none}
}

/* ============================================================================
   NAR SKALET AR PA: html.skl doljer dagens krom pa DESKTOP.
   Under 821 px rors ingenting — ladan (pulse-drawer) och bottenraden
   (pulse-bottom-nav) ager mobilen precis som i dag, och burgaren bor i .top.
   Mobilpasset ar ett eget steg.
   Rollback: $FORRE_SKAL = false, eller ?skal=av. Da satts html.skl aldrig och
   det har blocket matchar ingenting.
   ========================================================================== */
@media (min-width:821px){
  html.skl .top,
  html.skl .sbar,
  html.skl .sbox{display:none !important}
}

/* ============================================================================
   PROVSWITCH FOR MORKA PALETTEN (2026-09-12).
   Kenta: "inte samma morka som hela-temat". Ratt — mockupen kordes med
   APP-PALETTEN (neutral gra: #121212 / #171717 / #2f2f2f), inte med sajtens
   egen morka (tracker-grafit: #0f1114 / #16181d / #2d3139).

   Skillnaden ar inte skalets. Den ar HELA SAJTENS -- de tva paletterna skiljer
   sig pa varenda yta, inte bara i navraden. Darfor ligger den har som en
   PROVSWITCH pa :root och inte som en skal-regel: satt data-pal="app" pa
   <html> sa byter hela sidan palett, och du ser dem sida vid sida pa riktigt
   innan nagon bestammer.

   Den gor INGENTING forran attributet finns. Vill du ha den palett bor
   vardena flyttas till [data-theme="dark"] i forre_pulse.css (delad fil,
   backup till TEMP/css-backups/ kravs) — inte ligga kvar har.
   ========================================================================== */
html[data-theme="dark"][data-pal="app"]{
  --bg:#121212; --card:#171717; --inset:#1c1c1c; --zebra:#151515;
  --ink:#f2f2f2; --ink2:#a8a8a8; --dim:#7a7a7a; --faint:#5c5c5c;
  --line:#2a2a2a; --line2:#2f2f2f;
  --accent:#2796f2; --accent-ink:#5cb4f8; --accent-wash:#12293f;
  --live:#2d9c72; --live-wash:#12241d;
  --gold:#d9a441; --danger:#e0556f;
  --champ:#a879f0; --champ-w:#241c33; --elite:#2fc3a4; --elite-w:#12271f;
  --dia:#5cb4f8; --dia-w:#12293f; --plat:#3cc0d0; --plat-w:#122529; --gold-r:#d9a441;
  --board-bg:#0d0d0d; --board-ink:#ffffff; --board-sub:#9a9a9a;
  --board-line:rgba(255,255,255,.09);
  --shadow:0 1px 2px rgba(0,0,0,.4);
  --skl-glas:rgba(23,23,23,.86);
  --skl-gold-wash:#2a2313; --skl-danger-wash:#2d161c;
}