/* =============================================================================
   FORRE.NU — SHOUTBOX-YTAN ("A · Linjen")
   =============================================================================
   KARTA (husregel "filkarta i toppen")
     themes/forre_pulse/css/pulse-shoutbox-yta.css        <- DU AR HAR
     themes/forre_pulse/views/partials/pulse-shoutbox.php  markupen + tickern
     themes/forre_pulse/views/partials/pulse-topbar.php    laddar den har filen
     themes/forre_pulse/css/pulse-navbar.css               laser INTE langre panelens matt
     design-proposals/shoutsen-tre-2026-08-30.html         mockupen (vy A)

   VARFOR FILEN FINNS (2026-08-30)
     Kenta valde vy A ur mockupen. Panelens stil lag utspridd pa TRE filer som
     stred om samma rad: forre_pulse.css (.sbox/.smsg), pulse-navbar.css (fem
     !important-rader) och pulse-topdeck.css. Uppmatta foljder pa live:
       - panelens radie blev 8 px medan varje kort under den ar 6 (--r)
       - listan var last till 280 px medan innehallet var 1120 -> 25 % synligt
       - raderna hade border-bottom:0, alltsa ingen avdelare alls
       - scrollbar-width var auto -> webblasarens 15 px grastreck tvars over ytan
       - skuggan 0 18px 48px rgba(16,26,40,.22) hade INGEN mork variant och
         syns darfor inte alls mot #0f1114
     Den har filen ager panelen ensam och laddas sist. Ror inte matten i
     pulse-navbar.css igen — de ar borttagna med flit.

   BINDANDE HUSREGLER SOM STYR FILEN
     - INGET SVART I LJUST LAGE. --board-bg och var(--ink) som ytfyllning hor
       inte hemma har (Kenta 2026-08-30).
     - Inga lodrata fargade linjer (02-ui-facit 0.5). Handelsen bars av text-
       vikten och siffran, aldrig av en border-left.
     - --faint bar ALDRIG text: 8,5 px i --faint ger 3,24:1 i ljust och 2,97:1
       i morkt lage, bada under WCAG AA. All mikrotext gar pa --sb-mikro.
   ============================================================================= */

/* ── SKALAN ────────────────────────────────────────────────────────────────
   EN knapp styr hela ytan: text, avatar, radhojd, luft, traffytor.
   Kenta: ytan ser liten ut pa hans 2560-skarm och stor hos den som kor 1366.
   En CSS-pixel ar lika stor overallt; det som skiljer ar hur stor ANDEL av
   skarmen den tar. 1200 px-skalet ar 47 % av 2560 men 88 % av 1366.
   Uppmatt utfall: 1366 -> 12,0 px  ·  1920 -> 13,5  ·  2560 -> 14,7  ·  tak 15,2.
   Golvet 12,4 ar dar --ink2 slutar vara bekvam; taket 15,2 ar dar en shout-rad
   blir bredare an panelen. ------------------------------------------------- */
.sbox{
  --sb-fs:clamp(12.4px, calc(0.19vw + 9.8px), 15.2px);
  --sb-sp:calc(var(--sb-fs) * .44);
  --sb-pad:calc(var(--sb-fs) * .86);
  --sb-av:calc(var(--sb-fs) * 1.66);
  --sb-traff:max(24px, calc(var(--sb-fs) * 1.85));
  /* Mikrotext. --dim ger 4,10:1 mot sidbakgrunden — under AA. */
  --sb-mikro:#646d7a;
  /* Tre lager i stallet for ett: kontur, kontaktskugga, rumsskugga. */
  --sb-lyft:
    0 0 0 1px color-mix(in srgb, var(--ink) 9%, transparent),
    0 2px 4px -2px rgba(16,24,40,.10),
    0 14px 32px -10px rgba(16,24,40,.22);
}
[data-theme="dark"] .sbox{
  --sb-mikro:#7f8997;
  /* En blagra .22-skugga syns inte mot #0f1114. I morkt lage bar KONTUREN
     lyftet, inte suddet. */
  --sb-lyft:
    0 0 0 1px rgba(255,255,255,.07),
    0 2px 6px -2px rgba(0,0,0,.6),
    0 18px 42px -14px rgba(0,0,0,.85);
}
/* Ett finger ar ~9 mm — 24 px racker inte pa en pekskarm. */
@media (pointer:coarse){
  .sbox{ --sb-sp:calc(var(--sb-fs) * .8); --sb-traff:40px; }
}

