/* Reduceraren – rättning och live-rättningens tabell.

 * Rättningsvyn med utdelningstabell, och den stora match × rad-tabellen i
 * Live-rättning med sticky rubrikrad och matchkolumn.
 */


/* --- Rättning ------------------------------------------------------------ */

.correction-box {
  margin: 0.6rem 0;
}

.correction-button {
  background: var(--navy-800);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 0.55rem 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s var(--ease-out);
}

.correction-button:hover:not(:disabled) {
  background: var(--navy-700);
  transform: translateY(-1px);
}

.correction-button:disabled {
  opacity: 0.6;
  cursor: default;
  transform: none;
}

.correction-output:empty {
  margin: 0;
}

.correction-output {
  margin-top: 0.7rem;
}

.correction-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

/* Samma produktfärgade rad-bakgrund som .overview-header (se där för
   bakgrunden) – används på Live-rättningens rubrikrad så det syns direkt
   vilken produkt (Stryktipset/Europatipset/Topptipset) tabellen gäller,
   inte bara via den lilla brickan. */
.correction-heading.product-stryk,
.correction-heading.product-europa,
.correction-heading.product-topp {
  align-items: center;
  padding: 0.5rem 0.7rem;
  border-radius: var(--radius-md);
}

.correction-heading.product-stryk {
  background: rgba(44, 84, 144, 0.14);
}

.correction-heading.product-europa {
  background: rgba(31, 138, 87, 0.14);
}

.correction-heading.product-topp {
  background: rgba(207, 148, 31, 0.18);
}

.correction-draw {
  font-weight: 700;
  color: var(--ink);
}

.correction-total {
  font-size: 0.8rem;
  color: var(--ink-soft);
}

/* Utdelningstabell (renderPrizeTable) – en rad per antal rätt, som
   liverattning.se:s "Antal rätt/Vinst"-flik. */
.prize-table-wrapper {
  margin: 0.6rem 0;
}

.prize-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.prize-table th {
  text-align: left;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #898781;
  font-weight: 700;
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--paper-line);
}

.prize-table td {
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--paper-line);
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
}

.prize-table-hit td {
  color: var(--ink);
  font-weight: 600;
}

.prize-table-hit {
  background: #f2faf5;
}

.prize-table-total td {
  border-bottom: none;
  border-top: 1px solid var(--paper-line);
  font-weight: 700;
  color: var(--ink);
  padding-top: 0.55rem;
}

.prize-table-toggle {
  margin-top: 0.5rem;
  background: none;
  border: none;
  color: var(--blue-600, #2f6fb0);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  cursor: pointer;
  padding: 0.2rem 0;
}

.prize-table-toggle:hover {
  text-decoration: underline;
}

/* --- Live-rättning: match × rad-tabell ------------------------------------ */

/* Tooltipen för de fyllda 1/X/2-rutorna ("Fyll siffror") positioneras
   relativt den här wrappern – den ligger UTANFÖR .live-scoreboard-scroll
   nedan, vars overflow-x annars skulle klippa bort bubblan. */
.live-scoreboard-wrapper {
  position: relative;
}

/* Bade vagrat OCH lodratt scroll. Tidigare bara overflow-x: med 13 matcher
   (Stryktipset/Europatipset) blev tabellen sa hog att man tappade bort
   rubrikraden nar man skrollade, och pa en liten skarm sag det ut som att
   "knappt nagra rader far plats" (David 2026-08-22).
   max-height ar satt sa ungefar 20 matchrader ryms innan den borjar skrolla -
   alltsa alltid hela Stryktipset/Europatipset (13) och Topptipset (8) utan
   scroll, men med ett tak sa tabellen aldrig kan vaxa obegransat. */
.live-scoreboard-scroll {
  overflow: auto;
  /* ~20 matchrader (en rad ar ca 45px med tvaradigt matchnamn) plus
     rubrikraden. 85vh-taket gor att tabellen aldrig blir hogre an skarmen pa
     en lag skarm - da tar den lodratta scrollen over i stallet. */
  max-height: min(85vh, 58rem);
  margin: 0.7rem 0;
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-md);
  /* Sticky-rubriken nedan behover en scroll-container som INTE ar
     overflow:visible for att fastna mot ratt kant. */
  overscroll-behavior: contain;
}

/* Rubrikraden foljer med vid lodratt scroll, sa man alltid ser vilken
   radkolumn man tittar pa. z-index 3 for att lagga sig over bade vanliga
   celler (auto) och den sticky matchkolumnen (2 nedan). */
.live-scoreboard thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--paper);
  box-shadow: 0 1px 0 var(--paper-line);
}

