/* ============================================================
   forre_pulse — LEVANDE BANNERYTA (pulse-live-banner)
   Egen fil (aldrig append i forre_pulse.css — trunkeringsläxa 2026-07-12).
   Ytan: 1168 × 120, samma innehållsbox som topbaren och railen.
   Allt är tokens: --board-* bär den mörka signaturtonen i BÅDA lägena,
   --accent/--live/--danger bär betydelse. Platt, hårfina kanter, inga
   gradienter, tabulära siffror. Ingen regel här rör navbaren.
   ============================================================ */

.plb-wrap{display:flex;justify-content:center;padding:0 16px;background:var(--bg)}
.plb{position:relative;width:100%;max-width:calc(var(--shell-w) - 32px);height:120px;overflow:hidden;background:var(--board-bg);color:var(--board-ink)}

/* ---------- instrumentlager (dekor, aldrig klickbart) ---------- */
.plb-grid,.plb-sweep,.plb-chassis,.plb-dots,.plb-reg,.plb-rail,.plb-node,.plb-tear,.plb-band{pointer-events:none}
.plb-grid{position:absolute;inset:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10%,rgba(0,0,0,.25) 42%,rgba(0,0,0,.25) 58%,#000 90%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 10%,rgba(0,0,0,.25) 42%,rgba(0,0,0,.25) 58%,#000 90%,transparent 100%)}
/* Rörelsen ligger på ett översatt lager, inte på background-position: transform
   komposit-lagras och ritas om varje frame. Mönstret repeterar var 26 px, och
   26 går jämnt upp i 260 — därför är loopen sömlös. */
.plb-grid::before{content:"";position:absolute;top:0;bottom:0;left:-260px;right:-260px;
  background-image:repeating-linear-gradient(90deg,var(--board-line) 0 1px,transparent 1px 26px),
                   repeating-linear-gradient(0deg,var(--board-line) 0 1px,transparent 1px 26px),
                   repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 130px);
  will-change:transform;animation:plbGrid 13s linear infinite}
.plb-sweep{position:absolute;top:0;bottom:0;left:0;width:2px;background:rgba(255,255,255,.14);will-change:transform;animation:plbSweep 9s linear infinite}
.plb-sweep::after{content:"";position:absolute;top:0;bottom:0;left:-240px;width:1px;background:rgba(255,255,255,.07)}

/* Störning: signalen hackar när man rör sig i bannern eller pekar i navbaren.
   Platt — bara opacitet och translate, inga gradienter, ingen blur.
   :hover-regeln nedan gör att det händer även om JS aldrig hinner ladda. */
.plb-tear{position:absolute;left:0;right:0;top:var(--plb-tear-y,40%);height:2px;background:rgba(255,255,255,.72);opacity:0}
.plb-band{position:absolute;left:0;right:0;top:-28px;height:26px;background:rgba(255,255,255,.06);opacity:0}
.plb.is-tear .plb-tear,.plb:hover .plb-tear{animation:plbTear .26s steps(3,end) 1}
.plb.is-tear .plb-in,.plb:hover .plb-in{animation:plbShift .26s steps(2,end) 1}
.plb.is-band .plb-band{animation:plbBand .9s linear 1}
.plb-chassis{position:absolute;left:0;top:0;bottom:0;width:26px;border-right:1px solid var(--board-line);
  background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.09) 0 3px,transparent 3px 9px)}
.plb-chassis span{position:absolute;left:8px;top:50%;transform:translateY(-50%);writing-mode:vertical-rl;
  font-size:7px;font-weight:800;letter-spacing:.3em;color:var(--board-sub);white-space:nowrap}