/* ── PANELEN ──────────────────────────────────────────────────────────────
   INGEN overflow:hidden pa .panel — pilen ska sticka ut. Rundningen bor i
   .sb-in. Samma falla som overflow:hidden pa .tr1, som en gang tystade hela
   notis-dropdownen. ------------------------------------------------------- */
.tdk .sbox .panel{
  /* 34, inte 31. Uppmatt pa live med riktiga rader: den bredaste shouten
     ("DALMAS_wenga ar pa killing spree: +10 kills i Duos" med rankmarke)
     behover 458 px innehall. Vid faktor 31 blev panelen 455 px och 16 av 20
     meddelanden kapades — och det som foll bort var slutet av meningen,
     alltsa LAGET ("i Duos"), det enda ordet dar som varierar. */
  width:min(calc(var(--sb-fs) * 34), calc(100vw - 16px));
  max-width:none;
  background:var(--card);
  border:0;
  border-radius:var(--r);
  box-shadow:var(--sb-lyft);
  padding:0;
  position:relative;
  overflow:visible;
}
.sbox .sb-in{border-radius:var(--r); overflow:hidden; position:relative; z-index:1}
/* Pilen binder ihop ytan med knappen som oppnade den. 10 px roterad ruta. */
.sbox .sb-pil{
  position:absolute; top:-5px; left:calc(var(--sb-fs) * 1.4);
  width:10px; height:10px; z-index:2;
  background:var(--inset); transform:rotate(45deg); border-radius:2px;
  box-shadow:-1px -1px 0 0 var(--line);
}
[data-theme="dark"] .sbox .sb-pil{box-shadow:-1px -1px 0 0 var(--line2)}

/* ── HUVUDRADEN ───────────────────────────────────────────────────────────
   Etikett, tidsspann, stangknapp. Utan den ar panelen anonym — den borjade
   rakt in i forsta raden. LJUS yta, aldrig --board-bg. --------------------- */
.sbox .sb-hd{
  height:calc(var(--sb-fs) * 2.4);
  display:flex; align-items:center; gap:calc(var(--sb-fs) * .5);
  padding:0 var(--sb-pad);
  background:var(--inset); color:var(--ink);
  border-bottom:1px solid var(--line);
}
[data-theme="dark"] .sbox .sb-hd{border-bottom-color:var(--line2)}
.sbox .sb-hd .bi{font-size:calc(var(--sb-fs) * .92); color:var(--gold); line-height:1}
.sbox .sb-hd b{
  font-size:calc(var(--sb-fs) * .7); font-weight:800;
  letter-spacing:.11em; text-transform:uppercase; color:var(--ink);
}
.sbox .sb-hd .sb-hd-s{
  margin-left:auto; font-size:calc(var(--sb-fs) * .72); font-weight:600;
  color:var(--sb-mikro); font-variant-numeric:tabular-nums;
}
.sbox .sb-hd .sb-hd-x{
  width:calc(var(--sb-fs) * 1.5); height:calc(var(--sb-fs) * 1.5);
  border:0; background:transparent; border-radius:var(--r-sm);
  display:grid; place-items:center; color:var(--sb-mikro); cursor:pointer;
  padding:0; flex:0 0 auto;
}
.sbox .sb-hd .sb-hd-x:hover{background:var(--card); color:var(--ink)}
.sbox .sb-hd .sb-hd-x .bi{font-size:calc(var(--sb-fs) * .8); color:inherit}

/* ── LISTAN ───────────────────────────────────────────────────────────────
   Fran 280 px (25 % av innehallet) till ~12 rader. Och en smal temafargad
   rullist: fjorton andra komponenter i temat har redan en, shoutboxen fick
   aldrig nagon. ----------------------------------------------------------- */
.tdk .sbox .list{
  max-height:min(58vh, calc(var(--sb-fs) * 34));
  overflow-y:auto; overscroll-behavior:contain;
  padding:0;
  scrollbar-width:thin; scrollbar-color:var(--line2) transparent;
}
.tdk .sbox .list::-webkit-scrollbar{width:8px}
.tdk .sbox .list::-webkit-scrollbar-track{background:transparent}
.tdk .sbox .list::-webkit-scrollbar-thumb{background:var(--line2); border-radius:8px; border:2px solid var(--card)}
.tdk .sbox .list:hover::-webkit-scrollbar-thumb{background:var(--dim)}