/* Horn-cellen (rubrik + matchkolumn samtidigt sticky) maste ligga overst av
   alla, annars skjuts den under nar man skrollar i bada riktningarna.

   background MASTE sattas explicit har. Matchkolumnens egen regel sager
   `background: inherit` (den arver zebra-randen fran sin <tr> i tbody, vilket
   ar ratt DAR) - men i thead finns ingen bakgrund att arva, sa cellen blev
   helt genomskinlig: uppmatt rgba(0,0,0,0). Teckenkolumnerna skrollade da rakt
   under rubriken "Match" och syntes mellan Match och Stallning
   (David 2026-08-24). Sedan specificiteten hojdes till
   `.live-scoreboard .live-scoreboard-match` (0,2,0) slar den dessutom
   `.live-scoreboard thead th` (0,1,1), sa basregelns --paper vann inte langre.
   En sticky cell MASTE vara opak - annars ar den bara ett fonster mot det som
   skrollar under. */
.live-scoreboard thead th.live-scoreboard-match {
  z-index: 4;
  background: var(--paper);
}

/* width:auto, INTE 100%. Med 100% strackte sig tabellen alltid over hela
   containern, sa nar bara ett par radkolumner visades delades overskottet ut
   pa dem och tecknen hamnade langt ifran varandra med tom yta emellan
   (David 2026-08-22). Nu ar tabellen precis sa bred som innehallet kraver;
   min-width:100% gor att den anda fyller ut ramen nar kolumnerna ar fa, sa
   zebra-randerna och rubriken inte slutar mitt i rutan. */
.live-scoreboard {
  border-collapse: separate;
  border-spacing: 0;
  width: auto;
  min-width: 100%;
  font-size: 0.82rem;
}

/* Overskottsbredden laggs pa en tom spacer-kolumn langst till hoger (se
   renderLiveScoreboard) i stallet for att delas ut mellan teckenkolumnerna.
   Utan den sprids tecknen ut over hela bredden nar de ar fa; med den star de
   samlade direkt efter Stallning, och tomrummet hamnar dar det inte stor. */
.live-scoreboard th.live-scoreboard-spacer,
.live-scoreboard td.live-scoreboard-spacer {
  width: 100%;
  padding: 0;
  border: 0;
}

.live-scoreboard th,
.live-scoreboard td {
  padding: 0.4rem 0.35rem;
  text-align: center;
  white-space: nowrap;
}

/* Luft mellan varje tecken-kolumn (annars sitter rutorna klistrade ihop och
   blir svåra att läsa av – efterfrågat av David 2026-08-20). Bara mellan
   kolumnerna, inte runt Match/Ställning-kolumnerna. */
.live-scoreboard th:nth-child(n + 3),
.live-scoreboard td:nth-child(n + 3) {
  /* 0.55rem (var 0.2 fran borjan). Traffens grona ring ar 4px och ritas UTANFOR
     rutan, sa tva grannrutor som bada ar traff behover 8px emellan sig for att
     inte ga ihop till ett sammanhangande gront band - vilket hande pa rader dar
     nastan varje kolumn var ratt (David 2026-08-23, skarmdump match 5 och 6).
     0.55rem = ca 8.8px, alltsa 8px ringar + en hartunn springa emellan. */
  padding-left: 0.55rem;
  padding-right: 0.55rem;
}

/* Statkolumnerna (odds/sannolikhet/streckprocent/spelvärde, se
   renderLiveColumnPicker) har tre delvärden i en cell ("45 % · 30 % · 25 %")
   – bredare än 1/X/2-rutorna, så de får egen text-align och får radbryta i
   stället för att tvinga tabellen orimligt bred. */
.live-scoreboard-stat {
  text-align: right !important;
  white-space: normal;
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  border-left: 1px solid var(--paper-line);
}

/* Spelvärde-kolumnens 1/X/2-tal får varsin liten färgad chip (röd-till-grön
   efter betValueColor) i stället för att stå obehandlade i grått, så
   över-/underspelat syns direkt i tabellen. */
.live-stat-value-chip {
  display: inline-block;
  padding: 0.03rem 0.3rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
}

/* Tecknet som är "inne" just nu (leder/vunnit) får sitt delvärde markerat i
   varje statkolumn – så man kan läsa av kupong %, odds, sannolikhet och
   spelvärde för det utfall som gäller, utan att räkna kolumner. Statcellerna
   är dämpat gråa (--ink-soft #565a63). Enbart färgbytet till svart (--ink
   #1a1d24) visade sig för svagt för att sticka ut i en tät sifferrad i 0.78rem
   ("45 % · 30 % · 25 %"), så markeringen är både färg OCH vikt (David
   2026-08-21). Tabular-nums på .live-scoreboard-stat gör att sifferbredden
   inte ändras när vikten gör det – kolumnerna hoppar alltså inte när ett mål
   flyttar markeringen mellan 1/X/2.

   Spelvärdeschipen har redan egen bakgrundsfärg som bestämmer textfärgen –
   där biter inte --ink, så chipen får en tunn mörk ring plus tyngre vikt i
   stället, vilket syns utan att slåss med färgskalan. */
