/* ═══════════════════════════════════════════════════════════════════════════
   forre_pulse — MINI-PROFILEN (.pmini2 / .pm4-*)
   ═══════════════════════════════════════════════════════════════════════════
   Utbruten ur themes/forre_pulse/views/partials/pulse-mini.php 2026-09-13
   (design-proposals/landningen-2026-09-12.html: "den inline-CSS:en, 150 rader
   i partialen, flyttar till en riktig CSS-fil").

   ★ INNEHÅLLET ÄR ORÖRT. Varenda regel är kopierad rakt av. Byter du något här
     byter du utseendet på FYRA ytor: hubben, profilens vänsterrail, report och
     sprites — partialen är delad.

   ★ LÄNKAS AV PARTIALEN SJÄLV, inte av vyerna. Den inkluderas från fyra håll
     och en <link> per vy hade blivit fyra ställen att glömma. Partialen skriver
     taggen en gång per sidladdning (guard: $mCssSkriven).

   ★ SKARVEN MOT NAVKORTET. pulse-nav.php fogar ihop mini-kortet med .pnav2 via
     `.card.pmini2:has(+ .pnav2)`, och forre_pulse.css sätter overflow:hidden på
     .pmini2. Rör inte klassnamnen.
   ═══════════════════════════════════════════════════════════════════════════ */
/* Mini-profil variant A "Liggaren" (2026-08-16). Inline med partialen — mindre
   kollisionsyta, och forre_pulse.css halkar efter i SFTP-synken.
   ALLA färger är tokens. Rankfärgen (--pm4-rank) kommer rå ur
   FortniteRankResolver::RANKS och används ALDRIG rå: den blandas mot --ink i ljust
   läge och mot #fff i mörkt, precis som v6 gjorde med --pm3-ui/--pm3-on. Det hör
   egentligen hemma i en tierColorOn()-helper, inte i en vy — TODO 2026-08-16. */
.pm4{padding:0}
/* 45 % är UPPMÄTT mot AA, inte valt på känsla. Rank-etiketten är 11px/900 — alltså
   INTE "large text", alltså krävs 4,5:1. Värsta tiern mot vitt kort är Diamond
   #B9F2FF: 58 % gav 3,78:1 (underkänt), 45 % ger 4,90:1. Övriga vid 45 %: Guld
   5,47 · Platinum 5,11 · Silver 6,43 · Brons 9,20. Fyllningen (pips) delar värdet
   i ljust läge — vid 70 % låg ifylld mot oifylld pip på 1,77:1, nu 3,61:1.
   I mörkt läge ligger rankfärgen på en mörk yta och klarar sig rå: Brons 3,84:1
   mot oifylld pip, Diamond 9,88:1. */
.pm4{--pm4-ink:color-mix(in srgb,var(--pm4-rank,var(--accent)) 45%,var(--ink) 55%);
     --pm4-fill:var(--pm4-ink)}