/* ── RADEN ────────────────────────────────────────────────────────────────
   EN rad per shout. Avdelaren ar en inset-skugga och inte en border: da
   hamnar ingen linje efter sista raden, radhojden vaxer inte med en pixel,
   och linjen flyttar sig inte nar raden far hover. ------------------------- */
.tdk .sbox .smsg{
  display:flex; align-items:center;
  gap:calc(var(--sb-fs) * .55);
  padding:var(--sb-sp) var(--sb-pad);
  min-height:calc(var(--sb-fs) * 2.5);
}
.tdk .sbox .smsg + .smsg{box-shadow:inset 0 1px 0 var(--line)}
.tdk .sbox .smsg:hover{background:var(--zebra)}
.tdk .sbox .smsg .a{
  width:var(--sb-av); height:var(--sb-av);
  font-size:calc(var(--sb-fs) * .66);
  flex:0 0 auto;
}
.tdk .sbox .smsg .c{
  display:flex; align-items:baseline; min-width:0; flex:1 1 auto;
  gap:calc(var(--sb-fs) * .3);
}
/* .h bar namn + marke. display:contents gor dem till syskon till .m sa hela
   raden blir EN flexrad utan att markupen behover skrivas om. */
.tdk .sbox .smsg .h{display:contents}
.tdk .sbox .smsg .u{
  font-size:var(--sb-fs); font-weight:700; color:var(--ink);
  flex:0 1 auto; min-width:4.5em; max-width:12em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.tdk .sbox .smsg .u:hover{color:var(--accent-ink)}
/* ★ KRYMPVIKTEN AR ORDNINGEN. Meddelandet ar boilerplate — "ar pa killing
   spree:" star pa fjorton av tjugo rader — och ska ge vika langt fore namnet.
   flex-shrink ar proportionell, sa 120 mot 1 betyder att frasen kortas nastan
   helt innan namnet ror sig. */
.tdk .sbox .smsg .m{
  font-size:var(--sb-fs); font-weight:400; line-height:1.35;
  color:var(--ink2);
  flex:0 120 auto; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* Handelsefargen bar bara det som VARIERAR: frasen och siffran.
   Hela meddelandet var tidigare fargat, och da kan ingenting inuti raden
   sticka ut. I ljust lage darkas fargen 50 % mot svart — uppmatt ger det
   4,95:1 eller battre for samtliga fjorton handelsefarger, mot 2,00:1 for
   Victory Royale-guldet orort. Samma grepp som --gold en gang fick. */
.tdk .sbox .smsg .m b{font-weight:800; color:color-mix(in srgb, var(--ev, var(--ink2)) 50%, #000)}
[data-theme="dark"] .tdk .sbox .smsg .m b{color:var(--ev, var(--ink2))}
.tdk .sbox .smsg .m .sb-rankic{width:calc(var(--sb-fs) * 1.05); height:calc(var(--sb-fs) * 1.05); vertical-align:-2px}
/* Tiden och reaktionen ar egna kolumner langst till hoger. */
.tdk .sbox .smsg .t{
  margin-left:auto; flex:0 0 auto;
  font-size:calc(var(--sb-fs) * .72); font-weight:600;
  color:var(--sb-mikro); font-variant-numeric:tabular-nums;
}

/* ── REAKTIONSRALSEN ──────────────────────────────────────────────────────
   Kravet: GG och Respekt ska ALLTID ga att trycka pa. Alltsa aldrig
   hover-only — ett finger har ingen hover, och en knapp man inte ser finns
   inte. Huvudverbet ligger darfor alltid i raden, men bara som ikon sa det
   inte vager mer an shouten. Vid hover, fokus eller forsta trycket viker den
   ut sig: etiketten fram + de tva extra verben glider in.
   Utfallningen ligger pa max-width och inte pa display — display gar inte att
   animera, och en knapp som poppar fram gor att man missar.
   Historik: tre chips x tjugo rader = 60 knappar i en 442 px kolumn, som vagde
   mer an texten de satt pa. Nu ar det 20 knappar med samma funktion. -------- */
.tdk .sbox .sb-rx--panel{
  flex:0 0 auto; display:inline-flex; align-items:center;
  gap:calc(var(--sb-fs) * .16); margin-left:calc(var(--sb-fs) * .3);
}
.tdk .sbox .sb-rx--panel .sb-react,
.tdk .sbox .sb-rx--panel .sb-rxo{
  height:var(--sb-traff); min-width:var(--sb-traff);
  padding:0 calc(var(--sb-fs) * .32);
  border:1px solid var(--line2); background:var(--card); color:var(--ink2);
  border-radius:99px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  gap:calc(var(--sb-fs) * .26);
  font-size:calc(var(--sb-fs) * .72); font-weight:800;
  transition:background .13s, border-color .13s, color .13s;
}
.tdk .sbox .sb-rx--panel .sb-react .bi,
.tdk .sbox .sb-rx--panel .sb-rxo .bi{font-size:calc(var(--sb-fs) * .86); line-height:1}
.tdk .sbox .sb-rx--panel .sb-react:hover,
.tdk .sbox .sb-rx--panel .sb-rxo:hover{background:var(--inset); border-color:var(--dim); color:var(--ink)}
.tdk .sbox .sb-rx--panel .sb-react:focus-visible,
.tdk .sbox .sb-rx--panel .sb-rxo:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
/* Reagerad: tonad accent, aldrig fylld svart. */
.tdk .sbox .sb-rx--panel .sb-react.done{
  background:var(--accent-wash);
  border-color:color-mix(in srgb, var(--accent) 38%, var(--line2));
  color:var(--accent-ink);
}
/* Etiketten (.sb-rl) ar hopfalld i vila och viks ut vid beroring. */
.tdk .sbox .sb-rx--panel .sb-rl{
  max-width:0; overflow:hidden; opacity:0; white-space:nowrap;
  transition:max-width .16s ease, opacity .13s ease;
}
.tdk .sbox .smsg:hover .sb-rx--panel .sb-rl,
.tdk .sbox .sb-rx--panel:focus-within .sb-rl,
.tdk .sbox .sb-rx--panel .sb-react.done .sb-rl{max-width:8em; opacity:1}
/* De tva extra verben: bredd 0 i vila. */
.tdk .sbox .sb-rx--panel .sb-rxo{
  max-width:0; padding-left:0; padding-right:0; min-width:0;
  border-width:0; overflow:hidden; opacity:0;
  transition:max-width .18s cubic-bezier(.2,.8,.3,1), opacity .14s ease,
             padding .18s ease, border-width .18s ease;
}
.tdk .sbox .smsg:hover .sb-rx--panel .sb-rxo,
.tdk .sbox .sb-rx--panel:focus-within .sb-rxo{
  max-width:var(--sb-traff); min-width:var(--sb-traff);
  padding:0 calc(var(--sb-fs) * .32); border-width:1px; opacity:1;
}
/* Har man redan reagerat viks de extra bort — ett verb per person och
   handelse, precis som servern redan deduperar. */
.tdk .sbox .sb-rx--panel.done .sb-rxo{max-width:0; min-width:0; padding:0; border-width:0; opacity:0}
/* Pekskarm: ingen hover finns. Da star hela ralsen framme direkt. */
@media (pointer:coarse){
  .tdk .sbox .sb-rx--panel .sb-rl{max-width:8em; opacity:1}
  .tdk .sbox .sb-rx--panel .sb-rxo{
    max-width:var(--sb-traff); min-width:var(--sb-traff);
    padding:0 calc(var(--sb-fs) * .32); border-width:1px; opacity:1;
  }
  .tdk .sbox .sb-rx--panel.done .sb-rxo{max-width:0; min-width:0; padding:0; border-width:0; opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .tdk .sbox .sb-rx--panel .sb-rl,
  .tdk .sbox .sb-rx--panel .sb-rxo{transition:none}
}

/* ── INMATNINGEN, FOTEN OCH GASTLASET ─────────────────────────────────── */
.tdk .sbox .sbox-input{
  display:flex; align-items:center; gap:calc(var(--sb-fs) * .5);
  padding:var(--sb-sp) var(--sb-pad);
  border-top:1px solid var(--line); background:var(--card);
}
[data-theme="dark"] .tdk .sbox .sbox-input{border-top-color:var(--line2)}
.tdk .sbox .sbox-input input{
  flex:1 1 auto; min-width:0;
  height:calc(var(--sb-fs) * 2.4);
  border:1px solid var(--line2); border-radius:var(--r);
  background:var(--inset); padding:0 calc(var(--sb-fs) * .85);
  font-family:inherit; font-size:var(--sb-fs); color:var(--ink);
  transition:border-color .14s, background .14s, box-shadow .14s;
}
.tdk .sbox .sbox-input input:focus{
  outline:0; border-color:var(--accent); background:var(--card);
  box-shadow:0 0 0 3px var(--accent-wash);
}
.tdk .sbox .sbox-input .sbox-send{
  width:calc(var(--sb-fs) * 2.4); height:calc(var(--sb-fs) * 2.4);
  min-width:0; flex:0 0 auto; padding:0;
  border:0; border-radius:var(--r); background:var(--accent); color:#fff;
  display:grid; place-items:center; cursor:pointer;
}
.tdk .sbox .sbox-input .sbox-send:hover{background:var(--accent-ink)}
.tdk .sbox .sbox-input .sbox-send .bi{font-size:calc(var(--sb-fs) * .9)}
.tdk .sbox .sbox-foot{
  padding:0 var(--sb-pad) calc(var(--sb-sp) * 1.6);
  font-size:calc(var(--sb-fs) * .72); color:var(--sb-mikro); background:var(--card);
}
.tdk .sbox .sbox-foot a{color:var(--accent-ink)}
.tdk .sbox .sbox-login{
  display:flex; align-items:center; justify-content:center;
  gap:calc(var(--sb-fs) * .5);
  padding:calc(var(--sb-sp) * 2) var(--sb-pad);
  border-top:1px solid var(--line); background:var(--inset);
  font-size:calc(var(--sb-fs) * .88); color:var(--sb-mikro);
}
.tdk .sbox .sbox-login button{
  height:calc(var(--sb-fs) * 1.9); padding:0 calc(var(--sb-fs) * .8);
  border:0; border-radius:var(--r-sm); background:var(--accent); color:#fff;
  font-family:inherit; font-size:calc(var(--sb-fs) * .82); font-weight:800; cursor:pointer;
}
.tdk .sbox .sbox-login button:hover{background:var(--accent-ink)}

/* ── SMAL SKARM ───────────────────────────────────────────────────────────
   Panelen far hela bredden minus luft, listan tar hojd efter skarmen. ------ */
@media (max-width:820px){
  .tdk .sbox .panel{width:calc(100vw - 16px)}
  .tdk .sbox .list{max-height:min(52vh, calc(var(--sb-fs) * 26))}
  .tdk .sbox .smsg .u{max-width:9em}
}

/* ── TICKERN I BAREN: REAKTIONEN FICK INTE PLATS ─────────────────────────
   Uppmatt pa live 2026-08-31: .tick ar 330 px, shouten (.tk) 472, och
   reaktionsblocket 137 px lag HELT utanfor hogerkanten — 142 px bortom. Med
   overflow:hidden pa .tick betyder det att GG- och Respekt-knapparna i baren
   inte gick att se och inte gick att trycka pa. De renderades, de kostade
   markup, och de var ovanpa det oanvandbara.

   Orsaken var inte overflow:hidden i sig utan att INGENTING i raden fick
   krympa: .ticktrack ar inline-flex och blir sa bred som innehallet, sa .tk
   sag aldrig nagon begransning att anpassa sig till.

   Fixen ar tre rader: spåret fyller luckan, shouten far inte bli bredare an
   den, och det som ger vika ar MEDDELANDET — inte knapparna. Samma prioritet
   som i panelen: boilerplaten kortas, det man ska kunna gora star kvar.
   ------------------------------------------------------------------------ */
.tdk .sbar .tick .ticktrack{width:100%}
.tdk .sbar .tick .tk{max-width:100%; min-width:0}
.tdk .sbar .tick .tk .tm2{
  flex:0 1 auto; min-width:0; max-width:none;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.tdk .sbar .tick .tk .tk-u{flex:0 0 auto}
.tdk .sbar .tick .tk .sb-rx{flex:0 0 auto}