/* ═══════════════════════════════════════════════════════════════════════════
   FORRE.NU — KLIPPSIDAN, A · SCENEN                  (css/pulse-klipp.css)
   Byggd om 2026-09-21. Facit: design-proposals/klipp-biblioteket-2026-09-21.html,
   förslag "A · Scenen" (Kenta: "bygg A", loggorna i färg).
   Förra versionen (spelaren, 2026-09-20) ligger i
   TEMP/klipp-A-backup-20260921/pulse-klipp.css.

   ── SIDANS DELAR, UPPIFRÅN ────────────────────────────────────────────────
     ① .kl-band     klockan, veckan, tiden, Dela. Gammal vecka: vad som HÄNDE.
     ② .kl-sp       scenen + kortet under: titel, kanalbricka, Rösta, Dela
     ③ .kl-ko       kön — VÅGRÄT, alltså höjdneutral vid 5 och 1 000 klipp
     ④ .kl-veckor   tidigare veckor som rutor — varje vecka är en egen sida
     ⑤ .kl-panel    tråden BREDVID klippet, klistrad; ett ark på telefon

   ── REGLER SOM GÄLLER HELA FILEN ──────────────────────────────────────────
   ① ALLT bär prefixet kl-. Klassen .ti ÄR TABLERS (tabler-forre.min.css ger
     den font-family tabler-icons) — köns titlar ritades i reservtypsnittet
     fram till i dag. Ett kort klassnamn utan prefix är en krock som väntar.
   ② Runda avatarer = människor. Fyrkantiga ytor = klipp och plattformar.
   ③ EN hjälte: Rösta, som keycap (samma hantverk som cr3-go på hubben) i
     sajtens primärfärg — rösten är FORRE:s handling, inte plattformens.
     Allt annat i raden är ramlösa verb, som väggens Gilla · Kommentera.
   ④ Färg bara när den betyder något: blått = handling, grönt = din röst /
     live, guld = ledare/vinnare, plattformsfärg = plattformen (Kentas val).
   ⑤ Ingen glow, inga färgade streck. Djup från yta, kant och skugga.
   ⑥ Ingen svart yta i ljust läge: bakom posterbilden ligger --inset.
     Chippen PÅ bilden är mörk glasyta — de ligger på ett foto, inte på sidan.
   ⑦ Inline framför modal: flaggvalet och kvittot byter ut raden under
     scenen. Arket på telefon är inget modal — det är panelen, flyttad.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── TOKENS FÖR SIDAN ─────────────────────────────────────────────────────
   Plattformsfärgerna är DE SOM REDAN FINNS på sajten — Kick = .sb-kickic
   (pulse-topdeck.css:854), Twitch/YouTube = streamkorten (cr3) — samlade
   här en gång i stället för att skrivas ut per regel. "-bild" är samma
   plattform på mörk glasyta, där originaltonen blir för mörk att läsa.
   TikTok har ingen färg: loggan är svart/vit, alltså temats bläck. */
.klipphub{
  --kl-tw:#9146ff; --kl-yt:#ff0000; --kl-tt:var(--ink);
  --kl-kick:#53fc18; --kl-kick-ink:#0b0e11;
  --kl-tw-bild:#a970ff; --kl-yt-bild:#ff3b3b;
  --kl-glas:rgba(5,7,10,.62); --kl-glas-kant:rgba(255,255,255,.14);
  --kl-panel-h:min(760px, calc(100vh - 124px));
}
/* [hidden] MÅSTE vinna över varje display-regel nedan — utan den låg
   delafältet synligt för alla en måndagsmorgon (2026-09-20). */
.klipphub [hidden]{display:none!important}

/* ── PLATTFORMSLOGGAN ── */
.kl-lg{display:inline-block;line-height:1;flex:0 0 auto;font-style:normal}
.kl-lg-youtube{color:var(--kl-yt)}
.kl-lg-twitch{color:var(--kl-tw)}
.kl-lg-tiktok{color:var(--kl-tt)}
/* Kick saknar glyf i Bootstrap Icons — sajtens egen gröna K-bricka. */
.kl-lg-kick{display:inline-grid;place-items:center;width:1.15em;height:1.15em;border-radius:3px;
  background:var(--kl-kick);color:var(--kl-kick-ink);font-family:Arial,sans-serif;font-size:.82em;
  font-weight:800;line-height:1}
