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

/* Live-rättningens rubrikrad (omgjord 2026-09-05: produktskylt i stället för
   färgad bakgrundston + mörk gradient-bricka).

   FÖRUT bar hela raden en svag ton av produktfärgen som bakgrund
   (rgba(...,0.14)) med en mörk gradient-bricka (.current-product-badge)
   ovanpå – samma teknik som .overview-header. NU: en liten skylt med
   produktens EGNA wordmark (assets/brand-*.svg) på ett fullfärgat band,
   samma device som kolumnrubrikerna över Sparade lappar/Live-rättningens
   listor. Två fördelar: loggan känns igen fortare än ordet, och resten av
   raden ("Omgång 4971 · 1 296 rader ...") får stå på rent papper i stället
   för en färgad platta – texten är det som ska läsas här, inte bakgrunden. */
.correction-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.7rem;
}

.correction-heading-plate {
  display: inline-flex;
  align-items: center;
  height: 1.75rem;
  padding: 0 0.6rem;
  border-radius: var(--radius-sm, 6px);
  background: var(--p-color, var(--navy-800));
  box-shadow: var(--shadow-sm);
}

.correction-heading-plate img {
  height: 0.78rem;
  width: auto;
  display: block;
}

.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. */
/* Som ett eget mjukt kort (2026-09-24) i stället för en fristående tabell
   direkt på sidan – samma ytor som resten av vyn. */
.prize-table-wrapper {
  margin: 0.6rem 0;
  padding: 0.35rem 0.6rem 0.5rem;
  background: var(--paper-raised);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.prize-table-stake-note {
  margin: 0 0 0.4rem;
  font-size: 0.72rem;
  color: var(--ink-soft);
}

.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: var(--ink-faint);
  font-weight: 700;
  padding: 0.45rem 0.6rem;
  border-bottom: 1px solid var(--paper-line);
}

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

/* Antal vinnare i hela omgången, inom parentes efter utdelningen. */
.prize-table-winners {
  color: var(--ink-faint);
  font-weight: 400;
}

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

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

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

/* Lugn textknapp (2026-09-24) i stället för versal länktext – samma ton
   som övriga "visa mer"-växlare i appen. */
.prize-table-toggle {
  margin: 0.35rem 0 0 0.35rem;
  background: none;
  border: none;
  border-radius: 999px;
  color: var(--blue-600, #2f6fb0);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0.3rem 0.6rem;
  transition: background 0.15s;
}

.prize-table-toggle:hover {
  background: #eaf0f9;
}

/* --- 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);
}

/* 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. */
.live-stat-leading {
  color: var(--ink);
  font-weight: 700;
}

.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-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);
}

/* Match som inte startat: cellen visar bara starttiden ("lör 15:00"). Den
   ska stå diskret – dämpad färg, tunn vikt, mindre – inte konkurrera med de
   riktiga ställningarna i raderna intill (David 2026-08-30). */
.live-scoreboard-score-upcoming {
  font-weight: 400;
  font-size: 0.82rem;
  color: var(--ink-faint);
}

/* Ställning + facit-tecken på EN rad ("3-0 1"). Egen inline-flex-box så de två
   spännen håller ihop och tecknet inte hamnar på nästa rad om cellen skulle
   vara trång (David 2026-08-27). */
.live-scoreboard-score-line {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
}

/* "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);
}

/* Matchperiod ("Andra halvlek", "Paus" osv) - samma plats/storlek som
   "Slut"-flaggan ovan, men medvetet odramatisk: ingen versal, ingen fetstil,
   dämpad grå ton. Det är bakgrundsinformation (var i matchen man befinner
   sig), inte en signal som "Slut" är (avgör om ställningen kan ändras) -
   ska gå att läsa i förbifarten utan att konkurrera om uppmärksamheten
   (David 2026-09-16). */
.live-scoreboard-period-flag {
  display: block;
  margin: 0.1rem 0 0;
  font-size: 0.62rem;
  color: var(--ink-faint);
}

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

