/* ==========================================================================
   Fortune14 — landningssida (v6)
   Två typsnitt: Unbounded (ordmärke FORTUNE14, rubriker) och Figtree (allt annat, tabellsiffror).
   Ett lugnt gränssnitt över en filmisk vintervärld. Guld bara där det betyder något.
   ========================================================================== */
:root {
  --night: #060a14;
  --panel: rgba(9, 13, 24, 0.92);   /* en fyllning för alla paneler och kort */
  --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px); --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px);
  --nav-total: calc(var(--nav-h) + var(--sat));
  --panel-solid: #0c111f;
  --line: rgba(239, 234, 224, 0.1);
  --line-strong: rgba(239, 234, 224, 0.18);
  --gold: #e0b129;
  --gold-hi: #f3cf5c;
  --gold-dim: rgba(224, 177, 41, 0.35);
  --ivory: #efeae0;
  --ivory-2: #cbc6ba;
  --mist: #98a0b4;
  --mist-2: #7a8298;
  --neg: #f08a73;
  --zero: #aeb6c8;

  --f-display: "Unbounded", "Figtree", system-ui, sans-serif;
  --f-body: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-bs: "Sora", "Figtree", system-ui, sans-serif; /* BetSpreads egen identitet */

  --t-h2: clamp(2rem, 3.2vw, 3rem);   /* en rubrik per skärm: rubriken bär skärmen */
  --t-h3: 1.4rem;
  --t-lede: clamp(1.06rem, 1.2vw, 1.2rem);
  --t-body: 1rem;
  --t-ui: 0.9375rem;      /* 15 px: knappar, kortrubriker */
  --t-small: 0.875rem;    /* 14 px */
  --t-caption: 0.8125rem; /* 13 px: hjälptext, tabeller */
  --t-micro: 0.75rem;     /* 12 px: golvet för text på sidan */
  --t-label: 0.75rem;     /* versaletiketter */
  --t-tiny: 0.75rem;      /* 12 px, samma golv som --t-micro (ägarregel: ingen text under 12 px): täta dataytor (BetSpread-demon, PDF-läsarens verktyg, diagramaxlar) */

  --s-section: clamp(80px, 11vw, 150px);
  --s-block: clamp(32px, 4.5vw, 56px);
  --gutter: clamp(20px, 4vw, 56px);
  /* Ett spaltsystem från 901 px (BetSpread från 1101 px): rubriken börjar i innehållets vänsterkant, text till vänster och media
     till höger. Två mallar, spegelvända kring mitten: text 56 % och smal media 44 % (inlägget, boken), text 44 % och bred media
     56 % (resultatkortet, BetSpread-demon, frågorna). Myntöversikten har samma vänsterkant men en bredare mediaspalt
     (.stack-grid): tolv myntkolumner med var sin legendcell behöver bredden. Under de bredderna är allt en spalt. */
  --split-gap: clamp(28px, 4vw, 64px);
  --split-text-led: minmax(0, 56fr) minmax(0, 44fr);
  --split-media-led: minmax(0, 44fr) minmax(0, 56fr);
  --nav-h: 72px;
  --motion-w: 8.5rem;   /* rörelsevalets bredd: den längre etiketten ("Mindre rörelse" med ikon) mätt till 8,1rem, plus marginal för reservtypsnitt */
  /* hjälteytans nederkant till ingressens respektive ordmärkets överkant på telefon; ui.js mäter, värdena här gäller tills skriptet
     har kört. De är det uppmätta måttet med ingressen på fyra rader (ordmärkets överkant: ingressens + 1,5rem + ordmärkets höjd),
     så att stillbilden inte flyttas när skriptet tar över */
  --hero-ink: 385px; --hero-top: calc(var(--hero-ink) + 1.5rem + min(100vw - 2 * var(--gutter), 600px) * 108 / 975);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-press: 150ms;   /* tryckåterkoppling */
  --dur-ui: 200ms;      /* färg och läge */
  --dur-panel: 240ms;   /* paneler och dialoger */

  --r-sm: 8px; --r-md: 10px; --r-lg: 12px; --r-xl: 16px; --r-pill: 999px;
  --radius: var(--r-xl);
  /* skuggor: en nivå per yta, och en yta har antingen kant eller skugga, inte båda */
  --e-1: 0 10px 30px -18px rgba(0, 0, 0, 0.9);
  --e-2: 0 30px 60px -30px rgba(0, 0, 0, 0.85);
  --e-3: 0 40px 90px -40px rgba(0, 0, 0, 0.9);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--night); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; } /* page.js tar över med egen, avbrytbar scroll. Ingen grå tryckblink någonstans (ärvs); tryckåterkopplingen är :active. */
body { margin: 0; background: var(--night); color: var(--ivory); font: 400 var(--t-body)/1.6 var(--f-body); overflow-x: clip; -webkit-font-smoothing: antialiased; font-feature-settings: "tnum" 0; }
html.menu-open body, html.modal-open body { overflow: hidden; }
html { scrollbar-gutter: stable; } /* rullningslistens plats står kvar när menyn eller dialogen låser sidan, så att inget flyttas i sidled där listen tar plats (datorer); Chrome räknar då också vw på bredden utan listen. Ingen verkan där listen ligger ovanpå sidan (telefoner). */
img, svg { max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, table { font: inherit; color: inherit; }
h1, h2, h3, p, figure, figcaption, address, dl, dd, dt { margin: 0; }
address { font-style: normal; }
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.label { font: 600 var(--t-label)/1 var(--f-body); letter-spacing: 0.14em; text-transform: uppercase; }
/* Märkningar: två stilar. Information (exempel, demodata, källa) i guld; varning (testdata, ofullständigt underlag) i bärnsten. */
.tg-tag, .bs-tag, .pdf-demo, .tag-src, .tag-test, .tag-warn { display: inline-block; padding: 4px 9px; border-radius: var(--r-pill); border: 1px solid; font: 600 var(--t-micro)/1 var(--f-body); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; vertical-align: middle; }
.tg-tag, .bs-tag, .pdf-demo, .tag-src { background: rgba(224, 177, 41, 0.12); border-color: rgba(224, 177, 41, 0.28); color: var(--gold-hi); }
.tag-test, .tag-warn { background: rgba(240, 180, 60, 0.14); border-color: rgba(240, 180, 60, 0.45); color: var(--ivory); }
:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; border-radius: 6px; }
a, button, summary, label, select, input { touch-action: manipulation; }
button, summary, .btn, .tg-opt, .nav-links a, .nav-login, .menu nav a { -webkit-user-select: none; user-select: none; }
.btn, .tg-opt, .menu nav a, .nav-links a, .nav-login, .brand, .brand img { -webkit-touch-callout: none; }   /* kontroller: ingen länkförhandsvisning vid långt tryck (länkar i löptext behåller den) */
::selection { background: var(--gold); color: #120d02; }
[id] { scroll-margin-top: calc(var(--nav-total) + 8px); }

/* Hoppa till innehållet: fast och utanför bild tills den får fokus. Den får aldrig ligga i flödet, för då hamnar main
   under den och varje sidläge i bläddringen (page.js) förskjuts med länkens höjd. */
.skip-link { position: fixed; top: calc(8px + var(--sat)); left: max(8px, var(--sal)); z-index: 100; padding: 10px 14px; border-radius: var(--r-sm); background: var(--gold); color: #120d02; font-weight: 600; transform: translateY(-200%); transition: transform var(--dur-ui); }
.skip-link:focus { transform: none; }

/* ---------- Scenen: stillbild först, WebGL ovanpå ---------- */
.stage { position: fixed; top: 0; left: 0; right: 0; height: 100vh; height: 100lvh; z-index: 0; overflow: hidden; background: var(--night); }   /* största visningshöjden: ingen omallokering eller kamerahopp när Safaris adressfält fälls ihop */
html.gl-lost #gl, html.gl-on.gl-lost #gl { opacity: 0; transition: none; }   /* kontextförlust: stillbilden syns tills kontexten är tillbaka */
.stage-still { position: absolute; inset: 0; }
.stage-still img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
#gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 0.9s ease; }
html.gl-on #gl { opacity: 1; }
html.no-gl #gl { display: none; }
.stage-shade { position: absolute; inset: 0; pointer-events: none; transition: opacity 0.3s; }
/* två lager: grundskuggan (mörk nederkant för texten) och en toppskugga för avslutet i stående format, där tablån ligger under texten */
.stage-shade::before, .stage-shade::after { content: ""; position: absolute; inset: 0; transition: opacity 0.6s; }
/* vänsterskuggan är något djupare där texten alltid står (spaltsystemet): hjälteytans ingress, som inte har någon slöja, når 4,5:1 */
.stage-shade::after { background: linear-gradient(90deg, rgba(6, 10, 20, 0.64), rgba(6, 10, 20, 0.38) 44%, rgba(6, 10, 20, 0) var(--shade-reach, 66%)),
              linear-gradient(0deg, rgba(6, 10, 20, 0.72), rgba(6, 10, 20, 0.14) 44%, rgba(6, 10, 20, 0) 70%); }
.stage-shade::before { background: linear-gradient(180deg, rgba(6, 10, 20, 0.9) 0%, rgba(6, 10, 20, 0.62) 36%, rgba(6, 10, 20, 0) 60%); opacity: 0; }
html.shade-top .stage-shade::after { opacity: 0; }
html.shade-top .stage-shade::before { opacity: 1; }
html.bare .nav, html.bare main, html.bare .foot, html.bare .stage-shade, html.bare .stage::after { visibility: hidden; }
.nav, .menu, main { position: relative; z-index: 2; }
main, .foot { overflow-x: clip; }

/* Ordmärket — Fortune14, alltid sammanhängande */
.wm { display: block; height: auto; }
.wm-hero { width: min(100%, 600px); filter: drop-shadow(0 12px 30px rgba(0, 0, 0, 0.55)); }
.brand { display: inline-flex; align-items: center; min-height: 44px; }
.wm-nav { width: auto; height: 17px; }
/* Ett ordmärke i hjälteytan: menyns ordmärke visas först när menyn fått sin bakgrund (is-stuck) eller mobilmenyn är öppen.
   Resultatsidans meny är alltid is-stuck. Ett dolt ordmärke går inte heller att nå med Tab (visibility). */
.nav:not(.is-stuck) .brand { opacity: 0; visibility: hidden; transition: opacity 200ms ease-out, visibility 0s linear 200ms; }
.nav.is-stuck .brand, html.menu-open .nav .brand { opacity: 1; visibility: visible; transition: opacity 200ms ease-out; }
/* Mjuk nattslöja bakom textspalter utanför hjälteytan: en radiell mörkning som tonar ut helt mot kanterna (ingen kant, ram, skugga eller oskärpa), plus en diskret textskugga. Hjälteytan har ingen slöja (ägarbeslut). */
.shade { position: relative; isolation: isolate; }
.shade::before { content: ""; position: absolute; inset: -14% -16%; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, rgba(6, 10, 20, 0.55), rgba(6, 10, 20, 0.4) 50%, rgba(6, 10, 20, 0) 100%); }
.hero-copy::before { content: none; }
@media (prefers-contrast: more) { .shade::before { background: radial-gradient(closest-side, rgba(6, 10, 20, 0.68), rgba(6, 10, 20, 0.5) 50%, rgba(6, 10, 20, 0) 100%); } }
.hero-copy, .bs-copy, .stack-copy, .sec-head, .final-copy, .grid-2 > .reveal:first-child, .ebook > .shade { text-shadow: 0 1px 2px rgba(3, 5, 10, 0.55), 0 6px 22px rgba(3, 5, 10, 0.35); }

/* Myntöversikten: 3D-yta, legend på lugn yta och samlat fokuskort */
.stack-view { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 6px; width: 100%; max-width: calc((100svh - 300px) * 16 / 6.6); margin-inline: auto; }   /* spåret följer ytans bredd: legendens inline-bredd får inte bredda myntytan (annars en återkopplingsslinga efter storleksbyte). Legend och fokuskort delar spalt (world.js sätter samma bredd och vänsterkant). */
.stack-legend { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); opacity: 0; padding: 6px 0 4px; border-radius: var(--r-lg); background: rgba(6, 10, 20, 0.82); border: 1px solid var(--line); }
.sl { display: grid; justify-items: center; gap: 5px; min-width: 0; min-height: 44px; padding: 6px 0; border: 0; border-radius: var(--r-sm); background: none; white-space: nowrap; cursor: pointer; transition: background-color var(--dur-ui); }
@media (hover: hover) and (pointer: fine) { .sl:hover { background: rgba(255, 255, 255, 0.05); } }
.sl-m { font: 600 var(--t-micro)/1 var(--f-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--mist); transition: color var(--dur-ui); }
.sl-v { font: 600 var(--t-micro)/1 var(--f-body); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: var(--gold-hi); }
.sl-v.neg { color: var(--neg); }
.sl-v.zero { color: var(--zero); }
.stack-legend.is-tight .sl-v { letter-spacing: -0.02em; }   /* smala celler: en decimal (world.js) och tätare siffror */
.stack-legend.is-tight .sl.is-open .sl-m { letter-spacing: 0.02em; }   /* smala celler: den pågående månaden "MARS·" (punkten utan mellanrum, world.js) ryms i 36 px */
.sl.is-hot { background: rgba(224, 177, 41, 0.12); }
.sl.is-hot .sl-m { color: var(--ivory); }
.sl:focus-visible { outline-offset: -2px; }
/* Fokuskortet har samma höjd i alla lägen: rad 1 månad och värde, rad 2 detaljraden. Detaljraden delar cell med en osynlig
   kopia av hjälptexten (data-hint), så den alltid rymmer hjälptextens radantal och scenen inte hoppar när en månad väljs. */
.stack-focus { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 6px 16px; min-height: 44px; padding: 9px 14px; border-radius: var(--r-lg); background: rgba(6, 10, 20, 0.82); border: 1px solid var(--line); }
.stack-focus::after { content: attr(data-hint); visibility: hidden; }
.sf-title { font: 600 var(--t-caption)/1.2 var(--f-body); letter-spacing: 0.02em; color: var(--ivory); }
.sf-value { font: 600 1.35rem/1 var(--f-display); color: var(--gold-hi); }
.stack-focus.neg .sf-value { color: var(--neg); }
.stack-focus.zero .sf-value { color: var(--zero); }
.sf-bets, .stack-focus::after { grid-row: 2; grid-column: 1 / -1; font-size: var(--t-caption); }
.sf-bets { color: var(--mist); }
.stack-focus:not(.is-set) .sf-value { visibility: hidden; }
html.no-gl .stack-legend, html.no-gl .stack-focus { display: none; }
@media (max-width: 760px) { .sl-m { letter-spacing: 0.08em; } }

.wrap { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: max(var(--gutter), var(--sal)) max(var(--gutter), var(--sar)); }
/* Stor text och sidzoom: innehåll får aldrig bredda sitt avsnitt. main klipper i sidled, så det som breddar ett avsnitt går inte
   att scrolla fram. Avsnittens rutnät (hjälteytan, avslutet, myntöversikten, main > .section) har därför ett spår som får krympa. */
main .wrap { min-width: 0; }

