/* Reduceraren – kupongöversikt, färgpanel och reduceringsresultat.

 * Hela systemet på en skärm, färgmarkeringar och spann-inställningar, samt
 * det som ritas efter en körd reducering (kedjan, diagram, tooltips).
 */

/* --- Kupongöversikt: hela systemet på en skärm --------------------------- */

.overview {
  background: var(--paper-raised);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 1rem;
  box-shadow: var(--shadow-md);
}

/* Produktfärgad panel – HELA Kupongöversikten (inte bara headern) får samma
   svaga produktton som fördelningsgrafen (.dist-chart-product), så de två
   panelerna läser som en familj (David 2026-09-06: "använd samma
   bakgrundsfärg på kupongöversikt", + "Kupongöversikten fick inte färgen" när
   bara headern var tonad – den strippen är för smal för att synas).
   --p-color sätts per produkt och blandas 10 % mot papperskulören; kanten
   följer med (30 %) precis som i grafen. */
.overview.product-stryk { --p-color: var(--p-stryk); }
.overview.product-europa { --p-color: var(--p-europa); }
.overview.product-topp { --p-color: var(--p-topp); }
.overview.product-power { --p-color: var(--p-power); }

.overview.product-stryk,
.overview.product-europa,
.overview.product-topp,
.overview.product-power {
  background: color-mix(in srgb, var(--p-color) 7%, #fcfcfb);
  border-color: color-mix(in srgb, var(--p-color) 20%, #e8e8e5);
}

.overview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.7rem 0.85rem 0.45rem;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  transition: background 0.15s;
}

/* Live-vyns variant: rubrikgrupp + bock-rad staplade i kolumn, produktbrickan
   absolutpositionerad uppe i högra hörnet (David 2026-08-30). Bygg-vyns
   Kupongöversikt (renderOverview) delar .overview-header men INTE denna klass,
   så den behåller sin gamla rad-layout. */
.overview-header-live {
  position: relative;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0.35rem;
}

/* Produktbrickan uppe i högra hörnet av Live-vyns Kupongöversikt. */
.overview-header-live .overview-product-badge {
  position: absolute;
  top: 0.5rem;
  right: 0.7rem;
}

/* Dela-ikonen (kopiera följ-länk) under produktbrickan, höger­ställd. Bara i
   Live-vyns Kupongöversikt (se renderSavedOverview). Ren ikon utan ruta – bara
   färgen ändras på hover/efter kopiering. */
.overview-header-live .overview-share-button {
  position: absolute;
  top: 2.7rem;
  right: 0.7rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem;
  font: inherit;
  font-size: 0.7rem;
  color: var(--ink-soft);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: color 0.15s;
}

.overview-header-live .overview-share-button:hover {
  color: var(--blue-500);
}

.overview-header-live .overview-share-button svg {
  display: block;
  flex: none;
}

/* "Länk kopierad"-texten: dold tills man klickat, då fälls den ut till vänster
   om ikonen. */
.overview-header-live .overview-share-feedback {
  white-space: nowrap;
}

.overview-header-live .overview-share-button-done {
  color: var(--green-700);
}

/* Rubrikgruppen får plats åt produktbrickan (bred: "Europatipset") uppe till
   höger. */
.overview-header-live .overview-title-group {
  padding-right: 6.75rem;
}

/* Bock-raden måste också hålla sig fri från högra hörnet – men bara från den
   smala dela-ikonen (produktbrickan slutar ovanför bock-raden), så det räcker
   med en ikonbredd. Förr behövdes inget alls: bockarna fick plats på en rad.
   På smal skärm wrappar de nu till en andra rad som annars hamnade rakt under
   dela-ikonen (top ~2,7rem) och krockade med den (David 2026-09-02). */
.overview-header-live .overview-header-toggles {
  padding-right: 1.8rem;
}

/* De två bockarna sida vid sida, tillåts wrappa bara om det verkligen inte
   får plats. Delas av Live-vyns Kupongöversikt och Bygg-vyns (renderOverview),
   som numera också har två bockar ("Visa tecken i värdefärger" +
   "Fyll efter kupongandel"). */
.overview-header-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1rem;
}

/* Headern får en aning DJUPARE ton (~17 %) än panelkroppen (10 %, se
   .overview.product-* ovan) så rubrikraden fortfarande läser som en header
   och inte flyter ihop med matchlistan – men båda är tydligt i produktfärg,
   samma familj som fördelningsgrafen. Basen är #fcfcfb (grafens kulör), inte
   ren vit, så ytorna matchar exakt. --p-color ärvs från .overview.product-*
   men sätts även här för de fall headern renderas utan att boxen fått
   klassen (äldre kodväg). */
.overview-header.product-stryk { --p-color: var(--p-stryk); }
.overview-header.product-europa { --p-color: var(--p-europa); }
.overview-header.product-topp { --p-color: var(--p-topp); }
.overview-header.product-power { --p-color: var(--p-power); }

.overview-header.product-stryk,
.overview-header.product-europa,
.overview-header.product-topp,
.overview-header.product-power {
  background: color-mix(in srgb, var(--p-color) 13%, #fcfcfb);
}

.overview-title-group {
  display: flex;
  align-items: center;
  /* Kolumn-gap (mellan titel/bricka/namn) 0.5rem, men rad-gapet stramt (0.1rem)
     så spelstoppet – som ofta hamnar på egen rad under "Kupongöversikt" när
     bredden inte räcker – ligger tight mot rubriken i stället för att flyta
     en halv rad ned (David 2026-08-30). */
  gap: 0.1rem 0.5rem;
  flex-wrap: wrap;
}

.overview-title {
  margin: 0;
  font-size: 0.95rem;
}

.overview-color-toggle {
  font-size: 0.78rem;
}

/* I Live-vyns Kupongöversikt ska de två bockarna få plats på EN rad – lite
   mindre text, mindre bock, tightare mellanrum mellan bock och etikett, och
   ingen radbrytning inuti en etikett. */
.overview-header-toggles .overview-color-toggle {
  font-size: 0.74rem;
  gap: 0.3rem;
  white-space: nowrap;
}

.overview-header-toggles .overview-color-toggle input[type="checkbox"] {
  width: 0.95rem;
  height: 0.95rem;
}

.overview-list {
  padding: 0.4rem;
  /* Ankare för dels tap/hover-bubblan (setupHoverTooltip), dels
     vattenstämpeln (.overview-list::before nedan). */
  position: relative;
}

/* Loggan som svag vattenstämpel bakom just Kupongöversikten – syns när man
   tar en skärmdump av panelen och delar den (sidans stora body::before-
   stämpel ligger utanför en sådan crop och göms dessutom av panelens vita
   bakgrund). Eget pseudo-element så opaciteten bara tonar bilden, inte
   raderna ovanpå: varje .overview-row har transform: translateZ(0) och
   ligger därför i eget lager OVANFÖR det här z-index:0-pseudo-elementet.
   pointer-events: none så den aldrig fångar tap/klick på teckenrutorna. */
.overview-list::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("../assets/logo-r13.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto min(75%, 14rem);
  opacity: 0.06;
}

.overview-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.2rem 0.4rem;
  border-radius: 6px;
  /* translateZ(0): dels en repaint-hint (utan den målar Chromium ibland inte
     om overview-name-texten när raden byggs om – rapporterat 2026-08-20),
     dels det som lyfter raden över vattenstämpeln (.overview-list::before). */
  transform: translateZ(0);
}

/* Genomskinlig tint i stället för solid #fafaf8: annars blockerar de jämna
   raderna vattenstämpeln bakom (::before) och loggan ser randig ut. Samma
   visuella ljushet mot den vita panelen. */
.overview-row:nth-child(even) {
  background: rgba(20, 20, 10, 0.022);
}

.overview-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 5px;
  background: linear-gradient(180deg, #2f8e5a, #1f7549);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  flex-shrink: 0;
}

.overview-name {
  flex: 1;
  min-width: 0;
  font-size: 0.82rem;
  /* Lagnamn på egen rad, ev. avsparkstid som en andra rad under (bara
     Live-rättningens kupongöversikt, matcher som inte börjat). */
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.2;
}

/* Rad-wrapper för lagnamn + ev. triangel-varning (overview-name-odds-
   fallback-warn) på SAMMA rad, som en egen flex-row inuti .overview-names
   flex-column – en syskon-span till nameText hade annars hamnat på egen
   rad (David 2026-09-16, samma fälla som overview-name-period tidigare
   samma dag). min-width:0 så nameText får krympa/trunkeras i stället för
   att tvinga hela raden bredare. */
.overview-name-line {
  display: flex;
  align-items: baseline;
  min-width: 0;
  max-width: 100%;
}

.overview-name-text {
  /* align-self: flex-start – annars stretchar flex-förälderns default
     (align-items: stretch) det här spannet till HELA .overview-name-lines
     bredd, trots white-space: nowrap. Då blir spannet lika brett som raden
     och hover-tooltipen (som centrerar sig över elementets faktiska bredd,
     se setupHoverTooltip) hamnar fel – mitt på raden i stället för vid
     lagnamnet (David 2026-09-13). */
  align-self: flex-start;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Avsparkstiden – diskret rad under lagnamnet. Får alltid plats även när
   namnet trunkeras, eftersom den ligger på egen rad. */
.overview-name-time {
  font-size: 0.68rem;
  color: var(--ink-faint);
  white-space: nowrap;
}

/* Slutresultatet – samma egna rad under lagnamnet som avsparkstiden, fast i
   Historik-flikens kupongöversikt (avgjord omgång). Något tydligare än tiden:
   det är själva facit man kom dit för att se. */
.overview-name-result {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ink-soft);
  white-space: nowrap;
}

/* Matchperiod ("Andra halvlek", "Paus" osv) – inline-span INUTI
   .overview-name-result (se js/03-coupon-export.js), samma rad som
   ställningen. Ren bakgrundsinformation, ska inte ta lika mycket plats
   eller uppmärksamhet som facit-siffran själv (David 2026-09-16, samma
   "subtilt"-önskemål som live-scoreboard-period-flag i
   05-correction-live.css). */
.overview-name-period {
  margin-left: 0.35rem;
  font-size: 0.66rem;
  font-weight: 400;
  color: var(--ink-faint);
}

/* Triangel-varning: det ledande tecknets odds kommer från saved.
   frozenOutcomes i stället för källan (samma symbol/färg som
   .facit-stat-warn-icon i 05-correction-live.css - ingen bakgrund/kant,
   ren gul --gold-500). Egen tap-bar tooltip (dataset.tip, fångas av
   setupHoverTooltip längre ner i js/03-coupon-export.js) i stället för
   title, som aldrig visas vid tap på mobil (David 2026-09-16). Sitter i
   .overview-name-line (samma rad som lagnamnet, efter bortalaget) -
   flex-shrink:0 så den aldrig krymper/klipps bort när nameText trunkeras. */