/* HELA ställningen i den match där det senast plingade pulserar, så man hittar
   den i förbifarten (live-score-just-changed sätts på .live-scoreboard-score-num
   i renderLiveScoreboard utifrån liveSelection.lastGoalCell). Sitter kvar tills
   nästa mål eller tills någon match tar slutsignal. En långsam, upprepad
   skalning plus en stillsam varm glöd på siffrorna – lugn nog att inte stressa,
   tydlig nog att fånga blicken (David 2026-09-02: en enda blå siffra syntes
   knappt). */
.live-scoreboard-score-num.live-score-just-changed {
  display: inline-block;
  animation: liveScorePulse 1.6s var(--ease-out) infinite;
  transform-origin: left center;
  text-shadow: 0 0 10px rgba(242, 167, 11, 0.5);
}

@keyframes liveScorePulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

/* Bindestrecket mellan siffrorna: normal vikt och ingen glöd, även när
   ställningen pulserar. Den pågående matchens ställning är font-weight: 700
   (.live-scoreboard-score-live) och ett fett "-" med glöd mitt i pulsen såg
   underligt ut (David 2026-09-02). Siffrorna får glöden, avdelaren står lugnt. */
.live-score-sep {
  font-weight: 400;
  color: var(--ink-soft);
  margin: 0 0.06em;
}

.live-scoreboard-score-num.live-score-just-changed .live-score-sep {
  text-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .live-scoreboard-score-num.live-score-just-changed {
    animation: none;
  }
}

/* Den ENA siffra i ställningen som faktiskt rörde sig vid senaste målet: extra
   vikt + varm accentfärg (mörk orange) i stället för den gamla blå, som
   drunknade mot de svarta siffrorna. Visar VILKET lag som gjorde målet.
   Mörkare ton än --gold-500 (#f2a70b) – den ljusa guldgulan blev för svag som
   textfärg mot den vita cellen. */
.live-score-changed {
  color: #c9700a;
  font-weight: 800;
}

/* Samma markering i händelseloggen, men där är siffrorna små och står mitt i
   en rad text – en tunn blå understrykning under den ändrade siffran gör den
   lätt att hitta utan att bli en knapp/pill (David 2026-08-30: bara blå text
   syntes för lite, en solid pill blev för markant). */
.goal-log-score-changed {
  color: var(--blue-600);
  font-weight: 700;
  border-bottom: 2px solid var(--blue-500);
}

/* 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.82rem;
  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,
td.live-cell-hit span.live-cell-tip:focus-visible,
td.live-cell-miss span.live-cell-tip:focus-visible {
  outline: 2px solid var(--blue-600, #2f6fb0);
  outline-offset: 1px;
}

/* Alla 1/X/2-rutor är klick-/tap-bara för bubblan (tecken · Kupong % · Odds ·
   Spelvärde) – help-markören signalerar att det finns mer att se. */
.live-cell-tip {
  cursor: help;
}

/* 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);
}

/* "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 {
  position: relative;
  margin: 0.7rem 0;
  padding: 0.7rem 0.85rem 0.7rem 1.15rem;
  background: var(--paper-raised);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

/* Den blå vänstermarkeringen som rundad stapel inne i rutan (2026-09-24),
   samma grepp som träffchansen och Om-sidans faktarutor. */
.facit-stats::before {
  content: "";
  position: absolute;
  left: 0.4rem;
  top: 0.7rem;
  bottom: 0.7rem;
  width: 3px;
  border-radius: 999px;
  background: var(--blue-500);
}

.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;
  align-items: center;
  text-align: center;
  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);
}

/* Full pott-utdelningen: framhävd med en varm ton, den är svaret på "vad är
   raden värd just nu". Egen färg (inte spelvärdesbanden) så den inte
   förväxlas med grönt/rött = under-/överspelad. */
.facit-stat-prize {
  border-color: rgba(191, 138, 47, 0.5);
  background: rgba(191, 138, 47, 0.1);
}

.facit-stat-prize .facit-stat-value {
  color: #9a6b16;
}

/* Totalbeloppet (grundutdelning x lappens kr/rad-insats) - liten delrad
   under huvudsiffran, bara narvarande nar insatsen ar over 1 kr/rad (se
   renderFacitStats/topPrizeInfo). Huvudsiffran ar alltid vad EN rad ger. */
.facit-stat-prize-total {
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.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);
}