[data-theme="dark"] .pm4{--pm4-ink:color-mix(in srgb,var(--pm4-rank,var(--accent)) 74%,#fff 26%);
     --pm4-fill:var(--pm4-rank,var(--accent))}
/* Generell guard: en klassregel med display:flex/grid/block slår ut webbläsarens
   [hidden]{display:none}. Har bitit tre gånger i den här railen. */
.pm4 [hidden]{display:none!important}

/* ── 1. Identitet ─────────────────────────────────────────────────────────── */
.pm4-top{display:flex;align-items:center;gap:9px;padding:10px 12px 9px}
.pm4-av{flex:0 0 auto;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
        background-position:center;background-size:cover;color:var(--ink);font-weight:800;font-size:14px;
        text-decoration:none;box-shadow:0 0 0 1.5px var(--line2);transition:box-shadow .12s}
.pm4-av:hover{box-shadow:0 0 0 1.5px var(--pm4-ink)}
.pm4-id{min-width:0;flex:1}
.pm4-nmrow{display:flex;align-items:center;gap:5px;min-width:0}
.pm4-nm{font-size:15px;font-weight:900;letter-spacing:-.02em;color:var(--ink);text-decoration:none;
        white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.pm4-nm:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.pm4-flame{flex:0 0 auto;display:inline-flex;align-items:center;gap:2px;font-size:10.5px;
           font-weight:900;color:var(--gold);white-space:nowrap}
.pm4-flame .bi{font-size:10px;line-height:1}
/* Besökare: ansikten före siffror, som kluster i identiteten — inte en egen rad.
   Ingen popover längre; klustret är en länk till profilen där listan bor. */
.pm4-vis{display:inline-flex;align-items:center;gap:5px;margin-top:3px;max-width:100%;
         color:inherit;text-decoration:none}
.pm4-vavs{display:inline-flex;flex:0 0 auto}
.pm4-va{width:15px;height:15px;border-radius:50%;background-position:center;background-size:cover;
        background-color:var(--line2);box-shadow:0 0 0 1.5px var(--card);margin-left:-5px}
.pm4-va:first-child{margin-left:0}
.pm4-vn{font-size:9.5px;font-weight:700;color:var(--dim);white-space:nowrap;
        overflow:hidden;text-overflow:ellipsis}
.pm4-vis:hover .pm4-vn{color:var(--ink2)}
/* BESÖKAR-POPOVERN. position:fixed + JS-driven, och det är INTE överarbete — ren
   CSS kunde inte lösa båda felen som den led av före omskrivningen 2026-08-15:
   1. FLIMMER. Den låg absolut på top:46px, alltså RAKT ÖVER klustret som öppnar
      den. Musen hamnade på popovern → klustret tappade :hover → popovern stängdes
      → musen låg på klustret igen → öppnade … i all oändlighet. Playwright gav upp
      efter 56 hover-försök med "intercepts pointer events". Listan gick aldrig att
      peka på, bara att glimta.
   2. AVKLIPPT. forre_pulse.css:1522 sätter overflow:hidden på .pmini2, och .pm4 ÄR
      samma element. En absolut positionerad popover klipps av den.
   position:fixed löser båda: fixed klipps inte av en förälders overflow, och JS:en
   placerar den UNDER klustret med en fördröjning som håller den öppen medan musen
   är i listan. Basläget är display:none — laddar inte JS:en händer ingenting alls,
   och klustret är ändå en länk till profilen där hela listan bor.
   (Fade-övergången från v6 är struken: display:none → block i samma frame animerar
   inte i någon webbläsare, så den var död kod.) */
.pm4-vpop{position:fixed;z-index:100;display:none;width:220px;padding:5px;
          background:var(--card);border:1px solid var(--line2);border-radius:var(--r);
          box-shadow:0 10px 26px rgba(0,0,0,.34)}
.pm4-vpop.is-open{display:block}
/* 9,5px normal case — samma etikettstorlek som resten av kortet. v6 hade 8px
   spärrade versaler, vilket var FORRE_DARK-vana i en pulse-yta (facit §0). */
.pm4-vph{display:block;font-size:9.5px;font-weight:700;color:var(--dim);padding:2px 6px 5px}
.pm4-vpr{display:flex;align-items:center;gap:7px;padding:2px 6px;min-width:0}
.pm4-vpa{width:17px;height:17px;border-radius:50%;background-position:center;
         background-size:cover;background-color:var(--line2);flex:0 0 auto}
.pm4-vpn{flex:1;min-width:0;font-size:11px;font-weight:600;color:var(--ink2);
         white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pm4-vpt{flex:0 0 auto;font-size:9.5px;color:var(--dim);white-space:nowrap}

/* ── 2. Rank ──────────────────────────────────────────────────────────────── */
.pm4-rk{display:flex;align-items:center;gap:7px;padding:7px 12px;border-top:1px solid var(--line)}
.pm4-em{position:relative;flex:0 0 22px;width:22px;height:22px;display:block}
.pm4-em>svg,.pm4-em>img{position:absolute;left:0;top:0;width:22px;height:22px}
.pm4-em>img{object-fit:contain}
/* Skölden är fallback och ligger under bilden. Syns bara när .is-fb satts — annars
   skiner den igenom rank-PNG:ens transparens och gör emblemet grumligt. */
.pm4-em>svg{display:none;fill:var(--pm4-fill);opacity:.85}
.pm4-em.is-fb>svg{display:block}
.pm4-rl{flex:1;min-width:0}
.pm4-rl>b{display:block;font-size:11px;font-weight:900;letter-spacing:.09em;text-transform:uppercase;
          color:var(--pm4-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pm4-rl>i{display:block;margin-top:1px;font-style:normal;font-size:9.5px;color:var(--dim);
          white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Divisionsskalan. Tre pips = I·II·III. Positionen är KÄND ur etiketten och
   oberoende av ranked_progress — se filhuvudet punkt 4. */
.pm4-ds{display:inline-flex;align-items:center;gap:2px;flex:0 0 auto}
.pm4-ds>i{display:block;width:11px;height:4px;border-radius:1px;
          background:color-mix(in srgb,var(--ink) 14%,transparent)}
[data-theme="dark"] .pm4-ds>i{background:rgba(255,255,255,.13)}
.pm4-ds>i.is-on{background:var(--pm4-fill)}

/* ── 3. Mätarrader ────────────────────────────────────────────────────────── */
.pm4-row{display:flex;align-items:center;gap:8px;padding:7px 12px;border-top:1px solid var(--line);
         min-width:0}
.pm4-ic{flex:0 0 15px;width:15px;height:15px;display:grid;place-items:center;font-size:12px;
        line-height:1;color:var(--dim)}
.pm4-ic.is-accent{color:var(--accent)}
.pm4-ic.is-gold{color:var(--gold)}
.pm4-ic>img{width:13px;height:13px;object-fit:contain}
/* 62 px är UPPMÄTT, inte gissat: "Level 9999" är det bredaste som kan stå här och
   den landar på 61 px vid 11px/800. Femsiffrig level klipps med ellips och hela
   värdet finns i radens title. Fast bredd är ett KRAV, inte en smaksak — utan den
   startar mätarna på olika x och de staplade raderna får raggad vänsterkant. */
.pm4-lb{flex:0 0 62px;font-size:11px;font-weight:800;color:var(--ink);white-space:nowrap;
        overflow:hidden;text-overflow:ellipsis}
.pm4-bar,.pm4-gap{flex:1;min-width:18px;height:4px;border-radius:1px;overflow:hidden}
.pm4-bar{background:color-mix(in srgb,var(--ink) 11%,transparent)}
[data-theme="dark"] .pm4-bar{background:rgba(255,255,255,.11)}
.pm4-bar>i{display:block;height:100%;background:var(--accent)}
/* --gold mörkades till #a06f00 för TEXT-kontrast (2026-07-16) och blir lerbrun som
   ifylld yta i ljust läge. --gold-r är rank-gulden och är gjord för just fyllningar. */
.pm4-bar>i.is-gold{background:var(--gold-r)}
.pm4-v{flex:0 0 auto;font-size:11px;font-weight:900;letter-spacing:-.01em;color:var(--ink);
       white-space:nowrap}
.pm4-v>s{text-decoration:none;font-size:9px;font-weight:700;color:var(--dim);margin-left:1px}

/* ── 4. Säsongsstats ──────────────────────────────────────────────────────── */
.pm4-xs{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.pm4-xs>div{padding:7px 4px;text-align:center;border-left:1px solid var(--line);min-width:0}
.pm4-xs>div:first-child{border-left:0}
.pm4-xs b{display:block;font-size:14px;font-weight:900;letter-spacing:-.02em;color:var(--ink);
          line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Normal case, inte versaler: facit §0 flaggar VERSAL-etiketter som FORRE_DARK-vana.
   9,5 px/700 i --dim under ett 14 px/900-tal bär hierarkin utan spärrad text. */
.pm4-xs span{display:block;margin-top:2px;font-size:9.5px;font-weight:700;color:var(--dim);
             white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── 5. Säsongsfoten ──────────────────────────────────────────────────────── */
/* SCOPAT MED ">". En oskopad `.pm4-sf span` hade även träffat spans inuti ett
   framtida barn och gett dem flex:1 — samma fälla som .rad .m b i BRAIN.md. */
.pm4-sf{display:flex;align-items:center;gap:6px 8px;padding:6px 12px;border-top:1px solid var(--line)}
.pm4-sf>span{flex:1;min-width:0;font-size:10px;font-weight:700;color:var(--dim);white-space:nowrap;
             overflow:hidden;text-overflow:ellipsis}
.pm4-sf>b{flex:0 0 auto;font-size:11px;font-weight:900;color:var(--ink2)}

/* Vänsterrälen är 250 px (.shell.c3), profilens räl 322 px. Under 520 px kan kortet
   ligga i full bredd på små skärmar — krymp talen något så raden inte spricker. */
@media (max-width:520px){
  .pm4-lb{flex:0 0 56px}
  .pm4-xs b{font-size:13px}
}