/* =============================================================================
   FORRE.NU — STREAM-LÄGE PÅ HUBBEN          themes/forre_pulse/css/pulse-stream-mode.css
   -----------------------------------------------------------------------------
   BYGGD 2026-08-29 ur design-proposals/hubben-hel-2026-08-29.html.

   Läget slås på av data-stream="pa" på hubbens .shell, satt i PHP från
   user_socials.is_live (HubStreamService). Ingen JS behövs för att växla —
   sänder du, är läget på när sidan renderas.

   ★ INGA LODRÄTA FÄRGADE LINJER. Husregel §0.5. Det som ska märkas tonas i
     hela ytan; avgränsningar är vågräta. Kortet nedan har därför en tonad
     yta och en vågrät linje, aldrig en border-left.

   ★ VARFÖR only-privat DÖLJER MEN only-stream INTE BEHÖVER GÖRA DET
     `.only-stream`-kortet renderas inte alls när du är offline — PHP:n
     returnerar tidigt (pulse-hub-stream.php). Regeln finns ändå kvar som
     bälte-och-hängslen om markupen någon gång ritas av JS.
     `.only-privat` är tvärtom: innehållet SKA finnas i sidan (det är dina egna
     siffror, du är inloggad), det ska bara inte stå på skärmen medan en
     OBS-källa filmar den. Där är display:none rätt verktyg.

   ★ VAD SOM INTE FINNS HÄR: `.only-stab`. Mockupen döljer stabsinnehåll med
     [data-roll="medlem"] .only-stab{display:none}. Det vore en REGRESSION på
     live: ett dolt element ligger kvar i DOM:en och går att läsa i källkoden.
     Adminpanelen gatas i PHP och ska fortsätta göra det. En mockup måste kunna
     växla utan server; en sajt ska inte.
   ============================================================================= */

/* ══ Lägesväxlarna ═══════════════════════════════════════════════════════ */
[data-stream="av"] .only-stream { display: none !important; }
[data-stream="pa"] .only-privat { display: none !important; }

/* ══ Koden suddas, kortet står kvar ══════════════════════════════════════
   Mockupens ord: "Kortet står kvar, koden suddas. En streamer vill visa att
   panelen finns — det är koden som brinner."

   Blur och inte display:none, för det är skillnaden mellan "panelen finns,
   koden är min" och "panelen är borta". Klarnar på hover/fokus så DU kan läsa
   den — en OBS-källa hovrar aldrig.
   user-select:none så att en kopiering inte råkar ta den medan den är suddad. */
[data-stream="pa"] .apc-k,
[data-stream="pa"] [data-apc-nk],
[data-stream="pa"] .apc-lista-k {
  filter: blur(7px);
  user-select: none;
  transition: filter .12s ease;
}
[data-stream="pa"] .apc-k:hover,
[data-stream="pa"] .apc-k:focus-within,
[data-stream="pa"] [data-apc-nk]:hover,
[data-stream="pa"] [data-apc-nk]:focus-within,
[data-stream="pa"] .apc-lista-k:hover,
[data-stream="pa"] .apc-lista-k:focus-within {
  filter: none;
  user-select: auto;
}

/* ══ Kortet "Din sändning" ═══════════════════════════════════════════════ */
.hstream {
  /* Tonad hel yta i stället för en färgad kant — §0.5. */
  background: color-mix(in srgb, var(--danger) 5%, var(--surface-1, transparent));
  padding: 11px 12px 10px;
}
[data-theme="dark"] .hstream {
  background: color-mix(in srgb, var(--danger) 9%, var(--surface-1, transparent));
}

.hstream-hd { display: flex; align-items: center; gap: 7px; }

.hstream-pip {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--danger); flex: 0 0 auto;
  animation: hstream-puls 2s ease-in-out infinite;
}
@keyframes hstream-puls { 0%,100% { opacity: 1 } 50% { opacity: .35 } }

.hstream-t {
  font-size: 11px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink);
}
.hstream-plat {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 700; color: var(--dim);
}
.hstream-tid {
  margin-left: auto;
  font-size: 11px; font-weight: 700; color: var(--dim);
  font-variant-numeric: tabular-nums;
}

.hstream-titel {
  margin: 7px 0 0; font-size: 11.5px; line-height: 1.35; color: var(--dim);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Vågrät linje över taldelen. Aldrig en lodrät. */
.hstream-tal {
  margin: 9px 0 0; padding-top: 9px;
  border-top: 1px solid var(--line2);
  display: grid; gap: 5px;
}
.hstream-tal-i { display: flex; align-items: baseline; gap: 8px; }
.hstream-tal-i dt { font-size: 11px; color: var(--faint); flex: 1 1 auto; }
.hstream-tal-i dd {
  margin: 0; font-size: 13px; font-weight: 800; color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.hstream-not {
  margin: 9px 0 0; padding-top: 8px;
  border-top: 1px solid var(--line2);
  display: flex; align-items: flex-start; gap: 6px;
  font-size: 10.5px; line-height: 1.35; color: var(--faint);
}
.hstream-not i { margin-top: 1px; flex: 0 0 auto; }