/* Totalodds bygger på ett bevarat äldre odds i stället för källans senaste
   (se oddsStale, js/06-ui-draw.js) – en upplysning, inte ett fel, så ingen
   fylld platta eller kant: bara en svag gul ton på cellens egen bakgrund
   och en gul ton på siffran, samma sätt som spelvärdesbanden redan gör det
   utan att se ut som en varningsruta (David 2026-09-16, tredje försöket:
   "alldeles för kritiskt", "ramen ... otroligt ful", "ska vara som en
   visning men inte kritiskt"). */
.facit-stat-odds-stale {
  background: rgba(242, 167, 11, 0.08);
}

/* #9a6b16 – samma varma guldton som .facit-stat-prize .facit-stat-value
   redan använder i den här filen (rad ~819), inte rå --gold-500: den är för
   ljus för text på ljus botten (kontrast 1,8:1, långt under läsbart) och
   bara tänkt som accent-/bakgrundston. */
.facit-stat-odds-stale .facit-stat-value {
  color: #9a6b16;
}

/* Triangel-glyf FÖRE siffran, i samma storlek som den (1em ärver
   .facit-stat-values 1.25rem) – inte en liten symbol klistrad på
   etiketten ovanför (David 2026-09-16, fjärde försöket: "3 gånger så
   stor och sitta innan siffrorna, samma storlek som siffrorna"). Ingen
   bakgrund, ingen kant, ingen box (David uttryckligen igen 2026-09-16:
   "utan ngn kvadrat runt den"), bara en färgad symbol – ren gul (--gold-500)
   eftersom det bara är symbolen som får färgen, inte brödtext med egna
   kontrastkrav (till skillnad från .facit-stat-odds-stale .facit-stat-value
   ovan). cursor:pointer i stället för help – öppnas med tap på mobil, inte
   bara hover (se live-cell-tip/overview-name-odds-fallback-warn, som delar
   denna klass och kopplas till en riktig tap-bar tooltip). */
.facit-stat-warn-icon {
  display: inline-block;
  margin-right: 0.2rem;
  font-size: 1em;
  vertical-align: -0.05em;
  color: var(--gold-500);
  cursor: pointer;
}

/* Noten under panelen: samma gula text som siffran ovan, ingen platta/kant
   – matchar stilen på skalraden (.facit-stats-scale) direkt ovanför, bara
   färgad och lite fetare så den ändå går att skilja ut. */
.facit-stats-estimated-warn {
  color: #9a6b16;
  font-weight: 600;
  font-style: normal;
}

/* Tripartite-scenariopanelen (renderTripartiteScenarios): de tre möjliga
   topputdelningarna medan sista matchen är oavgjord. Ligger direkt under
   Vinstuppskattnings-tabellen. */
.tripartite-scenarios {
  margin: 0.5rem 0 0.9rem;
  padding: 0.6rem 0.75rem;
  background: var(--paper-raised);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-md);
}

.tripartite-scenarios-heading {
  margin: 0 0 0.45rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink);
}

.tripartite-scenarios-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.tripartite-scenarios-list li {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.35rem 0.5rem;
  border-radius: var(--radius-sm, 6px);
  font-size: 0.85rem;
}

.tripartite-scenarios-list li.is-now {
  background: var(--blue-50, #f2f6fd);
  border: 1px solid var(--blue-500);
  padding: calc(0.35rem - 1px) calc(0.5rem - 1px);
}

.tripartite-scenario-label {
  color: var(--ink-soft);
}

.tripartite-scenarios-list li.is-now .tripartite-scenario-label {
  color: var(--ink);
  font-weight: 600;
}

.tripartite-scenario-amount {
  margin-left: auto;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.tripartite-scenarios-hint {
  margin: 0.5rem 0 0;
  font-size: 0.7rem;
  line-height: 1.4;
}

/* 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.5rem;
  /* Tydligare som sektionsrubrik (2026-09-24): större och i bläckfärg i
     stället för en liten blå länktext – pilen i dämpad ton bredvid. */
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ink);
  padding: 0.25rem 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 var(--ink-faint);
  transition: transform 0.4s var(--ease-bounce);
  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;
}

