/* Reduceraren – flikrad, historikvy och animationer.

 * Flikarna (Bygg system / Rätta tidigare omgång / Live-rättning),
 * historikkorten med antal rätt, samt kontroller: knappar, fält och
 * inmatning.
 */

/* --- Rätta tidigare omgång (historik) ------------------------------------ */

#history-view,
#live-view,
#about-view {
  max-width: 860px;
  margin: 0 auto;
  padding: 1.4rem 1rem;
  width: 100%;
  box-sizing: border-box;
}

/* position:relative - referenspunkt för presence-tooltipen (.history-
   presence-tooltip/.live-presence-tooltip, position:absolute), som
   setupHoverTooltip positionerar relativt just den här wrappern (David
   2026-09-16, ensureHistoryPresenceTooltip/ensureLivePresenceTooltip). */
#history-view,
#live-view {
  position: relative;
}

/* --- Startsidans välkomsttext ------------------------------------------- */

/* Ligger under produktkorten på startsidan och döljs (JS) så fort en produkt
   valts. Ett lugnt textblock, inte ett kort – korten ska dra blicken, inte
   den här. */
#welcome {
  margin: 0.4rem 0 1.6rem;
  animation: rise-in 0.6s var(--ease-spring) both;
}

#welcome[hidden] {
  display: none;
}

/* --- Startsidans mörka panel + reduceringsdemo (2026-10-01) --------------
   Sidans enda mörka yta: nattblå som headerns gamla djup, med guld (appens
   accentfärg) för raderna som överlever reduceringen. Produktkorten ovanför
   är mättade färgfält – panelen är avsiktligt färglös utom guldet, så den
   läses som "förklaringen" och inte som ett femte spel. */
.welcome-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
  gap: 1.8rem;
  align-items: center;
  padding: 1.7rem 1.7rem 1.5rem;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(520px 320px at 88% 8%, rgba(47, 111, 191, 0.3), transparent 62%),
    linear-gradient(165deg, var(--navy-900), var(--navy-950));
  box-shadow: var(--shadow-lg);
}

#welcome .welcome-hero h2 {
  margin: 0 0 0.8rem;
  font-size: clamp(1.45rem, 1.1rem + 1.3vw, 1.9rem);
  line-height: 1.16;
  letter-spacing: -0.025em;
  text-wrap: balance;
  color: #fff;
}

#welcome .welcome-hero p {
  margin: 0;
  color: #b9c6dc;
}

#welcome .welcome-hero strong {
  color: #fff;
}

.welcome-hero .welcome-guide-link {
  color: #fff;
}

.welcome-hero .welcome-guide-link:hover,
.welcome-hero .welcome-guide-link:focus-visible {
  color: var(--gold-300);
}

.welcome-hero .welcome-guide-link:focus-visible {
  outline-color: var(--gold-400);
}

.welcome-demo {
  margin: 0;
}

/* Kvadratisk: 81 × 81 prickar. Storleken i pixlar sätts av JS efter bredden. */
.welcome-demo canvas {
  display: block;
  width: 100%;
  aspect-ratio: 1;
}

.welcome-demo figcaption {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.15rem 0.8rem;
  align-items: baseline;
  margin-top: 0.9rem;
}

.welcome-demo-count {
  font-size: 0.86rem;
  font-weight: 600;
  color: #b9c6dc;
}

.welcome-demo-count b {
  margin-right: 0.15rem;
  font-size: 1.9rem;
  font-weight: 750;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--gold-400);
}

.welcome-demo-note {
  grid-column: 1 / -1;
  font-size: 0.78rem;
  line-height: 1.5;
  color: #8fa0bd;
}

.welcome-demo-replay {
  padding: 0.25rem 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: none;
  font: inherit;
  font-size: 0.74rem;
  font-weight: 600;
  color: #b9c6dc;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.welcome-demo-replay:hover,
.welcome-demo-replay:focus-visible {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
}

.welcome-demo-replay:focus-visible {
  outline: 2px solid var(--gold-400);
  outline-offset: 2px;
}

/* Flödet i fyra steg. Siffrorna kommer från en CSS-räknare så listan är en
   riktig <ol> för skärmläsare. */
.welcome-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.2rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: welcome-step;
}

.welcome-steps li {
  counter-increment: welcome-step;
  padding-top: 0.7rem;
  border-top: 2px solid var(--paper-line);
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.welcome-steps li::before {
  content: "0" counter(welcome-step);
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.74rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  color: var(--gold-500);
}

.welcome-steps strong {
  display: block;
  font-size: 0.95rem;
}

@media (max-width: 720px) {
  .welcome-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.4rem;
    padding: 1.3rem 1.1rem 1.2rem;
  }

  .welcome-demo {
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
  }

  .welcome-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .welcome-demo-replay {
    display: none;
  }
}

#welcome h2 {
  margin: 0 0 0.6rem;
  font-size: 1.15rem;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--ink);
}

#welcome p {
  margin: 0 0 0.6rem;
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--ink-soft);
}

#welcome strong {
  color: var(--ink);
}

/* Presentationsfilmen. Liggande version på bred skärm, stående på smal – bara
   en av dem visas, och en dold video med preload="none" hämtar ingenting. */
.welcome-video {
  margin: 1.6rem 0 0.4rem;
}

.welcome-video video {
  display: block;
  width: 100%;
  border-radius: 14px;
  background: var(--paper);
  box-shadow: 0 6px 24px rgba(26, 29, 36, 0.1);
}

.welcome-video-tall {
  display: none !important;
  max-width: 340px;
  margin: 0 auto;
}

@media (max-width: 640px) {
  .welcome-video-wide {
    display: none !important;
  }
  .welcome-video-tall {
    display: block !important;
  }
}

/* Den enda raden på sidan som faktiskt säger vad man ska göra – ska väga
   tyngre än brödtexten och guide-länken under den, annars drunknar
   uppmaningen i löptexten (David påpekade detta 2026-09-14). Navy binder
   ihop den med produktkorten ovanför utan att kopiera en produktfärg. */
#welcome .welcome-cta {
  margin-top: 1rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--navy-900);
}

/* Raden om vad ett konto ger (2026-10-02), bara för gäster. Medvetet bara
   text under uppmaningen – ingen egen platta, se kommentaren om länken till
   Om-fliken nedan. */
#welcome .welcome-account {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* Länken till Om-fliken sitter numera inline i brödtexten (som "odds" och
   "streck" ovan), inte i en egen ruta – startsidan har redan fyra tunga
   produktkort, en femte platta läste som "ännu ett kort" och konkurrerade
   med dem. Guld-understrykningen är appens enda återkommande accentfärg
   (jackpot-badge, Om-fliken) så ögat känner igen den som "något att klicka",
   utan en ny bakgrundsyta. */
.welcome-guide-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--gold-500);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color 0.15s;
}

.welcome-guide-link:hover,
.welcome-guide-link:focus-visible {
  color: var(--blue-600);
}

.welcome-guide-link:focus-visible {
  outline: 2px solid var(--blue-500);
  outline-offset: 2px;
  border-radius: 3px;
}

/* --- Ingen öppen omgång för vald produkt --------------------------------- */

/* Ersätter "Reducera systemet"-panelen och kupongen när produkten (t.ex.
   Stryktipset mellan två helger) inte har någon öppen omgång just nu – se
   showNoDrawState/06-ui-draw.js. Ingen knapp här: det finns inget att spara,
   dela eller reducera (David 2026-09-22: "behövs inga knappar eller ngt
   sånt"). Första versionen (ljus lavendelruta, versal etikett, bold rubrik)
   såg ut som ett generiskt AI-empty-state och hörde inte ihop med resten av
   sidan (David: "det ser alldeles för AI ut") – omgjord till samma språk
   som produktkorten: en mörk platta i produktens EGNA gradient, med samma
   vita wordmark-logga som korten men nedtonad, som om skylten är avstängd.
   Ingen skugga, ingen hover, ingen puls – till skillnad från korten är den
   HÄR inte klickbar och ska inte bjuda in till klick. */
.no-draw-state {
  margin: 0.6rem 0 1.6rem;
  padding: 2.6rem 1.5rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border-radius: var(--radius-lg);
  background: var(--navy-900);
  animation: rise-in 0.6s var(--ease-spring) both;
}