.kl-stage .kl-lg-youtube,.kl-pfc .kl-lg-youtube{color:var(--kl-yt-bild)}
.kl-stage .kl-lg-twitch,.kl-pfc .kl-lg-twitch{color:var(--kl-tw-bild)}
.kl-stage .kl-lg-tiktok,.kl-pfc .kl-lg-tiktok{color:#fff}

/* ── AVATARER ── */
.kl-av{border-radius:50%;object-fit:cover;flex:0 0 auto;display:inline-block;background:var(--inset);vertical-align:middle}
.kl-ini{display:inline-flex;align-items:center;justify-content:center;background:var(--accent-wash);
  color:var(--accent-ink);font-weight:800;line-height:1}
.kl-av18{width:18px;height:18px;font-size:8.5px}
.kl-av22{width:22px;height:22px;font-size:9.5px}
.kl-av24{width:24px;height:24px;font-size:10px}
.kl-av30{width:30px;height:30px;font-size:12px}
.kl-av32{width:32px;height:32px;font-size:13px}

.kl-n{font-weight:500;color:var(--dim)}
.kl-dot{color:var(--faint)}
.kl-dim{color:var(--dim)}
.kl-ingen{font-size:12px;color:var(--dim);font-weight:500}
.kl-vinnchip{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:800;color:var(--gold);white-space:nowrap}
.kl-vinn-m,.kl-led-m,.kl-rl-m{display:block;line-height:0;flex:0 0 auto}
.kl-vinn-m svg,.kl-led-m svg,.kl-rl-m svg,.kl-marke svg{width:100%;height:100%;display:block;fill:currentColor}
.kl-vinn-m{width:11px;height:11px}
.kl-led-m{width:12px;height:12px}
.kl-rl-m{width:14px;height:14px}

/* ═══════════════ ① BANDET — klockan (märkesuttryck C, godkänt) ═══════════════ */
.kl-band{--kl-ton:var(--accent);display:flex;align-items:center;gap:12px;padding:10px 14px}
.kl-band[data-ton="snart"]{--kl-ton:var(--gold)}
.kl-band[data-ton="klar"]{--kl-ton:var(--live)}
.kl-band[data-ton="arkiv"]{--kl-ton:var(--dim)}
.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. */
.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-band-tx{min-width:0;flex:1 1 auto}
.kl-band-tx h1{font-size:17px;font-weight:800;letter-spacing:-.01em;line-height:1.2;margin:0;color:var(--ink)}
.kl-band-tx h1 span{font-size:13px;font-weight:500;color:var(--dim);margin-left:4px;letter-spacing:0}
.kl-band-tx p{font-size:12.5px;color:var(--dim);margin:2px 0 0;line-height:1.4}
.kl-band-tx p b{color:var(--ink2);font-weight:700}
.kl-band-tx p .kl-guld{color:var(--gold)}
.kl-tid{flex:0 0 auto;font-size:20px;font-weight:800;letter-spacing:-.02em;line-height:1;text-align:right;
  font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap}
.kl-tid small{display:block;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--dim);margin-top:4px}
.kl-tid.ar-snart{color:var(--gold)}
.kl-tid.ar-klar{color:var(--live);font-size:15px}
.kl-band-b{flex:0 0 auto;white-space:nowrap}
.kl-band-b i{font-size:12px}

/* ── DELA ── en knapp i bandet fäller ut fältet, inget tomt band per besök */
.kl-dela{display:flex;align-items:center;gap:8px;padding:8px 10px;flex-wrap:wrap}
.kl-dela>i{font-size:16px;color:var(--dim);flex:0 0 auto}
.kl-dela input[type="url"]{flex:1 1 220px;min-width:0;height:34px;border:1px solid var(--line2);background:var(--inset);
  color:var(--ink);border-radius:var(--r-sm);padding:0 10px;font:inherit;font-size:13px}
.kl-dela input[type="url"]:focus{outline:none;border-color:var(--accent);background:var(--card)}
.kl-dela input::placeholder{color:var(--dim)}
.kl-dela-b:disabled{opacity:.55;cursor:default}
.kl-dela-fel{flex:1 1 100%;font-size:12px;color:var(--danger);margin:0}

/* ── TOMT — aldrig en tom låda: motivation + väg framåt ── */
.kl-tomt{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:34px 22px}
.kl-tomt-ik{width:48px;height:48px;border-radius:50%;background:var(--accent-wash);color:var(--accent-ink);
  display:grid;place-items:center;font-size:21px;margin-bottom:4px}
.kl-tomt b{font-size:15px;font-weight:800;color:var(--ink)}
.kl-tomt span{font-size:13px;color:var(--dim);max-width:42ch;line-height:1.5}
.kl-tomt .btn{margin-top:8px}

/* ═══════════════ ② SCENEN — cr3:s broadcastspråk ═══════════════
   EN iframe, aldrig en per klipp. Ramen bär posterbilden tills man trycker
   play; då byts den mot iframen och brickorna göms. */
.kl-sp{overflow:hidden}
.kl-scen{position:relative;aspect-ratio:16/9;background:var(--inset);overflow:hidden}
.kl-scen>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.kl-scen iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:3}
.kl-scen-ph{position:absolute;inset:0;display:grid;place-items:center;font-size:44px;color:var(--dim)}
.kl-stage{position:absolute;top:12px;left:12px;z-index:2;display:inline-flex;align-items:center;gap:7px;height:24px;
  padding:0 9px;border-radius:3px;background:var(--kl-glas);box-shadow:inset 0 0 0 1px var(--kl-glas-kant);color:#fff;
  font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;pointer-events:none}
