/*!
 * FORRE.NU — NAVBAREN (topbar + shoutrad + topbarens dropdowns)
 * ---------------------------------------------------------------------------
 * ★ VARFÖR FILEN FINNS (2026-08-22)
 *
 *   Blocket nedan låg fram till idag i en <style id="pulse-nav-smart-css">
 *   INUTI themes/forre_pulse/views/partials/pulse-nav.php. Den partialen
 *   inkluderas bara från pulse-leftrail.php — alltså BARA på sidor som har en
 *   vänsterräl. Ett block som styr den GLOBALA topbaren laddades därmed på
 *   halva sajten. Uppmätt på live 2026-08-22 (getComputedStyle, samma fönster):
 *
 *     hub / topplista / butik → blocket fanns    → .top .in 48 px, ikoner 29 px
 *     override                → blocket saknades → .top .in 58 px, ikoner 36 px
 *
 *   Override föll alltså tillbaka på forre_pulse.css:79 (58 px, gap 14), och
 *   den raden RYMMER INTE högerklustret i 1168 px: `.right` blev 64 px hög,
 *   Discord och månen radbröts till varsin rad och avataren låg utanför
 *   kortkanten. Det var inte en egen sida och inte en egen navbar — samma
 *   partial, samma layout, en CSS-fil som aldrig kom med.
 *
 *   Flytten var redan utpekad som "rätt hem" i kommentaren som stod i
 *   pulse-nav.php: "Rätt hem är pulse-deck.css, som laddas ovillkorligt från
 *   pulse-topbar.php." Egen fil i stället för append i pulse-deck.css av samma
 *   skäl som pulse-deck.css själv är egen: minimal kollisionsyta mot parallella
 *   sessioner (CLAUDE.md fil-säkerhet §3).
 *
 * LADDAS: pulse-topbar.php, ovillkorligt, DIREKT EFTER pulse-deck.css. Ordningen
 *         är inte kosmetisk — reglerna här skriver över .tdk-reglerna där med
 *         flit och behöver därför stå senare i kaskaden, precis som inline-taggen
 *         gjorde när den låg i <aside> längre ner i body.
 * ÄGER:   .top · .sbar · .rail:s sticky-offset · .tb-dd · .me-dd · .sbox-panelen.
 *         Vägg-korten (.card.post) följde INTE med — de hör till rälen och står
 *         kvar i pulse-nav.php.
 * ---------------------------------------------------------------------------
 */

/* ── TOPPMENYNS GRUPPAVDELARE (2026-07-31) ────────────────────────────────
   Hub · Tracker · Topplista är DIN PRESTATION. Sprites och framåt är SAJTEN.
   En hårfin grå linje mellan dem, aldrig färgad: en färgad stapel drar
   blicken till en avgränsning som inte betyder något.
   Regeln ligger här och inte i pulse-topbar.php med flit — den filen är
   134 KB aktivt arbetsmaterial och CSS är ändå global. */
.top .tabs .t-spr{margin-left:15px}
.top .tabs .t-spr::before{content:"";position:absolute;left:-8px;top:50%;transform:translateY(-50%);
  width:1px;height:18px;background:var(--line)}

/* ══════════════════════════════════════════════════════════════════════════
   NAVBAREN = MOCKUPEN (menyer-4.0 rad 517–544 + .tb/.tbin/.nav/.navpill)

   Live och mockupen var inte samma sorts navbar. Live: en 58 px hög FLIKRAD
   med 14 px versaler och ett 2 px blått streck under den aktiva. Mockupen:
   en 48 px hög rad med 12 px länkar i 28 px höga plattor och en fylld,
   glidande markering bakom den aktiva. Uppmätt skillnad, inte känsla:

     barens höjd    58   → 48        ramen        1168 → 1200
     loggan       19,5   → 15,5      flikens text 14/800 → 12/700
     flikens höjd   58   → 28        flikikonen   17   → 14
     radie           0   → 4         sök           34  → 29
     ikonknapp      36   → 29        avataren      38  → 29 rund
     markering  2 px streck UNDER → fylld platta BAKOM

   Pucken byts inte ut — den får ny form. Samma element, samma JS som redan
   räknar ut left/width per flik; den ändras från 2 px hög i botten till
   28 px hög och centrerad, och läggs BAKOM texten (z-index). Då blev
   glidningen kvar, och den är det du sa att du gillade.

   De två sista raderna är inte kosmetika: shoutraden och railerna hänger på
   barens höjd (top:58 respektive 106). Utan dem hade det uppstått en 10 px
   glipa där bakgrunden lyser igenom vid scroll.

   OM !important: första passet satte allt utan, och EXAKT ett värde tog —
   barens höjd. Resten förlorade mot pulse-topbar.php, som är 134 KB och
   sätter samma egenskaper längre ned i samma dokument. Alternativen var att
   redigera den filen (som vi kommit överens om att inte röra) eller att
   deklarera övertaget explicit här. Det här blocket är det övertaget: det
   rör bara mått i .top, aldrig färg, tillstånd eller beteende.
   ══════════════════════════════════════════════════════════════════════════ */