.no-draw-state[data-product="stryktipset"] { background: linear-gradient(135deg, #2c5490, #172c52); }
.no-draw-state[data-product="europatipset"] { background: linear-gradient(135deg, #1f8a57, #123a29); }
.no-draw-state[data-product="topptipsetfamily"] { background: linear-gradient(135deg, #cf941f, #7a4e12); }
.no-draw-state[data-product="powerplay"] { background: linear-gradient(135deg, #c0392b, #6e1d15); }

.no-draw-state-logo {
  /* Rutan har gott om egen luft (padding ovan) – loggan får stå större här
     än på det trängre produktkortet (David 2026-09-22: "loggan kan va
     större utan att inte få plats i kortet"). */
  height: 3.2rem;
  width: auto;
  /* Exakt samma vita wordmark som produktkortet, INGEN opacitet eller
     filter – David 2026-09-22 två gånger: grayscale gjorde den gråaktig,
     och även bara nedtonad opacitet såg "grå" ut mot den mörka bakgrunden
     (vitt + opacitet blandas synligt med botten). Loggan ska stå i sin
     egna färg orörd. Den "vilande" känslan kommer i stället från att rutan
     saknar skugga/hover/puls, inte från att bilden i sig tonas ner. */
}

.no-draw-state-message {
  margin: 1rem 0 0;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.82);
}

.no-draw-state-message strong {
  color: #fff;
  font-weight: 600;
}

/* En knapp som ser ut som en textlänk – för åtgärder mitt i löpande text där
   en riktig knappform vore för tung. Diskret: ärver textens färg och storlek,
   markeras bara med en tunn understrykning som mörknar vid hover. */
.linklike {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--paper-line);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.15s, color 0.15s;
}

.linklike:hover {
  color: var(--ink);
  text-decoration-color: currentColor;
}

.linklike:focus-visible {
  outline: 2px solid var(--blue-500);
  outline-offset: 2px;
  border-radius: 3px;
}

/* --- Om -----------------------------------------------------------------
   Om-fliken är appens informationssida. Formgiven som en tryckt tipskupong:
   en mörkblå rubrikremsa på toppen (kupongens övre strip), ett kupongindex
   med prickade ledarlinjer, och avsnitt numrerade med en mono-folio som
   återkommer i indexet ovanför – så att bläddra sidan känns som att dra
   fingret nedför en kupong (David 2026-09-04). En mono-typsnittsroll
   (--about-mono) bär alla siffror, precis som odds/streck trycks på riktiga
   kuponger. Enda accentfärgen är guld, och den används bara på begrepps-
   rutorna i "Odds, streck, spelvärde" – de tre orden hela verktyget bygger
   på. */
:root {
  --about-mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

/* Rubrikremsa: navy gradient, versaler med bred spärrning som produktkortens
   nyckeltalsrubriker, versionen som en mono-stämpel till höger. Sitter ihop
   med kupongindexet under (delad rundning, ingen luft emellan). */
.about-masthead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.2rem;
  padding: 0.85rem 1.1rem;
  /* Mjukare (2026-09-24): djup blå i stället för nästan svart, och en hårfin
     ljus överkant – samma familj som produktkorten. */
  background: linear-gradient(180deg, var(--navy-700), var(--navy-800));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  color: #fff;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.about-masthead h2 {
  margin: 0;
  font-size: clamp(1.05rem, 3.6vw, 1.4rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.about-stamp {
  font-family: var(--about-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  white-space: nowrap;
}

.about-stamp:empty {
  display: none;
}

/* Kupongindex: två grupper ("Kom igång" = en sekvens, "Om & villkor" =
   referensavsnitt). Varje rad är NN · namn ·········· › med en prickad
   ledarlinje som växer och trycker isär namn och pil, som en tryckt
   innehållsremsa. */
.about-toc {
  margin: 0 0 2.2rem;
  padding: 1.15rem 1.25rem 1.3rem;
  background: var(--paper-raised);
  border: 1px solid var(--paper-line);
  border-top: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  box-shadow: var(--shadow-sm);
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: start;
  gap: 0 3rem;
}

.about-toc-group {
  min-width: 0;
}

.about-toc-heading {
  margin: 0 0 0.55rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--ink);
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink);
}

.about-toc-group ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.about-toc-group li {
  margin: 0;
}

.about-toc a {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.34rem 0.25rem;
  margin: 0 -0.25rem;
  color: var(--ink-soft);
  text-decoration: none;
  border-radius: 4px;
  transition: color 0.12s, background 0.12s;
}

.toc-num {
  flex: none;
  min-width: 1.15rem;
  font-family: var(--about-mono);
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--navy-700);
}

.about-toc-group--formal .toc-num {
  color: var(--ink-faint);
  font-weight: 400;
}

.toc-name {
  flex: none;
  max-width: calc(100% - 3.6rem);
  font-size: 0.87rem;
  line-height: 1.3;
}

/* Ledarlinjen: en tom span vars enda jobb är en prickad underkant som
   sträcker sig genom flex: 1. */
.toc-leader {
  flex: 1;
  align-self: center;
  min-width: 0.5rem;
  margin: 0 0.15rem;
  border-bottom: 1.5px dotted #c9c8bf;
  transform: translateY(-1px);
}

.toc-go {
  flex: none;
  font-family: var(--about-mono);
  font-size: 0.85rem;
  color: var(--ink-faint);
}

.about-toc a:hover {
  color: var(--ink);
  background: var(--blue-50, #f2f6fd);
}

.about-toc a:hover .toc-go {
  color: var(--blue-600);
}

.about-toc a:hover .toc-leader {
  border-bottom-color: var(--blue-500);
}

.about-toc a:focus-visible {
  outline: 2px solid var(--blue-500);
  outline-offset: 1px;
}

/* Sticky-menyn (UX-genomgång 2026-09-21): fast under headern, men bara EFTER
   att kupongindexet (.about-toc) scrollat ur sikte – syncAboutStickyNav i
   11-about.js togglar .is-visible. Dold by default (opacity+translateY) i
   stället för [hidden], så in/ut-tondningen kan animeras; den ligger ändå
   fysiskt kvar i flödet (top: -100px flyttar den utom synhåll utan att
   påverka layouten, position: sticky kräver ett element som FINNS). */
/* Sticky-menyn (2026-09-24): ljus, halvgenomskinlig remsa i samma
   formspråk som flikraden – i stället för den mörka navy-plattan. Varje länk
   visar siffra + kort namn (bara siffror sa inget om vad avsnitten var).
   Får inte alla plats scrollas remsan i sidled; en mjuk tonkant till höger
   visar att det finns mer. */
.about-sticky-toc {
  position: sticky;
  top: 0.5rem;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin: -0.6rem 0 1.6rem;
  padding: 0.3rem 0.3rem 0.3rem 0.4rem;
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
  border: 1px solid rgba(15, 33, 64, 0.08);
  border-radius: 999px;
  box-shadow: var(--shadow-md);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.about-sticky-toc.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.about-sticky-toc-links {
  /* position: relative så länkarnas offsetLeft räknas mot remsan – den
     används för att rulla den aktiva länken till mitten (11-about.js). */
  position: relative;
  display: flex;
  gap: 0.15rem;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

/* Tonkanten till höger bara när något faktiskt ligger dolt (klassen sätts av
   syncAboutStickyNav, 11-about.js) – annars hade sista länken tonats ut i
   onödan när allt får plats. */
.about-sticky-toc-links.is-overflowing {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 1.5rem), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 1.5rem), transparent);
  padding-right: 1.2rem;
}

.about-sticky-toc-links::-webkit-scrollbar {
  display: none;
}

.about-sticky-toc a {
  flex: none;
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
  padding: 0.38rem 0.5rem;
  border-radius: 999px;
  transition: color 0.12s, background 0.12s;
}

.sticky-toc-num {
  font-family: var(--about-mono);
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--ink-faint);
}

.about-sticky-toc a:hover,
.about-sticky-toc a:focus-visible {
  color: var(--ink);
  background: rgba(15, 33, 64, 0.05);
}

/* Läst avsnitt (satt av IntersectionObserver i syncAboutStickyNav) – en mjuk
   blå platta, samma "du är här"-känsla som den aktiva fliken. */
.about-sticky-toc a.is-active {
  color: var(--navy-800);
  background: #eaf0f9;
}

.about-sticky-toc a.is-active .sticky-toc-num {
  color: var(--blue-600);
}

/* Bara en ↑-pil (2026-09-24) på alla skärmar – texten "Till toppen" tog
   platsen som behövdes för att alla tio länkarna ska rymmas på en dator.
   Texten finns kvar i markupen (skärmläsare + title) men döljs med
   font-size: 0 på knappen, pilen får tillbaka sin storlek nedan. */
.about-sticky-toc-top {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-size: 0;
  font-weight: 700;
  color: var(--navy-800);
  background: rgba(15, 33, 64, 0.06);
  border: none;
  border-radius: 999px;
  width: 2rem;
  height: 2rem;
  padding: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s;
}

.about-sticky-toc-top:hover {
  background: rgba(15, 33, 64, 0.11);
}

.about-sticky-toc-top span[aria-hidden] {
  font-size: 0.95rem;
  line-height: 1;
}

.about-sticky-toc-top:focus-visible {
  outline: 2px solid var(--blue-500);
  outline-offset: 2px;
}

/* Innehållet: en räknare på .about-content numrerar avsnitten i "Kom igång".
   Referensavsnitten (.about-block--formal) hoppas över och får ett § i
   stället, så numren matchar indexet exakt även om avsnitt läggs till. */
.about-content {
  margin-top: 0;
  counter-reset: about-folio;
}

.about-block {
  position: relative;
  /* scroll-margin: hoppar man hit via en indexlänk ska rubriken hamna under
     den fastnålade avsnittsremsan (.about-sticky-toc, top 0.5rem + ~42 px
     hög), inte bakom den (David 2026-09-30). 1rem räckte inte. */
  scroll-margin-top: calc(4.25rem + env(safe-area-inset-top));
  margin-bottom: 2.4rem;
}

.about-block:not(.about-block--formal) {
  counter-increment: about-folio;
}

.about-block:last-child {
  margin-bottom: 0;
}

/* Avsnittsrubrik = kupongens radrubrik: mono-folio, namn, hårlinje under. */
.about-block h3 {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  margin: 0 0 0.85rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--paper-line);
  font-size: 1.03rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.005em;
}

.about-block h3::before {
  content: counter(about-folio, decimal-leading-zero);
  flex: none;
  font-family: var(--about-mono);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1;
  color: var(--navy-700);
}

.about-block--formal h3::before {
  content: "§";
  color: var(--ink-faint);
  font-weight: 400;
}

.about-block p {
  margin: 0 0 0.65rem;
  color: var(--ink-soft);
  line-height: 1.7;
  font-size: 0.92rem;
}

.about-block p:last-child {
  margin-bottom: 0;
}

.about-block strong {
  color: var(--ink);
  font-weight: 650;
}

/* :target – markerar avsnittet man just hoppade till, helt utan JS. */
.about-block:target > h3,
.about-block:target > h3::before {
  color: var(--blue-700);
}

/* Punktlistor i Om-fliken (ansvarsfullt spelande, integritet). */
.about-list {
  margin: 0 0 0.65rem;
  padding-left: 1.2rem;
  color: var(--ink-soft);
  font-size: 0.92rem;
  line-height: 1.7;
}

.about-list li {
  margin-bottom: 0.3rem;
}

.about-list a {
  color: var(--blue-600);
}

/* Numrerade instruktionssteg. Egen mono-räknare (00-ledande) så siffran
   hänger ihop med steget även när texten radbryts – samma sifferspråk som
   avsnittsfolierna. */
.about-steps {
  margin: 0.3rem 0 0.65rem;
  padding: 0;
  list-style: none;
  counter-reset: about-step;
  color: var(--ink-soft);
  font-size: 0.92rem;
  line-height: 1.7;
}

.about-steps li {
  position: relative;
  padding-left: 2.1rem;
  margin-bottom: 0.75rem;
}

.about-steps li:last-child {
  margin-bottom: 0;
}

.about-steps li::before {
  counter-increment: about-step;
  content: counter(about-step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.05rem;
  font-family: var(--about-mono);
  font-size: 0.76rem;
  color: var(--ink-faint);
}

.about-steps strong,
.about-defs strong {
  color: var(--ink);
  font-weight: 650;
}

/* Begreppslista. I "Odds, streck, spelvärde" bär den de tre orden hela
   verktyget vilar på – därför den enda platsen guldaccenten används, som
   en liten pennmarkering framför varje term. */
.about-defs {
  margin: 0.3rem 0 0.65rem;
  color: var(--ink-soft);
  font-size: 0.92rem;
  line-height: 1.7;
}

.about-defs dt {
  margin-top: 1.15rem;
  font-weight: 700;
  color: var(--ink);
}

.about-defs dt::before {
  content: "";
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  margin-right: 0.5rem;
  background: var(--gold-400);
}

.about-defs dt:first-of-type {
  margin-top: 0;
}

.about-defs dd {
  margin: 0.3rem 0 0;
  padding-left: 1.05rem;
}

/* Fördjupningsruta (t.ex. "Vad spelvärde faktiskt är"). En infälld notis –
   vit yta, blå vänsterkant, rubriken i versaler som avsnittsindexet. */
.about-note {
  position: relative;
  margin: 1.1rem 0;
  padding: 1rem 1.2rem 1rem 1.35rem;
  background: var(--paper-raised);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  scroll-margin-top: calc(4.25rem + env(safe-area-inset-top));
}

/* Vänsterkanten som en rundad stapel inne i rutan (2026-09-24), samma grepp
   som träffchansens linjal – markeringen finns kvar men utan skarp kant. */
.about-note::before,
.about-block-highlight::before {
  content: "";
  position: absolute;
  left: 0.45rem;
  top: 0.9rem;
  bottom: 0.9rem;
  width: 3px;
  border-radius: 999px;
  background: var(--blue-500);
}

.about-block-highlight::before {
  background: var(--green-700);
}

.about-note h4 {
  margin: 0 0 0.55rem;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--blue-700);
}

.about-note p {
  margin: 0 0 0.6rem;
  color: var(--ink-soft);
  line-height: 1.7;
  font-size: 0.9rem;
}

.about-note p:last-child {
  margin-bottom: 0;
}

.about-note strong {
  color: var(--ink);
}

.about-note a {
  color: var(--blue-600);
}

/* Brasklapp i slutet av byggguiden – tydligt skild från instruktionsstegen
   med en vänsterkant i stället för kursiv. */
.about-disclaimer {
  font-size: 0.85rem !important;
  color: var(--ink-faint) !important;
  border-left: 2px solid var(--paper-line);
  padding-left: 0.85rem;
}

/* Ansvarsfullt spelande: enda avsnittet med färg – det ska hittas direkt.
   Svag grön ton + vänsterkant, och 18+-brickan ersätter § i rubriken. */
.about-block-highlight {
  position: relative;
  padding: 1.2rem 1.2rem 1.3rem 1.4rem;
  background: linear-gradient(180deg, rgba(31, 157, 92, 0.06), rgba(31, 157, 92, 0.02));
  border: 1px solid rgba(18, 96, 58, 0.16);
  border-radius: var(--radius-md);
}

.about-block-highlight > h3 {
  border-bottom-color: rgba(18, 96, 58, 0.25);
}

.about-block-highlight > h3::before {
  content: "18+";
  font-family: var(--about-mono);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  background: var(--green-700);
  padding: 0.18rem 0.42rem;
  border-radius: 3px;
}

@media (max-width: 620px) {
  .about-masthead {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
    padding: 0.8rem 1rem;
  }

  .about-toc {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .about-toc-group + .about-toc-group {
    margin-top: 1.4rem;
  }

  .about-toc a {
    gap: 0.5rem;
  }

  /* Ledarlinje + pil bort på smal skärm – hela raden är ändå tryckyta. */
  .toc-name {
    max-width: none;
    flex: 1 1 auto;
  }

  .toc-leader,
  .toc-go {
    display: none;
  }

  .about-block h3 {
    font-size: 0.98rem;
    gap: 0.6rem;
  }

  /* Sticky-menyn: lite tätare kant runt remsan på smal skärm. */
  .about-sticky-toc {
    padding: 0.25rem 0.25rem 0.25rem 0.3rem;
  }
}

/* width: 100% - utan den krymper kolumnen till sitt SMALASTE barns naturliga
   bredd (bandet, .history-group-title) i stället för att fylla hela sin
   grid-track, så fort listan under (.history-list, bredare innehåll) är
   dold - t.ex. en hopfälld produkt (David 2026-09-16: "den gröna är smal
   när den är minimerad ... ska ha samma storlek som när den är utfälld").
   Grid-track:ens bredd (minmax/auto-fit ovan, eller history-group-solos
   max-width) sätts av ALLA synliga kolumner tillsammans - men UTAN denna
   rad tar varje enskild kolumn bara den bredd DEN SJÄLV behöver inom sin
   track, och en hopfälld kolumn med bara det smala bandet kvar blev då
   smalare än sina utfällda syskon. */
.history-group {
  width: 100%;
}

.history-groups {
  display: grid;
  /* En ren pixelgräns i minmax() (stod här sedan tidigare, 260px) FÅR aldrig
     krympa under sitt eget golv – inte ens när kolumnen är ensam och
     skärmen är smalare än så. Grid tvingar då igenom 280px och hela sidan
     får horisontell overflow (upptäckt 2026-09-05 i samband med
     kortomgörningen, men bugen fanns redan innan den).

     minmax(0, 1fr) duger på egen hand som allmänt grid-golv, men ger då
     EN kolumn redan på en bred mobil/surfplatta i stående läge – 0 lägger
     inga hinder i vägen för auto-fit att packa in fler smala kolumner.
     Lösningen är en riktig brytpunkt i stället för att låta grid gissa:
     en kolumn på smala skärmar (media query nedan), flytande auto-fit från
     och med 640px där 280px verkligen får plats. */
  grid-template-columns: minmax(0, 1fr);
  gap: 1.4rem;
  margin: 1rem 0;
  align-items: start;
}

@media (min-width: 640px) {
  .history-groups {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }

  /* En ENSAM synlig kolumn (de andra dolda av "dölj tomma produkter", David
     2026-09-16) fick annars sin 1fr-bana sträckt över HELA radens bredd och
     såg ut som en banderoll i stället för ett kort. :only-child funkar INTE
     här - dolda syskon (hidden-attribut) räknas ändå som DOM-barn, så
     selektorn matchar aldrig. markSoloHistoryGroup (09-history.js/10-live.js)
     sätter klassen efter varje omritning i stället, där antalet SYNLIGA
     kolumner faktiskt räknas. Med flera synliga kolumner kvar ska de
     fortsatt fylla sin track precis som förut (annars gapar det mellan dem).
     Gäller alla tre sektionerna lika (Öppna/Orättade/Avgjorda) - David
     provade ett undantag för Öppna/Orättade 2026-09-16 men bad om samma
     smala bredd som Avgjorda i stället ("nu är den alldeles för bred"). */
  .history-group.history-group-solo {
    max-width: 420px;
    justify-self: start;
  }
}

.history-group-title {
  margin: 0 0 0.6rem;
  font-size: 1rem;
  color: var(--ink);
}

/* PRODUKTSKYLTEN över varje kolumn i Live-rättning och Sparade lappar
   (omgjord 2026-09-05).

   FÖRUT: rubriken var texten "Stryktipset" i vanligt typsnitt på en svag
   14 %-tint av produktfärgen, plus en 4px kantlinje till vänster.
   NU: Svenska Spels EGEN wordmark (assets/brand-*.svg, samma bilder som
   produktkorten på förstasidan använder) tryckt på ett band i produktens
   fulla färg.

   Varför bilden i stället för texten: loggan känns igen på en bråkdels
   sekund, långt innan man hunnit läsa ett ord – det är hela poängen med en
   wordmark. Och eftersom SVG:erna är helvita (fill="#FFFFFF", ritade för de
   mörka produktkorten) MÅSTE de ligga på mörk botten. Det avgjorde
   designen: bandet får full färg i stället för den gamla ljusa tinten.

   Att färgen samlas HÄR är också vad som låter resten av vyn bli lugn.
   Förut bar fyra olika element produktfärg samtidigt (rubriktint, kortets
   kantlinje, den mörka gradient-brickan, kupongrubriken) och då slutade
   färgen betyda något. Nu: skylten säger vilken produkt, korten under är
   vitt papper med bara en smal färgrygg som knyter dem till sin skylt.

   Styrs av data-product på .history-group (redan satt i index.html), så
   ingen JS behöver röras. Texten ligger kvar i markupen men göms visuellt
   (.history-group-title-text) – skärmläsare läser den som förut. */
.history-group[data-product] > .history-group-title {
  display: flex;
  align-items: center;
  margin-bottom: 0.55rem;
  /* Bara sidopadding - höjden bestäms av loggan (se .history-group-logo)
     plus den lodräta paddingen, inte av ett eget min-height. Ändrat
     2026-09-05: David påpekade att loggan såg liten ut mot bandet - det var
     precis den lediga höjden som gjorde det, en logga med fast höjde inom
     ett HÖGRE band den inte fyllde. */
  padding: 0.55rem 0.85rem;
  border-radius: 12px;
  /* Mjukare (2026-09-24): samma produktfärg, men som en svag toning mot en
     djupare ton av samma färg och en hårfin ljus överkant – samma familj som
     produktkorten på startsidan. Fortfarande ett band, inte en knapp. */
  background: linear-gradient(135deg, var(--p-color, var(--navy-800)), color-mix(in srgb, var(--p-color, var(--navy-800)) 78%, #000));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), var(--shadow-sm);
}

/* Wordmarken. Höjden (inte bredden) är det som styr – alla fyra SVG:erna
   har samma 160-enheters höjd i sin viewBox men olika bredd, så en fast
   höjd ger dem exakt samma optiska storlek medan var och en behåller sin
   egen proportion. Inget max-width: det hade tryckt ihop loggan på bredden. */
.history-group-logo {
  /* 1.5rem (var 0.95rem, David 2026-09-05: kändes för liten mot bandet).
     Höjden är det som styr - se motiveringen i regeln ovan. */
  height: 1.5rem;
  width: auto;
  display: block;
}

/* Texten som loggan ersatte. Kvar i DOM:en för skärmläsare (och som synligt
   fallback om en SVG någon gång inte laddar – då är img:en tom och skylten
   hade annars stått blank). Samma teknik som .sr-only. */
.history-group-title-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Kollapsbar produktkolumn (David 2026-09-16: "vill kunna kollapsa varje
   produkt" - Topptipset i Avgjorda kunde bli en lång lista). Skylten
   (.history-group-title) är klicket, en chevron visar läget, och listan
   göms helt när kolumnen är hopfälld. Börjar ALLTID utfälld vid sidladdning
   - inget minne mellan besök, David valde enklast. */
.history-group[data-product] > .history-group-title {
  cursor: pointer;
  user-select: none;
}

.history-group-collapse-chevron {
  margin-left: auto;
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  color: #fff;
  opacity: 0.85;
  transition: transform 0.15s;
}

.history-group.history-group-collapsed .history-group-collapse-chevron {
  transform: rotate(-90deg);
}

.history-group.history-group-collapsed .history-list {
  display: none;
}

/* Produktfärgen sätts EN gång per kolumn som en variabel, och ärvs sedan
   ner till både skylten ovan och korten under (--p-color på .history-group).
   Det är därför korten inte behöver var sin egen produktregel längre. */
.history-group[data-product="stryktipset"] { --p-color: var(--p-stryk); }
.history-group[data-product="europatipset"] { --p-color: var(--p-europa); }
.history-group[data-product="topptipsetfamily"] { --p-color: var(--p-topp); }
.history-group[data-product="powerplay"] { --p-color: var(--p-power); }

.history-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Underflikraden i Sparade lappar ("Oppna" / "Orattat" / "Avgjorda") - ersatte
   2026-09-16 de tre stapelvisa sektionsrubrikerna (.history-section-title) med
   riktiga flikar (se showHistorySubtab i 09-history.js). Ligger i markupen
   som en EGEN rad direkt under .tab-bar (samma max-width/padding som den, sa
   de linjerar), inte inuti #history-view - David ville ha den "under
   overflikarna" i stallet for under "Sparade lappar"-rubriken. Mindre skala
   an .tab-button eftersom det har fortfarande ar en andra navigationsniva. */
/* Underflikarna (2026-09-24): andra nivåns navigering i samma formspråk
   som huvudflikarna men lugnare – små rundade knappar utan egen skena, där
   den valda får en mjuk blå platta (samma "du är här" som Om-sidans
   snabbmeny). Centrerade under huvudflikraden. */
.history-subtabs {
  display: flex;
  justify-content: center;
  gap: 0.3rem;
  max-width: 860px;
  margin: 0.6rem auto 0;
  padding: 0 1rem;
}

/* .history-subtabs display:flex har samma CSS-specificitet som webblasarens
   inbyggda [hidden] { display: none } och star senare i cascade-ordningen,
   sa den vann annars over hidden-attributet - raden syntes under ALLA
   flikar i stallet for bara Sparade lappar (David 2026-09-16, samma bugg
   som .controls[hidden] ovan 2026-08-20). !important tvingar dolningen att
   alltid vinna. */
.history-subtabs[hidden] {
  display: none !important;
}

.history-subtab-button {
  background: none;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--ink-soft);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.4rem 0.95rem;
  cursor: pointer;
  transition: color 0.15s var(--ease-out), background 0.15s var(--ease-out), border-color 0.15s var(--ease-out);
}

.history-subtab-button:hover {
  color: var(--ink);
  background: rgba(15, 33, 64, 0.05);
}

.history-subtab-button:focus-visible {
  outline: 2px solid var(--blue-500);
  outline-offset: 2px;
}

.history-subtab-button-active,
.history-subtab-button-active:hover {
  color: var(--navy-800);
  background: #eaf0f9;
  border-color: rgba(47, 111, 191, 0.16);
}

/* Antal efter flikens namn, som "(2)" (bara Öppna/Orättade har en - se
   setHistorySubtabCount). Tredje formen David provade: en solid platta var
   för tung, en kant-pill "inte riktigt nöjd ändå" - ren text i parentes
   utan ram eller bakgrund är det etablerade mönstret för antal-i-flik (t.ex.
   e-postappars inkorgar) och kräver ingen egen form alls, vilket passar
   flikraden som i övrigt bara är text + understreck.

   Egen, något dämpad färg i stället för att ärva fliktextens fulla dämpning
   (David 2026-09-16: "siffrorna smälter in för mkt") - annars försvinner
   siffran nästan helt på en icke-aktiv flik. Ärver på den AKTIVA fliken
   (nedan) så den blir blå där, precis som fliktexten den hör ihop med.

   display:inline har SAMMA specificitet som webbläsarens inbyggda
   [hidden] { display: none } och står senare i cascade-ordningen, så det
   vann annars över hidden-attributet - "(0)" syntes trots att JS satte
   hidden (samma buggmönster som .history-subtabs[hidden] ovan, David
   2026-08-20/2026-09-16). !important tvingar dolningen att vinna. */
.history-subtab-count {
  display: inline;
  margin-left: 0.3rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  font-size: 0.85em;
  font-weight: 400;
}

.history-subtab-count[hidden] {
  display: none !important;
}

.history-subtab-button-active .history-subtab-count {
  color: var(--blue-600);
}

/* Panelen for den ICKE valda underfliken doljs helt - se showHistorySubtab.
   data-history-tab-panel-active satts pa samma element JS togglar hidden pa,
   sa CSS:en bara behover reagera pa attributets franvaro. */
[data-history-tab-panel]:not([data-history-tab-panel-active]) {
  display: none;
}

/* Filterraden over "Avgjorda". Doljs (JS) nar inget reglage har nagot att
   visa. Ligger tatt under rubriken, diskret - manadsvaljare + "Bara
   inlamnade"-kryssruta, som far radbrytas pa smala skarmar. */
#history-month-filter {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.9rem;
  margin: -0.2rem 0 0.9rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
}
/* Radbrytare mellan rullgardinerna och bockarna (se index.html). */
.history-filter-break {
  flex-basis: 100%;
  height: 0;
}
#history-month-select-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
/* De två bockarna som små av/på-knappar (2026-09-24): rundad ram, och när
   bocken är i en mjuk blå platta – samma "på"-språk som de valda flikarna.
   Kryssrutan finns kvar inuti (tangentbord, skärmläsare, samma klick). */
#history-submitted-only-wrap,
#history-totals-toggle-wrap,
#history-my-share-wrap {
  padding: 0.32rem 0.8rem 0.32rem 0.6rem;
  border: 1px solid #dcdbd3;
  border-radius: 999px;
  background: var(--paper-raised);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

#history-submitted-only-wrap:has(input:checked),
#history-totals-toggle-wrap:has(input:checked),
#history-my-share-wrap:has(input:checked) {
  background: #eaf0f9;
  border-color: rgba(47, 111, 191, 0.3);
  color: var(--navy-800);
}

#history-submitted-only,
#history-totals-toggle,
#history-my-share {
  accent-color: var(--blue-500);
  margin: 0;
}

#history-submitted-only-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
}
#history-submitted-only {
  cursor: pointer;
}
/* Väljarna som rundade piller med egen tunn chevron (2026-09-24) i stället
   för webbläsarens egen pil, så de ser likadana ut i alla webbläsare. */
#history-month-select,
#history-group-select,
#history-sort-select {
  appearance: none;
  -webkit-appearance: none;
  padding: 0.34rem 1.9rem 0.34rem 0.8rem;
  border: 1px solid #dcdbd3;
  border-radius: 999px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23565a63' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat right 0.75rem center,
    var(--paper-raised);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}

#history-month-select:hover,
#history-group-select:hover,
#history-sort-select:hover {
  border-color: #c9c8bf;
}