.overview-name-odds-fallback-warn {
  display: inline-block;
  flex-shrink: 0;
  margin-left: 0.25rem;
  font-size: 1em;
  vertical-align: -0.05em;
  color: var(--gold-500);
  cursor: pointer;
}

/* Varning: facit-oddset för matchen är ett tidigare känt värde, inte det som
   gällde vid spelstopp (se oddsStale, js/06-ui-draw.js). En upplysning, inte
   ett fel – ren gul text utan platta/kant (David 2026-09-16, tredje
   försöket: "alldeles för kritiskt", "ramen ... otroligt ful", "ska vara
   som en visning men inte kritiskt"). */
.overview-name-odds-stale {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.68rem;
  font-weight: 600;
  /* #9a6b16 – samma varma, läsbara guldton som facit-stat-odds-stale
     (05-correction-live.css) använder, inte rå --gold-500 som är för ljus
     för text på ljus botten. */
  color: #9a6b16;
  white-space: normal;
  cursor: help;
}

.overview-name-odds-stale-icon {
  margin-right: 0.15rem;
}

/* Lagnamn med avsparkstid i tap/hover-bubblan (Live-rättningens
   kupongöversikt) – samma "help"-markör som teckenrutorna. Sitter på
   textspannet (inte hela .overview-name-cellen) så bubblan i
   setupHoverTooltip centreras över själva lagnamnet, inte mitten av raden. */
.overview-name-text[data-tip] {
  cursor: help;
}

.overview-name-text[data-tip]:focus-visible {
  outline: 2px solid var(--blue-500);
  outline-offset: 1px;
  border-radius: 2px;
}

.overview-signs {
  display: flex;
  gap: 0.15rem;
  flex-shrink: 0;
}

.overview-sign {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 5px;
  background: #ebebe8;
  /* Tunn mörk ram runt VARJE teckenruta så den har en tydlig kant även mot
     den produkttonade panelbakgrunden (David 2026-09-06: "rutorna som inte
     har grön eller röd ram behöver en tunn svart ram"). De ringade rutorna
     (.overview-sign-current m.fl.) har redan sin outline 1px UTANFÖR den här
     ramen – de krockar inte, ramen ger bara lite extra definition innanför
     ringen. box-sizing: border-box globalt, så 1,35rem-footprinten är
     oförändrad. */
  border: 1px solid rgba(0, 0, 0, 0.28);
  color: #9a9da3;
  font-size: 0.75rem;
  font-weight: 700;
  overflow: hidden;
  transition: background 0.15s, color 0.15s;
  /* Klick-/tap-bar: visar en bubbla med odds, sannolikhet och spelvärde
     (setupHoverTooltip). help-markören signalerar att det finns mer att se. */
  cursor: help;
}

.overview-sign:focus-visible {
  outline: 2px solid var(--blue-600, #2f6fdb);
  outline-offset: 1px;
}

.overview-sign.picked {
  /* --value-color sätts per tecken i JS (renderOverview) utifrån spelvärdet,
     med blått som reservfärg om inget spelvärde finns. Samma variabel
     återanvänds av fill-stapeln nedan så basfärg och stapel alltid matchar. */
  background: var(--value-color, linear-gradient(155deg, var(--blue-500), var(--blue-700)));
  color: #fff;
}

/* Ibockat i manualSigns men INTE kvar bland de faktiskt valda raderna –
   reduceringen valde bort alla rader med det tecknet på just den matchen
   (se droppedSignsFor i js/03-coupon-export.js och motsvarande count===0-
   koll i updateOverviewSignFills, js/07-ui-reduction.js – samma markering i
   både Live/Historikens och Bygg-vyns kupongöversikt). Inte ett fel i sig
   (facit är fortfarande korrekt), men utan markering ser det ut som att
   krysset glömdes bort (David 2026-09-14).
   Två varianter: i Live/Historik är en droppad cell ALDRIG picked (den är
   redan bortfiltrerad ur "chosen") – ett dovt streckmönster på den vanliga
   grå cellen räcker. I Bygg-vyn KAN cellen vara .picked (du har fortfarande
   bockat i den, bara ingen vald rad har den kvar) – då måste mönstret synas
   ovanpå den färgade bakgrunden i stället, därför en egen, ljusare variant
   med högre specificitet. */
.overview-sign-dropped {
  background-image: repeating-linear-gradient(
    135deg,
    var(--paper-line) 0,
    var(--paper-line) 2px,
    transparent 2px,
    transparent 6px
  );
}

.overview-sign.picked.overview-sign-dropped {
  background-image: repeating-linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.55) 0,
    rgba(255, 255, 255, 0.55) 2px,
    transparent 2px,
    transparent 6px
  );
}

/* Ram runt tecken som skiljer sig mot din senast sparade version (se
   ownManualSignsDiff/showOwnSaveNotice) – bara synlig tillsammans med
   own-save-bannern. Outline i stället för border, så cellens storlek/
   packning i raden inte påverkas. */
.overview-sign-diff-added {
  outline: 2px solid var(--green-500);
  outline-offset: 1px;
  /* z-index av samma skal som .overview-sign-current nedan: outline-offset
     ritar ramen utanfor rutan, dar granntecknets bakgrund annars malas over
     den eftersom syskon utan z-index malas i DOM-ordning. */
  z-index: 2;
}

.overview-sign-diff-removed {
  outline: 2px solid var(--red-500);
  outline-offset: 1px;
  z-index: 2;
}

/* Grön ram runt det tecken som leder/vunnit just nu i Live-rättningens
   kupongöversikt (se currentSignFor i renderLiveScoreboard). Outline i
   stället för border av samma skäl som diff-ramarna ovan: den ritas utanför
   rutan och påverkar därför varken cellens storlek eller packningen i raden.
   box-shadow ovanpå ger en svag glöd så ramen syns även mot en mörk fylld
   stapel, där enbart en tunn grön linje försvinner. */
.overview-sign-current {
  outline: 2px solid var(--green-500);
  outline-offset: 1px;
  box-shadow: 0 0 0 3px rgba(31, 157, 92, 0.2);
  /* Ringen ritas UTANFOR rutan (outline-offset + box-shadow) medan
     tecknen 1/X/2 ligger som syskon i en flexrad med bara 0.15rem gap.
     Utan z-index malas de i DOM-ordning, sa ringen kring t.ex. 1 hamnade
     under bakgrunden pa X bredvid och sag avklippt ut pa hogersidan
     (David 2026-08-24). Egen stackningskontext lyfter hela cellen inkl.
     ringen over grannarna. Position ar redan relative pa .overview-sign. */
  z-index: 2;
}

/* Samma ring, men röd: det ledande tecknet finns INTE på din bästa rad, alltså
   ligger den raden fel på just den matchen just nu (se bestRowSignFor i
   renderLiveScoreboard). Ringen sitter kvar på facit/ledningen – bara färgen
   skiljer – så blicken kan svepa över kolumnen och läsa grönt/rött som
   "hur många rätt har min bästa rad". Måste komma EFTER .overview-sign-current
   i filen för att vinna: båda är enkla klasser med samma specificitet, så det
   är källordningen som avgör. */
.overview-sign-current-miss {
  outline-color: var(--red-500);
  box-shadow: 0 0 0 3px rgba(214, 69, 69, 0.2);
}

/* Efter en körd reducering (updateOverviewSignFills) ersätts den statiska
   picked/grå-bakgrunden av en liggande mini-stapel: fill-spannet fylls
   botten-uppåt proportionerligt mot andelen valda rader som har tecknet –
   100 % helt blå, 50 % halvfylld, 0 % osynlig (grå bas syns igenom). Högre
   specificitet än .overview-sign.picked (två klasser mot en) så den alltid
   vinner över den statiska bakgrunden när den är aktiv. */
.overview-sign.picked.has-fill {
  background: #e4e4e1;
}

.overview-sign-fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0;
  background: var(--value-color, linear-gradient(155deg, var(--blue-500), var(--blue-700)));
  transition: height 0.4s var(--ease-out);
}

.overview-sign-label {
  position: relative;
  /* z-index 2: måste ligga över mönster-overlayet (::after, z-index 1) OCH
     fyllnadsstapeln, annars läggs strecken/prickarna ovanpå siffran. */
  z-index: 2;
}

/* --- Reduceringsgruppernas mönster ------------------------------------------

   Varje färggrupp (COLOR_GROUPS i js/02-reduction.js) har en distinkt FÄRG och
   ett distinkt MÖNSTER. Färgen ensam räcker inte: spelvärdesskalan (röd→grön)
   som ritas på samma rutor när "Visa tecken i värdefärger" är på äter hela den
   röd–gröna axeln – värst för röd-grön-blindhet – och blått är teckenrutans
   standardfärg. Mönstret bär informationen som färgen inte kan.

   VAR mönstret ritas beror på om en reducering är körd:

   1. INGEN stapel (ingen reducering än, eller en delad lapp utan andelsdata):
      mönstret är ett ::after över HELA rutan, med en svag wash i gruppfärgen
      så strecken syns även mot den grå/neutrala basen.

   2. MED stapel (.has-fill): mönstret flyttar till stapeln (.overview-sign-fill
      ::before) och klipps därmed till exakt stapelns höjd. Den ofyllda delen
      ovanför lämnas helt ren, så kupong-%-andelen går att läsa av – annars
      lade washen en heltäckande gruppfärg över hela rutan och andelen
      försvann (David 2026-08-27). Ingen wash behövs här: stapeln är redan
      solid gruppfärg.

   .sign-toggle (matchkorten) har ingen stapel alls – hela knappen är solid
   gruppfärg – så där gäller alltid fall 1, utan wash.

   Mönstren är sorterade tydligast → busigast, samma ordning som klickvarvet,
   så grafitens korsstreck (minst läsbart på 22px) bara drabbar den som klickar
   hela varvet runt. */
.overview-sign[data-group]:not(.has-fill)::after,
.overview-sign.has-fill[data-group] .overview-sign-fill::before,
.sign-toggle[data-group]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
}

/* Wash i gruppfärgen – BARA i fall 1 på .overview-sign (grå/neutral bas som
   annars slukar de vita strecken). Inte på stapeln (redan solid färg) och inte
   på .sign-toggle (hela knappen redan solid färg). */
.overview-sign[data-group="pink"]:not(.has-fill)::after {
  background-color: rgba(219, 39, 119, 0.28);
}
.overview-sign[data-group="teal"]:not(.has-fill)::after {
  background-color: rgba(13, 148, 136, 0.28);
}
.overview-sign[data-group="brown"]:not(.has-fill)::after {
  background-color: rgba(146, 64, 14, 0.28);
}
.overview-sign[data-group="violet"]:not(.has-fill)::after {
  background-color: rgba(124, 58, 237, 0.28);
}
.overview-sign[data-group="slate"]:not(.has-fill)::after {
  background-color: rgba(71, 85, 105, 0.3);
}

