/* ============================================================================
   FORRE.NU — DET NYA TEMAT (forre_ny) · grunden + skalet
   Källa: design-proposals/nytt-forre-2026-10-20.html, riktning C (A:s skal,
   B:s sidor). Kenta 2026-10-20: "BARA BÖRJA BYGGA SKA SE EXAKT UT SOM MOCKUP".

   ★ LADDAS BARA I forre_ny (app/Helpers/PulseAssets.php). forre_pulse ser
     aldrig den här filen, så :root-tokens nedan rör inte dagens sajt.
   ★ PREFIX: n- (byggklossar), nt- (skalet), np- (paneler/rutnät som alla
     sidor delar). Inga generiska klassnamn — forre_pulse.css laddas fortfarande
     för de sidor som inte byggts om, och .av/.ml/.sp finns redan där.
   ★ TOKENS: forre_pulse :root + [data-theme="dark"] gäller oförändrade. Här
     läggs bara mockupens tillägg (cupens orange, rumsfärgerna, rubriktypsnittet).
   ============================================================================ */

/* ---------------------------------------------------------------- 1. TOKENS */
:root{
  --hw:#ff7a1a; --hw-ink:#b4500c; --hw-wash:#fff1e6; --hw-on:#1c0c00;
  --raise:#e9ecf0; --sh2:0 10px 30px rgba(16,24,40,.10);
  --r-bronze:#b8693a; --r-silver:#6f7c9e;
  --c-spela:color-mix(in srgb,var(--live) 76%,#000); --c-tavla:var(--gold); --c-cup:var(--hw-ink);
  --c-spr:var(--champ); --c-snack:var(--accent-ink); --c-fira:#e0336f; --c-shop:var(--elite);
  --hd:"Roboto Condensed",Roboto,sans-serif; --ui:Roboto,system-ui,sans-serif;
  --ny-w:1360px; --nt-h:56px; --nt-sub:42px;
  /* LOGGAN: F-ringen och ".NU" bär ALLTID samma färg (Kenta 2026-10-21). Märkets blå till
     vardags; säsongsfärgen kommer från <html data-logo> (app/Helpers/TemaService.php). */
  --logo:var(--accent);
}
/* Halloween-orange: samma val som högtidens märke (pulse-hogtid.css --hw-mark) — #ff7a1a mot
   vitt ger bara 2,6:1, så ljust läge bär den mörkare --hw-ink. Mörkt läge: rena --hw. */
html[data-logo="halloween"]{--logo:var(--hw-ink)}
html[data-logo="halloween"][data-theme="dark"]{--logo:var(--hw)}
[data-theme="dark"]{
  --hw-ink:#ff9a4d; --hw-wash:#2a1a0f;
  --raise:#232323; --sh2:0 10px 30px rgba(0,0,0,.45);
  --r-bronze:#e0905c; --r-silver:#aab6d8;
  --c-spela:var(--live); --c-fira:#ff5f97;
}
/* NIVÅTONERNA — EN ägare i nya temat (2026-10-21, flyttade ur ny-topplista.css .nlb med samma
   värden): topplistan och bragdraden i toppen säger samma rank i samma färg. Ljust = mörka
   toner mot vitt, mörkt = ljusa. -w = tvätten bakom en etikett, -f = fyllnaden i en stapel. */
:root{
  --t-unreal:var(--champ);    --t-unreal-w:var(--champ-w);    --t-unreal-f:var(--champ);
  --t-champion:#c85708;       --t-champion-w:#ffe6d1;         --t-champion-f:#c85708;
  --t-elite:var(--elite);     --t-elite-w:var(--elite-w);     --t-elite-f:var(--elite);
  --t-diamond:var(--dia);     --t-diamond-w:var(--dia-w);     --t-diamond-f:var(--dia);
  --t-platinum:var(--plat);   --t-platinum-w:var(--plat-w);   --t-platinum-f:var(--plat);
  --t-gold:var(--gold-r);     --t-gold-w:color-mix(in srgb,var(--gold-r) 15%,transparent); --t-gold-f:var(--gold-r);
  --t-silver:#5f6a75;         --t-silver-w:#e9ecef;           --t-silver-f:#8b96a3;
  --t-bronze:#7a4f22;         --t-bronze-w:#efe0cf;           --t-bronze-f:#b07a3c;
}
[data-theme="dark"]{
  --t-champion:var(--hw-ink); --t-champion-w:#33210f;         --t-champion-f:var(--hw-ink);
  --t-silver:#8b96a3;         --t-silver-w:#2a2e33;
  --t-bronze:#c4996b;         --t-bronze-w:#3a2c1c;
}

/* ---------------------------------------------------------------- 2. SIDAN */
body.pulse-shell{background:var(--bg);font:400 14px/1.45 var(--ui)}
body::after{content:none!important;display:none!important}
.nt-in{width:min(var(--ny-w),calc(100% - 40px));margin:0 auto}
[hidden]{display:none!important}

/* ---------------------------------------------------------------- 3. BYGGKLOSSAR */
.n-num{font-family:var(--hd);font-variant-numeric:tabular-nums}
.n-lk{color:var(--accent-ink);font-weight:500;cursor:pointer;text-decoration:none}
.n-lk:hover{text-decoration:underline}
.n-kbd{font:600 10.5px/1 var(--ui);color:var(--dim);background:var(--card);border:1px solid var(--line2);border-bottom-width:2px;border-radius:5px;padding:3px 5px}
.n-dim{color:var(--dim)}

/* avatarer — runda = människa. Bilden ligger över initialerna; faller bilden bort syns de. */
.n-av{position:relative;display:inline-grid;place-items:center;flex:none;width:var(--s,32px);height:var(--s,32px);border-radius:50%;background:var(--inset);color:var(--ink2);overflow:hidden;box-shadow:0 0 0 1px var(--line) inset;vertical-align:middle;font:700 var(--f,11px)/1 var(--hd);letter-spacing:.02em;text-transform:uppercase}
.n-av>b{font:inherit;color:inherit;white-space:nowrap}
.n-av>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%}
.n-av.s16{--s:16px;--f:7px}.n-av.s18{--s:18px;--f:7px}.n-av.s20{--s:20px;--f:8px}.n-av.s24{--s:24px;--f:9px}
.n-av.s26{--s:26px;--f:9px}.n-av.s28{--s:28px;--f:10px}.n-av.s30{--s:30px;--f:10px}.n-av.s32{--s:32px;--f:11px}
.n-av.s36{--s:36px;--f:12px}.n-av.s40{--s:40px;--f:13px}.n-av.s44{--s:44px;--f:14px}.n-av.s48{--s:48px;--f:15px}
.n-av.s52{--s:52px;--f:16px}.n-av.s56{--s:56px;--f:17px}.n-av.s64{--s:64px;--f:19px}.n-av.s72{--s:72px;--f:22px}
.n-av.s96{--s:96px;--f:28px}.n-av.s112{--s:112px;--f:32px}.n-av.s128{--s:128px;--f:36px}
.n-sq{border-radius:8px}
/* statusringen — grön = spelar/sänder, blå = söker folk. Aldrig två ringar */
.n-ring{border-radius:50%;padding:2px;box-shadow:0 0 0 2px var(--live);display:inline-flex;flex:none;margin:2px}
.n-ring.blue{box-shadow:0 0 0 2px var(--accent)}
.n-ring>.n-av{box-shadow:none}
.n-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--live);flex:none}
.n-dot.on{background:color-mix(in srgb,var(--live) 55%,var(--card));box-shadow:0 0 0 1.5px var(--live) inset}
.n-dot.blue{background:var(--accent)}
.n-dot.dim{background:var(--faint)}
.n-fp{display:inline-flex;align-items:center}
.n-fp>.n-av{box-shadow:0 0 0 2px var(--card)}
.n-fp>.n-av+.n-av{margin-left:-7px}