/* Mobil: filtren i ett jämnt rutnät med två spalter i stället för att
   radbrytas där de råkar ta slut – väljarna till vänster, av/på-knapparna
   till höger, placerade med grid-column nedan. Väljarna fyller sin cell. */
@media (max-width: 520px) {
  #history-month-filter {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 0.5rem;
    /* dense: bockarna (högerspalten) fyller rad 1, 2, 3 bredvid
       rullgardinerna i stället för att hamna under dem. */
    grid-auto-flow: dense;
  }
  .history-filter-break {
    display: none;
  }
  #history-month-select-wrap,
  #history-group-select-wrap,
  #history-sort-wrap {
    grid-column: 1;
  }
  #history-submitted-only-wrap,
  #history-totals-toggle-wrap,
  #history-my-share-wrap {
    grid-column: 2;
  }

  #history-month-select-wrap,
  #history-group-select-wrap,
  #history-sort-wrap {
    min-width: 0;
  }

  /* Etiketterna ("Visa period:", "Grupp:") tar annars platsen väljaren
     behöver – och väljarens eget värde ("September 2026", "Alla grupper")
     säger redan vad den är. Dolda visuellt, kvar för skärmläsare. */
  #history-month-select-wrap > label,
  #history-group-select-wrap > label,
  #history-sort-wrap > label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  #history-month-select,
  #history-group-select,
  #history-sort-select {
    flex: 1;
    min-width: 0;
  }

  #history-submitted-only-wrap,
  #history-totals-toggle-wrap,
  #history-my-share-wrap {
    justify-content: center;
    white-space: nowrap;
  }
}