.overview-sign[data-group="pink"]:not(.has-fill)::after,
.overview-sign.has-fill[data-group="pink"] .overview-sign-fill::before,
.sign-toggle[data-group="pink"]::after {
  /* Diagonala streck ╱ */
  background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.55) 0 2px, transparent 2px 6px);
}

.overview-sign[data-group="teal"]:not(.has-fill)::after,
.overview-sign.has-fill[data-group="teal"] .overview-sign-fill::before,
.sign-toggle[data-group="teal"]::after {
  /* Prickraster */
  background-image: radial-gradient(rgba(255, 255, 255, 0.6) 1.1px, transparent 1.3px);
  background-size: 5px 5px;
}

.overview-sign[data-group="brown"]:not(.has-fill)::after,
.overview-sign.has-fill[data-group="brown"] .overview-sign-fill::before,
.sign-toggle[data-group="brown"]::after {
  /* Lodräta streck ┃ */
  background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.5) 0 2px, transparent 2px 6px);
}

.overview-sign[data-group="violet"]:not(.has-fill)::after,
.overview-sign.has-fill[data-group="violet"] .overview-sign-fill::before,
.sign-toggle[data-group="violet"]::after {
  /* Vågräta streck ━ */
  background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.5) 0 2px, transparent 2px 6px);
}

.overview-sign[data-group="slate"]:not(.has-fill)::after,
.overview-sign.has-fill[data-group="slate"] .overview-sign-fill::before,
.sign-toggle[data-group="slate"]::after {
  /* Korsstreck – busigast, sist i varvet */
  background-image:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.45) 0 2px, transparent 2px 5px),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.45) 0 2px, transparent 2px 5px);
}

/* Fyllnaden kan vara hög (mörkblå bakom texten) eller låg (ljusgrå bakom
   texten) beroende på andelen – en fast textfärg skulle bli oläslig mot
   endera. Vit text med mörk skugga läses mot båda utan att behöva räkna ut
   exakt var brytpunkten mellan bakgrunderna hamnar. */
.overview-sign.has-fill .overview-sign-label {
  color: #fff;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.55);
}

