/* ═══════════════════════════════════════════════════════════════════════════
   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); }
}