#history-month-select:focus-visible,
#history-group-select:focus-visible,
#history-sort-select:focus-visible {
  outline: none;
  border-color: var(--blue-500);
  box-shadow: var(--focus-ring);
}

/* Gruppväljaren – samma form som månadsväljaren bredvid. Ersatte 2026-09-06
   en ifylld "bricka" som bara syntes efter att man klickat sig hit via ett
   gruppkort: den dolde att filtret gick att sätta/nollställa direkt här,
   och en display/[hidden]-cascade-bugg gjorde den dessutom synlig som en
   tom, oklickbar cirkel när inget filter alls var valt (David, skärmdump
   2026-09-06). En vanlig <select> har inget sånt dolt tillstånd. */
#history-group-select-wrap,
#history-sort-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* display ovan slår annars ut webbläsarens [hidden] (samma cascade-fälla
   som .history-subtabs[hidden]) – sorteringen ska döljas utan avgjorda. */
#history-sort-wrap[hidden] {
  display: none;
}

#history-totals-toggle-wrap,
#history-my-share-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
}
#history-totals-toggle,
#history-my-share {
  cursor: pointer;
}
/* Samma cascade-fälla som #history-sort-wrap[hidden] ovan. */
#history-my-share-wrap[hidden] {
  display: none;
}

/* === SUMMERINGSPANELEN "Visa totala resultat" (2026-09-08) ==============

   Formen är ett SPELKVITTO, inte en rad KPI-rutor. Skälet är funktionellt
   före dekorativt: hela poängen med en summering är att kunna läsa en
   sifferkolumn rakt uppifrån och ned ("vann jag mer på Stryk än Europa?"),
   och separata rutor gör precis det omöjligt. Ett kvitto gör det naturligt
   – därav rutnätet med högerställda monospace-tal, den svaga linjen mellan
   raderna, och den DUBBLA linjen före summan, som på ett riktigt kvitto.

   YTAN ÄR LJUS (ändrat 2026-09-09). Panelen var först en mörk platta, tänkt
   att bära "svaret man kommer för att hämta". Den läste i stället som ett
   inklistrat element från en annan app: allt annat i Sparade lappar-fliken
   är vita kort på kritvitt papper, med tunn grå ram och produktfärgad rygg
   till vänster ("den ser lite malplacerad ut med sin mörka stil", David).
   Nu är panelen samma vita kortyta som lapparna under den, bara bredare och
   utan hover – släktskapet syns direkt, och den hittas ändå med blicken
   genom sin storlek och sin plats överst.

   Formen är oförändrad. Det enda som byts är riktningen på kontrasten:
   ljus text på mörkt blir mörk text på ljust, och produktfärgerna får gå
   tillbaka till sina rena värden (de är valda för vitt papper från början,
   så uppljusningen mot mörk botten behövs inte längre).

   All färgstyrka ligger fortfarande på ETT ställe – nettotalen. */
.history-totals {
  margin: 0 0 1.2rem;
  padding: 1rem 1.15rem 0.9rem;
  border-radius: var(--radius-md, 10px);
  background: var(--paper-raised);
  border: 1px solid var(--paper-line);
  box-shadow: var(--shadow-sm);
  color: var(--ink);
  /* Intoningen ersätter ett hårt hopp när bocken sätts. Den är EN gång, kort
     och stillastående efteråt – ingenting i panelen rör sig därefter. */
  animation: totals-in 0.6s var(--ease-spring) both;
}

@keyframes totals-in {
  from { opacity: 0; transform: translateY(-8px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

/* Kvittots huvud: vad panelen visar, och för vilken period. Perioden är
   inte dekoration – den är kvittot på att filtret uppe till vänster gäller
   även här, vilket annars är precis det man misstänker att det inte gör. */
.totals-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--paper-line);
}
/* Rubriken var guld mot den mörka plattan. På vitt papper är guld för ljust
   att sätta text i (samma skäl som --p-topp-ink finns i 01-base.css) –
   etiketten är i stället samma dämpade versaler som flikens andra
   småetiketter, och får sin tyngd av teckenvikten i stället för av färgen. */
.totals-head-label {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-soft);
}
.totals-head-period {
  font-family: var(--about-mono);
  font-size: 0.72rem;
  color: var(--ink-faint);
}

/* Rutnätet. Namnspalten flyter (den kan krympa), de fyra sifferspalterna är
   lika breda och högerställda så talen står i lod.

   Sifferspalterna använder minmax(<min>, 1fr), inte minmax(0, 1fr). Med 0
   som golv fick spalterna krympa under sitt eget innehåll, och den sista
   kolumnen (ROI) trycktes utanför panelens högerkant – syntes i skarp
   rendering 2026-09-08, där panelen är smalare än i förhandsvisningen.
   Golvet är satt efter det bredaste tal som realistiskt förekommer
   ("123 976 kr"). ROI-spalten är smalare eftersom procenttal är kortare.

   ch-enheten är rätt mått här: talen sätts i monospace, så 1ch ÄR exakt en
   siffras bredd. */
.totals-grid {
  margin-top: 0.15rem;
}
.totals-row {
  display: grid;
  grid-template-columns:
    minmax(0, 1.4fr)
    repeat(3, minmax(9ch, 1fr))
    minmax(6ch, 0.7fr);
  align-items: baseline;
  gap: 0.4rem 0.7rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--paper-line);
}
.totals-row:last-child {
  border-bottom: 0;
}

/* Kolumnrubrikerna: små, versala, tysta. De ska gå att hitta men aldrig
   konkurrera med talen under sig. */
.totals-labels {
  padding: 0.55rem 0 0.35rem;
  font-size: 0.55rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-faint);
}
.totals-labels .totals-num {
  font-family: inherit;
  color: var(--ink-faint);
}