.overview-summary {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  /* Ljus "kvittorad" (2026-09-24) i stället för den nästan svarta: samma
     produktton som översiktens rubrik (--p-color, ärvs från .overview.
     product-*), med en hårlinje ovanför. Kostnaden är fortfarande en solid
     blå bricka längst till höger – det ögat ska landa på. Fallback-färgen
     gäller om översikten ritas utan produktklass. */
  padding: 0.6rem 0.85rem;
  background: color-mix(in srgb, var(--p-color, var(--blue-600)) 13%, #fcfcfb);
  border-top: 1px solid color-mix(in srgb, var(--p-color, var(--blue-600)) 16%, #e8e8e5);
  color: var(--ink);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

.overview-summary b {
  font-weight: 400;
  color: var(--ink-soft);
  margin-right: 0.3rem;
}

.overview-summary .cost {
  margin-left: auto;
  background: linear-gradient(180deg, #3570bd, var(--blue-600));
  color: #fff;
  padding: 0.3rem 1rem;
  border-radius: 999px;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 2px 8px rgba(42, 93, 163, 0.2);
}

/* Insats per rad (bara Topptipset med mer än 1 kr/rad, se stakeText i
   renderSavedOverview) - ligger direkt efter "Oreducerat"/"Reducerat"-talet,
   INNAN kostnadens margin-left:auto skjuter resten av raden åt höger, så
   ordningen blir "Oreducerat 384 | 4 kr/rad | 424 kr". */
.overview-summary .overview-stake {
  color: var(--ink-faint);
  white-space: nowrap;
}

/* "Flest rätt just nu" längst till höger på Reducerat-raden (Live-rättning).
   Egen margin-left:auto i stället för att förlita sig på .cost: kostnaden
   saknas efter spelstopp (rowPrice finns bara i Svenska Spels data), och då
   skulle talet annars klistra sig intill "Reducerat" mitt på raden. Med auto
   på båda hamnar kostnaden först till höger och det här sist, medan det här
   ensamt åker hela vägen ut när kostnaden saknas. */
.overview-summary .overview-best {
  margin-left: auto;
  white-space: nowrap;
}

/* Finns kostnaden (före spelstopp) står den redan längst ut till höger –
   då ska "Flest rätt" stå direkt efter den, inte dela luften med den så
   att kostnadsbrickan hamnar mitt på raden (2026-09-24). */
.overview-summary .cost ~ .overview-best {
  margin-left: 0.9rem;
}

/* Lappens namn efter produktbrickan i kupongöversiktens rubrik. Normalvikt
   och dämpad färg så det läses som en underrubrik – "Kupongöversikt" och
   produktbrickan ska fortsätta vara det ögat tar först. */
.overview-lapp-name {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ink-soft);
}

/* Spelstopp efter produktbrickan i Kupongöversiktens rubrik – diskret, som
   lappnamnet men lite svagare (det är en referensuppgift, inte en titel).
   flex-basis:100% tvingar ned det på egen rad direkt under "Kupongöversikt";
   den negativa top-marginalen drar bort luften den höga produktbrickan annars
   lämnar efter sig, så tiden hamnar tight mot rubriken (David 2026-08-30). */
.overview-draw-close {
  flex-basis: 100%;
  margin-top: -0.25rem;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--ink-faint);
}

.overview-summary .pending {
  color: #9a6b16;
  font-weight: 600;
}

.overview-limits {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 0.7rem;
  font-size: 0.82rem;
  flex-wrap: wrap;
}

.overview-reduced {
  font-weight: 600;
  margin-right: auto;
}

/* Varning i botten av Kupongöversikten när spelvärdet svängt sedan
   reduceringen kördes (samma källa som odds-stale-banner/odds-stale-note
   uppe vid matchkorten, se checkStaleGuards). Egen liten variant av
   .notice – ingen vänsterkant/bakgrund, bara texten i varningsfärg, så den
   inte krockar visuellt med .overview-summary-raden ovanför. */
.overview-stale-note {
  margin: 0;
  padding: 0.4rem 0.7rem;
  font-size: 0.8rem;
  color: #8a5f14;
  background: #fdf6e3;
  border: none;
  border-top: 1px solid #f0e0b8;
}

.overview-limit {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-variant-numeric: tabular-nums;
}

/* Märke efter en färggräns. SYMBOLEN (✓/✗) säger om villkoret är uppfyllt av
   facit-raden just nu; FÄRGEN säger hur säkert det är. Uppdateras vid varje
   poll. */
.overview-limit-mark {
  font-weight: 700;
  font-size: 0.9em;
  line-height: 1;
}

/* Låst uppfyllt – kan inte längre spricka. Alltid ✓. */
.overview-limit-mark.ok {
  color: var(--green-700, #1a7f37);
}

/* Fortfarande öppet – kan svänga åt båda håll. Gul ✓ = stämmer nu men kan
   spricka; gul ✗ = stämmer inte nu men kan lösa sig. Dämpad guld i stället
   för larmande rött. */
.overview-limit-mark.open {
  color: var(--gold-500, #b7791f);
  opacity: 0.8;
}

/* Låst fallerat – kan aldrig mer bli uppfyllt. Alltid ✗. */
.overview-limit-mark.fail {
  color: var(--red-500, #c0392b);
}

/* "Levande rader" – andel reducerade rader som fortfarande kan nå full pott,
   plus (David 2026-09-14) hur många mål bästa raden är från topputdelning på
   SAMMA rad, efter en · -avskiljare. Egen diskret rad under färggränserna,
   samma indrag som .overview-limits. flex-wrap + value som block: på smal
   mobilbredd bryter texten till en andra rad under etiketten i stället för
   att klämmas ihop eller tvinga sidled-scroll – .overview-alive-value är då
   redan 100% bred så "· X mål från Y rätt" wrappar naturligt i sig själv. */
.overview-alive {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.2rem 0.6rem;
  padding: 0.4rem 0.7rem 0.5rem;
  font-size: 0.82rem;
}

.overview-alive-label {
  font-weight: 600;
}

.overview-alive-value {
  flex: 1 1 auto;
  min-width: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
}

.overview-alive-sep {
  margin: 0 0.15rem;
  opacity: 0.55;
}

/* Tre kolumner – rubrik / streck-tid / öppningsodds-brytare – så mittkolumnen
   (streck-tiden) blir centrerad på HELA raden, inte bara i utrymmet mellan
   de andra två (David 2026-09-21: "ska alltid stå centrerat på samma rad"). */
.match-details > summary {
  cursor: default;
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-bottom: 0.6rem;
  font-weight: 600;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.6rem;
}

/* På/av för öppningsodds-raden, uppe till höger på Matchdetaljer-raden
   (David 2026-09-21). Normal vikt/storlek trots att den sitter i en
   <summary> – annars ärver den rubrikens fetstil och känns för dominant
   för en ren visningsinställning. */
.match-extras-toggle {
  /* Två rutor (Öppningsodds + den andra källans odds) staplas på höjden –
     bredvid varandra ryms de inte på en telefon. Vänsterställda inuti den
     högerställda gruppen, så själva kryssrutorna hamnar rakt under varandra
     (David 2026-10-02). */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  justify-self: end;
  font-weight: 400;
  font-size: 0.8rem;
}

.match-extras-toggle label {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  cursor: pointer;
}

.match-extras-toggle input[type="checkbox"] {
  cursor: pointer;
}

/* Gästens "Visa Pinnacle-odds": vanlig färg + ett litet hänglås efter
   texten. Klicket visar förklaringen .match-extras-login-note (se
   renderMatchExtrasToggle). */
.match-extras-lock {
  display: inline-flex;
  color: var(--ink-soft);
}

/* 1.25em: i 0.85em försvann låset bredvid texten (David 2026-10-02). */
.match-extras-lock svg {
  width: 1.25em;
  height: 1.25em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.match-extras-login-note {
  margin: 0 0 0.6rem;
}

/* Streck-tiden, ALLTID synlig (inte en del av showMatchExtras-brytaren) –
   se renderDistributionUpdatedAt. */
.match-extras-updated {
  color: var(--ink-faint);
  font-weight: 400;
  font-size: 0.8rem;
  white-space: nowrap;
  text-align: center;
}

/* Punkten mellan tiden och pilförklaringen, när de står på samma rad. */
.match-extras-updated-arrows::before {
  content: " · ";
  white-space: pre;
}

/* Kort variant av pilförklaringen – bara på de smalaste skärmarna, se nedan. */
.match-extras-arrows-short {
  display: none;
}

/* Smal skärm: rubrik + streck-text + två kryssrutor ryms inte på en rad.
   Rubriken får en egen rad. Under den två rader där texten står till vänster
   och en kryssruta till höger på samma rad:

       Matchdetaljer
       Streck uppdaterat 2 okt. 13:27          [ ] Öppningsodds
       Pilarna visar ändringen senaste 2 h     [ ] Visa Pinnacle-odds

   (David 2026-10-02. Först låg texten kvar i den smala mittkolumnen och bröts
   godtyckligt på upp till fyra rader; sedan stod kryssrutorna bredvid
   rubriken med texten under – snyggare när de delar rad.)

   display: contents löser upp de två behållarna så att deras barn blir egna
   rutor i summary-griden och kan läggas på samma rad parvis. Ärvda
   egenskaper (färg, textstorlek, nowrap) följer med ändå. Gränsen 720 px:
   under den får tre kolumner inte plats bredvid varandra. */
@media (max-width: 720px) {
  .match-details > summary {
    grid-template-columns: 1fr auto;
    gap: 0.2rem 0.6rem;
  }

  .match-details-title {
    grid-column: 1 / -1;
  }

  .match-extras-updated,
  .match-extras-toggle {
    display: contents;
  }

  /* Ärvs av etiketterna trots display: contents – en kryssruta får aldrig
     brytas mellan rutan, texten och hänglåset. */
  .match-extras-toggle {
    white-space: nowrap;
  }

  .match-extras-updated > span {
    grid-column: 1;
    text-align: left;
  }

  .match-extras-toggle > label {
    grid-column: 2;
    justify-self: start;
  }

  .match-extras-updated-time,
  .match-extras-toggle > label:nth-of-type(1) {
    grid-row: 2;
  }

  .match-extras-updated-arrows,
  .match-extras-toggle > label:nth-of-type(2) {
    grid-row: 3;
  }

  .match-extras-updated-arrows::before {
    content: none;
  }
}

@media (max-width: 560px) {
  .match-extras-updated {
    font-size: 0.72rem;
  }

  .match-extras-toggle {
    font-size: 0.74rem;
  }
}

/* De smalaste telefonerna: den långa pilförklaringen ryms inte bredvid
   "Visa Pinnacle-odds" – byt till den korta. */
@media (max-width: 400px) {
  .match-extras-arrows-long {
    display: none;
  }

  .match-extras-arrows-short {
    display: inline;
  }
}

/* 320 px: inte ens den korta texten ryms bredvid gästens "Visa Pinnacle-odds"
   med hänglås. Texterna får var sin hela rad, och de två kryssrutorna delar
   en rad under dem. */
@media (max-width: 340px) {
  .match-extras-updated > span {
    grid-column: 1 / -1;
  }

  .match-extras-toggle > label:nth-of-type(1),
  .match-extras-toggle > label:nth-of-type(2) {
    grid-row: 4;
  }

  .match-extras-toggle > label:nth-of-type(1) {
    grid-column: 1;
  }
}

/* Pil i Odds-raderna: oddsets rörelse de senaste två timmarna (se
   oddsTrendArrow; fram till 2026-10-02 jämfördes mot öppningsoddset).
   Grönt = oddset har SJUNKIT (marknaden tror MER på utfallet nu, "hett"),
   rött = STIGIT (marknaden tror mindre, "kallnar") – samma konvention som
   oddssajter brukar använda (David 2026-09-21, bytte från den ursprungliga
   omvända versionen). */
.odds-move-arrow {
  font-size: 0.7em;
  font-weight: 700;
}

.odds-move-up {
  color: #c0392b;
}

.odds-move-down {
  color: #1f8a57;
}

/* Jämförelseraden med den andra källans odds (kryssrutan på
   Matchdetaljer-raden, se fillMatchStats). Nedtonad så det syns att
   sannolikhet och spelvärde INTE räknas på den. */
.match-stats tr.odds-compare-row > * {
  opacity: 0.55;
}

/* Streckens rörelse i Svenska folket-raden (2026-10-02, se streckMoveArrow):
   "▲ +3" = tre procentenheter fler streck än vid jämförelsetidpunkten.
   Delar färger med odds-pilen. Får inte brytas isär från procenttalet. */
.streck-move {
  white-space: nowrap;
}

/* Ett tal och dess pil hör ihop – cellen får aldrig brytas mellan dem
   ("27 %" på en rad och pilen på nästa, sett på mobil 2026-10-02). */
.match-stats td {
  white-space: nowrap;
}

/* --- Färgpanel ------------------------------------------------------------ */

/* Panelen (2026-09-24): lite mer luft inuti, mjukare kant och den lagrade
   skuggan – samma "vilande kort" som övriga ytor. */
#reduce-panel {
  background: var(--paper-raised);
  border: 1px solid rgba(15, 33, 64, 0.07);
  border-radius: var(--radius-md);
  padding: 1.15rem 1.3rem 1.05rem;
  margin-bottom: 1.2rem;
  box-shadow: var(--shadow-md);
}

/* Exportlådan ("Visa raderna") får samma kortutseende som #reduce-panel så
   den läses som en egen tydlig sektion i toppfältet i stället för att flyta
   fritt mellan knapparna och statusraden (David 2026-08-25). Bara :has(> details)
   ger den bakgrunden – tomt fält (innan en reducering körts) ska inte synas. */
#export-box-slot:has(> details) {
  background: var(--paper-raised);
  border: 1px solid rgba(15, 33, 64, 0.07);
  border-radius: var(--radius-md);
  padding: 1.15rem 1.3rem;
  margin: 1.2rem 0;
  box-shadow: var(--shadow-md);
}

#reduce-panel h2 {
  margin: 0;
  font-size: 1.12rem;
  letter-spacing: -0.015em;
  color: var(--navy-900);
}

/* Rubrik + "Reducera"-knappen på samma rad, knappen högerjusterad. */
.reduce-panel-heading {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 0.7rem;
}

/* Rubriken tar upp resten av raden så "Reducera" knuffas ut till höger
   (motsvarar det gamla justify-content: space-between). */
.reduce-panel-heading h2 {
  flex: 1;
  margin: 0;
}

/* "Reducera" flyttades hit från "Antal rader"-raden 2026-08-29. Den låg
   förut i .controls och ärvde primärknapp-stilen därifrån - nu utanför
   .controls, så stilen sätts explicit här. */
/* Huvudåtgärden (2026-09-24): något större och fylligare än övriga
   knappar så ögat hittar den direkt – det är det man kommer hit för. */
/* Produktfärg för Reducera-knappen och slutrutan i kedjan (David
   2026-09-25). Attributet sätts av updateCurrentProductBadge (06-ui-draw.js)
   med produktens tema-klass; samma två toner som produktkorten i
   03-cards.css. Ingen produkt vald = det gamla blå. */
body {
  --cur-p: #3570bd;
  --cur-p-dark: var(--blue-600);
}
body[data-current-product="product-stryk"] { --cur-p: var(--p-stryk); --cur-p-dark: #1f3d6b; }
body[data-current-product="product-europa"] { --cur-p: var(--p-europa); --cur-p-dark: #15613d; }
body[data-current-product="product-topp"] { --cur-p: var(--p-topp); --cur-p-dark: #a06d16; }
body[data-current-product="product-power"] { --cur-p: var(--p-power); --cur-p-dark: #8f2a1f; }

.reduce-panel-heading #reduce-button {
  background: linear-gradient(180deg, var(--cur-p), var(--cur-p-dark));
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 0.6rem 1.5rem;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  font-family: inherit;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 1px 2px rgba(15, 33, 64, 0.12), 0 4px 14px color-mix(in srgb, var(--cur-p-dark) 22%, transparent);
  transition: transform 0.4s var(--ease-bounce), box-shadow 0.12s var(--ease-out), background 0.15s;
  flex-shrink: 0;
}

.reduce-panel-heading #reduce-button:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 2px 4px rgba(15, 33, 64, 0.1), 0 8px 20px color-mix(in srgb, var(--cur-p-dark) 28%, transparent);
}

.reduce-panel-heading #reduce-button:active {
  transform: translateY(0) scale(0.98);
}

.reduce-panel-heading #reduce-button:focus-visible {
  outline: 2px solid var(--cur-p);
  outline-offset: 2px;
}

/* Kort "klicket registrerades"-kvitto (David 2026-09-14), togglas av
   flashReduceButton i js/07-ui-reduction.js. En ljus ring som blinkar ut och
   ett kort skalhopp – syns tydligt även om man redan flyttat blicken mot
   resultatet innan :active hunnit synas. */
.reduce-panel-heading #reduce-button.reduce-button-flash {
  animation: reduce-button-flash-kick 0.6s var(--ease-bounce);
}

@keyframes reduce-button-flash-kick {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--cur-p) 55%, transparent);
  }
  30% {
    transform: scale(1.06);
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--cur-p) 0%, transparent);
  }
  100% {
    transform: scale(1);
    box-shadow: var(--shadow-sm);
  }
}

/* Enkelt/Avancerat-brytaren till vänster, "Nollställ" högerjusterad rakt
   under "Reducera" – space-between (med en minsta gap som golv) i stället
   för det tidigare rena flex-end, sedan brytaren flyttades hit in på samma
   rad (David 2026-09-21: "kan vi få upp den på samma rad?"). align-items:
   center så pillen och knappen hamnar i höjdled mitt för varandra. gap
   säkerställer avstånd även när utrymmet är knappt (David 2026-09-24: satt
   för tätt ihop, nuddade på mobil). */
.reduce-panel-subheading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0 0 0.7rem;
}

/* Grå och tydligt mindre framträdande än "Reducera" – det här är en
   destruktiv nollställning, inte huvudåtgärden på panelen. Samma
   vertikala padding (0.4rem) och radie som brytarens piller nedanför så
   knappen matchar dess höjd (David 2026-09-24: kortad till "Nollställ",
   för stor tidigare). */
.reduce-panel-subheading #reset-reduction-button {
  background: var(--paper-sunken, #eceae4);
  color: var(--ink-soft);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-sm);
  padding: 0.46rem 0.8rem;
  font-size: 0.8rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.12s var(--ease-out), color 0.12s var(--ease-out);
}

/* "Töm kupongen" i bottenraden under kupongen – samma dämpade grå som
   "Nollställ" ovan, så den inte konkurrerar med "Spara & dela" bredvid. */
#save-bar-bottom .clear-coupon-button {
  background: var(--paper-sunken, #eceae4);
  color: var(--ink-soft);
  border: 1px solid var(--paper-line);
  box-shadow: none;
  font-weight: 600;
}

#save-bar-bottom .clear-coupon-button:hover {
  background: var(--paper-line);
  color: var(--ink);
}

.reduce-panel-subheading #reset-reduction-button:hover {
  background: var(--paper-line);
  color: var(--ink);
}

.reduce-panel-subheading #reset-reduction-button:focus-visible {
  outline: 2px solid var(--blue-500);
  outline-offset: 2px;
}