.live-stat-leading {
  color: var(--ink);
  font-weight: 700;
}

.live-stat-leading .live-stat-value-chip {
  font-weight: 800;
  box-shadow: 0 0 0 1.5px var(--ink);
}

/* "Fyll Kupong % med färg" – tre ihopsatta pill-rutor (1/X/2), samma utseende
   som Kupongöversiktens .overview-sign, centrerade i den högerjusterade
   statkolumn-cellen. */
.live-rowshare-signs {
  display: inline-flex;
  justify-content: flex-end;
}

.live-scoreboard tbody tr:nth-child(odd) {
  background: var(--paper-raised);
}

.live-scoreboard tbody tr:nth-child(even) {
  background: var(--paper);
}

/* Matchnamnet far inte ata upp bredden. Utan tak vaxer kolumnen med det
   langsta lagnamnet ("Queens Park Rangers - Bolton"), och eftersom tabellen ar
   width:100% trycker den ut radkolumnerna sa bara ett par ryms - vilket sag
   sarskilt tokigt ut nar inga statkolumner var ikryssade och tabellen anda
   inte visade fler rader (David 2026-08-22). Med ett tak far namnet radbryta
   i stallet, och de 20 radkolumnerna far plats. */
.live-scoreboard .live-scoreboard-match {
  text-align: left !important;
  /* Golv sa tabellayouten inte kan krympa kolumnen till nagra fa tecken nar
     namnen far radbryta. */
  min-width: 11rem;
  font-weight: 600;
  color: var(--ink);
  position: sticky;
  left: 0;
  background: inherit;
  box-shadow: 1px 0 0 var(--paper-line);
  /* max-width ensamt biter inte i en table-layout:auto-tabell - webblasaren
     later kolumnen vaxa anda nar det finns ledigt utrymme. width tvingar den
     till onskad bredd, max-width halller den pa plats aven vid fa kolumner.
     Sjalva texten begransas dessutom av .live-scoreboard-match-text nedan -
     cellens egen bredd ar bara ett onskemal for tabellayouten. */
  width: 15rem;
  max-width: 15rem;
  white-space: normal;
  line-height: 1.3;
  /* Over vanliga celler nar man skrollar i sidled, men under rubrikraden
     (z-index 3) som ska ligga overst vid lodratt scroll. */
  z-index: 2;
}

/* Den FAKTISKA breddbegransningen for matchnamnet. En <td> i en auto-layout-
   tabell far vaxa forbi sin egen max-width nar innehallet kraver det, och
   eftersom cellen ar position:sticky ritades overskottet ovanpa
   Stallning-kolumnen och teckenrutorna i stallet for att klippas
   ("Atlanta United FC - Sporting Kansas City", David 2026-08-24). En vanlig
   block-box inuti cellen har inga sadana undantag - den haller sin max-width
   och tvingar texten att radbryta.
   overflow-wrap: anywhere ar sista utvagen: normalt bryts namnet vid
   mellanslag/bindestreck som forr, men ett enskilt ord som anda ar bredare an
   kolumnen (langa klubbnamn utan mellanslag) bryts mitt i i stallet for att
   sticka ut. */
.live-scoreboard-match-text {
  max-width: 100%;
  /* MASTE sattas explicit. Basregeln `.live-scoreboard td` sager
     white-space: nowrap och har hogre specificitet (0,2,1 - tva klasser plus
     element) an `.live-scoreboard-match` (0,1,0) hade, sa cellens
     white-space: normal vann aldrig - och den har inre boxen arver darfor
     nowrap. Med nowrap i kraft ar overflow-wrap verkningslost: nowrap
     forbjuder ALLA radbrytningar, sa namnet kunde bara fortsatta rakt ut.
     Det var den verkliga orsaken till att match 1 och 5 svamlade
     (David 2026-08-24). */
  white-space: normal;
  /* break-word, INTE anywhere. `anywhere` later webblasaren rakna med en
     minsta innehallsbredd pa ETT tecken, och i en auto-layout-tabell krymper
     kolumnen da till nastan noll (uppmatt 19.5px - hela matchnamnet blev en
     lodratt teckenremsa). `break-word` bryter langa ord likadant i praktiken
     men paverkar inte kolumnens intrinsiska minimibredd, sa tabellen behaller
     en vettig fordelning. */
  overflow-wrap: break-word;
  hyphens: auto;
}

.live-scoreboard-start {
  display: block;
  margin-top: 0.1rem;
  font-weight: 400;
  font-size: 0.72rem;
  color: var(--ink-faint);
}