.totals-cell {
  min-width: 0;
}
.totals-cell-name {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  /* Produktfärgen som ett smalt band längst till vänster – samma grepp som
     .history-item-edge på korten nedanför, så panelraden och kortet läses
     som samma produkt. --p-color sätts av produktklassen (se nedan). */
  padding-left: 0.6rem;
  border-left: 3px solid var(--p-color, transparent);
}
/* EGNA klassnamn (totals-p-*), inte produktkortens .product-stryk & co.
   De senare sätter en heltäckande gradient-BAKGRUND i 03-cards.css, som
   slog igenom här och färgade hela raden blå respektive grön – tvärtemot
   panelens hela idé att nettot ska vara det enda färgstarka (upptäckt i
   skarp rendering 2026-09-08, syntes inte i den isolerade förhandsvisningen
   eftersom 03-cards.css inte var inläst där). Med egna klasser följer bara
   färgen med, som kantband – aldrig någon bakgrund.

   Färgerna är nu de RENA produktfärgerna, exakt samma värden som korten
   under panelen sätter på sina ryggar. Så länge panelen var mörkblå måste
   de blandas upp mot vitt för att inte falla ihop med bakgrunden (särskilt
   blå, som nästan försvann). På vitt papper gäller motsatsen: uppblandningen
   gjorde dem bleka, och de rena värdena matchar korten rakt av. */
.totals-row.totals-p-stryk  { --p-color: var(--p-stryk); }
.totals-row.totals-p-europa { --p-color: var(--p-europa); }
.totals-row.totals-p-topp   { --p-color: var(--p-topp); }
.totals-row.totals-p-power  { --p-color: var(--p-power); }

.totals-product {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}
/* Underraden bär det som INTE är pengar – antal lappar och bästa resultat.
   Den ligger under produktnamnet i stället för i egna spalter, så kvittots
   sifferkolumner bara innehåller kronor och procent och därmed går att
   jämföra rakt av. */
.totals-sub {
  font-family: var(--about-mono);
  font-size: 0.63rem;
  color: var(--ink-faint);
}
/* Talen. Monospace och tabular-nums är det som gör att siffrorna verkligen
   står i lod mellan raderna – utan dem vandrar de i sidled beroende på hur
   breda just den radens siffror råkar vara. */
.totals-num {
  font-family: var(--about-mono);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
  color: var(--ink);
}
/* Insatsen är den enda utgiften bland talen – dämpad, så blicken fastnar på
   vinst och netto i stället. */
.totals-cost {
  color: var(--ink-faint);
}
.totals-net {
  font-weight: 700;
}
.totals-roi {
  font-size: 0.72rem;
}

/* SIGNATUREN: nettot är panelens enda färgstarka element. Grön för plus,
   röd för minus, neutral vid noll – samma pengar-avgör-färgen-regel som
   "N rätt"-brickan på korten (se bestCorrectTone), så de två läser lika.

   Tonerna är nu de MÖRKA varianterna ur paletten. De ljusa (#6ee7a8,
   #ff9d94) var satta för mörk botten och blir oläsliga pasteller på vitt
   papper; --green-700/--red-500 är samma färger som korten sätter text i. */
.totals-net.is-plus,
.totals-roi.is-plus {
  color: var(--green-700);
}
.totals-net.is-minus,
.totals-roi.is-minus {
  color: var(--red-500);
}
.totals-net.is-even,
.totals-roi.is-even {
  color: var(--ink-soft);
}

/* Summaraden. Den dubbla linjen ovanför (border-top + box-shadow-hårstreck)
   är kvittots avslutning och det enda stället i panelen där en ren dekoration
   får finnas – den bär ändå information: allt under strecket är summan av
   allt ovanför. */
.totals-sum {
  margin-top: 0.15rem;
  padding-top: 0.7rem;
  border-top: 2px solid var(--ink-faint);
  box-shadow: inset 0 3px 0 -2px var(--ink-faint);
  border-bottom: 0;
}
.totals-sum .totals-product {
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
/* Summans kantband. Guld dög mot mörk botten men blir ett gult streck på
   vitt. Bläckfärgen säger samma sak – "det här är inte en produkt, det är
   alla" – utan att införa en femte färg i en panel vars hela poäng är att
   bara nettot färgas. */
.totals-sum .totals-cell-name {
  border-left-color: var(--ink);
}
.totals-sum .totals-num {
  font-size: 0.92rem;
}
.totals-sum .totals-net {
  font-size: 1.15rem;
}
.totals-sum .totals-roi {
  font-size: 0.8rem;
}

/* Brasklapparna (orättade lappar, saknat radantal). Samma ton som .hint,
   precis som flikens övriga småtext. */
.history-totals .totals-notes,
.history-totals .totals-empty {
  margin: 0.7rem 0 0;
  font-size: 0.7rem;
  color: var(--ink-soft);
}

/* Smal panel: fyra sifferspalter får inte plats bredvid namnet. Namnet tar
   hela bredden och talen ställer upp sig i två par under.

   CONTAINER query, inte media query. Skälet är konkret: panelen är inte
   alltid lika bred som skärmen (sidan har maxbredd och padding, och
   layouten runt omkring kan ändras), så en @media-regel mätte fel yta och
   lät talen krocka i en smal panel på en bred skärm. @container mäter
   panelen själv, vilket är exakt det som avgör om talen får plats.

   Rubrikraden döljs här: den kan inte längre stå över rätt spalt, och en
   rubrik som pekar fel är sämre än ingen. Talen får egna etiketter via
   ::before i stället.

   Etiketten ligger i en EGEN grid-spalt med fast bredd i stället för att
   flyta med space-between. Med space-between hamnade varje tal på sitt eget
   avstånd från kanten beroende på hur lång just den etiketten var, och
   sifferkolumnen – hela skälet till att panelen är formad som ett kvitto –
   slutade stå i lod (syntes tydligt i mobilskärmdumpen 2026-09-08). Med en
   fast etikettspalt börjar alla tal på samma x-läge igen. */
.history-totals {
  container-type: inline-size;
}

@container (max-width: 560px) {
  .totals-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem 0.9rem;
  }
  .totals-cell-name {
    grid-column: 1 / -1;
    margin-bottom: 0.2rem;
  }
  .totals-labels {
    display: none;
  }
  .totals-num {
    display: grid;
    grid-template-columns: 3.1rem minmax(0, 1fr);
    align-items: baseline;
    gap: 0.4rem;
  }
  .totals-num::before {
    content: attr(data-label);
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-faint);
    text-align: left;
  }
  /* Nettot är signaturen och får vara störst – men inte så stort att det
     spränger sin spalt på en smal skärm. */
  .totals-sum .totals-net {
    font-size: 1.02rem;
  }
}

/* Riktigt smal panel (delad skärm, liten telefon): två sifferspalter blir
   för trångt även med kort etikett. En spalt per tal, fortfarande i lod.

   Gränsen är avsiktligt LÅG (285px, inte 360px). En vanlig telefon i stående
   läge ger en panel på ~330–350px inre bredd, och där får två spalter fint
   plats – med 360px slog en-spaltsläget in på en helt vanlig mobil och
   gjorde panelen dubbelt så hög i onödan (sett i skärmdumpen 2026-09-08).
   Under 285px räcker bredden verkligen inte till två tal bredvid varandra. */
@container (max-width: 285px) {
  .totals-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* "Oppna" och "Orattat" har samma fyra-kolumnsrutnat och alltid alla fyra
   produktkolumnerna som "Avgjorda" (#history-groups) - tomma kolumner far en
   "inga lappar"-text. Respektive sektion doljs bara nar ingen produkt har
   nagot att visa dar. */
#history-live-section,
#history-unrated-section {
  margin-bottom: 0.6rem;
}

/* Penna och papperskorg ligger inte langre som egna kort bredvid .history-item
   utan flyter ovanpa det (position: relative pa raden ar deras ankare) - David
   bad om detta 2026-08-26 istallet for tva separata smala knappkort. */
.history-row {
  position: relative;
}

/* Kolumn av fasta rader (.history-item-row) i stallet for en fri flex-wrap.
   Forut lag alla falt (titel/bricka/datum/rader/delad-med/vinst) i EN
   flex-container som fick radbryta sig sjalv efter skarmbredd - vilket gav
   olika brytpunkter pa olika kort beroende pa hur langt just det kortets
   text rakade vara (rapporterat 2026-08-24). Nu bestammer JS:en (se
   renderHistoryList/loadHistoryList) vilka rader som finns, och varje rad
   layoutas for sig - sa alla kort delar upp sig pa exakt samma stallen. */
/* KORTET (omgjort 2026-09-05: rutnät i stället för staplade absoluta lager).

   FÖRUT låg kortets fyra hörnelement – "N rätt"-brickan, live-pricken,
   pennan och papperskorgen – alla som position:absolute mot samma yta, och
   texten hölls undan dem med handräknad padding-right (2.6rem, 3.6rem,
   4.6rem på olika ställen). Varje gång något nytt tillkom (inlämnad-bocken,
   omgångsnumret) fick paddingarna räknas om, och kortet behövde en fast
   min-height: 7.9rem för att inget skulle klippas.

   NU är kortet ett rutnät med två spalter:
       [ innehåll som får växa ] [ resultatspalt, fast bredd ]
   Brickan ligger I spalten i stället för att sväva ovanpå kortet, så den
   kan aldrig krocka med titeln hur lång den än är – och ingen padding
   behöver längre räknas ut för hand. Fasta höjder är därmed borta: kortet
   är exakt så högt som innehållet kräver.

   Pennan/papperskorgen ligger kvar som absolut positionerade mot .history-row
   (kortets syskon, inte dess barn – knapp-i-knapp är ogiltig HTML), men de
   får nu sin egen reserverade remsa längst ner i stället för att ligga
   ovanpå texten (se .history-item-row-meta). */
.history-item {
  /* Ankare för pennan/papperskorgen och för live-pricken. */
  position: relative;
  width: 100%;
  display: grid;
  /* TVÅ spalter sedan 2026-09-24: [text, får växa] [resultatbricka, fast
     bredd]. Vinstbeloppet låg förut i en egen mittspalt (2026-09-05) men
     ligger nu INNE i brickan (se .history-item-badge), så en spalt räcker.
     Den fasta bredden gör att brickorna står i rak lodrät linje. */
  grid-template-columns: minmax(0, 1fr) 4.9rem;
  align-items: start;
  column-gap: 0.6rem;
  row-gap: 0.3rem;
  background: var(--paper-raised);
  border: 1px solid var(--paper-line);
  /* Rundat på alla hörn sedan 2026-09-24 – färgryggen är numera en rundad
     stapel INNE i kortet (.history-item-edge::before), inte en kantlinje,
     så hörnen behöver inte längre vara raka för att den ska se hel ut. */
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 0.75rem 0.9rem 0.75rem 1.1rem;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: 0.9rem;
  transition: transform 0.4s var(--ease-bounce), box-shadow 0.15s, border-color 0.15s;
}

.history-item-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.6rem;
  /* Alla textrader ligger i VÄNSTERSPALTEN. Resultatspalten till höger är
     reserverad åt brickan (se .history-item-badge), så texten kan aldrig
     hamna under den. */
  grid-column: 1;
  min-width: 0;
}

/* Titelraden med en nedräkning (öppna lappar) STRÄCKER SIG ÖVER ALLA TRE
   rutnätsspalterna i stället för att stanna i spalt 1 (David 2026-09-16:
   "den är fortfarande inte tillräckligt till höger") - en öppen lapp har
   varken vinstsumma (spalt 2) eller RÄTT-bricka (spalt 3), men grid.
   grid-template-columns på .history-item reserverar ändå de spalternas
   bredd åt ANDRA kort i samma lista, så margin-left: auto inuti spalt 1
   bara pressade nedräkningen till KOLUMNENS kant, inte kortets. align-items:
   flex-start (i stället för ärvda baseline) linjerar countdown-boxen mot
   NAMNETS överkant - baseline hade annars räknats mot .history-item-draws
   SISTA textrad (underraden), vilket fick nedräkningen att se lågt
   placerad ut ("också för låg"). */