/* Inget körts än (eller precis nollställt) - grå ut helt och ta bort
   klickbarheten i stället för att låta knappen stå aktiv utan att ha något
   att nollställa. */
.reduce-panel-subheading #reset-reduction-button:disabled {
  opacity: 0.5;
  cursor: default;
}

/* Enkelt/Avancerat-brytaren (David 2026-09-21). Tre tidigare försök: (1) en
   diskret grå knapprad - missades helt; (2) en kantig platta med
   versal-rubrik och hård inset-ram - "blev väldigt kantigt och fult"; (3)
   ett rent understreck utan egen yta - "inte tillräckligt tydligt", trots
   att David gillade grundidén i (2) (en egen, avgränsad yta). Den här
   varianten är en mjuk pill: rundade hörn i stället för räta, en gemensam
   ljusgrå bricka som gör att de två orden läses som EN kontroll (samma
   "spårets" grepp som en riktig on/off-switch), och det aktiva läget får en
   vit platta + mjuk skugga i stället för en linjal-rak ram. */
.reduce-mode-toggle {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--paper-sunken, #eceae4);
  border-radius: 999px;
}

.reduce-mode-btn {
  background: none;
  border: none;
  color: var(--ink-soft);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.4rem 1rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s var(--ease-out), color 0.15s var(--ease-out), box-shadow 0.15s var(--ease-out);
}

.reduce-mode-btn:hover {
  color: var(--ink);
}

/* Det aktiva läget: vit pill + mjuk skugga (ingen border) - känns som en
   fysisk knapp som "trycktes in", tydligt urskiljbar utan att bli kantig. */
.reduce-mode-btn-active {
  background: #fff;
  color: var(--blue-600);
  box-shadow: 0 1px 3px rgba(30, 40, 30, 0.16);
}

.reduce-mode-btn:focus-visible {
  outline: 2px solid var(--blue-500);
  outline-offset: 2px;
}

/* Steg 1-2-3-introraden. Samma layout-familj som .own-save-banner (en
   dismiss-knapp längst till höger), men en neutral blå ton i stället för
   varningsgul – det här är vägledning, inte ett fel. */
.intro-steps-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  /* Mjukare (2026-09-24): rundad blå ton med hårfin kant, samma form som
     .notice, i stället för en hård vänsterlinje. */
  background: #f0f5fc;
  border: 1px solid rgba(47, 111, 191, 0.14);
  color: var(--ink);
  padding: 0.65rem 0.95rem;
  margin: 0 0 0.9rem;
  font-size: 0.85rem;
  line-height: 1.5;
  border-radius: var(--radius-md);
  animation: rise-in 0.6s var(--ease-spring) both;
}

.intro-steps-text {
  flex: 1;
  min-width: 0;
  margin: 0;
}

/* Mobil (2026-09-24): krysset stannar uppe till höger bredvid texten i
   stället för att få en egen rad under den – samma information på mindre
   yta. Förut staplades rutan i en kolumn och krysset hamnade ensamt nere
   till höger. */
@media (max-width: 560px) {
  .intro-steps-banner {
    align-items: flex-start;
    padding-right: 0.5rem;
  }

  /* align-self: flex-start vinner över .own-save-dismiss { align-self:
     flex-end } (06-responsive-dialogs.css, gjord för den staplade
     varningsrutan) tack vare högre specificitet. */
  .intro-steps-banner .own-save-dismiss {
    align-self: flex-start;
    margin-top: -0.2rem;
  }
}

/* Kostnadsindikatorn bredvid "Max antal rader" - direkt efter
   återställningspilen på samma rad ("32 kr" i stället för en lösryckt
   egen rad med "= 32 kr", David 2026-09-24). Egen kolumn (4), och
   .stake-field-group (Topptipset/PowerPlay-insatsen) knuffades samtidigt
   ett steg åt höger till kolumn 5 så de två inte krockar i samma cell när
   insatsfältet visas. Samma dämpade ton som andra .hint-texter i panelen. */
.reduce-field-row-rows .reduce-field-cost {
  grid-column: 4;
  grid-row: 1;
  margin: 0;
  white-space: nowrap;
}

/* Antal rader/Reducera, odds-spann och spelvärdesspann ligger på var sin rad
   – varje rad är ett eget villkor, så de ska läsas som tre skilda beslut i
   stället för att flyta ihop i en enda rad med blandade etiketter. */
#reduce-panel > .controls {
  margin-bottom: 0.6rem;
}

#reduce-panel > .controls:last-of-type {
  margin-bottom: 0.8rem;
}

/* En .controls-rad som följer direkt på en <details> (t.ex. "Fördela raderna
   efter" rakt under den utfällda "Vad betyder lägena?") låg nästan klistrad
   mot panelen ovanför – varken <details> eller .controls hade marginal åt det
   hållet. Ge raden luft så den läser som ett eget block. */
#reduce-panel > details + .controls {
  margin-top: 1rem;
}

/* Antal rader/Reducera, odds-spann och spelvärdesspann i ett gemensamt
   grid-rutnät: samma etikettkolumn-bredd på alla tre raderna, så "Antal
   rader", "Total-odds mellan" och "Totalt spelvärde mellan" radar upp sig
   rakt i stället för att flyta olika långt beroende på textlängd. */
.reduce-field-row {
  display: grid;
  grid-template-columns: 11.5rem max-content max-content max-content max-content 1fr;
  align-items: center;
  column-gap: 0.6rem;
  flex-wrap: nowrap;
}

/* Återställningspilen ligger alltid i samma kolumn på alla tre raderna, så
   de tre ⟳-knapparna radar upp sig rakt under varandra. Odds-/spelvärdes-
   raderna fyller kolumn 2–4 (fält, "och", fält) medan "Antal rader" bara
   fyller kolumn 2 – utan explicit placering skulle den översta pilen hamna
   i kolumn 3 och hänga ensam till vänster om de andra två. */
/* Negativ vänstermarginal drar pilen närmre fältet den återställer i stället
   för att stå mitt emellan sin egen kolumn och nästa (David 2026-08-26:
   "jag vill ha de där runda pilarna närmre boxarna de är intill"). */
/* Odds-/spelvärdesfält du inte själv skrivit i: systemets eget spann, bara
   information – ingen gräns (se rangeLimitValue i 07-ui-reduction.js). Grå
   siffror skiljer dem från dina egna gränser. */
.reduce-field-row input.range-auto {
  color: var(--ink-faint);
}

.reduce-field-row .field-reset {
  grid-column: 5;
  grid-row: 1;
  margin-left: -0.3rem;
}

/* "Antal rader"-raden (.reduce-field-row-rows) har inget "Reducera" längre
   (flyttat till rubrikraden 2026-08-29) - pilen sitter direkt efter fältet
   i stället för längst ut. Klassen ersätter det gamla :has(#reduce-button). */
.reduce-field-row-rows .field-reset {
  grid-column: 3;
  margin-left: -0.3rem;
}

/* Pulserar när alla matcher har fått ett tecken - en visuell knuff om att
   systemet är redo att reduceras (se all-filled-togglingen i renderDraw,
   js/06-ui-draw.js).
   Samma ring-teknik som .app-league-chip.pulsing i KC-projektet (style.css):
   en snabb puff till 70% följt av tystnad till 100%, i stället för ett
   symmetriskt andetag ut/in - det är den korta pausen efter puffen som gör
   den kännas som en enda mjuk ring snarare än att knappen "andas"
   (David 2026-08-26: "lika snyggt som ... ligabyten").
   Tillbaka till blått (David 2026-08-26: "prova gör den i blått") efter ett
   test med rött - men med samma starkare kontrast (spridning 0.85rem,
   starttäthet 0.65) som gjorde det röda försöket tydligare än det första
   blå. Långsam 3.6s-cykel så den inte känns stressande. */
#reduce-button.all-filled {
  animation: reduce-button-pulse 3.6s ease-out infinite;
}

@keyframes reduce-button-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--cur-p) 65%, transparent); }
  70%  { box-shadow: 0 0 0 0.85rem color-mix(in srgb, var(--cur-p) 0%, transparent); }
  100% { box-shadow: 0 0 0 0.85rem color-mix(in srgb, var(--cur-p) 0%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
  #reduce-button.all-filled {
    animation: none;
  }
}

/* Insats per rad (bara Topptipset, se index.html/showTopptipsetStakeFields)
   ligger efter pilen OCH kostnadsindikatorn (kolumn 4) på "Antal
   rader"-raden - startar därför i kolumn 5 i stället för 4 (David
   2026-09-24: kostnaden flyttades in i kolumn 4, se .reduce-field-cost
   ovan). "Reducera" flyttades till rubrikraden 2026-08-29 så restkolumnen
   är ledig igen. */
.reduce-field-row .stake-field-group {
  grid-column: 5 / -1;
  grid-row: 1;
  justify-self: start;
}

/* .controls button (ovan) ger annars en blå knappbox med skugga – för
   diskret för att inte konkurrera med de riktiga knapparna, bara en liten
   återställningspil bredvid fälten. */
.controls button.field-reset {
  background: none !important;
  border: none !important;
  border-radius: var(--radius-sm);
  color: #8a8880;
  font-size: 1rem;
  line-height: 1;
  padding: 0.25rem 0.4rem;
  cursor: pointer;
  box-shadow: none !important;
  transition: color 0.15s;
}

.controls button.field-reset:hover {
  color: var(--blue-500);
  transform: none;
  box-shadow: none !important;
}

.field-reset:focus-visible {
  outline: 2px solid var(--blue-500);
  outline-offset: 1px;
}

.reduce-field-label {
  font-weight: 600;
  color: var(--ink);
}

.reduce-field-and {
  justify-self: start;
}

/* Odds ↔ spelvärde-valet + spelvärdeskurvans centrum/bredd (se
   #reduction-dimension-row / #value-bin-row i index.html). Ligger direkt under
   fördelningsväljaren och visas bara i lägena Strikt/Flexibel. Samma klass
   används av själva lägesväljaren (Ingen/Strikt/Flexibel). */
.radio-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  color: var(--ink);
  cursor: pointer;
}

.radio-label input[type="radio"] {
  width: 1rem;
  height: 1rem;
  accent-color: var(--blue-500);
  cursor: pointer;
}

/* Odds/spelvärde-raden, "egen kurva"-kryssrutan och centrum/bredd-raderna dras
   in så de läser som underalternativ till fördelningsväljaren ovanför.
   "Egen kurva" dras in ytterligare ett steg – den hör till Odds-intervall. */
.reduction-dimension-controls,
.value-bin-controls {
  margin-left: 1.6rem;
}

.odds-curve-controls,
#odds-curve-fields,
#odds-curve-hint {
  margin-left: 3.2rem;
}

.value-bin-controls input[type="range"] {
  flex: 1 1 8rem;
  max-width: 12rem;
  accent-color: var(--blue-500);
}

