/* Reduceraren — kupongkänsla: mörkblå djup, krita-vit yta, guld för jackpot.
   Byggd kring matchkortet som återkommande enhet, med rörelse som förstärker
   handlingar (klick, reducering, jackpot) snarare än dekorerar sidan. */

:root {
  --navy-950: #0a1830;
  --navy-900: #0f2140;
  --navy-800: #16304f;
  --navy-700: #1e3f66;
  --blue-500: #2f6fbf;
  --blue-600: #2a5da3;
  --blue-700: #24507f;
  --paper: #f6f5f1;
  --paper-raised: #ffffff;
  --paper-line: #e2e1da;
  --ink: #1a1d24;
  --ink-soft: #565a63;
  --ink-faint: #8b8e95;
  --gold-300: #ffe08a;
  --gold-400: #ffcf4d;
  --gold-500: #f2a70b;
  --gold-900: #3a2600;
  --green-500: #1f9d5c;
  --green-600: #17864b;
  --green-700: #12603a;
  --red-500: #d1453f;
  /* Headerns ljusa botten (2026-08-21): loggan är mörk och drunknade mot den
     gamla mörkblå headern. Tonerna är kylig-neutrala (inte varm kräm) så de
     hör ihop med sidans egen --paper nedanför. */
  --header-paper: #eef0ee;
  --header-paper-deep: #e2e6e4;
  /* Accenten hämtad ur loggan. Var röd så länge loggan var svart/röd; nu när
     loggan är svart/grå följer linjen med dit. */
  --logo-accent: #606060;
  /* "Lugn precision" (2026-09-24): skuggorna är lagrade – en hårfin
     kontaktskugga nära ytan plus en bred, mycket svag spridning – i stället
     för en enda mörkare skugga. Det ger kort som vilar mjukt på pappret
     utan att se upphöjda eller "klistrade" ut. Hörnen är något rundare av
     samma skäl. Namnen är oförändrade så alla befintliga regler följer med. */
  --shadow-sm: 0 1px 2px rgba(15, 33, 64, 0.04), 0 2px 8px rgba(15, 33, 64, 0.04);
  --shadow-md: 0 1px 2px rgba(15, 33, 64, 0.05), 0 8px 24px rgba(15, 33, 64, 0.08);
  --shadow-lg: 0 2px 4px rgba(15, 33, 64, 0.05), 0 18px 44px rgba(15, 33, 64, 0.13);
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  /* Fjäderkurvor för "mer studs" (David 2026-09-29) – samma som
     bouncy/spring i js/13-motion.js. Används på transform (hover-lyft,
     tecken-pop, kort som glider upp, stapeldiagrammet), aldrig på färg.
     Webbläsare utan linear() får cubic-bezier-reserven i @supports nedan. */
  --ease-bounce: linear(0, 0.036, 0.127, 0.255, 0.405, 0.563, 0.717, 0.863, 0.984, 1.082, 1.155, 1.203, 1.229, 1.234, 1.223, 1.2, 1.169, 1.134, 1.096, 1.06, 1.027, 1.0, 0.978, 0.962, 0.951, 0.946, 0.945, 0.948, 0.954, 0.962, 0.97, 0.979, 0.987, 0.995, 1.001, 1.006, 1.01, 1.012, 1.013, 1.013, 1.012, 1.011, 1.009, 1.007, 1.005, 1.003, 1.001, 1.0, 1);
  --ease-spring: linear(0, 0.023, 0.082, 0.165, 0.269, 0.384, 0.497, 0.613, 0.723, 0.82, 0.908, 0.983, 1.042, 1.09, 1.125, 1.147, 1.159, 1.163, 1.159, 1.149, 1.135, 1.118, 1.1, 1.08, 1.062, 1.044, 1.028, 1.014, 1.002, 0.992, 0.985, 0.98, 0.976, 0.974, 0.974, 0.974, 0.976, 0.978, 0.981, 0.984, 0.987, 0.99, 0.993, 0.996, 0.998, 1.0, 1.001, 1.003, 1);

  /* Ytor och linjer för den mjukare formen. --paper-sunken användes redan
     (med reservfärg) av brytaren och Nollställ-knappen men fanns aldrig
     definierad – nu en riktig token. --hairline är den mjuka avdelaren
     inne i kort (tunnare i uttrycket än --paper-line). --focus-ring är en
     gemensam mjuk fokusring för fält. */
  --paper-sunken: #efeee9;
  --hairline: #efeee9;
  --surface-tint: #f7f8fa;
  --focus-ring: 0 0 0 3px rgba(47, 111, 191, 0.18);
  --gold-200: #ffecb3;

  /* --- Produktfärgerna som riktiga tokens (2026-09-05) -------------------
     Exakt samma fyra färger som förut (#2c5490 blå, #1f8a57 grön, #cf941f
     guld, #c0392b röd) – de är Svenska Spels egna och ska inte röras. Det
     som ändrats är att de nu står på EN plats i stället för att vara
     inskrivna för hand i fyra CSS-filer (03-cards, 04-coupon, 05-correction,
     02-navigation hade var sin kopia). Ändras en produktfärg någon gång
     räcker det numera att ändra den här.

     Tre roller per produkt, eftersom samma färg behöver bete sig olika
     beroende på vad den ligger på:
       --p-<x>       full styrka. Nameplate-bandet och kortets ryggrad.
       --p-<x>-ink   mörkad ~15 % så färgen går att SÄTTA TEXT i mot vitt
                     papper och fortfarande klarar kontrastkravet. Guld är
                     värstingen: #cf941f som text mot vitt är oläsligt, så
                     den mörkas mest.
       --p-<x>-wash  mycket ljus ton för ytor (t.ex. vald-markering). */
  --p-stryk: #2c5490;
  --p-stryk-ink: #234368;
  --p-stryk-wash: #eef2f9;
  --p-europa: #1f8a57;
  --p-europa-ink: #176b43;
  --p-europa-wash: #ecf6f1;
  --p-topp: #cf941f;
  --p-topp-ink: #8a6110;
  --p-topp-wash: #fbf3e2;
  --p-power: #c0392b;
  --p-power-ink: #9a2c20;
  --p-power-wash: #fbeeec;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

* {
  box-sizing: border-box;
}

/* Sidans grundton sitter pa <html>, inte pa <body>. Skalet: vattenstampeln
   nedanfor ar ett body::before med z-index -1, och ett sadant barn ritas
   bakom sin egen foralders bakgrund. Lag gradienten kvar pa body hade
   stampeln hamnat under den och blivit osynlig. Pa <html> ritas gradienten i
   botten och stampeln ovanpa - entydig ordning i alla webblasare. */
html {
  /* Två mycket svaga ljuskällor (kall blå uppe till vänster, varm ton nere
     till höger) över papperskulören – ger djup utan att synas som en färg. */
  background:
    radial-gradient(1200px 600px at 20% -10%, #edf2fa 0%, transparent 55%),
    radial-gradient(900px 700px at 100% 110%, #f3efe6 0%, transparent 60%),
    var(--paper);
  background-attachment: fixed;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Genomskinlig sa att html-gradienten och vattenstampeln syns igenom. */
  background: transparent;
  color: var(--ink);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* Var 4rem for att gora plats at den fasta #summary-bar langst ner. Den ar
     borttagen (David 2026-08-22, overflodig - samma radantal/pris star redan i
     kupongoversikten), sa bara lite luft mot sidfoten behovs. */
  padding-bottom: 1rem;
  /* Ger vattenstampeln (body::before) nagot att positionera sig mot utan att
     paverka nagot annat: statiskt positionerade barn beter sig likadant. */
  position: relative;
}

/* Loggan som mycket ljus vattenstampel bakom hela sidan. Egen pseudo-element
   i stallet for en extra bakgrundsbild pa body, eftersom opacity da hade
   slagit pa hela sidans innehall - har kan bilden tonas ner for sig.

   fixed + inset:0 gor att den star still nar sidan scrollar, som ett tryck i
   pappret snarare an nagot som aker med innehallet. z-index -1 lagger den
   bakom allt (lagsta z-index i ovriga stilar ar 1). pointer-events: none sa
   att den aldrig fangar klick. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* ../ eftersom filen ligger i css/ - relativa url() i CSS löses mot
     stilmallens egen plats, inte sidans. Utan ../ pekade den mot
     css/assets/logo-r.png, som Cloudflare Pages SPA-fallback svarade 200
     på med index.html i stället för 404 - loggan blev tyst osynlig trots
     att alla andra egenskaper (opacity, z-index) var korrekta (David
     2026-08-26, se project_vattenstampel_opacitet i minnet). */
  background-image: url("../assets/logo-r13.svg");
  background-repeat: no-repeat;
  background-position: center 55%;
  /* contain + max-bredd: loggan ska fylla ytan utan att beskaras, och inte
     bli absurt stor pa breda skarmar. */
  background-size: min(70vw, 46rem) auto;
  /* Tillbaka till 0.07 (David 2026-08-26: 0.14 höjdes i blindo medan
     bildsökvägen ovan var trasig och loggan aldrig faktiskt syntes - nu när
     den fungerar igen är 0.07 rätt nivå, samma som innan felsökningen). */
  opacity: 0.07;
}

/* Pa smala skarmar tar loggan proportionellt mer plats och blir latt stokig
   bakom text - dra ner den ytterligare. */
@media (max-width: 640px) {
  body::before {
    background-size: 85vw auto;
    opacity: 0.05;
  }
}

/* --- Header ------------------------------------------------------------- */

header {
  position: relative;
  /* Stram vertikalt: headern ska presentera sidan, inte ta plats från den.
     clamp gör att den kryper ihop ytterligare på små skärmar, där varje
     rad räknas. */
  /* Ingen bottenpadding: undertexten är sista raden och behöver inget
     utrymme under sig – linjen får sitta tätt inpå den. */
  padding: clamp(0.55rem, 1.8vw, 0.8rem) 1rem clamp(0.5rem, 1.6vw, 0.7rem);
  text-align: center;
  /* Ljus i stället för mörkblå djup: den nya loggan är svart och röd och
     behöver ljus botten för att synas. Ren yta utan mönster – loggan är det
     enda som ska dra blicken, och den röda linjen nertill räcker för att
     skilja headern från sidan. */
  /* Mjukare (2026-09-24): nästan vit, halvgenomskinlig yta som låter sidans
     ljusa gradient skina igenom, och en hårlinje i stället för den mörkgrå
     linjen – headern skiljer sig från sidan med ljus, inte med en ram. */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(250, 250, 248, 0.7) 100%);
  /* Enfärgad botten under gradienten (2026-09-25): iOS 26 färgar
     statusfältet i hemskärmsläget efter en ENFÄRGAD bakgrund högst upp och
     kan inte läsa av gradienter – då lägger den en suddig glasyta där i
     stället. Samma färg som theme-color i index.html och manifestet. */
  background-color: #fcfcfa;
  color: var(--ink);
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid rgba(15, 33, 64, 0.07);
  box-shadow: 0 1px 12px rgba(15, 33, 64, 0.03);
}

.site-title-row {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  /* Elementet är en <button> (klick = till startsidan), så knappens egen
     bakgrund/ram/padding nollställs – utseendet ska vara identiskt med den
     rubrik det var förut, bara klickbart. */
  width: 100%;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  /* Ingen gap – loggans R ska sitta ihop med "educeraren" som om den vore
     bokstaven, inte en ikon bredvid ordet. Botten-linjering (inte center)
     så texten står på R:ets baslinje, som en stor initial i en logotyp. */
}

.site-logo {
  display: block;
  /* R13-loggan (assets/logo-r13.svg, 2026-09-29) är kvadratisk och tajt
     beskuren – bredare än förra upprätta R:et (331×495), så höjden sänktes
     ett snäpp för att "Reduceraren" inte ska krocka med kontoknappen på
     mobil. R:et ska läsas som ordets initial, så det står en aning högre än
     texten men inte dominerar den.
     Negativ margin-top äter headerns padding i stället för att öka headerns
     höjd (header har overflow: hidden). */
  height: clamp(2.6rem, 6.8vw, 3.5rem);
  width: auto;
  /* Negativ margin-top äter headerns padding i stället för att öka headerns
     höjd (header har overflow: hidden). Den lilla negativa bottenmarginalen
     drar ner R:et så dess fot står på textens baslinje – bilden har en aning
     transparent luft kvar under motivet. */
  margin: -0.28rem 0.1em -0.24rem 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

header h1 {
  margin: 0;
  font-size: clamp(1.7rem, 5vw, 2.4rem);
  font-weight: 800;
  /* Tätare spärrning än förut: ordet ska sitta ihop med loggans R som ett
     tryckt logotyp-ord, inte som en rubrik bredvid en ikon. */
  letter-spacing: -0.035em;
  /* Svart bläck, samma som loggans. Den vita sheen-animationen är borta –
     den byggde på ljus text mot mörk botten och blev osynlig här. */
  color: #16181d;
}

main {
  flex: 1;
  padding: 1.4rem 1rem;
  max-width: 860px;
  margin: 0 auto;
  width: 100%;
}

/* --- Flikrad (Bygg system / Rätta tidigare omgång) ----------------------- */

/* Flikraden som en mjuk segmenterad kontroll (2026-09-24): en ljus, insänkt
   "skena" där den aktiva fliken är en vit platta med mjuk skugga. Samma
   formspråk som Enkelt/Avancerat-brytaren, så hela appen talar ett språk.
   Skenan är lika bred som innehållet (max 860px) och flikarna delar bredden
   lika, så det aldrig blir ett hål till höger. */
.tab-bar {
  display: flex;
  gap: 0.25rem;
  /* Uttrycklig bredd: body är en flex-kolumn, och där krymper ett element
     med margin: auto till sitt innehålls bredd i stället för att fylla ut. */
  width: calc(100% - 2rem);
  max-width: calc(860px - 2rem);
  box-sizing: border-box;
  margin: 0.9rem auto 0;
  padding: 0.25rem;
  background: rgba(15, 33, 64, 0.045);
  border-radius: 999px;
  box-shadow: inset 0 1px 2px rgba(15, 33, 64, 0.05);
}

.tab-button {
  flex: 1 1 0;
  position: relative;
  background: none;
  border: none;
  border-radius: 999px;
  color: var(--ink-soft);
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  padding: 0.55rem 0.7rem;
  line-height: 1.2;
  cursor: pointer;
  transition: color 0.2s var(--ease-out), background 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}

.tab-button:hover {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.5);
}

/* Smal skärm: flikarna bryter till två rader ("Live-/rättning") – då räcker
   mindre sidluft och en aning mindre text, och skenan får mjukare radie så
   de högre plattorna inte blir ovala. */
@media (max-width: 520px) {
  .tab-bar {
    border-radius: 16px;
  }

  /* Flikarna får bredd efter sin egen text i stället för lika breda
     platser (flex: auto, David 2026-09-24: "Sparade lappar" ser konstig
     ut). Med lika bredd fick "Om" lika mycket plats som "Sparade lappar
     (2)", som då bröts på två rader och blev högre än de andra. Nu ryms
     alla på en rad. */
  .tab-bar {
    gap: 0.1rem;
    padding: 0.2rem;
  }

  .tab-button {
    flex: 1 1 auto;
    white-space: nowrap;
    font-size: 0.76rem;
    padding: 0.5rem 0.35rem;
    border-radius: 13px;
  }
}

/* Riktigt smala telefoner (under ~350px): då ryms inte ens de tätare
   flikarna på en rad – hellre radbrytning inuti en flik än att hela sidan
   blir bredare än skärmen. */
@media (max-width: 350px) {
  .tab-button {
    white-space: normal;
  }
}

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

.tab-button-active,
.tab-button-active:hover {
  color: var(--navy-800);
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 33, 64, 0.08), 0 3px 10px rgba(15, 33, 64, 0.06);
}


/* Reserv för webbläsare utan linear() (äldre än Safari 17.2 / Chrome 113). */
@supports not (animation-timing-function: linear(0, 1)) {
  :root {
    --ease-bounce: cubic-bezier(0.34, 1.8, 0.64, 1);
    --ease-spring: cubic-bezier(0.34, 1.55, 0.64, 1);
  }
}