.history-item-row-title:has(.history-item-countdown) {
  grid-column: 1 / -1;
  align-items: flex-start;
}

/* Titelraden. Ingen padding-right längre: brickan ligger numera i kortets
   HÖGERSPALT (grid), inte ovanpå kortet, så titeln kan aldrig hamna under
   den oavsett hur lång den är. Det var precis det problemet de handräknade
   3.6rem försökte lösa 2026-08-26.

   Brickan står på rad 1 i spalt 2, alltså i höjd med titeln – samma optiska
   placering som förut, men nu framräknad av rutnätet. */
.history-item-row-title {
  align-items: baseline;
}

/* Meta-raden (datum · radantal · sparad · delad med ...).

   INTE en flex-container, till skillnad från de andra raderna. Som flex blev
   varje del ETT flex-item och punkterna mellan dem egna items – när raden
   bröt kunde en ensam "·" bli kvar först eller sist på sin rad, vilket såg
   ut som ett skräptecken.

   Som vanlig radbrytande text hänger punkten ihop med orden omkring sig och
   raden bryter där texten faktiskt tar slut. */
.history-item-row-meta {
  display: block;
  grid-column: 1;
  color: var(--ink-faint);
  font-size: 0.8rem;
  line-height: 1.5;
  /* Håller undan pennan/papperskorgen i kortets nedre högra hörn. Meta-raden
     är det enda som når ända ner till dem. */
  padding-right: 3.9rem;
}

.history-item-meta-sep {
  color: var(--paper-line);
}

/* Hover: kortet lyfter och färgryggen breddas, som om man drog ut kupongen
   ur bunten. Ett Stryktipset-kort lyser blått, ett Topptipset-kort guld.

   Den breda ryggen är vänsterkanten (6px). Den tunna stapeln inne i kortet
   (.history-item-edge::before) göms under tiden (2026-09-25) – annars syntes
   två färgade ränder bredvid varandra ("dubbla gula grejer"). */
.history-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--p-color, var(--blue-500)) 45%, var(--paper-line));
  border-left-width: 6px;
  /* Kortet får inte hoppa i sidled när kanten växer 1px→6px: 5px mindre
     padding tar ut de 5px bredare kanten (grundpaddingen är 1.1rem). */
  padding-left: calc(1.1rem - 5px);
}

.history-item-edge:hover::before {
  opacity: 0;
}

.history-item:focus-visible {
  outline: 2px solid var(--blue-500);
  outline-offset: 2px;
}

/* --- Avgjorda: kompakta, hopfällbara kort -------------------------------- */

/* Hopfällt visar namn + inlämnad-bock + chevron + resultatstämpeln, och
   underraden (omgång + speldatum). Meta-raden döljs tills man fäller ut
   kortet.

   Ingen fast höjd längre (var 3.8rem): rutnätet gör kortet exakt så högt som
   de två textraderna kräver, och stämpeln till höger är lägre än så. */

/* Hopfällt: meta-raden döljs - den kommer fram när man fäller ut kortet.
   Underraden (omgång + speldatum) står KVAR så man ser vilken lapp det är
   (David 2026-09-02).

   VINSTEN står också kvar (ändrat 2026-09-05). Den doldes förut i hopfällt
   läge, men på en avgjord lapp är "gav den något?" precis lika intressant
   som antalet rätt – att fälla ut varje kort för att hitta de betalande
   lapparna gjorde listan trögläst. Nu står beloppet under stämpeln och
   kolumnen går att skanna. */
.history-item--compact.is-collapsed .history-item-row-meta {
  display: none;
}

/* Hopfällt: kortet är två rader (namn-rad + underrad). .history-item-draw
   förblir display:block (basregeln) så underraden (också block) hamnar under
   – ingen flex-container, som tidigare tvingade sub-raden till ett krympande
   flex-item vars text klipptes av kortets overflow:hidden ("lör 29" i stället
   för "lör 29 aug.", David 2026-09-02).

   .history-item-draw MÅSTE fylla hela titelraden (width: 100% + flex: 1) –
   annars krymper den runt sitt innehåll, och då blir NAMNETS "max-width: 100%"
   (nedan) räknat mot den redan hopkrympta bredden = namnet klipptes med ellips
   fast det fanns gott om plats (David 2026-09-02, mobil: "Omgång 4..."). */
.history-item--compact.is-collapsed .history-item-draw {
  flex: 1;
  min-width: 0;
  width: 100%;
}

/* Bara NAMNET kapas med ellips (inline-block med max-width): chevronen (före)
   och inlämnad-bocken (efter) ska aldrig kapas bort. max-width lämnar plats
   för dem två (~2.6rem tillsammans – bocken är nu 1.9rem + 0.3rem marginal,
   chevronen resten).

   Behöver INTE längre lämna plats åt "N rätt"-stämpeln: den ligger i kortets
   andra rutnätsspalt, så titelspalten är redan avsmalnad åt den. Förut var
   marginalen 3.4rem eftersom brickan svävade ovanpå samma yta. */