/* ── ★ REMSAN GÅR UT, INNEHÅLLET STÅR KVAR I MITTEN ────────────────────
   Kenta 2026-08-22: "vill bara ha remsan som ska gå ut på sidorna, navbar ska
   vara kvar där i mitten."

   Färgen bor alltså på <header class="top">, som redan är 100 % bred (mätt:
   2 545 px i ett 2 560-fönster). `.in` är genomskinlig och behåller sin
   1168-box — shell-w minus .shell:s 16 px padding — så loggan, flikarna och
   korten under fortfarande målas på samma x som vänsterrälen.

   ★ HAIRLINEN ÄR EN INSET-SKUGGA, INTE EN BORDER. `.top` är låst till 48 px
   och `.in` är också 48 — en border-bottom på .top hade lagt 1 px till och
   knuffat `.sbar{top:48px}` ur lod. box-shadow ritar samma hårfina linje utan
   att röra layouten. Byt inte tillbaka till border utan att flytta sbar med.

   HISTORIK: blocket har stått i båda lägena. 2026-08-20 bar remsan färgen över
   hela fönstret, Kenta bad om 1168-kortet i stället, och då pekade han på
   Override-sidan som den snygga — den som SAKNADE hela det här blocket. Efter
   att ha sett dem bredvid varandra igen 2026-08-22 vill han ha remsan ut igen.
   Ett läge åt gången, och det står här. */
/* ══════════════════════════════════════════════════════════════════════════
   TVA RADER OVER 1000 px — MOCKUPENS GEOMETRI      (Kenta 2026-08-30)
   design-proposals/navbar-material-2026-08-30.html, uppmatt i webblasaren:
       .c-r1  46 px   marke · sasong · status · hogerkluster
       .c-r2  38 px   bara flikarna (+ ticker)
       summa  84 px
   Live stod pa EN rad om 48 px med hogerklustret inklamt bland flikarna.
   Skillnaden ar inte kosmetisk: mockupens rad 2 ar en REN flikremsa, och det
   ar den som gor att den laser som en navbar och inte som ett verktygsfalt.

   ★ ALLA FYRA TALEN BOR HAR, OCH BARA HAR.
   .top:48 -> .sbar:48 -> .rail:96 var en trappa dar varje steg var navbarens
   hojd. Nar navbaren blir 84 maste alla tre folja med i SAMMA andring, annars
   lagger sig shoutraden ovanpa flikarna (det hande, uppmatt: bada pa y=89).
   De stod redan alla tre i den har filen — darfor andras de har, tillsammans,
   och ingen annanstans.
       .top   84   (46 + 38)
       .sbar  84   = navbarens hojd
       .rail  132  = 84 + shoutradens 36 + husets 12 px luft
   Talen ar uppmatta pa live, inte rakade fram pa papper.

   ★ UNDER 1000 px GALLER DE GAMLA TALEN OFORANDRADE.
   Dar goms rad 1 (pulse-topbar-rad1.css), flikradens ordmarke kommer tillbaka
   och stabsdacket blir en vanlig rad igen — alltsa ar geometrin dar exakt som
   fore den har andringen. Blocket nedan ar darfor min-width:1000px, och
   .top{height:48px} strax under galler fortfarande for smalt.
   ══════════════════════════════════════════════════════════════════════════ */
/* ★ html-prefixet ar inte pynt: `.top{height:48px!important}` och
   `.top .in{height:48px!important}` star LANGRE NER i den har filen. Samma
   specificitet (0,2,0) och samma !important -> senare i kallan vinner, och
   blocket har gjorde ingenting alls. Uppmatt: .top blev 84 (min-height) medan
   raderna var 46+48=94, sa flikraden foll ut och krockade 10 px med
   shoutraden. (0,2,1) vinner. Flytta inte blocket utan att rakna om detta. */
/* ★ GALLER PA ALLA BREDDER, INTE BARA over 1000 px.
   Forsta versionen la geometrin i @media(min-width:1000px) och gomde rad 1
   under den granden. Da hogerklustret flyttade UPP i rad 1 hade det betytt att
   sok, notiser, messenger och avatar forsvann helt pa smal skarm — och att
   .top foll tillbaka pa 48 px medan innehallet var 84. Bada delarna fel.
   Nu ar geometrin en, och det ar rad 1:s INNEHALL som tunnas ut pa smalt
   (pulse-topbar-rad1.css): sasongen, statusen och talen gar bort, markret och
   hogerklustret star kvar. En rad som byter innehall ar battre an en rad som
   forsvinner med verktygen i. */
@media (min-width:1px){
  html .top{height:auto!important;min-height:84px!important}
  html .top .in{height:38px!important}
  html .top .tabs{height:38px!important}
  /* Rad 1 bar bade .in och .tr1-in. .in AR MEDVETET: 44 CSS-regler i huset
     riktar mot `.top .in .right ...`, och hogerklustret flyttas upp hit av
     JS:en i pulse-topbar-rad1.php. Utan .in-klassen hade alla 44 slutat
     matcha och hela hogerklustret stott ostylat. Rakna dem igen innan du tar
     bort klassen. */
  html .top .in.tr1-in{height:46px!important;gap:12px!important}
  html .sbar{top:84px!important}
  /* 84, inte 132: shoutraden ar inte langre en egen vagrat yta — den ligger i
     flikradens hogerkant sedan 2026-08-30 ("2 rader bara inte 3"). Trappan ar
     darfor navbar -> ral, utan mellansteg. */
  html .rail{top:84px!important}
}