/* Frusen fördelnings-/reduceringspanel i Live-vyn (renderFrozenReduction-
   Snapshot) – samma toning in som kupongöversikten ovanför. */
.live-dist-box .reduce-summary-frozen {
  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;
  }

  /* Facit-tecknet ligger numera INLINE med stallningen aven pa mobil
     ("3-0 1", se .live-scoreboard-score-line) - 2026-08-27. Cellen maste
     darfor rymma "10-10" + teckenbrickan pa samma rad, sa den ar bredare an
     den tidigare 4rem (som byggde pa att tecknet lag pa egen rad).
     `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: 5rem;
    min-width: 5rem;
    max-width: 5rem;
  }

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

}

.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;
}

/* Knappen som byter x-axeln mellan Total-odds och Totalt spelvärde (David
   2026-09-11) – bara på frusna snapshots (sparade lappar) där rowValuesFor
   kan ge de reducerade radernas odds/spelvärde (se wireDistAxisToggle).
   Sitter sist i .dist-legend (redan flex-wrap) och pushas mot höger kant med
   margin-left: auto – wrap:ar ner på egen rad på smala skärmar precis som
   legend-posterna, i stället för att flyta ovanpå grafen där den skulle
   kunna täcka en stapel eller dess siffra, särskilt på mobil. */
.dist-axis-switch {
  margin-left: auto;
  border: 1px solid var(--line, #dedcd5);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft, #6b7280);
  font-size: 0.72rem;
  padding: 0.15rem 0.55rem;
  cursor: pointer;
}

.dist-axis-switch:hover {
  background: rgba(0, 0, 0, 0.04);
  color: var(--ink, #1a1a1a);
}

.dist-axis-switch:focus-visible {
  outline: 2px solid var(--blue-500, #2f6fdb);
  outline-offset: 1px;
}

/* Hopfällbar fördelningstabell i Bygg-vyn (renderDistributionTable). Samma
   klickbara summary-rad med roterande pil som Live-vyns paneler
   (.live-overview-box) – bara att den lever i reduceringsresultatet i
   stället. Öppet-läget minns per konto (state.userSettings.distTableOpen).
   Hopfälld som standard så exportknapparna inte skjuts ner av den långa
   tabellen varje gång man kör en reducering. */
.dist-table-box {
  margin: 0.4rem 0 0;
}

.dist-table-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;
}

.dist-table-box > summary::-webkit-details-marker {
  display: none;
}

.dist-table-box > summary::marker {
  content: "";
}

.dist-table-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.4s var(--ease-bounce);
  flex: none;
}

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

.dist-table-box > summary:hover .dist-table-summary-text {
  text-decoration: underline;
}

.dist-table-body {
  margin-top: 0.45rem;
}

.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;
}

.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;
}

/* Summaraden under måltalstabellen. Egen inramad "chip"-stil i stället för den
   gamla diskreta grå texten – den ska gå att se på en halv sekund, både när
   talen går ihop och (särskilt) när de inte gör det. Färgen sätts av
   .on-target / .off-target nedan. */
.share-sum {
  padding: 0.6rem 0.6rem 0.2rem;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.45;
}

/* Själva färg-chippet läggs på en <span> inuti cellen (byggd i JS) så att
   td:n behåller sitt normala tabellcell-beteende. */
.share-sum .share-sum-chip {
  display: inline-block;
  padding: 0.35rem 0.55rem;
  border-radius: 5px;
  border: 1px solid transparent;
}

/* Summan = 100: lugn grön bekräftelse. */
.share-sum.on-target .share-sum-chip {
  color: #1e7a3c;
  background: #e9f6ee;
  border-color: #bfe3cc;
}

/* Summan ≠ 100: gul varning. Bär EGEN färg/bakgrund så den inte ärver den
   knallröda .off-target-textfärgen som fack-cellerna i tabellen använder –
   ett slarvfel i rutorna är värt en varning, inte ett larm. */
.share-sum.off-target .share-sum-chip {
  color: #8a5a00;
  background: #fdf3e2;
  border-color: #f0dcb4;
}

/* Kort förklaring + knapprad under måltalstabellen. Luft mot summaraden ovanför
   så knapparna inte klistras mot "Dina måltal summerar till 100 %". */