.plb-dots{position:absolute;background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.55) 0 3px,transparent 3px 7px);
  -webkit-mask-image:repeating-linear-gradient(180deg,#000 0 3px,transparent 3px 7px);
          mask-image:repeating-linear-gradient(180deg,#000 0 3px,transparent 3px 7px)}
.plb-dots-a{left:352px;top:13px;width:19px;height:19px;opacity:.4}
.plb-dots-b{right:214px;top:12px;width:19px;height:19px;opacity:.28}
.plb-reg{position:absolute;width:9px;height:9px}
.plb-reg::before,.plb-reg::after{content:"";position:absolute;background:rgba(255,255,255,.22)}
.plb-reg::before{left:0;top:4px;width:9px;height:1px}
.plb-reg::after{left:4px;top:0;width:1px;height:9px}
.plb-reg-a{left:26%;top:14px}
.plb-reg-b{left:73%;bottom:17px}
.plb-rail{position:absolute;left:0;right:0;bottom:2px;height:4px;
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.2) 0 1px,transparent 1px 12px);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%)}
.plb-rail-major{height:8px;background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.34) 0 1px,transparent 1px 60px)}
.plb-node{position:absolute;left:36px;bottom:8px;font-size:7px;font-weight:800;letter-spacing:.16em;color:var(--board-sub);white-space:nowrap}

/* ---------- innehållsraden ---------- */
.plb-in{position:relative;height:100%;padding:0 16px 0 34px;display:flex;align-items:center;gap:20px}