/* (Trerads-fallbacken under 1199 px ar borttagen 2026-08-30. Den behovdes nar
   tickern lag i FLIKRADEN och klamdes ihjal av flikarna. Nu ligger den i rad
   1:s mitt, dar ytan i stallet VAXER pa smala skarmar — sasongen och talen
   goms under 1049 och lamnar plats. Kromet ar 84 px pa alla bredder.) */
@media (min-width:1px){
}

.top{height:48px!important;background:var(--card)!important;border-bottom:0!important;
  box-shadow:inset 0 -1px 0 var(--line)!important;
  /* ── DJUPET (Kenta 2026-08-22: "svag gradient ... ska knappt synas") ────
     Vinjett, inte lodrät gradient. Skälet är att remsan är 100 % bred: en
     ljus→mörk uppifrån hade lagt sitt mörker TVÄRS innehållet, medan en
     vinjett lägger det UTANFÖR 1168-kolumnen. Kolumnen lyfts alltså fram
     utan att en enda ram ritas — samma jobb som en border, utan kanten.

     ★ STOPPEN ÄR RÄKNADE, INTE PROCENT. Med fasta 24 % hade övergången legat
     345 px in på en 1440-skärm medan kolumnen börjar 136 px in — mörkret hade
     kryput 200 px in på innehållet. calc(50% − (shell-w − 32)/2) är exakt
     kolumnens vänsterkant på ALLA bredder, och max()/min() gör att gradienten
     kollapsar till platt så fort fönstret är smalare än kolumnen.

     rgba och inte color-mix med flit: 5,5 % svart mörknar likadant i båda
     teman. En token som --ink är mörk i ljust tema och LJUS i mörkt, och hade
     alltså vänt vinjetten till en ljusglimt när temat byts. */
  background-image:linear-gradient(90deg,
    rgba(0,0,0,.055) 0,
    rgba(0,0,0,0) max(0px, calc(50% - (var(--shell-w) - 32px)/2)),
    rgba(0,0,0,0) min(100%, calc(50% + (var(--shell-w) - 32px)/2)),
    rgba(0,0,0,.055) 100%)!important}
.top .in{max-width:calc(var(--shell-w) - 32px)!important;height:48px!important;gap:12px;
  background:transparent!important;border:0!important}
/* ── SHOUTRADEN FÖLJER NAVBAREN (Kenta 2026-08-22) ───────────────────────
   Samma grepp som .top ovan: färgen bär hela fönstret, .in är genomskinlig och
   står kvar på 1168 så shouten linjerar med loggan och korten under.
   Hairlinen är även här en inset-skugga, inte en border — .sbar sitter sticky
   på top:48 och .rail på top:96 (raderna nedan), och en extra pixel i höjd
   hade flyttat båda ur lod. */
.sbar{background:var(--inset)!important;border-bottom:0!important;
  box-shadow:inset 0 -1px 0 var(--line)!important}
.sbar .in{max-width:calc(var(--shell-w) - 32px)!important;background:transparent!important;
  border:0!important}
/* ── TYPOGRAFIN: ROBOTO CONDENSED, VERSALER (Kenta 2026-08-30) ────────────
   Kentas ord: "ROBOTO Condensed fonten ville jag ha och stora bokstaver
   kanske ar mer gjord for den fonten, inte bold bara men inte for smalt
   heller." Mockupen navbar-material-2026-08-30.html, regeln .flik:
       font-family:var(--kond); font-size:13px; font-weight:500;
       letter-spacing:.045em; text-transform:uppercase;   aktiv: 600
   Det ar de talen som star nedan. 500 ar mitten: 400 blir tunt i versaler,
   700 blir en rubrik. Sparren .045em finns for att versaler utan sparr
   klumpar ihop sig - kondenserade versaler mer an nagra andra.

   FONTEN AR SJALVHOSTAD SEDAN 2026-08-30. Den gick inte att hamta forut:
   fonts.gstatic.com svarar 403 genom proxyn. Hamtad ur npm-registret i
   stallet (@fontsource-variable/roboto-condensed 5.3.0). Latinfilen ar
   51 412 byte = exakt Googles egen fil. @font-face star i
   public/assets/fonts/forre-fonts.css bredvid Roboto och Oswald.
   --kond deklareras har for att den bara anvands har; flyttas den till
   forre_pulse.css :root ska den bort harifran samtidigt.

   SPECIFICITETEN AR MATT, INTE GISSAD. Fem filer satte redan .tab-lbl
   (uppmatt i CSSOM pa live): forre_pulse.css 8px -> pulse-topbar.css 9px
   -> pulse-topdeck.css 10,5px -> pulse-deck.css 13px/600/none ->
   den har raden 12px!important. Den har filen ar sista ordet om navbaren
   (se filhuvudet), sa ratt atgard ar att RATTA raden har - inte lagga en
   sjatte fil som konkurrerar. html.tdk-prefixet ger (0,5,1) och slar aven
   pulse-deck.css text-transform:none, som inte ar !important. */
