/* forre_pulse — EVENT-RADER på väggen (hub + profil).
   ============================================================================
   2026-07-26 (Kentas beslut, mockup design-proposals/wall-posts-v2-2026-07-26.html):
   Väggen skiljer nu på VAD FOLK SÄGER (vanligt inlägg — kort, header, knappfält)
   och VAD SOM HÄNDER (event-rad — ikon, EN mening, dämpad metarad). Händelser
   behöver då ingen glödande ram för att märkas: raden ser redan annorlunda ut.

   Två typer använder detta idag (se wall-post-card.php $evKind):
     .post-ev-duel    duel_result   — enradare, resultatet högerställt
     .post-ev-unreal  unreal_rank   — "rubriken" (variant B): samma anatomi,
                                       men ordet UNREAL sätts som rubrik.
   Övriga auto_types (avatar_upload, banner_upload, birthday, anniversary,
   duel_start) och alla vanliga inlägg renderas som förut — orörda.

   OBS FILNAMN: filen hette pulse-unreal.css och behåller namnet, eftersom
   pulse-layouten (themes/forre_pulse/views/layouts/default.php) är en SKYDDAD
   fil och redan laddar exakt denna fil på just hub + profil. Byt namn först
   när layouten ändå ska röras.

   Rot-elementet är fortfarande <div class="card post" data-post="…"> — pulse.js
   och pulse-reactions.js selektar hårdkodat på .card.post, och gilla/reaktioner/
   kommentarer/menyn hänger på [data-like], [data-lc], .pc-l, .pc-c, [data-cc],
   [data-cpreview], .cwrap. Ändra ALDRIG rot-klasserna eller de hookarna.
   ============================================================================ */

/* ── Rad-skelett (delas av alla event-typer) ───────────────────────────── */
html[data-pulse] .card.post.post-ev .pev{
  display:flex;
  align-items:flex-start;
  gap:11px;
  padding:11px 14px;
}
html[data-pulse] .post-ev .pev-ic{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border-radius:var(--r-sm);
  font-size:15px;
}
html[data-pulse] .post-ev .pev-ic img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}
html[data-pulse] .post-ev .pev-main{ flex:1; min-width:0; }

/* Meningen. Namn = ink + fet, resten dämpat — raden ska läsas som en mening,
   inte som ett fält med etiketter. */
html[data-pulse] .post-ev .pev-line{
  display:block;
  font-size:13.5px;
  line-height:1.4;
  color:var(--ink2);
}
html[data-pulse] .post-ev .pev-line a{ font-weight:700; color:var(--ink); }
html[data-pulse] .post-ev .pev-line a:hover{ color:var(--accent); text-decoration:underline; }

/* Metaraden: tid + handlingar + räknare, allt i samma dämpade 11.5px. */
html[data-pulse] .post-ev .pev-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:4px 7px;
  margin-top:3px;
  font-size:11.5px;
  color:var(--dim);
}
html[data-pulse] .post-ev .pev-sep{ color:var(--line2); font-style:normal; }
html[data-pulse] .post-ev .pev-a{
  font-weight:600;
  color:var(--dim);
  padding:2px 0;
  background:none;
  border:0;
}
html[data-pulse] .post-ev .pev-a:hover{ color:var(--accent); }
/* Reaktions-systemet (pulse-reactions.js) skriver om knappens innehåll till
   .act-emo + .act-lbl och sätter --react-color. De reglerna är scopade till
   .act i pulse-reactions.css, så event-raden behöver sina egna tre. */
html[data-pulse] .post-ev .pev-a .act-emo{ font-size:13px; line-height:1; display:inline-block; }
html[data-pulse] .post-ev .pev-a.on{ color:var(--accent); }
html[data-pulse] .post-ev .pev-a.on[data-reaction]{ color:var(--react-color,var(--accent)); }
/* Kontexthandlingen (Revansch/Utmana = guld, Jämför = accent) — max EN färgad
   handling per rad, annars tävlar de om samma uppmärksamhet. */
html[data-pulse] .post-ev .pev-go{ color:var(--gold); font-weight:700; }
html[data-pulse] .post-ev .pev-go:hover{ color:var(--gold); text-decoration:underline; }
html[data-pulse] .post-ev .pev-cmp{ color:var(--accent-ink); }

