/* ============================================================================
forre_pulse — NAVBARENS RAD 1 themes/forre_pulse/css/pulse-topbar-rad1.css
----------------------------------------------------------------------------
Egen fil (aldrig append i forre_pulse.css — trunkeringslaxan 2026-07-12).
Markup: themes/forre_pulse/views/partials/pulse-topbar-rad1.php
ROLLBACK: ta bort raden i app/Helpers/PulseAssets.php OCH partial-anropet i
pulse-topbar.php:1295. Bannern tands igen med en rad i default.php:424.
═══ EFFEKTERNA AR FLYTTADE, INTE KOPIERADE ═══
Kenta: "bort med bannern men vill ha kvar effekterna pa navbar".
Bannerns instrumentlager (pulse-live-banner.css:13-58) ar byggda for en MORK
bradyta: varenda linje ar rgba(255,255,255,.05-.20). Rad 1 ligger pa --card,
som ar VIT i ljust lage. Vita linjer pa vitt ar ingenting alls — samma fel
som vattenmarket gjorde tva ganger.
Darfor ar varje linje har blandad ur var(--ink) i stallet. --ink ar mork i
ljust lage och ljus i morkt, alltsa byter linjerna hall med temat av sig
sjalva och ingen regel behover skrivas tva ganger.
═══ RORELSEN ═══
Rutnatet upprepar var 26 px och lagret ar forskjutet 260 px at varje hall.
26 gar jamnt upp i 260, darfor ar loopen somlos — samma matematik som
bannern, och det ar dess enda skal att vara just de talen.
Rorelsen ligger pa transform, inte pa background-position: transform
komposit-lagras och ritas inte om varje frame.
prefers-reduced-motion stanger av allt tre, langst ned.
═══ HOJDEN ═══
46 px, mockupens rad 1. Bannern var 120 px och bar samma sasongsrad och
samma status en gang till. Sajten blir 74 px kortare utan att bli dummare.
============================================================================ */
/* ══════════════════════════════════════════════════════════════════════════
RAD 1 LIGGER INUTI .top — OCH VARFOR DET AR RATT ANDA
Forsta bygget la raden inuti och det gick fel: .top var last till 48 px
(pulse-navbar.css), innehallet blev 96, .in foll ut ur ladan och landade pa
y=89 — samma y som shoutraden, som ar sticky pa top:48. Jag flyttade da ut
raden ur .top for att slippa rora tre sticky-tal i andra filer.
Det var fel slutsats av ratt matning. Alla tre talen (.top, .sbar, .rail)
stod redan i SAMMA fil, pulse-navbar.css, och de ar en trappa dar varje steg
ar navbarens hojd. Ratt atgard var att andra trappan en gang — 84 / 84 / 132
— inte att flytta elementet undan problemet.
Och raden MASTE ligga inuti: hogerklustret flyttas upp hit av JS, och 44
CSS-regler riktar mot `.top .in .right ...`. Utanfor .top matchar ingen av
dem. Darfor bar rad 1 ocksa klassen .in.
Rad 1 ar alltsa sticky tillsammans med flikraden. Mockupen goms den vid
rullning ([data-scroll="rullad"] .c-r1{display:none}) — men i mockupen ar
hogerklustret bara pynt, medan det pa live bar sok, notiser, messenger och
avatar. Att gomma raden hade tagit bort dem sa fort man rullade. Husregeln
"MINST lika smart som nulaget" vager tyngre an mockupens rullningslage.
Vill man anda ha det: satt data-scroll pa och gom .tr1 — men rakna
forst med att sok och notiser forsvinner med den.
══════════════════════════════════════════════════════════════════════════ */
.tr1{
position:relative;
width:100%;
background:var(--card);
box-shadow:inset 0 -1px 0 var(--line);
/* ★ INGEN overflow HAR. Se .tr1-fx nedan — raden bar hogerklustret med alla
dess dropdowns, och de MASTE kunna falla ut nedanfor raden. */
}
.tr1-in{
max-width:var(--shell-w);
margin:0 auto;
padding:0 16px;
/* Hojd och gap star i pulse-navbar.css tillsammans med de andra tre
navbarstalen — raden bar klassen .in, och `.top .in` sattas darifran med
hogre specificitet. Skrevs de har skulle filen ljuga om vad som galler. */
position:relative;
z-index:1;
display:flex;
align-items:center;
gap:12px;
position:relative;
z-index:1; /* innehallet over instrumentlagren */
}
/* ── INSTRUMENTLAGREN ───────────────────────────────────────────────────── */
/* KLIPPLADAN: bara effekterna, aldrig raden. Absolut positionerad och lika
stor som raden, med overflow:hidden pa SIG SJALV. Svepet far darfor aka
utanfor sin egen lada utan att raden slutar slappa igenom dropdowns. */
.tr1-fx{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.tr1-rutn,.tr1-svep,.tr1-riv{ pointer-events:none; position:absolute; z-index:0; }
.tr1-rutn{
inset:0; overflow:hidden;
/* Tatast vid kanterna, nastan borta i mitten — annars konkurrerar rutnatet
med texten som star just dar. Samma maskkurva som bannern. */
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10%,rgba(0,0,0,.22) 42%,rgba(0,0,0,.22) 58%,#000 90%,transparent 100%);
mask-image:linear-gradient(90deg,transparent 0,#000 10%,rgba(0,0,0,.22) 42%,rgba(0,0,0,.22) 58%,#000 90%,transparent 100%);
}
/* AVSTANGT 2026-08-30 pa Kentas begaran ("den rutiga ... blir for mkt AI slop").
Rutnatet i rad 1 var bannerns instrumentlager, flyttat hit samma dag bannern
slacktes. Det ar samma monster som lag pa sidytan, och nar bada syntes lasse
toppen som rutat papper. SVEPET (.tr1-svep) OCH RIVET (.tr1-riv) LEVER - de
ar rorelse, inte monster, och det var dem Kenta ville behalla.
.tr1-rutn-elementet star kvar i partialen och ritar nu ingenting.
ROLLBACK: ta bort de tva kommentarstecknen nedan. */
/*
.tr1-rutn::before{
content:""; position:absolute; top:0; bottom:0; left:-260px; right:-260px;
background-image:
repeating-linear-gradient(90deg,color-mix(in srgb,var(--ink) 5%,transparent) 0 1px,transparent 1px 26px),
repeating-linear-gradient(0deg, color-mix(in srgb,var(--ink) 5%,transparent) 0 1px,transparent 1px 26px),
repeating-linear-gradient(90deg,color-mix(in srgb,var(--ink) 3%,transparent) 0 1px,transparent 1px 130px);
will-change:transform;
animation:tr1Rutn 13s linear infinite;
}
@keyframes tr1Rutn{ from{transform:translate3d(0,0,0)} to{transform:translate3d(260px,0,0)} }
*/
.tr1-svep{
top:0; bottom:0; left:0; width:2px;
background:color-mix(in srgb,var(--ink) 7%,transparent);
will-change:transform;
animation:tr1Svep 9s linear infinite;
}
.tr1-svep::after{
content:""; position:absolute; top:0; bottom:0; left:-240px; width:1px;
background:color-mix(in srgb,var(--ink) 5%,transparent);
}
@keyframes tr1Svep{ from{transform:translate3d(-4px,0,0)} to{transform:translate3d(100vw,0,0)} }
/* Storningen: signalen hackar nar man pekar i raden. Platt — bara opacitet och
translate, inga gradienter, ingen blur. :hover gor att det hander aven om JS
aldrig laddar; det finns ingen JS har alls. */
.tr1-riv{ left:0; right:0; top:46%; height:2px;
background:color-mix(in srgb,var(--ink) 42%,transparent); opacity:0; }
.tr1:hover .tr1-riv{ animation:tr1Riv .26s steps(3,end) 1; }
.tr1:hover .tr1-in{ animation:tr1Skift .26s steps(2,end) 1; }
@keyframes tr1Riv{ 0%{opacity:0} 20%{opacity:1} 60%{opacity:.5} 100%{opacity:0} }
@keyframes tr1Skift{ 0%{transform:translate3d(0,0,0)} 50%{transform:translate3d(2px,0,0)} 100%{transform:translate3d(0,0,0)} }
/* ── MARKET ─────────────────────────────────────────────────────────────── */
.tr1-marke{ display:flex; align-items:center; gap:7px; text-decoration:none; flex:0 0 auto; }
/* ★ BARA GEOMETRI HÄR. Märkets FÄRG bor i pulse-navbar-marke.css §2 och kommer
ur var(--accent) — ![]()
:ens egna pixlar byts där mot en genomskinlig 1x1 och
formen ritas som mask ur forre-f-ring-currentcolor.svg. Sätt aldrig en färg
eller en bild på .tr1-ring här; då finns sajtens blå på två ställen igen. */
.tr1-ring{ width:24px; height:24px; display:block; flex:0 0 auto; }
.tr1-ord{ font-family:var(--kond); font-size:16px; font-weight:600; letter-spacing:.01em;
color:var(--ink); white-space:nowrap; }
.tr1-ord i{ font-style:normal; color:var(--accent); }
/* .tr1-sep togs bort 2026-08-31 — den skilde markret fran sasongsraden,
och bada ar borta ur raden nu. */
/* ── SASONGEN ───────────────────────────────────────────────────────────── */
/* ── SASONGEN ER EN HAIRLINJE, INTE EN TEXTRAD (2026-08-31) ─────────────────
.tr1-sas / .tr1-namn / .tr1-prog / .tr1-kvar ar borttagna har och i
pulse-topbar-rad1.php. Raden tog 254 px av 1168 for kap, sasong, namn och
"69D 18H KVAR" — varden som andras en gang i timmen, bredvid en ticker som
andras var sjatte sekund.
Procenten lever vidare som navbarens understrykning: 2 px hog, noll bredd,
och hela texten i title. Kap/sasong/tid star dessutom kvar i klartext pa
hubbens sasongskort och pa override-sidan — ingenting gick forlorat. */
/* .tr1-sasongslinje ar BORTTAGEN samma dag den byggdes (2026-08-31).
En 2 px accentfargad stapel langst upp pa sidan lases som en
LADDNINGSINDIKATOR — och eftersom den stod still lastes den som en som
hangt sig. Kenta: "har nagon laddnings bar med som inte forsvinner".
Det gar inte att designa bort: formen ar laddarens form.
Sasongens varden bor pa hubbens sasongskort och pa override-sidan. */
/* ── STATUS ─────────────────────────────────────────────────────────────── */
/* ★ STATUSEN AR DEN SOM FAR GE SIG. Raden ar en flexrad dar allt annat ar
flex:0 0 auto — marke, sasong, talen, hogerklustret. Utan flex:1 1 auto OCH
overflow:hidden har vaxte statusen inte, den SPILLDE: "Allt ar last" malades
rakt ovanpa "DUELLER 8" vid 1249 px. min-width:0 racker inte i en flexrad,
overflow maste ocksa satta grans. Uppmatt pa live innan/efter. */
.tr1-st{ display:flex; align-items:center; gap:7px; margin-left:6px;
flex:1 1 auto; min-width:0; overflow:hidden; }
.tr1-pt{ width:6px; height:6px; border-radius:50%; background:var(--live); flex:0 0 auto; }
.tr1-st.vantar .tr1-pt{ background:var(--danger); }
/* Sjalva paståendet kortas ALDRIG — "Allt..." ar inte ett kortare "Allt ar
last", det ar ett annat (och obegripligt) meddelande. Det ar detaljen efter
punkten som far ge sig, och den ar byggd for att gora det. */
.tr1-st b{ font-size:12.5px; font-weight:800; color:var(--ink); white-space:nowrap;
flex:0 0 auto; }
.tr1-m{ font-size:11.5px; color:var(--dim); white-space:nowrap;
flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; }
/* ── HOGERKLUSTRET: BANNERNS TAL, SOM INTE FICK TAPPAS ──────────────────── */
.tr1-hg{ display:flex; align-items:center; gap:4px; margin-left:auto; flex:0 0 auto; }
.tr1-tal{ display:inline-flex; align-items:center; gap:6px; padding:0 8px; height:26px;
border-radius:var(--r-sm); text-decoration:none; position:relative;
font-family:var(--kond); font-size:11px; letter-spacing:.12em; text-transform:uppercase; }
.tr1-tal:hover{ background:var(--inset); }
.tr1-tal em{ font-style:normal; font-weight:600; color:var(--faint); }
.tr1-tal b{ font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; letter-spacing:.02em; }
.tr1-ask{ width:5px; height:5px; border-radius:50%; background:var(--danger); flex:0 0 auto; }
/* .tr1-cta togs bort 2026-08-30 — se motiveringen i partialen. */
/* ── FORRE.NU PA ETT STALLE, INTE TVA ───────────────────────────────────────
Kenta 2026-08-29: "behovs forre.nu pa 2 stallen?" Nej. Rad 1 bar markret,
alltsa goms flikradens marke sa lange rad 1 finns. Under 1000 px gar rad 1
bort (den ryms inte, och da ar den en lyx som kostar trang yta i stallet for
tom) — och da MASTE flikradens marke tillbaka, annars star sajten utan
logga. De tva reglerna hor darfor ihop och far aldrig skiljas at. */
/* ══════════════════════════════════════════════════════════════════════════
MARKET STAR PA FLIKRADEN, BREDVID HUB (Kenta 2026-08-30)
"testa satta det bredvid hub istallet?"
Innan: rad 1 bar ring + FORRE.NU, och flikraden bar en NAKEN ring (ordet
slackt med font-size:0). Tva ringar ovanpa varandra, tolv pixlar isar — det
ar den dubbleringen Kentas tva skarmklipp visar. Att slacka ordet loste
halva problemet; ringen stod kvar och var lika mycket ett marke.
Nu: ETT marke, och det star dar man faktiskt siktar — forst i flikraden,
bredvid HUB. Rad 1 borjar direkt pa sasongen.
Bonus som inte var syftet: markret slutar rulla bort. Rad 1 och flikraden ar
bada sticky, men markret bredvid HUB ar det man ser aven nar man rullat.
TILLBAKA: ta bort blocket nedan. Da tands .tr1-marke igen och flikradens
ord slacks — det ar tva rader, och de hor ihop. */
.tr1-marke{ display:none; }
/* Ordet tillbaka pa flikraden. 16 px ar mockupens .ord — 20 px (husets
normala .brand) ar for hogt i en 38 px rad och slar upp mot flikarnas 13 px.
★ html.tdk-prefixet ar inte pynt: vinnaren for .brand ar pulse-deck.css
@media(min-width:821px) `html.tdk .top .brand{20px!important}` = (0,4,1) med
!important. En regel pa (0,3,0) forlorar aven med !important — det syntes
forst som att ".NU" forsvann men "FORRE" stod kvar, for .NU traffades
av en egen regel medan textnoden inte gjorde det. (0,5,1) vinner.
★ Selektorn ar DESCENDANT, inte child: React monterar sitt marke inuti
, sa `.top .in > .brand` traffar ingenting alls.
Bada raderna ar uppmatta i CSSOM/DOM, inte gissade. */
html.tdk .top .in:not(.tr1-in) .brand{
font-size:16px!important;
font-family:var(--kond)!important;
font-weight:600!important;
letter-spacing:.01em!important;
/* ★ gap:0, INTE 7. ar en flexrad med TRE barn: ![]()
,
textnoden "FORRE" och .NU. En gap tratter darfor mellan FORRE och
.NU ocksa, och ordet blev "FORRE .NU" med ett halt mitt i. Luften mellan
ringen och ordet ar bildens egen marginal i stallet. */
gap:0!important;
/* 14 px, inte 4: uppmatt luft mellan ordet och HUB var 4 px och ordet
klibbade ihop med forsta fliken. Mockupens rad 2 har markret och flikarna
atskilda med 12 + 6 px. */
margin-right:14px;
}
html.tdk .top .in:not(.tr1-in) .brand .brand-mark{ margin-right:7px; }
/* ══════════════════════════════════════════════════════════════════════════
SMALT: RADEN TUNNAS UT, DEN FORSVINNER INTE
Forsta versionen gomde hela rad 1 under 1000 px. Det gick bra sa lange raden
bara bar text — men nar hogerklustret flyttade upp hit betydde samma regel
att sok, notiser, messenger och avatar var BORTA pa smal skarm. Det ar inte
en designdetalj, det ar att ta bort sajtens verktyg.
Nu gar sasongen, statusen och talen bort i tva steg, och markret plus
hogerklustret star kvar. Skolden star ocksa kvar — den ar stabens enda vag
in i megamenyn.
══════════════════════════════════════════════════════════════════════════ */
@media (max-width:1199px){
.tr1-m{ display:none; } /* detaljen efter punkten forst */
}
/* 1149, inte 1049: uppmatt blev tickern 196 px vid 1249, men bara 118 vid
1100 — ett smalt band dar sasongsraden och talen fortfarande tog plats men
kolumnen redan krympt. Over gransen sheddar raden dem, och tickern hoppar
till ~345 i stallet for att strypas. Gransen ska ligga dar det borjar bli
trangt, inte dar det redan ar det. */
@media (max-width:1149px){
/* .tr1-sas och .tr1-sep finns inte langre — sasongen ar en hairlinje. */
.tr1-st{ display:none; }
.tr1-hg .tr1-tal{ display:none; } /* DUELLER/PLACERING — skolden star kvar */
}
/* ── RORELSEKANSLIGHET ──────────────────────────────────────────────────────
Tre rorliga lager. Alla tre av. Raden blir stilla, inte tom. */
@media (prefers-reduced-motion:reduce){
.tr1-rutn::before,.tr1-svep{ animation:none!important; }
.tr1:hover .tr1-riv,.tr1:hover .tr1-in{ animation:none!important; }
}
/* ══════════════════════════════════════════════════════════════════════════
SKOLDEN OCH MEGAMENYN (Kenta 2026-08-30)
"stab bar behovs inte synas kanske gora nagot annat istallet for den typ en
skold sa kommer det en 'mega meny' under den med staff grejer"
Stabsbaren ar INTE ombyggd. Den ar flyttad (default.php: nu EFTER topbaren,
sa den faller ut under navbaren) och gomd tills skolden trycks. Alla 843
rader, alla behorighetsgrindar, alla endpoints och alla popovers ar exakt
som forut. Det enda som andrats ar NAR den syns.
★ VARFOR REGELN AR html[data-stab="av"] OCH INTE :not([data-stab="mega"])
Skrev jag :not(...) skulle stabsbaren forsvinna helt om JS:en aldrig kor —
ett trasigt skript hade tagit bort stabens verktyg utan ett spar.
Nu ar utgangslaget "som forut": utan JS star baren kvar och fungerar.
data-stab="av" satts av skriptet i pulse-topbar-rad1.php, som ligger FORE
.sbd i DOM:en — alltsa hinner det innan baren malas, och det blinkar inte.
══════════════════════════════════════════════════════════════════════════ */
html[data-stab="av"] .sbd{ display:none; }
html[data-stab="mega"] .sbd{ display:block; box-shadow:0 14px 30px rgba(10,20,40,.10); }
[data-theme="dark"] html[data-stab="mega"] .sbd,
html[data-theme="dark"][data-stab="mega"] .sbd{ box-shadow:0 14px 30px rgba(0,0,0,.34); }
.tr1-skold{
position:relative; width:28px; height:26px; margin-left:4px; padding:0;
border:0; background:none; cursor:pointer; border-radius:var(--r-sm);
display:grid; place-items:center; color:var(--champ); /* lila = stab-identitet, raknas ej som accent */
}
.tr1-skold:hover{ background:color-mix(in srgb,var(--champ) 14%,transparent); }
.tr1-skold[aria-expanded="true"]{ background:color-mix(in srgb,var(--champ) 18%,transparent); }
.tr1-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.tr1-pt2{
position:absolute; top:-2px; right:-3px; min-width:14px; height:14px; padding:0 3px;
border-radius:99px; background:var(--danger); color:#fff;
font:800 9px/14px system-ui,sans-serif; text-align:center; font-variant-numeric:tabular-nums;
}
/* ══════════════════════════════════════════════════════════════════════════
DRIFTNOTISEN
Rott = trasigt, husets fargregel. Ligger overst, fore navbaren, for den ska
lasas forst. Ingen regel har ger den hojd nar den ar tom — markupen skrivs
inte alls da (pulse-driftnotis.php returnerar tidigt). Det ar skillnaden mot
en yta som "ar tom": den har finns inte.
══════════════════════════════════════════════════════════════════════════ */
.dfn{ width:100%; background:var(--danger); color:#fff; }
.dfn-in{
max-width:var(--shell-w); margin:0 auto; padding:0 16px; height:30px;
display:flex; align-items:center; gap:9px; font-size:12.5px;
}
.dfn b{ font-weight:800; }
.dfn-t{ opacity:.94; }
.dfn-a{
margin-left:auto; color:#fff; text-decoration:none;
font-family:var(--kond); font-size:11px; font-weight:600; letter-spacing:.1em;
text-transform:uppercase; border-bottom:1px solid rgba(255,255,255,.45);
}
.dfn-a:hover{ border-bottom-color:#fff; }
/* ★ UNDER 1000 px FINNS INTE RAD 1 — OCH DA FINNS INTE SKOLDEN HELLER.
Skolden bor i rad 1, och rad 1 goms pa smala skarmar. Utan den har regeln
hade staben tappat sina sexton verktyg helt pa mobil: menyn gomd, knappen
som oppnar den borta. Darfor gar stabsdacket tillbaka till att vara en
vanlig rad dar, precis som det var fore den har andringen. Ingen tappar
nagot; bredare skarmar far bara tillbaka 40 px.
Regeln MASTE folja @media(max-width:999px){.tr1{display:none}} ovan — de
beskriver samma grans och far aldrig skiljas at. */
/* (Regeln som tog tillbaka stabsdacket under 1000 px ar borttagen 2026-08-30:
rad 1 finns nu pa alla bredder, alltsa finns skolden ocksa alltid, och
megamenyn nas overallt. Dacket ska darfor vara dolt overallt.) */
/* ══════════════════════════════════════════════════════════════════════════
MEGAMENYN FAR ANDAS
Stabsdacket ar byggt som en 40 px HOG RAD — allt pa en linje, med
.sb-hideable-bitar som viks bort nar det blir trangt. Som utfalld panel ar
det fel form: en panel som ar 40 px hog ser ut som en bar man glomt stanga.
Reglerna nedan ar RENT PRESENTATION — de ror inte en enda knapp, kontroll
eller behorighet, bara hur radens innehall far bryta.
★ Detta ar INTE mockupens fyra kolumner (Ko/Anvandare/Epic/Drift). Att bygga
dem betyder att skriva om 843 rader admin-granssnitt med en behorighetsgrind
per rad, per ko och per knapp, och testa om varje endpoint. Det ar en
ombyggnad av stabens verktyg, inte en designandring, och den ar inte gjord.
Skulden star har sa att nasta person ser den direkt.
══════════════════════════════════════════════════════════════════════════ */
html[data-stab="mega"] .sbd .sb-in{
height:auto!important;
min-height:44px;
flex-wrap:wrap;
padding-top:11px;
padding-bottom:11px;
row-gap:9px;
}
html[data-stab="mega"] .sbd .sb-cx{ overflow:visible; flex-wrap:wrap; row-gap:8px; }
html[data-stab="mega"] .sbd .sb-fold-btn{ display:none; } /* skolden ar knappen nu */
/* ══════════════════════════════════════════════════════════════════════════
TVA RADER, INTE TRE — OCH SHOUTSEN I RAD 1:s MITT
Kenta: "vill nastan ha 2 rader bara inte 3", sedan: "kanske ta bort detta
satta shoutsen dar?" (pekade pa "Allt ar last · inget vantar pa dig just nu").
Kromet var 46 + 38 + 36 = 120 px i tre vagrata ytor. Nu 84 i tva.
★ FORSTA FORSOKET LA TICKERN I FLIKRADEN. DET VAR FEL PLATS, OCH DET GICK
ATT MATA: flikraden ar 1168 px och flikarna tar 717 av dem. Tickern fick
170 px vid 1440, 92 vid 1100 och **0 vid 880** — den fanns i DOM:en och
syntes inte alls. En ticker pa noll pixlar ar inte en smalare ticker, det
ar en borttagen funktion som ingen ser att den ar borta.
I rad 1:s mitt ar den fria ytan bredare, och den VAXER pa smala skarmar i
stallet for att krympa: under 1049 px goms sasongsraden och talen
(dueller/placering), och all den ytan gar till tickern.
Bonus: flikraden blir en ren navigationsremsa — precis mockupens rad 2.
★ "ALLT AR LAST" AR BORTTAGEN, INTE GOMD. Se motiveringen i partialen:
husets egen tystnadsregel plus att den dubblerade klockans bricka tolv
pixlar till hoger. Raden renderas nu bara nar nagot faktiskt vantar, och
da tar den plats fran tickern — vilket ar ratt prioritet: en uppmaning
gar fore en nyhetsremsa.
★ OVERRIDE ar struken ur tickern. INGEN forlust: ordet star kvar i
sasongsraden i samma rad, nagra hundra pixlar till vanster. Samma
sasongsnamn tva ganger i samma rad ar brus.
══════════════════════════════════════════════════════════════════════════ */
html .top .tr1-in .sbar{
position:static!important;
top:auto!important;
background:transparent!important;
box-shadow:none!important;
border:0!important;
height:46px!important;
flex:1 1 auto!important;
min-width:0!important;
display:flex!important;
align-items:center!important;
justify-content:flex-start!important;
margin:0 4px!important;
}
html .top .tr1-in .sbar > .in{
max-width:none!important;
width:100%!important;
height:46px!important;
padding:0!important;
margin:0!important;
min-width:0!important;
justify-content:flex-start!important;
background:transparent!important;
box-shadow:none!important;
}
/* Tickern ar den som ska vaxa OCH den som ska kortas. Utan min-width:0 pa bade
barnet och foraldern kollapsar den till 0 px i en flexrad — uppmatt: forsta
forsoket gav OVERRIDE 124 px och halsningen 258 medan sjalva tickern var 0.
Precis fel prioritet. */
html .top .tr1-in .sbar .tick{
flex:1 1 auto!important;
min-width:0!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
white-space:nowrap!important;
}
/* OVERRIDE bort (star i sasongsraden). Halsningen och KARTA far vara kvar sa
lange de ryms — de ar flex:0 0 auto och trycker inte ut tickern. */
html .top .tr1-in .sbar .ovp,
html .top .tr1-in .sbar .ovp-sep:first-of-type{ display:none!important; }
/* ══════════════════════════════════════════════════════════════════════════
NYASTE MEDLEMMEN — SOM CHIP, PINNAT TILL HOGER (Kenta 2026-08-30)
"senast medlem vill jag ha med men vet inte vart den ska placeras"
Jag matte var det fanns plats innan jag foreslog nagot: rad 1 hade 44 px
ledigt och flikraden 42. Hela blocket ar 258 px (👋 + avatar + namn +
"Valkommen till forre.nu"), sa det fanns ingen ledig yta att lagga det pa —
den enda ytan med utrymme var tickerns egna 482. Fragan var alltsa aldrig
"var", utan "hur mycket av shoutytan ar halsningen vard".
Kentas val: kompakt chip, alltid synligt.
★ KOMPAKTLAGET FANNS REDAN. pulse-shoutbar-nymedlem.php har sedan 2026-08-24
en regel @media(max-width:820px){.nym-fras{display:none}} — precis det har
chipet, byggt for smala skarmar. Jag skrev alltsa ingen ny variant, jag
lanade den befintliga. Orden "Valkommen till forre.nu" ar ~150 px och
vinkhanden sager redan samma sak; kvar star 👋 + avatar + namn, och hela
chipet ar fortfarande EN lank till profilen.
Farskhetspricken (tands bara om kontot ar under ett dygn gammalt) foljer
med — det ar den enda signalen pa raden som sager NAR, och den kostar
7 px.
★ margin-left:auto pa AVSKILJAREN, inte pa chipet. Bada ska folja med at
hoger, och auto pa .nym hade lamnat "|" kvar mitt i tickern.
══════════════════════════════════════════════════════════════════════════ */
html .top .tr1-in .sbar .nym-sep{ margin-left:auto!important; flex:0 0 auto!important; }
html .top .tr1-in .sbar .nym{ height:46px!important; flex:0 0 auto!important; }
html .top .tr1-in .sbar .nym-fras{ display:none!important; }
/* Under 999 px ar tickern det enda som ska sta kvar i mitten — dar har bade
sasongsraden och talen redan gatt bort, och ett chip till hade atit av det
enda som blev over. */
@media (max-width:999px){
html .top .tr1-in .sbar .nym,
html .top .tr1-in .sbar .nym-sep{ display:none!important; }
}
/* ★ PROGRESSSTAPELN UR SASONGSRADEN — SA TICKERN FAR PLATS
Uppmatt vid 1249 px, rad 1 = 1136 px innehall:
sasongsraden 318 · shoutsen 246 (varav sjalva tickern 125) · talen 220
· hogerklustret 308
125 px ticker ar for smalt for att lasa nagot av, aven om texten rullar.
Fyra grupper delar pa raden och tre av dem ar oumbarliga. Det enda som ar
REN dekoration ar den 64 px breda stapeln i sasongsraden — och samma
procentsats star som en riktig siffra i hubbens OVERRIDE-kort ("13 %").
Uppmatt efter: sasongsraden 247, tickern 196. +57 % lasbar yta for en
stapel som sa samma sak en gang till.
Stapeln ar bara gomd HAR; markupen och beraknningen ar oforandrade, sa den
tands igen med en rad om raden nagon gang far mer plats. */
/* .tr1-prog ar borttagen 2026-08-31 — se sasongslinjen ovan. */
/* ══════════════════════════════════════════════════════════════════════════
TALEN OCH KARTA I FLIKRADENS HOGERKANT (Kenta 2026-08-30)
"bild 1 kan du ha bredvid bild 2 sa ser vi shoutbar lattare"
KARTA, DUELLER och PLACERING stod till hoger om tickern i rad 1 och kapade
mitten i tva. Nedflyttade till flikraden blir rad 1:s mitt EN obruten yta:
uppmatt gick tickern fran 196 px till ~520 av den har flytten ensam.
Flikraden har plats: flikarna tar 717 av 1136 och markret 110 — ~309 kvar,
och de tre behover ~298.
Skolden foljde INTE med. Den ar en KONTROLL (oppnar megamenyn) och hor till
verktygen i rad 1 — sok, notiser, meddelanden, avatar. Talen ar INFORMATION.
Att blanda dem hade gjort flikraden till ett verktygsfalt igen, vilket var
precis det mockupen ville bort ifran.
══════════════════════════════════════════════════════════════════════════ */
.tr2-hg{
display:flex; align-items:center; gap:2px;
margin-left:auto; flex:0 0 auto; min-width:0;
}
.tr2-hg .ovp-karta{ flex:0 0 auto; }
/* Talen ar redan formgivna av .tr1-tal — de foljde med sina regler ner hit.
Enda skillnaden ar radhojden: 38 px i stallet for 46. */
html .top .in:not(.tr1-in) .tr1-tal{ height:24px!important; }
/* ══════════════════════════════════════════════════════════════════════════
OVERRIDE-LANKEN I FLIKRADEN (Kenta 2026-09-04)
"nav bar har karta har vill ha lanken til override sidan ... gor sa
override lanken funkar bade pa mobil och pa desktop"
.ovp (ordet + prickarna + Pac-Man) ar FLYTTAD hit ur shoutraden av
flytta() i pulse-topbar-rad1.php. Den ar alltsa samma nod, samma CSS-fil
(pulse-shoutbar-override.php) och samma etikett ur configen — det som
behovs har ar bara de tre sakerna som skiljer flikraden fran shoutraden.
★ 1. ORDETS BAKGRUND MASTE MATCHA YTAN DEN STAR PA.
.ovp-ord har en ogenomskinlig bakgrund med ETT syfte: dolja Pac-Man nar
han passerar bakom ordet. I shoutraden ar plattan var(--inset) och den
fargen ar hardkodad i partialen. Flikraden ar .top, som forre_pulse.css:108
satter till var(--card). Utan raden nedan far ordet en gra ruta runt sig i
ljust lage och en morkare i morkt — exakt det fel som redan intraffade en
gang at andra hallet (se partialens filhuvud).
★ BYTER NAGON .top:s bakgrund maste den bytas HAR ocksa.
★ 2. HOJDEN AR 38 px I SHOUTRADEN, 24 I FLIKRADEN. Samma sank som .tr1-tal
far pa raden ovan, av samma skal: raden ar 38 px hog totalt.
★ 3. PRICKARNA GAR UT REDAN VID 1149, INTE VID 820. Shoutradens egen regel
slacker dem forst under 820 — men dar hade flikraden redan overflodat.
Se breddbudgeten langst ned.
══════════════════════════════════════════════════════════════════════════ */
.tr2-hg .ovp{ flex:0 0 auto; height:24px; padding:0 4px; border-radius:var(--r-sm); }
.tr2-hg .ovp:hover{ background:var(--inset); }
.tr2-hg .ovp-ord{ background:var(--card); }
/* ★ HOVERN FAR INTE GORA ORDET GENOMSKINLIGT. Over 1440 px springer Pac-Man
bakom ordet, och ett transparent ord slapper igenom honom just den halva
sekund han passerar — precis det fel som .ovp-ord finns for att forhindra.
Bakgrunden foljer darfor hovern i stallet for att slappas. */
.tr2-hg .ovp:hover .ovp-ord{ background:var(--inset); }
/* ── DUELLER + PLACERING SOM EN EGEN LITEN FLIK ────────────────────────────
Kenta: "dueller och placering kan du satta under det som en liten flik
bara". De ar STATUS, inte navigation — och nar OVERRIDE flyttade in bredvid
dem stod tre likvardiga saker i rad som drog at olika hall.
Fliken ar darfor en egen inramad grupp med LATTARE typografi an sina
grannar: samma tal, mindre rost. Ramen ar hairline (var(--line)), inte en
fylld platta — en fylld platta hade blivit tyngre an OVERRIDE, alltsa
tvartemot poangen. */
.tr2-flik{
display:flex; align-items:center; gap:0; flex:0 0 auto;
margin-left:6px; padding:0 2px;
border:1px solid var(--line); border-radius:var(--r-sm);
}
.tr2-flik .tr1-tal{ padding:0 6px; gap:4px; font-size:11px; letter-spacing:.02em; }
.tr2-flik .tr1-tal b{ font-weight:700; }
/* ★ IKON + SIFFRA, INTE ETIKETT + SIFFRA — RÄTTAT 2026-09-04 EFTER MÄTNING
PÅ LIVE. Etiketterna gjorde fliken 161 px bred, och hela .tr2-hg 368 px
(OVERRIDE 128 + KARTA 70 + fliken 161). Flikraden har 1136 px innehåll och
flikarna tar 728 — uppmätt overflow: **54 px**, alltså hängde fliken utanför
raden på varje skärm över 1150 px. Ikonvarianten är ~95 px och tar bort
överskottet med marginal.
★ SAMMA REGEL SOM FÖRR PÅ MOBIL, NU PÅ ALLA BREDDER: släcker du `em` MÅSTE
ikonen finnas. En naken "8" och "#35" är två tal utan betydelse.
Mönstret (::before + font-family:'bootstrap-icons') är samma som .sq-mark
i pulse-sprites.css. Titeln på länken bär hela meningen för den som hovrar.
★ DETTA ÄR OCKSÅ "en liten flik bara" I KENTAS MENING. Första versionen
krympte typsnittet men behöll orden; det är inte samma sak som att ta
mindre plats. */
.tr2-flik .tr1-tal em{ display:none; }
.tr2-flik .tr1-tal::before{
font-family:'bootstrap-icons'; font-size:11px; color:var(--faint);
line-height:1; font-weight:400;
}
.tr2-flik a[href*="dueller"]::before{ content:"\f46c"; } /* bi-lightning-charge-fill */
.tr2-flik a[href*="leaderboard"]::before{ content:"\f5e6"; } /* bi-trophy-fill */
/* ══════════════════════════════════════════════════════════════════════════
PLATSEN I FLIKRADEN ÄR ETT NOLLSUMMESPEL (Kenta 2026-09-04:
"du får finura med att få till notis knappar som ska synas också på mobil")
★ HÖGERKLUSTRET FÅR ALDRIG TRYCKAS UT. Sök, notiser, ••• och kontot ligger
SIST i flikraden på mobil (flytta() lägger dit dem under 820 px). En
flexrad som blir för trång trycker ut det som står sist — alltså exakt
notisknappen. Uppmätt på live: högerklustret är 308 px på desktop och
~150 px på mobil (meddelanden, vänner och verktygen är redan gömda där).
`flex:0 0 auto` gör det omöjligt att krympa eller putta ut det.
★ .tr2-hg ÄR DET SOM GER VIKA I STÄLLET, och ordningen är bestämd:
1. fliken (DUELLER/PLACERING) — status, finns i bottennaven
2. ordet KARTA — nålen räcker
3. OVERRIDE kortas med ellips — men försvinner aldrig
Destinationen är alltid det sista som ryker. Samma princip som
breddbudgeten längre ned.
★ html-prefixet är räknat, inte pynt: `.top .right` (0,2,0) sätts i
forre_pulse.css inuti @media(max-width:820px) och den filen laddas FÖRE
den här. Lika specificitet + senare fil hade vunnit ändå, men `html`
(0,3,0) gör regeln oberoende av laddordningen om någon flyttar en .
══════════════════════════════════════════════════════════════════════════ */
html .top .in > .right{ flex:0 0 auto; }
/* ★ .tr2-hg FAR *INTE* KRYMPA PA DESKTOP — FANGAT I TEST 2026-09-04.
Forsta forsoket satte `flex:0 1 auto` har, pa alla bredder. Basregeln langre
upp har redan `min-width:0`, och de tva tillsammans later flexboxen krympa
.tr2-hg anda ner till NOLL: uppmatt bredd 0 px med barn pa 134 + 54 + 81 px
som lag utanfor sin egen behallare. Pa desktop ar det inte en nodutgang utan
ett kollapsat element — ordet, nalen och fliken hamnar da ovanpa flikarna.
Krympningen hor hemma DAR den ar en nodutgang: under 820 px, dar det finns en
ellips att krympa till och dar alternativet ar en utpuffad notisknapp.
Regeln star i @media-blocket langst ned. Flytta den aldrig hit upp. */
.tr2-hg{ flex:0 0 auto; }
/* ══════════════════════════════════════════════════════════════════════════
BREDDBUDGETEN — VARFOR GRANSERNA LIGGER DAR DE LIGGER
Flikraden ar 1136 px inuti en 1200 px-skarm. Flikarna tar 717, markret 110.
Kvar: ~309 px at hela hogerklustret.
★ TALEN NEDAN AR MATTA PA LIVE 2026-09-04 (getBoundingClientRect,
inloggad, 14 flikar), inte uppskattade som i forsta versionen:
.ovp med prickar + Pac-Man .......... 128 px
.ovp utan prickar (bara ordet) ....... ~86 px
.ovp-karta med ordet KARTA ............ 70 px
.ovp-karta bara nalen ................ ~22 px
.tr2-flik med ETIKETT + tal .......... 161 px ← FOR BRED, se nedan
.tr2-flik med IKON + tal .............. ~95 px
hogerklustret .right ................. 308 px desktop / ~150 mobil
★ FORSTA VERSIONEN GISSADE OCH GISSADE FEL. Med etiketter blev .tr2-hg
128 + 70 + 161 = 368 px, och flikraden (1136 px innehall, varav flikarna
728) svammade over med **54 px** — uppmatt pa live, inte harledd. Fliken
hangde alltsa utanfor raden pa varje skarm over 1150 px, och pa mobil at
samma overskott upp notisknappen som star sist i raden.
Med ikon + tal: 128 + 70 + 95 = 293 px, alltsa 75 px under det gamla och
11 px UNDER det som stod har fore 2026-09-04 (KARTA + tva tal = 298).
ORDNINGEN AR MEDVETEN: det som ryker forst ar DEKORATION (prickarna),
sedan ETT ORD (KARTA), sedan STATUS (fliken). Destinationen OVERRIDE
ryker aldrig.
══════════════════════════════════════════════════════════════════════════ */
/* Under 1440 px: prickarna och Pac-Man ut ur flikraden. Ordet star kvar.
★ Pac-Man ar INTE borta ur huset — han bor i shoutraden, och den ligger i
rad 1:s mitt dar det finns 520 px. Det ar bara den HAR kopian som slacks,
och det ar samma nod: den kan bara sta pa ett stalle at gangen. Nar den
star i flikraden ar rundan darfor slackt under 1440. */
@media (max-width:1439px){
.tr2-hg .ovp-p, .tr2-hg .ovp-pac{ display:none; }
.tr2-hg .ovp-rad{ gap:0; }
}
/* Under 1149 px: KARTA blir bara nalen, och fliken gar ut.
★ SAMMA GRANS SOM FORR for talen — den regeln lag pa `.tr2-hg .tr1-tal`
och beskrev exakt det har tillstandet. Den ar flyttad hit till .tr2-flik
eftersom talen numera bor inuti fliken; ett `.tr2-hg .tr1-tal`-selektor
traffar dem fortfarande (fliken ar en descendant), men att gomma FLIKEN
i stallet for talen tar ocksa bort ramen — annars star en tom ram kvar. */
@media (max-width:1149px){
.tr2-hg .ovp-karta span{ display:none; }
.tr2-hg .ovp-karta{ gap:0; padding:0 6px; }
/* ★ GRANSEN AR RAKNAD, INTE VALD PA KANSLA (om 2026-09-04 med ikonfliken):
flikraden = min(fonster, 1168) − 32 px padding
flikarna 728 + .tr2-hg 293 (86 + 22 + 95) = 1021
⇒ ryms fran ~1053 px och uppat.
1149 ar alltsa ~96 px konservativt, och det ar med flit: de tomma
.tb-vsep/.tdk-finderfly-syskonen och .tabs auto-marginaler ater nagra
tiotal px som inte syns i en enkel summa. Uppmatt slack vid 1168 px
innehall: 21 px. Sank granen bara om du matt om raden. */
.tr2-flik{ display:none!important; }
}
/* ★ UNDER 820 px GAR FLIKEN UT — RATTAT 2026-09-04, OCH DET AR EN AVVAGNING
SOM AR VARD ATT SKRIVA NER.
Forsta versionen tande fliken igen har, med resonemanget att
forre_pulse.css:650 slacker `.top .tabs` vid 820 och alltsa frigor 717 px.
Det stammer for FLIKARNA — men samma flytta() lagger dit HOGERKLUSTRET pa
mobil, och det ar 150 px. Rakningen pa en 390 px-telefon:
padding 24 + market ~100 + hogerklustret ~150 = 274
kvar at .tr2-hg: ~116 px
OVERRIDE 86 + KARTA-nalen 22 = 108 ← ryms, med 8 px marginal
fliken ~95 px till ← ryms INTE
Nagot maste ge, och da vinner notisknappen. Kenta 2026-09-04:
*"du far finura med att fa till notis knappar som ska synas ocksa pa mobil
version"*. Talen finns kvar pa mobil — i bottennaven och i drawern — medan
notiserna inte har nagon annan vag in dar.
★ TILLBAKA: ta bort raden nedan. Men mat forst hogerklustrets bredd; blir
den mindre nagon gang finns marginalen igen. */
@media (max-width:820px){
.tr2-flik{ display:none!important; }
/* ★ SISTA UTVAGEN, INTE FORSTA. Under ~375 px racker inte 116 px ens till
ordet. Da kortas OVERRIDE med ellips i stallet for att putta ut nagot —
en avkortad destination ar fortfarande en destination, en utpuffad
notisknapp ar borta. min-width:0 kravs: en flexrad krymper inte ett barn
under dess innehallsbredd utan den. */
/* ★ BARA .tr2-hg FAR KRYMPA — ALLT ANNAT I RADEN AR LAST.
Uppmatt i huvudlos Chromium pa sju bredder: utan de har tva raderna
krympte flexboxen HAMBURGAREN i stallet, fran 34 px till 20 vid 360 och
till **9 px vid 320** — en meny som inte gar att traffa. Market foljde
efter. Bada ar navigation; .tr2-hg ar det enda i raden som har en
nodutgang (ellipsen nedan) och ska darfor vara det enda som ger vika.
★ `.burger` bar prefixet `fnx-php` pa live och kan bytas mot en React-o —
darfor traffar regeln klassen `.burger`, som bada varianterna bar. */
.top .in:not(.tr1-in) > .burger,
.top .in:not(.tr1-in) > .brand{ flex:0 0 auto; }
/* ★ 17 px LETADE UPP UR LUFTEN, INTE UR INNEHALLET.
Uppmatt vid 390 px (iPhone 14) INNAN de har raderna:
padding 24 + tre gap a 9 = 27 + hamburgare 34 + market 85 + klustret 142
= 312 ⇒ 78 px kvar at .tr2-hg, som behover 86 (ordet 74 + nalen 12).
Ordet blev "OVE…" pa en telefon dar det finns gott om plats — bara fel
fordelad. forre_pulse.css:1729 satter `.top .in{gap:9px}` for MOBIL, och
nio pixlar mellan fyra saker ar generost nar den fjarde inte far plats.
Sex racker (samma luft som klustret sjalvt har mellan sina ikoner), och
lankens egen padding kan ga fran 4 till 2. Summa 17 px, och da ryms ordet.
★ INNEHALLET AR OFORANDRAT. Ingen knapp, inget ord och ingen ikon ar
borttagen har — det ar bara mellanrummen som stramats at. Racker det
inte pa en smalare skarm tar ellipsen vid, och under 360 px ikonen. */
.top .in:not(.tr1-in){ gap:6px; }
.tr2-hg{ gap:0; }
.tr2-hg .ovp{ padding:0 2px; }
.tr2-hg .ovp-karta{ padding:0 4px; }
/* ★ ORDET GAR NER TILL 11,5 px PA TELEFON — DE SISTA SJU PIXLARNA.
Efter luftbantningen ovan lag budgeten pa 87 px och behovet pa 94
(ordet 74 i 12,5 px + nalen 20). Sju pixlar skilde, och alternativen var
att slanga kartnalen (Kenta bad om bada) eller krympa market (sajtens
enda logga pa den bredden). Ett halvt typsnittssteg pa ETT ord ar den
minsta av de tre forlusterna: 11,5 px ar samma storlek som flikarnas egen
text i huset, alltsa inte smatt — bara inte storre an det behover vara.
Uppmatt efterat: ordet ryms helt fran 390 px och uppat. */
.tr2-hg .ovp-ord{ font-size:11.5px; letter-spacing:0; }
.tr2-hg{ min-width:0; flex:0 1 auto; }
.tr2-hg .ovp{ min-width:0; flex:0 1 auto; }
.tr2-hg .ovp-rad{ min-width:0; }
.tr2-hg .ovp-ord{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
}
/* ★ UNDER 360 px BLIR OVERRIDE EN IKON — INTE ETT BORTTAGET ORD.
Uppmatt i huvudlos Chromium: vid 320 px krympte .tr2-hg till 0 px och lanken
fanns kvar i DOM:en men var osynlig. En lank med noll bredd ar varre an
ingen lank: den ser ut som en bugg och gar inte att traffa.
★ DET GAR INTE ATT BARA GOMMA DEN. `?page=override` har INGEN annan ingang —
varken pulse-nav.php, drawern eller bottennaven har en Override-rad
(kontrollerat 2026-09-04). Den har knappen ar hela vagen in till sidan pa
en telefon. Lagger nagon till en rad i menyn far den har regeln garna
bytas mot `display:none`, men inte fore.
★ ORDET GOMS VISUELLT, INTE FOR SKARMLASARE. `display:none` hade tagit bort
lankens enda text och lamnat en knapp som heter ingenting. Clip-monstret
nedan ar husets vanliga visually-hidden: texten finns kvar i
tillganglighetstradet, title-attributet bar forklaringen for den som
hovrar eller haller inne. */
@media (max-width:359px){
.tr2-hg .ovp-ord{
position:absolute; width:1px; height:1px; padding:0; margin:-1px;
overflow:hidden; clip-path:inset(50%); white-space:nowrap; background:none;
}
.tr2-hg .ovp{ flex:0 0 auto; padding:0 5px; }
.tr2-hg .ovp-rad::before{
font-family:'bootstrap-icons'; content:"\f5c2"; /* bi-terminal-fill, samma ikon som sidans egen */
font-size:14px; line-height:1; color:var(--ink2);
}
}
/* ═══════════════════════════════════════════════════════════════════════════
RAD 1 MASTE LIGGA OVER FLIKRADEN (Kenta 2026-08-30)
"noticerna gar igenom denna sa kan inte trycka pa dem ordentligt"
Skarmklippet visade flikradens hogerkant — KARTA, DUELLER, PLACERING.
Det var de som at klicken.
UPPMATT PA LIVE (elementFromPoint, inloggad, 1920 px):
notispanelen y 57–592
flikraden y 46–84
i overlappet (y 57–84) svarade .ovp-karta / .tr1-tal / .tr2-hg
— aldrig panelen. Alltsa dog panelens HELA huvudrad: rubriken,
hjart-knappen, "markera alla lasta" och kugghjulet.
VARFOR: bada raderna bar klassen .in, och pulse-navbar-marke.css:88 satter
.top .in{ position:relative; z-index:1 }
for att lyfta innehallet over vattenmarket i .top::before (z-index:0).
Rad 1 far darmed z-index:1 OCH en egen stacking context — och flikraden far
z-index:1 med. Lika tal, och da vinner den som star SIST i dokumentet.
Dropparnas egna z-index:70 (.tb-dd) hjalper inte ett dugg: de ar inlasta i
rad 1:s stacking context och kan aldrig ta sig ur den.
Det ar inte notiserna som ar sarskilda — hela hogerklustret bor i rad 1, sa
sok, messenger, vanner, klockan, radar, arenden och avatarmenyn foll i exakt
samma grop. En rad lyfter allihop.
SPECIFICITETEN AR RAKNAD, INTE GISSAD: `.tr1-in` ensamt ar (0,1,0) och
FORLORAR mot `.top .in` (0,2,0) oavsett filordning — darfor star regeln har
och inte uppe i .tr1-in-blocket, och darfor bar den html-prefixet: (0,2,1).
RIKTNINGEN AR RATT VAG: rad 1 innehaller kontroller som FALLER NEDAT over
rad 2. Rad 2 innehaller flikar och tal som aldrig faller nagonstans. Skulle
flikraden nagon gang fa en egen utfallsmeny far den ett eget varde har —
inte en hojning av det har.
═══════════════════════════════════════════════════════════════════════════ */
html .top .tr1-in{ z-index:2; }
/* ═══════════════════════════════════════════════════════════════════════════
MOBIL: SHOUTSEN AGER RAD 1, IKONERNA STAR HOS MARKRET PA RAD 2
(2026-08-31, Kenta: "mobilversionen sa synns det inte sa bra, fa ner
ikonerna bredvid forre.nu och ha shouts pa ovre raden dar")
UPPMATT FORE, iPhone-bredd 375 px:
rad 1 (46 px): hogerklustret 181 px + shoutbaren 150 px
-> sjalva tickern fick 134 px och visade "ikon + namn",
aldrig sjalva shouten
rad 2 (38 px): hamburgare + markret FORRE.NU, resten tomt
Klustret BOR i flikraden. Det ar JS:en i pulse-topbar-rad1.php som hissar
upp det till rad 1 pa desktop — och pa mobil later den nu bli. Halva
andringen ar alltsa borttagen kod, inte tillagd.
EFTER: rad 1 = shouten pa hela bredden. rad 2 = hamburgare, FORRE.NU och
ikonerna, med markret till vanster och klustret till hoger.
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width:820px){
/* Rad 1 blir en enda yta at shoutbaren. */
.top .tr1-in{ gap:0; padding:0 10px; }
.top .tr1-in .sbar{ flex:1 1 auto; min-width:0; width:100%; margin:0; }
.top .tr1-in .sbar .in{ width:100%; max-width:none; padding:0; }
.top .tr1-in .sbar .tick{ flex:1 1 auto; min-width:0; }
/* Skolden ar stabens enda vag in i megamenyn och far inte falla bort. */
.top .tr1-in .tr1-hg{ flex:0 0 auto; margin-left:6px; }
/* Rad 2: markret till vanster, ikonerna till hoger. margin-left:auto pa
klustret racker — flikradens ovriga barn ar redan dolda under 820. */
.top .in:not(.tr1-in) > .right{ margin-left:auto; flex:0 0 auto; }
/* Tatare kluster: 375 px minus hamburgare (34) och markret (95) lamnar
~236 px. Ikonerna gar fran 29 till 26 px och luften fran 6 till 3.
★ BUDGETEN RAKNADES OM 2026-09-04 — OCH DEN RAKNADE FEL DAGEN DEN SKREVS,
inte for att matningen var fel utan for att raden fick en ny hyresgast.
Da lag `.tr2-hg` gomd under 999 px och rakningen behovde inte namna den.
Sedan OVERRIDE-lanken flyttade dit (Kentas order samma dag) bar raden
~88 px till (ordet 74 + kartnalen 12), och det aket rakt in i det som
star SIST: notisknappen.
Kenta: *"du far finura med att fa till notis knappar som ska synas ocksa
pa mobil version"*.
NY BUDGET, 375 px:
hamburgare 34 + market 95 + .tr2-hg 88 = 217 ⇒ 158 px kvar
klustret: sok 26 + notiser 26 + ••• 26 + konto 26 + 3 gap = 113 px
⇒ 45 px marginal. Vid 360 px: 30 px marginal.
Det ar DARFOR `.tr2-flik` slacks under 820 (den var 84 px till och hade
atit hela marginalen) och darfor `.right` har `flex:0 0 auto` — se det
langa blocket "PLATSEN I FLIKRADEN AR ETT NOLLSUMMESPEL" ovan.
★ LAGGER DU TILL NAGOT I RAD 2: rakna om de tre talen har, i den har
ordningen. Sista raden i budgeten far aldrig bli notisknappen. */
.top .in:not(.tr1-in) > .right{ gap:3px; }
.top .in:not(.tr1-in) > .right .tb-item,
.top .in:not(.tr1-in) > .right .tb-cofw,
.top .in:not(.tr1-in) > .right .iconbtn{ width:26px; height:26px; }
.top .in:not(.tr1-in) > .right .me-item{ height:26px; }
}