:root{ --kond:'Roboto Condensed','Roboto',system-ui,sans-serif; }

.top .brand{font-size:15.5px!important;letter-spacing:-.045em!important}
html.tdk .top .brand{font-family:var(--kond)!important;font-weight:600!important;
  letter-spacing:.01em!important}
.top .tabs{gap:1px!important;height:48px!important;align-items:center!important;position:relative}
.top .tabs .tab{height:28px!important;padding:5px 7px!important;gap:5px!important;
  border-radius:var(--r-sm)!important;display:inline-flex!important;align-items:center!important;
  position:relative;z-index:1}
.top .tabs .tab i{font-size:14px!important}
html.tdk .top .tabs .tab .tab-lbl{font-family:var(--kond)!important;font-size:13px!important;
  font-weight:500!important;letter-spacing:.045em!important;text-transform:uppercase!important}
html.tdk .top .tabs .tab.on .tab-lbl{font-weight:600!important}

/* ── UNDER 1000 px: SAMMA FONT, MINDRE GRAD ───────────────────────────────
   Uppmatt i en 876 px iframe pa live (media queries galler per viewport, sa
   en iframe ar en riktig matning och inte en simulering):
       gammal typografi (Roboto 12 px, gemener, pad 9)  -> 265 px overflow
       ny typografi     (Condensed 13 px, versaler, 7)  -> 290 px overflow
   Alltsa 25 px SAMRE dar. Pa 1084 px ar den 40 px BATTRE — skillnaden ar att
   rad 1 goms under 1000 px och da kommer flikradens ordmarke tillbaka och ater
   bredd. Talen gar inte att ha ett av.
   Uppmatt igen med mindre grad, samma fonster:
       12 px / .03em / pad 7 -> 251     12 px / .02em / pad 6 -> 227
       11,5px / .03em / pad 6 -> 220    11 px  / .03em / pad 6 -> 207
   12 px / .03em / pad 6 valt: 227, alltsa 38 px battre an det som stod har
   fore andringen, och fortfarande kondenserade versaler.
   ★ Flikraden ryms anda inte pa 876 px — nio flikar, ordmarke, sok och sex
   ikoner far inte plats, och gjorde det inte forut heller. Det ar ett eget,
   aldre fel. Det som mattes har ar bara att den har andringen inte gor det
   varre, utan battre. */
@media (max-width:999px){
  html.tdk .top .tabs .tab .tab-lbl{ font-size:12px!important; letter-spacing:.03em!important; }
  .top .tabs .tab{ padding:5px 6px!important; }
}

/* BREDDEN AR MATT, INTE GISSAD. Versaler ar bredare an gemener, och
   kondenserade versaler med sparr bredare an bade och: flikraden vaxte fran
   679 px till 744 px nar typografin byttes, och .in ar 1168 px. Uppmatt
   overflow: 28 px - alltsa Forum och ELIT-chipet ut over kanten.
   Uppmatt igen med olika utrymmen (samma fonster, scrollWidth-clientWidth):
       padding 9px / gap 6px -> 28 px over
       padding 8px / gap 6px -> 10 px over
       padding 7px / gap 5px ->  0 px over, 17 px till overs
   Darfor 7/5 ovan. Talen gar inte att sanka fonten ur - 13 px ar Kentas
   storlek och mockupens; det ar utrymmet runt bokstaverna som far ge sig. */
/* Plattan. bottom:auto måste med — annars sträcker top+bottom ut den igen.
   left och width lämnas orörda: dem räknar topbarens egen JS ut per flik,
   och det är den räkningen som gör att markeringen glider. */
/* ── MARKERINGEN: UNDERSTRUKEN ────────────────────────────────────────────
   Jag byggde först den fyllda plattan, för det är mockupfilens standardläge
   (data-anim="glid"). Din skärmbild visar mockupen i läget UNDERSTRUKEN —
   och det är det läget som gäller. Mockupen rad 106–110:

     .nav a::after{left:9px;right:9px;bottom:-1px;height:2px;
       background:var(--accent);border-radius:2px 2px 0 0;
       transform:scaleX(0);opacity:.6}
     .nav a:hover::after{transform:scaleX(1)}
     .nav a.on::after{transform:scaleX(1);opacity:1}

   Strecket bor på FLIKEN, inte på ett glidande element — därför får varje
   flik sin egen, och den växer ut från mitten vid hover. Det är animationen
   du bad om på knapparna, och den funkar på alla åtta samtidigt.
   Pucken stängs av; JS:en som flyttar den får fortsätta i det tysta. */
.top .tabs .tdk-puck{display:none!important}
/* display:block MÅSTE stå med. Topbaren har en egen ::after på fliken som är
   avstängd med display:none — mina övriga egenskaper vann, men utan den här
   raden ritades strecket aldrig. Det syntes som "ingen markering alls". */