.plb-brand{flex:0 0 auto;display:flex;align-items:center;gap:13px;text-decoration:none;color:inherit}
.plb-mark{position:relative;width:92px;height:74px;flex:0 0 auto;display:block}
.plb-l{position:absolute;inset:0;background-size:100% 100%;background-repeat:no-repeat}
.plb-l-cross{filter:brightness(0) invert(1);transform:translate(0,0) rotate(0);transition:transform .28s cubic-bezier(.34,1.56,.64,1)}
.plb-l-flat{background-size:contain;background-position:center}
.plb-type{display:flex;flex-direction:column;gap:8px}
.plb-wm{display:block;width:228px;height:26px;background-size:100% 100%;background-repeat:no-repeat}
/* Utan bildwordmark: sätt typen i temats egen brandstil i stället för att visa ingenting. */
.plb-wm:not([style]){display:flex;align-items:baseline;font-weight:900;font-size:26px;letter-spacing:-.02em;line-height:1;color:var(--board-ink)}
.plb-wm[style] b,.plb-wm[style] i{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.plb-wm i{font-style:normal;color:var(--accent)}
.plb-season{display:flex;align-items:center;gap:9px;font-size:8.5px;font-weight:800;letter-spacing:.18em;white-space:nowrap}
.plb-season em{font-style:normal;color:var(--board-sub)}
.plb-season b{font-weight:900;color:var(--board-ink)}
.plb-sep{width:3px;height:3px;background:var(--board-line)}
.plb-prog{position:relative;display:block;width:74px;height:2px;background:var(--board-line)}
.plb-prog i{position:absolute;left:0;top:0;bottom:0;background:var(--accent);transition:width .3s ease-out}

/* hjälpredans kort */
.plb-card{flex:1 1 auto;min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"h cta" "v cta" "m cta";align-items:center;column-gap:12px;row-gap:6px;
  padding:10px 13px;background:rgba(255,255,255,.03);border:1px solid var(--board-line);border-radius:var(--r);
  transition:border-color .18s ease-out}
.plb-card.is-urgent{border-color:color-mix(in srgb,var(--danger) 55%,transparent)}
.plb-card.is-hover{border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.plb-card-h{grid-area:h;display:flex;align-items:center;gap:7px;min-width:0}
.plb-dot{width:6px;height:6px;border-radius:50%;background:var(--live);flex:0 0 auto}
.plb-card.is-urgent .plb-dot{background:var(--danger);animation:plbBlink 1.6s ease-in-out infinite}
.plb-card.is-hover .plb-dot{background:var(--accent)}
.plb-label{font-size:9.5px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--board-sub);white-space:nowrap}
.plb-src{font-size:8.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--live);white-space:nowrap}
.plb-card.is-urgent .plb-src{color:var(--danger)}
.plb-card.is-hover .plb-src{color:var(--accent)}
.plb-card-v{grid-area:v;display:flex;align-items:baseline;gap:6px;min-width:0;white-space:nowrap}
.plb-card-v b{font-size:17px;font-weight:900;letter-spacing:-.01em;color:var(--board-ink)}
.plb-card-v span{font-size:12.5px;font-weight:500;color:var(--board-sub)}
.plb-card-m{grid-area:m;font-size:11.5px;font-weight:500;color:var(--board-sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plb-cta{grid-area:cta;align-self:center;padding:9px 14px;border:1px solid var(--board-line);border-radius:var(--r);
  font-size:11px;font-weight:800;letter-spacing:.05em;color:var(--board-ink);text-decoration:none;white-space:nowrap;
  transition:border-color .15s ease-out,background .15s ease-out}
.plb-cta:hover{border-color:var(--board-ink);background:rgba(255,255,255,.06)}
.plb-card.is-urgent .plb-cta{border-color:color-mix(in srgb,var(--danger) 55%,transparent);color:#ffb4c6}

/* höger kluster */
.plb-right{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.plb-reads{display:flex;align-items:stretch}
.plb-read{padding:0 12px;border-left:1px solid var(--board-line);display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.plb-read em{font-style:normal;font-size:8px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--board-sub);white-space:nowrap}
.plb-read span{display:flex;align-items:center;gap:5px}
.plb-read b{font-size:14px;font-weight:900;line-height:1;color:var(--board-ink)}
.plb-d{width:5px;height:5px;border-radius:50%;background:var(--board-line)}
.plb-d.on-warn{background:var(--danger)}
.plb-d.on-live{background:var(--live)}
.plb-d.on-accent{background:var(--accent)}
.plb-reading{display:flex;align-items:center;gap:9px}
.plb-reading em{font-style:normal;font-size:7.5px;font-weight:800;letter-spacing:.14em;color:var(--board-sub);white-space:nowrap}
.plb-reading b{font-size:11px;font-weight:700;color:var(--board-ink);white-space:nowrap;max-width:210px;overflow:hidden;text-overflow:ellipsis}
.plb-prog-scroll{width:92px}

/* ---------- ÖVERLÄMNINGSREMSAN (injiceras av JS efter .top) ---------- */
.plb-strip{position:sticky;z-index:45;background:var(--card);border-bottom:1px solid var(--line);display:none}
.plb-strip.is-on{display:block}
.plb-strip-in{width:100%;max-width:calc(var(--shell-w) - 32px);margin:0 auto;height:32px;padding:0 16px;display:flex;align-items:center;gap:10px}
.plb-strip .s-dot{width:6px;height:6px;border-radius:50%;background:var(--live);flex:0 0 auto}
.plb-strip.is-urgent .s-dot{background:var(--danger);animation:plbBlink 1.6s ease-in-out infinite}
.plb-strip .s-label{font-size:9.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);white-space:nowrap}
.plb-strip .s-key{font-size:12.5px;font-weight:800;color:var(--ink);white-space:nowrap}
.plb-strip .s-meta{font-size:11.5px;font-weight:500;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plb-strip .s-fill{flex:1 1 auto;min-width:12px}
.plb-strip .s-sec{font-size:8px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);white-space:nowrap}
.plb-strip .s-prog{position:relative;width:84px;height:2px;background:var(--line);flex:0 0 auto}
.plb-strip .s-prog i{position:absolute;left:0;top:0;bottom:0;background:var(--accent)}
.plb-strip .s-cta{padding:5px 11px;border:1px solid var(--line2);border-radius:var(--r);font-size:10.5px;font-weight:800;color:var(--accent-ink);text-decoration:none;white-space:nowrap}

/* ---------- MÖRKT LÄGE: en brunn, inte en platta ----------
   I ljust läge är --board-bg (#0b0f14) signaturen just för att den är mörk mot ljusa
   kort. I mörkt läge är samma token #1e2634 — LJUSARE än sidan (--bg #0f1114) och
   ljusare än korten (--card #16181d). Då läser bannern som en främmande platta som
   ligger på sidan i stället för som en del av den.
   Fix: ett steg DJUPARE än sidan i stället för ett steg ljusare, med hårfina kanter
   upp och ned. Samma mörka signatur, men bannern blir en insänkt broadcast-brunn.
   Vill du i stället ha den ljusast på sidan: byt background nedan till var(--board-bg). */
[data-theme="dark"] .plb{
  background:color-mix(in srgb, var(--bg) 86%, #000);
  box-shadow:inset 0 1px 0 var(--line), inset 0 -1px 0 var(--line)}
[data-theme="dark"] .plb-grid::before{
  background-image:repeating-linear-gradient(90deg,var(--board-line) 0 1px,transparent 1px 26px),
                   repeating-linear-gradient(0deg,var(--board-line) 0 1px,transparent 1px 26px),
                   repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 1px,transparent 1px 130px)}
[data-theme="dark"] .plb-card{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.12)}
[data-theme="dark"] .plb-cta{border-color:rgba(255,255,255,.16)}
[data-theme="dark"] .plb-read{border-left-color:rgba(255,255,255,.1)}
[data-theme="dark"] .plb-chassis{border-right-color:rgba(255,255,255,.1)}
[data-theme="dark"] .plb-sweep{background:rgba(255,255,255,.1)}

@keyframes plbGrid{from{transform:translate3d(0,0,0)}to{transform:translate3d(260px,0,0)}}
@keyframes plbSweep{0%{transform:translateX(-40px)}100%{transform:translateX(1240px)}}
@keyframes plbBlink{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes plbTear{0%{opacity:0;transform:translateX(0)}30%{opacity:1;transform:translateX(-7px)}60%{opacity:1;transform:translateX(5px)}100%{opacity:0;transform:translateX(0)}}
@keyframes plbShift{0%{transform:translateX(0)}40%{transform:translateX(1.5px)}70%{transform:translateX(-1px)}100%{transform:translateX(0)}}
@keyframes plbBand{0%{opacity:0;transform:translateY(0)}12%{opacity:1}100%{opacity:0;transform:translateY(148px)}}

/* Mobil: samma regel som dagens banneryta — den göms under 820. */
@media(max-width:820px){.plb-wrap{display:none}.plb-strip{display:none !important}}
/* ============================================================================
   prefers-reduced-motion: MEDVETET IGNORERAD (Kentas beslut 2026-08-15)
   ----------------------------------------------------------------------------
   Här låg tidigare ett @media(prefers-reduced-motion:reduce)-block som stängde av
   sveppet, störningen och krysshårets transition, och strypte rutnätet till 70s.

   DET ÄR BORTTAGET MED FLIT. Lägg inte tillbaka det utan att fråga Kenta.

   Bakgrund: bannern uppfattades som helt stillastående i tre versioner i rad (v1,
   v2, v4). Orsaken var inte CSS:en — den mättes upp i Kentas egen webbläsare på
   forre.nu 2026-08-15:

       reducedMotion : true            (Windows: Hjälpmedel → Visuella effekter
       .plb-grid     : animationName "none", 0s              → Animeringseffekter Av)
       .plb-sweep    : display "none"
       .plb-tear     : display "none"

   Alltså: operativsystemet släckte både driften och signalhacket, och varje ny
   version lydde lika lojalt. Kenta valde att ytan ska röra sig likadant för alla.

   AVVÄGNINGEN, uttalad: detta är ett avsteg från WCAG 2.3.3 (Animation from
   Interactions, AAA). Besökare som satt flaggan för att de blir illamående av
   rörelse får den ändå. Det som biter hårdast är .plb-tear/.plb-band (snabba
   opacitetshopp) och .plb-in-knycken — vill man någon gång möta dem halvvägs är
   det de tre som ska stängas av först, medan rutnätsdriften kan stå kvar.

   JS-sidan har samma beslut: `reduce` är hårdsatt till false i pulse-live-banner.js,
   men OS-flaggan läses fortfarande och rapporteras av selftest() som osReducedMotion
   — så diagnostiken säger sanningen även när ytan struntar i den.
   ============================================================================ */
@media(max-width:820px){.plb-l-cross{transition:none}}