/* Räknarna återanvänder .pcount/.pc-l/.pc-c/[data-lc]/[data-cc] så att JS:ens
   auto-göm-vid-noll fortsätter fungera — här bara nedskalade till metaradens
   storlek istället för sitt eget block. */
html[data-pulse] .post-ev .pcount{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:0;
  font-size:11.5px;
  color:var(--dim);
}
html[data-pulse] .post-ev .pc-l,
html[data-pulse] .post-ev .pc-c{
  display:inline-flex;
  align-items:center;
  gap:4px;
  cursor:pointer;
  font-variant-numeric:tabular-nums;
}
html[data-pulse] .post-ev .pc-l:hover,
html[data-pulse] .post-ev .pc-c:hover{ color:var(--ink2); text-decoration:none; }
html[data-pulse] .post-ev .pcount .lk{
  width:14px;
  height:14px;
  border-radius:50%;
  background:var(--accent);
  display:grid;
  place-items:center;
  color:#fff;
}
html[data-pulse] .post-ev .pcount .lk svg{ width:9px; height:9px; }

/* ⋯-menyn: egen smal kolumn längst till höger. Alltid synlig (touch), men
   dämpad tills man hovrar — den ska aldrig konkurrera med resultatet. */
html[data-pulse] .post-ev .pev-menu{ flex:0 0 auto; margin-left:0; }
html[data-pulse] .post-ev .pev-menu .pmore{
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  font-size:15px;
  line-height:1;
  color:var(--faint);
  opacity:.6;
}
html[data-pulse] .post-ev:hover .pev-menu .pmore,
html[data-pulse] .post-ev .pev-menu .pmore:focus-visible{ opacity:1; color:var(--ink2); }

/* ── DUELL: enradare ───────────────────────────────────────────────────── */
html[data-pulse] .post-ev-duel .pev-ic{
  background:color-mix(in srgb,var(--gold) 13%,transparent);
  color:var(--gold);
}
/* Duell-START = samma rad, men ingen har vunnit än: handske i stället för pokal,
   accenten dämpad (accentblå i stället för guld — guldet tillhör en avgjord duell). */
html[data-pulse] .post-ev-duelstart .pev-ic{
  background:var(--accent-wash);
  color:var(--accent-ink);
}
html[data-pulse] .post-ev-duelstart .pev-ic img{ width:18px; height:18px; }
html[data-pulse] .post-ev-duelstart .pev-go{ color:var(--accent-ink); font-weight:700; }
html[data-pulse] .post-ev-duelstart .pev-go:hover{ color:var(--accent-ink); }
html[data-pulse] .post-ev-duelstart .pev-score b{ color:var(--ink2); font-size:14px; }
html[data-pulse] .post-ev-duelstart .pev-score em{ color:var(--faint); }
/* Resultatet högerställs så att flera dueller under samma vecka bildar en
   RESULTATLISTA när de staplas i feeden. Vinnarens siffra fet, förlorarens
   dämpad: rangordningen syns utan att någon pekas ut som förlorare. */
html[data-pulse] .post-ev .pev-score{
  flex:0 0 auto;
  padding-top:1px;
  text-align:right;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}
html[data-pulse] .post-ev .pev-score b{ font-size:15.5px; font-weight:800; color:var(--ink); }
html[data-pulse] .post-ev .pev-score s{ text-decoration:none; font-size:13.5px; font-weight:700; color:var(--dim); }
html[data-pulse] .post-ev .pev-score i{ font-style:normal; font-weight:700; color:var(--line2); margin:0 1px; }
html[data-pulse] .post-ev .pev-score em{
  display:block;
  margin-top:-1px;
  font-style:normal;
  font-size:9.5px;
  font-weight:700;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--faint);
}

/* ── UNREAL: "rubriken" (variant B) ────────────────────────────────────── */
/* Samma anatomi som duellraden — emblem, mening, metarad — men meningen bryts
   så att ORDET blir rubriken. Ingen mörk platta: kortet är samma yta som
   resten av feeden, så posten växer ur mönstret istället för att bryta det. */