.value-bin-spread-out {
  min-width: 2.2rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
}

/* Stegets förklaring hör till reglaget, inte till hjälptexten under:
   ligger inne i reglagets .controls-rad men bryts till en egen hel rad
   (flex-basis 100 %), så radens margin-bottom skiljer den från .hint. */
/* "Spelvärde" och "Odds" vid reglagets två ändar – visar vilken sida av
   100/0 … 0/100 som är vilket. */
.favorite-weight-end {
  font-size: 0.82rem;
  color: var(--ink-soft);
}

.favorite-weight-step {
  flex-basis: 100%;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
}

#value-bin-hint {
  margin-left: 1.6rem;
}

@media (max-width: 560px) {
  /* Rubrikraden staplar om: "Reducera systemet" på egen rad, sedan
     "Reducera"-knappen i full bredd rakt under. */
  .reduce-panel-heading {
    flex-wrap: wrap;
  }

  .reduce-panel-heading h2 {
    flex: 1 1 100%;
  }

  .reduce-panel-heading #reduce-button {
    flex: 1 1 100%;
    width: 100%;
  }

  /* Tre kolumner (etikett + kostnad + pil) i stället för en, så rubriken
     ("Antal rader" m.fl.), kostnadsindikatorn och återställningspilen kan
     dela samma rad i stället för att radbrytas var för sig (David
     2026-08-26: "Rubriken till fälten kan vara på samma rad som pilen.
     Annars ser det konstigt ut."). Mittenkolumnen är tom/oanvänd på de
     rader som saknar kostnadsindikator (odds-/spelvärdesspannen). Alla
     andra element (input-fält, Insats-fältet) spänner över alla tre
     kolumnerna med grid-column: 1 / -1 nedan. */
  .reduce-field-row {
    grid-template-columns: 1fr auto auto;
    row-gap: 0.4rem;
  }

  /* Rubriken ligger i kolumn 1, pilen i kolumn 3 - samma rad (grid-row: 1
     krävs inte explicit, de hamnar där naturligt eftersom de är bland de
     första grid-items i sin auto-placerade rad). */
  .reduce-field-label {
    grid-column: 1;
  }

  /* Pilen låg tidigare på egen rad UNDER/ÖVER fältet - ligger nu bredvid
     rubriken i stället (kolumn 3, samma rad som .reduce-field-label ovan).
     Måste override:as explicit här - .reduce-field-row-rows .field-reset
     (desktop, "Antal rader"-radens egen pilplacering) har högre
     specificitet än denna vanliga .field-reset-regel och läckte annars
     igenom på mobil, vilket kraschade layouten (David 2026-08-26). */
  .reduce-field-row .field-reset,
  .reduce-field-row-rows .field-reset {
    grid-column: 3;
    grid-row: auto;
    order: 0;
    justify-self: end;
    margin: 0;
  }

  /* Kostnaden mellan rubriken och pilen (kolumn 2, samma rad) i stället
     för en egen rad under - samma placering i andan som på desktop. */
  .reduce-field-row-rows .reduce-field-cost {
    grid-column: 2;
    grid-row: 1;
    order: 0;
    justify-self: end;
  }

  /* Rubrik, kostnad och återställningspil på SAMMA rad (rad 1) i
     "Max antal rader". Utan explicit rad placerade rutnätet pilen (kolumn 3)
     före kostnaden (kolumn 2) i flödet – då fanns ingen plats kvar till
     vänster om pilen och kostnaden föll ner på en egen rad (2026-09-24). */
  .reduce-field-row-rows .reduce-field-label,
  .reduce-field-row-rows .field-reset {
    grid-row: 1;
  }

  .reduce-field-and {
    display: none;
  }

  /* Spänner över båda kolumnerna (i stället för desktopgridets smalare
     kolumn 2) så fälten fortfarande fyller hela radens bredd under
     rubrik+pil-raden. */
  #target-rows,
  #odds-min,
  #odds-max,
  #value-min,
  #value-max {
    grid-column: 1 / -1;
    width: 100%;
    order: 1;
  }

  .reduce-field-row .stake-field-group {
    grid-column: 1 / -1;
    grid-row: auto;
    order: 2;
    justify-self: start;
  }

  /* "Max antal rader" på mobil (David 2026-09-24): fältet var fullbrett trots
     att det bara rymmer ett tal, och på Topptipset/PowerPlay hamnade
     "Insats per rad" med sin lilla ruta på en egen rad under det, så de två
     inte såg ut att höra ihop. Nu fyra kolumner: rubrik över kolumn 1–2,
     kostnad och pil som förut, och på rad 2 ett kompakt radfält till vänster
     med insatsen till höger på SAMMA rad. Står efter de allmänna reglerna
     ovan så den här radens placering vinner. */
  .reduce-field-row-rows {
    grid-template-columns: max-content 1fr auto auto;
  }

  .reduce-field-row-rows .reduce-field-label {
    grid-column: 1 / 3;
  }

  .reduce-field-row-rows .reduce-field-cost {
    grid-column: 3;
  }

  .reduce-field-row-rows .field-reset {
    grid-column: 4;
  }

  .reduce-field-row-rows #target-rows {
    grid-column: 1;
    width: 6.5rem;
  }

  .reduce-field-row-rows .stake-field-group {
    grid-column: 2 / -1;
    grid-row: 2;
    justify-self: end;
  }
}

#reduce-panel > details {
  border-top: 1px solid var(--hairline);
  padding-top: 0.65rem;
  margin-top: 0.65rem;
}

#reduce-panel > details > summary {
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--ink-soft);
  font-weight: 600;
}

/* Luft mellan rubriken (<summary>) och panelens första rad – utan detta
   klistras "Antal färggrupper …" mot "Färggrupper med min/max per rad". */
#reduce-panel > details[open] > summary {
  margin-bottom: 0.7rem;
}

/* "Vad betyder lägena?" är den enda <details> i panelen med löpande brödtext
   (de andra innehåller bara fält + .hint). Samma dämpade storlek som .hint,
   men med luft mellan styckena så hink-liknelsen går att läsa. */
#reduction-mode-help > p {
  font-size: 0.85rem;
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 0.5rem 0 0;
}

#reduction-mode-help > p strong {
  color: var(--ink);
}

#color-panel {
  padding: 0;
  margin-bottom: 0;
}

#color-picker {
  display: flex;
  gap: 0.3rem;
}

#color-limits {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  margin: 0.5rem 0 0.8rem;
}

/* Inga färggrupper valda (0) = tom tabellkropp. Då visas inte heller
   rubrikraden "Grupp · Utsatta · Minst …", som annars stod ensam utan
   innehåll (2026-09-24). Tabellen kommer tillbaka så fort en grupp väljs. */
#color-limits:has(tbody:empty) {
  display: none;
}

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

#color-limits td {
  padding: 0.25rem 0.4rem;
  border-bottom: 1px solid #f2f2ef;
}

/* "Utsatta" ar en ren rakning och laser battre centrerad under sin rubrik an
   vansterstalld mot en tom kolumn (David 2026-09-09). Bade rubrikcellen och
   varden centreras - annars hamnar de i otakt igen. Nth-child(2) i stallet
   for en klass: cellen byggs av buildColorLimitRows utan egen krok, och
   kolumnordningen ar fast i markupen ovanfor. */
#color-limits th:nth-child(2),
#color-limits td:nth-child(2) {
  text-align: center;
}

/* "Chans" (David 2026-09-09): sannolikheten att den riktiga raden hamnar
   inom gruppens Minst/Högst. Samma ren-rakning-laser-battre-centrerad
   motivering som Utsatta ovan, och samma nth-child-teknik. */
#color-limits th:nth-child(5),
#color-limits td:nth-child(5) {
  text-align: center;
}

.color-chance {
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
  font-weight: 600;
}

/* Markerar en chans som INTE räknar med alla markerade matcher (någon
   saknar odds ännu) - samma dämpade varningston som hit-chance-warn i
   träffchans-panelen, men diskret nog för en tabellcell: kursiv i stället
   för egen rad, förklaringen ligger i title-attributet. */
.color-chance-partial {
  font-style: italic;
}

/* Totalraden (David 2026-09-09): chansen att alla gruppers villkor haller
   samtidigt. Ligger i <tfoot> och ska laesas som en SUMMERING av kolumnen
   ovanfor, inte som en farggrupp till - darfor ingen fargprick, en tydligare
   overlinje i stallet for radernas tunna avdelare, och etiketten i samma
   dampade versaler som andra summeringsrader i appen. */
.color-total-row td {
  border-top: 2px solid #d8d7d0;
  border-bottom: none;
  padding-top: 0.45rem;
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 600;
}

.color-total-value {
  /* Sjalva talet ar radens poang och far full inkfarg + normal storlek,
     medan etiketten bredvid ar dampad - samma rollfordelning som
     hit-chance-figure mot hit-chance-caption i traffchans-panelen. */
  font-size: 0.9rem;
  color: var(--ink);
  text-transform: none;
  letter-spacing: 0;
}

.swatch-dot {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 2px;
  vertical-align: middle;
  margin-right: 0.3rem;
}

.color-count {
  color: #8a8d93;
  font-variant-numeric: tabular-nums;
}

.limit-select {
  border: 1px solid #ccccc8;
  border-radius: 3px;
  padding: 0.15rem 0.3rem;
  font-family: inherit;
  font-size: 0.85rem;
  background: #fff;
  min-width: 3.2rem;
}

.limit-select:disabled {
  background: var(--paper);
  color: #b0b3b8;
  cursor: not-allowed;
}

/* --- Resultat av reducering ---------------------------------------------- */

/* Frysta snapshotet i historikvyn (se renderFrozenReductionSnapshot,
   09-history.js) – bara en marginal ovanför rättningsresultatet som
   återanvänder .reduce-summary/.dist-chart/.stats-box rakt av. */
.reduce-summary-frozen {
  margin-bottom: 1.2rem;
}

/* Reduceringskedjan: hela vägen från startantal till valda rader i en enda
   rad av kapslar, med pilar som visuella separatorer. Detta är resultatets
   viktigaste rad – den ska läsas som ett resultat, inte skummas som en
   logg-textrad. Sista kapseln (valda rader) är resan MÅL och får därför
   egen färg och större vikt än stegen som leder dit. */
.reduce-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.8rem 0;
}

.reduce-chain-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  background: #fcfcfb;
  border: 1px solid #ebeae6;
  border-radius: 10px;
  padding: 0.45rem 0.8rem;
  line-height: 1.15;
}

