/* ═══════════════════════════════════════════════════════════════════════════
   FORRE.NU — KLIPPSIDAN                             (css/pulse-klipp.css)
   Byggd om 2026-09-20. Facit: design-proposals/klipp-spelaren-2026-09-20.html,
   vyn "Klippsidan". Kenta: "tänk youtube, tänk facebook, tänk tiktok".

   ── VAD SOM ÄNDRADES OCH VARFÖR ───────────────────────────────────────────
   Tavlan (.kl-rut, .kl-kort) är BORTA. Den gav 181 px breda klipp i en
   mittkolumn på 562 — 38 % av bildfilen användes — och den gjorde sidan till
   en återvändsgränd: sett ett klipp, tillbaka till tavlan, leta nästa.
   Nu ÄR spelaren sidan:
     ① .kl-band      — ett band i stället för fyra (klocka, dela, rubrik, sort)
     ② .kl-sp        — spelaren inline, 16:9, ledande klippet laddat direkt
     ③ .kl-strip     — VÅGRÄT remsa: sidan är lika hög vid 30 klipp som vid 3
     ④ .kl-kp        — tråden permanent i högerspalten, skrivfältet överst
   Overlayen (.kl-spelare, body.kl-last) finns inte längre — det fanns inget
   kvar att lägga ovanpå.

   ── REGLER SOM GÄLLER HELA FILEN ──────────────────────────────────────────
   ① Runda avatarer = människor. Fyrkantiga ytor = klipp.
   ② Ingen glow, inga lodräta streck i listor. Djup kommer från yta och kant.
   ③ Guld = väntar · rött = beslut · lila = stab · blått = handling.
   ④ Tystnad är signalen: noll kommentarer ger INGEN siffra, ingen brådska
     visas förrän det faktiskt brådskar.
   ⑤ Inline framför modal — flaggvalet och raderingskvittot byter ut raden
     under spelaren, de öppnar aldrig en ruta ovanpå.

   ── MÄRKESUTTRYCK C: KLOCKAN ──────────────────────────────────────────────
   F-ringen sitter i mitten av en progressring som fylls medan veckan går.
   Ringen är ENDA stället veckans läge finns; siffran i högerspalten är bara
   en avläsning av samma sak. --kl-ton bärs av .kl-band och ärvs nedåt.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────── ① BANDET — ett, inte fyra ───────────────── */
.kl-band{--kl-ton:var(--accent);display:flex;align-items:center;gap:11px;
  padding:9px 12px;margin-bottom:11px}
.kl-band[data-ton="snart"]{--kl-ton:var(--gold)}
.kl-band[data-ton="klar"]{--kl-ton:var(--live)}

.kl-ring{width:40px;height:40px;flex:0 0 40px;position:relative;display:grid;place-items:center}
.kl-ring-spar{position:absolute;inset:0;width:40px;height:40px;transform:rotate(-90deg)}
.kl-bak{fill:none;stroke:var(--line2);stroke-width:4}
/* ★ INGEN transition på stroke — ringen är ett mätvärde, inte en animation.
   En ring som glider till sitt läge vid varje sidladdning läser som "något
   händer nu", och det gör det inte: veckan har bara gått en stund till. */
.kl-fyll{fill:none;stroke:var(--kl-ton);stroke-width:4;stroke-linecap:round}
.kl-marke{width:19px;height:19px;display:block;color:var(--kl-ton);line-height:0}
.kl-marke svg{width:100%;height:100%;display:block;fill:currentColor}

.kl-band-tx{min-width:0;flex:1 1 auto}
.kl-band-tx h1{font-size:14px;font-weight:700;letter-spacing:-.2px;margin:0;line-height:1.2}
.kl-band-tx h1 span{font-weight:400;color:var(--faint);font-size:11.5px;font-variant-numeric:tabular-nums}
.kl-band-tx p{font-size:11px;color:var(--dim);margin:2px 0 0;line-height:1.4}

/* Brådskan syns BARA i ton 'snart'. Tystnad är signalen. */
.kl-bradska{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;
  border-radius:11px;background:var(--gold);color:#1a1205;font-size:10.5px;font-weight:700;
  flex:0 0 auto;white-space:nowrap}
.kl-bradska i{font-size:10px}
.kl-avgjord{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;
  border-radius:11px;background:var(--live-wash);color:var(--live);font-size:10.5px;
  font-weight:700;flex:0 0 auto;white-space:nowrap}