html[data-pulse] .card.post.post-ev-unreal .pev{
  align-items:center;
  gap:14px;
  padding:14px 16px;
}
html[data-pulse] .post-ev-unreal .pev-ic{
  width:56px;
  height:56px;
  border-radius:0;
  background:none;
  filter:drop-shadow(0 2px 12px color-mix(in srgb,var(--champ) 42%,transparent));
}
html[data-pulse] .post-ev-unreal .pev-who{ font-size:12.5px; color:var(--dim); }
html[data-pulse] .post-ev-unreal .pev-who a{ font-weight:700; color:var(--ink); }
html[data-pulse] .post-ev-unreal .pev-who a:hover{ color:var(--accent); text-decoration:underline; }
html[data-pulse] .post-ev-unreal .pev-title{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:9px;
  margin-top:1px;
}
html[data-pulse] .post-ev-unreal .pev-title b{
  font-family:'Roboto',sans-serif;
  font-size:29px;
  font-weight:900;
  line-height:1.05;
  letter-spacing:.01em;
  color:var(--ink);
}
html[data-pulse] .post-ev-unreal .pev-title span{
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--champ);
}
html[data-pulse] .post-ev-unreal .pev-meta{ margin-top:6px; }

/* ── Mobil ─────────────────────────────────────────────────────────────── */
@media(max-width:560px){
  html[data-pulse] .card.post.post-ev .pev{ gap:10px; padding:10px 12px; }
  html[data-pulse] .card.post.post-ev-unreal .pev{ gap:12px; padding:12px 14px; }
  html[data-pulse] .post-ev-unreal .pev-ic{ width:48px; height:48px; }
  html[data-pulse] .post-ev-unreal .pev-title b{ font-size:25px; }
  html[data-pulse] .post-ev .pev-score b{ font-size:14.5px; }
  /* ⋯ alltid läsbar på touch (ingen hover finns) */
  html[data-pulse] .post-ev .pev-menu .pmore{ opacity:1; }
}

/* ==========================================================================
   LEGACY — .unreal-badge (den mörka plattan i unreal_rank-inlägget före
   2026-07-26). Renderas inte längre av wall-post-card.php, men behålls en
   release så att inget tappas om event-rad-grenen behöver stängas av.
   Kan tas bort när variant B är verifierad i drift.
   ========================================================================== */
html[data-pulse] .unreal-badge{
  position:relative;
  display:flex;
  align-items:center;
  gap:16px;
  margin:2px 0 10px;
  padding:16px 18px;
  background:var(--board-bg);
  border-radius:var(--r);
  overflow:hidden;
}
html[data-pulse] .unreal-badge::before{
  content:"";
  position:absolute;
  left:0; top:0; right:0;
  height:3px;
  background:#8b5cf6;
}
html[data-pulse] .ub-icon{
  flex:0 0 auto;
  width:72px;
  height:72px;
  object-fit:contain;
  filter:drop-shadow(0 2px 10px rgba(139,92,246,.4));
}
html[data-pulse] .ub-main{ min-width:0; }
html[data-pulse] .ub-kick{
  font-size:11px;
  letter-spacing:3px;
  font-weight:700;
  text-transform:uppercase;
  color:#a78bfa;
}
html[data-pulse] .ub-title{
  margin:2px 0 8px;
  font-size:34px;
  line-height:1;
  font-weight:900;
  letter-spacing:1px;
  color:var(--board-ink);
}
html[data-pulse] .ub-mode{
  display:inline-block;
  padding:5px 12px;
  border-radius:6px;
  font-size:12px;
  font-weight:700;
  letter-spacing:1px;
}
html[data-pulse] .um-br{ background:#7fe0ff; color:#062a35; }
html[data-pulse] .um-zb{ background:#37d29b; color:#053026; }
html[data-pulse] .um-reload{ background:#f5c542; color:#3a2c02; }

@media(max-width:560px){
  html[data-pulse] .unreal-badge{ gap:12px; padding:14px; }
  html[data-pulse] .ub-icon{ width:56px; height:56px; }
  html[data-pulse] .ub-title{ font-size:28px; }
}