.share-actions-hint {
  margin: 0.9rem 0 0.5rem;
}

.share-actions {
  margin-bottom: 0;
}

/* "Räkna om med mina måltal" är den primära åtgärden – full knappstil.
   "Återställ måltalen" är sekundär (.secondary-button i markup), så den syns
   som ett lugnare alternativ bredvid. */
.share-actions .secondary-button {
  padding: 0.45rem 1rem;
  font-size: 0.85rem;
}

.off-target {
  color: #c0392b;
}

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

/* Antal rader i intervallet innan reducering – diskret rad under
   intervallnamnet, samma dämpade stil som Ø spelvärde-raden. */
.before-count-line {
  font-size: 0.7rem;
  color: #8a8d93;
  font-weight: 400;
}

/* Strikt-lägets kvotrad ("Kvot 8 500 – facket fullt"). Samma diskreta stil som
   raderna ovan, men den behöver stå emot .off-target: den regeln färgar hela
   cellen röd, och ett fack som är FULLT ska inte se ut som ett problem bara
   för att en granne saknar rader. Därför sätts färgen explicit här, och
   .quota-line-short är den enda varianten som får vara röd. */
.quota-line {
  font-size: 0.7rem;
  color: #8a8d93;
  font-weight: 400;
}

.quota-line-short {
  color: #c0392b;
}

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


/* --- Händelselogg + mål-ljud (Live-rättning) ---------------------------- */

/* "Händelser"-listan under live-tabellen: rad, match, ny ställning – nyaste
   överst. Motsvarar liverattning.se:s "Händelse"-kolumn. Fylls av
   detectGoalEvents vid varje poll medan lappen är öppen. */
.goal-log {
  margin: 0.9rem 0 0;
  padding: 0.6rem 0.7rem;
  background: var(--paper-raised);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-md);
}

.goal-log-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  font-weight: 700;
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
}

.live-sound-toggle {
  font-size: 0.76rem;
  font-weight: 400;
  white-space: nowrap;
}

.goal-log-empty {
  font-size: 0.76rem;
  margin: 0;
}

.goal-log-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.goal-log-table th {
  text-align: left;
  font-weight: 600;
  color: var(--ink-soft);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 0.2rem 0.5rem 0.3rem 0;
  border-bottom: 1px solid var(--paper-line);
}

.goal-log-table td {
  padding: 0.32rem 0.5rem 0.32rem 0;
  border-bottom: 1px solid var(--paper-line);
}

/* Matchnummer-kolumnen: centrerad, både rubrik ("Match") och siffran under. */
.goal-log-table th:first-child,
.goal-log-table td:first-child {
  width: 3rem;
  text-align: center;
  padding-right: 0.5rem;
}

/* Händelse-kolumnen (resultat + "SLUT"-tagg): centrerad, både rubrik och
   cellinnehåll under, så de står rakt över varandra (David 2026-09-14). */
.goal-log-table th.goal-log-event-th,
.goal-log-table .goal-log-event {
  text-align: center;
}