.top .tabs .tab::after{content:""!important;display:block!important;position:absolute!important;
  left:9px!important;right:9px!important;bottom:-1px!important;top:auto!important;
  height:2px!important;width:auto!important;
  background:var(--accent)!important;border-radius:2px 2px 0 0!important;
  transform:scaleX(0)!important;opacity:.6!important;
  transition:transform .18s cubic-bezier(.22,.9,.28,1),opacity .18s!important}
.top .tabs .tab:hover::after{transform:scaleX(1)!important}
.top .tabs .tab.on::after{transform:scaleX(1)!important;opacity:1!important}
/* ── VARFÖR STRECKET INTE VÄXTE HOS DIG ───────────────────────────────────
   Din webbläsare säger prefers-reduced-motion: reduce (Windows har
   animationseffekter avslagna), och sajten har en global spärr som nollar
   ALLA transitioner då. Mockupfilen har ingen sådan spärr — därför växer
   strecket där och hoppade fram här. Det var inte olika kod, det var en
   regel som mockupen saknar.

   Det här enda elementet undantas, på din begäran: 0,18 s på en 2 px linje
   som inte flyttar något annat. Slår du på Windows-inställningen igen får
   HELA sajten tillbaka sina övergångar, inte bara den här.

   Selektorn är avsiktligt övertydlig: .top .tabs .tab::after räckte INTE —
   den globala spärren vinner över tre klasser. html body nav.tabs a.tab
   testades i webbläsaren och tar. */
@media (prefers-reduced-motion:reduce){
  html body .top nav.tabs a.tab::after{
    transition:transform .18s cubic-bezier(.22,.9,.28,1),opacity .18s!important}
}
html body .top nav.tabs a.tab::after{
  transition:transform .18s cubic-bezier(.22,.9,.28,1),opacity .18s!important}
/* Fliken själv lyfter aldrig — bara strecket rör sig. */
.top .tabs .tab{transition:color .13s ease-out!important}
/* Den grå plattan bakom aktiv flik var ingen platta — det var en gradient på
   ::before (transparent → accent 11 %, radie 6 6 0 0). Mockupen har ingen
   sådan: den aktiva fliken bärs av strecket och den blå ikonen. Två signaler
   räcker; en tredje som ligger bakom texten gör bara ordet svårare att läsa. */
.top .tabs .tab.on::before{background:none!important}
/* …men avdelaren före Sprites är OCKSÅ ett ::before, så den måste skrivas om
   efteråt — annars försvinner strecket i det ögonblick Sprites blir aktiv. */
.top .tabs .tab.t-spr::before{content:""!important;display:block!important;position:absolute!important;
  left:-8px!important;top:50%!important;right:auto!important;bottom:auto!important;
  transform:translateY(-50%)!important;width:1px!important;height:18px!important;
  background:var(--line)!important;border-radius:0!important}

/* ── DIN SQUAD SIST I FLIKRADEN ───────────────────────────────────────────
   Samma avdelare som före Sprites, av samma skäl: raden går nu
   DIN PRESTATION │ SAJTEN │ DU. Chipet är 28 px som flikarna, inte 32 som
   det var i högergruppen — det var därför det såg trasigt ut. */
.top .tabs .tab-sqz{display:inline-flex;align-items:center;margin-left:15px;position:relative}
.top .tabs .tab-sqz::before{content:"";position:absolute;left:-8px;top:50%;transform:translateY(-50%);
  width:1px;height:18px;background:var(--line)}
.top .tabs .tab-sqz .pdk-sq{height:28px!important;display:inline-flex!important;align-items:center!important;
  gap:5px;padding:0 9px!important;border-radius:var(--r-sm)!important;position:relative}