.reduce-chain-value {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.reduce-chain-label {
  font-size: 0.68rem;
  color: var(--ink-faint);
  white-space: nowrap;
}

.reduce-chain-arrow {
  color: #c7c6bf;
  font-size: 0.95rem;
  flex-shrink: 0;
}

.reduce-chain-final {
  background: linear-gradient(180deg, var(--cur-p), var(--cur-p-dark));
  border-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 4px 14px color-mix(in srgb, var(--cur-p-dark) 22%, transparent);
}

.reduce-chain-final .reduce-chain-value {
  color: #fff;
  font-size: 1.15rem;
}

.reduce-chain-final .reduce-chain-label {
  color: rgba(255, 255, 255, 0.82);
}

/* Liten extrarad i den bla slutrutan: slutantalet som andel av det
   oreducerade. Diskret - en snabb kansla for hur hart man bantat, inte
   ett tal att stirra pa. */
.reduce-chain-share {
  font-size: 0.64rem;
  color: rgba(255, 255, 255, 0.7);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (max-width: 560px) {
  .reduce-summary {
    gap: 0.3rem;
  }

  .reduce-chain-step {
    padding: 0.3rem 0.5rem;
    max-width: 8rem;
  }

  .reduce-chain-value {
    font-size: 0.88rem;
  }

  .reduce-chain-final .reduce-chain-value {
    font-size: 1rem;
  }

  /* Långa etiketter ("efter flexibel fördelning (spelvärde)") får bryta rad på
     smala skärmar i stället för att spränga kedjan i sidled. */
  .reduce-chain-label {
    white-space: normal;
    text-align: center;
  }
}

/* --- Traffchans ----------------------------------------------------------
   Ligger direkt under reduceringskedjan och svarar pa "sitter reduceringen?".

   HALLNINGEN (David 2026-09-09: inte kladdigt, inte for mycket information):
   ett enda stort tal - andelen av systemets chans som overlevde reduceringen -
   och darunder en mening som visar de tva tal det ar byggt av. Alternativet,
   tre likvardiga stat-kort, provades bort pa ritbordet: tre procenttal bredvid
   varandra tvingar lasaren att sjalv rakna ut vilket som ar svaret.

   Formen ar medvetet INTE ett .stat-item-kort eller en .reduce-chain-kapsel.
   Kedjan ovanfor ager kapselformen och raknar RADER; den har remsan raknar
   SANNOLIKHET och skiljs at med en vanster linjal i produktblatt i stallet
   for en ram - samma grepp som en marginalanteckning, inte en ny panel. */
.hit-chance {
  position: relative;
  margin: 0.9rem 0 1rem;
  padding: 0.75rem 0.9rem 0.75rem 1.1rem;
  background: linear-gradient(90deg, rgba(47, 111, 191, 0.06), rgba(47, 111, 191, 0.015) 70%, transparent);
  border-radius: var(--radius-md);
}

/* Linjalen (2026-09-24): samma marginalanteckning som förut, men som en
   rundad stapel inne i rutan i stället för en skarp vänsterkant. */
.hit-chance::before {
  content: "";
  position: absolute;
  left: 0.35rem;
  top: 0.7rem;
  bottom: 0.7rem;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--blue-500), color-mix(in srgb, var(--blue-500) 45%, transparent));
}

.hit-chance-main {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Talet barr hela remsan, sa det far vara stort - men i --ink, inte i blatt:
   blatt ar redan kedjans slutkapsel, och tva blaa "viktigaste tal" i rad
   konkurrerar om samma blick. */
.hit-chance-figure {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.hit-chance-unit {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink-soft);
  margin-left: 0.1rem;
}

.hit-chance-caption {
  font-size: 0.82rem;
  color: var(--ink-soft);
  max-width: 22rem;
  line-height: 1.3;
}

.hit-chance-note {
  margin: 0.35rem 0 0;
  font-size: 0.78rem;
  color: var(--ink-faint);
  line-height: 1.45;
}

.hit-chance-note strong {
  color: var(--ink-soft);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Chansen på full pott och ramens träffchans (David 2026-09-24: "den är
   viktig", "ramens träffchans kan också vara större") – står kvar i
   meningen men större, fetare och i full bläckfärg så de hittas direkt. */
.hit-chance-note strong.hit-chance-key {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  /* Talet och "%" får aldrig brytas isär (hände på mobil: "0,05" på en
     rad, "%" på nästa). */
  white-space: nowrap;
}

.hit-chance-warn {
  margin: 0.35rem 0 0;
  font-size: 0.75rem;
  color: #8a6110;
}

/* Fall-ut-delen ligger inne i remsan och ska darfor inte ha stats-boxens
   egna ytterluft. */
.hit-chance-more {
  margin-top: 0.5rem;
}

/* "Chans per antal ratt" ar inte langre bakom en <details> (David
   2026-09-09: ska alltid synas). Rubrikraden ersatter den forna
   <summary>-texten. */
.hit-ladder-block {
  margin-top: 0.6rem;
}

.hit-ladder-heading {
  margin: 0 0 0.1rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.hit-ladder {
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
  margin-top: 0.4rem;
  max-width: 24rem;
}

.hit-ladder-row {
  display: grid;
  grid-template-columns: 3.6rem 1fr 3.2rem;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.76rem;
}

.hit-ladder-k {
  color: var(--ink-soft);
  white-space: nowrap;
}

.hit-ladder-track {
  height: 0.42rem;
  background: rgba(15, 33, 64, 0.07);
  border-radius: 999px;
  overflow: hidden;
}

.hit-ladder-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--blue-500), var(--blue-700));
  border-radius: 999px;
}

.hit-ladder-p {
  text-align: right;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.hit-chance-foot {
  margin: 0.45rem 0 0;
  font-size: 0.72rem;
  color: var(--ink-faint);
  line-height: 1.4;
}

/* Fall-ut-forklaringen "Vad betyder de har talen?": lopande text, samma
   dampade ton som reduction-mode-help. Smalt matt for lasbarhet. */
.hit-chance-guide-body {
  margin-top: 0.4rem;
  max-width: 32rem;
}

.hit-chance-guide-body p {
  margin: 0 0 0.5rem;
  font-size: 0.78rem;
  color: var(--ink-soft);
  line-height: 1.5;
}

.hit-chance-guide-body p:last-child {
  margin-bottom: 0;
}

.hit-chance-guide-body strong {
  color: var(--ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 560px) {
  .hit-chance-figure {
    font-size: 1.45rem;
  }

  .hit-chance-caption {
    font-size: 0.78rem;
  }

  .hit-ladder-row {
    grid-template-columns: 3.2rem 1fr 2.9rem;
  }
}

#reduce-result {
  animation: rise-in 0.6s var(--ease-spring) both;
}

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

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.6rem;
}

/* "Visa medel- och medianvärden" – utfällbar del under grundmåtten.
   <details>/<summary> sköter öppna/stäng; vi tar bara bort webkitens
   default-triangel och lägger en egen som roterar. */
.stats-more {
  margin-top: 0.6rem;
}

.stats-more-toggle {
  list-style: none;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--blue-700, #2f6fbf);
  padding: 0.3rem 0;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  user-select: none;
}

.stats-more-toggle::-webkit-details-marker {
  display: none;
}

.stats-more-toggle::before {
  content: "▸";
  font-size: 0.7rem;
  transition: transform 0.4s var(--ease-bounce);
}

.stats-more[open] .stats-more-toggle::before {
  transform: rotate(90deg);
}

.stats-more[open] .stats-grid {
  margin-top: 0.5rem;
}

.stat-item {
  background: #fcfcfb;
  border: 1px solid #e8e8e5;
  border-radius: var(--radius-md);
  padding: 0.55rem 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.15rem;
  transition: transform 0.4s var(--ease-bounce), box-shadow 0.15s;
}

.stat-item:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-sm);
}

.stat-label {
  font-size: 0.72rem;
  color: #898781;
}

