/* ============================================================================
   forre_pulse — PAPPER, KORN OCH TOPPRUTNÄT
   Sidytan, inte komponenterna. Egen fil så hela lagret kan backas genom att ta
   bort EN länkrad i views/layouts/default.php. Rör inga komponentklasser.

   Beslut 1: ÅTERSTÄLLT på Kentas begäran 2026-08-15 — pappersvitt #eeece8 testades
   live och han ville tillbaka till den ursprungliga --bg (#f0f2f5), men BEHÅLLA
   rutorna. Kornet nedan ligger kvar och fungerar mot båda värdena.
   Beslut 2: topprutnätet, som bakgrund i stället för element — se motiveringen nedan.

   Mörkt läge bär samma två lager med egna värden. Inga nya hexvärden utanför
   tokens: rutnätslinjerna är rgba av svart respektive vitt, precis som bannerns
   instrumentlager i pulse-live-banner.css, och slöjan tonar mot var(--bg).
   ============================================================================ */

/* ---------------------------------------------------------------- KORN
   Film­korn över sidan. Ligger fixed över innehållet med multiply i ljust läge
   (mörkar papperet en aning där kornet är tätt) och overlay i mörkt (lyfter i
   stället för att sota igen). filter:grayscale(1) tar bort färgstänket som
   feTurbulence annars ger — utan den får sidan svaga färgprickar.

   VARNING till nästa som rör detta: mix-blend-mode på ett fixed helskärmslager
   tvingar webbläsaren att komposita om hela sidan vid scroll. Höj inte ytan och
   lägg inte till fler blend-lager utan att mäta scrollprestanda först. */
body::after{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  opacity:.5;mix-blend-mode:multiply;filter:grayscale(1);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
}
[data-theme="dark"] body::after{opacity:.28;mix-blend-mode:overlay}

/* ---------------------------------------------------------------- TOPPRUTNÄT
   Rutnät över sidans första skärm som tonas ut till noll.

   ★ VARFÖR BAKGRUND OCH INTE ETT ELEMENT (avsteg från specen, med flit):
   ett absolutpositionerat .pulse-topgrid målas ALLTID ovanpå statiska syskon —
   positionerade element ligger i ett senare målningslager än vanligt flöde. För
   att korten skulle hamna över krävdes att allt innehåll fick position:relative,
   och det skapar nya stackningskontexter i .shell-kolumnerna. Där bor hovercards
   (pulse-hovercard.css) och modaler som är byggda för att ta sig UT ur sin
   kolumn; fångade i en ny kontext hade de börjat hamna under syskonkolumner.
   z-index:-1 löser det inte heller — då hamnar rutnätet bakom sidans bakgrund
   och syns aldrig, precis som specen varnar för.

   En bakgrundsbild målas per definition bakom alla barn. Noll ny markup, noll
   stackningsrisk, och den scrollar bort med innehållet.

   Lagerordningen: FÖRSTA background-image ligger ÖVERST. Slöjan är därför först —
   den tonar rutnätet ned i sidfärgen i stället för att en mask klipper bort det.
   Samma utfall som specens mask-image, men utan att röra stackningen.

   Rutan är 26px = samma modul som bannerns instrumentrutnät. Ändra inte siffran.

   ★ POSITIONEN ÄR MÄTT, INTE GISSAD. Första försöket satte rutnätet på 0 → 460px
   från .pulse-shells överkant. Men shellen börjar högst upp, och de första ~150px
   är stabbar, banner, navbar och shoutbox — alla med egen solid bakgrund. Kvar
   blev en remsa på ~250px som korten dessutom täckte, så rutnätet syntes inte alls
   trots att CSS:en var korrekt applicerad (verifierat i webbläsaren 2026-08-15).
   Därför börjar det på 150px: precis under sajtens egen krom, där gatorna vid
   sidan om 1200-railen faktiskt är synliga. Ändras topbarens höjd ska den här
   siffran följa med. */
.pulse-shell{
  background-image:
    linear-gradient(180deg,transparent 0,transparent 30%,var(--bg) 100%),
    repeating-linear-gradient(90deg,rgba(16,24,40,.055) 0 1px,transparent 1px 26px),
    repeating-linear-gradient(0deg,rgba(16,24,40,.055) 0 1px,transparent 1px 26px);
  background-repeat:no-repeat;
  background-size:100% 520px;
  background-position:0 150px;
}
[data-theme="dark"] .pulse-shell{
  background-image:
    linear-gradient(180deg,transparent 0,transparent 30%,var(--bg) 100%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 26px),
    repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 26px);
}

/* Mobil: rutnätet äter kontrast på små skärmar där kortet fyller hela bredden,
   och kornet kostar mest just där. Båda av under 640. */
@media(max-width:640px){
  .pulse-shell{background-image:none}
  body::after{opacity:.32}
}