.top .tabs .tab-sqz .pdk-sqtag{font-size:10.5px!important;font-weight:900!important;letter-spacing:.06em!important}
.top .tabs .tab-sqz .pdk-sqon{width:6px;height:6px;border-radius:50%;background:var(--live);flex:0 0 auto}
.top .tabs .tab-sqz .pdk-sqb{min-width:16px;height:16px;padding:0 5px;border-radius:8px;
  background:var(--danger);color:#fff;font-size:9px;font-weight:900;display:grid;place-items:center}
/* Mockupen rad 97: den aktiva flikens IKON bär accentfärgen. Texten är bara
   mörkare — två signaler för "du är här", varav en är färg. */
.top .tabs .tab.on i{color:var(--accent-ink)!important}
@media (prefers-reduced-motion:reduce){.top .tabs .tab::after{transition:none!important}}

/* ── IKONERNA I HÖGERGRUPPEN ──────────────────────────────────────────────
   "Grisiga" var rätt ord, och orsaken var blandad vikt: discord, kaffe och
   måne var KONTUR, meddelanden och klockan var FYLLDA. Sex ikoner på 200 px
   där fyra är ihåliga och två är solida läses som två olika ikonuppsättningar
   som råkat hamna bredvid varandra.

   Alla är kontur nu, som i mockupen (rad 536–539). Meddelanden bytte dessutom
   glyf: bi-chat-dots-fill var samma pratbubbla som shoutraden och reaktionerna
   redan använder — tre olika saker med samma symbol. Meddelanden är ett
   KUVERT nu; en bubbla är något du säger högt, ett kuvert är något du skickar
   till en person. Klockan är kontur av samma skäl som resten. */
.top .in .right .tb-tools{display:inline-flex;align-items:center;gap:7px}
/* ── IKONERNA STOD PÅ OLIKA HÖJD ──────────────────────────────────────────
   Knapparna var centrerade (alla y193..222, mitt 207) men GLYFERNA inte:
   discord låg på 204, resten på 207. Tre pixlar, och det räcker för att
   raden ska se skakig ut.

   Två orsaker. Ikonerna ärvde 15 px i stället för de 14 jag satte (regeln
   låg på knappen, inte på glyfen). Och bootstrap-icons har olika höga
   glyfer inom samma teckenruta — discord-märket sitter högre i sin ruta än
   kuvertet gör. Rutan centreras, inte bläcket.

   Lösning: grid + place-items på knappen centrerar rutan exakt, line-height
   1 tar bort radavståndets glapp.

   OBS: display sätts INTE här. Första försöket satte display:grid!important
   och väckte då två knappar som ska vara dolda på desktop — mobilens
   sök-ikon och "fler"-knappen dök upp bredvid sökrutan. Centreringen görs
   med align/justify, som verkar på den flex de redan har. */
.top .in .right .iconbtn{width:29px!important;height:29px!important;
  border-radius:var(--r-sm)!important;color:var(--dim)!important;
  align-items:center!important;justify-content:center!important;padding:0!important;
  transition:background .12s ease-out,color .12s ease-out}
.top .in .right .iconbtn>.bi,.top .in .right .iconbtn>i{font-size:14px!important;
  line-height:1!important}

.top .in .right .iconbtn:hover{background:var(--inset)!important;color:var(--ink)!important}
.top .in .right .iconbtn:active{transform:scale(.94)}
/* ── KAFFEKOPPEN BOR INTE HÄR LÄNGRE (flyttad 2026-08-19) ────────────────
   Reglerna för .sbt-cof/.cof-w/.cof-o/.cof-f/.cof-s låg i det här inline-
   blocket. Det var fel hem, och felet var synligt: MARKUPEN kommer ur
   pulse-topbar.php:1568 och renderas av layouten på VARJE pulse-sida
   (default.php:407), medan DEN HÄR filen bara inkluderas av sex vyer
   (pulse-leftrail.php:28, hub/feed.php:261, report/index.php:79,
   report/ticket.php:138, fortnite/status.php:113, sprites/index.php:134).

   På alla andra rutter — bland dem ?page=nu, som är bottennavens flik 2,
   och ?page=squad/<tag> — laddades CSS:en aldrig. Då tappar .cof-w sitt
   display:grid, ikonerna sitt position:absolute och .cof-f sitt opacity:0,
   och konturkoppen + den fyllda koppen ställer sig BREDVID varandra:
   30 px innehåll i en 44 px-knapp. Mätt live 2026-08-19 på nu, coins,
   notifications, changelog, faq, arcade, squad/<tag>, my/settings,
   vantrummet — 9 av 20 testade rutter.

   Värre: <style>-taggen ligger inuti #pulse-content, som PJAX byter ut
   (pulse-nav.js:374). Koppen delade sig alltså MITT I en session när man
   gick från en rail-sida till t.ex. faq, utan omladdning.

   Blocket bor nu i themes/forre_pulse/css/pulse-topbar.css — samma fil som
   äger markupen och som länkas från pulse-topbar.php:985 på varje sida.
   Selektorerna är oförändrade. Lägg ALDRIG tillbaka topbar-CSS här. */

/* ── DISCORD I SAMMA SPRÅK ────────────────────────────────────────────────
   Blurple på hover (#5865f2 — Discords egen), och translaten borta: den
   flyttade glyfen till 211 när resten låg på 207. line-height:1 hade redan
   rättat det jag försökte kompensera för, så korrigeringen blev en ny miss. */
.top .in .right .sbt-dsc>.bi{transform:none!important}
.top .in .right .sbt-dsc:hover{color:#5865f2!important;transform:translateY(-1px)}
.top .in .right .sbt-dsc:active{transform:translateY(0) scale(.94)}
.top .in .right .sbt-dsc{position:relative}
/* Discord-tillståndet: grön kopplad, röd inte. Färgen sitter på PRICKEN, inte
   på glyfen — en helröd discord-logga läser sig som ett fel i sajten, en röd
   prick bredvid den läser sig som "något saknas hos dig". Samma prick-språk
   som LFG och Streams i flikraden. */
.top .in .right .sbt-dsc .sbt-dot{position:absolute;top:2px;right:2px;width:7px;height:7px;
  border-radius:50%;border:2px solid var(--card);display:none}
.top .in .right .sbt-dsc.is-linked .sbt-dot{display:block;background:var(--live)}
/* ── DEN RÖDA PRICKEN BORTTAGEN 2026-08-05 (Kentas order, i samma ändring som nypet) ──
   Reglerna som stod här gav VARJE inloggad som inte kopplat sitt konto ett rött
   larm på varje sidladdning, för alltid — för något som inte är trasigt. Två fel
   mot BRAIN §0B samtidigt: punkt 2 (ett element som säger samma sak hela tiden
   tränar ögat att sluta titta) och punkt 5 (rött = trasigt / kräver beslut).

   Nypet under ikonen (.dsc-nyp, forre_pulse.css) är signalen nu: det säger samma
   sak i klartext, EN gång, och lägger sig sedan i 14 dagar.

   Koden ligger kvar i klartext så att den går att återställa på tio sekunder:
     .top .in .right .sbt-dsc.is-unlinked .sbt-dot{display:block;background:var(--danger)}
     .top .in .right .sbt-dsc.is-unlinked{color:color-mix(in srgb,var(--danger) 62%,var(--dim))!important}
     .top .in .right .sbt-dsc.is-unlinked:hover{color:var(--danger)!important}

   Den GRÖNA pricken behålls med flit: när den röda är borta betyder pricken exakt
   EN sak — "ditt konto är kopplat" — och den syns bara för den som redan gjort det. */
.top .in .right .sbt-dsc.is-linked:hover{color:var(--live)!important}
/* Badgarna satt för en 36 px knapp — flyttas in mot den 29 px stora. */
.top .in .right .iconbtn .badge{top:-1px!important;right:-1px!important}
/* Vänförfrågnings-knappen bor i en .tb-item som stod på display:none — den
   var byggd för att bara finnas när knappen inuti renderades. Nu renderas
   knappen alltid, så omslaget måste också få finnas. Den hamnar mellan
   kuvertet och klockan, precis där du ville ha den. */
.top .in .right .tb-item:has([data-dd="friends"]){display:inline-flex!important}
@media (prefers-reduced-motion:reduce){.top .in .right .iconbtn{transition:none}
  .top .in .right .iconbtn:active{transform:none}}
/* Signalprickarna satt fastnitade i botten av en 58 px hög flik och hängde
   därför utanför den 28 px höga. De är flex-barn nu, som i mockupen. */
.top .tabs .tab .tab-ct{align-self:center!important;top:auto!important;right:auto!important;
  bottom:auto!important;margin:0 0 0 2px!important}
/* Höger sida: 29 px genomgående, 7 px mellan — mockupens .tbrt. */
/* De två lodräta strecken (efter loggan och före sökrutan) finns inte i
   mockupen. Där är avståndet avgränsningen — och det enda strecket i raden
   är det mellan Topplista och Sprites, som faktiskt betyder något: DIN
   PRESTATION till vänster, SAJTEN till höger. Tre streck gör det fjärde
   betydelselöst. */
.top .in .tb-vsep{display:none!important}
.top .in .right{gap:7px!important}
.top .in .right form.search{height:29px!important;font-size:11.5px!important;border-radius:var(--r-sm)!important}
.top .in .right .iconbtn{width:29px!important;height:29px!important;border-radius:var(--r-sm)!important;font-size:13px!important}
.top .in .right .me{width:29px!important;height:29px!important;border-radius:50%!important}
.sbar{top:48px!important}
.rail{top:96px!important}

/* ══════════════════════════════════════════════════════════════════════════
   SHOUTRADEN = MOCKUPENS FORM (menyer-4.0 rad 546–556 + .sb-* rad 288–300)

   Mockupen:  [20px ikonchip] HETAST  <text>            4 min   💬 Shouta
   Live var:  [22px rund avatar] Namn 🏆 <text> [🏆GG][🔥][❤️]   …tal…

   Tre saker ändras, ingen funktion tas bort:

   1. IKONCHIPET. Händelseikonen låg naken mitt i raden och bar ingen färg.
      Den flyttar först och blir ett 20 px chip — samma form som i menyn,
      "För dig" och pulsremsan. Chipet bär kategorifärgen: guld för Victory
      Royale, rött för killing spree, blått för resten. Det är mönstret vi
      ersatte de färgade staplarna med, nu på en fjärde yta.

   2. EMOJIERNA. 🏆 🔥 ❤️ är systemets enda emojier — allt annat är
      bootstrap-icons. En emoji renderas dessutom i operativsystemets
      typsnitt, så raden får plötsligt en helt annan bokstavsform i sig.
      De blir bi-glyfer i samma storlek som resten.

   3. HÖJDEN. 40 → 36, som mockupen. Med chipet på 20 och texten på 12/400
      finns det gott om luft kvar.

   Talen till höger står kvar där de står — det sa du nej till att flytta.
   ══════════════════════════════════════════════════════════════════════════ */
.sbar .in{height:36px!important;gap:10px!important}
.sbar .tick,.sbar .ticktrack,.sbar .tk{height:36px!important}
/* Chipet: händelseikonen först i raden, i kategorifärg. */
.sbar .tk .sb-evic{order:-1!important;width:20px!important;height:20px!important;
  border-radius:var(--r-sm)!important;display:inline-flex!important;align-items:center;
  justify-content:center;font-size:12px!important;flex:0 0 auto;
  background:var(--accent-wash);color:var(--accent-ink)}
.sbar .tk .bi-trophy.sb-evic{background:color-mix(in srgb,var(--gold) 14%,transparent);color:var(--gold-r,var(--gold))}
.sbar .tk .bi-fire.sb-evic{background:color-mix(in srgb,var(--danger) 12%,transparent);color:var(--danger)}
/* Avataren krymper till samma 20 px så chipet och personen väger lika. */
.sbar .tk .sb-av{width:20px!important;height:20px!important;flex:0 0 auto}
/* Namnet är kategorietiketten i mockupen: liten, versal, i accentfärg. */
.sbar .tk .tk-u{font-size:11.5px!important;font-weight:800!important;letter-spacing:0!important}
.sbar .tk .tm2{font-size:12px!important;font-weight:400!important;color:var(--ink2)!important}
.sbar .tk .tm2 b{font-weight:700!important;color:var(--ink)!important}
/* Reaktionerna. Glyferna byts i pulse-shoutbox.php (riktiga <i class="bi">),
   INTE med ::before-koder här — jag provade det först och gissade fel
   kodpunkter, så trofén blev en sol och elden en fylld prick. En ikon ska
   stå i markupen där man kan se vilken den är. */
.sbar .tk .sb-rx{gap:4px!important}
.sbar .tk .sb-react,.sbar .tk .sb-rxo{height:22px!important;padding:0 8px!important;
  border-radius:var(--r-sm)!important;font-size:10.5px!important;font-weight:700!important;
  display:inline-flex!important;align-items:center!important;gap:5px!important;line-height:1!important}
.sbar .tk .sb-rxo{padding:0 7px!important}
.sbar .tk .sb-react .bi,.sbar .tk .sb-rxo .bi{font-size:12px!important;line-height:1}
.sbar .tk .sb-rl{font-size:10.5px;font-weight:800;letter-spacing:.02em}
/* Statremsans ikoner: samma familj, var och en i sin betydelsefärg. */
.sbar .sb-right .sb-duelic{font-size:13px!important;color:var(--danger)!important;line-height:1}
.sbar .sb-right .sb-coinic2{font-size:13px!important;color:var(--gold)!important;line-height:1}
.sbar .sb-right .sb-splayic{font-size:13px!important;color:var(--accent)!important;line-height:1}

/* ══════════════════════════════════════════════════════════════════════════
   DE TRE MENYERNA UNDER NAVBAREN (bild 4, 5, 6)

   Alla tre körde på 14 px text och 14 px padding medan resten av sajten
   ligger på 11–12 px i rader på 6–7 px. De var inte fel typsnitt — de var
   för STORA, och därför läste de sig som en annan produkt som öppnades
   ovanpå sidan i stället för en del av den.

   Samma skala som vänstermenyn får dem att höra ihop med resten:
     rubrik  9,5/900 versal .1em faint      rad      12/600, 7px 12px
     ikon    24 px chip, radie 4            meta/tid 10/700 faint
   ══════════════════════════════════════════════════════════════════════════ */
/* .sbox .panel ar UTBRUTEN 2026-08-30: panelen lag pa 8 px medan varje kort
   under den ligger pa var(--r) = 6. Radien bor nu i pulse-shoutbox-yta.css. */
.tb-dd{border-radius:8px!important}
/* Rubrikrad */
.tb-dd .ddh{padding:10px 12px 7px!important;font-size:9.5px!important;font-weight:900!important;
  letter-spacing:.1em!important;text-transform:uppercase!important}
/* Raderna */
.tb-dd .ddlist>*,.me-dd .me-links>a,.me-dd .me-links>button{
  padding:7px 12px!important;font-size:12px!important;font-weight:600!important;
  gap:10px!important;line-height:1.35!important;min-height:0!important}
.me-dd .me-links>a>.bi,.me-dd .me-links>button>.bi{font-size:14px!important;width:20px;
  text-align:center;color:var(--dim)}
.me-dd .me-head{padding:11px 12px!important}
.me-dd .mh-nm{font-size:13.5px!important;font-weight:900!important;line-height:1.2!important}
.me-dd .mh-sub{font-size:10.5px!important;font-weight:600!important;color:var(--dim)!important}
.me-dd .me-head .av{width:36px!important;height:36px!important}
.me-dd{min-width:212px!important}
/* Notislistan: kompaktare rader, tydlig tid, mindre luft mellan. */
.tb-dd--notifs{width:320px!important}
.tb-dd--notifs .ddlist>*{padding:8px 12px!important;font-size:12px!important;line-height:1.35!important}
.tb-dd--notifs .ddlist .bi{font-size:13px!important}
.tb-dd--notifs .dd-foot{padding:8px 12px!important;font-size:11px!important;font-weight:700!important}
/* ── SHOUT-PANELEN AR FLYTTAD (2026-08-30) ────────────────────────────────
   Har lag fem !important-rader som lasta panelens padding, radhojd, tvo
   teckengrader och avatarstorlek. De stred mot forre_pulse.css och
   pulse-topdeck.css om samma rader — tre filer, en rad — och gjorde varje
   andring till en gissningslek.
   Panelens stil bor nu ensam i themes/forre_pulse/css/pulse-shoutbox-yta.css,
   som laddas EFTER den har filen. Lagg inte tillbaka matt har.
   ────────────────────────────────────────────────────────────────────────── */