/* knappar — EN fylld per yta, logoblå */
.n-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:30px;padding:0 12px;border-radius:var(--r);font:600 12.5px/1 var(--ui);white-space:nowrap;border:1px solid transparent;color:var(--ink);background:transparent;cursor:pointer;flex:none;text-decoration:none}
.n-btn i{font-size:13px}
.n-btn.p{background:color-mix(in srgb,var(--accent) 80%,#000);color:#fff}
.n-btn.p:hover{background:color-mix(in srgb,var(--accent) 68%,#000)}
[data-theme="dark"] .n-btn.p{background:var(--accent);color:#06121f}
[data-theme="dark"] .n-btn.p:hover{background:var(--accent-ink)}
.n-btn.s{border-color:var(--line2);color:var(--ink)}
.n-btn.s:hover{border-color:var(--accent);color:var(--accent-ink)}
.n-btn.g{color:var(--accent-ink);padding:0 6px}
.n-btn.g:hover{background:var(--accent-wash)}
.n-btn.q{background:var(--inset);color:var(--ink2)}
.n-btn.q:hover{color:var(--ink)}
.n-btn.sm{height:26px;padding:0 9px;font-size:12px}
.n-btn.g.sm{padding:0 6px}
.n-btn.ico{width:30px;padding:0}
.n-btn.sm.ico{width:26px}
.n-btn.dn{color:var(--live);cursor:default;padding:0 4px}
.n-btn.klar{background:var(--live-wash)!important;color:var(--live)!important;border-color:transparent!important}
.n-btn.cup{background:var(--hw);color:var(--hw-on)}
.n-btn[disabled]{opacity:.55;cursor:default}

/* små etiketter */
.n-ml{font:600 10.5px/1 var(--ui);letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.n-tag{display:inline-block;font:700 9.5px/1 var(--ui);letter-spacing:.06em;text-transform:uppercase;padding:3px 5px;border-radius:4px;vertical-align:middle}
.n-tag.stab{color:var(--champ);background:var(--champ-w)}
.n-tag.ny{color:var(--accent-ink);background:var(--accent-wash)}
.n-tag.cup{color:var(--hw-ink);background:var(--hw-wash)}
.n-tag.ok{color:var(--live);background:var(--live-wash)}
.n-cnt{font:700 10.5px/1 var(--ui);color:var(--ink2);background:var(--inset);padding:3px 6px;border-radius:999px}
.n-emb{display:block;flex:none;object-fit:contain}
.n-prog{display:block;height:6px;border-radius:3px;background:var(--inset);overflow:hidden;position:relative}
.n-prog>i{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:var(--accent)}
.n-prog.g>i{background:var(--live)}
.n-prog.s>i{background:var(--champ)}
.n-prog.o>i{background:var(--hw)}
/* omkopplare */
.n-sw{position:relative;display:inline-block;width:38px;height:22px;border-radius:11px;background:var(--line2);flex:none;transition:background .15s}
.n-sw>i{position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:left .15s}
.n-sw.pa{background:var(--live)}
.n-sw.pa>i{left:19px}
/* LAGETS MÄRKE (2026-10-22) — fyrkant = lag. Samma neutrala märke som squad-rummet i Meddelanden
   (ny-medd.css .ms-sq.lag): taggens två första tecken, eller det uppladdade märket ovanpå (faller
   bilden bort syns taggen). Ritas av App\Helpers\SquadSida::marke(). Bor HÄR och inte i ny-squad.css
   — märket syns även i profilen, på Hem, i Spela och i personkortet. */
.nsq-cr{--s:44px;position:relative;width:var(--s);height:var(--s);border-radius:calc(var(--s) * .28);display:inline-grid;place-items:center;flex:none;overflow:hidden;
  background:color-mix(in srgb,var(--ink) 9%,var(--card));color:var(--ink);vertical-align:middle;box-sizing:border-box}
.nsq-cr>b{font:800 calc(var(--s) * .36)/1 var(--hd);letter-spacing:.02em;text-transform:uppercase;color:inherit;white-space:nowrap}
.nsq-cr>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.nsq-cr.s16{--s:16px;border-radius:4px}.nsq-cr.s18{--s:18px;border-radius:5px}.nsq-cr.s20{--s:20px;border-radius:5px}
.nsq-cr.s24{--s:24px}.nsq-cr.s28{--s:28px}.nsq-cr.s32{--s:32px}.nsq-cr.s36{--s:36px}.nsq-cr.s40{--s:40px}
.nsq-cr.s44{--s:44px}.nsq-cr.s48{--s:48px}.nsq-cr.s56{--s:56px}.nsq-cr.s72{--s:72px}.nsq-cr.s104{--s:104px}
.nsq-cr.s16>b,.nsq-cr.s18>b,.nsq-cr.s20>b{font-size:calc(var(--s) * .42);letter-spacing:0}
/* lagchipset (profilen, personkortet): märke + namn + din roll */
.nsq-chip-lag{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 9px 0 3px;border-radius:999px;background:var(--card);border:1px solid var(--line);font:500 12px/1 var(--ui);color:var(--ink);text-decoration:none;white-space:nowrap;max-width:100%;min-width:0}
.nsq-chip-lag>span{overflow:hidden;text-overflow:ellipsis;min-width:0}
.nsq-chip-lag>em{font-style:normal;color:var(--dim);font-size:11px;flex:none}
a.nsq-chip-lag:hover{border-color:var(--line2)}

/* ---------------------------------------------------------------- 4. RAD 1 */
.nt-top{position:sticky;top:0;z-index:60;height:var(--nt-h);background:var(--card);border-bottom:1px solid var(--line)}
.nt-top>.nt-in{height:var(--nt-h);display:flex;align-items:center;gap:18px}
.nt-logo{display:flex;align-items:center;gap:9px;flex:none;text-decoration:none}
.nt-logo svg{width:28px;height:28px;color:var(--logo);display:block}
.nt-logo span{font:800 19px/1 var(--hd);letter-spacing:.01em;color:var(--ink)}
.nt-logo em{font-style:normal;color:var(--logo)}
/* LOGGAN ÖVERALLT (Kenta 2026-10-21: "ändras det på ett ställe ska det vara på alla andra
   ställen"). Varje ställe där MÄRKET står läser --logo — samma ton som toppen. Uppmätt på 31
   sidor 2026-10-21; F-ringen som PRIS (klippens vinnare, ledare — guld) och som STATUS
   (klippens band) är inte loggan och rörs inte. html-prefixet för att vinna över filer som
   laddas efter den här (pulse-lock.css, ny-profil.css, inloggningsrutans egen stil). */
html .pf-brand b{color:var(--logo)}                       /* sidfotens ordmärke, varje sida */
html .pauth-ring{background:var(--logo)}                  /* inloggnings-/registreringsrutan */
html .flock{--flock-acc:var(--logo)}                      /* låset: gästernas startsida, Tracker m.fl. */
html .npf-covstd{color:var(--logo)}                       /* profilens omslag utan egen bild */
/* Delningskortet (?page=stats, .k2) är mörkt i båda lägena — där bär märket den ljusa tonen.
   Nedladdningen läser samma --fring (stats/index.php fringLas(), ändrad 2026-10-21 med Kentas
   ok), så ringen, sigillet, ".NU" och forre.nu i PNG:en följer skärmen. */
html[data-logo="halloween"] .k2{--fring:var(--hw)}
/* F-RINGEN SOM VATTENSTÄMPEL — klassen n-fvm (2026-10-23).
   Kenta 23 okt: först "F loggan i bakgrunden i top höger" på topplistans "Racet runt dig" och
   Spelas "Ditt lag", sedan: "så stor är den på sprites sidan, dem du gjorde var små, ska verkligen
   synas". Måtten och styrkan är därför sprites-sidans (pulse-sprites.css .sq-mx::before): ringen
   360 px, 58 px utanför högerkanten och 64 px över överkanten, toningen 17 % → 12 % → 0 lodrätt
   över 440 px. Mobil (≤820): 240 px, 40/46 px, 300 px. Användning: klassen n-fvm på kortet.
   · Formen = masterfilen public/images/icons/forre-f-ring-currentcolor.svg — ingen kopia av banan.
   · Toningen ligger INNE i märket: bakgrunden är toningen och masken klipper den till ringen, så
     ytan under får ingen gradient (Kenta 2026-08-28).
   · Färgen är var(--logo), inte --ink som sprites-sidan (gamla temat): märket följer loggan
     (Halloween-orange via <html data-logo>) — "ändras det på ett ställe ska det vara på alla".
   · Rutan = kortets högra 302 px i hela höjden (top/right/bottom 0), så kortets kanter beskär
     ringen utan overflow:hidden. z-index -1 i kortets egen stapling (isolation) = bakom text och
     knappar, ovanpå kortets bakgrund. pointer-events:none — den tar aldrig ett klick.
   · Hems "Din ställning" (ny-hem.css .nh-st2::before) är den MINDRE varianten från 21 okt och
     läser --n-fvm nedan: ringen med en diagonal toning i SVG:ns egen gradient. */
:root{--n-fvm:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cdefs%3E%3ClinearGradient id='t' x1='1' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff'/%3E%3Cstop offset='.55' stop-color='%23fff' stop-opacity='.55'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='.08'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23t)' d='M236.69,77.14 A120.00,120.00 0 1 1 221.80,53.16 L197.18,55.10 A100.50,100.50 0 0 0 44.73,184.27 L76.40,94.43 A48.92,48.92 0 0 1 122.54,61.78 L233.15,61.78 A2.42,2.42 0 0 1 234.86,65.91 L209.17,91.60 A9.55,9.55 0 0 1 202.61,94.39 L122.96,95.97 A18.23,18.23 0 0 0 106.22,107.88 L76.10,189.46 A8.97,8.97 0 0 1 72.17,194.12 L59.43,201.47 A100.50,100.50 0 0 0 221.26,90.55 Z M197.96,116.00 L182.68,137.19 A20.46,20.46 0 0 1 165.80,145.68 L144.44,145.38 A8.04,8.04 0 0 0 136.79,150.64 L123.22,187.36 A10.81,10.81 0 0 1 115.52,194.15 L91.15,199.77 A3.11,3.11 0 0 1 87.52,195.71 L114.40,119.47 A10.82,10.82 0 0 1 124.75,112.25 L196.58,113.25 A1.74,1.74 0 0 1 197.96,116.00 Z'/%3E%3C/svg%3E")}
.n-fvm{position:relative;isolation:isolate}
.n-fvm::before{content:"";position:absolute;top:0;right:0;bottom:0;width:302px;z-index:-1;pointer-events:none;
  border-top-right-radius:inherit;border-bottom-right-radius:inherit;
  background:linear-gradient(to bottom,color-mix(in srgb,var(--logo) 17%,transparent) 0%,
    color-mix(in srgb,var(--logo) 12%,transparent) 42%,transparent 88%) 0 -64px/100% 440px no-repeat;
  -webkit-mask:url("/public/images/icons/forre-f-ring-currentcolor.svg") right -58px top -64px/360px 360px no-repeat;
          mask:url("/public/images/icons/forre-f-ring-currentcolor.svg") right -58px top -64px/360px 360px no-repeat}
@media (max-width:820px){
  .n-fvm::before{width:200px;background-position:0 -46px;background-size:100% 300px;
    -webkit-mask-position:right -40px top -46px;mask-position:right -40px top -46px;
    -webkit-mask-size:240px 240px;mask-size:240px 240px}
}
@media (prefers-contrast:more){ .n-fvm::before{display:none} }
/* Rummen står på SAMMA mittlinje som loggan, söket och ikonerna (Kenta 21 okt: "nav inte
   är samma linje" — de satt 8 px lägre, nedtryckta som flikar). Alla kontroller i rad 1 är
   36 px höga och centrerade. Det aktiva rummet behåller Bladet: samma etikett på linjen,
   och fliken fortsätter nedåt in i rad 2. */
.nt-rooms{display:flex;align-items:center;height:var(--nt-h);margin-left:2px}
.nt-rooms a{--rc:var(--accent);position:relative;display:flex;align-items:center;gap:7px;height:36px;padding:0 12px;border-radius:10px;font:600 13.5px/1 var(--ui);color:var(--ink2);text-decoration:none;white-space:nowrap}
.nt-rooms a>i{color:var(--rc);font-size:15px}
.nt-rooms a:hover{color:var(--ink);background:color-mix(in srgb,var(--inset) 70%,transparent)}
.nt-rooms a.on{color:var(--ink);background:var(--bg);align-self:flex-end;height:47px;margin-bottom:-1px;align-items:flex-start;padding-top:11px;border-radius:10px 10px 0 0;z-index:2}
.nt-rooms a.on>i{color:color-mix(in srgb,var(--rc) 84%,#000)}
[data-theme="dark"] .nt-rooms a.on>i{color:color-mix(in srgb,var(--rc) 72%,#fff)}
/* Bladet: konkava hörn ner i rad 2 */
.nt-rooms a.on:before,.nt-rooms a.on:after{content:"";position:absolute;bottom:0;width:10px;height:10px;background:transparent}
.nt-rooms a.on:before{left:-10px;border-bottom-right-radius:10px;box-shadow:5px 5px 0 5px var(--bg)}
.nt-rooms a.on:after{right:-10px;border-bottom-left-radius:10px;box-shadow:-5px 5px 0 5px var(--bg)}
.nt-rooms .nt-lvf{display:inline-flex;margin-left:2px}
.nt-rooms .nt-lvf .n-ring{padding:1px;margin:0;box-shadow:0 0 0 1.5px var(--live);background:var(--card)}
.nt-rooms .nt-lvf .n-ring+.n-ring{margin-left:-5px}
.nt-sok{margin-left:auto;width:250px;height:36px;border-radius:8px;background:var(--inset);border:1px solid var(--line);display:flex;align-items:center;gap:9px;padding:0 8px 0 11px;color:var(--dim);font:400 13.5px/1 var(--ui);cursor:text;flex:none;position:relative}
.nt-sok>span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}
.nt-sok:hover{border-color:var(--line2)}
.nt-right{display:flex;align-items:center;gap:4px;flex:none}
.nt-kopp{display:flex;align-items:center;gap:7px;height:30px;padding:0 9px;border-radius:15px;color:var(--dim);font-size:13px;margin:0 2px;text-decoration:none}
/* Kopplingarna i mockupens färger: Epic bevisat grön, Discord kopplat --ink2,
   Companion (du står i kön) --dim. Inte kopplat = --faint och genomstruket i titeln. */
.nt-kopp i{color:var(--faint)}
.nt-kopp i.bi-patch-check-fill.ok{color:var(--live)}
.nt-kopp i.dc.ok{color:var(--ink2)}
.nt-kopp i.bi-windows.ok{color:var(--dim)}
.nt-kopp i.off{opacity:.55}
.nt-kopp:hover{background:var(--inset)}
.nt-ic{position:relative;width:36px;height:36px;border-radius:8px;display:grid;place-items:center;color:var(--ink2);font-size:17px;background:transparent;border:0;cursor:pointer;text-decoration:none}
.nt-ic:hover,.nt-ic.on{background:var(--inset);color:var(--ink)}
.nt-bdg{position:absolute;top:2px;right:1px;min-width:17px;height:17px;padding:0 5px;border-radius:9px;background:color-mix(in srgb,var(--accent) 80%,#000);color:#fff;font:700 10.5px/17px var(--ui);text-align:center;box-shadow:0 0 0 2px var(--card);pointer-events:none}
[data-theme="dark"] .nt-bdg{background:var(--accent);color:#06121f}
.nt-bdg[data-n="0"],.nt-bdg:empty{display:none}
.nt-me{display:flex;align-items:center;gap:7px;padding:2px 8px 2px 2px;border-radius:20px;margin-left:4px;background:transparent;border:0;cursor:pointer;color:var(--ink)}
.nt-me:hover,.nt-me.on{background:var(--inset)}
.nt-me .bp{font:700 13px/1 var(--hd);color:var(--ink);display:flex;align-items:baseline;gap:3px}
.nt-me .bp small{font:700 9px/1 var(--ui);color:var(--dim);letter-spacing:.05em}
.nt-me>i.bi{font-size:11px;color:var(--dim)}
.nt-gast{display:flex;align-items:center;gap:6px}

/* ---------------------------------------------------------------- 5. RAD 2 */
.nt-sub{position:relative;z-index:55;height:var(--nt-sub);background:var(--bg);border-bottom:1px solid var(--line)}
.nt-sub>.nt-in{height:var(--nt-sub);display:flex;align-items:center;gap:14px;position:relative}
.nt-tabs{display:flex;height:var(--nt-sub);min-width:0;overflow:hidden}
.nt-tabs a{position:relative;display:flex;align-items:center;padding:0 12px;font:500 13px/1 var(--ui);color:var(--ink2);text-decoration:none;white-space:nowrap}
.nt-tabs a:first-child{padding-left:0}
.nt-tabs a:hover{color:var(--ink)}
.nt-tabs a.on{color:var(--ink);font-weight:600}
.nt-tabs a.on:after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2px;background:var(--accent)}
.nt-tabs a.on:first-child:after{left:0}
.nt-tabs[hidden]{display:none!important}
.nt-tk{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink2);white-space:nowrap;overflow:hidden;min-width:0;flex:1}
.nt-tk b{color:var(--ink);font-weight:600}
.nt-tk a{color:inherit;text-decoration:none}
.nt-tk .rx{display:flex;gap:4px}
.nt-tk .rx button{font:600 11px/1 var(--ui);color:var(--ink2);background:var(--card);border:1px solid var(--line);padding:4px 7px;border-radius:12px;cursor:pointer}
.nt-tk .rx button:hover{color:var(--ink);border-color:var(--line2)}
.nt-tk .rx button.on{color:var(--accent-ink);border-color:var(--accent);background:var(--accent-wash)}
.nt-tk .mdot{width:4px;height:4px;border-radius:50%;background:var(--faint);flex:none}
.nt-tk .tm{color:var(--dim);font-size:12px}
.nt-stab{flex:none}
.nt-ctx{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink2);white-space:nowrap;min-width:0;overflow:hidden}
.nt-ctx a.bk{display:flex;align-items:center;gap:6px;font-weight:600;color:var(--accent-ink);text-decoration:none}
.nt-ctx b{color:var(--ink)}
.nt-ctx i.bi-chevron-right{font-size:10px;color:var(--faint)}
.nt-pgs{margin-left:auto;display:flex;align-items:center;gap:6px;flex:none}
.nt-pgs>.n-ml{margin-right:2px}
.nt-pg{display:flex;align-items:center;gap:7px;height:28px;padding:0 10px;border-radius:14px;background:var(--card);border:1px solid var(--line);font-size:12.5px;color:var(--ink2);white-space:nowrap;text-decoration:none;cursor:pointer}
.nt-pg:hover{border-color:var(--line2);color:var(--ink)}
.nt-pg i.bi{color:var(--accent-ink);font-size:12.5px}
.nt-pg b{color:var(--ink);font-weight:600}
.nt-pg em{font-style:normal;font-weight:700;color:var(--ink)}
.nt-pg.live em{font-weight:500;color:var(--live)}
.nt-sp{flex:1}
/* cupens flik — hänger från rad 1 så länge en cup är godkänd för hela sajten */
.nt-cupf{align-self:flex-start;margin-left:8px;height:36px;display:flex;align-items:center;gap:8px;padding:0 10px 0 5px;border-radius:0 0 10px 10px;background:var(--hw);color:var(--hw-on);font:600 13px/1 var(--ui);white-space:nowrap;flex:none;position:relative;z-index:3;border:0;cursor:pointer}
.nt-cupf .pm{width:26px;height:26px;border-radius:50%;background:#000 center/cover;box-shadow:0 0 0 2px color-mix(in srgb,var(--hw-on) 25%,transparent)}
.nt-cupf b{font:700 14px/1 var(--hd);letter-spacing:.01em}
.nt-cupf em{font-style:normal;font:700 12px/1 var(--hd);background:var(--hw-on);color:var(--hw);padding:4px 6px;border-radius:5px}
.nt-cupf i{font-size:11px}
.nt-cupf:hover,.nt-cupf.on{background:color-mix(in srgb,var(--hw) 86%,#000)}

/* ---------------------------------------------------------------- 6. LAGREN (notiser, konto, cup, vänner) */
.nt-dd{position:fixed;z-index:90;background:var(--card);border:1px solid var(--line2);border-radius:12px;box-shadow:var(--sh2);overflow:hidden;text-align:left;color:var(--ink)}
.nt-dd[hidden]{display:none!important}
.nt-ddh{display:flex;align-items:center;gap:10px;padding:12px 12px 10px 16px;border-bottom:1px solid var(--line)}
.nt-ddh>b{font:700 16px/1 var(--hd)}
.nt-chips{display:flex;gap:2px;margin-left:auto}
.nt-chips button,.nt-chips a{font:600 12px/1 var(--ui);color:var(--ink2);padding:6px 9px;border-radius:999px;background:transparent;border:0;cursor:pointer;text-decoration:none}
.nt-chips .on{background:var(--accent-wash);color:var(--accent-ink)}
.nt-ddb{max-height:min(560px,calc(100vh - 170px));overflow-y:auto;overscroll-behavior:contain}
.nt-zon{padding:8px 0 6px}
.nt-zon+.nt-zon{border-top:1px solid var(--line)}
.nt-zon>.n-ml{padding:6px 16px 6px;display:flex;align-items:baseline;gap:8px}
.nt-zon>.n-ml span{text-transform:none;letter-spacing:0;font-weight:500;font-size:11.5px;color:var(--faint)}
.nt-nr{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:12px;align-items:center;padding:7px 16px;min-height:52px;text-decoration:none;color:inherit}
.nt-nr:hover{background:var(--inset)}
.nt-nr.olast{background:color-mix(in srgb,var(--accent-wash) 55%,transparent)}
.nt-nr .t{min-width:0;font-size:13px;color:var(--ink2);line-height:1.35}
.nt-nr .t b{color:var(--ink)}
.nt-nr .t small{display:block;font-size:12px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nt-nr .t>span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nt-nr .r{display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.nt-nr .r em{font-style:normal;font-size:11.5px;color:var(--dim);white-space:nowrap}
.nt-nr.q{min-height:44px}
.nt-nr .sq{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;background:var(--inset);color:var(--ink2);font-size:14px;margin-left:2px}
.nt-nr .sq.stab{background:var(--champ-w);color:var(--champ)}
.nt-ddf{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 16px;border-top:1px solid var(--line);font-size:12px;color:var(--dim)}
.nt-ddf b{color:var(--ink2);font-weight:600}
.nt-ddf .n-lk{font-size:13px}
.nt-tom{display:flex;align-items:center;gap:10px;padding:18px 16px;font-size:13px;color:var(--dim)}
.nt-tom i{font-size:18px;opacity:.5}
.nt-not{width:440px}
.nt-van{width:380px}
/* kontomenyn — platt lista, liten ikon, ingen förklaringstext */
.nt-konto{width:300px}
.nt-kh{display:flex;align-items:center;gap:12px;padding:14px 14px 10px}
.nt-kh>div{flex:1;min-width:0}
.nt-kh b{display:flex;align-items:center;gap:7px;font-size:15px}
.nt-kh small{display:block;font-size:12px;color:var(--dim);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nt-kst{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:4px;margin:0 10px 6px;background:var(--inset);border-radius:8px;padding:8px 6px}
.nt-kst>span{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;min-width:0}
.nt-kst>span:first-child{display:grid;grid-template-columns:22px auto;column-gap:5px;justify-content:center;align-items:center;text-align:left}
.nt-kst>span:first-child .n-emb{grid-row:span 2}
.nt-kst b{font:700 14px/1.1 var(--hd);white-space:nowrap}
.nt-kst small{font-size:10.5px;color:var(--dim);white-space:nowrap}
.nt-kl{display:flex;flex-direction:column;padding:4px 6px 8px}
.nt-kl a,.nt-kl button{display:flex;align-items:center;gap:11px;height:36px;padding:0 10px;border-radius:7px;font:400 13.5px/1 var(--ui);color:var(--ink);cursor:pointer;background:transparent;border:0;text-decoration:none;text-align:left;width:100%}
.nt-kl a:hover,.nt-kl button:hover{background:var(--inset)}
.nt-kl a>i,.nt-kl button>i{width:18px;text-align:center;font-size:15px;color:var(--ink2)}
.nt-kl a>span:first-of-type,.nt-kl button>span:first-of-type{flex:1}
.nt-kl em{font-style:normal;font-size:12px;color:var(--dim);white-space:nowrap}
.nt-kl em.kp{display:flex;gap:6px;font-size:13px}
.nt-kl em.kp i.ok{color:var(--live)}.nt-kl em.kp i.dc{color:#5865f2}.nt-kl em.kp i.off{color:var(--faint)}
.nt-kl .n-sw{width:32px;height:18px}
.nt-kl .n-sw>i{width:14px;height:14px;top:2px;left:2px}
.nt-kl .n-sw.pa>i{left:16px}
.nt-kl hr{border:0;height:1px;background:var(--line);margin:5px 4px}
.nt-kl .live>i{color:var(--live)}
/* cupens panel */
.nt-cupp{width:380px}
.nt-cupp .hd{height:118px;background:#000 center 20%/cover;position:relative}
.nt-cupp .hd .x{position:absolute;right:8px;top:8px;width:28px;height:28px;border-radius:7px;background:rgba(0,0,0,.5);color:#fff;display:grid;place-items:center;font-size:12px;border:0;cursor:pointer}
.nt-cupp .bd{padding:12px 16px 14px;display:flex;flex-direction:column;gap:10px}
.nt-cupp .t b{display:block;font:800 22px/1.05 var(--hd)}
.nt-cupp .t small{display:block;font-size:12.5px;color:var(--ink2);margin-top:3px}
.nt-cupp .cdn{display:flex;align-items:baseline;gap:8px;font:600 12px/1 var(--ui);color:var(--dim)}
.nt-cupp .cdn span{background:var(--hw-wash);color:var(--hw-ink);border-radius:6px;padding:6px 8px;font-weight:700}
.nt-cupp .cdn span b{font:700 20px/1 var(--hd);margin-right:2px}
.nt-cupp .me{display:flex;align-items:center;gap:8px;background:var(--inset);border-radius:10px;padding:10px}
.nt-cupp .me>div{flex:1;min-width:0;margin-left:4px}
.nt-cupp .me b{display:block;font-size:13px}
.nt-cupp .me small{display:block;font-size:11.5px;color:var(--dim)}
.nt-cupp .plus{color:var(--dim);font-weight:700}
.nt-cupp .vnt{display:inline-flex;border-radius:50%;padding:1px;border:1.5px dashed var(--hw-ink)}
.nt-cupp .ab{display:flex;gap:6px;flex-wrap:wrap}
.nt-cupp .hosts{display:flex;gap:8px;font-size:12.5px;color:var(--ink2);line-height:1.4}
.nt-cupp .hosts i{color:var(--live)}
/* Hela panelen leder till cupsidan (Kenta 2026-10-23) — samma grepp som cupkortet på Hem.
   .nt-cupl = tom länk över .nt-cupi; stängknappen och knapparna lyfts över den, ytan
   bredvid knapparna släpper igenom klicket. .nt-cupg = pilen på bilden, i ord. */
.nt-cupi{position:relative;isolation:isolate}
.nt-cupl{position:absolute;inset:0;z-index:1;-webkit-tap-highlight-color:transparent}
.nt-cupl:focus-visible{outline:2px solid var(--accent);outline-offset:-3px;border-radius:11px}
.nt-cupp .hd .x{z-index:2}
.nt-cupp .ab{position:relative;z-index:2;pointer-events:none}
.nt-cupp .ab :is(a,button){pointer-events:auto}
.nt-cupp .nt-cupg{position:absolute;right:8px;bottom:8px;display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 9px 0 10px;border-radius:7px;background:rgba(10,10,10,.68);color:#fff;font:600 12px/1 var(--ui);white-space:nowrap;transition:background-color .15s,color .15s}
.nt-cupp .nt-cupg i{font-size:11px;transition:transform .15s}
.nt-cupl:is(:hover,:active,:focus-visible)~.hd .nt-cupg{background:var(--hw);color:var(--hw-on)}
.nt-cupl:hover~.hd .nt-cupg i{transform:translateX(2px)}

/* ---------------------------------------------------------------- 6b. SKALETS DETALJER */
/* Bladet när sidan rullat: rad 2 är borta, fliken blir ett streck i rad 1. */
.nt-rull .nt-rooms a.on{align-self:center;height:36px;margin-bottom:0;align-items:center;padding-top:0;border-radius:10px;background:transparent}
.nt-rull .nt-rooms a.on:before{content:none}
.nt-rull .nt-rooms a.on:after{left:10px;right:10px;bottom:-10px;width:auto;height:3px;border-radius:3px 3px 0 0;box-shadow:none;background:var(--rc)}
.nt-kopp i.halv{color:var(--gold)}
.nt-bdg.svar{background:var(--danger-fill);color:#fff}
[data-theme="dark"] .nt-bdg.svar{background:var(--danger-fill);color:#fff}
.nt-bdg.svar:not([hidden])+.nt-bdg.gora{display:none}
.nt-vanster{display:flex;align-items:center;flex:1;min-width:0;height:100%}
.nt-vanster>[hidden]{display:none!important}
.nt-pgs.tom{display:none}
.nt-pgs [hidden]{display:none!important}
.nt-tk .tx{min-width:0;overflow:hidden;text-overflow:ellipsis}
.nt-tk a.tx:hover,.nt-tk a.vem:hover b{color:var(--accent-ink)}
.nt-tk .vem{display:inline-flex;align-items:center;gap:7px}
.nt-tk .rx.done button.on{color:var(--live);border-color:transparent;background:var(--live-wash)}
/* Bragdväggen byter bragd (Kenta 2026-10-21: "får gärna scrolla lite då och då").
   Samma byte som gamla shoutraden, Kentas riktning 2026-07-17: mjuk fade ut uppåt,
   nästa in nerifrån. Remsan är en lucka (overflow), så texten glider ur och in i den.
   Bredden glider med (ny-skal.js §4) så att människan efter pricken aldrig hoppar. */
.nt-tkr{display:flex;align-items:center;min-width:0;flex:0 1 auto;overflow:hidden;transition:width .34s cubic-bezier(.2,.7,.2,1)}
.nt-tki{display:none;align-items:center;gap:8px;min-width:0;transition:opacity .22s ease,transform .22s ease}
.nt-tki.on{display:flex}
.nt-tkr.ut>.nt-tki.on{opacity:0;transform:translateY(-10px)}
.nt-tki.in{animation:ntTkIn .34s cubic-bezier(.2,.7,.2,1) both}
@keyframes ntTkIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes ntTkTona{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.nt-tkr{transition:none}.nt-tki{transition:opacity .16s ease}.nt-tkr.ut>.nt-tki.on{transform:none}.nt-tki.in{animation:ntTkTona .2s ease both}}
/* Staben i rad 2: gamla skalets bokmärke (pulse-stab.css) som en liten lila bricka. */
.nt-sub .stf-bm{position:relative;left:auto;top:auto;height:auto;padding:0;margin-right:2px;filter:none;clip-path:none;flex:none;align-self:center}
.nt-sub .stf-bm::before,.nt-sub .stf-bm::after{content:none}
.nt-sub .stf-bm-in{height:22px;gap:5px;font:700 9.5px/1 var(--ui);letter-spacing:.06em;color:var(--champ);background:var(--champ-w);padding:0 6px;border-radius:4px}
.nt-sub .stf-bm .bi{font-size:11px}
.nt-sub .stf-bm[aria-expanded="true"] .stf-bm-in{background:var(--champ);color:#fff}
.nt-sub .stf-n{min-width:15px;height:15px;padding:0 4px;border-radius:8px;background:var(--danger-fill);color:#fff;font:700 9.5px/15px var(--ui);text-align:center;letter-spacing:0}
.nt-sub .stf-remsa{left:auto;position:static;display:none;flex:1;min-width:0}
.nt-sub .nt-in.stf-lage>.stf-remsa{display:flex}
.nt-sub .nt-in.stf-lage>.nt-vanster{display:none}
.nt-sub .stf-p{top:calc(100% + 1px);left:0;width:100%;border-radius:0 0 var(--r) var(--r)}
.nt-sub .stf-p::before{content:none}
/* lagrens rader — notiserna bär gamla klockans klasser (ddrow) för pulse-notifs.js */
.nt-dd .nt-nr.ddrow{display:grid;border-bottom:0;padding:7px 16px;background:transparent;align-items:center}
.nt-dd .nt-nr.ddrow.unread{background:color-mix(in srgb,var(--accent-wash) 55%,transparent)}
.nt-dd .nt-nr.ddrow:hover{background:var(--inset)}
.nt-nr .n-dot.blue{width:7px;height:7px}
.nt-nr .sq.svar{background:color-mix(in srgb,var(--danger) 10%,var(--card));color:var(--danger)}
/* rader som pulse-notifs.js lägger in live (gamla klockans markup) */
.nt-not .ddlist>a.ddrow--notif{display:flex;align-items:center;gap:12px;padding:7px 16px;border-bottom:0;min-height:52px}
.nt-not .ddlist>a.ddrow--notif .nic,.nt-not .ddlist>a.ddrow--notif .nic-main{width:36px;height:36px}
.nt-not .ddlist>a.ddrow--notif .c .tt{font-size:13px}
.nt-not .ddlist>a.ddrow--notif .ndot{width:7px;height:7px;background:var(--accent);box-shadow:none}
.nt-not .ddlist>a.ddrow--notif[hidden],.nt-not .ddlist .nt-nr[hidden]{display:none!important}
/* Kräver svar */
.nt-svar>.n-ml{color:var(--danger);display:flex;align-items:center;gap:7px}
.nt-svar .skl-pn{font:700 10.5px/1 var(--ui);font-style:normal;color:#fff;background:var(--danger-fill);padding:3px 6px;border-radius:999px;letter-spacing:0}
.nt-nr .r.skl-ak{flex-direction:row;align-items:center;gap:6px}
.nt-nr .r.skl-ak form{display:inline-flex;margin:0}
/* Cupfrågan (2026-10-22, CupUtskick::fragor): knapparna under texten — tre får inte plats i högerkanten */
.nt-cupq{align-items:flex-start}
.nt-cupq>.t{flex:1;min-width:0}
.nt-cupk{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.nt-cupk form{display:inline-flex;margin:0}
.nt-nr.ask-done{display:flex!important;min-height:44px;background:var(--live-wash)!important}
.nt-nr.ask-done--no{background:var(--inset)!important}
.nt-nr.ask-done .ask-done-txt{font-size:13px;color:var(--ink)}
.nt-nr.ask-done .ask-done-txt a{color:var(--accent-ink);font-weight:600}
.nt-nr.ask-err{animation:nt-skak .3s}
@keyframes nt-skak{0%,100%{transform:none}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.nt-van .skl-vklar{background:var(--live-wash)}
.nt-van .skl-pt2 a{color:inherit;text-decoration:none}
.nt-van .skl-pr .skl-pt2{font-size:13px;color:var(--ink2)}
.nt-ddh .nt-x{margin-left:4px}
.nt-ddh .n-cnt{margin-left:2px}
.nt-ddh>.n-btn.g:not(.nt-x){margin-left:auto}
/* meddelandepanelen: listan ritas av pulse-messenger.js (skm-, pulse-skal-msg.css) */
.nt-medd{width:420px}
.nt-medd .skl-msglist{padding:4px 0 8px}
.nt-medd .skl-msglist:empty::before{content:"Inga meddelanden än.";display:block;padding:18px 16px;font-size:13px;color:var(--dim)}
/* kontomenyn */
.nt-kl .kaffe>span:first-of-type{display:flex;flex-direction:column;gap:2px}
.nt-kl .kaffe small{font-size:11.5px;color:var(--dim);line-height:1.3;white-space:normal}
.nt-kl a.kaffe{height:auto;min-height:36px;padding-top:6px;padding-bottom:6px}
.nt-kl .n-tag{margin-left:auto}
/* mobilmenyn */
.nt-meny{width:340px}
.nt-mrum{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:4px 12px 10px}
.nt-mrum a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;height:68px;border-radius:10px;background:var(--inset);color:var(--ink);font:600 12.5px/1 var(--ui);text-decoration:none}
.nt-mrum a i{font-size:19px;color:var(--rc)}
.nt-mrum a.on{background:var(--accent-wash);color:var(--accent-ink)}
/* söket (Ctrl K) */
.nt-sokp{position:fixed;inset:0;z-index:120;background:color-mix(in srgb,#000 38%,transparent);display:flex;justify-content:center;align-items:flex-start;padding-top:min(12vh,96px)}
.nt-sokp[hidden]{display:none!important}
.nt-sokb{width:min(640px,calc(100% - 24px));max-height:min(620px,calc(100vh - 120px));display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line2);border-radius:12px;box-shadow:var(--sh2);overflow:hidden}
.nt-sokf{display:flex;align-items:center;gap:10px;padding:0 14px;height:54px;border-bottom:1px solid var(--line);color:var(--dim);font-size:17px}
.nt-sokf input{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;color:var(--ink);font:400 16px/1 var(--ui)}
.nt-sokf input::-webkit-search-cancel-button{display:none}
.nt-sokr{overflow-y:auto;overscroll-behavior:contain}
.nt-sokr .n-ml i{font-size:11px;margin-right:3px}
.nt-sokrad.val{background:var(--accent-wash)}
.nt-sokar body{overflow:hidden}
/* mobilen: lager som ark låser sidan bakom */
@media (max-width:820px){
  .nt-last body{overflow:hidden}
  .nt-mtop>button .nt-bdg,.nt-mtop>a .nt-bdg{top:4px;right:2px}
  .nt-sokp{padding-top:0;align-items:stretch}
  .nt-sokb{width:100%;max-height:none;border-radius:0;border:0}
  .nt-meny .nt-kl a,.nt-meny .nt-kl button{height:42px}
}

/* ---------------------------------------------------------------- 7. SIDANS RAM */
.nt-main{padding-top:20px;padding-bottom:40px}
/* Layoutens topp-omslag (forre_pulse.css gör det till en klistrad kolumn under 820 px)
   — i nya temat klistrar rad 1 och mobiltoppen själva. */
.pulse-topwrap{display:contents!important;position:static!important;transform:none!important}
/* GAMLA VYER I NYA SKALET: ingen vänsterspalt — rummen sitter i rad 1.
   Railen renderas inte alls (pulse-leftrail.php returnerar i nya temat); den tomma
   <aside> döljs och rutnätet tar dess kolumn. Bredden följer skalet: 1 360 innehåll. */
:root{--shell-w:calc(var(--ny-w) + 32px)}
.shell>aside.rail.left,.shell>aside.rail:empty{display:none!important}
.shell:has(> aside.rail.left):has(> aside.rail.right){grid-template-columns:minmax(0,1fr) 320px!important}
.shell:has(> aside.rail.left):not(:has(> aside.rail.right)){grid-template-columns:minmax(0,1fr)!important}
/* Tom högerrail (events utan kommande events, mätt 2026-10-21: 320 px tomt) — ingen
   tom spalt. Aldrig en tom låda. */
.shell>aside.rail.right:not(:has(>*)){display:none!important}
.shell:has(>aside.rail.right:not(:has(>*))){grid-template-columns:minmax(0,1fr)!important}
.rail{top:76px}
/* NYA VYER I LAYOUTENS SKAL (2026-10-21). PulseSkal ger bl.a. lfg och streaming ett
   layout-ritat .shell.clb + <main class="center">. De nya vyerna bär sin egen bredd
   (.nt-in) — skalet lade sin gutter och topp ovanpå: 1 320 i stället för 1 360 på
   datorn, 340 i stället för 372 på en 414 px-telefon. Runt en ny vy ritar skalet inget. */
.shell:has(>main.center>.nt-in){display:block;max-width:none;width:100%;padding:0;margin:0}
.shell:has(>main.center>.nt-in)>main.center{display:block}
/* Squads ritar railen i en egen spalt (aside.sqm-left, bara pulse-leftrail.php) — tom i
   nya temat: 250 px tomt till vänster (mätt 2026-10-21). Spalten tas bort; högerrailen
   (.sqm-rail) står kvar där den fick plats förut. */
.shell.sqm>aside.sqm-left{display:none!important}
.shell.sqm{grid-template-columns:minmax(0,1fr) 300px}
.shell.sqm.sqm-norail{grid-template-columns:minmax(0,1fr)}
@media (max-width:1180px){.shell.sqm{grid-template-columns:minmax(0,1fr)}}

/* DRIFTNOTISEN (pulse-driftnotis.php, bara stab, bara när något är TRASIGT NU). Dess
   stil bodde i pulse-topbar-rad1.css som nya temat inte laddar — utan raderna här stod
   den som oformaterad text ovanför rad 1. Samma utseende, nya temats bredd. */
.dfn{width:100%;background:var(--danger-fill,#e0245e);color:#fff}
.dfn-in{width:min(var(--ny-w),calc(100% - 40px));margin:0 auto;min-height:30px;display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:12.5px}
.dfn b{font-weight:800}
.dfn-t{opacity:.94}
.dfn-a{margin-left:auto;color:#fff;text-decoration:none;font:600 11px/1 var(--ui);letter-spacing:.1em;text-transform:uppercase;border-bottom:1px solid rgba(255,255,255,.45)}
.dfn-a:hover{border-bottom-color:#fff}
.dfn.dfn-warn{background:var(--gold);color:#1a1200}
.dfn.dfn-warn .dfn-a{color:#1a1200;border-bottom-color:rgba(26,18,0,.45)}
.pulse-shell>.pulse-footer{margin-top:auto}
/* Sidfoten ärvs från forre_pulse (alla länkar, juridikraden, flaggknappen och Epic-
   texten oförändrade). Två avvikelser: inga lodräta streck mellan länkarna, och på
   mobilen bär <body> redan bottennavens luft — 58 px marginal till gav 122 px tomt. */
html[data-ny] .pf-links a::after{content:none}
@media (max-width:820px){html[data-ny] .pulse-footer{margin-bottom:0}}

/* gemensamma paneler och rubriker — alla nya sidor */
.np-panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);min-width:0}
.np-fh{display:flex;align-items:center;gap:12px;height:50px;padding:0 18px;border-bottom:1px solid var(--line)}
.np-fh h2{font:600 15.5px/1 var(--ui);margin:0;color:var(--ink)}
.np-fh .n-dim{font-size:12.5px}
.np-fh>.n-lk,.np-fh>.np-mseg,.np-fh>.np-r{margin-left:auto}
.np-ph2{display:flex;align-items:baseline;gap:10px;padding:16px 18px 10px}
.np-ph2 h2{font:600 15.5px/1 var(--ui);margin:0}
.np-ph2>span,.np-ph2>.n-lk{margin-left:auto;font-size:12.5px;color:var(--dim)}
.np-ph2>.n-lk{font-size:13px;color:var(--accent-ink)}
.np-ph2 span b{color:var(--ink);font-weight:700}
.np-more{padding:12px 18px;border-top:1px solid var(--line);font-size:13px}
.np-mseg{display:flex;gap:2px;background:var(--inset);border-radius:7px;padding:2px}
.np-mseg a,.np-mseg button{font:600 12px/1 var(--ui);color:var(--ink2);padding:6px 10px;border-radius:5px;background:transparent;border:0;cursor:pointer;text-decoration:none}
.np-mseg .on{background:var(--card);color:var(--ink);box-shadow:var(--shadow)}
.np-ph{display:flex;align-items:flex-end;gap:20px;margin-bottom:16px}
.np-ph h1{font:700 30px/1.05 var(--hd);letter-spacing:-.01em;margin:0;color:var(--ink)}
.np-meta{font-size:13px;color:var(--dim);margin-top:6px}
.np-phr{margin-left:auto;display:flex;align-items:center;gap:8px}
.np-seg{display:flex;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:2px;gap:2px}
.np-seg a,.np-seg button{font:500 13px/1 var(--ui);color:var(--ink2);padding:8px 12px;border-radius:6px;display:flex;gap:6px;align-items:center;background:transparent;border:0;cursor:pointer;text-decoration:none}
.np-seg span{font-size:11.5px;color:var(--dim)}
.np-seg .on{background:var(--accent-wash);color:var(--accent-ink);font-weight:600}
.np-seg .on span{color:var(--accent-ink)}
.np-g{display:grid;gap:20px;align-items:start}
.np-col{display:flex;flex-direction:column;gap:20px;min-width:0}
.np-tom{display:flex;align-items:center;gap:10px;padding:14px 18px;font-size:13px;color:var(--dim)}
.np-tom i{font-size:18px;opacity:.5}

/* PLATTFORMSBRICKAN — EN för hela huset (Kenta 2026-10-21: "ska samlas till en"; förut
   tre: .n-pfb, startsidans .nh-pfb och profilens .npf-pfb). Markup: NySkal::pfb, i JS
   window.NyPfb. Märkena, färgerna och bläcket är plattformarnas egna och kommer från
   SocialBrandService som --pf/--pfi på plattan (Kentas order 2026-07-30 — inget "K" för
   Kick, ingen ikonfont). Enfärgade märken (TikTok) har inga egna färger och följer
   underlaget: bläck-platta, bakgrundsfärgat märke — vänder med temat. */
.n-pfb{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:4px;background:var(--pf,var(--ink));color:var(--pfi,var(--bg));flex:none;vertical-align:-3px;margin-right:5px}
.n-pfb svg{width:10px;height:10px;display:block;fill:currentColor}

/* LIVE-RUTAN (mockupens NY.pop, ny-skal.js §6) — nere till vänster, ovanför botknappen
   (#forreBotFab, 46 px på 16/16). Aldrig på startsidan eller i Live-rummet, aldrig när
   du själv sänder. */
.nt-pop{position:fixed;left:16px;bottom:74px;z-index:55;display:flex;align-items:center;gap:10px;width:330px;max-width:calc(100vw - 32px);background:var(--card);border:1px solid var(--line2);border-radius:12px;box-shadow:var(--sh2);padding:8px 8px 8px 10px;color:var(--ink)}
.nt-pop[hidden],html[data-ny-sida="hub"] .nt-pop,html[data-ny-sida="streaming"] .nt-pop,html[data-stream="pa"] .nt-pop{display:none!important}
.nt-pop>div{flex:1;min-width:0}
.nt-pop b{display:block;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nt-pop small{display:flex;align-items:center;font-size:12px;color:var(--dim);white-space:nowrap;overflow:hidden}
.nt-pop .n-ring>.n-av{outline:0}
.nt-pop .x{width:28px;height:28px;border-radius:7px;display:grid;place-items:center;color:var(--dim);font-size:12px;background:transparent;border:0;cursor:pointer;flex:none}
.nt-pop .x:hover{background:var(--inset);color:var(--ink)}
/* Botten pratar (.fb-nudge, 300 × ~83 ovanför botknappen) — då står rutan ovanför. */
body:has(.fb-nudge) .nt-pop{bottom:180px}

/* ★ STREAM-LÄGET — html[data-stream="pa"] när DU sänder just nu (NySkal::liveRuta,
   pollen i ny-skal.js). Samma grepp som forre_pulse:s pulse-stream-mode.css: suddat,
   inte borta — det klarnar när du själv håller musen över eller fokuserar raden.
   En OBS-källa gör aldrig det. Coins i kontomenyn, texten i meddelandelistorna
   (panelen, rutan, helsidan) och i meddelandetoasten. */
html[data-ny][data-stream="pa"] .nt-kl a[href="/?page=coins"] em,
html[data-ny][data-stream="pa"] .ms-pv,
html[data-ny][data-stream="pa"] .pm-toast-tx{filter:blur(6px);user-select:none;transition:filter .12s ease}
html[data-ny][data-stream="pa"] .nt-kl a[href="/?page=coins"]:hover em,
html[data-ny][data-stream="pa"] .nt-kl a[href="/?page=coins"]:focus-visible em,
html[data-ny][data-stream="pa"] .ms-row:hover .ms-pv,
html[data-ny][data-stream="pa"] .ms-row:focus-visible .ms-pv,
html[data-ny][data-stream="pa"] .pm-toast:hover .pm-toast-tx{filter:none;user-select:auto}

/* ---------------------------------------------------------------- 8. SMALARE SKÄRMAR (dator) */
@media (max-width:1320px){
  .nt-sok{width:200px}
  .nt-rooms a{padding:0 10px}
}
@media (max-width:1200px){
  .nt-kopp{display:none}
  .nt-sok{width:40px;padding:0;justify-content:center;gap:0}
  .nt-sok>span,.nt-sok>.n-kbd{display:none}
  .nt-pgs>.n-ml{display:none}
}
@media (max-width:1020px){
  .nt-rooms a>span{display:none}
  .nt-rooms a{padding:0 11px}
  .nt-me .bp{display:none}
}

/* ---------------------------------------------------------------- 9. MOBILEN (≤ 820) */
.nt-mtop,.nt-mstrip,.nt-mnav{display:none}
@media (max-width:820px){
  .nt-top,.nt-sub{display:none}
  .nt-mtop{position:sticky;top:0;z-index:60;height:52px;display:flex;align-items:center;gap:2px;padding:0 6px;background:var(--card);border-bottom:1px solid var(--line)}
  .nt-mtop>button,.nt-mtop>a.nt-ic{width:40px;height:40px;display:grid;place-items:center;font-size:19px;color:var(--ink2);background:transparent;border:0;border-radius:8px;position:relative}
  .nt-mtop .nt-logo{margin-left:2px}
  .nt-mtop .nt-logo svg{width:24px;height:24px}
  .nt-mtop .nt-logo span{font-size:17px}
  .nt-mtop .nt-sp{flex:1}
  .nt-mstrip{display:block}
  .nt-mchips{display:flex;gap:6px;padding:10px 16px 2px;overflow-x:auto;scrollbar-width:none}
  .nt-mchips::-webkit-scrollbar{display:none}
  .nt-mchips a{font:600 12.5px/1 var(--ui);color:var(--ink2);background:var(--card);border:1px solid var(--line);padding:8px 12px;border-radius:16px;white-space:nowrap;text-decoration:none}
  .nt-mchips a.on{background:var(--accent-wash);border-color:transparent;color:var(--accent-ink)}
  .nt-mtk{font-size:12.5px;color:var(--ink2);padding:8px 16px;border-bottom:1px solid var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .nt-mtk b{color:var(--ink)}
  .nt-mtk{display:flex;align-items:center;gap:5px}
  .nt-mtk>b{flex:none}
  .nt-mtk>.tx{min-width:0;overflow:hidden;text-overflow:ellipsis}
  .nt-mtk .nt-tkr{flex:1 1 auto}
  .nt-mtk .nt-tki.on{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .nt-mpg{display:flex;align-items:center;gap:6px;padding:10px 16px 0;overflow-x:auto;scrollbar-width:none}
  .nt-mpg::-webkit-scrollbar{display:none}
  .nt-mpg .mp{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink2);background:var(--card);border:1px solid var(--line);padding:6px 10px;border-radius:14px;white-space:nowrap;text-decoration:none;cursor:pointer;flex:none}
  .nt-mpg .mp i.bi{color:var(--accent-ink)}
  .nt-mpg .mp b{color:var(--ink)}
  .nt-mpg .mp em{font-style:normal;font-weight:700;color:var(--ink)}
  .nt-mpg .mp.cup{background:var(--hw);border-color:transparent;color:var(--hw-on);padding-left:3px}
  .nt-mpg .mp.cup b,.nt-mpg .mp.cup em{color:var(--hw-on)!important}
  .nt-mpg .mp .pm{width:20px;height:20px;border-radius:50%;background:#000 center/cover}
  .nt-mpg .mp.live b{color:var(--live)}
  .nt-mnav{position:fixed;left:0;right:0;bottom:0;height:calc(64px + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);background:var(--card);border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(5,1fr);align-items:center;z-index:70}
  .nt-mnav a{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;font:600 10.5px/1 var(--ui);color:var(--dim);text-decoration:none}
  .nt-mnav a>i{font-size:20px;width:46px;height:28px;display:grid;place-items:center;border-radius:14px}
  .nt-mnav a.on{color:var(--ink)}
  .nt-mnav a.on>i{background:var(--accent-wash);color:var(--accent-ink)}
  .nt-mnav a.fab>i{width:46px;height:46px;border-radius:50%;background:color-mix(in srgb,var(--accent) 80%,#000);color:#fff;font-size:22px}
  [data-theme="dark"] .nt-mnav a.fab>i{background:var(--accent);color:#06121f}
  .nt-mnav .nt-bdg{top:-3px;right:calc(50% - 22px)}
  body.pulse-shell{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
  .nt-main{padding:12px 0 24px}
  .nt-pop,body:has(.fb-nudge) .nt-pop{left:12px;right:12px;width:auto;max-width:none;bottom:calc(76px + env(safe-area-inset-bottom,0px))}
  /* GAMLA VYER PÅ MOBILEN: EN spalt. forre_pulse.css döljer högerrailen under 820 px
     (.right{display:none}) — men desktopregeln ovan (minmax(0,1fr) 320px !important)
     lämnade kvar dess 320-spalt, och innehållet kläms till ~34 px (väggen, duellerna,
     forumet … mätt 2026-10-21 på 414 px). */
  .shell:has(> aside.rail.left):has(> aside.rail.right){grid-template-columns:minmax(0,1fr)!important}
  .dfn-in{width:calc(100% - 32px)}
  .nt-in{width:calc(100% - 32px)}
  /* lagren blir ark under toppen */
  .nt-dd{position:fixed!important;left:0!important;right:0!important;top:52px!important;bottom:calc(64px + env(safe-area-inset-bottom,0px))!important;width:auto!important;border-radius:0;border:0;border-top:1px solid var(--line);overflow-y:auto;box-shadow:none}
  .nt-dd .nt-ddb{max-height:none}
  .nt-cupp .hd{height:150px}
}

/* ---------------------------------------------------------------- 9b. MOBILEN: TOPP OCH BOTTEN GÖMS
   Kenta 2026-10-21 (Facebook-appen): rullar du ned försvinner toppen och bottennaven,
   rullar du upp kommer de fram igen — solida, med en kort toning från genomskinligt.
   Klassen html.nt-gomd sätts av ny-skal.js §7 (tröskel, lager, sidbyten). Ut går fort
   (ingen ska vänta på att en meny försvinner), in får ta sin tid: glidningen är framme
   på 0,26 s, toningen till helt solid är klar på 0,34 s. Gömd = visibility:hidden,
   så ingen tabbar in i en meny som inte syns. Live-rutan följer bottennaven ned. */
@media (max-width:820px){
  .nt-mtop,.nt-mnav{transition:transform .26s cubic-bezier(.2,.8,.2,1),opacity .34s cubic-bezier(.3,0,.2,1),visibility 0s}
  html.nt-gomd .nt-mtop,html.nt-gomd .nt-mnav{opacity:0;visibility:hidden;transition:transform .2s cubic-bezier(.4,0,1,1),opacity .16s linear,visibility 0s linear .2s}
  html.nt-gomd .nt-mtop{transform:translateY(-100%)}
  html.nt-gomd .nt-mnav{transform:translateY(100%)}
  .nt-pop{transition:transform .26s cubic-bezier(.2,.8,.2,1)}
  html.nt-gomd .nt-pop{transform:translateY(calc(64px + env(safe-area-inset-bottom,0px)));transition-timing-function:cubic-bezier(.4,0,1,1);transition-duration:.2s}
}
/* Minskad rörelse (husets regel): ingen glidning — bara toningen, ut och in. */
@media (max-width:820px) and (prefers-reduced-motion:reduce){
  .nt-mtop,.nt-mnav,.nt-pop{transform:none!important}
}

/* ---------------------------------------------------------------- 10. ETT INLÄGG (?page=wall/N)
   Väggnotisernas mål (app/Helpers/NyInlagg.php, Kenta 2026-10-21: "ska komma till inlägget
   och gärna snabbt som fan"). Kortet står i profilens rad (.npf-post, ny-profil.css).
   Kommentaren notisen handlar om lyses upp en stund (pulse.js lägger .cm-fokus) — en ton i
   bubblan som tonar bort, ingen glöd. */
.nip{max-width:680px}
.nip-hd{display:flex;align-items:center;gap:10px;min-width:0;padding:10px 14px 0 8px;font-size:13px;color:var(--dim)}
.nip-bk{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;border-radius:var(--r);color:var(--ink2);font-weight:600;text-decoration:none;flex:none}
.nip-bk:hover{background:var(--inset);color:var(--ink)}
.nip-bk>i{font-size:15px}
.nip-var{margin-left:auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nip-var a{color:var(--ink2);font-weight:600;text-decoration:none}
.nip-var a:hover{color:var(--accent-ink)}
.nip .npf-post{padding-top:12px}
.nip .cm .cm-bub{transition:background-color .8s ease}
.nip .cm.cm-fokus>.cm-b>.cm-bub{background:var(--accent-wash)}

/* ---------------------------------------------------------------- 11. RAD 2: FÄRGEN, NYASTE MEDLEMMEN, FOLK
   Kenta 2026-10-21 18:49: "vill gärna se senaste medlemmen här med, någon drop down för vilka
   som är online och vilka som spelar? … sen är det bara enfärgat för bragderna".
   Markup: pulse-topbar.php ("RAD 2"). Data: NySkal::bragdTyp/bragdText/nyastMedlem/folk.
   FÄRG = BETYDELSE: händelsens typ bär EN färg — ikonen och frasen, inget annat på raden.
   Rankerna nivåtonerna (samma som topplistan), Victory Royale guld, eld orange, live grönt,
   fest rosa (--c-fira), sajtens egna milstolpar blått. Alla tokens har en ljus och en mörk ton. */
.nt-tki[data-ev="vr"]{--ev:var(--gold)}
.nt-tki[data-ev="eld"]{--ev:var(--hw-ink)}
.nt-tki[data-ev="live"]{--ev:var(--live)}
.nt-tki[data-ev="fira"]{--ev:var(--c-fira)}
.nt-tki[data-ev="folk"]{--ev:var(--accent-ink)}
.nt-tki[data-ev="unreal"]{--ev:var(--t-unreal)}
.nt-tki[data-ev="champion"]{--ev:var(--t-champion)}
.nt-tki[data-ev="elite"]{--ev:var(--t-elite)}
.nt-tki[data-ev="diamond"]{--ev:var(--t-diamond)}
.nt-tki[data-ev="platinum"]{--ev:var(--t-platinum)}
.nt-tki[data-ev="gold"]{--ev:var(--t-gold)}
.nt-tki[data-ev="silver"]{--ev:var(--t-silver)}
.nt-tki[data-ev="bronze"]{--ev:var(--t-bronze)}
.nt-tki b.ev{color:var(--ev,var(--ink));font-weight:700}
.nt-tkic{flex:none;font-size:14px;line-height:1;color:var(--ev,var(--dim))}
.nt-tkem{flex:none;width:18px;height:18px;object-fit:contain}
.nt-tki>.n-pfb{margin-right:0}

/* SENASTE MÄNNISKAN är ett varv i tickern: ansiktet först, inget färgat — en människa som
   pratar, inte en händelse. */
.nt-tki.prat a.m:hover{color:var(--accent-ink)}
/* NYASTE MEDLEMMEN efter pricken — står still medan bragden glider (tickerns bredd glider,
   så den flyttar sig mjukt i sidled; den hoppar aldrig in och ut). Får inte plats båda
   krymper bragdens text med en ellips, inte namnet. Under full radbredd (< 1400 px) bor
   den bara i folklagret — där räcker raden inte till en bragd OCH en svans. */
.nt-nymg{display:flex;align-items:center;gap:8px;flex:none}
.nt-nym{display:inline-flex;align-items:center;gap:6px;color:var(--ink2);text-decoration:none;white-space:nowrap}
.nt-nym b{color:var(--ink);font-weight:600;max-width:120px;overflow:hidden;text-overflow:ellipsis}
.nt-nym:hover b{color:var(--accent-ink)}
@media (max-width:1399px){.nt-nymg{display:none}}

/* FOLK-KNAPPEN — ansikten först, talen sedan (pulsremsans två tal i en knapp). Samma form som
   Pågår-brickorna bredvid. Lagret: .nt-folk. */
.nt-folkk{display:flex;align-items:center;gap:7px;height:28px;padding:0 9px 0 4px;border-radius:14px;background:var(--card);border:1px solid var(--line);font:400 12.5px/1 var(--ui);color:var(--ink2);white-space:nowrap;cursor:pointer;flex:none}
.nt-folkk:hover,.nt-folkk.on{border-color:var(--line2);color:var(--ink)}
.nt-folkk .tal{display:inline-flex;align-items:center}
.nt-folkk .tal b{font-size:13px;font-weight:700;color:var(--ink)}
.nt-folkk .tal .n-dot{width:7px;height:7px;margin-right:6px}
.nt-folkk .n-fp+.tal .n-dot{display:none}
.nt-folkk .sep{font-style:normal;color:var(--faint);margin:0 6px}
.nt-folkk>.bi{font-size:10px;color:var(--dim)}
/* lagret: Spelar nu (grön ring = husets statusring), Online (ihålig prick), nyaste medlemmen */
.nt-folk{width:340px}
.nt-folk .nt-ddh .nt-x{margin-left:auto}
.nt-folk .nt-nr>.n-av{justify-self:center}
.nt-folk .nt-nr>.n-ring{margin:0}
.nt-folk .nt-nr .t small .n-dot{width:7px;height:7px;margin-right:6px;vertical-align:0}
.nt-fmer{display:block;padding:3px 16px 6px 64px;font-size:12.5px;color:var(--accent-ink);text-decoration:none}
.nt-fmer:hover{text-decoration:underline}
@media (max-width:1200px){
  .nt-folkk{padding-left:10px}
  .nt-folkk .n-fp{display:none}
  .nt-folkk .n-fp+.tal .n-dot{display:inline-block}
}
@media (max-width:820px){
  .nt-mtk .nt-tkic{margin-right:5px;font-size:12.5px}
  .nt-mtk .nt-tkem{display:inline-block;width:15px;height:15px;vertical-align:-3px;margin-right:5px}
  .nt-mtk .nt-tki>.n-pfb{margin-right:5px}
  .nt-mtk .nt-tki.prat>.n-av{margin-right:5px;vertical-align:-4px}
  .nt-mpg .mp.folk{padding-left:4px}
}