.goal-log-table td:first-child {
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.goal-log-table .goal-log-event {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.goal-log-table tr:last-child td {
  border-bottom: none;
}

/* Odds/spelvärde/streckning: smala kolumner (kort symbol i rubriken, kort
   tal i cellen) så de inte breder ut den vågräta tabell-scrollen i onödan
   (David 2026-09-14). Rubriken centrerad över kolumnen, siffrorna
   högerjusterade (David 2026-09-14, samma kväll: rubrikerna såg
   vänsterjusterade ut jämfört med talen). */
.goal-log-table th:nth-last-child(-n + 3) {
  width: 2.6rem;
  text-align: center;
  padding-right: 0.4rem;
}

.goal-log-table .goal-log-stat {
  width: 2.6rem;
  text-align: right;
  padding-right: 0.4rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.goal-log-column-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.1rem 0.9rem;
  margin-bottom: 0.5rem;
}

/* VAR-borttaget mål: dämpat och med en liten etikett, så loggen skiljer
   "mål" från "mål bort" även utan ljudet. Genomstrykningen ligger på ALLA
   statkolumner (odds/spelvärde/streckning) – inte bara den sist ibockade;
   :last-child pekade tidigare på vilken kolumn som RÅKADE ligga sist bland
   de ibockade, så bara en av dem (t.ex. bara "%") ströks över medan
   Odds/Spelvärde stod kvar (David 2026-09-16). Ställning-cellen
   (.goal-log-event, "0–2") ska INTE strykas över – den siffran var korrekt
   ställning just då, det är målet/statkolumnerna som var ogiltiga, inte
   historiken över vad ställningen faktiskt var (David 2026-09-16, samma
   dag: första fixen råkade stryka över ställningen också). */
.goal-log-removed td {
  color: var(--ink-soft);
}

.goal-log-removed td.goal-log-stat {
  font-weight: 600;
  text-decoration: line-through;
}

.goal-log-tag {
  display: inline-block;
  margin-left: 0.3rem;
  padding: 0 0.3rem;
  font-size: 0.64rem;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #c0392b;
  border: 1px solid #c0392b;
  border-radius: 3px;
  vertical-align: 1px;
}

/* Slutsignal-etikett i händelseloggen ("2–0 Slut"). Samma form som "mål bort"-
   taggen men grön – matchar "Slut"-brickan i live-tabellen
   (.live-scoreboard-final-flag). Egen selektor så line-through från
   .goal-log-removed inte råkar träffa den (en slutsignal-rad har inte den
   klassen, men tydligt är bättre). */
.goal-log-tag-final {
  color: var(--green-700);
  border-color: var(--green-700);
  text-decoration: none;
}


/* --- Live-listans kort (2026-09-24) ----------------------------------------

   Live-korten delade tidigare Sparade lappars rutnät (text + resultatspalt),
   men har ingen resultatbricka – spelstoppet hamnade då i den smala
   högerspalten och bröts på tre rader, och kortet ärvde Sparade lappars
   bottenluft för papperskorgen (som Live-korten inte har).

   Nu en egen enkel layout: titeln på egen rad, sedan "Spelstopp … · 60
   rader" som EN dämpad rad, sedan ev. delat med/skapad av. Flex med
   radbrytning i stället för rutnät. Filen laddas efter 02-navigation.css,
   så de här reglerna vinner över .history-item:s med samma specificitet. */
.history-item.live-list-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.4rem;
  row-gap: 0.25rem;
  padding-bottom: 0.8rem;
}

.live-list-item > .history-item-draw,
.live-list-item > .history-item-shared,
.live-list-item > .history-item-creator {
  flex-basis: 100%;
}

.live-list-item > .history-item-date,
.live-list-item > .history-item-rows {
  color: var(--ink-faint);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

/* Punkten mellan spelstopp och radantal – bara när båda finns. */
.live-list-item > .history-item-date + .history-item-rows::before {
  content: "·";
  margin-right: 0.4rem;
}

/* Vald lapp: mjuk blå platta och tunn blå kant i stället för en hård ram –
   samma "du är här"-språk som de valda flikarna. */
.history-item.live-list-item.history-item-active {
  background: #f3f7fd;
  border-color: rgba(47, 111, 191, 0.35);
  box-shadow: 0 0 0 3px rgba(47, 111, 191, 0.08), var(--shadow-sm);
}

/* --- Dela så andra kan följa (publik ?follow=-länk) -------------------- */

/* Raden under live-listan. Döljs (hidden-attribut) tills en lapp valts. */
#live-share-row {
  margin: 0.75rem 0 0.5rem;
}

#live-share-link-wrap {
  margin-top: 0.5rem;
}

/* "Följ live"-läget: sidan öppnad av en utomstående via ?follow=<kod>.
   Flikraden och "Logga in"-knappen döljs redan via hidden-attribut i
   enterFollowMode, men vi tar bort dem ur layouten helt här också så inget
   tomrum blir kvar. Delningsraden hör inte hemma för den som följer. */
body.follow-mode nav.tab-bar,
body.follow-mode #user-badge,
body.follow-mode #live-share-row {
  display: none !important;
}

/* "Omgången är färdigspelad" – när en follow-länk gått ut (dygnet efter att
   omgången spelats klart). Lugn, ingen larmfärg: det är ett väntat sluttillstånd. */