.live-scoreboard-score {
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  /* Fast bredd sa den inte breder ut sig och trycker isar teckenrutorna nar
     bara nagra fa radkolumner visas (David 2026-08-22).
     5.6rem racker for stallningen OCH facit-badgen pa samma rad ("0-3" + "2") -
     cellen har white-space:nowrap och kan inte radbryta, sa den maste rymma
     bada. */
  width: 5.6rem;
  min-width: 5.6rem;
  max-width: 5.6rem;
  /* Sticky pa samma satt som matchkolumnen, men forskjuten at hoger sa den
     lagger sig direkt efter den. Utan detta lag bara matchnamnet fast vid
     kanten medan stallningen skrollade in UNDER lagnamnen och blev olaslig
     (David 2026-08-23, skarmdump). Bada kolumnerna maste vara fasta for att
     "Match | Stallning" ska funka som en sammanhangande sidoartikel.

     --live-match-width MATS FRAM i JS (syncStickyOffset i renderLiveScoreboard)
     och ar matchkolumnens FAKTISKA renderade bredd. Hardkodat 15rem har var fel:
     tabellen ar table-layout:auto, dar cellens `width` bara ar ett onskemal och
     webblasaren gor kolumnen bredare om ett lagnamn kraver det. Mellanskillnaden
     blev ett glapp mellan Match och Stallning som raderna syntes skrolla forbi i.
     15rem-fallbacken galler bara den forsta rutan innan JS hunnit mata. */
  position: sticky;
  left: var(--live-match-width, 15rem);
  background: inherit;
  box-shadow: 1px 0 0 var(--paper-line);
  z-index: 2;
}

/* Hornceller: rubrikraden ar sticky top (z-index 3), och stallningskolumnen ar
   sticky left – den cell som ar bada maste ligga overst, precis som
   matchkolumnens horncell. */
.live-scoreboard thead th.live-scoreboard-score {
  z-index: 4;
  /* Samma skal som matchkolumnens horncell ovan - satts explicit sa den aldrig
     kan bli genomskinlig oavsett specificitetsordning. */
  background: var(--paper);
}

/* Summeringsradens ("Ratt just nu") stallningscell ar bade sticky bottom (fran
   .live-scoreboard-summary td) och sticky left – behover opak bakgrund och
   hogre z-index av samma skal som matchcellen bredvid. */
.live-scoreboard-summary td.live-scoreboard-score {
  z-index: 3;
  background: var(--paper);
}

/* Fetstil medan matchen fortfarande kan ändra ställning, vanlig vikt när
   facit är klart och siffran inte rör sig mer (David 2026-08-20). */
.live-scoreboard-score-live {
  font-weight: 700;
  color: var(--ink);
}

/* Slutresultatet ska vara det mest lasbara i cellen, inte det svagaste.
   Tidigare stod bara font-weight: 400 har, och eftersom hela
   .live-scoreboard-score ar dampat gra (--ink-soft) blev en fardig
   stallning ljusare an "SLUT"-brickan under - alltsa tvartom mot vad man
   vill lasa forst (David 2026-08-24). Full svarta (--ink) plus halvfet ger
   den tyngd utan att bli lika skrikig som den pagaende matchens 700. */
.live-scoreboard-score-final {
  font-weight: 600;
  color: var(--ink);
}

/* "Slut"-brickan under ställningen. Egen rad (display: block), inte bredvid
   siffrorna: ställningskolumnen är smal (5.6rem desktop / 4rem mobil) och har
   white-space: nowrap, så "1-0 Slut 1" på en rad hade tvingat kolumnen bredare
   och tryckt isär teckenrutorna. Under siffran får den plats gratis.

   Versalt och litet i stället för stort och färgstarkt: markeringen ska gå att
   se i förbifarten utan att konkurrera med själva ställningen, som fortfarande
   är det viktigaste i cellen. Dämpad grön ton säger "klar/avslutad" utan att
   krocka med träffens gröna ring i teckenrutorna bredvid. */
.live-scoreboard-final-flag {
  display: block;
  margin: 0.1rem 0 0;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--green-700);
}

.live-scoreboard-sign {
  display: inline-block;
  margin-left: 0.25rem;
  padding: 0.05rem 0.35rem;
  border-radius: var(--radius-sm);
  background: var(--paper-line);
  color: var(--ink);
  font-weight: 700;
  font-size: 0.72rem;
}

/* Manuell 1/X/2-inmatning (se renderManualSignPickerHtml/10-live.js) – tre
   smala knappar i stället för ställningssiffran, för matcher ingen källa
   har status för. Egen kolumn-liknande rad, inte cellens ordinarie
   font-weight, så den syns tydligt som ett INPUT snarare än en text. */
.live-manual-sign-waiting {
  font-size: 0.68rem;
  font-weight: 400;
  color: var(--ink-faint);
}

.live-manual-sign-picker {
  display: flex;
  gap: 0.15rem;
  justify-content: center;
}