/* ---------- Typografi ---------- */
.h2 { font: 600 var(--t-h2)/1.18 var(--f-display); letter-spacing: -0.02em; text-wrap: balance; max-width: 22ch; overflow-wrap: break-word; }   /* stor text: ett ord som är bredare än spalten bryts i stället för att klippas av skärmkanten */
h3 { font: 600 var(--t-h3)/1.3 var(--f-display); letter-spacing: -0.005em; }
.lede { max-width: 34rem; margin-top: 1.1rem; color: var(--ivory-2); font-size: var(--t-lede); text-wrap: pretty; }
.note-text { margin-top: 1.2rem; max-width: 32rem; font-size: var(--t-small); color: var(--mist); }

/* ---------- Knappar ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.6em; min-height: 46px; padding: 0.8em 1.4em; border: 1px solid transparent; border-radius: var(--r-md); cursor: pointer; font: 600 var(--t-ui)/1 var(--f-body); white-space: nowrap; text-shadow: none; transition: background-color var(--dur-ui), border-color var(--dur-ui), color var(--dur-ui), transform var(--dur-press) var(--ease-out); }
.btn svg { width: 18px; height: 18px; fill: currentColor; flex: none; }
.btn:active { transform: scale(0.97); }
.btn-sm { min-height: 40px; padding: 0.6em 1.05em; font-size: var(--t-small); }
.btn-lg { min-height: 54px; padding: 1em 1.7em; font-size: var(--t-body); }
.btn-primary { background: var(--gold); border-color: var(--gold); color: #140f02; box-shadow: 0 8px 24px -14px rgba(224, 177, 41, 0.9); }
@media (hover: hover) and (pointer: fine) { .btn-primary:hover { background: var(--gold-hi); border-color: var(--gold-hi); } }
.btn-secondary { background: rgba(6, 10, 20, 0.45); border-color: var(--line-strong); color: var(--ivory); }
@media (hover: hover) and (pointer: fine) { .btn-secondary:hover { border-color: var(--gold-dim); color: var(--gold-hi); } }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.8rem; }

/* ---------- Segmenterad kontroll: en form för alla periodval (resultatsidan, myntöversikten på telefon) ----------
   Den valda knappen markeras av en guldplatta (.seg-ind) som glider till sitt nya läge; page.js (F14Seg) mäter och placerar den.
   Innan plattan är placerad (eller utan skript) bär den valda knappen själv guldet. BetSpread-demons flikar (.bs-tabs) är appens egna. */
.seg { position: relative; display: flex; flex-wrap: wrap; gap: 4px; width: fit-content; max-width: 100%; padding: 4px; border-radius: var(--r-lg); background: var(--panel); border: 1px solid var(--line); }
.seg button { position: relative; z-index: 1; min-height: 40px; padding: 0 14px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--ivory-2); font: 600 var(--t-small)/1 var(--f-body); cursor: pointer; transition: color var(--dur-ui), background-color var(--dur-ui), transform var(--dur-press) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .seg button:not([aria-pressed="true"]):hover { color: var(--ivory); background: rgba(255, 255, 255, 0.05); } }
.seg button[aria-pressed="true"] { background: transparent; color: #140f02; }
.seg:not(.seg-ready) button[aria-pressed="true"] { background: var(--gold); }
.seg button:active { transform: scale(0.97); }
.seg-ind { position: absolute; left: 0; top: 0; z-index: 0; width: 0; height: 0; border-radius: var(--r-sm); background: var(--gold); pointer-events: none; transition: transform var(--dur-ui) var(--ease-out); }
.seg:not(.seg-ready) .seg-ind, html.reduce .seg-ind { transition: none; }

/* ---------- Navigation ---------- */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 40; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; justify-content: space-between; gap: 24px; height: var(--nav-total); padding-top: var(--sat); padding-inline: max(var(--gutter), var(--sal)) max(var(--gutter), var(--sar)); }
.nav::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: rgba(6, 10, 20, 0.88); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); box-shadow: 0 1px 0 var(--line), 0 14px 28px -18px rgba(0, 0, 0, 0.8);   /* tydlig nederkant: innehåll som glider in under menyn möter en kant, inte en osynlig klippning */ opacity: 0; transition: opacity 0.3s ease; }
.nav.is-stuck::before { opacity: 1; }
@media (prefers-reduced-transparency: reduce) { .nav::before { background: var(--panel-solid); -webkit-backdrop-filter: none; backdrop-filter: none; } }
@media (prefers-contrast: more) { :root { --ivory-2: #e6e2d8; --mist: #c4cad8; --mist-2: #aeb5c6; --line: rgba(239, 234, 224, 0.28); --line-strong: rgba(239, 234, 224, 0.5); } .nav::before { background: var(--night); } }
.nav-links { display: flex; gap: clamp(18px, 2.4vw, 34px); }
.nav-links a { position: relative; display: inline-flex; align-items: center; min-height: 44px; font-size: var(--t-small); font-weight: 500; color: var(--ivory-2); transition: color var(--dur-ui); }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-ui) var(--ease-out); }
.nav-links a.is-active { color: var(--ivory); }
.nav-links a.is-active::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) { .nav-links a:hover { color: var(--ivory); } .nav-links a:hover::after { transform: scaleX(1); } }
.menu nav a.is-active { color: var(--gold-hi); }
.nav-actions { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 12px; }
/* Logga in (BetSpread): en textlänk i samma stil som menyvalen, före Telegram-knappen; på smala skärmar står den i menyn */
.nav-login { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 6px; font-size: var(--t-small); font-weight: 500; color: var(--ivory-2); white-space: nowrap; transition: color var(--dur-ui); }
@media (hover: hover) and (pointer: fine) { .nav-login:hover { color: var(--ivory); } }
/* 901–1023 px: Logga in och Telegram-knappen ryms inte i en tredjedel av bredden (de gled in över Frågor). Där centreras menyvalen i utrymmet mellan ordmärket och knapparna i stället för på sidan. */
@media (min-width: 901px) and (max-width: 1023px) {
  .nav { grid-template-columns: auto minmax(0, 1fr) auto; gap: 20px; }
  .nav-links { justify-self: center; gap: 18px; }
  .nav-actions { gap: 8px; }
}
.menu-btn { display: none; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: rgba(6, 10, 20, 0.45); cursor: pointer; position: relative; transition: border-color var(--dur-ui), color var(--dur-ui), transform var(--dur-press) var(--ease-out); }
.menu-btn span { position: absolute; left: 12px; right: 12px; height: 2px; background: var(--ivory); transition: transform var(--dur-ui) var(--ease-out); }
.menu-btn span:first-child { top: 16px; }
.menu-btn span:last-child { top: 26px; }
.menu-btn[aria-expanded="true"] span:first-child { transform: translateY(5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:last-child { transform: translateY(-5px) rotate(-45deg); }
.menu { position: fixed; inset: 0; z-index: 35; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; overflow-y: auto; padding: calc(var(--nav-total) + 24px) max(var(--gutter), var(--sar)) calc(40px + var(--sab)) max(var(--gutter), var(--sal)); background: rgba(6, 10, 20, 0.94); overscroll-behavior: contain; }
.menu nav { display: grid; gap: 4px; }
.menu nav a { display: block; padding: 16px 0; border-bottom: 1px solid var(--line); font: 600 1.35rem/1.2 var(--f-display); color: var(--ivory); }
@media (hover: hover) and (pointer: fine) { .menu nav a:hover { color: var(--gold-hi); } }
.menu-cta { display: grid; gap: 10px; }
.menu-cta .btn { width: 100%; }
/* Låga skärmar (högst 700 px hög): tätare menyval och mindre luft runt menyn, så att knapparna och rörelsevalet ryms under listan
   med luft emellan (375x553: allt syns utan att menyn rullas). Menyvalen behåller 44 px tryckyta. Lägre än så rullar menyn, med
   samma luft mellan listan och knapparna (gap ovan). */
@media (max-height: 700px) {
  .menu { gap: 20px; padding-top: calc(var(--nav-total) + 8px); padding-bottom: calc(24px + var(--sab)); }
  .menu nav a { padding-block: 10px; font-size: 1.2rem; }
  .menu-cta { gap: 8px; }
}
/* Liggande telefon: menyvalen till vänster och knapparna till höger, så att båda ryms på skärmen. */
@media (max-height: 480px) and (min-aspect-ratio: 5/4) {
  .menu { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-content: start; align-items: start; column-gap: 32px; }
}
/* Menyn tonas in (200 ms) och länkarna kommer med 30 ms mellanrum. Stängningen speglar öppningen: hela menyn tonas ut på 150 ms
   utan förskjutning mellan länkarna. Panelen fångar trycken tills menu.js döljer den när uttoningen är klar, så att inget når sidan
   bakom; dess egna länkar och knappar gör ingenting under uttoningen. Bara opacitet och transform; själva menyn flyttas aldrig.
   Mindre rörelse: menyn tonas in och ut på 150 ms, länkarna står still. */
.menu.is-entering { animation: menuIn 200ms var(--ease-out) both; }
.menu.is-entering nav a, .menu.is-entering .menu-cta { animation: menuItemIn 260ms var(--ease-out) both; }
.menu.is-entering nav a:nth-child(2) { animation-delay: 30ms; }
.menu.is-entering nav a:nth-child(3) { animation-delay: 60ms; }
.menu.is-entering nav a:nth-child(4) { animation-delay: 90ms; }
.menu.is-entering nav a:nth-child(5) { animation-delay: 120ms; }
.menu.is-entering .menu-cta { animation-delay: 150ms; }
.menu.is-closing { animation: menuOut 150ms ease-out both; }
.menu.is-closing a, .menu.is-closing button { pointer-events: none; }
@keyframes menuIn { from { opacity: 0; } }   /* intoningen körs bara när menyn öppnas (menu.js sätter .is-entering), aldrig när rörelseläget byts i en öppen meny */
@keyframes menuOut { from { opacity: var(--menu-o, 1); } to { opacity: 0; } }   /* --menu-o: menyns opacitet när stängningen började (menu.js), så att en meny som stängs mitt i intoningen inte blinkar till full styrka */
@keyframes menuItemIn { from { opacity: 0; transform: translateY(-6px); } }
html.reduce .menu.is-entering { animation: menuIn 150ms ease-out both !important; }
html.reduce .menu nav a, html.reduce .menu-cta { animation: none !important; }
html.reduce .menu.is-closing { animation: menuOut 150ms ease-out both !important; }
@media (prefers-reduced-motion: reduce) {
  html:not(.motion-full) .menu.is-entering { animation: menuIn 150ms ease-out both !important; }
  html:not(.motion-full) .menu nav a, html:not(.motion-full) .menu-cta { animation: none !important; }
  html:not(.motion-full) .menu.is-closing { animation: menuOut 150ms ease-out both !important; }
}

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr); align-content: end; padding: calc(var(--nav-total) + 24px) 0 calc(clamp(100px, 13.5vh, 156px) - var(--plain-h, 0px)); }
.hero-copy { max-width: calc(640px + 2 * var(--gutter)); margin-inline: 0; }
@media (min-width: 1281px) { .hero-copy { margin-left: calc((100% - 1280px) / 2); } }
.hero .h1 { margin: 0 0 1.5rem; }
.hero .cta { margin-top: 2rem; }
.hero-lede { max-width: 34rem; color: var(--ivory); font-size: 1.0625rem; text-wrap: pretty; }   /* erbjudandet: större än övriga ingresser */
@media (min-width: 641px) { .hero-lede { font-size: 1.15rem; } }
@media (min-width: 1100px) { .hero-lede { font-size: 1.3rem; } }
.hero-plain { max-width: 34rem; margin-top: 0.55rem; color: var(--ivory-2); font-size: 0.9375rem; line-height: 1.45; font-weight: 500; text-wrap: pretty; }   /* en mening som förklarar +EV för den som inte kan begreppet */
/* Bredare skärmar: raden (0,55rem marginal + en rad) tar sin plats nedåt. Knapparna flyttas ned, ordmärke och ingress står kvar mot
   scenen. Där står raden också på ljusare snö än telefonens mörka nederkant och får därför ingressens färg. */
@media (min-width: 641px) and (min-height: 481px) { .hero { --plain-h: 1.91rem; } .hero-plain { color: var(--ivory); } }
.hero-foot { position: absolute; left: 0; right: 0; bottom: calc(20px + var(--sab)); display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
.hero-foot .foot-tools { display: flex; gap: 8px; }
/* Rörelsevalet är en handling: etiketten säger vad ett klick gör (Mindre rörelse / Full rörelse) och byts på plats. Ingen färg
   som påstår ett läge. Samma bredd för båda etiketterna (den längre, uppmätt), så att knappen står exakt kvar när texten byts. */
.play.motion, .foot-motion { min-width: var(--motion-w); justify-content: center; }
.play.motion svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.menu-motion { margin-top: 4px; min-height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: transparent; color: var(--ivory-2); font: 500 var(--t-caption)/1 var(--f-body); letter-spacing: 0; text-transform: none; cursor: pointer; }
/* Gruppvalet i Telegram-avsnittet: Free och Premium jämförda rad för rad i ett block med egen fyllning. Varje rad är en länk till
   sin grupp; bara bekräftade uppgifter. Från 641 px står de två raderna sida vid sida, Premium med den längre texten i den bredare. */
.tg-compare { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); margin: 14px 0 0; padding: 0; max-width: 36rem; border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: rgba(6, 10, 20, 0.6); overflow: hidden; text-shadow: none; }
.tg-compare li { display: grid; }   /* länken fyller hela raden */
.tg-compare li + li { border-top: 1px solid var(--line); }
.tg-opt { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 14px; min-height: 64px; padding: 12px 16px; color: var(--ivory); transition: background-color var(--dur-ui); }
.tg-opt-name { font: 600 var(--t-ui)/1.25 var(--f-body); transition: color var(--dur-ui); }
.tg-opt-fact { grid-column: 1; font-size: var(--t-caption); line-height: 1.45; font-weight: 500; color: var(--ivory-2); text-wrap: balance; }
.tg-nb { white-space: nowrap; }   /* sammansatta ord bryts inte vid bindestrecket */
.tg-opt-go { grid-column: 2; grid-row: 1 / span 2; width: 9px; height: 9px; border-top: 2px solid var(--gold); border-right: 2px solid var(--gold); transform: rotate(45deg); }   /* ritad pil åt höger */
.tg-opt:focus-visible { outline-offset: -3px; }   /* blocket klipper sitt innehåll: fokusramen ligger innanför raden */
@media (hover: hover) and (pointer: fine) { .tg-opt:hover .tg-opt-name { color: var(--gold-hi); } }
@media (min-width: 641px) {
  .tg-compare { grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr); }
  .tg-compare li + li { border-top: 0; border-left: 1px solid var(--line); }
  .tg-opt { align-content: start; }   /* texten börjar överst i båda rutorna, även när den ena har fler rader */
  .tg-opt-go { grid-row: 1; align-self: center; }   /* pilen i höjd med gruppens namn */
}
/* Från 901 px står avsnittets text bredvid inlägget och avsnittet ska rymmas på en skärm. Blocket är högre än de två chip det
   ersatte. Det är därför tätare här, och i fönster under 900 px höjd får ingress och lista telefonens mått: vänsterkolumnen blir
   då aldrig högre än den var med chipen, så avsnittet ryms i samma fönster som förut. Från 900 px höjd står listan med full
   luft; där ryms blocket i den höjd som redan fanns över. */
