/* ═══════════════════════════════════════════════════════════════════════════
   PROFILEN — STATSRAILEN, DJUPET OCH OMSLAGETS VINJETT        (2026-09-14)
   ═══════════════════════════════════════════════════════════════════════════
   Facit: design-proposals/din-sida-2026-09-14.html
   Markup: views/partials/pulse-profil-rail.php (railen) — allt annat här är
   rena förbättringar av markup som redan finns.

   Egen fil, ruttgatad på `profile` i PulseAssets. Samma skäl som
   pulse-dueller.css och pulse-skal.css anger: forre_pulse.css är 217 kB och
   har trunkerats vid samtidig sync en gång, så en ny yta ska kunna rullas
   tillbaka med en radering.

   ★ RÖR INGENTING SOM DELAS. Väggen (wall-post-card.php), composern och
     pulsraden ligger på hub OCH profil — de har inte en enda regel här.
   ★ ROLLBACK: ta bort raden i PulseAssets + den här filen + byt tillbaka
     rail-inkluderingen i view.php rad 492.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── DJUPET ────────────────────────────────────────────────────────────────
   Kenta: *"kan få det lite 3d-ish"*.
   TVÅ skuggor, inte fler, och de är SKUGGOR — inte gradienter som yta (§0B).
   En yta är antingen NEDSÄNKT (ett spår som något ligger i) eller UPPHÖJD
   (det som ligger i spåret). Samma två värden överallt, så djupet betyder
   samma sak på hela sidan: spår = behållare, upphöjt = värde.

   Mörkt läge behöver hårdare spår och svagare topplyster — på en #171717-yta
   försvinner annars effekten helt. Uppmätt, inte gissat. */
.prof{
  --djup-in:inset 0 1px 2px rgba(16,24,40,.09), inset 0 0 0 1px rgba(16,24,40,.045);
  --djup-upp:inset 0 1px 0 rgba(255,255,255,.75), 0 1px 1.5px rgba(16,24,40,.12);
}
[data-theme="dark"] .prof{
  --djup-in:inset 0 1px 3px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.03);
  --djup-upp:inset 0 1px 0 rgba(255,255,255,.085), 0 1px 2px rgba(0,0,0,.38);
}

/* ── STATSRAILEN ───────────────────────────────────────────────────────────
   EN insättning för hela kolumnen. Före det här låg rubriker, brickor och
   rader på tre olika värden och ingenting linjerade i lod. */
.pr-rail{ --ins:11px; padding:0 0 4px; overflow:hidden; }

.pr-h{
  font:800 9px/1 'Roboto',sans-serif; letter-spacing:.12em; text-transform:uppercase;
  color:var(--faint); padding:13px var(--ins) 8px;
  display:flex; align-items:center; gap:7px;
}
.pr-h .hh{
  margin-left:auto; font-weight:700; letter-spacing:0; text-transform:none;
  font-size:10px; color:var(--faint);
}
/* Nivåbrickan: en låst yta ska SÄGA att den är låst, inte försvinna tyst. */
.pr-niv{
  margin-left:auto; display:inline-flex; align-items:center; gap:3px;
  padding:2px 6px; border-radius:999px;
  font:700 9px/1 'Roboto',sans-serif; letter-spacing:.05em; text-transform:uppercase;
  border:1px solid color-mix(in srgb,var(--accent) 32%,var(--line));
  color:var(--accent-ink); background:var(--card);
}
.pr-last{ padding:0 var(--ins) 10px; font-size:10.5px; color:var(--faint); line-height:1.45; }

/* RANGEN */
.pr-rang{ padding:0 var(--ins) 12px; }
.pr-bricka{
  display:inline-flex; align-items:center; gap:8px; padding:6px 11px 6px 8px;
  border-radius:5px;
  background:color-mix(in srgb,var(--p6rank,var(--gold-r)) 14%,var(--card));
  border:1px solid color-mix(in srgb,var(--p6rank,var(--gold-r)) 30%,transparent);
  box-shadow:var(--djup-upp);
}
.pr-bricka .sig{
  width:17px; height:17px; flex:0 0 17px; border-radius:3px; object-fit:contain;
  background:color-mix(in srgb,var(--p6rank,var(--gold-r)) 55%,transparent);
}
.pr-bricka img.sig{ background:none; }
.pr-bricka b{ font:900 14px/1 'Roboto',sans-serif; color:var(--p6rank,var(--gold-r)); }
.pr-till{ margin-top:10px; font-size:10.5px; color:var(--dim); }
/* Mätaren: ett spår med en stapel i — hela 3D-greppet i miniatyr. */
.pr-bar{
  margin-top:6px; height:6px; border-radius:999px; overflow:hidden;
  background:var(--inset); box-shadow:var(--djup-in);
}
.pr-bar i{
  display:block; height:100%; border-radius:inherit;
  background:var(--p6rank,var(--gold-r));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28);
}