.kl-avgjord i{font-size:10px}

.kl-band-b{height:30px;padding:0 12px;border:1px solid var(--accent);background:var(--accent);
  color:#fff;border-radius:var(--r);font:700 11.5px/1 'Roboto',sans-serif;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;flex:0 0 auto}
[data-theme="dark"] .kl-band-b{color:#06121f}
.kl-band-b i{font-size:12px}
.kl-band-b.ar-oppen{background:none;color:var(--accent-ink)}

/* ───────────────────────────── DELA ───────────────────────────── */
.kl-dela{display:flex;align-items:center;gap:8px;padding:8px 10px;margin-bottom:12px;flex-wrap:wrap}
.kl-dela>i{font-size:15px;color:var(--faint);flex:0 0 auto}
.kl-dela input[type="url"]{flex:1 1 220px;min-width:0;height:30px;border:1px solid var(--line2);
  background:var(--inset);color:var(--ink);border-radius:var(--r-sm);padding:0 10px;
  font:400 12px/1 'Roboto',sans-serif}
.kl-dela input[type="url"]:focus{outline:none;border-color:var(--accent);background:var(--card)}
.kl-dela input::placeholder{color:var(--faint)}
.kl-dela-b{height:30px;padding:0 12px;border:1px solid var(--accent);background:var(--accent);
  color:#fff;border-radius:var(--r-sm);font:700 11.5px/1 'Roboto',sans-serif;cursor:pointer;
  display:inline-flex;align-items:center;gap:5px;flex:0 0 auto}
[data-theme="dark"] .kl-dela-b{color:#06121f}
.kl-dela-b:disabled{opacity:.55;cursor:default}
.kl-dela-fel{flex:1 1 100%;font-size:11px;color:var(--danger);margin:0}


/* ═══════════════ ② SPELAREN ÄR SIDAN ═══════════════
   EN iframe, aldrig en per klipp. Ramen bär posterbilden tills man trycker
   play — då byts den mot iframen och alla brickor göms. Att byta klipp
   laddar ALDRIG om sidan: kön är veckan (TikTok-idén), och det är också det
   som gör att sidan inte växer med antalet klipp. */
.kl-sp{overflow:hidden;margin-bottom:11px}
.kl-sp-ram{position:relative;aspect-ratio:16/9;background:var(--board-bg);overflow:hidden}
.kl-sp-ram>img{display:block;width:100%;height:100%;object-fit:cover}
.kl-sp-ram iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:1}
.kl-sp-ph{position:absolute;inset:0;display:grid;place-items:center;color:var(--board-sub);
  font-size:30px;opacity:.4}

.kl-sp-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  width:62px;height:62px;border-radius:50%;border:0;background:rgba(0,0,0,.55);
  cursor:pointer;display:grid;place-items:center;padding:0;transition:background .12s}
.kl-sp-play:hover{background:rgba(0,0,0,.78)}
.kl-sp-play i{color:#fff;font-size:24px;margin-left:3px}

/* Pilarna ligger PÅ ramens kanter och har högst z-index i ramen — de måste
   nås även när iframen spelar. Piltangenterna gör samma sak. Göms i ändarna
   i stället för att vara döda: en knapp som inte gör något är värre än ingen. */
.kl-sp-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:4;
  width:34px;height:54px;border:0;background:rgba(0,0,0,.48);color:#fff;
  cursor:pointer;display:grid;place-items:center;padding:0}
.kl-sp-nav:hover{background:rgba(0,0,0,.76)}
.kl-sp-nav[hidden]{display:none}
.kl-sp-nav i{font-size:18px}
.kl-sp-nav.f{left:0;border-radius:0 var(--r) var(--r) 0}
.kl-sp-nav.n{right:0;border-radius:var(--r) 0 0 var(--r)}

.kl-sp-plat{position:absolute;top:8px;left:8px;z-index:2;display:inline-flex;align-items:center;
  gap:5px;height:19px;padding:0 7px;border-radius:3px;background:rgba(0,0,0,.72);
  color:var(--board-ink);font-size:9.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase}
.kl-sp-plat .pt{width:6px;height:6px;border-radius:50%;background:var(--kl-p,var(--board-sub))}
.kl-sp-plat[data-p="youtube"]{--kl-p:#e0245e}
.kl-sp-plat[data-p="twitch"]{--kl-p:#a879f0}
.kl-sp-plat[data-p="kick"]{--kl-p:#2d9c72}
.kl-sp-plat[data-p="tiktok"]{--kl-p:#ffffff}

/* Ledarbrickan bär MÄRKET, inte en trofé — det var hela poängen med valet. */
.kl-sp-led{position:absolute;top:8px;right:8px;z-index:2;display:inline-flex;align-items:center;
  gap:5px;height:21px;padding:0 9px;border-radius:11px;background:var(--gold);color:#1a1205;
  font-size:10px;font-weight:700}
.kl-sp-led[hidden]{display:none}
.kl-sp-led-m{width:13px;height:13px;display:block;line-height:0;color:currentColor;flex:0 0 13px}
.kl-sp-led-m svg{width:100%;height:100%;display:block;fill:currentColor}

.kl-sp-dur{position:absolute;bottom:8px;right:8px;z-index:2;background:rgba(0,0,0,.78);
  color:var(--board-ink);font-size:10px;font-weight:700;padding:1px 5px;border-radius:2px}
.kl-sp-dur[hidden]{display:none}
.kl-sp-pos{position:absolute;bottom:8px;left:8px;z-index:2;background:rgba(0,0,0,.6);
  color:var(--board-sub);font-size:10px;font-weight:700;padding:1px 6px;border-radius:2px}

/* Spelar den: allt utom pilarna försvinner. */
.kl-sp-ram.ar-igang>img,
.kl-sp-ram.ar-igang .kl-sp-ph,
.kl-sp-ram.ar-igang .kl-sp-play,
.kl-sp-ram.ar-igang .kl-sp-plat,
.kl-sp-ram.ar-igang .kl-sp-led,
.kl-sp-ram.ar-igang .kl-sp-dur,
.kl-sp-ram.ar-igang .kl-sp-pos{display:none}

/* Dolt i väntan på granskning — klippet renderas ÄNDÅ, suddat. */
.kl-sp-las{display:none;position:absolute;inset:0;z-index:5;flex-direction:column;
  align-items:center;justify-content:center;gap:4px;background:rgba(0,0,0,.6);
  text-align:center;padding:14px}
.kl-sp-ram.ar-dolt>img{filter:blur(15px) saturate(.35)}
.kl-sp-ram.ar-dolt .kl-sp-las{display:flex}
.kl-sp-ram.ar-dolt .kl-sp-play{display:none}
.kl-sp-las i{font-size:19px;color:var(--board-ink);opacity:.85}
.kl-sp-las-t{font-size:12px;font-weight:700;color:var(--board-ink)}
.kl-sp-las-s{font-size:10.5px;color:var(--board-sub)}
.kl-sp-las button{margin-top:3px;height:25px;padding:0 11px;border:1px solid rgba(255,255,255,.45);
  background:none;color:var(--board-ink);border-radius:var(--r-sm);font-size:10.5px;
  font-weight:700;cursor:pointer}
.kl-sp-las button:hover{background:rgba(255,255,255,.16)}

/* ── KREDITEN: två olika personer, och båda ska stå där ──
   Uppladdaren DELADE klippet, skaparen GJORDE det. */
.kl-sp-kr{padding:11px 13px 12px}
.kl-sp-ti{display:block;font-size:15.5px;font-weight:700;line-height:1.3;margin:0;
  color:var(--ink);text-decoration:none}
a.kl-sp-ti:hover{color:var(--accent-ink);text-decoration:underline}
.kl-sp-vem{display:flex;align-items:center;gap:8px;margin-top:8px}
.kl-sp-av{width:30px;height:30px;flex:0 0 30px;border-radius:50%;overflow:hidden;
  background:var(--accent-wash);display:grid;place-items:center;
  font:700 12px/1 'Roboto',sans-serif;color:var(--accent-ink)}
.kl-sp-av img{width:100%;height:100%;object-fit:cover;display:block}
.kl-sp-vem .kr{min-width:0;flex:1 1 auto}
.kl-sp-n1{font-size:12.5px;color:var(--dim)}
.kl-sp-n1 a{font-weight:700;color:var(--ink);text-decoration:none}
.kl-sp-n1 a:hover{color:var(--accent-ink)}
.kl-sp-n2{display:flex;align-items:center;gap:5px;margin-top:1px;font-size:11px;
  color:var(--faint);flex-wrap:wrap;min-width:0}
.kl-sp-n2 i{font-size:10px;flex:0 0 auto}
.kl-sp-n2 a{color:var(--faint);text-decoration:none;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;max-width:190px}
.kl-sp-n2 a:hover{color:var(--accent-ink);text-decoration:underline}
.kl-sp-n2[hidden]{display:none}

/* ── HANDLINGSRADEN ── */
.kl-sp-ak{display:flex;align-items:center;gap:7px;margin-top:11px;padding-top:11px;
  border-top:1px solid var(--line);flex-wrap:wrap}
.kl-sp-ak .fx{flex:1 1 auto}
.kl-rost{height:34px;padding:0 15px;border:1px solid var(--accent);background:var(--accent);
  color:#fff;border-radius:var(--r);font:700 12.5px/1 'Roboto',sans-serif;cursor:pointer;
  display:inline-flex;align-items:center;gap:7px}
[data-theme="dark"] .kl-rost{color:#06121f}
.kl-rost .mono{opacity:.85}
.kl-rost.given{background:var(--live-wash);border-color:var(--live);color:var(--live)}
.kl-rost:disabled{opacity:.6;cursor:default}
.kl-rost-las{height:34px;padding:0 13px;border:1px solid var(--line);border-radius:var(--r);
  display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--dim)}
.kl-ik{height:34px;padding:0 11px;background:none;border:1px solid var(--line);
  border-radius:var(--r);color:var(--dim);font:500 12px/1 'Roboto',sans-serif;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px}
.kl-ik:hover{border-color:var(--line2);color:var(--ink)}
.kl-ik i{font-size:13px}
.kl-ik.ar-rod{color:var(--danger)}
.kl-ik.ar-rod:hover{border-color:var(--danger)}
.kl-ik.ar-klar{border-color:var(--live);color:var(--live)}
.kl-vw{font-size:11px;color:var(--faint);font-variant-numeric:tabular-nums;flex:0 0 auto}

/* ── FLAGGFLÖDET — inline, aldrig modal (§0B p.5) ──
   Ligger under handlingsraden och byter ut den. Kvittot har Ångra i 8 s. */
.kl-flagg,.kl-kvitto{display:none}
.kl-sp[data-lage="valj"] .kl-flagg{display:flex;align-items:center;gap:5px;flex-wrap:wrap;
  margin-top:9px;padding-top:9px;border-top:1px solid var(--line)}
.kl-sp[data-lage="valj"] .kl-sp-ak{display:none}
.kl-sp[data-lage="klar"] .kl-kvitto,
.kl-sp[data-lage="borttaget"] .kl-kvitto{display:flex;align-items:center;gap:8px;
  margin-top:9px;padding:8px 10px;border-radius:var(--r);background:var(--gold);
  color:#1a1205;font-size:11.5px;font-weight:700}
.kl-sp[data-lage="borttaget"] .kl-kvitto{background:var(--danger);color:#fff}
.kl-sp[data-lage="klar"] .kl-sp-ak,
.kl-sp[data-lage="borttaget"] .kl-sp-ak,
.kl-sp[data-lage="klar"] .kl-flagg,
.kl-sp[data-lage="borttaget"] .kl-flagg{display:none}
/* Klippet tonas ned men ligger kvar tills ångerfristen gått ut — en radering
   som river bort bilden direkt går inte att ångra i praktiken. */
.kl-sp[data-lage="borttaget"] .kl-sp-ram,
.kl-sp[data-lage="borttaget"] .kl-sp-ti,
.kl-sp[data-lage="borttaget"] .kl-sp-vem{opacity:.4}
.kl-flagg-q{font-size:10.5px;font-weight:700;color:var(--ink2);margin-right:2px}
.kl-chip{height:26px;padding:0 10px;border:1px solid var(--line2);background:var(--card);
  color:var(--ink2);border-radius:var(--r-sm);font-size:11px;font-weight:500;cursor:pointer}
.kl-chip:hover{border-color:var(--danger);color:var(--danger)}
.kl-chip-rod{border-color:var(--danger);color:var(--danger);display:inline-flex;
  align-items:center;gap:5px}
.kl-chip-rod:hover{background:var(--danger);border-color:var(--danger);color:#fff}
.kl-chip-rod i{font-size:11px}
.kl-avbryt{border:0;background:none;color:var(--faint);padding:0 7px}
.kl-avbryt:hover{border:0;color:var(--ink2)}
.kl-kvitto i{font-size:12px;flex:0 0 auto}
.kl-kvitto-t{flex:1 1 auto;min-width:0}
.kl-angra{height:23px;padding:0 9px;border:1px solid rgba(0,0,0,.35);background:none;
  color:inherit;border-radius:var(--r-sm);font-size:10.5px;font-weight:700;cursor:pointer;
  flex:0 0 auto}
.kl-sp[data-lage="borttaget"] .kl-angra{border-color:rgba(255,255,255,.55)}
.kl-angra:hover{background:rgba(128,128,128,.25)}

/* ═══════════════ ③ REMSAN — vågrät, alltså höjdneutral ═══════════════
   Kenta: "om det kommer fler klipp ca 30? då blir 2 spaltat för mkt".
   Ett rutnät växer nedåt med antalet klipp; en remsa gör det inte. Sidan är
   exakt lika hög vid 30 klipp som vid 3 — bara remsan blir längre i sidled.
   Varje miniatyr bär BÅDE röster och kommentarer: social bevisning innan man
   klickar (Facebook-idén). Det är siffran som får någon att öppna tråden. */
.kl-strub{display:flex;align-items:baseline;gap:9px;margin:0 0 8px}
.kl-strub h2{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  margin:0;color:var(--ink2)}
.kl-strub .n{font-size:11px;color:var(--faint);font-variant-numeric:tabular-nums}
.kl-strub .fx{flex:1 1 auto}
.kl-strub a{font-size:11.5px;color:var(--dim);text-decoration:none}
.kl-strub a:hover{color:var(--accent-ink)}
.kl-strub a.on{color:var(--ink);font-weight:700}

.kl-strip{display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;padding-bottom:7px;
  scrollbar-width:thin;scroll-behavior:smooth}
.kl-strip::-webkit-scrollbar{height:6px}
.kl-strip::-webkit-scrollbar-track{background:transparent}
.kl-strip::-webkit-scrollbar-thumb{background:var(--line2);border-radius:3px}
.kl-sk{flex:0 0 132px;background:none;border:0;padding:0;text-align:left;display:block;cursor:pointer}
.kl-sk .bx{position:relative;display:block;aspect-ratio:16/9;border-radius:var(--r-sm);
  overflow:hidden;border:1px solid var(--line);background:var(--board-bg)}
.kl-sk img{display:block;width:100%;height:100%;object-fit:cover}
.kl-sk .ph{position:absolute;inset:0;display:grid;place-items:center;color:var(--board-sub);
  opacity:.4;font-size:15px}
.kl-sk[aria-current="true"] .bx{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.kl-sk .pl{position:absolute;top:4px;left:4px;z-index:2;width:6px;height:6px;border-radius:50%;
  background:var(--kl-p,var(--board-sub))}
.kl-sk[data-p="youtube"]{--kl-p:#e0245e}
.kl-sk[data-p="twitch"]{--kl-p:#a879f0}
.kl-sk[data-p="kick"]{--kl-p:#2d9c72}
.kl-sk[data-p="tiktok"]{--kl-p:#ffffff}
.kl-sk .du{position:absolute;bottom:3px;right:4px;z-index:2;background:rgba(0,0,0,.78);
  color:var(--board-ink);font-size:9px;font-weight:700;padding:1px 4px;border-radius:2px;
  font-variant-numeric:tabular-nums}
.kl-sk .ti{display:block;font-size:11px;font-weight:600;margin-top:5px;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink2)}
.kl-sk[aria-current="true"] .ti{color:var(--accent-ink)}
.kl-sk .so{display:flex;align-items:center;gap:9px;margin-top:2px;font-size:10px;
  color:var(--faint);font-variant-numeric:tabular-nums}
.kl-sk .so i{font-size:9px}
.kl-sk .so span{display:inline-flex;align-items:center;gap:3px}
/* GULD = din egen röst ligger här (§0B). Bara den — inte "flest röster". */
.kl-sk .so .r.min{color:var(--gold);font-weight:700}
.kl-sk.ar-dold .bx{opacity:.5}
.kl-sk.ar-borta{display:none}

/* ──────────────────────────── TOMT ──────────────────────────── */
.kl-tomt{padding:28px 16px;text-align:center}
.kl-tomt i{font-size:22px;color:var(--faint)}
.kl-tomt-t{font-size:12.5px;font-weight:700;margin-top:8px}
.kl-tomt-s{font-size:11px;color:var(--dim);margin-top:3px;max-width:320px;margin-inline:auto;line-height:1.5}

/* ─────────────────────────── ARKIVET ─────────────────────────── */
.kl-arkiv{display:grid;gap:2px;padding:4px}
.kl-ar{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:var(--r-sm);
  text-decoration:none;color:inherit}
.kl-ar:hover{background:var(--inset)}
.kl-ar-th{width:40px;height:26px;flex:0 0 40px;border-radius:3px;background:var(--board-bg);
  display:grid;place-items:center;overflow:hidden}
.kl-ar-th img{width:100%;height:100%;object-fit:cover;display:block}
.kl-ar-th i{font-size:10px;color:var(--board-sub);opacity:.5}
.kl-ar-tx{min-width:0;flex:1 1 auto}
.kl-ar-tx b{display:block;font-size:11px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kl-ar-tx em{display:block;font-style:normal;font-size:10px;color:var(--faint);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:-1px}
.kl-ar-n{font-size:10px;font-weight:700;color:var(--accent-ink);flex:0 0 auto}

/* ───────────────────── VINSTKORTET (märket som pris) ───────────────────── */
.kl-chd-m{width:12px;height:12px;display:block;line-height:0;color:var(--accent)}
.kl-chd-m svg{width:100%;height:100%;display:block;fill:currentColor}
.kl-vinstrad{display:flex;align-items:center;gap:4px;padding:10px 12px;flex-wrap:wrap}
.kl-vinst-m{width:17px;height:17px;display:block;line-height:0;color:var(--accent);flex:0 0 17px}
.kl-vinst-m svg{width:100%;height:100%;display:block;fill:currentColor}
.kl-vinst-tx{font-size:11px;font-weight:700;color:var(--ink2);margin-left:4px}

/* ═══════════════ ④ TRÅDEN I HÖGERSPALTEN ═══════════════
   Hela poängen med "det ska SYNAS att man kan kommentera": fältet ligger i
   vyn utan att man scrollar, och tråden står BREDVID videon i stället för
   under. Hos YouTube ligger kommentarerna under spelaren — men på 1200 px
   med en rail på 250 hamnar "under" under vikningen. Samma idé, rätt plats
   för den här bredden.
   Kolumnen får aldrig stå tom: finns inget klipp alls visar den veckan. */
.kl-kp{display:flex;flex-direction:column;overflow:hidden}
.kl-kp-hd{display:flex;align-items:center;gap:8px;padding:9px 12px;border-bottom:1px solid var(--line)}
.kl-kp-hd h3{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  margin:0;color:var(--ink2)}
.kl-kp-hd .n{font-size:11.5px;color:var(--dim);font-variant-numeric:tabular-nums}
.kl-kp-om{display:flex;align-items:center;gap:6px;min-width:0;padding:6px 12px;
  background:var(--inset);border-bottom:1px solid var(--line);font-size:10.5px;color:var(--faint)}
.kl-kp-om i{font-size:11px;flex:0 0 auto}
.kl-kp-om b{min-width:0;color:var(--ink2);font-weight:600;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}

/* Skrivfältet ligger ÖVERST här, inte underst: det är det som ska synas. */
.kl-kp .kl-komm-skriv{border-top:0;border-bottom:1px solid var(--line)}
.kl-kp .kl-komm-gast{border-top:0;border-bottom:1px solid var(--line)}
.kl-kp .kl-komm-fel{padding:8px 13px 0}
.kl-kp .kl-komm-lista{max-height:min(54vh,560px)}

/* ── VECKORUTAN — samma mätvärde som ringen, i siffror ── */
.kl-veck{--kl-ton:var(--accent-ink);padding:10px 12px}
.kl-veck[data-ton="snart"]{--kl-ton:var(--gold)}
.kl-veck[data-ton="klar"]{--kl-ton:var(--live)}
.kl-veck-h{font-size:11px;font-weight:700;color:var(--ink2)}
.kl-veck-t{display:flex;align-items:baseline;gap:7px;margin-top:4px}
.kl-veck-v{font-size:20px;font-weight:700;line-height:1;color:var(--kl-ton);
  font-variant-numeric:tabular-nums;letter-spacing:-.4px}
.kl-veck-s{font-size:10.5px;color:var(--dim)}
.kl-veck-hr{height:1px;background:var(--line);margin:9px 0}
.kl-veck-r{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--dim);padding:2px 0}
.kl-veck-r b{margin-left:auto;color:var(--ink2);font-weight:700;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}
.kl-veck-r b.ar-kvar{color:var(--accent-ink)}
.kl-veck-a{display:inline-block;margin-top:8px;font-size:11.5px;font-weight:500;
  color:var(--accent-ink);text-decoration:none}
.kl-veck-a:hover{text-decoration:underline}

/* GULD = väntar (§0B). Visas BARA när veckan har bidrag men för få — en
   vinst på två röster gör priset skämtsamt, och det ska sägas i förväg. */
.kl-golv{display:flex;align-items:flex-start;gap:7px;margin-top:9px;padding:8px 10px;
  border-radius:var(--r-sm);background:var(--inset);font-size:10.5px;color:var(--dim);
  line-height:1.5}
.kl-golv i{font-size:11px;color:var(--gold);flex:0 0 auto;margin-top:1px}
.kl-golv b{color:var(--gold);font-weight:700}

.kl-komm{margin-top:10px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);
  max-height:min(46vh,340px);display:flex;flex-direction:column}
.kl-komm[hidden]{display:none}

.kl-komm-lista{overflow:auto;padding:4px 0;flex:1 1 auto;min-height:0}
.kl-komm-laddar,.kl-komm-tomt{padding:16px 14px;text-align:center;
  font-size:11.5px;color:var(--faint)}

.kl-k{display:flex;gap:9px;padding:8px 13px;align-items:flex-start}
.kl-k+.kl-k{border-top:1px solid var(--line)}
.kl-k.ar-dold{opacity:.5}
/* RUNT = manniska (§0B). Initialen racker — en riktig avatar hamtas inte
   hit for att en trad pa tjugo rader inte ska kosta tjugo bildhamtningar. */
.kl-k-av{width:26px;height:26px;flex:0 0 26px;border-radius:50%;
  background:var(--accent-wash);color:var(--accent-ink);
  font:700 11px/26px 'Roboto',sans-serif;text-align:center}
.kl-k-in{min-width:0;flex:1 1 auto}
.kl-k-hd{display:flex;align-items:center;gap:7px}
.kl-k-namn{font-size:11.5px;font-weight:700;color:var(--ink);text-decoration:none;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60%}
.kl-k-namn:hover{color:var(--accent-ink)}
.kl-k-tid{font-size:10px;color:var(--faint);flex:0 0 auto}
.kl-k-dold{font-size:9.5px;font-weight:700;color:var(--danger);
  background:var(--inset);border-radius:8px;padding:1px 6px}
/* Ta bort syns forst vid hover pa raden — en papperskorg bredvid varje namn
   gor traden till en moderationsvy i stallet for ett samtal. */
.kl-k-ta{margin-left:auto;width:22px;height:22px;border:0;background:none;
  color:var(--faint);border-radius:var(--r-sm);cursor:pointer;display:grid;
  place-items:center;padding:0;opacity:0;flex:0 0 auto}
.kl-k:hover .kl-k-ta,.kl-k-ta:focus-visible{opacity:1}
.kl-k-ta:hover{background:var(--inset);color:var(--danger)}
.kl-k-ta i{font-size:11px}
.kl-k-txt{font-size:12px;color:var(--ink2);line-height:1.5;margin:2px 0 0;
  overflow-wrap:anywhere;white-space:pre-wrap}

.kl-komm-skriv{display:flex;gap:8px;align-items:flex-end;padding:9px 13px;
  border-top:1px solid var(--line);background:var(--inset);flex:0 0 auto}
.kl-komm-av{width:26px;height:26px;flex:0 0 26px;border-radius:50%;
  background:var(--accent);color:#fff;font:700 11px/26px 'Roboto',sans-serif;text-align:center}
[data-theme="dark"] .kl-komm-av{color:#06121f}
.kl-komm-skriv textarea{flex:1 1 auto;min-width:0;resize:none;overflow:auto;
  min-height:30px;max-height:132px;border:1px solid var(--line2);background:var(--card);
  color:var(--ink);border-radius:var(--r-sm);padding:7px 10px;
  font:400 12px/1.45 'Roboto',sans-serif}
.kl-komm-skriv textarea:focus{outline:none;border-color:var(--accent)}
.kl-komm-skriv textarea::placeholder{color:var(--faint)}
.kl-komm-skicka{height:30px;padding:0 12px;border:1px solid var(--accent);
  background:var(--accent);color:#fff;border-radius:var(--r-sm);cursor:pointer;
  display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;
  font:700 11.5px/1 'Roboto',sans-serif}
[data-theme="dark"] .kl-komm-skicka{color:#06121f}
.kl-komm-skicka:disabled{opacity:.55;cursor:default}
.kl-komm-skicka i{font-size:12px}
.kl-komm-fel{margin:0;padding:0 13px 9px;font-size:11px;color:var(--danger);
  background:var(--inset)}
.kl-komm-gast{padding:12px 13px;border-top:1px solid var(--line);background:var(--inset);
  display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--dim)}
.kl-komm-gast i{font-size:12px;color:var(--faint)}
.kl-komm-gast a{color:var(--accent-ink);font-weight:700}

/* ═══════════════════════════════════════════════════════════════════════════
   PROFILENS FLIK "KLIPP"  (prefix pk-)
   Bor HÄR och inte i pulse-profil.css därför att reglerna hör till klippen,
   inte till profilen — en radering av klippsidan ska ta med sig allt.
   Därför är filen gatad på BÅDE 'klipp' och 'profile' i PulseAssets.php.

   ★ Vinstraden renderas bara för den som faktiskt vunnit (se view.php).
     Noll vinster = ingen rad. Det är vad som gör märket värt något.
   ═══════════════════════════════════════════════════════════════════════════ */
.pk-card{overflow:hidden}

.pk-vinstrad{display:flex;align-items:center;gap:8px;padding:9px 13px;
  border-bottom:1px solid var(--line);background:var(--inset)}
.pk-vm{width:17px;height:17px;flex:0 0 17px;display:block;line-height:0;color:var(--accent)}
.pk-vm svg{width:100%;height:100%;display:block;fill:currentColor}
.pk-vinst-t{font-size:11.5px;font-weight:700;color:var(--ink)}
.pk-vinst-v{font-size:10.5px;color:var(--dim);margin-left:auto}

.pk-rut{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:12px}
.pk-kort{display:block;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:var(--card);text-decoration:none;color:inherit;min-width:0}
.pk-kort:hover{border-color:var(--line2)}
.pk-bild{position:relative;display:block;aspect-ratio:16/9;background:var(--board-bg);
  overflow:hidden;display:grid;place-items:center}
.pk-bild img{width:100%;height:100%;object-fit:cover;display:block}
.pk-ph{font-size:20px;color:var(--board-sub);opacity:.45}
.pk-vann{position:absolute;left:6px;top:6px;height:20px;padding:0 8px 0 5px;border-radius:10px;
  display:inline-flex;align-items:center;gap:5px;background:var(--accent);color:#fff;
  font:700 10px/1 'Roboto',sans-serif}
[data-theme="dark"] .pk-vann{color:#06121f}
.pk-vm-s{width:13px;height:13px;flex:0 0 13px;display:block;line-height:0;color:currentColor}
.pk-vm-s svg{width:100%;height:100%;display:block;fill:currentColor}
.pk-tx{display:block;padding:8px 10px}
.pk-tx b{display:block;font-size:11px;font-weight:700;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pk-tx em{display:block;font-style:normal;font-size:10px;color:var(--faint);margin-top:3px}

@media (max-width:820px){
  .pk-rut{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:520px){
  .pk-rut{grid-template-columns:1fr}
}


/* ═══════════════════════ MOBIL ═══════════════════════
   Remsan behåller sin idé på liten skärm: den rullar redan i sidled, så den
   behöver ingen egen brytpunkt utöver smalare kort. Tråden slutar vara en
   egen kolumn och lägger sig under spelaren — vilket är precis YouTubes
   ordning, och den stämmer när bredden är en telefons. */
@media (max-width:1000px){
  .kl-sk{flex:0 0 124px}
}
@media (max-width:820px){
  .kl-band{flex-wrap:wrap;gap:9px}
  .kl-band-tx{flex:1 1 140px}
  .kl-bradska,.kl-avgjord{order:9;flex:1 1 100%;justify-content:center}
  .kl-band-b{flex:1 1 100%;justify-content:center;order:10}
  .kl-sp-kr{padding:10px 11px 11px}
  .kl-sp-ti{font-size:14.5px}
  .kl-sp-ak{gap:6px}
  .kl-rost{flex:1 1 auto;justify-content:center}
  .kl-sk{flex:0 0 118px}
  .kl-kp .kl-komm-lista{max-height:none}
  .kl-strub{flex-wrap:wrap}
}