/* ============================================================================
   pulse-chip.css — KANONISK CSS för user-chippet och kosmetiken.
   Utbruten ur App\Helpers\UserChipService::styles() 2026-07-26 (Kenta: "det ska
   funka felfritt").

   VARFÖR filen finns:
   styles() skrev CSS:en inline och MAX EN GÅNG per request (static $stylesEmitted).
   Den som råkade anropa metoden först "ägde" stilblocket — och wall-post-card.php
   beräknade $__cosCss högst upp för VARJE post, även auto-/event-poster vars
   .pev-gren aldrig ekade variabeln. Bar en auto-posts författare ett märke slukades
   hela <style>-blocket tyst, och senare chip på samma sida (t.ex. Creators live i
   hub-railen) renderades helt ostylade: .uchip-ico föll tillbaka på bildens
   naturliga 512×512 = jättelik rankikon i högerrailen.

   Filen laddas ALLTID i pulse-skalet (layouts/default.php, direkt efter
   forre_pulse.css). Chip finns på hub, profil, forum, leaderboard, streaming,
   clips och coins — rutt-gating vore bara en ny variant av samma fälla.
   ~1 KB, filemtime-versionerad som allt annat.

   Klasserna sätts av UserChipService::renderChip/renderBadge/renderTitle.
   Ändra ALDRIG färg/storlek här utan att kolla pulse-coins.css, som speglar
   märket i butiksförhandsvisningen.
   ============================================================================ */

/* ── Rank-chippet (förslag B, Kenta 2026-07-17) ──────────────────────────────
   Stillren badge: ingen färgplatta — ikonen bär rankfärgen, texten är neutral
   och dämpad. Storlek = navbar-menyns 13px, weight 500. Temafärger via
   --dim/--ink2 så samma regler funkar i både ljust och mörkt tema. */
.uchip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--dim, #5a6472);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}

/* Rankikonen levereras i 512×512 från Epic — utan denna regel exploderar den. */
.uchip-ico {
  width: 14px;
  height: 14px;
  object-fit: contain;
  flex: 0 0 auto;
}