.live-manual-sign-btn {
  min-width: 1.35rem;
  padding: 0.12rem 0.15rem;
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink-soft);
  font-weight: 700;
  font-size: 0.7rem;
  cursor: pointer;
  line-height: 1.2;
}

.live-manual-sign-btn:hover {
  border-color: var(--blue-500);
  color: var(--ink);
}

.live-manual-sign-btn-active {
  background: var(--blue-500);
  border-color: var(--blue-600, #2f6fb0);
  color: #fff;
}

.live-cell {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Rutan som en egen liten "chip" (inline-block, inte hela cellen) – ger
   synlig luft mellan kolumnerna trots att td-paddingen i sig är smal. */
td.live-cell-hit span,
td.live-cell-miss span {
  display: inline-block;
  min-width: 1.6em;
  padding: 0.2rem 0;
  border-radius: var(--radius-sm);
}

/* Gron ram runt tecken som ar RATT just nu (David 2026-08-23). Ligger utanpa
   den bla bakgrunden, sa traffen syns aven for den som har svart att skilja
   bla fran vit ruta. box-shadow i stallet for border: en border hade andrat
   rutans yttermatt och fatt kolumnerna att hoppa nar ett mal flyttar traffen
   mellan 1/X/2 - en skugga tar ingen plats i layouten.
   Dubbel skugga: vit "gap" innerst sa den grona ringen inte klistrar direkt mot
   den morkbla bakgrunden och forsvinner. */
td.live-cell-hit span {
  background: var(--navy-800);
  color: #fff;
  box-shadow: 0 0 0 1px var(--paper), 0 0 0 4px var(--green-500);
}

td.live-cell-miss span {
  background: #fff;
  color: var(--ink-faint);
  border: 1px solid var(--paper-line);
}

/* Värdefärger (bock "Tecken i värdefärger", se renderLiveColumnPicker):
   --value-color sätts per cell i JS utifrån spelvärdet och tar över
   bakgrunden på båda varianterna ovan – samma gröna-till-röda skala som
   Kupongöversikten. Träff markeras i stället med en tjock ram, så den
   informationen inte försvinner när värdefärgen tar över bakgrunden. */
td.live-cell-hit[style*="--value-color"] span,
td.live-cell-miss[style*="--value-color"] span {
  background: var(--value-color);
  color: var(--value-text-color, var(--ink));
}

/* Med vardefarger tar spelvardesfargen over bakgrunden - traffen markeras da
   med samma grona ring som ovan (tidigare en morkbla outline INUTI rutan, som
   var svar att se mot de morka andarna av fargskalan). Samma box-shadow-recept
   sa traffen ser likadan ut oavsett om vardefarger ar ibockat eller inte. */
td.live-cell-hit[style*="--value-color"] span {
  outline: none;
  box-shadow: 0 0 0 1px var(--paper), 0 0 0 4px var(--green-500);
}

/* "Fyll siffror" på RADKOLUMNERNA (rowShareColors, se renderLiveScoreboard):
   fyller 1/X/2-cellen botten-uppåt med Kupong %-andelen för tecknet på
   matchen. EXAKT samma lösning som Kupongöversiktens teckenrutor efter en
   körd reducering (.overview-sign.has-fill/.overview-sign-fill, se ovan runt
   rad 1150) – bara omdöpt till egna .live-cell-fill-klasser eftersom det
   sitter i en annan tabellstruktur (td/span, inte div). Grå bas ALLTID
   (ignorerar spelvärdesfärgen, precis som .overview-sign.picked.has-fill
   gör), fyllnaden är --value-color (spelvärdesfärg om "Tecken i värdefärger"
   är ibockat, annars blå fallback), text alltid vit + mörk skugga.
   Två tidigare försök gick sönder på olika sätt: (2026-08-20) delad
   selektor med td.live-cell-hit/-miss span nedan gav tomma "kuddar" utan
   fyllnad; (2026-08-21) en EGEN röd-grön fyllnadsskala ovanpå spelvärdes-
   färgen som bas kunde bli lika ljus som basen och göra siffran oläslig
   oavsett textfärg. Den här varianten har bara EN färgkälla i taget precis
   som förlagan, så det problemet kan inte uppstå.
   VIKTIGT: td.live-cell-hit/-miss span ovan (rad ~1931) matchar ALLA spans i
   cellen, inklusive de nästlade .live-cell-fill-bar/-label nedan – måste
   därför nollställas med MINST lika hög specificitet (td.klass + två
   klasser) på varje nästlad del, annars vinner t.ex. den vita miss-
   bakgrunden över fyllnadsstapelns egen bakgrund. */
td.live-cell-hit span.live-cell-fill.live-cell-fill.live-cell-fill,
td.live-cell-miss span.live-cell-fill.live-cell-fill.live-cell-fill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  min-width: 0;
  padding: 0;
  border: none;
  border-radius: 4px;
  /* Grå bas ALLTID – måste slå td.live-cell-*[style*="--value-color"] span
     ovan (specificitet 0,3,1), som annars målar hela rutan i värdefärgen och
     döljer basen så att fyllnaden ser ut att vara 100 % oavsett verklig
     andel (David 2026-08-21: "1 ska vara 59% fylld"). Därav de upprepade
     klasserna: 0,4,1 slår 0,3,1. */
  background: #e4e4e1;
  overflow: hidden;
  vertical-align: middle;
  /* Klickbar för tooltipen (mobil/tap, se setupHoverTooltip) – pekaren
     signalerar att rutan går att trycka på för att se procenttalet. */
  cursor: pointer;
}

/* Tangentbordsfokus (rutorna är tabindex=0 för tooltipen) – synlig ram så
   man ser var man är när man tabbar sig genom tabellen. */
td.live-cell-hit span.live-cell-fill:focus-visible,
td.live-cell-miss span.live-cell-fill:focus-visible {
  outline: 2px solid var(--blue-600, #2f6fb0);
  outline-offset: 1px;
}

/* De nästlade delarna matchas också av td.live-cell-*[style*="--value-color"]
   span ovan (den träffar ALLA spans i cellen) – nollställ både bakgrund och
   den träff-outline den sätter, annars ritas ramen runt stapeln och siffran
   också, och stapeln blir osynlig mot sin egen färg. */
td.live-cell-hit .live-cell-fill .live-cell-fill-bar.live-cell-fill-bar.live-cell-fill-bar,
td.live-cell-miss .live-cell-fill .live-cell-fill-bar.live-cell-fill-bar.live-cell-fill-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0;
  background: var(--value-color, linear-gradient(155deg, var(--blue-500), var(--blue-700)));
  outline: none;
  /* Traffens grona ring (td.live-cell-hit span) traffar aven den har nastlade
     spanen - nollstall, annars ritas ringen ocksa runt sjalva fyllnadsstapeln
     inuti rutan. Ringen ska bara sitta pa den yttre .live-cell-fill. */
  box-shadow: none;
  transition: height 0.4s var(--ease-out);
}

td.live-cell-hit .live-cell-fill .live-cell-fill-label.live-cell-fill-label.live-cell-fill-label,
td.live-cell-miss .live-cell-fill .live-cell-fill-label.live-cell-fill-label.live-cell-fill-label {
  position: relative;
  z-index: 1;
  background: none;
  outline: none;
  /* Samma skal som fyllnadsstapeln ovan: nollstall traffens grona ring sa den
     inte ritas runt siffran inuti rutan. */
  box-shadow: none;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.55);
}