/* NYCKELTALEN — fyra upphöjda brickor med 6 px luft. Var ett rutnät med
   1 px hårstreck där cellerna satt ihop och lästes som ett block. */
.pr-tal{ display:grid; grid-template-columns:1fr 1fr; gap:6px; padding:0 var(--ins) 12px; }
.pr-tal > div{
  background:var(--card); border:1px solid var(--line); border-radius:5px;
  padding:8px 10px; min-width:0; box-shadow:var(--djup-upp);
}
.pr-tal b{
  display:block; font:800 16px/1 'Roboto',sans-serif; color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.pr-tal em{
  display:block; margin-top:4px; font:700 8px/1 'Roboto',sans-serif;
  letter-spacing:.11em; text-transform:uppercase; color:var(--faint); font-style:normal;
}

/* ── PER LÄGE ──────────────────────────────────────────────────────────────
   ★ FELET KENTA PEKADE PÅ: *"ingen spacing"*. Uppmätt i mockupens första
     version: luckan mellan raderna var 0, 0, 0 px och fyllningen gick kant
     i kant utan radie — fyra värden blev en enda yta.
   Nu: eget spår per läge, 4 px luft emellan, stapeln upphöjd i spåret. */
.pr-lage{ padding:0 var(--ins) 4px; display:flex; flex-direction:column; gap:4px; }
.pr-lr{
  position:relative; display:flex; align-items:center; gap:9px;
  padding:7px 10px; min-width:0; border-radius:5px; overflow:hidden;
  background:var(--inset); box-shadow:var(--djup-in);
}
.pr-lr .fyll{
  position:absolute; left:0; top:0; bottom:0; z-index:0; border-radius:5px;
  background:color-mix(in srgb,var(--accent) 22%,transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
}
/* §0.5: huvudvalet bärs av en TONAD YTA, aldrig av en kant. */
.pr-lr.bast .fyll{ background:color-mix(in srgb,var(--p6rank,var(--gold-r)) 26%,transparent); }
.pr-lr > span{ position:relative; z-index:1; }
.pr-lr .nm{ min-width:0; flex:1 1 auto; font-size:11.5px; font-weight:700; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Matchantalet är kontext, inte ett värde man jämför — egen luft, svagare vikt. */
.pr-lr .mt{ flex:0 0 auto; font-size:9.5px; color:var(--faint); margin-right:2px; }
.pr-lr .kd{ flex:0 0 auto; font-size:12.5px; font-weight:800; color:var(--ink);
  min-width:32px; text-align:right; }

/* SENASTE PASSET */
.pr-pass{
  margin:0 var(--ins) 12px; padding:8px 10px; border-radius:5px;
  background:var(--inset); box-shadow:var(--djup-in);
  font-size:11px; color:var(--dim); line-height:1.5;
}

.pr-lank{
  display:block; margin:0 var(--ins) 4px; padding:9px 10px; border-radius:5px;
  font:700 11.5px/1 'Roboto',sans-serif; color:var(--accent-ink);
  background:var(--accent-wash); text-align:center; text-decoration:none;
}
.pr-lank:hover{ background:color-mix(in srgb,var(--accent) 18%,var(--card)); color:var(--accent-ink); }

/* ── OMSLAGETS VINJETT ─────────────────────────────────────────────────────
   Bannern är en bild MEDLEMMEN laddar upp. Den kan vara vit, ljus eller rörig.
   Utan vinjett ligger .pcov-actions med vit text direkt på okänt underlag.

   ★ TVÅ FEL I FÖRSTA VERSIONEN AV DEN HÄR REGELN, båda uppmätta på live och
     båda osynliga eftersom testprofilen saknar banner (.is-bare):

     1. Den använde ::after — men `.prof .pcov-banner::after` FINNS REDAN som
        ett inline-block i view.php: en 96 px fade i var(--card) som blandar
        bannern i kortet under. Två regler om samma pseudoelement betyder att
        en av dem dör. Samma sorts krock som `.fot` i butiksmockupen.
        ::before var helt ledigt (uppmätt: content:none, noll regler) och
        används därför här. Nu samsas de: deras fade nedtill, vår vinjett över.

     2. Den satte `> *{ position:relative; z-index:1 }` för att lyfta
        innehållet. Men .pcov-actions har redan `position:absolute; z-index:5`
        — regeln hade alltså gjort knapparna statiska OCH sänkt dem under
        vinjetten. Den raden är borta; knapparna ligger redan över.

   pointer-events:none är inte valfritt — utan den äter lagret klicken på
   Redigera profil, Dela och Byt banner.

   Gäller bara när en bild FINNS: .is-bare sätts av view.php när den saknas,
   och då ritar temat sin egen yta som inte behöver räddas. */
.pcov-banner:not(.is-bare)::before{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.26) 0%, rgba(0,0,0,0) 34%),
    linear-gradient(to top,    rgba(0,0,0,.30) 0%, rgba(0,0,0,0) 44%);
}

/* ── MOBIL ─────────────────────────────────────────────────────────────── */
@media (max-width:900px){
  .pr-rail{ --ins:10px; }
  .pr-tal{ grid-template-columns:repeat(4,1fr); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   STANDARDBANNERN — "B2 · Armen"                                  (2026-09-21)
   ═══════════════════════════════════════════════════════════════════════════
   Kenta: *"bygg B2 · Armen, med VERSALER, rak text och Bläck i ljust läge"*.
   Facit:  design-proposals/profil-bannern-2026-09-21.html
   Markup: views/partials/pulse-profil-banner.php (filkartan där säger varför).
   Ritas BARA när omslag saknas: view.php inkluderar den när $banner === '',
   samma test som sätter .is-bare på .pcov-banner.

   ★ ALLT KOMMER UR EN SIFFRA, --fs (namnets storlek i px):
       S, märkets ruta   = 5,5485 × fs      ⇒ namnets versalhöjd = F:ets mittarm (32,8/256)
       märkets topp      = yc − 0,5043 × S  ⇒ armens mitt (y 129,1/256) = namnbandets mitt
       knappens topp     = yc − 0,3554 × fs − etikettens höjd − luften under den
     Raderna hänger ihop. Ändrar du en av dem ensam glider namnet ur armen.

   ★ ACCENTERNA: Å når 0,232 em över versalhöjden (17 px vid 72 px), men etiketten
     står 6,6 px ovanför den. --ov (höjden över versalhöjden, från PHP) läggs därför
     på luften under etiketten: etiketten flyttas upp, namnet står still. Utan den
     krockade ringen i Å med "EPIC-NAMN" — hittat i testbädden, inte på live.

   ★ BREDDEN: --em (namnets bredd i em) räknas i PHP ur en glyftabell och görs om
     till px här, mot bannerns egen bredd (container-enheter, cqw). Namnet får gå
     fram till 24 px före F:ets stam, som står på x 58,4/256 vid armens underkant.
     Därav konstanten: (0,96875 − 0,22813) × 5,5485 = 4,10934.

   TRE LÄGEN, uppmätta på live 2026-09-21:
     ≥861 px   banner 210 px hög, 817–956 px bred       fs ≤ 72
     561–860   banner 150 px hög (saknades i mockupen)   fs ≤ 46
     ≤560      banner 112 px hög, 346 px bred vid 390    fs ≤ 27, namnet till höger om avataren

   UNDANTAG FRÅN UI-KONTRAKTET, skriftliga enligt F-listan (FORRE_UI_CONTRACT §3):
     F1  72/46/27 px är tak räknade ur bannerns höjd och märket, inga fria storlekar.
     F4  VERSALER över 10 px: Kentas uttryckliga val 2026-09-21.
     F6  Roboto Condensed: samma familj, självhostad (forre-fonts.css:16-17) och redan
         i bruk i pulse-navbar.css och pulse-liga.css.
     F8  min(), inte clamp(): taket är fast, bredden kan bara göra namnet mindre.
     §2.3 letter-spacing −.01em på namnet (negativt över 20 px), .1em på etiketten.

   ROLLBACK: ta bort den här sektionen, include:n i view.php och de två
   pbn-raderna där (ob-bufferten runt .p3-covsoc och .pbn-socrad).
   ═══════════════════════════════════════════════════════════════════════════ */

/* Laddas ett omslag upp tar view.php bort .is-bare — bannern går i samma ögonblick. */
.pcov-banner:not(.is-bare) > .pbn{ display:none; }

.pbn{
  position:absolute; inset:0; overflow:hidden; pointer-events:none;
  container-type:inline-size;
  --fsmax:72px; --yc:106px; --vx:18px; --hoger:30px; --lh:11.4px; --kt:62px;
  --lg:calc(6.6px + var(--fs) * var(--ov, 0));
  --fs:min(var(--fsmax), calc((100cqw - var(--vx) - var(--hoger) - 24px) / (max(var(--em, 0), 1) + 4.10934)));
  --S:calc(var(--fs) * 5.5485);
  --fop:.16;
}
[data-theme="dark"] .pbn{ --fop:.24; }

/* Märket: statistikkortets vattenstämpel (.k2-fring). --accent, toningen i MASKEN. */
.pbn-f{
  position:absolute; display:block; width:var(--S); height:var(--S);
  top:calc(var(--yc) - var(--S) * .5043);
  left:calc(100cqw - var(--hoger) - var(--S) * .96875);
  opacity:var(--fop);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 46%,rgba(0,0,0,.35) 72%,transparent 92%);
          mask-image:linear-gradient(180deg,#000 0%,#000 46%,rgba(0,0,0,.35) 72%,transparent 92%);
}
.pbn-f svg{ display:block; width:100%; height:100%; fill:var(--accent); }

/* Namnet + etiketten är EN knapp: klick kopierar Epic-namnet. */
.pbn-cpy{
  position:absolute; left:var(--vx);
  top:calc(var(--yc) - var(--fs) * .3554 - var(--lh) - var(--lg));
  display:block; margin:0; padding:0; border:0; background:none; color:inherit;
  font:inherit; text-align:left; pointer-events:auto; cursor:copy; border-radius:2px;
}
.pbn-cpy:focus-visible{ outline:2px solid var(--accent); outline-offset:6px; }
.pbn-l{
  display:flex; align-items:center; gap:6px; height:var(--lh);
  font:800 9.5px/1 'Roboto',sans-serif; letter-spacing:.1em; text-transform:uppercase;
  color:var(--dim); white-space:nowrap;
}
.pbn-l .bi{ font-size:10px; line-height:1; letter-spacing:0; opacity:0; transition:opacity .15s; }
.pbn-cpy:hover .pbn-l .bi, .pbn-cpy:focus-visible .pbn-l .bi, .pbn-cpy.klar .pbn-l .bi{ opacity:1; }
.pbn-cpy.klar .pbn-l{ color:var(--live); }
.pbn-n{
  display:block; margin-top:calc(var(--lg) - var(--fs) * .1311);
  font:900 var(--fs)/1 'Roboto Condensed','Roboto',sans-serif;
  letter-spacing:-.01em; text-transform:uppercase; color:var(--ink); white-space:nowrap;
}

/* Ägaren utan Epic-namn: en tyst länk där namnet hade stått. Besökare ser bara ringen. */
.pbn-koppla{
  position:absolute; left:var(--vx); top:var(--kt); pointer-events:auto;
  display:inline-flex; align-items:center; gap:7px; height:28px; padding:0 11px;
  border-radius:var(--r-sm); font-size:11.5px; font-weight:700; color:var(--accent-ink);
  text-decoration:none; white-space:nowrap;
  background:color-mix(in srgb,var(--card) 80%,transparent);
  border:1px dashed color-mix(in srgb,var(--accent) 45%,var(--line2));
}
.pbn-koppla:hover{ background:var(--card); border-style:solid; color:var(--accent-ink); }
.pbn-koppla .bi{ font-size:13px; line-height:1; }
.pbn-kort{ display:none; }

/* ── KNAPPARNA OCH IKONERNA PÅ STANDARDBANNERN ─────────────────────────────
   Utan omslag finns inget foto att rädda knapparna från. Svart glas
   (view.php:2923, rgba(0,0,0,.55)) blev då en svart platta på en ljus yta i
   ljust läge. Här får de sidans toner, samma behandling som omslagsknappen
   fick 2026-08-16 (.pcov-covbtn, view.php:2393). Med omslag gäller view.php.
   Specificiteten är avsiktligt högre än view.php:s inline-regler: de står
   senare i kaskaden och vinner annars vid lika. */
.prof .pcov-banner.is-bare .pcov-actions .pbtn:not(.primary){
  background:color-mix(in srgb,var(--card) 86%,transparent); border-color:var(--line2);
  color:var(--ink); box-shadow:0 1px 2px rgba(0,0,0,.16);
}
.prof .pcov-banner.is-bare .pcov-actions .pbtn:not(.primary):hover{ background:var(--card); border-color:var(--accent); }
.prof .pcov-banner.is-bare .pcov-actions .pbtn:not(.primary) .bi{ color:var(--accent-ink); }
.prof .pcov-banner.is-bare .pcov-actions .pbtn.ok:not(.primary) .bi{ color:var(--live); }
.prof .pcov-banner.is-bare .pcov-actions .pbtn.wait:not(.primary) .bi{ color:var(--gold); }
.prof .pcov-banner.is-bare .pcov-actions .pbtn.kcof:not(.primary){
  border-color:color-mix(in srgb,var(--gold) 50%,var(--line2)); color:var(--gold);
}
.prof .pcov-banner.is-bare .pcov-actions .pbtn.kcof:not(.primary) .bi{ color:var(--gold); }
.prof .pcov-banner.is-bare .p3-covsoc .p3-soc{
  background:color-mix(in srgb,var(--card) 86%,transparent); color:var(--ink2);
  box-shadow:inset 0 0 0 1px var(--line2);
}
.prof .pcov-banner.is-bare .p3-covsoc .p3-soc:hover{ background:var(--sc,#333); color:var(--sf,#fff); box-shadow:none; }

/* Mobilens ikonrad. Renderas bara utan omslag (view.php, .pbn-socrad i .pcov-row). */
.pbn-socrad{ display:none; }

/* ── 561–860 px: bannern är 150 px hög ─────────────────────────────────────
   Avataren står nere till vänster (x 14–98, y 116–200, ringen från 113) och
   knapparna uppe (y 12–45, ägarens omslagsknapp 12–40 till vänster). Mittlinjen
   86 px och taket 46 px är det enda par där båda håller även för Å: etiketten
   börjar 51,7 px ner (41,0 med Å, under omslagsknappen) och baslinjen slutar
   102,4 px ner — 10 px ovanför avatarens ring. Med 48 px nuddade Å knappen. */
@media (max-width:860px){
  .pbn{ --fsmax:46px; --yc:86px; --vx:14px; --kt:60px; }
}

/* ── ≤560 px: bannern är 112 px hög ────────────────────────────────────────
   Knapparna tar y 12–56 över hela bredden och avataren x 14–98 från y 78.
   Fritt: x 108 → högerkanten, y 58–106. Namnet får gå in över ringen här —
   remsan är för smal för annat, och stämpeln är bakgrund. Ingen stam-regel. */
@media (max-width:560px){
  .pbn{
    --fsmax:27px; --yc:88px; --vx:108px; --hoger:12px; --lh:9.6px; --kt:64px;
    --lg:calc(4.4px + var(--fs) * var(--ov, 0));
    --fs:min(var(--fsmax), calc((100cqw - var(--vx) - var(--hoger)) / max(var(--em, 0), 1)));
  }
  .pbn-l{ font-size:8px; letter-spacing:.08em; gap:5px; }
  .pbn-l .bi{ font-size:9px; }
  .pbn-koppla{ height:26px; padding:0 9px; font-size:10.5px; }
  .pbn-lang{ display:none; }
  .pbn-kort{ display:inline; }

  /* De sociala ikonerna står i bannerns nedre högra hörn — exakt där namnet
     ligger på mobil. Utan omslag flyttar de till namnraden, under namnet.
     Efter en uppladdning (.is-bare borta) gäller view.php igen. */
  .prof .pcov-banner.is-bare > .p3-covsoc{ display:none; }
  .prof .pcov-row > .pbn-socrad{ display:block; grid-column:2; margin-top:-8px; }
  .prof .pcover:has(> .pcov-banner:not(.is-bare)) .pbn-socrad{ display:none; }
  .prof .pcov-row .pbn-socrad .p3-covsoc{ position:static; display:flex; flex-wrap:wrap; gap:5px; }
  .prof .pcov-row .pbn-socrad .p3-covsoc .p3-soc{
    width:24px; height:24px; font-size:11.5px; color:var(--ink2); background:var(--inset);
    box-shadow:inset 0 0 0 1px var(--line2); -webkit-backdrop-filter:none; backdrop-filter:none;
  }
  .prof .pcov-row .pbn-socrad .p3-covsoc .p3-soc svg{ width:13px; height:13px; }
  .prof .pcov-row .pbn-socrad .p3-covsoc .p3-soc:hover{ background:var(--sc,#333); color:var(--sf,#fff); box-shadow:none; }
}