.history-item--compact.is-collapsed .history-item-name {
  display: inline-block;
  max-width: calc(100% - 2.7rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

.history-item--compact.is-collapsed .history-item-draw-sub {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* "Skapad av"/"Delad med"-raden (history-item-draw-sub-shared) i hopfällt
   läge får INTE ärva nowrap-ellipsen ovan - "Delad med 4 användare" klipptes
   annars av till "Delad m..." (David 2026-09-16, skärmdump: "det får inte
   plats"). Egen rad, tillåts radbryta normalt i stället. */
.history-item--compact.is-collapsed .history-item-draw-sub-shared {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

/* Döljs helt när kortet FÄLLS UT - annars stod "skapad av"/"Delad med" på
   BÅDA raderna samtidigt (denna kompakta underrad OCH den fulla meta-raden
   med presence-prick/tooltip, se history-item-row-meta) (David 2026-09-16:
   "i expanderat är det dubbel info på skapad av och delad med"). Elementet
   byggs oavsett fällt läge (compact-parametern avgör, inte is-collapsed),
   så CSS får göra jobbet att bara visa EN av de två varianterna åt gången. */
.history-item--compact:not(.is-collapsed) .history-item-draw-sub-shared {
  display: none;
}

/* Linjera texten under titeln (underraden med datumet, OCH meta-raden när
   kortet är utfällt: "2 000 rader · Delad med ...") med TITELTEXTEN, inte med
   chevronen som sitter före den. Chevronen upptar 1.4rem - 0.3rem (neg. left)
   + 0.15rem (right) ≈ 1.25rem från kortets textkant till där namnet börjar.

   Vinstbeloppet ligger inne i resultatbrickan i högerspalten och berörs
   inte av den här marginalen. */
.history-item--compact .history-item-draw-sub,
.history-item--compact .history-item-row-meta {
  margin-left: 1.25rem;
}

/* Papperskorgen hör till det utfällda kortet - i hopfällt läge skulle den
   trängas ihop med brickan på den korta ytan. */
.history-item--compact.is-collapsed ~ .history-delete-button {
  display: none;
}

/* Extra bottenutrymme i HÖGERSPALTEN när kortet är utfällt och papperskorgen
   alltså syns (bugg hittad av David 2026-09-05): knappen är absolut
   positionerad mot .history-row och ligger kvar på fasta 0.5rem/1.75rem från
   kortets nedre högra hörn oavsett hur kortets eget innehåll växer.
   Vinstsumman (då en egen rad i högerspalten, numera inne i brickan) kunde därför
   hamna rakt bakom knappen och synas som ett tomrum - texten fanns och var
   rätt positionerad, men knappens egen bakgrund målade över den.

   Lösningen är inte att flytta beloppet (det ska sitta ihop med stämpeln
   ovanför) utan att ge HELA kortet bottenluft när knappen finns kvar, så
   att rutnätets sista rad aldrig sträcker sig ner i knappens remsa.
   :not(.history-item--compact) täcker Pågår-korten (aldrig kompakta, har
   alltid knappen); .history-item--compact:not(.is-collapsed) täcker ett
   utfällt Avgjorda-kort. */
.history-item:not(.history-item--compact),
.history-item--compact:not(.is-collapsed) {
  padding-bottom: 2.3rem;
}

/* Chevronen: en liten ▾ INLINE först i titelraden, uppe till vänster före
   namnet (som en trädvy). Inte absolut-positionerad - då kan den aldrig krocka
   med "N rätt"-brickan i högra hörnet. <span role="button"> inuti kortets
   <button>. Vrids 180° när kortet är utfällt. Negativ vänstermarginal drar in
   den mot kortkanten så namnet inte trycks in lika mycket. */
.history-item-expand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  margin-left: -0.3rem;
  margin-right: 0.15rem;
  vertical-align: -0.2em;
  color: var(--ink-faint);
  font-size: 0.8rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 999px;
  transition: transform 0.15s, color 0.15s, background 0.15s;
}

/* Ritad chevron (2026-09-24) i stället för tecknet ▾, som blev en liten
   suddig prick i många typsnitt: två kanter av en roterad ruta. */
.history-item-expand::before {
  content: "";
  width: 0.36rem;
  height: 0.36rem;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: translateY(-0.12rem) rotate(45deg);
}

.history-item-expand:hover {
  color: var(--ink);
  background: var(--paper-sunken);
}

.history-item-expand:focus-visible {
  outline: 2px solid var(--blue-500);
  outline-offset: 1px;
}

.history-item--compact:not(.is-collapsed) .history-item-expand {
  transform: rotate(180deg);
}

/* "Aktiv just nu" – blinkande grön prick i övre högra hörnet på lappar vars
   omgång rullar mellan spelstopp och sista matchens slut (se
   isEntryLiveActive i app.js). .history-item är en flex-container med
   flex-wrap: pricken läggs därför absolut-positionerad, så den inte blir ett
   flex-item som knuffar om namn/spelstopp/radantal.

   Lite extra högerpadding på kortet när pricken finns, så den aldrig hamnar
   ovanpå texten på smala skärmar där raderna bryter. */
.history-item-live {
  position: relative;
  padding-right: 1.6rem;
}

.live-dot {
  position: absolute;
  top: 0.55rem;
  right: 0.6rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  /* Liten gradient i stället för platt grönt: ljusare uppe till vänster ger
     pricken en aning volym, som en lysande diod snarare än en klisterlapp. */
  background: radial-gradient(circle at 35% 35%, #34d17e, var(--green-500) 70%);
  /* Egen stackningskontext, sa halon (::after, z-index -1) hamnar bakom
     pricken men fortfarande FRAMFOR kortets bakgrund. Utan isolation hade
     -1 kunnat sla igenom hela .history-item och lagt ringen bakom kortet. */
  isolation: isolate;
  /* Själva pricken ligger STILLA och fullt synlig. Första försöket lat den
     blinka i opacitet samtidigt som ringen expanderade, i samma takt - tva
     rorelser i samma slag blev flimmer snarare an puls. Nu andas bara
     ljusgarden runt om (::after nedan), sa markeringen alltid gar att lasa av
     medan den anda drar blicken till sig. */
  box-shadow: 0 0 6px rgba(31, 157, 92, 0.7);
}

/* Ljusgarden: en egen ring som vaxer utat och tonar bort, som ringar pa
   vatten. Eget pseudo-element i stallet for box-shadow pa pricken sjalv, sa
   den kan ha sin egen kurva och takt utan att paverka pricken.

   Kurvan ar medvetet INTE var(--ease-out): den bromsar in sa hart att ringen
   var helt utfasad efter ~0,6s och sedan lag dod resten av varvet - det
   lasles som en enstaka ryckning, inte en puls (frame-for-frame-koll i
   headless Chrome 2026-08-21). ease-out (den mjukare inbyggda) plus 2,4s
   varv ger ringen tid att faktiskt synas hela vagen ut. */
.live-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--green-500);
  /* Bakom pricken: ett pseudo-element ritas annars OVANPA foralderns
     bakgrund, och da hade den halvgenomskinliga ringen legat som en hinna
     over pricken och slatat ut gradienten. */
  z-index: -1;
  animation: live-dot-halo 2.4s ease-out infinite;
}

@keyframes live-dot-halo {
  0% {
    opacity: 0.5;
    transform: scale(0.6);
  }
  /* Opaciteten hanger med en bit in i expansionen i stallet for att falla
     direkt - annars hinner ringen knappt synas innan den ar borta. */
  40% {
    opacity: 0.28;
  }
  /* Slutar en bit fore 100% sa det blir en kort andningspaus mellan varven -
     en ring som startar om i exakt samma ogonblick som den forra dog ut ser
     mekanisk ut, medan en liten vila far den att kannas som en hjartslag. */
  75%, 100% {
    opacity: 0;
    transform: scale(3);
  }
}

.history-item-active {
  border-color: var(--blue-500);
  box-shadow: var(--shadow-sm);
  background: var(--blue-50, var(--paper-raised));
}

.history-item-draw {
  display: block;
  font-weight: 700;
  color: var(--ink);
  /* flex: 1 + min-width: 0 - delar titelraden (.history-item-row-title, flex)
     med nedräkningen (.history-item-countdown) som eget syskon-flex-item.
     Utan min-width: 0 vägrar ett flex-item krympa under sitt innehålls
     naturliga bredd, vilket hade tryckt undan/radbrutit countdown-elementet
     i stället för att låta namnet vika undan. */
  flex: 1;
  min-width: 0;
}

/* Nedräkningen till spelstopp (öppna lappar, David 2026-09-16). Eget
   flex-item i titelraden (se item.innerHTML) - margin-left: auto pressar
   den till radens YTTERKANT oavsett hur smalt namnet är (ett tidigare
   float-försök flöt bara till kanten av namnets egen hopkrympta bredd,
   inte hela radens - "vill ha nedräkningen längst till höger"). flex-shrink:
   0 så den aldrig själv krymper/radbryter när namnet är långt - hellre att
   namnet viker undan (min-width: 0 ovan). font-size uppjusterad ("lite
   större text") och whitespace: nowrap så "3h 24m kvar" aldrig bryts mitt i. */
.history-item-countdown {
  margin-left: auto;
  flex-shrink: 0;
  /* flex-start (inte center) - linjerar mot namnets överkant, se
     :has()-regeln ovan för varför center/baseline satte den för lågt. */
  align-self: flex-start;
  font-size: 0.95rem;
  white-space: nowrap;
}

.history-item-date {
  color: var(--ink-faint);
  font-size: 0.8rem;
}

/* Insats per rad (bara Topptipset, se stakeText i loadHistoryList) - star i
   meta-raden nar kortet ar utfallt. */
.history-item-stake {
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 600;
}

/* Nar lappen senast sparades, med klockslag (savedAtText i buildHistoryRow).
   Dampad som datumet - sekundar info, det ar speldatumet och radantalet man
   skannar forst. Star i samma meta-rad. */
.history-item-saved {
  color: var(--ink-faint);
  font-size: 0.78rem;
}

/* RESULTATBRICKAN (omgjord 2026-09-24, David: "har aldrig känt mig nöjd med
   hur antal rätt presenterats").

   FÖRUT: en mono-stämpel med siffran, en hårlinje och ordet RÄTT i spärrade
   versaler, vinstsumman i en egen spalt till vänster och rött för "ingen
   utdelning" – det röda lästes som ett fel ("10 rätt var fel för den inte
   hade ngn vinst").

   NU: EN mjuk bricka som bär hela resultatet. Stort tal + ett litet "rätt"
   på samma rad, och – bara när lappen gav pengar – beloppet under. Ingen
   vinst = ingen extra rad och en lugn grå ton, så vinsterna blir undantagen
   som syns. Brickan äger kortets högerspalt (fast bredd på .history-item),
   så den står i rak lodrät linje från kort till kort. Siffrorna är
   tabellsiffror (lika breda), så talen står exakt över varandra. */
.history-item-badge {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  padding: 0.4rem 0.5rem;
  border-radius: 12px;
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.history-item-badge-score {
  display: inline-flex;
  align-items: baseline;
  gap: 0.2rem;
  font-size: 0.72rem;
  font-weight: 600;
}

.history-item-badge-score b {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.history-item-badge-win {
  font-size: 0.74rem;
  font-weight: 700;
}

/* Tre tonsteg (logiken i bestCorrectTone, 10-live.js – oförändrad): stor
   vinst (≥ 10 × insatsen), vinst, och ingen vinst/okänt. */
.history-item-badge-top {
  background: linear-gradient(180deg, #23965d, var(--green-700));
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 3px 10px rgba(18, 96, 58, 0.22);
}

.history-item-badge-good {
  background: #e9f5ee;
  color: var(--green-700);
  box-shadow: inset 0 0 0 1px rgba(18, 96, 58, 0.14);
}

/* Ingen utdelning (zero) och okänd utdelning (plain, äldre lappar) ser
   likadana ut: lugnt grå – resultatet är fortfarande läsbart, det bara
   stjäl inte blicken från lapparna som gav pengar. */
.history-item-badge-zero,
.history-item-badge-plain {
  background: var(--paper-sunken);
  color: var(--ink-soft);
}

.history-item-badge-zero .history-item-badge-score b,
.history-item-badge-plain .history-item-badge-score b {
  color: var(--ink);
}

/* Kortets FÄRGRYGG: produktens färg som en smal solid stapel längs
   vänsterkanten. Knyter kortet till produktskylten ovanför utan att kortet
   själv behöver bära någon färg – resten av kortet är vitt papper.

   Färgen ärvs från kolumnen (--p-color på .history-group, se skylten ovan) i
   stället för att varje produkt har en egen regel här. De fyra
   .product-*-klasserna sätts fortfarande av JS (buildHistoryRow) och är kvar
   som fallback för kort som råkar ritas UTANFÖR en .history-group – t.ex. i
   Live-vyns "valda lappen"-läge.

   Ryggen är 3px (var 4): med skylten ovanför som bär produktidentiteten
   behöver kanten bara påminna, inte ropa. */
.history-item-edge::before {
  content: "";
  position: absolute;
  left: 0.4rem;
  top: 0.7rem;
  bottom: 0.7rem;
  width: 3px;
  border-radius: 999px;
  background: var(--p-color, var(--paper-line));
  pointer-events: none;
}

/* De fyra .product-*-klasserna (satta av JS i buildHistoryRow) sätter en MÖRK
   GRADIENT som background – de är gjorda för produktkorten på förstasidan och
   för de vita brickorna. Historikkortet ska INTE ha den: det är vitt papper
   med en färgrygg. Bakgrunden måste därför nollas med en selektor som väger
   minst lika tungt som .product-stryk (0,1,0) OCH kommer senare i kaskaden –
   03-cards.css laddas efter den här filen, så en ensam .history-item-edge
   förlorar. Sammansatt selektor (0,2,0) vinner oavsett filordning.

   Samtidigt sätts --p-color, så kortet får rätt färgrygg även när det ritas
   UTANFÖR en produktkolumn (t.ex. Live-vyns valda lapp) och därför inte ärver
   något --p-color från .history-group. */
.history-item-edge.product-stryk,
.history-item-edge.product-europa,
.history-item-edge.product-topp,
.history-item-edge.product-power {
  background: var(--paper-raised);
}

.history-item-edge.product-stryk { --p-color: var(--p-stryk); }
.history-item-edge.product-europa { --p-color: var(--p-europa); }
.history-item-edge.product-topp { --p-color: var(--p-topp); }
.history-item-edge.product-power { --p-color: var(--p-power); }

/* Penna och papperskorg ligger BREDVID VARANDRA nere i kortets högra hörn
   (omgjort 2026-09-05). Förut satt pennan uppe till höger och papperskorgen
   nere till höger, på var sin kortsida – men uppe till höger sitter numera
   resultatstämpeln, så pennan hade krockat med den.

   De tonas fram vid hover/fokus (se nedan) så kortet är rent när man bara
   skannar listan. */
.history-delete-button {
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
  width: 1.75rem;
  height: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper-raised);
  border: 1px solid var(--paper-line);
  border-radius: 50%;
  color: var(--ink-faint);
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  opacity: 0;
  transition: border-color 0.15s, color 0.15s, background 0.15s, opacity 0.15s;
}

.history-delete-button:hover {
  border-color: var(--red-500);
  color: var(--red-500);
  background: #fdf2f2;
}

/* Papperskorgen fram när man rör kortet eller tabbar in i det. Touch saknar
   hover helt, så där visas den alltid – annars hade den varit oåtkomlig på
   mobil (hover: none är den enda pålitliga touch-signalen i CSS). */
.history-row:hover .history-delete-button,
.history-row:focus-within .history-delete-button {
  opacity: 1;
}

@media (hover: none) {
  .history-delete-button {
    opacity: 1;
  }
}

/* Inlämnad-markeringen: en liten bock direkt EFTER lappens namn på översta
   raden (David 2026-09-02). Ingen ring, ingen cirkel, ingen knapp-form – bara
   själva bocken. Inline i .history-item-draw, ett <span role="button"> (kortet
   ÄR en <button>, så en riktig knapp här vore ogiltig HTML).

   Bocken är en INLINE SVG-linje, inte en ✓-glyf. Det gör att den kan RITAS ut
   med en stroke-animation i klickögonblicket (David 2026-09-09). Tidigare var
   markeringen en solid grön cirkel med vit bock och streckad ring i av-läget;
   det kändes för skarpt mot kortets lugna papperskänsla ("för skarp i
   designen"). Nu skiljer sig lägena bara i FÄRG och OPACITET på samma linje:

     av  = samma bock, men dämpad grå och nästan genomskinlig ("inte gjort än")
     på  = grön bock i full styrka ("klar, ligger hos SvS")

   Betydelsen står också i title/aria-label (hover + skärmläsare), och av-läget
   tydliggörs på hover/fokus så det syns att ytan är klickbar. */
.history-submit-toggle {
  /* inline-flex + fast bredd = en jämn träffyta, och bocken hoppar inte i
     sidled när den byter läge (samma metrik i båda). Stor bock (1.9rem,
     rejält större än namnets teckenhöjd) – den ska synas ordentligt, inte
     gömma sig (David 2026-09-09: "gör bocken mkt större" + "ännu större").
     SVG:n får overflow:visible så linjen inte klipps av rutan trots att den
     spränger den lite. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  margin-left: 0.3rem;
  /* Linjera med namnets mitt: middle sätter boxens vertikala mittpunkt vid
     textens x-höjd-mitt, vilket för en versal rubrik hamnar mitt på tecknen
     (David 2026-09-09: "samma nivå som lappens namn"). */
  vertical-align: middle;
  box-sizing: border-box;
  cursor: pointer;
  /* AV-läget: bocken finns där men är dämpad och genomskinlig. */
  opacity: 0.4;
  transition: opacity 0.15s;
}

.history-submit-toggle svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.history-submit-tick {
  fill: none;
  stroke: var(--ink-faint);
  /* Tunnare stroke nu när bocken är stor – 1.6 mot viewBoxens 16 ger en
     luftig, inte klumpig, linje i den större storleken. */
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.15s;
}

.history-submit-toggle:hover {
  opacity: 0.8;
}

.history-submit-toggle:hover .history-submit-tick {
  stroke: var(--green-600);
}

.history-submit-toggle:focus-visible {
  outline: 2px solid var(--green-500);
  outline-offset: 3px;
  border-radius: 3px;
  opacity: 1;
}

/* PÅ-läget: grön bock i full styrka. Ingen fyllnad, ingen ram. */
.history-submit-toggle.is-submitted {
  opacity: 1;
}

.history-submit-toggle.is-submitted .history-submit-tick {
  stroke: var(--green-600);
  stroke-width: 1.8;
}

/* Ritas ut: sätts bara i klickögonblicket när man SÄTTER markeringen (JS tar
   bort klassen efter 600 ms). dash-längden 18 täcker hela pathen med marginal;
   offset animeras från 18 (osynlig) till 0 (helt utritad). */
.history-submit-toggle.is-drawing .history-submit-tick {
  stroke-dasharray: 18;
  stroke-dashoffset: 18;
  animation: history-submit-draw 0.42s var(--ease-out) forwards;
}

@keyframes history-submit-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .history-submit-toggle.is-drawing .history-submit-tick {
    animation: none;
    stroke-dashoffset: 0;
  }
}

.history-submit-toggle.is-busy {
  opacity: 0.25;
  cursor: default;
}

/* --- Scroll-triggered / load animations --------------------------------- */

@keyframes rise-in {
  from { opacity: 0; transform: translateY(18px) scale(0.98); }
  to { opacity: 1; transform: translateY(0); }
}

.match-card,
.product-card,
#reduce-panel,
.overview,
.notice {
  animation: rise-in 0.6s var(--ease-spring) both;
}

/* --- Kontroller ----------------------------------------------------------- */

.controls {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 0.8rem;
}

/* .controls display:flex har samma CSS-specificitet som webbläsarens
   inbyggda [hidden] { display: none } och står senare i cascade-ordningen,
   så den vann annars över hidden-attributet (bugg 2026-08-20: own-save-
   bannern och andra .controls-element syntes trots hidden, X-knappen såg
   ut att inte fungera). !important tvingar döljningen att alltid vinna. */
.controls[hidden] {
  display: none !important;
}

.controls label {
  font-size: 0.85rem;
  color: var(--ink-soft);
}

/* Insats-label + fält ska alltid bryta rad tillsammans (annars hamnar
   labeln kvar på föregående rad medan fältet ensamt bryts ner). Ligger
   bredvid "Antal rader" i #reduce-panel (David 2026-08-26, efter flera
   försök att få den att se bra ut i toppfältet bredvid "Spara & dela"/
   "Ladda ner & lämna in" - hörde egentligen hemma här hela tiden, insatsen
   gäller ju per rad). */
.stake-field-group {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.stake-field-group label {
  white-space: nowrap;
  font-size: 0.85rem;
}

.stake-field-group input[type="number"] {
  margin: 0;
}

.stake-field-group[hidden] {
  display: none;
}

#save-bar-bottom {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--paper-line);
}

.controls select,
.controls input[type="number"] {
  background: #fff;
  color: var(--ink);
  border: 1px solid #dcdbd3;
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.55rem;
  font-size: 0.9rem;
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}

/* En <select> blir lika bred som sitt längsta alternativ. Omgångsväljaren
   på Topptipset ("Topptipset Extra 1869 – stänger tors 24 sep. 20:44") blev
   därför ~355px och sköt ut sidan ~6px i sidled på 360px-telefoner (David
   2026-09-24). Taket håller den inom raden; den valda texten kortas då av
   av webbläsaren, listan som fälls ut visas hel. */
.controls select {
  max-width: 100%;
}

.controls select:focus-visible,
.controls input[type="number"]:focus-visible {
  outline: none;
  border-color: var(--blue-500);
  box-shadow: var(--focus-ring);
}

.controls select:hover,
.controls input[type="number"]:hover {
  border-color: #c9c8bf;
}

.controls input[type="number"] {
  width: 4rem;
  font-variant-numeric: tabular-nums;
}

/* Förkryssningsgränserna gråas ut när brytaren #preselect-on är urbockad –
   de gör då ingenting (defaultSigns returnerar tom lista). Labeln närmast
   före ett urkopplat fält dämpas med, så raden läses som avstängd. */
#preselect-panel input[type="number"]:disabled {
  background: var(--paper);
  color: #b0b3b8;
  cursor: not-allowed;
}

#preselect-panel .controls label:has(+ input[type="number"]:disabled) {
  color: #b0b3b8;
}

/* Etikett + fält hålls ihop: på smal skärm bryts raden mellan paren
   ("vid odds högst [3,5]" / "och spelvärde minst [1]") i stället för att
   det sista fältet hamnar ensamt på en egen rad. */
.preselect-pair {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
}

/* Döljer webbläsarens inbyggda upp/ner-pilar på nummerfält (spara/dela-
   siffror, antal rader, odds- och spelvärdesspann m.fl.) – rent visuellt,
   fälten går fortfarande utmärkt att skriva/klistra siffror i. */
input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Antal rader kan bli femsiffrigt (upp till ~470 000 enligt spik-/
   helgarderingsgränserna). */
/* Förifylls med systemets faktiska (oreducerade) radantal, som för breda
   system (många helgarderingar) kan bli sexsiffrigt eller mer. */
#target-rows {
  width: 6.5rem;
}

/* Total-odds kan bli sexsiffrigt (upp till 2 000 000, se ODDS_BINS), och
   spelvärdet visas med två decimaler och kan bli trecifrigt före kommat –
   båda klipptes av vid den generella 4rem-bredden. */
#odds-min,
#odds-max {
  width: 5.5rem;
}