.live-scoreboard-summary {
  border-top: 2px solid var(--paper-line);
  font-weight: 700;
}

/* "Ratt just nu" ligger kvar mot underkanten nar tabellen skrollar, sa man
   alltid ser antalet ratt for kolumnen man tittar pa - annars hamnar den
   utanfor synfaltet sa fort listan blir langre an rutan (David 2026-08-22).
   Bakgrunden maste vara opak, annars lyser raderna igenom under den. */
.live-scoreboard-summary td {
  position: sticky;
  bottom: 0;
  z-index: 2;
  background: var(--paper);
  box-shadow: 0 -1px 0 var(--paper-line);
}

/* Match-cellen i summeringsraden ar sticky i BADA riktningar (vanster +
   botten) och maste darfor ligga over de ovriga summeringscellerna. */
.live-scoreboard-summary td.live-scoreboard-match {
  z-index: 3;
}

.live-winnings-heading {
  margin: 1.1rem 0 0.2rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--paper-line);
  font-size: 0.85rem;
  color: var(--ink-soft);
}

/* Kvar for ev. aldre markup - panelen nedan har ersatt den (2026-08-24). */
.live-facit-odds {
  margin: 0.2rem 0 0.6rem;
  font-weight: 600;
  color: var(--ink);
}

/* "Den korrekta raden" (renderFacitStats). Lag tidigare som en .hint-rad i
   smatext langst ner - samma vikt som forklarande hjalptext, trots att det ar
   omgangens mest talande statistik. Nu en egen panel med talen i stor stil, sa
   ogat hittar dem direkt. */
.facit-stats {
  margin: 0.7rem 0;
  padding: 0.6rem 0.75rem;
  background: var(--paper-raised);
  border: 1px solid var(--paper-line);
  border-left: 3px solid var(--blue-500);
  border-radius: var(--radius-md);
}

.facit-stats-heading {
  margin: 0 0 0.4rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* auto-fit: en kolumn pa mobil, tva sida vid sida sa fort det finns plats. */
.facit-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: 0.5rem;
}

.facit-stat {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  padding: 0.35rem 0.55rem;
  background: var(--paper);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-md);
}