@media (min-width: 901px) {
  .tg-compare { margin-top: 12px; }
  .tg-opt { min-height: 0; padding-block: 9px; }
  .list { max-width: 36rem; }   /* textmått: listan följer blockets bredd i den bredare textspalten */
}
@media (min-width: 901px) and (max-height: 899px) {
  #telegram .lede { margin-top: 0.8rem; }
  #telegram .list { gap: 8px; margin: 1.1rem 0 1.3rem; }
  #telegram .list li { line-height: 1.5; }
}
.shade .note-text { color: var(--ivory-2); }   /* hjälptexter direkt på scenen: läsbara över ljus snö */
.shade .lede, .shade .list li, .shade .note-text { font-weight: 500; }   /* löptext på scenen: något fylligare snitt för läsbarhet */
.play { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: rgba(6, 10, 20, 0.4); font: 500 var(--t-caption)/1 var(--f-body); letter-spacing: 0; text-transform: none; color: var(--ivory-2); cursor: pointer; transition: color var(--dur-ui), border-color var(--dur-ui); }
.play svg { width: 12px; height: 12px; fill: currentColor; }
@media (hover: hover) and (pointer: fine) { .play:hover { color: var(--gold-hi); border-color: var(--gold-dim); } }

/* ---------- Sektioner ---------- */
.section { position: relative; }   /* höjd och luft: main > .section (en rubrik per skärm, längst ned) */
.sec-head { margin-bottom: var(--s-block); }
.grid-2 { display: grid; grid-template-columns: var(--split-text-led); gap: var(--split-gap); align-items: center; }
.list { list-style: none; margin: 1.5rem 0 1.8rem; padding: 0; display: grid; gap: 12px; }
.list li { position: relative; padding-left: 24px; color: var(--ivory-2); font-size: var(--t-body); line-height: 1.6; }
.list li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 10px; height: 1px; background: var(--gold); }
.list strong { color: var(--ivory); font-weight: 600; }
/* Reveal: kort tona-in; grupper (kort, utskick, FAQ) kommer in en i taget med 50 ms mellanrum. Aldrig på main > section eller .hero-foot. */
.reveal { opacity: 1; transform: none; transition: opacity 0.5s var(--ease-out), transform 0.6s var(--ease-out); }
.reveal.is-out { opacity: 0.001; transform: translateY(16px); }
.tg.reveal { transition: opacity 0.5s var(--ease-out), transform 0.65s var(--ease-out); }
.tg.reveal.is-out { transform: translateY(24px) scale(0.985); }
.grid-2 > .reveal + .reveal, .bs-layout > .reveal + .reveal, .section-res .wrap > .reveal + .reveal, .ebook > .reveal + .reveal { transition-delay: 80ms; }
.flow.reveal, .faq.reveal, .flow.reveal.is-out, .faq.reveal.is-out { opacity: 1; transform: none; transition: none; }
.flow.reveal > *, .faq.reveal > * { transition: opacity 0.45s var(--ease-out), transform 0.55s var(--ease-out); }
.faq.reveal > details { transition: opacity 0.45s var(--ease-out), transform 0.55s var(--ease-out), background-color 0.2s var(--ease-out); }   /* plus den öppna frågans bakgrund (ingen fördröjning, se nedan) */
.flow.reveal.is-out > *, .faq.reveal.is-out > * { opacity: 0.001; transform: translateY(12px); }
.flow.reveal > :nth-child(2) { transition-delay: 50ms; }
.flow.reveal > :nth-child(3) { transition-delay: 100ms; }
.faq.reveal > :nth-child(2) { transition-delay: 50ms, 50ms, 0s; }
.faq.reveal > :nth-child(3) { transition-delay: 100ms, 100ms, 0s; }
.faq.reveal > :nth-child(4) { transition-delay: 150ms, 150ms, 0s; }
.faq.reveal > :nth-child(n+5) { transition-delay: 200ms, 200ms, 0s; }

/* En paneltyp: en fyllning, kant men ingen skugga (demon har i stället skugga och ingen synlig kant) */
.tg, .app, .faq { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }

/* ---------- Exempel på ett inlägg i kanalen ---------- */
.tg { width: 100%; overflow: hidden; border-color: rgba(239, 234, 224, 0.13); box-shadow: none; }   /* kortet fyller mediaspalten i alla bredder */
.tg-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, 0.025); }
.tg-avatar { width: 40px; height: 40px; border-radius: 50%; flex: none; box-shadow: 0 0 0 1px var(--line-strong); }
.tg-who { display: grid; line-height: 1.2; min-width: 0; }
.tg-name { font-weight: 700; font-size: var(--t-ui); color: var(--ivory); }
.tg-sub { font-size: var(--t-micro); color: var(--mist); }
.tg-tag { margin-left: auto; }
.tg-post { padding: 16px 16px 12px; }
.tg-slip { border-radius: var(--r-md); background: #f6f7f9; color: #17202b; overflow: hidden; box-shadow: var(--e-1); }
.slip-head { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; font: 700 var(--t-micro)/1 var(--f-body); letter-spacing: 0.1em; text-transform: uppercase; color: #3a4556; border-bottom: 1px solid #e1e5ea; }
.slip-book { font-weight: 600; letter-spacing: 0.02em; text-transform: none; color: #6b7686; }
.slip-row { display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid #e1e5ea; }
.slip-x { color: #9aa3b0; font-size: var(--t-ui); }
.slip-match { font-weight: 700; font-size: var(--t-small); }
.slip-odds { font: 700 var(--t-ui)/1 var(--f-body); }
.slip-legs { list-style: none; margin: 0; padding: 6px 12px 10px 38px; display: grid; gap: 8px; }
.slip-legs li { position: relative; display: grid; gap: 2px; }
.slip-legs li::before { content: "×"; position: absolute; left: -26px; top: 0; color: #9aa3b0; font-size: var(--t-small); }
.slip-legs b { font-weight: 700; font-size: var(--t-caption); color: #15803d; }
.slip-legs span { font-size: var(--t-micro); color: #6b7686; }
.tg-text { margin-top: 12px; font-size: var(--t-small); line-height: 1.5; color: var(--ivory); }
.tg-text-2 { margin-top: 6px; color: var(--ivory-2); }
.tg-flag { display: inline-block; width: 15px; height: 9px; margin-right: 4px; vertical-align: -1px; border-radius: 1px; box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.3); }
.tg-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.tg-nums div { display: grid; gap: 4px; padding: 9px 10px; border-radius: var(--r-md); background: rgba(255, 255, 255, 0.045); border: 1px solid rgba(255, 255, 255, 0.04); min-width: 0; }
.tg-nums dt { font: 600 var(--t-micro)/1 var(--f-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--mist); }
.tg-nums dd { font-size: 1.125rem; font-weight: 700; line-height: 1.1; color: var(--ivory); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-nums div:first-child dd { color: var(--gold-hi); }
.tg-nums div:last-child dd { font-size: var(--t-small); font-weight: 600; align-self: center; }
.tg-foot { display: flex; justify-content: space-between; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); font-size: var(--t-micro); color: var(--mist); }
.tg-foot span:first-child { font-weight: 600; color: var(--ivory-2); }
.tg-cap { padding: 10px 18px 12px; border-top: 1px solid var(--line); font-size: var(--t-micro); line-height: 1.5; color: var(--mist-2); }

/* FAQ */
.grid-faq { display: grid; grid-template-columns: var(--split-media-led); gap: var(--split-gap); align-items: start; }   /* panelen växer när svar öppnas: överkant mot överkant */
.grid-faq .sec-head { margin-bottom: 0; }
.faq { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; overflow: hidden; }   /* en samlad panel med hårfina avdelare; spåret får krympa, så att ett långt ord (mejladressen) bryts i stället för att bredda panelen */
.faq details { padding: 0 22px; }
.faq details + details { border-top: 1px solid var(--line); }
.faq details[open] { background: rgba(255, 255, 255, 0.025); }
@supports selector(:has(*)) { .faq summary:focus-visible { outline: none; } .faq details:has(> summary:focus-visible) { outline: 2px solid var(--gold-hi); outline-offset: -3px; } }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 56px; padding: 14px 0; cursor: pointer; list-style: none; font-weight: 600; color: var(--ivory); }
.faq summary::-webkit-details-marker { display: none; }
/* Ritat plustecken (2 px streck) i en tunn ring: båda är masker över en färgyta, guld i mitten och kantlinjens färg i ringen */
.faq summary::after { content: ""; flex: none; width: 24px; height: 24px; --ring: var(--line-strong); background: radial-gradient(circle, var(--gold) 0 9px, var(--ring) 9px);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6v12M6 12h12' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 14px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11.5' fill='none' stroke='black' stroke-width='1'/%3E%3C/svg%3E") center / 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6v12M6 12h12' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 14px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11.5' fill='none' stroke='black' stroke-width='1'/%3E%3C/svg%3E") center / 100% no-repeat;
  transition: transform var(--dur-ui) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .faq summary:hover::after { --ring: var(--gold-dim); } }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 20px; color: var(--ivory-2); font-size: var(--t-small); line-height: 1.65; max-width: 60ch; overflow-wrap: break-word; }   /* mejladressen bryts hellre än att sticka ut */
.faq details p + p { margin-top: -8px; }   /* flera korta stycken i ett svar: skannbart utan stora luckor */
/* Mjuk öppning av svaren (Chrome 131+); utan stöd öppnas de direkt som förut. Stängningen är kortare än öppningen (0,16 s mot 0,24 s).
   Mindre rörelse: höjden byts direkt, bara opaciteten tonar. */
.faq details { transition: background-color 0.2s var(--ease-out); }   /* den öppna frågans bakgrund tonas in och ut */
@supports selector(::details-content) {
  .faq details, .rp-more { interpolate-size: allow-keywords; }
  .faq details::details-content, .rp-more::details-content { block-size: 0; overflow: clip; overflow-clip-margin: 6px; opacity: 0; transition: block-size 0.16s var(--ease-out), opacity 0.12s ease-out, content-visibility 0.16s allow-discrete; }
  .faq details[open]::details-content, .rp-more[open]::details-content { block-size: auto; opacity: 1; transition: block-size 0.24s var(--ease-out), opacity 0.18s ease-out, content-visibility 0.24s allow-discrete; }
  html.reduce .faq details::details-content, html.reduce .rp-more::details-content { transition: opacity 0.18s ease-out, content-visibility 0.18s allow-discrete; }
  @media (prefers-reduced-motion: reduce) { html:not(.motion-full) .faq details::details-content, html:not(.motion-full) .rp-more::details-content { transition: opacity 0.18s ease-out, content-visibility 0.18s allow-discrete; } }
}

/* Avslut — texten till vänster, räven får högra halvan */
.final { position: relative; min-height: 100vh; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; padding-block: clamp(72px, 10vh, 130px) clamp(72px, 12vh, 150px); }
.final-copy { max-width: calc(560px + 2 * var(--gutter)); margin-inline: 0; }
@media (min-width: 1281px) { .final-copy { margin-left: calc((100% - 1280px) / 2); } }

/* ---------- BetSpread: text 44 % till vänster, förhandsvisning 56 % till höger (spaltsystemet i :root), hela sektionen i en desktopvy ---------- */
.bs-layout { display: grid; grid-template-columns: var(--split-media-led); gap: var(--split-gap); align-items: center; }
.bs-copy .h2 { max-width: 22ch; }
.bs-copy .lede { margin-top: 0.9rem; }
.bs-copy .cta { margin-top: 1.6rem; }   /* listan är borta: knapparna står direkt under ingressen */
/* ---------- BetSpread-rutan i BetSpreads eget utseende (exemplet på betspreadapp.se, november 2026) ----------
   Ett ljust appfönster på den mörka scenen, som på BetSpreads startsida: grå duk, ljusa kort, märkesblått, Inter för text och Sora
   för siffror. Rutan följer sin egen bredd (containerfrågor på .app-stage), inte fönstrets: smalare än 520 px är det appens
   telefonvy (nyckeltalen i ett kort, graf och spel under varandra), från 520 px datorvyn (fönsterlist, fyra nyckeltalskort med
   små kurvor, graf och spel bredvid varandra). Allt här är slutläget; rörelsen (intro, spel som kommer in och avgörs) sköts av
   ui.js och står still med mindre rörelse, utanför skärmen, i dold flik och när PDF-dialogen eller menyn är öppen. Färger och
   mått är BetSpreads egna (landing.css i BetSpread); webbsidans guld och mörka paneler gäller inte inne i fönstret. */
.app-stage { position: relative; max-width: 832px; container: bs / inline-size; }
/* Fönstret stiger fram och växer till full storlek som på betspreadapp.se (98 %, ease-out-expo) i stället för avsnittens vanliga
   tona-in. Kortare väg och tid än där (16 px som sidans andra avsnitt mot 32 px, 0,7 s mot 1 s): ett tryck på Skapa PDF eller en
   periodknapp direkt efter ett hopp till avsnittet träffar då fortfarande knappen (med 32 px flyttade sig knappen mer än sin
   halva höjd), och fönstret står still inom 0,8 s. Med mindre rörelse gäller sidans regel nedan (bara tona-in på plats). */
.bs-layout > .app-stage.reveal { transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1) 80ms, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) 80ms; }
.app-stage.reveal.is-out { transform: translateY(16px) scale(0.98); }
.bs {
  --bs-ground: #dfe4ec; --bs-surface: #edf1f6; --bs-raised: #f1f4f9; --bs-sunk: #e2e8ef;
  --bs-ink: #161e2c; --bs-ink-2: #2d3645; --bs-muted: #525b6a; --bs-line: #dce1e7;
  --bs-accent: #2d6cc1; --bs-accent-ink: #1a5fb8; --bs-accent-tint: #d6e3f6; --bs-glow: #2ca0ff;
  --bs-win: #15633f; --bs-win-tint: #d3e9db; --bs-loss: #9f2e2e; --bs-loss-tint: #f7dcda;
  --bs-tip-bg: #0f1629; --bs-tip-fg: #e8edf6; --bs-tip-muted: #a3aec2; --bs-tip-pos: #4ade80; --bs-tip-neg: #f87171;
  --bs-ease: cubic-bezier(0.16, 1, 0.3, 1); --bs-ease-io: cubic-bezier(0.65, 0, 0.35, 1); --bs-spring: cubic-bezier(0.34, 1.45, 0.64, 1);
  --bs-font: "Inter", "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-display: "Sora", "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bs-ff: "cv02", "cv03", "cv04", "cv11", "ss01";
  --bs-card: inset 0 0 0 1px var(--bs-line), 0 1px 2px rgba(26, 36, 64, 0.04);
  --row-h: 76px;                    /* spellistans rad på telefon: ligan, spelet på en rad, odds och resultat (datorvyn: 92 px, nedan) */
}
/* Fönstret: ljus yta, rundade hörn och en halvgenomskinlig ram som läses som en grå infattning mot den mörka scenen */
.bs.app { position: relative; display: block; padding: 0; overflow: hidden; border: 0; border-radius: 20px; background: var(--bs-surface); color: var(--bs-ink); color-scheme: light; font: 400 13px/1.5 var(--bs-font); font-feature-settings: var(--bs-ff); font-variant-numeric: tabular-nums; text-shadow: none;
  box-shadow: 0 0 0 1px rgba(26, 36, 64, 0.08), 0 0 0 6px rgba(255, 255, 255, 0.55), 0 0 0 7px rgba(26, 36, 64, 0.05), 0 48px 96px -40px rgba(0, 0, 0, 0.75), 0 26px 52px -30px rgba(0, 70, 160, 0.5); }
.bs.app.is-tilting { will-change: transform; }                     /* bara medan fönstret lutar efter pekaren (ui.js) */
.bs .num { font-feature-settings: var(--bs-ff), "tnum" 1; }
/* Ljusreflexen: ett dubbelt så stort lager med fast toning som bara flyttas (transform) när fönstret lutar */
.bs-sheen { position: absolute; left: -50%; top: -50%; z-index: 2; width: 200%; height: 200%; pointer-events: none; background: radial-gradient(closest-side circle at 50% 34%, rgba(44, 160, 255, 0.1), transparent 100%); }
.bs-win { position: relative; display: none; align-items: center; justify-content: center; height: 30px; border-bottom: 1px solid var(--bs-line); background: linear-gradient(#f1f4f9, #e9edf3); }
.bs-win-dots { position: absolute; left: 14px; top: 50%; display: flex; gap: 7px; transform: translateY(-50%); }
.bs-win-dots i { width: 10px; height: 10px; border-radius: 50%; background: #cdd3dc; box-shadow: inset 0 0 0 1px rgba(26, 36, 64, 0.06); }
.bs-win-title { color: var(--bs-muted); font: 600 12px/18px var(--bs-font); letter-spacing: 0.02em; }
.bs-main { position: relative; padding: 14px 14px 16px; background: var(--bs-ground); }

/* Huvudet: BetSpreads ordmärke (BS-märket, BetSpread med blått Spread och by Fortune14 under, ägarbeslut i fc4b8c7), sidan som
   i BetSpreads översikt ("Översikt" och projektet) och Demodata i stället för "Exempel". Telefon (rutan under 520 px): ordmärket
   och Demodata på första raden, sidan på en egen rad under (ordmärke, sida och märkning ryms inte på en rad i en 320 px telefon).
   Datorvyn: allt på en rad, sidan efter en hårlinje. Ingen text bryts eller kortas från 320 px fönster (R4 i tools/checks/layout/m-assert.js). */
.bs-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand tag" "page page"; align-items: center; gap: 12px 10px; min-width: 0; padding-bottom: 14px; }
.bs-brand { grid-area: brand; display: flex; align-items: center; gap: 8px; min-width: 0; }
.bs .bs-mark { display: flex; flex: none; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: var(--bs-ink); color: #fff; font: 700 12px/1 var(--bs-display); letter-spacing: -0.03em; }
.bs .bs-mark i { font-style: normal; color: var(--bs-glow); }
.bs .bs-wm { display: flex; flex-direction: column; gap: 3px; line-height: 1; }
.bs .bs-name { color: var(--bs-ink); font: 600 15px/1 var(--bs-display); letter-spacing: -0.025em; white-space: nowrap; }
.bs .bs-name i { font-style: normal; color: var(--bs-accent-ink); }
.bs .bs-by { color: rgba(22, 30, 44, 0.75); font: 500 12px/1 var(--bs-font); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }   /* BetSpreads underrad (ink 75 %), i sidans minsta textstorlek */
.bs-page { grid-area: page; display: flex; align-items: center; gap: 10px; min-width: 0; }
.bs .bs-title { color: var(--bs-ink); font: 600 15px/1.2 var(--bs-display); letter-spacing: -0.02em; white-space: nowrap; }
.bs .bs-project { padding-left: 10px; border-left: 1px solid var(--bs-line); color: var(--bs-muted); font-size: 13px; line-height: 1.2; white-space: nowrap; }
.bs .bs-tag { grid-area: tag; display: inline-flex; flex: none; align-items: center; height: 26px; padding: 0 11px; border: 0; border-radius: 999px; background: var(--bs-accent-tint); box-shadow: inset 0 0 0 1px rgba(45, 108, 193, 0.2); color: var(--bs-accent-ink); font: 700 12px/1 var(--bs-font); letter-spacing: 0.01em; text-transform: none; }
/* Periodvalet (vid Skapa PDF) som appens segmentreglage: vald period ljus med hårlinje och djupblå text, som valt menyval i
   appen. Knapparna är så breda som sin text (minst 44 px på pekskärm), så att den längsta etiketten ("Kvartal") ryms också på en 320 px telefon. */
.bs .bs-tabs { display: flex; flex: 1 1 100%; gap: 2px; min-width: 0; margin: 0; padding: 3px; border-radius: 999px; background: var(--bs-sunk); box-shadow: inset 0 0 0 1px var(--bs-line); overflow: visible; }
.bs .bs-tabs button { flex: 1 1 auto; min-width: 0; min-height: 34px; padding: 0 8px; border: 0; border-radius: 999px; background: transparent; color: var(--bs-muted); font: 600 12px/1 var(--bs-font); white-space: nowrap; cursor: pointer; transition: background-color var(--dur-ui), color var(--dur-ui), box-shadow var(--dur-ui), transform var(--dur-press) var(--ease-out); }
.bs .bs-tabs button[aria-pressed="true"] { background: #f9fafc; color: #1c407c; box-shadow: inset 0 0 0 1px var(--bs-line), 0 1px 3px rgba(26, 36, 64, 0.1); }
@media (hover: hover) and (pointer: fine) { .bs .bs-tabs button:hover { color: var(--bs-ink); } }
.bs :focus-visible { outline: 2px solid var(--bs-accent); outline-offset: 2px; }
.bs .bs-tabs button:focus-visible, .bs .bs-btn:focus-visible { border-radius: 999px; }

/* Nyckeltalen. Telefon: ett kort, resultatet överst och ROI, träffprocent och avgjorda spel i tre kolumner med hårlinjer */
.bs-kpis { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.15fr) minmax(0, 0.9fr); margin-bottom: 10px; border-radius: 14px; background: var(--bs-surface); box-shadow: var(--bs-card); }
.bs .bs-kpi { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 10px 12px 11px; }
.bs .bs-kpi-main { grid-column: 1 / -1; padding-bottom: 8px; box-shadow: inset 0 -1px 0 var(--bs-line); }
.bs .bs-kpi:nth-child(n + 3) { box-shadow: inset 1px 0 0 var(--bs-line); }
.bs .bs-kpi .k { color: var(--bs-muted); font: 500 12px/18px var(--bs-font); white-space: nowrap; }
.bs-more { white-space: pre; }
.bs-kpi-line { display: flex; align-items: center; min-height: 22px; }   /* telefon: som BetSpreads (värdet 22 px); datorvyn 36 px */
/* tabellsiffror efter font-förkortningen (som nollställer dem): talen står still medan de räknas upp, som i BetSpread */
.bs .bs-kpi .v { display: inline-block; color: var(--bs-ink); font: 600 20px/1.1 var(--bs-display); font-variant-numeric: tabular-nums; font-feature-settings: var(--bs-ff), "tnum" 1; letter-spacing: -0.03em; white-space: nowrap; }
.bs .bs-kpi-main .v { font-size: 36px; letter-spacing: -0.045em; }
.bs .bs-kpi .v.pos { color: var(--bs-win); }
.bs .bs-kpi .v.neg { color: var(--bs-loss); }
.bs .bs-kpi .s { overflow: hidden; color: var(--bs-muted); font-size: 12px; line-height: 18px; white-space: nowrap; text-overflow: ellipsis; }
.bs .bs-kpi .s:empty { display: none; }
/* Det nyss avgjorda spelets belopp i resultatets övre högra hörn, utanför flödet: inget annat flyttas när det kommer och går */
.bs-delta { position: absolute; top: 8px; right: 10px; display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 999px; font: 700 12px/1 var(--bs-font); white-space: nowrap; pointer-events: none; animation: bs-delta 2.8s var(--bs-ease) both; }
.bs-delta.pos { background: var(--bs-win-tint); color: var(--bs-win); }
.bs-delta.neg { background: var(--bs-loss-tint); color: var(--bs-loss); }
.bs-spark { position: relative; display: none; height: 24px; margin-top: auto; }
.bs-spark svg { display: block; width: 100%; height: 100%; overflow: visible; }
.bs-spark .l { fill: none; stroke: var(--bs-accent); stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.bs-spark .a { fill: rgba(45, 108, 193, 0.1); }
.bs-spark-end { position: absolute; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--bs-accent); box-shadow: 0 0 0 2px var(--bs-surface); transition: left 1s var(--bs-ease), top 1s var(--bs-ease); }
.bs-bars { display: none; align-items: flex-end; gap: 3px; height: 24px; margin-top: auto; }
.bs-bars i { flex: 1; min-width: 0; height: 100%; border-radius: 2px 2px 1px 1px; background: #cdd3dc; transform-origin: bottom; transition: transform 0.9s var(--bs-ease), background-color 0.6s ease; }
.bs-bars i:last-child { background: var(--bs-accent); }

/* Graf och spellista i var sin panel */
.bs-body { display: grid; gap: 12px; }
.bs .bs-panel { min-width: 0; padding: 14px 14px 8px; border-radius: 14px; background: var(--bs-surface); box-shadow: var(--bs-card); }
.bs .bs-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; color: var(--bs-ink); font: 600 13px/19.5px var(--bs-font); }
.bs .bs-panel-unit { min-width: 0; overflow: hidden; color: var(--bs-muted); font-size: 12px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.bs .bs-chart .bs-panel-unit { display: none; }      /* telefon: kurvans värdepiller står där enhetstexten annars står */
.bs .chart-box { position: relative; height: 136px; margin-bottom: 6px; }
.bs .chart-svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; overflow: visible; }
.chart-svg .bs-grid { stroke: var(--bs-line); stroke-width: 1; }
.chart-svg .bs-zero { stroke: #b8bec9; stroke-width: 1; stroke-dasharray: 3 4; }
.chart-svg .bs-line { fill: none; stroke: var(--bs-accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.bs-ticks span { position: absolute; left: 0; color: var(--bs-muted); font: 500 12px/1 var(--bs-font); font-variant-numeric: tabular-nums; font-feature-settings: var(--bs-ff), "tnum" 1; white-space: nowrap; pointer-events: none; transform: translateY(calc(-100% - 2px)); }
/* Slutpunkten (med en ring som pulserar) och dess värdepiller; ui.js flyttar lagret med transform. Pillret står ovanför och till
   vänster om punkten; ui.js sätter --tip-y (lyft över kurvan eller under punkten) så att pillret aldrig står över kurvan. Medan
   kurvan byter form är pillret utonat (data-away, ui.js) och flyttas utan glidning; det tonas in på sin plats när grafen har stannat. */
.bs-mover { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; }
.bs-dot { position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%; background: var(--bs-accent); box-shadow: 0 0 0 3px var(--bs-surface), 0 3px 10px rgba(45, 108, 193, 0.55); }
.bs-halo { position: absolute; inset: -5px; border: 2px solid var(--bs-accent); border-radius: inherit; opacity: 0; }
.bs-tip { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; background: rgba(241, 244, 249, 0.92); color: var(--bs-ink); font: 700 12px/1 var(--bs-font); font-variant-numeric: tabular-nums; font-feature-settings: var(--bs-ff), "tnum" 1; white-space: nowrap; box-shadow: 0 0 0 1px rgba(26, 36, 64, 0.08), 0 10px 24px -12px rgba(26, 36, 64, 0.3); --tip-y: calc(-100% - 12px); transform: translate(calc(-100% + 10px), var(--tip-y)); transition: opacity 0.25s ease, transform 0.6s var(--bs-ease); }
.bs-tip:empty { display: none; }
.bs-tip[data-away] { opacity: 0; transition: opacity 0.15s ease; }
/* Avläsning med mus: lodrät linje, punkt på kurvan och mörk värderuta (ui.js) */
.bs-hx { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.25s ease; }
.chart-box[data-hover] .bs-hx { opacity: 1; }
.chart-box[data-hover] .bs-tip { opacity: 0; }
.bs-hline { position: absolute; left: -0.5px; top: 0; bottom: 0; width: 1px; background: linear-gradient(to bottom, rgba(45, 108, 193, 0), rgba(45, 108, 193, 0.5) 18%, rgba(45, 108, 193, 0.5) 86%, rgba(45, 108, 193, 0)); }
.bs-hy { position: absolute; inset: 0; }
.bs-hdot { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--bs-raised); box-shadow: 0 0 0 2.5px var(--bs-accent), 0 3px 10px rgba(45, 108, 193, 0.45); }
.bs-htip { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; gap: 1px; padding: 5px 9px 6px; border-radius: 8px; background: var(--bs-tip-bg); color: var(--bs-tip-fg); font-size: 12px; line-height: 1.25; white-space: nowrap; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 10px 20px -10px rgba(26, 36, 64, 0.6); transform: translate(-50%, calc(-100% - 12px)); }
.chart-box[data-edge="start"] .bs-htip { transform: translate(-12px, calc(-100% - 12px)); }
.chart-box[data-edge="end"] .bs-htip { transform: translate(calc(-100% + 12px), calc(-100% - 12px)); }
.bs-hday { color: var(--bs-tip-muted); font-weight: 500; }
.bs-hval { font-weight: 700; }
.bs-hval[data-tone="pos"] { color: var(--bs-tip-pos); }
.bs-hval[data-tone="neg"] { color: var(--bs-tip-neg); }
@media (hover: hover) and (pointer: fine) { .bs .chart-box { cursor: crosshair; } }

/* Senaste spel: två rader syns; raderna ligger på var sin plats (translate) och glider ned när ett nytt spel kommer in */
.bs-rows { position: relative; height: calc(var(--row-h) * 2 - 1px); margin: 0; padding: 0; list-style: none; overflow: hidden; }
.bs-row { position: absolute; top: 0; left: 0; right: 0; inset: 0 0 auto 0; display: flex; flex-direction: column; gap: 3px; height: var(--row-h); padding: 8px 2px; overflow: hidden; border-bottom: 1px solid var(--bs-line); translate: 0 calc(var(--i, 0) * var(--row-h)); transition: translate 1.1s var(--bs-ease); }
.bs-row-top, .bs-row-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
.bs-row-title { min-width: 0; overflow: hidden; font-size: 13px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
/* spelet: en rad på telefon (demospelens marknader är korta, och en tom andra rad gjorde raderna glesa och rutan högre än
   skärmen), två rader i datorvyn som i BetSpread, där kolumnen är smalare */
.bs-row-sub { display: -webkit-box; height: 1.3em; overflow: hidden; color: var(--bs-ink-2); font-size: 13px; line-height: 1.3; -webkit-box-orient: vertical; -webkit-line-clamp: 1; line-clamp: 1; text-wrap: pretty; }
.bs-row-meta { line-height: 16px; }
.bs-row-odds { min-width: 0; overflow: hidden; color: var(--bs-muted); font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.bs-row-result { flex: none; min-height: 16px; color: var(--bs-muted); font: 600 13px/16px var(--bs-display); letter-spacing: -0.01em; white-space: nowrap; }
.bs-row-result[data-status="win"] { color: var(--bs-win); }
.bs-row-result[data-status="loss"] { color: var(--bs-loss); }
.bs-row[data-flash]::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(45, 108, 193, 0.12), transparent); animation: bs-sweep 1.3s var(--bs-ease) both; }
.bs-row.bs-row-in { animation: bs-row-in 1.1s var(--bs-ease) 0.15s backwards; }
/* Safari före 14.1 (iOS före 14.5) saknar inset och den fristående egenskapen translate: raderna står på var sin plats med top i stället
   (utan glidning), så att de aldrig ligger ovanpå varandra. transform är fortfarande fri för bs-row-in och bs-row-intro. */
@supports not (translate: 0) { .bs-row { top: calc(var(--i, 0) * var(--row-h)); transition: none; } }
/* Statuspillret: lika brett för alla lägen (alla etiketter i samma rutnätscell), den gamla etiketten tonas ut innan den nya kommer */
.bs-pill { display: inline-flex; flex: none; align-items: center; gap: 6px; height: 20px; padding: 0 8px; border-radius: 999px; font: 600 12px/1 var(--bs-font); transition: background-color 0.5s ease, color 0.5s ease, box-shadow 0.5s ease; }
.bs-pill[data-status="pending"] { background: var(--bs-accent-tint); color: #2750a2; box-shadow: inset 0 0 0 1px rgba(45, 108, 193, 0.18); }
.bs-pill[data-status="win"] { background: var(--bs-win-tint); color: var(--bs-win); box-shadow: inset 0 0 0 1px rgba(29, 117, 76, 0.22); }
.bs-pill[data-status="loss"] { background: var(--bs-loss-tint); color: var(--bs-loss); box-shadow: inset 0 0 0 1px rgba(186, 57, 57, 0.22); }
.bs-pill[data-status="void"] { background: var(--bs-sunk); color: var(--bs-muted); box-shadow: inset 0 0 0 1px rgba(26, 36, 64, 0.12); }
.bs-pill-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.bs-pill[data-status="pending"] .bs-pill-dot { background: var(--bs-accent); }
.bs-pill-labels { display: grid; }
.bs-pill-labels > span { grid-area: 1 / 1; opacity: 0; transform: translateY(-3px); transition: opacity 0.22s ease, transform 0.22s ease; }
.bs-pill-labels > span[data-on] { opacity: 1; transform: none; transition: opacity 0.4s ease 0.26s, transform 0.55s var(--bs-ease) 0.26s; }

/* Foten: periodval och Skapa PDF (appens blå knapp med ikon i en ljus rund platta) med rapportens statusrad. Telefon: periodvalet
   i full bredd, under det knappen och statusraden bredvid varandra där de ryms (från 360 px), annars under varandra; datorvyn:
   allt på en rad, periodvalet till vänster, statusraden och knappen till höger (rutan blir inte högre än förut). */
.bs-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.bs .bs-btn { display: inline-flex; flex: 1 0 auto; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding: 0 16px 0 6px; border: 0; border-radius: 999px; background: var(--bs-accent); color: #f9fafc; font: 600 13px/1 var(--bs-font); white-space: nowrap; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 6px 16px -8px rgba(45, 108, 193, 0.5); transition: background-color var(--dur-ui), box-shadow var(--dur-ui), transform var(--dur-press) var(--ease-out); }
.bs .bs-btn svg { flex: none; width: 26px; height: 26px; padding: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) and (pointer: fine) { .bs .bs-btn:hover { background: #285fab; } }
.bs .bs-btn:active { transform: scale(0.97); }
.bs .pdf-btn { min-width: 10.5rem; }   /* samma bredd i båda lägena: "Skapar rapport…" med ikon mätt till 154 px (Inter), plus marginal för reservtypsnitt */
.bs .pdf-btn.is-busy { pointer-events: none; filter: saturate(0.6); }
.bs .pdf-btn.is-busy svg { animation: pulse 0.9s ease-in-out infinite; }
.bs .pdf-btn.is-error { box-shadow: inset 0 0 0 2px var(--bs-loss), 0 6px 16px -8px rgba(45, 108, 193, 0.5); }
.bs .bs-hint { flex: 1 1 112px; min-width: 0; color: var(--bs-muted); font-size: 12px; line-height: 1.45; text-wrap: pretty; overflow-wrap: anywhere; }
.bs .bs-hint.is-done { color: var(--bs-win); }
.bs .bs-hint.is-error { color: var(--bs-loss); }

/* Smala rutor (telefon 320–375 px): tätare celler och något mindre siffror, så att "Träffprocent" och "+10,6 %" ryms (ROI-cellen
   något bredare: tabellsiffrorna är bredare än de proportionella) */
@container bs (max-width: 379.98px) {
  .bs-more { display: none; }
  .bs-kpis { grid-template-columns: minmax(0, 1.03fr) minmax(0, 1.1fr) minmax(0, 0.87fr); }
  .bs .bs-kpi { padding: 10px 9px 11px; }
  .bs .bs-kpi .v { font-size: clamp(16px, 5.6cqi, 20px); }
  .bs .bs-kpi-main { padding: 10px 12px 8px; }
  .bs .bs-kpi-main .v { font-size: clamp(30px, 11cqi, 36px); }
}
/* Datorvyn (rutan minst 520 px bred: i två kolumner från 1101 px fönsterbredd är rutan 530 till 560 px) */
@container bs (min-width: 520px) {
  .bs { --row-h: 92px; }            /* spellistans rad: ligan, spelet på högst två rader, odds och resultat; grafen är två rader hög */
  .bs-row-sub { height: 2.6em; -webkit-line-clamp: 2; line-clamp: 2; }
  .bs-win { display: flex; }
  .bs-main { padding: 16px 20px 18px; }
  .bs-head { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "brand page tag"; column-gap: 16px; }
  .bs-page { padding-left: 16px; border-left: 1px solid var(--bs-line); }
  .bs .bs-title { font-size: 20px; }
  .bs-kpis { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; border-radius: 0; background: none; box-shadow: none; }
  .bs .bs-kpi, .bs .bs-kpi-main, .bs .bs-kpi:nth-child(n + 3) { grid-column: auto; padding: 12px 15px 11px; border-radius: 14px; background: var(--bs-surface); box-shadow: var(--bs-card); }
  .bs-kpi-line { min-height: 36px; }
  /* resultatet i BetSpreads 38 px där det ryms; perioder med ett åttatecknat resultat (som "+10,71 u") får ett mindre steg
     (data-long sätts av ui.js för hela periodens uppspelning, så att storleken aldrig hoppar medan talen räknas) */
  .bs .bs-kpi-main .v { font-size: clamp(28px, 6.1cqi, 38px); }
  .bs .bs-kpi-main[data-long] .v { font-size: clamp(24px, 5.2cqi, 33px); }
  .bs-spark { display: block; }
  .bs-bars { display: flex; }
  .bs-body { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .bs .bs-chart .bs-panel-unit { display: inline; }
  .bs .chart-box { height: calc(var(--row-h) * 2 - 4px); }
  .bs-foot { flex-wrap: nowrap; gap: 12px; }
  .bs .bs-tabs { flex: none; }
  .bs .bs-tabs button { flex: none; min-height: 28px; padding: 0 11px; }
  /* statusraden mellan periodvalet och knappen, högst två rader (ett felbesked får växa, så att hela beskedet syns) */
  .bs .bs-hint { order: 1; flex: 1 1 0; text-align: right; }
  .bs .bs-hint:not(.is-error) { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
  .bs .bs-btn { order: 2; flex: none; min-height: 34px; padding-right: 15px; }
  .bs .bs-btn svg { width: 24px; height: 24px; padding: 5px; }
}
@media (pointer: coarse) { .bs .bs-tabs button, .bs .bs-btn { min-height: 44px; } .bs .bs-tabs button { min-width: 44px; } }

/* Rörelsen. Introt körs när rutan kommer in i bild (ui.js sätter data-intro), aldrig med mindre rörelse; "backwards" gör att
   grundstilen ovan gäller efteråt. data-anim="hold" (utanför skärmen, dold flik, dialog eller meny öppen) fryser allt som rör sig. */
.bs[data-intro="wait"] .bs-i, .bs[data-intro="wait"] .chart-svg, .bs[data-intro="wait"] .bs-dot, .bs[data-intro="wait"] .bs-tip, .bs[data-intro="wait"] .bs-row { opacity: 0; }
.bs[data-intro="run"] .bs-i { animation: bs-kpi-in-flat 0.7s var(--bs-ease) backwards; animation-delay: calc(380ms + var(--i, 0) * 60ms); }
/* Smal datorvy (520 till 620 px): tätare luft så att nyckeltalen och spelraderna ryms */
@container bs (min-width: 520px) and (max-width: 619.98px) {
  .bs-more { display: none; }
  .bs-main { padding: 14px 14px 16px; }
  .bs-head { column-gap: 12px; }
  .bs-page { padding-left: 12px; }
  .bs-kpis { gap: 8px; }
  .bs .bs-kpi, .bs .bs-kpi-main, .bs .bs-kpi:nth-child(n + 3) { padding: 11px 11px 10px; }
  .bs-body { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .bs-row-meta { gap: 6px; }
  .bs .bs-chart .bs-panel-unit { display: none; }
  .bs-foot { gap: 8px; }
  .bs .bs-tabs button { padding: 0 8px; }
}
/* Låga fönster (under 720 px): tätare luft i datorvyn, så att rutan slutar ovanför rörelseknappen i hörnet (1280x704) */
@media (max-height: 719.98px) {
  @container bs (min-width: 520px) {
    .bs-main { padding-block: 12px; }
    .bs-head { padding-bottom: 10px; }
    .bs-kpis { margin-bottom: 10px; }
    .bs-foot { margin-top: 10px; }
  }
}
@container bs (min-width: 520px) { .bs[data-intro="run"] .bs-i { animation-name: bs-kpi-in; } }
.bs[data-intro="run"] .chart-svg { animation: bs-wipe 1.1s var(--bs-ease) 460ms backwards; }
.bs[data-intro="run"] .bs-row { animation: bs-row-intro 0.7s var(--bs-ease) backwards; animation-delay: calc(620ms + var(--i, 0) * 60ms); }
.bs[data-intro="run"] .bs-dot { animation: bs-pop 0.42s var(--bs-spring) 1460ms backwards; }
.bs[data-intro="run"] .bs-tip { animation: bs-tip-in 0.42s var(--bs-spring) 1520ms backwards; }
.bs[data-anim] .bs-halo { animation: bs-ping 2.2s var(--bs-ease) 1.3s infinite; }
.bs[data-anim] .bs-pill[data-status="pending"] .bs-pill-dot { animation: bs-blink 1.6s ease-in-out infinite; }
.bs[data-rewind] .bs-kpis, .bs[data-rewind] .bs-body { animation: bs-dip 0.9s var(--bs-ease-io) both; }
.bs[data-anim="hold"], .bs[data-anim="hold"] *, .bs[data-anim="hold"] *::before, .bs[data-anim="hold"] *::after { animation-play-state: paused !important; }
@keyframes bs-kpi-in { from { opacity: 0; transform: translateY(0.5em); filter: blur(5px); } }
@keyframes bs-kpi-in-flat { from { opacity: 0; transform: translateY(0.5em); } }
@keyframes bs-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes bs-row-intro { from { opacity: 0; transform: translateY(14px); } }
@keyframes bs-row-in { from { opacity: 0; transform: translateY(-30%); filter: blur(2px); } }
@keyframes bs-pop { from { opacity: 0; transform: scale(0.5); } }
@keyframes bs-tip-in { from { opacity: 0; transform: translate(calc(-100% + 10px), calc(var(--tip-y) + 8px)) scale(0.85); } }
@keyframes bs-ping { 0% { opacity: 0.7; transform: scale(0.7); } 100% { opacity: 0; transform: scale(2.4); } }
@keyframes bs-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@keyframes bs-dip { 0%, 100% { opacity: 1; filter: none; } 38% { opacity: 0.15; filter: blur(3px); } }
@keyframes bs-delta { 0% { opacity: 0; transform: translateY(6px) scale(0.85); } 12% { opacity: 1; transform: none; } 78% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-4px); } }
@keyframes bs-sweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.pill { display: inline-block; padding: 3px 7px; border-radius: var(--r-pill); font: 600 var(--t-tiny)/1 var(--f-body); }
.pill.win { background: rgba(53, 208, 124, 0.14); color: var(--bs-pos); }
.pill.loss { background: rgba(240, 101, 79, 0.14); color: var(--bs-neg); }
.pill.void { background: rgba(255, 255, 255, 0.08); color: var(--bs-muted); }
@keyframes pulse { 50% { opacity: 0.35; } }

/* ---------- PDF-läsare: dokumentet har huvudrollen ---------- */
.pdf-modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; }
.pdf-backdrop { position: absolute; inset: 0; background: rgba(4, 6, 12, 0.8); animation: pdfFade var(--dur-ui) ease-out both; }
.pdf-dialog { position: relative; display: grid; grid-template-rows: auto auto minmax(0, 1fr); min-width: 0; max-width: 100vw; width: min(96vw, 980px); height: min(94vh, 1300px); height: min(94svh, 1300px); background: #23272f; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--e-3); animation: dlgIn var(--dur-panel) var(--ease-out) both; }
/* Dialogen växer fram ur knappen som öppnade den (ui.js sätter transform-origin till knappens mitt) och krymper tillbaka dit */
@keyframes dlgIn { from { transform: scale(0.96); opacity: 0; } }
/* Stängning: skärmen och dialogen tonas ut (160 ms) innan dialogen döljs (F14Overlay, menu.js). Skärmen bakom dialogen fångar
   trycken tills dialogen är dold, så att inget når sidan under; dialogens verktyg gör ingenting under uttoningen */
.pdf-modal.is-closing .pdf-dialog { pointer-events: none; }
.pdf-modal.is-closing .pdf-backdrop { animation: pdfFadeOut 0.16s ease-out both; }
.pdf-modal.is-closing .pdf-dialog { animation: dlgOut 0.16s var(--ease-out) both; }
@keyframes pdfFade { from { opacity: 0; } }
@keyframes pdfFadeOut { to { opacity: 0; } }
@keyframes dlgOut { to { transform: scale(0.96); opacity: 0; } }
/* Mindre rörelse: skärm och dialog tonas in och ut på 150 ms, ingen skalning */
html.reduce .pdf-backdrop, html.reduce .pdf-dialog { animation: pdfFade 150ms ease-out both !important; }
html.reduce .pdf-modal.is-closing .pdf-backdrop, html.reduce .pdf-modal.is-closing .pdf-dialog { animation: pdfFadeOut 150ms ease-out both !important; }
@media (prefers-reduced-motion: reduce) {
  html:not(.motion-full) .pdf-backdrop, html:not(.motion-full) .pdf-dialog { animation: pdfFade 150ms ease-out both !important; }
  html:not(.motion-full) .pdf-modal.is-closing .pdf-backdrop, html:not(.motion-full) .pdf-modal.is-closing .pdf-dialog { animation: pdfFadeOut 150ms ease-out both !important; }
}
.pdf-bar { display: flex; align-items: center; gap: 18px; min-width: 0; min-height: 54px; padding: 8px 12px 8px 18px; background: #15181e; border-bottom: 1px solid rgba(255, 255, 255, 0.07); color: #e9ebf0; font-family: var(--f-body); }
.pdf-brand { display: flex; flex-direction: column; gap: 3px; line-height: 1; flex: none; }
.pdf-brand .bs-name { font: 600 var(--t-small)/1 var(--f-bs); letter-spacing: -0.02em; color: #f3f4f7; }
.pdf-brand .bs-name i { font-style: normal; color: #4f8cff; }
.pdf-brand .bs-by { font: 500 var(--t-micro)/1 var(--f-body); letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; color: #8a90a0; }
.pdf-period { display: flex; align-items: center; gap: 8px; min-width: 0; font: 500 var(--t-caption)/1.2 var(--f-body); color: #c9ccd6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdf-demo { flex: none; }
.pdf-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.pdf-nav, .pdf-zoom { display: inline-flex; align-items: center; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--r-sm); overflow: hidden; }
.pdf-tool { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; min-height: 34px; padding: 0 8px; border: 0; background: transparent; color: #d8dbe3; font: 600 var(--t-caption)/1 var(--f-body); cursor: pointer; transition: background-color var(--dur-ui), color var(--dur-ui), transform var(--dur-press) var(--ease-out); }
.pdf-tool svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) and (pointer: fine) { .pdf-tool:hover { background: rgba(255, 255, 255, 0.08); color: #fff; } }
.pdf-tool:focus-visible, .pdf-download:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: -2px; }
.pdf-tool[disabled], .pdf-tool[aria-disabled="true"] { opacity: 0.4; cursor: default; }   /* aria-disabled: knappen nådde sitt slut medan den hade fokus (ui.js) */
.pdf-pages { min-width: 48px; text-align: center; font-size: var(--t-micro); color: #a3a8b5; }
.pdf-fit { font-size: var(--t-micro); color: #a3a8b5; }
.pdf-fit[aria-pressed="true"] { color: #fff; background: rgba(255, 255, 255, 0.1); }
.pdf-close { flex: none; width: 36px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--r-sm); }
.pdf-download { min-height: 34px; padding: 0.5em 0.9em; font-size: var(--t-caption); }
.pdf-download[disabled] { opacity: 0.55; cursor: not-allowed; }
.pdf-summary { display: none; }
/* Bredare skärmar: sammanfattningen och spellistan finns kvar för skärmläsare (visuellt dold), så att rapporten går att läsa i alla bredder */
@media (min-width: 641px) { .pdf-summary:not([hidden]) { display: block; position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
/* Appens webbläsare (ui.js, has-note): beskedet att filen inte kan sparas syns också på bredare skärmar, som raden i telefonens
   sammanfattning. Resten av sammanfattningen är fortfarande bara för skärmläsare. */
@media (min-width: 641px) {
  .pdf-summary.has-note:not([hidden]) { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; padding: 12px 14px; background: #1b1f27; border-bottom: 1px solid rgba(255, 255, 255, 0.07); font-family: var(--f-body); }
  .pdf-summary.has-note > :not(.ps-note) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .pdf-summary.has-note .ps-note { font-size: var(--t-micro); color: #8b90a0; }
}
@media (max-width: 640px) {
  .pdf-summary:not([hidden]) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; padding: 12px 14px; background: #1b1f27; border-bottom: 1px solid rgba(255, 255, 255, 0.07); color: #e9ebf0; font-family: var(--f-body); }
  .pdf-summary .ps-period { grid-column: 1 / -1; font-size: var(--t-caption); color: #a3a8b5; }
  .pdf-summary .ps-item { display: grid; gap: 2px; }
  .pdf-summary .ps-k { font: 600 var(--t-micro)/1 var(--f-body); letter-spacing: 0.1em; text-transform: uppercase; color: #8b90a0; }
  .pdf-summary .ps-v { font: 700 1.125rem/1.15 var(--f-display); }
  .pdf-summary .ps-v.pos { color: #2fbf71; } .pdf-summary .ps-v.neg { color: #e5533b; }
  .pdf-summary .ps-note { grid-column: 1 / -1; font-size: var(--t-micro); color: #8b90a0; }
  /* läsbar detaljvy på telefon: samma spel som i A4-sidorna, som lista (datum, marknad, odds · insats, resultat) */
  .pdf-summary .ps-list { grid-column: 1 / -1; }
  .pdf-summary .ps-list summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font: 600 var(--t-caption)/1.2 var(--f-body); color: #e9ebf0; }
  .pdf-summary .ps-list summary::before { content: ""; flex: none; width: 7px; height: 7px; margin-right: 8px; border-right: 1.5px solid var(--gold); border-bottom: 1.5px solid var(--gold); transform: rotate(-45deg); transition: transform 0.2s var(--ease-out); }   /* ritad pil: pekar åt höger när listan är stängd, nedåt när den är öppen */
  .pdf-summary .ps-list[open] summary::before { transform: rotate(45deg); }
  .pdf-summary .ps-list ol { list-style: none; margin: 0; padding: 0; max-height: 46vh; max-height: 46svh; overflow-y: auto; overscroll-behavior: contain; border-top: 1px solid rgba(255, 255, 255, 0.08); }
  .pdf-summary .ps-list li { display: grid; grid-template-columns: 3.8em minmax(0, 1fr) auto; grid-template-areas: "d m r" "d o r"; column-gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); font-size: var(--t-caption); }
  .pdf-summary .pl-d { grid-area: d; color: #a3a8b5; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .pdf-summary .ps-list ol.has-years li { grid-template-columns: 5.2em minmax(0, 1fr) auto; }   /* datum med årtal (12 aug 25) när perioden spänner över flera år */
  .pdf-summary .pl-m { grid-area: m; color: #e9ebf0; overflow-wrap: anywhere; }
  .pdf-summary .pl-o { grid-area: o; color: #8b90a0; font-size: var(--t-micro); }
  .pdf-summary .pl-r { grid-area: r; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .pdf-summary .pl-r.pos { color: #2fbf71; } .pdf-summary .pl-r.neg { color: #e5533b; }
}
.pdf-viewport { grid-row: 3; min-height: 0; overflow: auto; scrollbar-gutter: stable; padding: 22px; background: #23272f; overscroll-behavior: contain; scroll-behavior: smooth; }
.pdf-pages-wrap { display: grid; justify-items: center; gap: 18px; width: max-content; min-width: 100%; }
.pdf-page-canvas { display: block; background: #fff; box-shadow: 0 16px 40px -18px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(0, 0, 0, 0.35); }

/* ---------- Myntöversikten ---------- */
/* En skärm hög i alla lägen (en rubrik per skärm): data och vänteläge centreras på samma sätt i ytan under menyn */
.stack-sec { position: relative; height: auto; }
.stack-sticky { position: relative; height: auto; min-height: 100vh; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; padding: calc(var(--nav-total) + clamp(20px, 4vh, 48px)) 0 clamp(40px, 7vh, 88px); box-sizing: border-box; }
/* Text 36 % och mynt 64 %, 40 px emellan. Legendens tolv celler följer myntkolumnernas bredd (world.js): med den här spalten är de
   43,5 px på liggande surfplatta (1024 px) och rymmer sina etiketter ned till 901 px. Spaltsystemets 56 % räcker inte: cellerna
   blir 37,9 px på 1024 px, och vid 901 px går "Mars" 6 px in i grannen. */
.stack-grid { display: grid; grid-template-columns: minmax(0, 36fr) minmax(0, 64fr); gap: 40px; align-items: center; }
.stack-copy .h2 { max-width: 15ch; }
/* Rubrikens sista rad ("12 månaderna.", 8,9 em) är bredare än textspalten vid 901 px och från 1 428 px (som mest 21 px). Den får
   gå ut i spaltmellanrummet, som före spaltsystemet, i stället för att brytas mitt i ordet (overflow-wrap på .h2); med ännu
   större text bryts ordet hellre än att gå in över mynten. */
@media (min-width: 901px) { .stack-sec:not(.is-waiting) .stack-copy .h2 { margin-right: -40px; } }
.stack-anchor { width: 100%; aspect-ratio: 16 / 6.6; }
.stack-total { display: grid; grid-template-columns: repeat(2, minmax(0, auto)); justify-content: start; gap: 18px 36px; margin: 1.4rem 0 0; }   /* spåren får krympa: med stor text bryts etiketterna (även mitt i ett ord som är bredare än spåret) i stället för att sticka ut */
.stack-period { margin-top: 1rem; font-size: var(--t-caption); }
.stack-link { margin-top: 1rem; }
.sl.is-missing .sl-v { color: var(--mist-2); }
.sl.is-open .sl-m { color: var(--gold-hi); }
/* en månad utanför det valda projektets spelperiod (world.js, is-out): dämpad, utan resultat; den pågående månaden markeras inte som projektets */
.sl.is-out .sl-m { color: var(--mist-2); }
.stack-total div { display: grid; grid-template-rows: 1fr auto; gap: 8px; }   /* värdena i samma rad står i höjd också när en etikett bryts på två rader (320 px) */
.stack-total div > dt { align-self: end; }
.stack-total dt { font: 600 var(--t-micro)/1 var(--f-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ivory-2); overflow-wrap: anywhere; }
.stack-total dd { font: 600 clamp(1.15rem, 1.7vw, 1.5rem)/1 var(--f-display); font-feature-settings: "tnum" 1; color: var(--ivory); }
.stack-total dd.neg { color: var(--neg); }
.stack-range { display: none; margin-top: 1rem; }   /* .seg; visas bara på smala skärmar (halvår i taget) */
/* ett halvår helt utanför det valda projektet går inte att välja (ui.js): dämpat, ingen tryck- eller hovringsåterkoppling */
.stack-range button:disabled, .stack-range button:disabled:hover { color: var(--mist-2); background: transparent; cursor: default; }
.stack-range button:disabled:active { transform: none; }
/* vänteläge: tills riktiga resultat finns visas ett kompakt besked i stället för en tom myntbricka. Avsnittet är ändå en egen sida
   (ägarbeslut): rubrik, kort text och ett väntebesked, centrerat på en hel skärm (samma ram som dataläget ovan) */
.stack-sec.is-waiting .stack-grid { grid-template-columns: minmax(0, 1fr); }
.stack-sec.is-waiting .stack-view, .stack-sec.is-waiting .stack-range, .stack-sec.is-waiting .stack-total, .stack-sec.is-waiting .stack-link { display: none; }   /* länken till en tom 12-månaderssida döljs tills resultaten finns */
/* två ingresser: den levande förklarar mynten, väntetexten säger att inga siffror visas förrän kopplingen är aktiverad */
.stack-sec:not(.is-waiting) .stack-lede-wait, .stack-sec.is-waiting .stack-lede-live { display: none; }
.stack-sec.is-waiting .stack-copy { max-width: 40rem; }
/* valt projekt utan spel de senaste tolv månaderna (is-empty, ui.js): samma kompakta ram som vänteläget, beskedet står i periodraden */
.stack-sec.is-empty .stack-grid { grid-template-columns: minmax(0, 1fr); }
.stack-sec.is-empty .stack-view, .stack-sec.is-empty .stack-range, .stack-sec.is-empty .stack-total, .stack-sec.is-empty .stack-link, .stack-sec.is-empty .stack-lede-live { display: none; }
.stack-sec.is-empty .stack-copy { max-width: 40rem; }
.stack-sec.is-empty .stack-period { max-width: 34rem; margin-top: 1.1rem; font-size: var(--t-lede); color: var(--ivory-2); }   /* beskedet i ingressens storlek, som väntetexten */
.res-state.is-partial { display: block; margin-top: 10px; padding: 10px 12px; border-radius: var(--r-md); background: rgba(240, 180, 60, 0.1); border: 1px solid rgba(240, 180, 60, 0.4); color: var(--ivory); font-size: var(--t-caption); }

/* Reservvy för säsongsöversikten (utan WebGL, och innan 3D-vyn är igång) */
.stack-fallback { list-style: none; margin: 0; padding: 18px 20px; display: grid; gap: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.stack-fallback li { display: grid; grid-template-columns: 74px 1fr 58px; align-items: center; gap: 12px; font-size: var(--t-micro); }
.sf-m { color: var(--mist); font-weight: 600; letter-spacing: 0.04em; }
.sf-bar { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.sf-bar i { display: block; height: 100%; border-radius: 4px; background: var(--gold); }
.sf-bar i.neg { background: var(--neg); }
.sf-bar i.zero { background: var(--zero); }
.stack-fallback b { text-align: right; color: var(--gold-hi); white-space: nowrap; }
.stack-fallback b.neg { color: var(--neg); }
.stack-fallback b.zero { color: var(--zero); }
html.gl-on .stack-fallback { display: none; }

/* ---------- Sidfot ---------- */
.foot { position: relative; z-index: 1; padding: 64px 0 calc(40px + var(--sab)); background: rgba(4, 7, 15, 0.94); border-top: 1px solid var(--line); }   /* under main: de fasta verktygen (z 30 i main) ligger kvar ovanpå sidfoten */
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr) minmax(0, 0.8fr); gap: 40px 48px; }
.foot-desc { margin: 14px 0 18px; max-width: 32ch; color: var(--ivory-2); font-size: var(--t-small); }
.foot-co { font-size: var(--t-caption); line-height: 1.8; color: var(--mist); }
@media (hover: hover) and (pointer: fine) { .foot-co a:hover, .foot-col a:hover { color: var(--gold-hi); } }
.foot-col { display: grid; gap: 10px; align-content: start; }
.foot-col h3 { margin-bottom: 4px; color: var(--mist); }
.foot-col a { font-size: var(--t-small); color: var(--ivory-2); }
.foot-rg { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 14px; padding-top: 28px; border-top: 1px solid var(--line); font-size: var(--t-caption); color: var(--mist); }
.foot-rg p { max-width: 70ch; }
.foot-rg a { color: var(--ivory); }
/* Länkar i löptext ser ut som länkar: understrykning som sitter direkt under texten (även med pekskärmens större träffyta) */
.lede a, .flow-step p a, .faq details p a, .foot-rg a { color: var(--ivory); border-bottom: 0; text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--gold-dim); text-underline-offset: 0.22em; transition: color var(--dur-ui) ease, text-decoration-color var(--dur-ui) ease; }
@media (hover: hover) and (pointer: fine) { .lede a:hover, .flow-step p a:hover, .faq details p a:hover, .foot-rg a:hover { color: var(--gold-hi); text-decoration-color: currentColor; } }
.lede a:active, .flow-step p a:active, .faq details p a:active, .foot-rg a:active, .rp-head .lede a:active { color: var(--gold-hi); text-decoration-color: currentColor; }   /* tryckåterkoppling på pekskärm */
.age { flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--ivory); font: 800 var(--t-micro)/1 var(--f-body); color: var(--ivory); }
.foot-c { grid-column: 1 / -1; font-size: var(--t-micro); color: var(--mist-2); }

/* ---------- Tryckåterkoppling (synlig :active på alla kontroller; .play och .menu-motion skalas aldrig) ---------- */
.bs-tabs button:active, .pdf-tool:not([disabled]):not([aria-disabled="true"]):active, .menu-btn:active { transform: scale(0.97); }
.play:active, .menu-motion:active { background-color: rgba(255, 255, 255, 0.08); }
.tg-opt:active { background-color: rgba(255, 255, 255, 0.06); }
.sl:active { background: rgba(224, 177, 41, 0.16); }
.faq summary:active, .menu nav a:active, .foot-col a:active, .foot-co a:active, .brand:active { color: var(--gold-hi); }

/* ---------- Responsivt ---------- */
/* Rörelsevalet (mindre/full rörelse) ligger i nedre högra hörnet av fönstret på skärmar med bredd ≥ 901 px och mus eller
   styrplatta, oavsett upplösning och säkra zoner; sidfoten får extra luft nedtill så att inga länkar hamnar under dem. På pekskärm
   (surfplatta, stor liggande telefon) står det kvar i hjälteytan, som på telefon, och sidfoten har sin egen knapp: fast i hörnet
   låg det över myntlegendens sista celler (926x428). */
@media (min-width: 901px) and (hover: hover) and (pointer: fine) {
  .hero-foot .foot-tools { position: fixed; right: max(20px, var(--sar)); bottom: calc(20px + var(--sab)); z-index: 30; }
  .foot { padding-bottom: calc(104px + var(--sab)); }
  .foot-motion { display: none; }   /* den fasta rörelseknappen finns redan i hörnet */
}
/* Avslutet på liggande desktop: texten nere till vänster på den skuggade snön, samma komposition som heron. Stående ≥ 901 px (iPad) behåller sin layout, där ramar finalCam in tablån under texten. */
@media (min-width: 901px) and (min-aspect-ratio: 1/1) { .final { min-height: 100vh; min-height: 100svh; align-content: end; padding-block: calc(var(--nav-total) + 24px) clamp(100px, 13.5vh, 156px); } }
@media (max-width: 1100px) {
  .bs-layout { grid-template-columns: minmax(0, 1fr); }
  .bs-copy .h2 { max-width: 22ch; }
}
@media (max-width: 900px) {
  :root { --nav-h: 64px; --shade-reach: 72%; }   /* vänsterskuggan når längre på smalare skärmar, där textspalten tar en större del av bredden (förklaringsradens slut på 768 px) */
  .nav-links, .nav-actions .btn, .nav-login { display: none; }
  .menu-btn { display: block; }
  .grid-2, .grid-faq { grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); }   /* en spalt: radavståndet som före spaltsystemet */
  .grid-faq .sec-head { margin-bottom: var(--s-block); }   /* rubriken behåller .shade-regelns position: relative: slöjan (::before) mäts mot rubriken, inte mot hela avsnittet */
  .stack-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; align-content: center; }
  .stack-copy .stack-lede-live { display: none; }   /* väntetexten står kvar: den är vänteläget */
  .stack-view { max-width: none; }
  .stack-anchor { max-width: calc((100svh - 380px) * 16 / 10); aspect-ratio: 16 / 9; }
  .foot-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .foot-brand { grid-column: 1 / -1; }
  .pdf-dialog { width: 100vw; height: 100vh; height: 100dvh; border-radius: 0; padding: var(--sat) var(--sar) var(--sab) var(--sal); box-sizing: border-box; animation-name: pdfFade; }   /* helskärm: en ren toning, ingen skalning */
  .pdf-modal.is-closing .pdf-dialog { animation-name: pdfFadeOut; }
  .pdf-bar { flex-wrap: wrap; gap: 8px 10px; padding: 8px 10px; }
  .pdf-brand { display: none; }
  .pdf-period { order: 0; flex: 1 1 auto; min-width: 0; }
  .pdf-close { order: 1; }
  .pdf-tools { order: 2; flex-basis: 100%; margin-left: 0; justify-content: space-between; flex-wrap: wrap; }   /* smala telefoner: nedladdningsknappen (även som "Försök igen") radbryts hellre än att klippas av kanten */
  .pdf-viewport { padding: 12px; }
}
@media (max-width: 640px) {
  :root { --t-h2: clamp(1.75rem, 7.2vw, 2.3rem); --shade-phone: linear-gradient(0deg, rgba(6, 10, 20, 0.86) 34%, rgba(6, 10, 20, 0.25) 60%, rgba(6, 10, 20, 0) 78%); }   /* grundskuggan på telefon: även hjälteytans lager ritar den (nedan) */
  .foot { padding: 36px 0 calc(24px + var(--sab)); }
  .foot-grid { grid-template-columns: minmax(0, 1fr); gap: 22px 24px; }
  .foot-desc { margin: 10px 0 12px; }
  .foot-col { gap: 7px; font-size: var(--t-small); }
  .foot-rg { flex-direction: column; padding-top: 18px; gap: 10px; }
  .final { min-height: 100svh; align-content: start; padding-top: calc(var(--nav-total) + 24px); padding-bottom: 0; }
  .hero .cta .btn { width: 100%; }
  .hero-foot { bottom: calc(12px + var(--sab)); justify-content: flex-end; }
  /* rörelsevalet som ett kompakt chip i nedre högra hörnet; bredden rymmer den längre etiketten ("Mindre rörelse" med ikon,
     uppmätt till 121,4 px i den här storleken), så att knappen står exakt kvar när texten byts */
  .hero-foot .foot-tools { width: auto; }
  .hero-foot .foot-tools .play { flex: none; min-height: 40px; padding: 6px 12px; gap: 6px; font-size: var(--t-micro); min-width: 8rem; }
  .final .cta .btn { flex: 1 1 100%; width: 100%; }   /* avslutets två knappar lika breda */
  .hero { padding-bottom: calc(78px + var(--sab)); }
  .stage-still img { object-position: 50% 30%; }
  .stage-shade::after { background: var(--shade-phone); }
  /* Slöjan bakom textspalterna på telefon: ett jämnt band i skärmens hela bredd med mjuk över- och underkant, i stället för den
     radiella toningen som går mot noll i spaltens kanter (Telegram-spalten är över 1 400 px hög, så raderna över slottets ljusa
     tak fick nästan ingen mörkning). Ingen kant, ram eller oskärpa; hjälteytan har fortfarande ingen slöja. */
  .shade::before { inset: -32px calc(-1 * max(var(--gutter), var(--sar))) -32px calc(-1 * max(var(--gutter), var(--sal))); background: linear-gradient(180deg, rgba(6, 10, 20, 0), rgba(6, 10, 20, 0.62) 32px, rgba(6, 10, 20, 0.62) calc(100% - 32px), rgba(6, 10, 20, 0)); }
  /* Telegram-avsnittet tätare på telefon; huvudknapp och gruppval före punktlistan så att valen inte kommer sist */
  #telegram .grid-2 > .shade { display: flex; flex-direction: column; }
  #telegram .grid-2 > .shade > .btn { order: 4; margin-top: 18px; align-self: flex-start; }
  #telegram .grid-2 > .shade > .tg-compare { order: 5; }
  #telegram .grid-2 > .shade > .list { order: 6; margin-top: 22px; }
  /* Telegram-avsnittet tätare på telefon */
  .list { gap: 8px; margin: 1.1rem 0 1.3rem; }
  .list li { line-height: 1.5; }
  .lede { margin-top: 0.8rem; }
  .tg-nums { grid-template-columns: 1fr 1fr; }
  .stack-total { gap: 20px; }
  .pdf-dl-text { display: none; }
  .pdf-download { font-size: var(--t-caption); padding-inline: 0.7em; }
  .pdf-tool { min-width: 32px; padding-inline: 6px; }
  /* Stor text och sidzoom: knappar och varningsmärkningar bryts när raden inte ryms, i stället för att sticka ut ur skärmen.
     Radavståndet är textens höjd plus 4 px: med en rad står texten på exakt samma bildpunkter som förut (2 px luft över och
     under) och höjden är densamma (knapparnas minsta höjd bär, utom för de stora; märkningen byter kantluft mot radavstånd). */
  main .btn, .menu-cta .btn { white-space: normal; text-align: center; line-height: calc(1em + 4px); }
  main .btn-lg { padding-block: calc(1em - 2px); }                /* de stora knapparna bärs inte av sin minsta höjd på pekskärm: luften tar upp det större radavståndet */
  main .btn-lg:has(svg) { padding-block: calc(1em - 1px); }       /* med ikon (18 px) var innehållet redan 18 px högt */
  .tag-test, .tag-warn { white-space: normal; line-height: calc(1em + 4px); padding-block: 2px; }
}
/* Telefon i stående format: nederkantens övertoning följer hjälteytans textblock i stället för en andel av scenens höjd, så att
   ingressen alltid står på den mörka delen och scenen ovanför ordmärket lämnas ljus. Stoppen räknas från scenens nederkant:
   --stage-over är det scenen (100lvh) sticker ut under hjälteytan (100svh) när webbläsarens fält visas, --hero-ink avståndet upp
   till ingressens överkant. Det andra lagret är den tidigare övertoningens svaga övre del, oförändrad: ovanför det förankrade
   lagret är scenen lika ljus som förut, och hjälteytans text behåller sitt stöd när den glider upp över snön under scroll.
   Övertoningen ligger på scennivå, ingen panel bakom texten, i ett eget lager (.stage::after) som här ersätter grundskuggan.
   Under scroll bygger ui.js om lagret per scrolläge (--hero-shade): övertoningen går steglöst över i grundskuggans profil och
   ett mjukt band följer ingressen och förklaringsraden, så att texten är läsbar även när den har glidit upp över snön. När
   hjälteytan är förbi (html.hero-past) ritar lagret grundskuggan med procentstoppen ovan: scenen bakom övriga avsnitt är lika
   ljus som förut. Webbläsare utan lvh/svh behåller grundskuggan hela vägen (en ogiltig enhet tillsammans med var() hade annars
   gett ingen övertoning alls).
   Stillbilden (visas innan scenen är klar och utan WebGL) förankras mot samma textblock: den stående bilden (4:7) visas i full
   bredd och läggs så att rävens fotlinje, 65vw över bildens nederkant (110vw under dess överkant), hamnar 12 px över
   ordmärket (--hero-top, räknat från hjälteytans nederkant vid 100svh). Det är samma bildrad som scenens kamera lägger där
   (world.js, heroCam), och bilden är scenens första bildruta: när scenen tonas in står räv, skylt och säckar kvar på sin plats.
   De står alltid ovanför texten; bildens över- och nederkant tonas ut mot natten. Bilden läggs med en
   förflyttning (transform), inte med sin nederkant: när textblocket byter höjd (webbtypsnittet läses in och ingressen får en
   rad till, eller ui.js ersätter stilmallens mått) glider bilden till sitt nya läge i stället för att hoppa, och sidan får
   inget layoutskift av det. */
@media (max-width: 640px) and (max-height: 720px) { :root { --hero-ink: 342px; } }
@media (max-width: 640px) and (max-height: 639px) { :root { --hero-ink: 292px; } }   /* utan förklaringsraden */
@supports (height: 100lvh) {
  @media (max-width: 640px) and (orientation: portrait) {
    :root { --stage-over: calc(100lvh - 100svh); }
    .stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; transition: opacity 0.6s;
      background: var(--hero-shade, linear-gradient(0deg, rgba(6, 10, 20, 0.86) calc(var(--stage-over) + var(--hero-ink)), rgba(6, 10, 20, 0.6) calc(var(--stage-over) + var(--hero-ink) + 40px), rgba(6, 10, 20, 0.4) calc(var(--stage-over) + var(--hero-ink) + 64px), rgba(6, 10, 20, 0.12) calc(var(--stage-over) + var(--hero-ink) + 90px), rgba(6, 10, 20, 0) calc(var(--stage-over) + var(--hero-ink) + 140px))),
                  linear-gradient(0deg, rgba(6, 10, 20, 0.25) min(60%, calc(var(--stage-over) + var(--hero-top))), rgba(6, 10, 20, 0) min(78%, calc(var(--stage-over) + var(--hero-top) + 40px))); }
    html.hero-past .stage::after { background: var(--shade-phone); }
    html.shade-top .stage::after, .stage-shade::after { opacity: 0; }   /* grundskuggans eget lager används inte här; avslutets toppskugga släcker nederkantens som förut */
    .stage-still img { bottom: auto; transform: translateY(calc(100svh - 110vw - 12px - var(--hero-top))); transition: transform 0.3s var(--ease-out); height: auto; aspect-ratio: 4 / 7; object-fit: fill; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 6%, #000 76%, transparent 97%); mask-image: linear-gradient(180deg, transparent 0, #000 6%, #000 76%, transparent 97%); }
    @supports (width: round(1.5px, 1px)) { .stage-still img { transform: translateY(round(calc(100svh - 110vw - 12px - var(--hero-top)), 1px)); } }   /* hela bildpunkter: bilden ritas lika skarpt som när den lades med sin kant */
    /* Kort scen (lägre än 760 px: html.still-short, satt en gång av skriptet i index.html, som också väljer bildfilen): bilden är
       den korta scenens första bildruta, med räven 14 enheter. Scenens kamera vidgar där synfältet när räven inte ryms mellan
       menyraden och ordmärket, och scenen ställer räven längre åt höger ju bredare ytan är. Bilden följer med, med samma tal som
       world.js (heroCam och computeLayout): den förminskas kring fotlinjens mitt med kvoten mellan det vanliga synfältet (halva
       bredden 0,1591 på avståndet 92) och kamerans, och flyttas i sidled lika långt som räven.
         --still-k  = minst av 1, 0,5938 × höjd/bredd (synfältet är minst 30°: 0,1591 / tan 15°) och bandet mellan menyrad och
                      fotlinje minus 8 px delat med 88 % av rävens höjd (14 enheter = 47,82vw: 42,08vw); aldrig under
                      0,3748 × höjd/bredd (synfältet är högst 46°)
         --still-x  = rävens läge 10,674 × bredd/höjd (0,5 × 62 × tan 19°) utöver 6,27, gånger 3,416vw per enhet. Bilden är tagen
                      med räven på 6,13; upp till 6,27 (bredd/höjd 0,587) står den still, så att dess kant följer skärmens
       När bilden förminskas tonas också dess sidor ut mot natten. Webbläsare utan tan() och atan2() visar bilden oförminskad. */
    @supports (transform: scale(tan(atan2(1px, 1px)))) {
      html.still-short { --stage-hw: tan(atan2(100lvh, 100vw)); --still-y: calc(100svh - 110vw - 12px - var(--hero-top));
        --still-k: max(calc(0.3748 * var(--stage-hw)), min(1, calc(0.5938 * var(--stage-hw)), tan(atan2(max(52px, calc(100svh - var(--hero-top) - var(--nav-total) - 20px)), 42.08vw))));
        --still-x: calc((max(6.27, 10.674 / var(--stage-hw)) - 6.27) * var(--still-k) * 3.416vw); --still-fade: calc((1 - var(--still-k)) * 40%); }
      @supports (width: round(1.5px, 1px)) { html.still-short { --still-y: round(calc(100svh - 110vw - 12px - var(--hero-top)), 1px); } }
      html.still-short .stage-still img { transform-origin: 50% 110vw; transform: translate(var(--still-x), var(--still-y)) scale(var(--still-k));
        -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 6%, #000 76%, transparent 97%), linear-gradient(90deg, transparent 0, #000 var(--still-fade), #000 calc(100% - var(--still-fade)), transparent 100%);
        mask-image: linear-gradient(180deg, transparent 0, #000 6%, #000 76%, transparent 97%), linear-gradient(90deg, transparent 0, #000 var(--still-fade), #000 calc(100% - var(--still-fade)), transparent 100%);
        -webkit-mask-composite: source-in; mask-composite: intersect; clip-path: inset(0 0 2px 0); }   /* nederkantens sista rad (helt uttonad) klipps: förminskad lämnade den en svag linje i Chrome */
    }
  }
}
/* Webbläsare utan lvh/svh har bara grundskuggan på telefon. Med förklaringsraden står ordmärket och ingressens första rad över
   dess mörka del (375x667: lägsta kontrast 2,30 respektive 4,37), så där når skuggan något högre: 4,23 och 7,23. */
@supports not (height: 100lvh) {
  @media (max-width: 640px) { :root { --shade-phone: linear-gradient(0deg, rgba(6, 10, 20, 0.86) 38%, rgba(6, 10, 20, 0.42) 64%, rgba(6, 10, 20, 0) 82%); } }
}
@media (max-width: 360px) { .hero-foot .foot-tools .play svg { display: none; } }
@media (max-width: 760px) {
  .stack-range { display: flex; }
}
/* Myntöversikten i stående smal vy: scenen ryms i ytan under menyn. Räcker höjden inte krymper myntytan först (inte texten),
   ned till en höjd där legendens värden fortfarande ryms i sina celler; rubriken står alltid under menyn. */
@media (max-width: 900px) and (aspect-ratio < 5/4) {
  /* fast ruta: krympreglerna nedan har en höjd att krympa mot (flex, eftersom ett auto-rutnät inte ger max-height en höjd att räkna från).
     Luften över och under kommer från rutans padding. Den är smalare än i vänteläget (som bara har text): på telefon behöver
     myntytan höjden, annars krymper den till sin minsta höjd redan på vanliga telefoner (390x844). */
  .stack-sec:not(.is-waiting) .stack-sticky { height: 100vh; height: 100svh; display: flex; align-items: center; padding: calc(var(--nav-total) + 12px) 0 12px; }
  .stack-grid { display: flex; flex-direction: column; align-items: stretch; max-height: 100%; }   /* stretch: textspalten börjar i innehållets vänsterkant (rutnätets center gäller annars även kolumnen) */
  .stack-view { flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .stack-anchor { flex: 0 1 auto; min-height: 120px; }
  .stack-copy, .stack-legend, .stack-focus { flex: none; }
}
@media (max-width: 900px) and (aspect-ratio < 5/4) and (max-height: 820px) {   /* låga telefoner: tätare luft i texten ger myntytan plats */
  /* Rutan är minst en skärm hög och myntytan utgår från sin minsta höjd: den växer med den höjd som blir kvar, upp till sitt
     naturliga 16:9-mått (containerenheten följer ytans bredd), så att text och mynt ryms på en skärm (t.ex. 375x812, 360x800).
     Ryms de inte ens med minsta myntyta (mycket låga skärmar) växer avsnittet i stället för att rinna in i nästa avsnitt. */
  .stack-sec:not(.is-waiting) .stack-sticky { height: auto; flex-direction: column; align-items: stretch; }
  .stack-sec:not(.is-waiting) .stack-grid { flex: 1 0 auto; max-height: none; }
  .stack-sec:not(.is-waiting) .stack-view { flex: 1 0 auto; justify-content: center; container-type: inline-size; }
  .stack-sec:not(.is-waiting) .stack-anchor { flex: 1 1 120px; max-height: calc(min(100cqw, (100svh - 380px) * 16 / 10) * 9 / 16); }
  .stack-total { margin-top: 0.9rem; row-gap: 12px; }
  .stack-range, .stack-period, .stack-link { margin-top: 0.75rem; }
}
/* Smal liggande vy (t.ex. 200 % zoom på laptop): ordmärket och texten får inte gå in i räven */
@media (max-width: 900px) and (min-aspect-ratio: 5/4) {
  .wm-hero { width: min(100%, 50vw); }
  .hero-lede { max-width: 54vw; }
  .hero-plain { max-width: min(54vw, 24rem); }   /* förklaringsraden: alltid två rader här (en rad ryms inte bredvid räven) */
  .hero .cta .btn { width: auto; }
  /* myntöversikten: två kolumner även här, ytan styrs av bredden i stället för höjden */
  .stack-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 20px; }
  .stack-view { max-width: none; gap: 6px; }
  .stack-anchor { aspect-ratio: 16 / 7; }
  .stack-focus { min-height: 40px; padding: 8px 12px; }
  .stack-copy .h2 { font-size: 1.5rem; }
  .stack-total dd { font-size: 1.3rem; }
}
/* Samma vy med förklaringsraden framme: hjälteytans luft nedtill räknar med radens två rader (0,55rem marginal + två rader), så
   att ordmärke och ingress står kvar där de stod utan raden och hjälteytan ryms i fönstret */
@media (min-width: 641px) and (max-width: 900px) and (min-aspect-ratio: 5/4) and (min-height: 481px) { .hero { --plain-h: 3.27rem; } }
/* Liggande telefon (pekskärm): myntytan följer spaltens bredd. Den stående vyns höjdstyrda bredd, (100svh - 380px) * 1,6, blir noll
   när skärmen är lägre än 380 px: mynten försvann och legenden trycktes ihop. Avsnittet får här bli högre än skärmen (pekskärm
   scrollar fritt). Legenden visar ett halvår i taget, som på smala skärmar, så att cellerna blir breda nog att trycka på (samma
   villkor i ui.js). Smala liggande fönster med mus är oförändrade: där ska avsnittet rymmas på en skärm. */
@media (max-width: 900px) and (min-aspect-ratio: 5/4) and (pointer: coarse) {
  .stack-anchor { max-width: none; }
  .stack-range { display: flex; }
}
/* Surfplatta i två spalter (pekskärm 901–1100 px, t.ex. 1024x768 och 1024x1366): legendcellerna följer myntkolumnerna, och med
   40 px mellanrum blev de 43–43,5 px breda. Med 12 px blir båda spalterna något bredare: cellerna minst 44 px att trycka på, och
   textspaltens etiketter bryts inte (en smalare textspalt bröt "Resultat, 12 månader" på två rader). Brädet står ändå drygt 60 px
   från texten. Stora liggande telefoner har en egen regel nedan, som går före. */
@media (min-width: 901px) and (max-width: 1100px) and (pointer: coarse) {
  .stack-grid { gap: 12px; }
}
/* Stora liggande telefoner (t.ex. 932x430, 926x428), bredare än 900 px: samma vy som liggande telefoner ovan. Myntytans höjdstyrda
   bredd, (100svh - 300px) * 16 / 6,6, blir här drygt 300 px, och legendens tolv celler gick in i varandra. Ett halvår i taget
   (samma villkor i ui.js) och myntytan efter spaltens bredd. */
@media (min-width: 901px) and (max-width: 1024px) and (max-height: 500px) and (min-aspect-ratio: 5/4) and (pointer: coarse) {
  .stack-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 20px; }
  .stack-view { max-width: none; gap: 6px; }
  .stack-anchor { aspect-ratio: 16 / 7; max-width: none; }
  .stack-focus { min-height: 40px; padding: 8px 12px; }
  .stack-copy .h2 { font-size: 1.5rem; }
  .stack-total dd { font-size: 1.3rem; }
  .stack-range { display: flex; }
}
@media (max-height: 700px) and (min-width: 900px) {
  .hero { padding-bottom: calc(84px - var(--plain-h, 0px)); }
  .wm-hero { width: min(100%, 480px); }
  .hero-foot { justify-content: flex-end; }
}
@media (max-height: 820px) and (min-width: 1100px) {
  .bs-copy .list { margin: 1.1rem 0 1.4rem; gap: 9px; }
}
@media (max-width: 640px) and (max-height: 720px) {
  .hero-lede { font-size: 1rem; line-height: 1.5; margin-top: 10px; }
  .hero-plain { margin-top: 6px; }
  .hero .cta { margin-top: 18px; gap: 8px; }
  .hero .cta .btn { min-height: 46px; padding-block: 11px; }
  .hero-foot { bottom: calc(8px + var(--sab)); }
}
/* Liggande telefon (högst 480 px hög): hjälteytan ryms på första skärmen. Med luften från stående vy blev den 431 px på 844x390
   och 451 px på 667x375, så att rörelsevalet klipptes av skärmens nederkant. Tätare luft och en något mindre, bredare ingress;
   förklaringsraden visas inte här (regeln nedan). */
@media (max-height: 480px) and (max-width: 900px) and (min-aspect-ratio: 5/4) {
  .hero { padding: calc(var(--nav-total) + 8px) 0 calc(52px + var(--sab)); }
  .hero .h1 { margin-bottom: 0.9rem; }
  .hero .cta { margin-top: 1.1rem; }
  .hero-lede { font-size: 1.0625rem; line-height: 1.5; max-width: 60vw; }
}
/* Förklaringsraden visas inte på de kortaste skärmarna, där den tar plats från räven eller trycker ned knapparna: telefoner vars
   minsta synliga höjd är under 640 px och liggande telefoner. Gränsen är 639 px, så att raden inte hinner målas och sedan tas
   bort när ui.js sätter hero-short (klassen mäts en gång och står kvar när adressfältet fälls ihop). */
@media (max-width: 640px) and (max-height: 639px), (max-height: 480px) { .hero-plain { display: none; } }
html.hero-short .hero-plain { display: none; }
@media (pointer: coarse) {
  .btn-sm { min-height: 44px; }
  .pdf-btn, .menu-motion, .seg button, .pdf-tool, .pdf-close, .pdf-download { min-height: 44px; }
  .pdf-close { width: 44px; }
  .foot-col a, .foot-co a, .foot-rg a { display: inline-block; padding: 11px 0; margin: -11px 0; }
  .foot-rg a { padding: 12px 0; margin: -12px 0; }   /* 13 px text: 44,8 px hög träffyta */
  .foot-col { gap: 14px; }
  .faq summary { min-height: 56px; }
  .nav-actions .btn, .cta .btn { min-height: 46px; }
  .nav-links a { min-width: 44px; justify-content: center; }   /* liggande surfplatta: korta menyval (Frågor) får full träffyta */
  /* Länkar i löptext: luften över och under en radbunden länk förstorar träffytan utan att flytta någon rad */
  .lede a, .flow-step p a { padding-block: 14px; }
  .hero-foot .foot-tools .play { min-height: 44px; }   /* rörelsechipet på telefon: kompakt, men full träffyta */
}
/* Mejllänken i FAQ-svaret får samma träffyta bara på telefonbredd, där den aldrig står på svarets första rad. På bredare pekskärmar
   gör den det, och då skulle träffytan nå upp över frågans nederkant: ett tryck där för att stänga svaret hade öppnat mejlet. */
@media (pointer: coarse) and (max-width: 480px) { .faq details p a { padding-block: 14px; } }
/* ---------- En rubrik per skärm (ägarbeslut 2026-10-03): varje avsnitt är en egen sida ----------
   Varje avsnitt är minst en skärm högt och innehållet centreras i ytan under menyn; avsnittets egen överkant rymmer menyn, så
   ankarlänkar landar på avsnittets topp. Bläddringen sida för sida med mus, styrplatta och tangentbord sköts i page.js
   (webbläsarens scroll-snap drog tillbaka enskilda hjulsteg och gick inte att lita på). Pekskärmar scrollar fritt, utan
   inrastning, och där följer avsnitten sitt innehåll i höjd (sist i results.css); hjälteytan och avslutet är hela skärmar överallt. */
main > section[id] { scroll-margin-top: 0; }   /* [id] behövs: den allmänna [id]-regeln (menyns marginal) har annars högre prioritet */
main > .section { min-height: 100vh; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; padding-block: calc(var(--nav-total) + clamp(20px, 4vh, 48px)) clamp(40px, 7vh, 88px); }
/* Långa hopp (ankarlänk eller Home/End över mer än 2,2 skärmhöjder): page.js tonar ut innehåll och scen på 120 ms, hoppar
   direkt och tonar in igen på 160 ms, i stället för att flyga förbi alla mellanliggande avsnitt. Menyn står kvar. */
main, .foot, .stage { transition: opacity 160ms ease-out; }
html.page-jump main, html.page-jump .foot, html.page-jump .stage { opacity: 0; transition-duration: 120ms; }
/* Sidfoten är bläddringens sista sida. Den fyller hela ytan under menyn, så att avslutets rubrik aldrig syns halvt
   avklippt under menyn i det sista läget, oavsett fönsterstorlek. Gäller där page.js bläddrar sidvis (mus, styrplatta). */
@media (hover: hover) and (pointer: fine) {
  .foot-screen { min-height: calc(100vh - var(--nav-total)); min-height: calc(100svh - var(--nav-total)); display: grid; align-content: center; }
}
/* Versaletiketter: luft ovanför Å/Ä/Ö när en etikett bryts på två rader (.sl-m behåller 1) */
.label, .tg-nums dt, .stack-total dt { line-height: 1.3; }
/* Mindre rörelse: korta tona-in/färgbyten (0,15 s) finns kvar, förflyttning och skalning sker direkt.
   Ett uttryckligt "Full rörelse" (html.motion-full) vinner över systemets inställning; ?reduce och eget val går via html.reduce. */
@media (prefers-reduced-motion: reduce) {
  html:not(.motion-full) { scroll-behavior: auto; }
  html:not(.motion-full) *, html:not(.motion-full) *::before, html:not(.motion-full) *::after { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; transition-property: opacity, color, background-color, border-color, text-decoration-color, box-shadow !important; transition-duration: 0.15s !important; transition-delay: 0s !important; }
  html:not(.motion-full) .reveal.is-out, html:not(.motion-full) .reveal.is-out > * { opacity: 0.001; transform: none; }   /* tonas in på plats (0,15 s), ingen förflyttning */
}
html.reduce { scroll-behavior: auto; }
html.reduce *, html.reduce *::before, html.reduce *::after { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; transition-property: opacity, color, background-color, border-color, text-decoration-color, box-shadow !important; transition-duration: 0.15s !important; transition-delay: 0s !important; }
html.reduce .reveal.is-out, html.reduce .reveal.is-out > * { opacity: 0.001; transform: none; }
.foot-motion { margin-top: 10px; justify-self: start; }
/* Tvingade färger (Windows kontrastläge): valt läge syns som en ram, inte bara som en färgyta; den glidande plattan döljs */
@media (forced-colors: active) {
  .seg button[aria-pressed="true"], .bs-tabs button[aria-pressed="true"], .pdf-fit[aria-pressed="true"] { outline: 2px solid CanvasText; outline-offset: -2px; }
  .seg-ind { display: none; }
  .nav-links a.is-active { text-decoration: underline; }
  .faq summary::after { background: CanvasText; }
}
@media (max-width: 430px) {
  .tg-head { flex-wrap: wrap; row-gap: 8px; }
  .tg-tag { order: 3; margin-left: 52px; }   /* märkningen på egen rad under namnet, i linje med texten */
}

/* ---------- Integritetspolicy (integritet.html): en läsvänlig textspalt under menyraden, sidan rullar som vanligt ---------- */
.pv { padding: calc(var(--nav-total) + clamp(28px, 6vh, 64px)) 0 clamp(56px, 10vh, 112px); }
.pv-doc { max-width: calc(46rem + 2 * var(--gutter)); margin-inline: 0; }
@media (min-width: 1281px) { .pv-doc { margin-left: calc((100% - 1280px) / 2); } }
.pv-doc .h2 { max-width: 20ch; font-size: min(var(--t-h2), 8vw); }   /* "Integritetspolicy" är ett långt ord: på 320 px ryms det på en rad i stället för att brytas mitt i */
.pv-updated { margin-top: 0.9rem; font-size: var(--t-small); color: var(--mist); }
.pv-doc h2 { margin-top: 2.2rem; font: 600 clamp(1.15rem, 1.6vw, 1.35rem)/1.3 var(--f-display); color: var(--ivory); text-wrap: balance; }
.pv-doc p:not(.lede):not(.pv-updated), .pv-doc li { max-width: 66ch; color: var(--ivory-2); line-height: 1.65; }
.pv-doc p:not(.lede):not(.pv-updated) { margin-top: 0.75rem; }
.pv-doc ul { display: grid; gap: 0.55rem; max-width: 66ch; margin: 0.75rem 0 0; padding-left: 1.2rem; }
.pv-doc li::marker { color: var(--gold); }
.pv-doc strong { color: var(--ivory); font-weight: 600; }
.pv-doc a { color: var(--ivory); text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--gold-dim); text-underline-offset: 0.22em; overflow-wrap: anywhere; transition: color var(--dur-ui), text-decoration-color var(--dur-ui); }
@media (hover: hover) and (pointer: fine) { .pv-doc a:hover { color: var(--gold-hi); text-decoration-color: currentColor; } }
.pv-doc a:active { color: var(--gold-hi); text-decoration-color: currentColor; }
@media (pointer: coarse) { .pv-doc a { padding-block: 14px; } }   /* länkar i löptext: större träffyta utan att flytta någon rad */