.follow-expired {
  max-width: 32rem;
  margin: 1.5rem auto;
  padding: 1.25rem 1.5rem;
  text-align: center;
  border: 1px solid var(--paper-line);
  border-radius: 8px;
  background: var(--paper);
}

.follow-expired h3 {
  margin: 0 0 0.5rem;
}

.follow-expired p {
  margin: 0;
  color: var(--ink-soft, #666);
}

/* --- Avslöjning vid rättning (David 2026-09-26) ---------------------------
   Se buildRatingReveal i js/09-history.js. Varje match har knapparna "Rätta"
   och "Skrapa"; räknaren överst tickar upp för varje rätt. Byggt för
   mobilen först: raderna minst 44 px. */
.rating-reveal {
  margin: 0 0 18px;
  padding: 14px 12px 12px;
  background: var(--paper-raised);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

.rating-reveal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 4px;
}

.rating-reveal-counter {
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: var(--navy-900);
}

.rating-reveal-count {
  display: inline-block;
  min-width: 1.4ch;
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  transform-origin: 50% 70%;
}

.rating-reveal-count.is-bump {
  animation: rating-reveal-bump 0.36s var(--ease-out);
}

@keyframes rating-reveal-bump {
  0% { transform: scale(1); color: var(--navy-900); }
  35% { transform: scale(1.22); color: var(--green-600); }
  100% { transform: scale(1); color: var(--navy-900); }
}

.rating-reveal-unit {
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.rating-reveal-skip,
.rating-reveal-move {
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
}

.rating-reveal-skip {
  border: 1px solid var(--paper-line);
  background: var(--paper);
  color: var(--ink-soft);
}

.rating-reveal-hint {
  min-height: 1.3em;
  margin: 8px 4px 10px;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.rating-reveal-list {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rating-reveal-match {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr) auto 1.2rem;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 4px 8px;
  border-radius: 10px;
  background: var(--paper-sunken);
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

.rating-reveal-match.is-correct {
  background: color-mix(in srgb, var(--green-500) 12%, var(--paper-raised));
}

.rating-reveal-match.is-wrong {
  background: color-mix(in srgb, var(--red-500) 9%, var(--paper-raised));
}

.rating-reveal-num {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-faint);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.rating-reveal-teams {
  overflow: hidden;
  font-size: 0.9rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--ink);
}

/* Utfallsdelen: 1/X/2-rutor + målsiffra. Skraplagret (canvas) läggs ovanpå. */
.rating-reveal-outcome {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  /* 5 px räcker för facit-ringen (4 px utanför rutan) så den ryms inuti. */
  padding: 5px;
  border-radius: 8px;
}

/* Skraplagret ligger bara över resultatet ("1–3"). Medan man skrapar växer
   resultatet till ett stort skrapkort på en egen rad under lagnamnet, och
   krymper sedan tillbaka in i raden när det är framskrapat (David
   2026-09-26). Växandet görs med transform (inte font-size-övergång) så
   skraplagret kan mätas direkt när det läggs på. */
.rating-reveal-match.is-scratching .rating-reveal-outcome {
  grid-column: 1 / -1;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 6px 5px 10px;
}

.rating-reveal-match.is-scratching .rating-reveal-score {
  position: relative;
  overflow: hidden;
  min-width: min(15rem, 100%);
  padding: 10px 16px;
  border-radius: 16px;
  font-size: 6rem;
  line-height: 1.1;
  animation: rating-reveal-grow 0.32s var(--ease-out);
}

.rating-reveal-match.is-just-scratched .rating-reveal-score {
  animation: rating-reveal-shrink 0.4s var(--ease-out);
}

@keyframes rating-reveal-grow {
  from { transform: scale(0.45); opacity: 0.4; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes rating-reveal-shrink {
  from { transform: scale(4.4); }
  to { transform: scale(1); }
}

.rating-reveal-signs {
  display: flex;
  gap: 3px;
}

.rating-reveal-sign {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink-faint);
  background: var(--paper-raised);
  border: 1px solid var(--paper-line);
}

/* Bästa radens tecken syns hela tiden – det är det man väntar på svar om. */
.rating-reveal-sign.is-row {
  color: #fff;
  background: var(--navy-800);
  border-color: var(--navy-800);
}

/* Stora siffror – det är dem man skrapar fram (David 2026-09-26). */
.rating-reveal-score {
  min-width: 3.8rem;
  padding: 3px 4px;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

/* Facit-ringen visas först när raden rättats. Under skrapningen syns bara
   resultatet (under lagret), ringen kommer när hela resultatet är framme. */
.rating-reveal-match:not(.is-covered) .rating-reveal-sign.is-facit {
  box-shadow: 0 0 0 2px var(--paper-raised), 0 0 0 4px var(--ink-soft);
}

.rating-reveal-match.is-correct .rating-reveal-sign.is-facit {
  box-shadow: 0 0 0 2px var(--paper-raised), 0 0 0 4px var(--green-500);
}

.rating-reveal-match.is-wrong .rating-reveal-sign.is-facit {
  box-shadow: 0 0 0 2px var(--paper-raised), 0 0 0 4px var(--red-500);
}

.rating-reveal-match.is-covered:not(.is-scratching) .rating-reveal-score {
  visibility: hidden;
}

/* Knapparna ligger ovanpå utfallsdelen tills matchen rättats eller skrapas.
   Utfallet under dem är dolt så inget syns i kanterna. */
.rating-reveal-match.is-covered:not(.is-scratching) .rating-reveal-signs,
.rating-reveal-match.is-covered:not(.is-scratching) .rating-reveal-score {
  visibility: hidden;
}

.rating-reveal-actions {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}

.rating-reveal-action {
  min-width: 0;
  padding: 0 4px;
  border: 1px solid var(--paper-line);
  border-radius: 8px;
  background: var(--paper-raised);
  color: var(--navy-800);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

.rating-reveal-action[data-action="scratch"] {
  border-color: transparent;
  background: linear-gradient(135deg, #c9ccd1, #e3e5e8 50%, #bfc3c9);
  color: #4d525a;
}

.rating-reveal-action:focus-visible,
.rating-reveal-skip:focus-visible,
.rating-reveal-move:focus-visible,
.rating-reveal-scratch:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring, 0 0 0 3px rgba(47, 111, 191, 0.25));
}

.rating-reveal-scratch {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  touch-action: none;
  cursor: grab;
  transition: opacity 0.22s ease;
}

.rating-reveal-scratch.is-clearing {
  opacity: 0;
}

.rating-reveal-mark {
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
}

.rating-reveal-match.is-revealed .rating-reveal-mark {
  animation: rating-reveal-pop 0.3s var(--ease-out);
}

.rating-reveal-match.is-correct .rating-reveal-mark {
  color: var(--green-600);
}

.rating-reveal-match.is-wrong .rating-reveal-mark {
  color: var(--red-500);
}

@keyframes rating-reveal-pop {
  from { opacity: 0; transform: scale(0.4); }
  to { opacity: 1; transform: scale(1); }
}

.rating-reveal-foot {
  display: flex;
  justify-content: center;
  margin-top: 14px;
}

.rating-reveal-move {
  border: 0;
  background: var(--navy-800);
  color: #fff;
}

.rating-reveal-moved {
  margin: 0;
  font-size: 0.88rem;
  color: var(--ink-soft);
}

@media (max-width: 420px) {
  .rating-reveal-match {
    gap: 6px;
    padding: 4px 6px;
  }

  .rating-reveal-sign {
    width: 22px;
    height: 22px;
  }

  .rating-reveal-score {
    min-width: 3.4rem;
    font-size: 1.2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rating-reveal-count.is-bump,
  .rating-reveal-match.is-revealed .rating-reveal-mark,
  .rating-reveal-match.is-scratching .rating-reveal-score,
  .rating-reveal-match.is-just-scratched .rating-reveal-score {
    animation: none;
  }

  .rating-reveal-match,
  .rating-reveal-scratch {
    transition: none;
  }
}

/* Testlappen "Testa rätta" sist under Orättade (se openDemoRating i
   js/09-history.js). Streckad kant = övningslapp, inte en riktig lapp. */
#history-unrated-section:not([hidden]) + .history-demo {
  margin-top: 14px;
}

.history-demo-item {
  border-style: dashed;
}