.facit-stat-label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* Sjalva talet - det har ar poangen med hela panelen. tabular-nums sa
   siffrorna star i linje mellan de tva rutorna. (Flex-reglerna som lag har
   fanns for bandetiketten bredvid talet - den ar borttagen, se
   renderFacitStats.) */
.facit-stat-value {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* Spelvardets tre lagen. Fargen sitter pa talet och pa kantlinjen, sa
   beskedet gar fram aven for den som inte laser sifferskalan under. */
.facit-stat-high {
  border-color: rgba(31, 157, 92, 0.5);
  background: rgba(31, 157, 92, 0.1);
}

.facit-stat-high .facit-stat-value {
  color: var(--green-700);
}

.facit-stat-mid {
  border-color: rgba(47, 111, 191, 0.4);
  background: rgba(47, 111, 191, 0.08);
}

.facit-stat-low {
  border-color: rgba(209, 69, 63, 0.45);
  background: rgba(209, 69, 63, 0.08);
}

.facit-stat-low .facit-stat-value {
  color: var(--red-500);
}

.facit-stats-scale {
  margin: 0.4rem 0 0;
  font-size: 0.7rem;
  line-height: 1.4;
  color: var(--ink-soft);
}

.facit-stats-estimated {
  margin: 0.3rem 0 0;
  font-size: 0.7rem;
  font-style: italic;
  color: var(--ink-soft);
}

/* Hopfällbar kupongöversikt i Live-rättning (renderSavedOverview): själva
   kupongen ser exakt ut som i Bygg-vyn och återanvänder .overview-reglerna
   ovan – här styrs bara själva utfällningen. Rubrikraden är en klickbar
   summary, så den ska se ut som en knapp/länk och inte som brödtext. */
.live-overview-box {
  margin: 0 0 0.8rem;
}

/* inline-flex (inte inline-block) så pilen, rubriken och lappnamnet ligger
   på en rad med jämnt mellanrum. Bara själva raden är klickbar – inte hela
   panelbredden – så man inte råkar fälla ihop kupongen när man klickar
   bredvid den. */
.live-overview-box > summary {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--blue-700);
  padding: 0.15rem 0;
  user-select: none;
  list-style: none;
}

/* Webbläsarens egen triangel bort i båda varianterna: WebKit tappar den
   ändå när summary inte är display:list-item, och utan det här skulle
   Firefox/Chrome visa både sin egen och vår ::before-pil. */
.live-overview-box > summary::-webkit-details-marker {
  display: none;
}

.live-overview-box > summary::marker {
  content: "";
}

/* Egen pil som roterar 90° när panelen öppnas. Ren CSS – inget JS behöver
   hålla den i synk med open-attributet, och den följer därför automatiskt
   med även när <details> öppnas/stängs av tangentbordet. */
.live-overview-box > summary::before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0.3rem 0 0.3rem 0.42rem;
  border-color: transparent transparent transparent currentColor;
  transition: transform 0.18s var(--ease-out);
  flex: none;
}

.live-overview-box[open] > summary::before {
  transform: rotate(90deg);
}

.live-overview-box > summary:hover .live-overview-summary-text {
  text-decoration: underline;
}


/* Kupongen ligger redan i en panel med egen ram – en extra marginal under
   den skulle dubblera avståndet ner till kolumnväljaren. */
.live-overview-box .overview {
  margin: 0.45rem 0 0;
}

/* Kolumnväljaren (renderLiveColumnPicker): kryssrutorna radas horisontellt
   och bryter till ny rad på smala skärmar, i stället för att klämmas ihop
   eller sticka ut ur sidan. */
.live-column-picker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0.9rem;
  margin: 0 0 0.6rem;
  padding: 0.5rem 0.7rem;
  background: var(--paper-raised);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-md);
}

.live-column-toggle {
  font-size: 0.78rem;
}

.live-column-picker-note {
  font-size: 0.74rem;
  margin: 0;
}

.live-scoreboard-summary .live-scoreboard-match {
  color: var(--ink-soft);
  font-weight: 600;
}

/* Live-rättning är byggd för att framför allt tittas på under matcherna,
   dvs på mobilen – matchkolumnen krymps och radbryts (i stället för
   nowrap) så den inte äter upp halva den smala skärmen innan man ens
   kommer till tecken-rutorna, och rutorna görs lite större/luftigare så
   de går att läsa av snabbt med tummen på väg över skärmen. */