.stat-value {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.dist-chart {
  position: relative;
  background: #fcfcfb;
  border: 1px solid #e8e8e5;
  border-radius: var(--radius-md);
  padding: 0.8rem 0.8rem 0.5rem;
  margin: 0.6rem 0;
}

/* Produktfärgad variant (decorateDistChartWithProduct i 07-ui-reduction.js).
   --p-color sätts inline på elementet till produktens grundfärg; här blandas
   den ut till en svag ton (~10 %) mot den neutrala pappersbakgrunden – tydligt
   synlig att grafen "tillhör" produkten (David 2026-09-06), men fortfarande
   ljus nog att de grå "innan"-staplarna och de tunna rutnätslinjerna behåller
   sin kontrast. Kanten får mer av färgen så ramen inte ser frånkopplad ut mot
   den tonade ytan. */
.dist-chart-product {
  background: color-mix(in srgb, var(--p-color) 7%, #fcfcfb);
  border-color: color-mix(in srgb, var(--p-color) 20%, #e8e8e5);
}

/* Wordmark-skylten uppe till höger, absolut placerad i .dist-chart
   (position: relative). SVG:n reserverar numera ett tomt toppband (marginTop
   = 40 i 07-ui-reduction.js) där varken staplar, radantalssiffror, rutnät,
   y-etiketter eller trendkurva ritas – skylten sitter i det bandet och kan
   därför aldrig hamna framför något i grafen, oavsett hur hög den högsta
   stapeln är. pointer-events: none så den aldrig fångar ett klick/tap som var
   menat för en stapel eller tooltip under. Samma band/rundning/skugga som
   Live-rubrikens .correction-heading-plate, bara mindre. */
.dist-chart-plate {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  display: inline-flex;
  align-items: center;
  height: 1.4rem;
  padding: 0 0.5rem;
  border-radius: var(--radius-sm, 6px);
  background: var(--p-color, var(--navy-800));
  box-shadow: var(--shadow-sm);
  pointer-events: none;
}

.dist-chart-plate img {
  height: 0.62rem;
  width: auto;
  display: block;
}

/* Spelstoppsdatumet – litet och dämpat, HÖGST UPP TILL VÄNSTER i grafrutan
   (David 2026-09-06). Sitter i SVG:ns reserverade toppband (marginTop = 40),
   ovanför översta y-etiketten, översta rutnätslinjen och trendkurvans topp –
   inget i plotten ritas så högt upp, så datumet krockar aldrig med en stapel,
   siffra eller kurva. */
.dist-chart-close {
  position: absolute;
  left: 0.55rem;
  top: 0.3rem;
  font-size: 0.58rem;
  font-weight: 600;
  color: var(--ink-soft, #6b7280);
  letter-spacing: 0.01em;
  pointer-events: none;
}

.dist-svg {
  width: 100%;
  height: auto;
  display: block;
  /* En grå "innan"-stapel kan gå över den blå skalan i antalsläget – den
     ska klippas mot grafens kant, inte ritas ut i marginalen. */
  overflow: hidden;
}

/* Hela grafrutan är klickbar (David 2026-09-06, utökad 2026-09-11). I
   bygg-vyns live-graf växlar ett klick (utom på en stapel) y-axeln mellan
   absolut antal och andel. I den frusna grafen (sparade lappar) har rutan
   TVÅ växlingsytor: klick på y-axelrubriken ("Antal rader"/"Andel av rader")
   växlar y-skalan, klick på resten av rutan (x-axelrubriken inkluderad)
   växlar x-axeln mellan Total-odds och Totalt spelvärde. cursor: pointer på
   wrappern, men staplarna behåller sin egen pointer (de har egen
   hover/tap-tooltip). */
.dist-chart-clickable {
  cursor: pointer;
}

.dist-bar {
  transition: opacity 0.2s;
  cursor: pointer;
}

.dist-bar:hover,
.dist-bar:focus-visible {
  opacity: 0.8;
  outline: none;
}

/* En grå "innan"-stapel som är högre än den blå skalan (antalsläget, David
   2026-09-06) klipps mot plottens överkant. Fyrkantig topp så den läser som
   "avskuren", inte som en färdig stapel som råkar sluta där. rx-attributet på
   elementet rundar botten; overflow: hidden på SVG:n döljer det som ändå
   ritas ovanför. */
.dist-bar-clipped {
  rx: 0;
}

/* Uppritningsanimation (David 2026-09-06): staplarna växer upp från
   baslinjen och trendkurvan tonar in, en gång när grafen ritas (efter en
   reducering, eller när en sparad lapp öppnas). transform-box: fill-box gör
   att transform-origin räknas mot stapelns egen ruta, inte hela SVG:n, så
   scaleY-ankaret verkligen hamnar vid stapelns fot. animation-delay sätts
   inline per stapel (dist-bar-i / --bar-delay) för en trappa vänster→höger. */
@keyframes dist-bar-grow {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}

/* Trendkurvan RITAS ut vänster→höger i takt med staplarna (David 2026-09-08:
   "den blå linjen som visar kurvan animeras när staplarna finns där också").
   <path> har pathLength="1", så stroke-dasharray:1 = hela längden och
   stroke-dashoffset går 1 → 0 (dold → helt uppritad). Slutopaciteten (0.45,
   samma som .dist-trend-line i 05-correction-live.css) sätts i samma
   keyframe så kurvan inte poppar in när den är klar. */
@keyframes dist-trend-draw {
  from {
    stroke-dashoffset: 1;
    opacity: 0.45;
  }
  to {
    stroke-dashoffset: 0;
    opacity: 0.45;
  }
}

/* Sifferetiketterna ovanför (eller inne i) staplarna tonar in i takt med
   sin egen stapel – de ärver samma --bar-delay som stapeln (sätts inline i
   JS) plus stapelns egen växttid, så siffran dyker upp precis när stapeln
   är på plats (David 2026-09-08). */
@keyframes dist-count-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.dist-chart-animate .dist-bar {
  transform-box: fill-box;
  transform-origin: bottom;
  /* Ungefär dubbelt så långsam uppbyggnad som förr (David 2026-09-08:
     "jag skulle också vilja att animationen är långsammare"): 0,42 s → 0,8 s
     per stapel, och trappan 45 ms → 90 ms per kolumn (--bar-delay i JS). */
  animation: dist-bar-grow 0.9s var(--ease-spring) both;
  animation-delay: var(--bar-delay, 0s);
}

.dist-chart-animate .dist-count-label {
  /* Stapelns egen delay + ungefär stapelns växttid, så siffran kommer när
     stapeln nått sin topp. */
  animation: dist-count-fade 0.3s ease-out both;
  animation-delay: calc(var(--bar-delay, 0s) + 0.55s);
}

.dist-chart-animate .dist-trend-line {
  stroke-dasharray: 1;
  animation: dist-trend-draw 0.9s ease-in-out both;
  /* Efter sista stapeln (9 fack × 90 ms ≈ 0,8 s) + stapelns växttid (0,8 s). */
  animation-delay: 1.35s;
}

/* Medel-/median-linjerna och deras etiketter tonar in tillsammans med
   trendkurvan, när staplarna är på plats – annars står de och pekar på
   halvfärdiga staplar. fade-general: en enkel opacitetstoning till 1. */
.dist-chart-animate .dist-mark-mean,
.dist-chart-animate .dist-mark-median,
.dist-chart-animate .dist-mark-facit,
.dist-chart-animate .dist-mark-label {
  animation: dist-mark-fade 0.45s ease-out both;
  /* Strax efter att trendkurvan börjat ritas (1,35 s). */
  animation-delay: 1.6s;
}

@keyframes dist-mark-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dist-chart-animate .dist-bar,
  .dist-chart-animate .dist-count-label,
  .dist-chart-animate .dist-trend-line,
  .dist-chart-animate .dist-mark-mean,
  .dist-chart-animate .dist-mark-median,
  .dist-chart-animate .dist-mark-facit,
  .dist-chart-animate .dist-mark-label {
    animation: none;
  }
  /* Utan animation måste kurvan vara helt uppritad direkt. */
  .dist-chart-animate .dist-trend-line {
    stroke-dashoffset: 0;
  }
}

/* Delad tooltip-bubbla: fördelningsdiagrammets staplar (.dist-bar) och
   Live-rättningens fyllda 1/X/2-rutor (.live-cell-fill) använder samma
   utseende och samma JS-hjälpare (setupHoverTooltip). */
.dist-tooltip,
.live-tooltip,
.overview-tooltip {
  position: absolute;
  transform: translate(-50%, -100%) translateY(-8px);
  background: var(--navy-800, #1f2a44);
  color: #fff;
  font-size: 0.76rem;
  line-height: 1.3;
  padding: 0.35rem 0.55rem;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  pointer-events: none;
  box-shadow: var(--shadow-sm);
  z-index: 5;
}

.dist-tooltip::after,
.live-tooltip::after,
.overview-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  /* --arrow-x default 50 % (pilen mitt under bubblan). setupHoverTooltip
     sätter ett annat värde när bubblan klämts in från en wrapper-kant, så
     pilen fortfarande pekar på målet. */
  left: var(--arrow-x, 50%);
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--navy-800, #1f2a44);
}

/* Bubbla UNDER målet i stället för över (kupongöversikten – se
   setupHoverTooltip): pilen pekar uppåt och bubblan flyttas nedåt.
   translateX(0) – JS positionerar redan mitt-x exakt (med kant-inklämning),
   till skillnad från de andra bubblorna som lutar sig mot translateX(-50%). */
.overview-tooltip[data-placement="below"] {
  transform: translate(-50%, 0) translateY(8px);
}

.overview-tooltip[data-placement="below"]::after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: var(--navy-800, #1f2a44);
}

/* Tipset kan bli långt ("2 · Kupong 0 % · Odds 2,28 · Spelvärde 0,89 ·
   Ibockat, …") – på smala mobilskärmar ryms det inte på en rad ens efter att
   setupHoverTooltip klämt in bubblan från wrapper-kanterna. width:max-content
   håller den på en rad så länge texten får plats (samma som förut), men
   max-width sätter ett tak så den bryter till två rader i stället för att
   sticka ut när den inte gör det. */
/* pre-line: radbrytningar (\n) i tipset blir egna rader ("Spelat till …",
   David 2026-09-30), och långa rader bryts ändå vid maxbredden. Live-
   tabellens bubbla hade nowrap utan tak och kunde sticka ut på iPhone. */
.overview-tooltip,
.live-tooltip {
  white-space: pre-line;
  width: max-content;
  max-width: min(22rem, calc(100vw - 2rem));
}

.dist-grid {
  stroke: #e1e0d9;
  stroke-width: 1;
}

.dist-axis-label {
  fill: #898781;
  font-size: 9px;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

.dist-axis-title {
  fill: var(--ink-soft);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

.dist-bar-label {
  fill: var(--ink-soft);
  font-size: 9px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Radantalet för en grå stapel som är så hög att den klipps mot taket:
   siffran ritas inne i stapeln nära toppen i stället för ovanför (som är
   utanför bild). Ljus text + tunn mörk halo så den syns mot den grå
   stapeln oavsett ljust/mörkt läge (David 2026-09-08). */
.dist-bar-label-inside {
  fill: #fff;
  paint-order: stroke;
  stroke: rgba(0, 0, 0, 0.35);
  stroke-width: 2px;
  stroke-linejoin: round;
}

/* Medel-/median-linjer (David 2026-09-06): lodräta streckade linjer i grafen
   som markerar var medel- respektive medianvärdet av de reducerade radernas
   odds (eller spelvärde) hamnar längs x-axeln. Svart = medel, röd = median.
   Tunna och streckade så de läser som referenslinjer, inte som data. */
.dist-mark-mean {
  stroke: #1a1a1a;
  stroke-width: 1.4;
  stroke-dasharray: 4 3;
}

.dist-mark-median {
  stroke: #d64545;
  stroke-width: 1.4;
  stroke-dasharray: 4 3;
}

/* Facit-radens odds: "F" på rättade omgångar (Historik), "F?" preliminärt i
   Live-rättningen medan matcherna spelas ("den korrekta raden just nu").
   Grön OCH heldragen (David 2026-09-08) så den skiljer sig tydligt från de
   streckade svart/röda medel-/median-linjerna – det är den mest intressanta
   linjen. Något tjockare också. */
.dist-mark-facit {
  stroke: var(--green-600, #17864b);
  stroke-width: 1.8;
}

.dist-mark-label {
  font-size: 8px;
  font-weight: 700;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

.dist-mark-mean-label {
  fill: #1a1a1a;
}

.dist-mark-median-label {
  fill: #d64545;
}

.dist-mark-facit-label {
  fill: var(--green-600, #17864b);
}

/* Legend-prickar för de två linjerna – en kort streckad bit i respektive
   färg, så legenden matchar det man ser i grafen. */
.dist-mark-swatch {
  width: 14px;
  height: 0;
  border-top: 2px dashed currentColor;
  display: inline-block;
}

.dist-mark-mean-swatch {
  color: #1a1a1a;
}

.dist-mark-median-swatch {
  color: #d64545;
}

.dist-mark-facit-swatch {
  color: var(--green-600, #17864b);
  /* Heldragen legend-prick – matchar den heldragna facit-linjen i grafen
     (medel/median är kvar streckade). */
  border-top-style: solid;
}

/* Legend-posterna för referenslinjerna (Medel/Median/Facit-rad) är klickbara:
   ett klick gömmer/visar linjen i grafen (David 2026-09-06). Pekare +
   lätt hover-markering så det syns att de går att trycka på. */
.dist-mark-legend {
  cursor: pointer;
  border-radius: 4px;
  padding: 0.05rem 0.25rem;
  margin: -0.05rem -0.25rem;
}

.dist-mark-legend:hover {
  background: rgba(0, 0, 0, 0.05);
}

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

/* Bortklickad linje: posten står kvar men dämpas och stryks över, så legenden
   visar vad som är avstängt och hur man får tillbaka det. */
.dist-mark-legend.is-off {
  opacity: 0.45;
  text-decoration: line-through;
}