.uchip-season { opacity: .65; font-weight: 500; }
.uchip-stat   { color: var(--dim, #8a93a0); font-weight: 400; }
.uchip-stat b { color: var(--ink2, #5a6472); font-weight: 600; }

/* ── Kosmetik (2026-07-26) ───────────────────────────────────────────────────
   Märket är EN sprite-fil för alla ikoner. --fcb styr storleken på ETT ställe;
   arket är 2x så nedskalning blir skarp på retina. Ramen bär sällsyntheten
   (ShopService rarity-färger) — därför kan samma ikon flyttas mellan nivåer
   utan att någon ritar om något. */
.fc-b {
  --fcb: 20px;
  --fcr: #C7C7C7;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--fcb) + 7px);
  height: calc(var(--fcb) + 7px);
  border-radius: 7px;
  flex: 0 0 auto;
  vertical-align: middle;
  background: rgba(127, 138, 155, .10);
  background: color-mix(in srgb, var(--fcr) 13%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fcr) 42%, transparent);
}
.fc-b.fc-lg { --fcb: 32px; }
.fc-b.fc-sm { --fcb: 15px; border-radius: 5px; }

.fc-r-uncommon  { --fcr: #319236; }
.fc-r-rare      { --fcr: #4C51F7; }
.fc-r-epic      { --fcr: #9D4DBB; }
.fc-r-legendary { --fcr: #FF8000; }
.fc-r-mythic    { --fcr: #F3AF19; }

.fc-badge {
  display: inline-block;
  width: var(--fcb, 24px);
  height: var(--fcb, 24px);
  /* ?v=<hash> KRAVS (2026-07-26): arket bytte fran 8 till 14 ikoner och alla
     webblasare satt kvar pa den gamla 480x48-filen — ratt CSS-positioner mot
     fel bild = tomma rutor och forskjutna ikoner. Hashen sätts automatiskt av
     TEMP/build_cosmetics.py vid varje bygge. Redigera den inte for hand. */
  background-image: url(/public/images/cosmetics/badges.png?v=0191e67c);
  background-repeat: no-repeat;
  /* Arket ar 10 kolumner brett. 'auto' pa hojden gor att flera RADER fungerar
     utan andring har — 2026-07-26 vaxte det fran 8 till 14 ikoner (1 -> 2 rader). */
  background-size: calc(var(--fcb, 24px) * 10) auto;
  flex: 0 0 auto;
}
.fc-badge[data-c="aimgod"]       { background-position: 0 0; }
.fc-badge[data-c="buskcampare"]  { background-position: calc(var(--fcb, 24px) * -1) 0; }
.fc-badge[data-c="byggaren"]     { background-position: calc(var(--fcb, 24px) * -2) 0; }
.fc-badge[data-c="clutchkung"]   { background-position: calc(var(--fcb, 24px) * -3) 0; }
.fc-badge[data-c="dansaren"]     { background-position: calc(var(--fcb, 24px) * -4) 0; }
.fc-badge[data-c="forsta-tusen"] { background-position: calc(var(--fcb, 24px) * -5) 0; }
.fc-badge[data-c="grindare"]     { background-position: calc(var(--fcb, 24px) * -6) 0; }
.fc-badge[data-c="hamstraren"]   { background-position: calc(var(--fcb, 24px) * -7) 0; }
.fc-badge[data-c="hotdroppare"]  { background-position: calc(var(--fcb, 24px) * -8) 0; }
.fc-badge[data-c="klippan"]      { background-position: calc(var(--fcb, 24px) * -9) 0; }
.fc-badge[data-c="lagspelare"]   { background-position: 0 calc(var(--fcb, 24px) * -1); }
.fc-badge[data-c="morgonpigg"]   { background-position: calc(var(--fcb, 24px) * -1) calc(var(--fcb, 24px) * -1); }
.fc-badge[data-c="nattuggla"]    { background-position: calc(var(--fcb, 24px) * -2) calc(var(--fcb, 24px) * -1); }
.fc-badge[data-c="solovargen"]   { background-position: calc(var(--fcb, 24px) * -3) calc(var(--fcb, 24px) * -1); }

/* Titeln: prosa, därför dämpad piller-form på metaraden — aldrig bredvid namnet. */
.fc-title {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: .02em;
  color: var(--dim, #8a93a0);
  background: rgba(127, 138, 155, .12);
  box-shadow: inset 0 0 0 1px rgba(127, 138, 155, .18);
  white-space: nowrap;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

/* ── Kaffemärket (2026-08-07, Kentas beslut) ─────────────────────────────────
   Ett superadmin-satt TACK för en Buy Me a Coffee-gåva. Det är INTE kosmetik
   och INTE en förmån: flaggan bor i `users.coffee_thanked_at`, kan inte köpas,
   kan inte av-utrustas och kan aldrig trängas undan av ett köpt märke.
   Se `UserChipService::coffeeForUserIds()` och BRAIN.md (Epic-juridik).

   FÖRSLAG A (flödet): naken glyf efter namnet. Ingen platta, ingen ram — den
   ska väga MINDRE än `.chiplbl.auto` (Victory Royale) som ligger på SAMMA rad
   och också är guld. Det är formen som skiljer dem åt, aldrig färgen; en ramad
   bricka här hade blivit omöjlig att skilja från de köpbara `.fc-b`-märkena.
   Uppmätt 2026-08-07: namnraden i värsta fallet (21 teckens namn + milstolpe +
   kosmetikmärke + rank + VR-pill) är 426 px i en kolumn som rymmer 442. Glyfen
   lägger till 23 px, så raden wrappar i just det läget — `.nm` har redan
   `flex-wrap:wrap` och tål det. En 25 px bricka hade kostat 32.

   FÖRSLAG B (profilen) bor INTE här utan inline i `profile/view.php`, eftersom
   `.pcov-*` är sidspecifikt och hela profilens CSS redan ligger i den vyn. */
.kcup{display:inline-flex;align-items:center;justify-content:center;color:var(--gold);font-size:16px;line-height:0;flex:0 0 auto;vertical-align:middle}
.kcup .kcup-g{width:1em;height:1em;fill:currentColor;display:block}
.kcup-lg{font-size:22px}

/* Menyraden som superadmin ger/tar märket med. Ligger HÄR och inte i
   forre_pulse.css (där `.pmi.danger` bor) med flit: den filen är 199 KB, delas
   av alla sessioner och har trunkerats vid samtidig sync (2026-07-12). Den här
   filen laddas direkt EFTER forre_pulse.css i pulse-skalet, så samma
   specificitet vinner ändå. */
.pmi.gold{color:var(--gold)}
.pmi.gold .bi{color:var(--gold)}
.pmi.gold:hover{background:color-mix(in srgb,var(--gold) 12%,transparent)}

/* Ångra-remsan efter att superadmin gett/tagit märket. Inline i kortet, aldrig
   modal (Kentas regel: bekräftelse byter ut raden PÅ PLATS + Ångra i ~8 s).
   Guld här är korrekt: den betyder "väntar på ditt beslut" i 8 sekunder. */
.kundo{display:flex;align-items:center;gap:9px;margin:0 16px 12px;padding:8px 12px;border-radius:var(--r);
  background:color-mix(in srgb,var(--gold) 10%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--gold) 28%,transparent);
  font-size:12.5px;font-weight:600;color:var(--gold)}
.kundo .bi{font-size:14px;line-height:1}
.kundo-b{margin-left:auto;min-height:32px;padding:0 10px;border-radius:var(--r-sm);
  font-weight:800;font-size:12.5px;color:var(--gold);text-decoration:underline}
.kundo-b:hover{background:color-mix(in srgb,var(--gold) 16%,transparent);text-decoration:none}
@media (max-width:820px){.kundo-b{min-height:44px}}

/* ══════════════════════════════════════════════════════════════════════════
   BEVISAT EPIC-KONTO (2026-08-07, förslag A "Ringen")
   ──────────────────────────────────────────────────────────────────────────
   Sätts av UserChipService::bevAvatarClass() på avataren och
   UserChipService::bevMark() för bocken. Bara konton med
   epic_link_method='oauth' — alltså bevisat ägarskap, inte namnuppslag.

   RITAD MED `outline`, INTE `border` OCH INTE `box-shadow`. Tre skäl:
     · border ändrar elementets storlek och knuffar varje rad 4 px i sidled
       den sekund märket dyker upp,
     · box-shadow skulle skriva över de skuggor avatarerna redan bär på flera
       ytor (--shadow, online-prickens ring),
     · outline ritas utanför border-boxen, deltar inte i layouten alls och
       följer border-radius i alla webbläsare vi bryr oss om.
   `outline-offset` ger spalten som gör att det läser som en RING och inte
   som en tjock kant.

   Tre storleksklasser med flit: avatarerna på sajten går från 19 px till
   54 px+, och en fast ringbredd som är lagom på 34 px är 37 % av diametern
   på 19 px — då är det inte längre en avatar, det är en knapp.
   ══════════════════════════════════════════════════════════════════════════ */
.is-bev{outline:2px solid var(--accent);outline-offset:1.5px}
.is-bev-sm{outline-width:1.5px;outline-offset:1px}   /* ≤24 px avatarer */
.is-bev-lg{outline-width:3px;outline-offset:2px}     /* ≥48 px avatarer */

/* Bocken. Sigillet i accent, hacket i kortfärgen — håller i BÅDA lägena
   eftersom --accent-ink är mörkblå i ljust och ljusblå i mörkt, och --card
   följer med åt motsatt håll. */
.uc-bev{display:inline-flex;align-items:center;justify-content:center;
  width:14px;height:14px;flex:0 0 auto;vertical-align:-2px}
.uc-bev svg{width:100%;height:100%;display:block}
.uc-bev .uc-bev-s{fill:var(--accent-ink)}
.uc-bev .uc-bev-c{fill:var(--card)}
.uc-bev-lg{width:17px;height:17px;vertical-align:-3px}

/* Bevispanelen på profilen. Renderas ALDRIG för ett okopplat konto —
   "aldrig en tom låda" (BRAIN §0B). */
.bevp{border-top:1px solid var(--line)}
.bevp-r{display:flex;align-items:flex-start;gap:12px;padding:9px 0;border-top:1px solid var(--line)}
.bevp-r:first-child{border-top:0}
/* 88 px, inte 132: panelen bor i hogerrailen som ar ~280 px bred. Med 132 px
   etikett fick vardet 130 px och "Namnet kan inte tas av nagon annan" brot
   pa tva rader bredvid en halvtom kolumn. Uppmatt pa live 2026-08-08. */
.bevp-k{width:88px;flex:0 0 auto;font-size:11.5px;color:var(--dim);padding-top:1px}
.bevp-v{flex:1;min-width:0;font-size:13px;font-weight:700;color:var(--ink)}
.bevp-v small{display:block;font-weight:400;font-size:11.5px;color:var(--dim);margin-top:1px}
@media (max-width:560px){
  .bevp-r{flex-direction:column;gap:2px}
  .bevp-k{width:auto}
}
/* Om kortet nagon gang blir smalare an 240 px staplar raderna av sig sjalva.
   Container query, inte media query: det ar KORTETS bredd som avgor, inte
   skarmens - panelen ligger i en rail som kan krympa oberoende av viewport. */
@supports (container-type:inline-size){
  .pbev{container-type:inline-size}
  @container (max-width:240px){
    .bevp-r{flex-direction:column;gap:2px}
    .bevp-k{width:auto}
  }
}