@media (max-width: 560px) {
  .live-scoreboard {
    font-size: 0.78rem;
  }

  /* width OCH max-width maste satta samma varde. Tidigare stod bara max-width
     har medan width:15rem levde kvar fran basregeln - i en table-layout:auto-
     tabell vinner den bredare av dem, sa lagnamnen ("Queens Park Rangers -
     Bolton") svamlade ut over stallningskolumnen bredvid (David 2026-08-23,
     skarmdump). */
  .live-scoreboard .live-scoreboard-match {
    width: 38vw;
    min-width: 38vw;
    max-width: 38vw;
    white-space: normal;
    line-height: 1.25;
  }

  /* Samma vardet som cellen ovan, men i px-loss vw sa den inre boxen har ett
     eget tak att bryta mot aven nar tabellayouten hade velat gora cellen
     bredare. Utan detta arvde texten bara "100 % av cellen" - och cellen var
     ju just det som svamlade. */
  .live-scoreboard-match-text {
    max-width: 38vw;
  }

  /* Pa mobil ligger facit-badgen pa EGEN rad (.live-scoreboard-sign far
     display:block har nedan), sa cellen behover inte rymma "0-3" + "2" bredvid
     varandra som pa desktop - darav smalare an desktopens 5.6rem. 4rem racker
     for "10-10" i 0.78rem-texten.
     `left` satts INTE har: den arvs av --live-match-width fran basregeln, som
     mats fram i JS och darfor redan foljer 38vw-bredden. */
  .live-scoreboard-score {
    width: 4rem;
    min-width: 4rem;
    max-width: 4rem;
  }

  /* Trängre knappar på mobil – 4rem-cellen (minus padding) rymmer inte
     desktopens 1.35rem-knappar tre i rad. */
  .live-manual-sign-btn {
    min-width: 1.05rem;
    padding: 0.1rem 0.08rem;
    font-size: 0.66rem;
  }

  .live-scoreboard th,
  .live-scoreboard td {
    padding: 0.35rem 0.25rem;
  }

  /* Samma rakning som pa desktop: tva grannrutor som bada ar traff har var sin
     4px-ring utanfor rutan och behover darfor 8px emellan sig. 0.5rem = 8px, det
     absoluta minimumet - smalare an desktopens 0.55rem eftersom skarmbredden ar
     dyrbar har och rutorna anda ar storre (min-width 1.9em). */
  .live-scoreboard th:nth-child(n + 3),
  .live-scoreboard td:nth-child(n + 3) {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  td.live-cell-hit span,
  td.live-cell-miss span {
    min-width: 1.9em;
    padding: 0.3rem 0;
  }

  .live-scoreboard-sign {
    display: block;
    margin: 0.1rem 0 0;
  }
}

.top-rows-box {
  margin: 0.9rem 0 0;
  padding-top: 0.7rem;
  border-top: 1px solid var(--paper-line);
}

.top-rows-heading {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.top-rows-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.5rem;
}

.top-row-item {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  background: #fcfcfb;
  border: 1px solid #e8e8e5;
  border-radius: var(--radius-md);
  padding: 0.5rem 0.7rem;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

.top-row-odds {
  font-weight: 700;
  color: var(--ink);
}

.top-row-value {
  color: var(--ink-soft);
  font-size: 0.78rem;
}

.dist-bar-actual {
  fill: var(--blue-500);
}

.dist-bar-before {
  fill: #b0b3b8;
}

/* Diskret hjälpkurva genom "efter reducering"-staplarnas toppar (se
   smoothPath) – bara till för att antyda fördelningens form, ska inte
   konkurrera med staplarnas egen blå färg. */
.dist-trend-line {
  fill: none;
  stroke: var(--blue-500);
  stroke-width: 1.5;
  stroke-linecap: round;
  opacity: 0.45;
}

.dist-legend {
  display: flex;
  gap: 1rem;
  margin-top: 0.4rem;
  font-size: 0.78rem;
  color: #52514e;
  flex-wrap: wrap;
}

.dist-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.dist-swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  display: inline-block;
}

.dist-swatch-actual {
  background: var(--blue-500);
}

.dist-swatch-before {
  background: #b0b3b8;
}

.distribution {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.distribution th {
  text-align: left;
  font-weight: 500;
  color: var(--ink-soft);
  font-size: 0.72rem;
  padding: 0.25rem 0.4rem;
  border-bottom: 1px solid #e8e8e5;
}

.distribution td {
  padding: 0.2rem 0.4rem;
  font-variant-numeric: tabular-nums;
}

.distribution .muted {
  color: #8a8d93;
}

.share-input {
  width: 3.2rem;
  border: 1px solid #ccccc8;
  border-radius: 3px;
  padding: 0.15rem 0.3rem;
  font-family: inherit;
  font-size: 0.82rem;
  text-align: right;
}

.share-sum {
  font-size: 0.78rem;
  color: #8a8d93;
  padding-top: 0.4rem;
}

.off-target {
  color: #c0392b;
}

.mean-value-line {
  font-size: 0.7rem;
  color: #8a8d93;
  font-weight: 400;
}

.bar {
  display: inline-block;
  height: 0.65rem;
  background: linear-gradient(90deg, var(--blue-500), var(--blue-700));
  border-radius: 2px;
}