.kl-stage .kl-lg{font-size:14px;letter-spacing:0}
.kl-led{position:absolute;top:12px;right:12px;z-index:2;display:inline-flex;align-items:center;gap:6px;height:24px;
  padding:0 9px;border-radius:3px;background:var(--gold-r);color:#1a1205;font-size:11px;font-weight:800;pointer-events:none}
.kl-led.ar-etta{background:var(--kl-glas);box-shadow:inset 0 0 0 1px var(--kl-glas-kant);color:#fff}
.kl-led.ar-etta .kl-led-m{color:var(--gold-r)}
.kl-dur,.kl-pos{position:absolute;bottom:12px;z-index:2;display:inline-flex;align-items:center;height:22px;padding:0 7px;
  border-radius:3px;background:var(--kl-glas);box-shadow:inset 0 0 0 1px var(--kl-glas-kant);color:#fff;font-size:11px;
  font-weight:800;font-variant-numeric:tabular-nums;pointer-events:none}
.kl-dur{right:12px}
.kl-pos{left:12px}
.kl-play{position:absolute;left:50%;top:50%;width:68px;height:68px;margin:-34px 0 0 -34px;z-index:2;border-radius:50%;
  background:rgba(5,7,10,.55);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4),0 8px 24px rgba(0,0,0,.35);
  display:grid;place-items:center;color:#fff;font-size:30px;transition:transform .15s ease-out,background .12s ease-out}
.kl-play i{margin-left:4px;line-height:1}
.kl-play:hover{transform:scale(1.06);background:rgba(5,7,10,.72)}
.kl-play:focus-visible,.kl-pil:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* Pilarna ligger PÅ ramen med högst z-index — nåbara även när iframen spelar. */
.kl-pil{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:38px;height:60px;background:rgba(5,7,10,.5);
  color:#fff;display:grid;place-items:center;font-size:18px;transition:background .12s ease-out}
.kl-pil:hover{background:rgba(5,7,10,.75)}
.kl-pil.f{left:0;border-radius:0 var(--r) var(--r) 0}
.kl-pil.n{right:0;border-radius:var(--r) 0 0 var(--r)}
.kl-scen.ar-igang .kl-stage,.kl-scen.ar-igang .kl-led,.kl-scen.ar-igang .kl-dur,
.kl-scen.ar-igang .kl-pos,.kl-scen.ar-igang .kl-play{display:none}
/* Dolt i väntan på granskning (3+ oberoende flaggor) */
.kl-las{position:absolute;inset:0;z-index:5;display:none;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;text-align:center;background:var(--inset);color:var(--ink2);padding:20px}
.kl-scen.ar-dolt .kl-las{display:flex}
.kl-scen.ar-dolt .kl-play{display:none}
.kl-las>i{font-size:26px;color:var(--dim)}
.kl-las b{font-size:14px;color:var(--ink)}
.kl-las span{font-size:12px;color:var(--dim)}
.kl-las .btn{margin-top:6px}

/* ── KORTET UNDER SCENEN ── */
.kl-sp-in{padding:13px 16px 12px}
.kl-sp-ti{font-size:18px;font-weight:800;letter-spacing:-.015em;line-height:1.28;margin:0;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.kl-sp-ti a{color:var(--ink)}
.kl-sp-ti a[href]:hover{color:var(--accent-ink)}
/* Kanalen GJORDE klippet, medlemmen ÄGER kanalen, uppladdaren DELADE det. */
.kl-sp-kr{display:flex;align-items:center;gap:6px 14px;flex-wrap:wrap;margin-top:9px;font-size:12.5px;color:var(--dim);min-width:0;min-height:28px}
/* Kanalbrickan är en DÖRR till kanalen — mönstret är .wpr-p från väggen. */
.kl-kchip{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 10px 0 9px;border:1px solid var(--line2);
  border-radius:var(--r-sm);background:var(--card);color:var(--ink);font-size:12.5px;font-weight:700;white-space:nowrap;
  max-width:100%;min-width:0;transition:background .12s ease-out,border-color .12s ease-out}
.kl-kchip .kl-lg{font-size:14px}
.kl-kchip-n{overflow:hidden;text-overflow:ellipsis;min-width:0}
.kl-kchip-ut{font-size:11px;color:var(--dim)}
a.kl-kchip:hover{background:var(--inset);border-color:color-mix(in srgb,var(--accent) 34%,var(--line2))}
a.kl-kchip:hover .kl-kchip-ut{color:var(--accent-ink)}
.kl-medlem{display:inline-flex;align-items:center;gap:6px;color:var(--ink2);white-space:nowrap;min-width:0}
.kl-medlem b{color:var(--ink);font-weight:700}
.kl-medlem:hover b{color:var(--accent-ink)}
.kl-delat{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;min-width:0}
.kl-delat .kl-live{margin-left:-1px}
.kl-delat a{color:var(--ink);font-weight:700}
.kl-delat a:hover{color:var(--accent-ink)}
.kl-live{display:inline-flex;align-items:center;height:17px;padding:0 6px;border-radius:3px;background:var(--live-wash);
  color:var(--live);font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}

/* ── HANDLINGSRADEN ── */
.kl-sp-ak{display:flex;align-items:center;gap:4px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.kl-rostbox{display:inline-flex;margin-right:6px;flex:0 0 auto}
/* Röstknappen: keycap — hård underkant, ljuskant överst, sjunker vid tryck.
   Räknaren i ett eget fack: knappen och talet är samma sak. */
.kl-rost{display:inline-flex;align-items:stretch;height:36px;border-radius:var(--r);overflow:hidden;padding:0;
  background:color-mix(in srgb,var(--accent) 80%,#000);color:#fff;font-size:13px;font-weight:800;
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.18);
  transition:transform .08s,box-shadow .12s,background .12s}
[data-theme="dark"] .kl-rost{background:var(--accent);color:#06121f}
.kl-rost-l{display:inline-flex;align-items:center;gap:7px;padding:0 13px}
.kl-rost-l i{font-size:15px}
.kl-rost-n{display:inline-flex;align-items:center;padding:0 12px;background:rgba(0,0,0,.16);font-variant-numeric:tabular-nums}
.kl-rost:hover{background:color-mix(in srgb,var(--accent) 68%,#000)}
[data-theme="dark"] .kl-rost:hover{background:color-mix(in srgb,var(--accent) 86%,#fff)}
.kl-rost:active{transform:translateY(1px);box-shadow:inset 0 -1px 0 rgba(0,0,0,.3)}
.kl-rost:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.kl-rost.ar-given,[data-theme="dark"] .kl-rost.ar-given{background:var(--live-wash);color:var(--live);cursor:default;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--live) 55%,transparent)}
.kl-rost.ar-given .kl-rost-n{background:color-mix(in srgb,var(--live) 14%,transparent)}
.kl-rost.ar-given:active{transform:none}
.kl-rost:disabled{opacity:.7}
/* Låst: veckan avgjord eller utloggad. Samma form, ingen fyllning — talet är historia nu. */
.kl-rostlas{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 12px;border-radius:var(--r);
  background:var(--inset);border:1px solid var(--line);color:var(--ink2);font-size:13px;font-weight:700;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.kl-rostlas.ar-vann{background:color-mix(in srgb,var(--gold-r) 12%,var(--card));
  border-color:color-mix(in srgb,var(--gold-r) 40%,var(--line));color:var(--gold)}
/* Ramlösa verb — väggens Gilla · Kommentera · Dela */
.kl-akt{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 11px;border-radius:var(--r);color:var(--ink2);
  font-size:13px;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums;flex:0 0 auto;
  transition:background .12s ease-out,color .12s ease-out}
.kl-akt i{font-size:15px}
.kl-akt:hover{background:var(--inset);color:var(--ink)}
.kl-akt.ar-klar,.kl-akt.ar-klar:hover{color:var(--live)}
.kl-akt-n{display:none}
.kl-fx{flex:1 1 auto}
.kl-vw{font-size:12px;color:var(--dim);font-variant-numeric:tabular-nums;margin-right:6px;white-space:nowrap;min-width:0;
  overflow:hidden;text-overflow:ellipsis}
.kl-mer{width:36px;height:36px;flex:0 0 36px}

/* ── FLAGGVALET OCH KVITTOT — inline, aldrig modal ── */
.kl-flagg,.kl-kvitto{display:none;align-items:center;gap:6px;flex-wrap:wrap;margin-top:10px;padding:8px 10px;
  border-radius:var(--r);background:var(--inset);border:1px solid var(--line)}
.kl-sp[data-lage="valj"] .kl-flagg{display:flex}
.kl-sp[data-lage="klar"] .kl-kvitto,.kl-sp[data-lage="borttaget"] .kl-kvitto{display:flex}
.kl-flagg-q{font-size:12px;font-weight:700;color:var(--ink2);margin-right:4px}
.kl-chip{height:28px;padding:0 11px;border-radius:14px;border:1px solid var(--line2);background:var(--card);font-size:12px;
  font-weight:700;color:var(--ink2);display:inline-flex;align-items:center;gap:6px}
.kl-chip:hover{border-color:var(--accent);color:var(--accent-ink)}
.kl-chip.ar-rod{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 40%,var(--line2))}
.kl-chip.ar-rod:hover{background:color-mix(in srgb,var(--danger) 8%,var(--card));color:var(--danger)}
.kl-chip.ar-avbryt{margin-left:auto;border-color:transparent;background:none}
.kl-kvitto>i{color:var(--dim)}
.kl-kvitto-t{font-size:12.5px;color:var(--ink2);flex:1 1 auto}
.kl-angra{height:28px;padding:0 11px;border-radius:14px;background:var(--card);border:1px solid var(--line2);
  font-size:12px;font-weight:700;color:var(--accent-ink);font-variant-numeric:tabular-nums}
.kl-gastrad{display:flex;align-items:center;gap:9px;margin-top:10px;padding:9px 12px;border-radius:var(--r);
  background:var(--inset);border:1px solid var(--line);font-size:12.5px;color:var(--ink2)}
.kl-gastrad>i{color:var(--accent-ink);font-size:15px}
.kl-gastrad a{font-weight:700;color:var(--accent-ink)}

/* Telefonens dörr till arket — syns bara under 900 px. */
.kl-teaser{display:none}

/* ═══════════════ ③ KÖN — vågrät, alltså höjdneutral ═══════════════ */
.kl-ko{overflow:hidden}
.kl-ko .chd,.kl-veckor .chd{gap:10px}
/* Segmenterad väljare — fyllnaden bär läget. Tystare än sajtens .seg med
   flit: Rösta är sidans enda blå fyllning. */
.kl-seg{display:inline-flex;background:var(--inset);border:1px solid var(--line);border-radius:var(--r);padding:2px;gap:2px;flex:0 0 auto}
.kl-seg button{height:26px;padding:0 9px;border-radius:var(--r-sm);font-size:12px;font-weight:600;color:var(--dim);
  display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.kl-seg button:hover{color:var(--ink)}
.kl-seg button[aria-pressed="true"]{background:var(--card);color:var(--ink);font-weight:700;
  box-shadow:0 1px 2px rgba(16,24,40,.08),0 0 0 1px var(--line)}
.kl-seg-n{font-size:11px;font-weight:700;color:var(--accent-ink);font-variant-numeric:tabular-nums}
.kl-seg-n:empty{display:none}
/* scroll-padding: utan den ligger snäppunkten i kantlinjen, och första kortet
   klistrades mot kortets kant så fort raden rullats. */
.kl-ko-rad{display:flex;gap:12px;overflow-x:auto;padding:12px 14px;scroll-snap-type:x proximity;scroll-padding-inline:14px;scrollbar-width:thin}
.kl-k{flex:0 0 176px;min-width:0;text-align:left;scroll-snap-align:start;display:block;color:inherit}
.kl-k:focus-visible{outline:none}
.kl-k:focus-visible .kl-th{box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--line2)}
.kl-th{position:relative;display:block;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:var(--inset)}
.kl-th>img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.kl-th-ph{position:absolute;inset:0;display:grid;place-items:center;font-size:24px;color:var(--dim)}
.kl-k:hover .kl-th>img{transform:scale(1.03)}
.kl-k[aria-current="true"] .kl-th{box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--accent)}
.kl-k.ar-dold .kl-th>img{filter:grayscale(1) blur(2px);opacity:.6}
.kl-pfc,.kl-durc,.kl-posc{position:absolute;display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 6px;border-radius:3px;
  background:var(--kl-glas);box-shadow:inset 0 0 0 1px var(--kl-glas-kant);color:#fff;font-size:10.5px;font-weight:800;
  font-variant-numeric:tabular-nums;pointer-events:none}
.kl-pfc{top:6px;left:6px;padding:0 5px}
.kl-pfc .kl-lg{font-size:12px}
.kl-durc{bottom:6px;right:6px}
.kl-posc{bottom:6px;left:6px}
.kl-ledc{position:absolute;top:6px;right:6px;display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 7px;border-radius:3px;
  background:var(--gold-r);color:#1a1205;font-size:10.5px;font-weight:800;pointer-events:none;white-space:nowrap}
.kl-ledc .kl-led-m{width:11px;height:11px}
.kl-spela{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transition:opacity .12s ease-out;background:rgba(5,7,10,.18)}
.kl-spela i{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--kl-glas);color:#fff;font-size:20px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.kl-k:hover .kl-spela,.kl-k:focus-visible .kl-spela{opacity:1}
.kl-k[aria-current="true"] .kl-spela{display:none}
.kl-k-ti{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12.5px;font-weight:700;
  line-height:1.35;margin-top:8px;min-height:34px;color:var(--ink)}
.kl-k[aria-current="true"] .kl-k-ti{color:var(--accent-ink)}
/* Blå prick = osett (brickans färgkarta: blått = något att titta på). */
.kl-ny{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);margin-right:6px;vertical-align:1px}
.kl-kanal{display:flex;align-items:center;gap:6px;margin-top:4px;font-size:11.5px;font-weight:600;color:var(--ink2);min-width:0}
.kl-kanal .kl-lg{font-size:12px}
.kl-kanal-n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.kl-k-so{display:flex;align-items:center;gap:11px;margin-top:4px;font-size:11.5px;color:var(--dim);font-variant-numeric:tabular-nums}
.kl-k-so i{font-size:11px;margin-right:4px}
.kl-k-so .ar-min{color:var(--live);font-weight:700}

/* ═══════════════ ④ TIDIGARE VECKOR — varje vecka är en sida ═══════════════ */
/* scroll-margin: topbaren är 106 px och fast — utan marginalen hamnar rubriken under den vid #veckor. */
.kl-veckor{scroll-margin-top:120px}
.kl-vg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 12px;padding:12px 14px 14px}
.kl-v{display:block;min-width:0;color:inherit}
.kl-v-extra{display:none}
.kl-veckor.ar-alla .kl-v-extra{display:block}
.kl-v:hover .kl-v-th{box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--line2)}
.kl-v[aria-current] .kl-v-th{box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--accent)}
.kl-v:hover .kl-v-th>img{transform:scale(1.03)}
.kl-v-r{display:flex;align-items:baseline;gap:6px;margin-top:7px}
.kl-v-r b{font-size:15px;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
.kl-v-r span{font-size:11.5px;color:var(--dim);white-space:nowrap}
.kl-v[aria-current] .kl-v-r b{color:var(--accent-ink)}
.kl-v-vn{display:flex;align-items:center;gap:6px;margin-top:3px;font-size:12px;font-weight:600;color:var(--ink2);min-width:0;min-height:18px}
.kl-v-namn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.kl-v-vn .kl-vinnchip{margin-left:auto}
.kl-lnk{font-size:12px;font-weight:700;color:var(--accent-ink);white-space:nowrap}
.kl-lnk:hover{text-decoration:underline;text-underline-offset:2px}
.kl-mina{display:flex;align-items:center;gap:8px;padding:10px 14px;border-top:1px solid var(--line);font-size:12.5px;color:var(--ink2);
  background:color-mix(in srgb,var(--gold-r) 7%,var(--card))}
.kl-mina .kl-vinn-m{color:var(--gold);width:14px;height:14px}

/* ═══════════════ ⑤ PANELEN — klippets andra halva ═══════════════
   Klistrad mot skärmen (railen är redan sticky), rullar inuti sig själv,
   skrivfältet fast i botten. Höjden följer skärmen men stannar på 760 px,
   så en hög skärm inte får ett kommentarsfält som är längre än klippet. */
.kl-panel{display:flex;flex-direction:column;height:var(--kl-panel-h);min-height:440px;overflow:hidden}
.kl-panel:focus{outline:none}
.kl-panel .chd{flex:0 0 auto;gap:8px;justify-content:flex-start}
.kl-panel .chd .slabel{flex:1 1 auto;min-width:0}
.kl-grepp,.kl-ark-x{display:none}
.kl-om{display:flex;align-items:center;gap:10px;padding:10px 13px;border-bottom:1px solid var(--line);min-width:0;flex:0 0 auto}
.kl-om-th{width:56px;flex:0 0 56px;border-radius:3px}
.kl-om-th img{width:100%;height:100%;object-fit:cover;display:block}
.kl-om-t{min-width:0;flex:1 1 auto}
.kl-om-t b{display:block;font-size:12.5px;font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kl-om-t span{display:block;font-size:11.5px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kl-lista{flex:1 1 auto;overflow-y:auto;padding:14px 14px 10px;min-height:0;overscroll-behavior:contain;scrollbar-width:thin}
.kl-in{flex:0 0 auto;border-top:1px solid var(--line);padding:10px 12px;background:var(--card)}

/* Sorteringen — en meny, inte två flikar: den behövs sällan och ska inte
   ta plats i en rubrik som är 320 px bred. */
.kl-sortm{position:relative;flex:0 0 auto}
.kl-sortm>summary{list-style:none;display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 8px;border-radius:var(--r-sm);
  font-size:12px;font-weight:700;color:var(--accent-ink);cursor:pointer;user-select:none;white-space:nowrap}
.kl-sortm>summary::-webkit-details-marker{display:none}
.kl-sortm>summary i{font-size:10px}
.kl-sortm>summary:hover{background:var(--accent-wash)}
.kl-sortm-l{position:absolute;right:0;top:calc(100% + 4px);z-index:20;display:flex;flex-direction:column;min-width:150px;padding:4px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 8px 24px -8px rgba(16,24,40,.28)}
.kl-sortm-l button{height:32px;padding:0 10px;border-radius:var(--r-sm);text-align:left;font-size:12.5px;font-weight:600;color:var(--ink2)}
.kl-sortm-l button:hover{background:var(--inset);color:var(--ink)}
.kl-sortm-l button[aria-checked="true"]{color:var(--accent-ink);font-weight:700}

/* ── KOMMENTARERNA — platt, som TikTok: namn, tid, text, verb ── */
.kl-trad+.kl-trad{margin-top:16px}
.kl-km{display:flex;gap:10px;min-width:0;border-radius:var(--r-sm)}
.kl-km-avl{flex:0 0 auto;line-height:0}
.kl-km-kr{flex:1 1 auto;min-width:0}
.kl-km-hd{display:flex;align-items:center;gap:6px;flex-wrap:wrap;line-height:1.3;min-width:0}
.kl-km-n{font-size:13px;font-weight:700;color:var(--ink)}
.kl-km-n:hover{color:var(--accent-ink)}
.kl-km-t{font-size:12px;color:var(--dim)}
/* Etiketterna: borttagen (rött) och dold (guld = väntar på stab, brickans
   färgkarta). Syns bara för stab och skribenten — alla andra ser inte raden. */
.kl-km-etk{font-size:10.5px;font-weight:700;color:var(--danger);text-transform:uppercase;letter-spacing:.06em}
.kl-km-etk.ar-dold{color:var(--gold)}
/* Flaggorna — bara stab ser antalet. Det är deras underlag för Dölj. */
.kl-km-flagc{display:inline-flex;align-items:center;gap:4px;height:18px;padding:0 6px;border-radius:9px;
  background:color-mix(in srgb,var(--danger) 12%,transparent);color:var(--danger);font-size:10.5px;font-weight:800;
  font-variant-numeric:tabular-nums}
.kl-km-flagc i{font-size:9.5px}
.kl-km-tx{font-size:13.5px;line-height:1.5;color:var(--ink);margin:2px 0 0;overflow-wrap:anywhere;white-space:pre-line}
.kl-km-till{color:var(--accent-ink);font-weight:700}
.kl-km-ak{display:flex;align-items:center;gap:2px;margin:3px 0 0 -8px}
.kl-km-g,.kl-km-b{height:26px;padding:0 8px;border-radius:13px;color:var(--dim);font-size:12px;font-weight:700;
  display:inline-flex;align-items:center;gap:5px;font-variant-numeric:tabular-nums}
button.kl-km-g:hover,.kl-km-b:hover{background:var(--inset);color:var(--ink)}
.kl-km-g.ar-on,button.kl-km-g.ar-on:hover{color:var(--danger)}
.kl-km-g.ar-las{cursor:default}
.kl-km-g span:empty{display:none}
.kl-km.ar-borttagen{opacity:.6}
/* Dold: färgen ligger på HELA ytan (facit §0.5), aldrig som en kantlinje. */
.kl-km.ar-doljd{background:color-mix(in srgb,var(--gold-r) 8%,transparent);border-radius:var(--r);padding:7px 8px;margin:-7px -8px}
.kl-km.ar-tar-bort{opacity:.4;pointer-events:none}
.kl-km.ar-ny{animation:klNy 1.8s ease-out}
@keyframes klNy{from{background:var(--accent-wash)}to{background:transparent}}
.kl-svar-l{margin:10px 0 0 42px;display:flex;flex-direction:column;gap:12px}
.kl-km-svar .kl-km-tx{font-size:13px}
/* ⋯ på en kommentar och raden den fäller ut — inline, aldrig en meny som
   svävar över tråden (samma regel som klippets flaggval). */
.kl-km-mb{width:30px;padding:0;justify-content:center}
.kl-km-mb i{font-size:14px}
.kl-km-mb[aria-expanded="true"]{background:var(--inset);color:var(--ink)}
.kl-km-rad{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:6px 0 2px;padding:6px 7px;border-radius:var(--r);
  background:var(--inset);border:1px solid var(--line)}
.kl-km-rad .kl-chip{height:26px;padding:0 10px;font-size:11.5px}
.kl-km-rad .kl-chip i{font-size:11.5px}
.kl-km-rad .kl-angra{height:26px;font-size:11.5px;margin-left:auto}
.kl-km-rad-q{font-size:12px;font-weight:700;color:var(--ink2);margin:0 2px}
.kl-km-rad-t{font-size:12px;color:var(--ink2)}
.kl-km-rad-t i{color:var(--dim)}
/* Redigeringen — samma fält som skrivraden, fast på plats i tråden. */
.kl-km-red{margin-top:4px}
.kl-km-red textarea{display:block;width:100%;min-height:58px;max-height:160px;resize:none;padding:8px 11px;border-radius:var(--r);
  background:var(--inset);border:1px solid var(--accent);color:var(--ink);font:inherit;font-size:13.5px;line-height:1.45;outline:none}
.kl-km-red-ak{display:flex;align-items:center;gap:6px;margin-top:6px}
.kl-km-red-tips{font-size:11px;color:var(--dim);margin-right:auto}
.kl-km-mer{align-self:flex-start;height:28px;padding:0 10px;margin-left:-10px;border-radius:14px;color:var(--accent-ink);font-size:12.5px;
  font-weight:700;display:inline-flex;align-items:center;gap:6px}
.kl-km-mer:hover{background:var(--accent-wash)}
.kl-km.ar-borta .kl-km-tx{color:var(--dim);font-style:italic}
.kl-av-borta{display:inline-grid;place-items:center;color:var(--dim);font-size:13px}
.kl-laddar{font-size:12.5px;color:var(--dim);padding:6px 2px}
.kl-tomkm{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:26px 16px}
.kl-tomkm-ik{width:44px;height:44px;border-radius:50%;background:var(--accent-wash);color:var(--accent-ink);display:grid;place-items:center;
  font-size:19px;margin-bottom:6px}
.kl-tomkm b{font-size:14px;color:var(--ink)}
.kl-tomkm span{font-size:12.5px;color:var(--dim);max-width:30ch;line-height:1.5}

/* ── SKRIVRADEN — fast i panelens botten ── */
.kl-svarar{display:flex;align-items:center;gap:7px;margin:0 0 8px;padding:4px 4px 4px 10px;border-radius:var(--r-sm);
  background:var(--accent-wash);font-size:12px;color:var(--ink2)}
.kl-svarar>i{color:var(--accent-ink)}
.kl-svarar b{color:var(--ink)}
.kl-svarar span{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kl-svarar button{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;color:var(--dim);font-size:16px}
.kl-svarar button:hover{background:var(--card);color:var(--ink)}
.kl-skriv{display:flex;align-items:flex-end;gap:9px}
.kl-skriv>.kl-av{margin-bottom:4px}
.kl-falt{flex:1 1 auto;min-width:0;display:flex;align-items:flex-end;gap:6px;min-height:38px;padding:3px 4px 3px 14px;border-radius:19px;
  background:var(--inset);border:1px solid var(--line);transition:border-color .12s ease-out,background .12s ease-out}
.kl-falt:focus-within{border-color:var(--accent);background:var(--card)}
.kl-falt textarea{flex:1 1 auto;min-width:0;border:0;background:none;resize:none;outline:none;font:inherit;font-size:13.5px;line-height:1.4;
  color:var(--ink);padding:6px 0;height:31px;max-height:112px;display:block}
.kl-falt textarea::placeholder{color:var(--dim)}
.kl-skicka{width:30px;height:30px;flex:0 0 30px;border-radius:50%;display:grid;place-items:center;font-size:13px;
  background:color-mix(in srgb,var(--accent) 80%,#000);color:#fff;transition:opacity .12s ease-out,background .12s ease-out}
[data-theme="dark"] .kl-skicka{background:var(--accent);color:#06121f}
.kl-skicka:disabled{opacity:.35;cursor:default}
.kl-komm-fel{margin:6px 0 0;font-size:12px;color:var(--danger)}
.kl-gast{display:flex;align-items:center;gap:10px;height:38px;padding:0 15px;border-radius:19px;background:var(--inset);
  border:1px solid var(--line);font-size:13px;color:var(--ink2)}
.kl-gast>i{color:var(--accent-ink)}
.kl-gast a{font-weight:700;color:var(--accent-ink)}

/* ── Utan klipp: högerspalten förklarar veckan i stället för att stå tom ── */
.kl-sa ul{list-style:none;margin:0;padding:12px 14px 14px;display:flex;flex-direction:column;gap:12px}
.kl-sa li{display:flex;gap:10px;font-size:13px;line-height:1.45;color:var(--ink2)}
.kl-sa li>i{flex:0 0 28px;height:28px;border-radius:var(--r-sm);background:var(--inset);display:grid;place-items:center;
  color:var(--accent-ink);font-size:14px}
.kl-sa b{color:var(--ink)}

.kl-slojs{position:fixed;inset:0;z-index:69;background:rgba(11,15,20,.44)}
html.kl-ark-las,html.kl-ark-las body{overflow:hidden}

/* ═══════════════════════ MELLANBREDD 901–1100 px ═══════════════════════
   pulse-skal.css (".kopplad") lägger högerrälen UNDER innehållet i det här
   spannet. För A vore det att flytta samtalet bort från klippet — själva
   poängen med förslaget. Här byter rälerna plats i stället: panelen står
   kvar bredvid scenen, och vänsterrälen (kopplingarna) blir en kortrad
   under. "En räl får flyttas, aldrig släckas" — den flyttas. */
@media (max-width:1100px) and (min-width:901px){
  .shell.c3.kopplad.klipphub{grid-template-columns:minmax(0,1fr) 320px}
  .shell.c3.kopplad.klipphub>.center{grid-column:1;grid-row:1}
  .shell.c3.kopplad.klipphub>.rail.right{grid-column:2;grid-row:1;position:sticky;top:106px;flex-direction:column;flex-wrap:nowrap}
  .shell.c3.kopplad.klipphub>.rail.right>*{flex:0 0 auto}
  .shell.c3.kopplad.klipphub>.rail.left{grid-column:1 / -1;grid-row:2;position:static;top:auto;flex-direction:row;flex-wrap:wrap;align-items:flex-start}
  .shell.c3.kopplad.klipphub>.rail.left>*{flex:1 1 300px;min-width:0}
}

/* ═══════════════════════ TELEFON OCH SURFPLATTA ≤ 900 px ═══════════════════════
   En kolumn. Panelen blir ett ARK som glider upp (TikTok), öppnat från raden
   under scenen eller från Kommentera. Rälen själv försvinner ur flödet
   (display:contents) — arket är fast, och en tom räl hade lämnat ett glapp.
   Tryckytor ≥ 44 px. */
@media (max-width:900px){
  .shell.c3.kopplad.klipphub>.rail.right{display:contents}
  .kl-band{flex-wrap:wrap;gap:10px;padding:10px 12px}
  .kl-band-tx{flex:1 1 150px}
  .kl-band-b{flex:1 1 100%;justify-content:center;order:10;min-height:44px}
  .kl-sp-in{padding:12px 14px}
  .kl-sp-ti{font-size:16px}
  .kl-sp-ak{gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .kl-sp-ak::-webkit-scrollbar{display:none}
  .kl-rost,.kl-rostlas,.kl-akt{height:44px;border-radius:22px}
  .kl-rost-l{padding:0 15px}
  .kl-rost-n{padding:0 14px}
  .kl-akt{background:var(--inset);padding:0 15px}
  .kl-akt-t{display:none}
  .kl-akt-n{display:inline}
  .kl-vw{display:none}
  .kl-mer{width:44px;height:44px;flex-basis:44px}
  .kl-pil{width:34px;height:52px}
  .kl-play{width:60px;height:60px;margin:-30px 0 0 -30px;font-size:26px}

  .kl-teaser{display:block;width:100%;text-align:left;padding:11px 13px;color:inherit}
  .kl-teaser-h{display:flex;align-items:baseline;gap:6px;font-size:13.5px;font-weight:800;color:var(--ink)}
  .kl-teaser-h span{font-size:12.5px;font-weight:500;color:var(--dim)}
  .kl-teaser-h i{margin-left:auto;color:var(--dim);font-size:13px}
  .kl-teaser-t{display:flex;align-items:flex-start;gap:8px;margin-top:8px;font-size:12.5px;color:var(--ink2);line-height:1.45}
  .kl-teaser-t>span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-width:0}
  .kl-teaser-t b{color:var(--ink)}

  .kl-seg button{height:32px}
  .kl-k{flex-basis:152px}
  .kl-ko .chd{flex-wrap:wrap}

  .kl-vg{grid-template-columns:1fr;gap:0;padding:4px 0}
  .kl-v{display:flex;align-items:center;gap:12px;padding:8px 14px;min-height:60px}
  .kl-v+.kl-v{border-top:1px solid var(--line)}
  .kl-veckor.ar-alla .kl-v-extra{display:flex}
  .kl-v-th{width:84px;flex:0 0 84px;border-radius:var(--r-sm)}
  .kl-v-th .kl-ledc{display:none}
  .kl-v-th .kl-posc{height:17px;font-size:9.5px;padding:0 4px;bottom:4px;left:4px}
  .kl-v-r{margin:0;flex-direction:column;align-items:flex-start;gap:1px;flex:0 0 64px}
  .kl-v-vn{margin:0;flex:1 1 auto}

  /* ── ARKET ── */
  .kl-panel{position:fixed;left:0;right:0;bottom:0;z-index:70;height:min(74vh,640px);min-height:0;margin:0;
    border-radius:18px 18px 0 0;border-bottom:0;box-shadow:0 -12px 30px -10px rgba(0,0,0,.35);
    transform:translateY(105%);visibility:hidden;
    transition:transform .28s cubic-bezier(.2,.8,.2,1),visibility 0s linear .28s}
  .klipphub.kl-ark-oppen .kl-panel{transform:none;visibility:visible;transition:transform .28s cubic-bezier(.2,.8,.2,1)}
  .kl-grepp{display:block;width:40px;height:4px;border-radius:2px;background:var(--line2);margin:8px auto 2px;flex:0 0 auto}
  .kl-panel .chd{background:var(--card);box-shadow:none;padding:6px 10px 10px 14px}
  .kl-ark-x{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--inset);color:var(--ink2);
    font-size:14px;flex:0 0 36px}
  .kl-om{display:none}
  .kl-in{padding:9px 12px calc(9px + env(safe-area-inset-bottom,0px))}
  .kl-km-g,.kl-km-b{height:32px}
}

@media (prefers-reduced-motion:reduce){
  .kl-th>img,.kl-play,.kl-panel,.klipphub.kl-ark-oppen .kl-panel,.kl-spela{transition:none}
  .kl-k:hover .kl-th>img,.kl-v:hover .kl-v-th>img,.kl-play:hover{transform:none}
  .kl-km.ar-ny{animation:none}
}

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