#value-min,
#value-max {
  width: 5rem;
}

/* Primärknappen (2026-09-24): en jämn, mjuk blå i stället för den
   mörka diagonala gradienten, med en svag ljus kant upptill som ger lite
   form utan att knappen ser blank ut. */
.controls button {
  background: linear-gradient(180deg, #3570bd, var(--blue-600));
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 0.5rem 1.05rem;
  font-size: 0.85rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 1px 2px rgba(15, 33, 64, 0.12), 0 2px 8px rgba(42, 93, 163, 0.16);
  transition: transform 0.4s var(--ease-bounce), box-shadow 0.12s var(--ease-out), background 0.15s;
}

.controls button:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 2px 4px rgba(15, 33, 64, 0.1), 0 6px 16px rgba(42, 93, 163, 0.22);
}

.controls button:active {
  transform: translateY(0) scale(0.98);
}

.controls button:focus-visible {
  outline: 2px solid var(--blue-500);
  outline-offset: 2px;
}

/* Spara & dela ska sticka ut tydligt mot alla andra knappar – det är
   verktygets enda sätt att dela ett system, så det ska aldrig gå att missa. */
.save-share-button {
  /* Fortfarande appens tydligaste knapp (se ovan) – men en mjukare grön
     och ett diffust sken i stället för en tung mörk skugga (2026-09-24). */
  background: linear-gradient(180deg, #25a765, #188652) !important;
  /* Vit text explicit: knappen används både i .controls (ärver #fff) och i
     modaler (gör det inte) – utan detta blev "Spara" i spardialogen blå
     mot grönt och nästan osynlig på mobil (David 2026-08-28). */
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 0.92rem !important;
  padding: 0.6rem 1.25rem !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 1px 2px rgba(15, 60, 35, 0.18), 0 6px 18px rgba(24, 134, 82, 0.24) !important;
  position: relative;
  /* Ram, hörn och typsnitt kom förut bara från ".controls button" – i en
     modal (utanför .controls) blev knappen därför kantig med webbläsarens
     standardram (David 2026-09-24, "Reducera och fortsätt"). */
  border: none;
  border-radius: var(--radius-sm);
  font-family: inherit;
  cursor: pointer;
}

.save-share-button:hover {
  background: linear-gradient(180deg, #21975b, #147347) !important;
}

/* Genväg till Svenska Spels sida – rödton (mer röd än orange på
   användarens begäran 2026-08-20) så knappen syns som en tydlig brygga
   till DERAS sida snarare än en verktygsintern åtgärd. */
.svs-shortcut-button {
  background: linear-gradient(180deg, #d9412c, #b3261a) !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 0.92rem !important;
  padding: 0.6rem 1.25rem !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 1px 2px rgba(90, 15, 8, 0.18), 0 6px 18px rgba(179, 38, 26, 0.22) !important;
  border: none;
}

.svs-shortcut-button:hover {
  background: linear-gradient(180deg, #c5361f, #9c1f13) !important;
}

.svs-shortcut-button:disabled {
  opacity: 0.7;
  cursor: progress;
}

/* Resultatrutan efter "Spela hos Svenska Spel" (se js/12-own-wager.js).
   Skapas dynamiskt, placeras direkt under export-lådan. Två lägen:
   -success (grön kant, granskningslänk) och -error (röd kant). */
.own-wager-box {
  margin: 0.75rem 0 0;
  padding: 0.95rem 1.1rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--paper-line);
  background: var(--paper-raised);
  box-shadow: var(--shadow-sm);
}

/* Betalarväljaren (buildPayerPicker) – i #payer-picker-box och i
   inlämningsdialogen. Knapparna får luft från kryssrutorna ovanför. */
.payer-picker .share-picker-list {
  margin: 0.4rem 0 0.2rem;
}

.payer-picker .modal-buttons {
  margin-top: 0.8rem;
}

.own-wager-box h3 {
  margin: 0 0 0.35rem;
  font-size: 1rem;
}

.own-wager-box p {
  margin: 0 0 0.6rem;
  font-size: 0.9rem;
  line-height: 1.5;
}

.own-wager-box-success {
  border-color: #2aa564;
  border-left: 4px solid #2aa564;
}

.own-wager-box-error {
  border-color: var(--red-500);
  border-left: 4px solid var(--red-500);
}

.own-wager-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.own-wager-go {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  background: linear-gradient(135deg, #e0331f, #a3140a);
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
}

.own-wager-go:hover {
  background: linear-gradient(135deg, #c22a19, #820f06);
}

.own-wager-copy,
.own-wager-download {
  padding: 0.5rem 0.9rem;
  border-radius: 8px;
  border: 1px solid var(--paper-line);
  background: #fff;
  font-size: 0.88rem;
  cursor: pointer;
}

.own-wager-copy:hover,
.own-wager-download:hover {
  background: #f4f4f2;
}

.own-wager-dismiss {
  margin-left: auto;
  border: none;
  background: none;
  font-size: 1rem;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 0.25rem 0.4rem;
}

.own-wager-hint {
  margin: 0.5rem 0 0 !important;
  font-size: 0.82rem !important;
  color: var(--ink-soft);
}

/* Sparfelet vid "Spela hos Svenska Spel" ska synas, inte försvinna tyst som
   tidigare (se submitOwnWager) - varm ton utan att larma lika starkt som
   .own-wager-box-error, eftersom spelet trots allt gick igenom. */
.own-wager-hint-warning {
  color: #92400e;
  font-weight: 600;
}

.hint {
  font-size: 0.8rem;
  color: var(--ink-soft);
  line-height: 1.5;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--ink);
  cursor: pointer;
}

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