/* Fortune14 – resultat (v10)
   Resultatsidan (resultat.html), resultatsammanfattningen, e-boken och utskick/begrepp på startsidan.
   Lugna, solida ytor: inga rörliga element bakom tabeller och siffror. */

/* ---------- Märkningar (tag-test, tag-src och tag-warn: styles.css, två stilar) ---------- */
.badge { display: inline-block; padding: 2px 7px; border-radius: var(--r-pill); font: 600 var(--t-micro)/1.4 var(--f-body); letter-spacing: 0.04em; white-space: nowrap; }
.badge-corr { background: rgba(224, 177, 41, 0.14); color: var(--gold-hi); }
.badge-after { background: rgba(255, 255, 255, 0.08); color: var(--ivory-2); }   /* bokförd efter matchdagen: en upplysning, inget fel */
.pill.cashout { background: rgba(239, 234, 224, 0.1); color: var(--ivory-2); }
.pill.pending { background: rgba(174, 182, 200, 0.14); color: var(--zero); }
.rp-table .pill { font-size: var(--t-micro); }   /* resultatsidan: sidans golv (12 px), inte demons */
.rp-table .pill.win { background: rgba(224, 177, 41, 0.14); color: var(--gold-hi); }
.rp-table .pill.loss { background: rgba(240, 138, 115, 0.14); color: var(--neg); }
.rp-table .pill.void { background: rgba(174, 182, 200, 0.12); color: var(--zero); }
.pos { color: var(--gold-hi); }
.neg { color: var(--neg); }
.zero { color: var(--zero); }

/* ---------- Startsidan: resultatsammanfattning ---------- */
/* spaltsystemet (styles.css, :root): rubrik och ingress till vänster, kortet till höger; vänsterställt i alla bredder */
.section-res .wrap { display: grid; grid-template-columns: var(--split-media-led); gap: var(--split-gap); align-items: center; }
.res-card { width: min(100%, 44rem); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(20px, 3vw, 32px); box-shadow: none; }
@media (max-width: 340px) { .res-card { padding: 16px; } }   /* de smalaste telefonerna: tätare kort, så att väntebeskedet med länken ryms på 640 px och nyckeltalen får mer bredd */
.res-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; }
.res-title { font: 600 var(--t-ui)/1.3 var(--f-body); color: var(--ivory); }
.res-src { margin-top: 6px; font-size: var(--t-caption); line-height: 1.5; color: var(--mist); }
.res-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.res-kpi { display: grid; gap: 5px; padding: 14px 16px; border-radius: var(--r-lg); background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); min-width: 0; }
.res-kpi .k { font: 600 var(--t-label)/1.3 var(--f-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--mist); }
.res-kpi .v { font: 600 1.5rem/1.1 var(--f-display); color: var(--ivory); }
.res-kpi .s { font-size: var(--t-micro); color: var(--mist-2); }
.res-state { margin-top: 18px; padding: 16px 18px; border-radius: var(--r-lg); border: 1px dashed var(--line-strong); color: var(--ivory-2); font-size: var(--t-small); line-height: 1.55; }
.res-state.is-error { border-color: rgba(240, 138, 115, 0.45); }
.res-state.is-loading { color: var(--mist); }
.res-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 18px; }
.res-foot .note-text { margin: 0; font-size: var(--t-caption); }
.res-link { margin-top: 1.8rem; }
/* Låga desktopfönster (480 till 560 px höga): länken står närmare ingressen, så att avsnittet i vänteläget ryms på en skärm även
   där rubriken har sin största storlek (1920x480: 486 px utan detta) */
@media (min-width: 901px) and (max-height: 560px) { .res-link { margin-top: 1rem; } }
/* Vänteläge (kopplingen till BetSpread inte aktiverad): ingen reservation för siffror som inte visas; länken står kvar och leder till
   hur vi räknar (ui.js, setResLinks). Fel: ingen länk till en resultatsida som inte kan visa något */
.section-res.is-waiting .res-foot, .section-res.is-waiting .res-src, .section-res.is-error .res-link { display: none; }
/* Väntebeskedet är en lugn notering med en klocka, ingen ruta (samma stil på resultatsidan) */
.res-state.is-inactive { border: 0; padding: 0; display: flex; gap: 10px; align-items: flex-start; color: var(--ivory-2); }
.res-state.is-inactive::before, .rp-state.is-inactive::before { content: ""; flex: none; width: 16px; height: 16px; margin-top: 3px; background: var(--gold);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center / 16px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center / 16px no-repeat; }
/* Väntebeskedets andra stycke, i linje med texten efter klockan: visas bara på pekskärm, där tolvmånadersavsnittet är dolt i vänteläget (sist i filen) */
.res-wait-more { display: none; margin: 8px 0 0 26px; font-size: var(--t-small); line-height: 1.55; color: var(--ivory-2); }
.section-res.is-waiting .res-state.is-loading ~ .res-wait-more { display: none; }   /* sidan börjar i vänteläget: medan källan svarar finns inget "då" att hänvisa till */
.res-proj { margin-top: 14px; }   /* projektvalet i resultatkortet (ui.js), under rubrikraden */

/* ---------- Startsidan: e-boken – vektoromslag, skarpt i alla storlekar ---------- */
.book3d { position: relative; width: min(100%, 250px); aspect-ratio: 420 / 594; margin-inline: auto; perspective: 1400px; }
.book-cover { position: absolute; inset: 0; border-radius: 3px 8px 8px 3px; overflow: hidden; background: #0a1020; transform: rotateY(-13deg); transform-origin: left center; box-shadow: 0 34px 60px -26px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(224, 177, 41, 0.12), inset 5px 0 10px -6px rgba(0, 0, 0, 0.7); }
.book-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(255, 255, 255, 0.06), transparent 25%, transparent 75%, rgba(0, 0, 0, 0.18)); pointer-events: none; }
.book-svg { display: block; width: 100%; height: 100%; }
.book-pages { position: absolute; top: 5px; bottom: 5px; right: -9px; width: 12px; border-radius: 0 3px 3px 0; background: repeating-linear-gradient(90deg, #f1ede4 0 1px, #cfc9bc 1px 2px); transform: rotateY(-13deg) translateZ(-2px); transform-origin: left center; box-shadow: 4px 0 8px -4px rgba(0, 0, 0, 0.7); }
.bk-eyebrow { font: 600 13px var(--f-body); letter-spacing: 0.24em; text-transform: uppercase; fill: #c9b26a; }
.bk-title { font: 700 58px/1 var(--f-display); letter-spacing: -0.005em; fill: #f3efe6; }
.bk-sub { font: 500 18px var(--f-body); fill: #b9bccb; }
.book-cover, .book-pages { transition: transform 0.28s var(--ease-out); }
/* Lutningen följer samma rörelseval som resten av sidan: html.reduce stänger av, och ett uttryckligt "Full rörelse" (html.motion-full) vinner över systemets reduce. */
@media (hover: hover) and (pointer: fine) and (min-width: 901px) and (prefers-reduced-motion: no-preference) { html:not(.reduce) .book3d:hover .book-cover { transform: rotateY(-8deg); } html:not(.reduce) .book3d:hover .book-pages { transform: rotateY(-8deg) translateZ(-2px); } }
@media (hover: hover) and (pointer: fine) and (min-width: 901px) and (prefers-reduced-motion: reduce) { html.motion-full:not(.reduce) .book3d:hover .book-cover { transform: rotateY(-8deg); } html.motion-full:not(.reduce) .book3d:hover .book-pages { transform: rotateY(-8deg) translateZ(-2px); } }

.ebook { display: grid; grid-template-columns: var(--split-text-led); gap: var(--split-gap); align-items: center; }
.book-wrap { display: grid; justify-items: center; gap: 12px; }
#ebok .note-text + .btn { margin-top: 1.25rem; }

/* ---------- Startsidan: utskick – eget skärmläge: hela kompositionen i en vy, nästa sektion nedanför skärmkanten ---------- */
.flow-head { margin-bottom: clamp(18px, 2.6vh, 32px); }
.flow-head .lede { max-width: 40rem; margin-top: 0.7rem; }
/* utskicket som en sammanhängande sekvens: en panel, tre steg i ordning (ol), spelet i mitten får mest plats. Stegen är numrerade:
   en siffra i guldring före varje stegrubrik gör ordningen (förvarning, spel, bokföring) synlig med en blick */
.flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.3fr) minmax(0, 0.85fr); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; counter-reset: steg; }
.flow-step { position: relative; padding: clamp(18px, 2.4vw, 28px); counter-increment: steg; }
.flow-step + .flow-step { border-left: 1px solid var(--line); }
.flow-step h3 { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.6rem; align-items: start; font-size: 1.05rem; }   /* en bruten stegrubrik hänger kvar till höger om siffran */
.flow-step h3::before { content: counter(steg); display: grid; place-items: center; width: 1.625rem; height: 1.625rem; margin-top: -0.12em; border-radius: 50%; border: 1px solid var(--gold-dim); color: var(--gold-hi); font: 600 var(--t-caption)/1 var(--f-body); font-variant-numeric: tabular-nums; }
.flow-step p { margin-top: 8px; font-size: var(--t-small); color: var(--ivory-2); }

/* ---------- Resultatsidan ---------- */
html.rp-page { scroll-behavior: auto; }
.rp-bg { position: fixed; inset: 0; z-index: 0; background: radial-gradient(120% 70% at 70% -10%, rgba(38, 52, 96, 0.55), transparent 60%), radial-gradient(70% 50% at 10% 100%, rgba(224, 177, 41, 0.08), transparent 60%), var(--night); }
/* En rubrik per skärm (ägarbeslut 2026-10-03): varje avsnitt i main är en egen sida (styles.css, main > .section) och
   bläddras sidvis med mus och styrplatta (page.js). Avsnitten bär själva menyns höjd, så main har ingen egen luft.
   Spåret är minmax(0, 1fr): tabellernas minsta bredd får aldrig tvinga sidan bredare än skärmen; tabellerna rullar i sin egen behållare. */
.rp > .section { grid-template-columns: minmax(0, 1fr); }
.rp > .section > .wrap { min-width: 0; }
.rp-sec .wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.rp > .rp-hist-sec { align-content: start; }   /* historiken krymper när man söker: rubrik och sökfält står kvar överst i stället för att hoppa till mitten */
.rp-head .h2 { max-width: 26ch; }
.rp-src { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 16px; font-size: var(--t-caption); color: var(--mist); }
.rp-src b { color: var(--ivory-2); font-weight: 500; }
.rp-controls { display: grid; gap: 14px; margin-top: 22px; }
.rp-custom { display: flex; flex-wrap: wrap; align-items: end; gap: 10px 14px; }
.rp-custom label { display: grid; gap: 5px; font: 600 var(--t-micro)/1 var(--f-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--mist); }
.rp-custom select, .rp-custom input { min-height: 40px; padding: 0 10px; border-radius: var(--r-md); border: 1px solid var(--line-strong); background: var(--panel-solid); color: var(--ivory); font: 500 var(--t-small)/1 var(--f-body); color-scheme: dark; }
.rp-custom .btn { min-height: 40px; }
/* Projektvalet: en vanlig listruta med etikett (tangentbord, skärmläsare och telefonens egen väljare), samma form som månadsväljaren.
   Visas bara när källan har flera projekt; står först i kontrollerna, före periodvalet. */
.proj-pick { display: grid; gap: 5px; justify-self: start; max-width: 100%; }
.proj-pick-k { font: 600 var(--t-micro)/1 var(--f-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--mist); }
.proj-pick select { min-height: 40px; min-width: min(100%, 15rem); max-width: 100%; padding: 0 10px; border-radius: var(--r-md); border: 1px solid var(--line-strong); background: var(--panel-solid); color: var(--ivory); font: 600 var(--t-small)/1 var(--f-body); color-scheme: dark; cursor: pointer; text-overflow: ellipsis; }
.rp-proj-note { font-size: var(--t-caption); color: var(--mist); }
.rp-period-label { margin-top: 6px; font: 600 var(--t-ui)/1.4 var(--f-body); color: var(--ivory); }
/* Lägesrutan och varningen står i första sidan under periodvalet. Ytan är reserverad för lägesrutan, så att det centrerade
   innehållet inte flyttar sig (och knapparna inte glider under markören) när en period laddas eller saknar spel. */
.rp-status { display: grid; gap: 14px; margin-top: 22px; }
@media (min-width: 641px) { .rp-status { min-height: 124px; align-content: start; } }
.rp-panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(16px, 2.4vw, 24px); min-width: 0; }
.rp-panel-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-bottom: 14px; }
.rp-panel-head h2 { font: 600 1.25rem/1.3 var(--f-display); overflow-wrap: anywhere; }   /* stor text: ett ord som är bredare än panelen (Månadsöversikt) bryts i stället för att klippas */
.rp-panel-head .hint { font-size: var(--t-caption); color: var(--mist); }
.rp-state { padding: 34px 20px; text-align: center; border-radius: var(--radius); border: 1px dashed var(--line-strong); color: var(--ivory-2); line-height: 1.6; }
.rp-state.is-error { border-color: rgba(240, 138, 115, 0.5); }
.rp-state.is-loading { color: var(--mist); animation: rpLoadIn 0.2s ease-out 0.15s both; }   /* tonar in först efter en kort stund, så att snabba svar inte blinkar */
.rp-state .rp-retry { display: inline-flex; margin-top: 14px; }
.rp-noscript a { color: var(--ivory); text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--gold-dim); text-underline-offset: 0.22em; }   /* utan JavaScript (resultat.html): länkarna i beskedet syns som länkar */
/* vänteläget: notering med klocka (som på startsidan), vänsterställd, utan ruta; knapparna står under texten */
.rp-state.is-inactive { position: relative; border: 0; border-radius: 0; text-align: left; padding: 0 0 0 26px; }
.rp-state.is-inactive::before { position: absolute; left: 0; top: 0.3em; margin-top: 0; }
.rp-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.rp-acts .rp-retry { margin-top: 0; }
/* PDF-beskedet och länkarna när perioden byttes under väntan (results.js, pdfCarry): under lägesrutans text, som under knappen */
.rp-pdf-carry { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 12px; margin-top: 16px; }
.rp-pdf-carry .hint { flex-basis: 100%; font-size: var(--t-caption); color: var(--mist); }
.rp-pdf-carry .hint.is-error { color: var(--neg); }
.rp-pdf-carry .rp-pdf-links { justify-content: center; }
.rp-partial { margin: 0; padding: 12px 16px; 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); line-height: 1.5; }
.rp-partial .rp-retry { display: flex; width: max-content; margin-top: 10px; }   /* Försök igen: egen rad under beskedet */
.rp-form-error { flex-basis: 100%; margin: 4px 0 0; font-size: var(--t-caption); color: var(--neg); }
.rp-custom input[aria-invalid="true"] { border-color: var(--neg); box-shadow: 0 0 0 2px rgba(240, 138, 115, 0.25); }
.rp-more { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); padding: 0 14px; }
.rp-more > summary { cursor: pointer; padding: 11px 0; font: 600 var(--t-caption)/1.3 var(--f-body); color: var(--ivory-2); list-style: none; display: flex; align-items: center; gap: 8px; }
.rp-more > summary::-webkit-details-marker { display: none; }
.rp-more > summary::before { content: ""; width: 7px; height: 7px; border-right: 1.5px solid var(--gold); border-bottom: 1.5px solid var(--gold); transform: rotate(-45deg); transition: transform var(--dur-ui) var(--ease-out); }
.rp-more[open] > summary::before { transform: rotate(45deg); }
.rp-more[open] > summary { border-bottom: 1px solid var(--line); }
.rp-more .rp-custom { padding: 12px 0 4px; }
.rp-more .rp-custom + .rp-custom { padding-top: 6px; }
.rp-more .rp-form-error { padding-bottom: 12px; }
.rp-state .small { display: block; margin-top: 6px; font-size: var(--t-caption); color: var(--mist); }
.rp-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.rp-kpi { display: grid; gap: 6px; align-content: start; padding: 20px 22px; border-radius: var(--r-lg); background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); min-width: 0; }
.rp-kpi .k { font: 600 var(--t-label)/1.3 var(--f-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--mist); }
.rp-kpi .v { font: 600 clamp(1.6rem, 2.6vw, 2.25rem)/1.1 var(--f-display); color: var(--ivory); }   /* högst 36 px: med fem kort i rad rymmer kortet 172 px ("+15,06 u") */
.rp-kpi .s { font-size: var(--t-micro); line-height: 1.45; color: var(--mist-2); }
.rp-chart-box { height: clamp(300px, 52vh, 520px); }   /* grafen har en egen skärm: den får ta plats */
.rp-svg { display: block; width: 100%; height: 100%; overflow: visible; font-family: var(--f-body); }
.rp-svg .grid { stroke: rgba(239, 234, 224, 0.08); }
.rp-svg .zero { stroke: rgba(239, 234, 224, 0.28); }
.rp-svg .tick { fill: var(--mist); font-size: var(--t-tiny); font-variant-numeric: tabular-nums; }
.rp-svg .curve { fill: none; stroke: var(--gold); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.rp-svg .curve.neg { stroke: var(--neg); }
.rp-svg .area { fill: rgba(224, 177, 41, 0.14); }
.rp-svg .area.neg { fill: rgba(240, 138, 115, 0.14); }
.rp-svg .end { fill: var(--gold-hi); }
.rp-svg .end.neg { fill: var(--neg); }
.rp-svg .end-label { fill: var(--ivory); font-size: var(--t-micro); font-weight: 600; font-variant-numeric: tabular-nums; paint-order: stroke; stroke: var(--panel-solid); stroke-width: 4px; stroke-linejoin: round; }
.rp-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rp-table { width: 100%; border-collapse: collapse; font-size: var(--t-caption); }
.rp-table th { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); font: 600 var(--t-micro)/1.2 var(--f-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--mist); white-space: nowrap; }
.rp-table td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.rp-table tr:last-child td { border-bottom: 0; }
.rp-table .r { text-align: right; }
.rp-table .num { font-variant-numeric: tabular-nums; }
.rp-table .sub { display: block; margin-top: 2px; font-size: var(--t-micro); color: var(--mist); }
.rp-table .flags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.rp-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.rp-filters input, .rp-filters select { min-height: 38px; padding: 0 10px; border-radius: var(--r-md); border: 1px solid var(--line-strong); background: rgba(255, 255, 255, 0.03); color: var(--ivory); font: 500 var(--t-caption)/1 var(--f-body); color-scheme: dark; }
.rp-filters input[type="search"] { flex: 1 1 220px; min-width: 0; }
.rp-filters select { flex: 1 1 auto; min-width: 0; }   /* minst så bred som sitt längsta alternativ ("Återbetald (void)", "Bet365 (0 spel)"): ryms de inte på raden bryts den, i stället för att texten klipps */
.rp-filters label.chk { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-caption); color: var(--ivory-2); }
.rp-empty .btn { margin: 4px 0 4px 10px; vertical-align: middle; }   /* Rensa filter i den tomma raden */
.rp-pager { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 14px; font-size: var(--t-caption); color: var(--mist); }
.rp-pager button { min-height: 36px; padding: 0 12px; border-radius: var(--r-md); border: 1px solid var(--line-strong); background: transparent; color: var(--ivory-2); font: 600 var(--t-caption)/1 var(--f-body); cursor: pointer; transition: border-color var(--dur-ui), color var(--dur-ui), transform var(--dur-press) var(--ease-out); }
.rp-pager button:disabled { opacity: 0.4; cursor: default; }
.rp-pager button:not(:disabled):active { transform: scale(0.97); }
.rp-more > summary:active { color: var(--ivory); }
.rp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.rp-actions .hint { font-size: var(--t-caption); color: var(--mist); }
.rp-actions .hint.is-error { color: var(--neg); }
.rp-actions .btn[aria-disabled="true"] { opacity: 0.6; cursor: progress; }   /* PDF-knappen arbetar: fortfarande fokuserbar */
.rp-pdf-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; flex-basis: 100%; }   /* länkarna till den färdiga PDF:en: egen rad under knappen */
.rp-pdf-links .small { flex-basis: 100%; font-size: var(--t-caption); color: var(--mist); }
.rp-rules .h2 { font-size: clamp(1.35rem, 1.9vw, 1.75rem); max-width: 46ch; }   /* underordnad sidans h1; en rad på bred skärm, så att reglerna ryms på avsnittets skärm */
.rp-rules .sec-head { margin-bottom: 0; }
.rules-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 28px; margin-top: 20px; }
.rules-grid div { padding: 12px 16px; border-radius: var(--r-lg); background: var(--panel); border: 1px solid var(--line); }
.rules-grid dt { font: 600 0.98rem/1.3 var(--f-display); color: var(--ivory); }
.rules-grid dd { margin-top: 4px; font-size: var(--t-small); line-height: 1.55; color: var(--ivory-2); }
.rp-diff { margin-top: 18px; max-width: 64rem; font-size: var(--t-small); color: var(--mist); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (max-width: 1100px) { .rp-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .section-res .wrap, .ebook, .rules-grid { grid-template-columns: minmax(0, 1fr); }
  .section-res .wrap { gap: clamp(24px, 4vh, 40px); }   /* staplat: radavståndet följer höjden, så att kortet med siffror ryms på skärmen */
  .ebook { gap: clamp(28px, 5vw, 80px); }
  .flow { grid-template-columns: minmax(0, 1fr); }
  .flow-step + .flow-step { border-left: 0; border-top: 1px solid var(--line); }
  .rp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rp-kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }   /* ett ensamt sista kort tar hela raden */
  .rp-table .col-md { display: none; }
  .book3d { width: min(100%, 210px); }
  .book-cover, .book-pages { transform: none; }
  .book-pages { right: -6px; width: 8px; }
}
@media (max-height: 820px) and (min-width: 1100px) {
  .flow-head { margin-bottom: 16px; }
  .flow-step { padding: 18px 20px; }
  .flow-step h3 { font-size: 1rem; }
}
@media (pointer: coarse) {
  .rp-filters input, .rp-filters select, .rp-custom select, .rp-custom input, .rp-custom .btn, .rp-pager button, .rp-actions .btn { min-height: 44px; }
  .rp-filters input, .rp-filters select, .rp-custom select, .rp-custom input { font-size: var(--t-body); }   /* 16 px: iOS zoomar inte in fältet */
  .rp-more > summary { min-height: 44px; }
  .proj-pick select { min-height: 44px; font-size: var(--t-body); }
}
@media (max-width: 640px) {
  .proj-pick { justify-self: stretch; }
  .proj-pick select { width: 100%; }
  .rp-filters { gap: 8px; }
  .rp-filters input[type="search"] { flex-basis: 100%; }
  /* spelhistoriken som kort: datum och resultat överst, match under, odds/insats/status/spelbolag som småtext – inget sidscroll */
  .rp-hist thead { display: none; }
  .rp-hist, .rp-hist tbody { display: block; }
  .rp-hist tbody tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding: 12px 0; border-top: 1px solid var(--line); }
  .rp-hist tbody tr:first-child { border-top: 0; }
  .rp-hist td { display: block; padding: 0; border: 0; min-width: 0; }
  /* datum, sport och liga och projekt på en rad när de ryms; en del som bryts börjar i cellens vänsterkant, inte indragen under datumet */
  .rp-hist td.c-date { order: 1; flex: 1 1 0; font-size: var(--t-caption); display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; }
  .rp-hist td.c-date .sub { display: block; margin-left: 0; min-width: 0; }
  .rp-hist td.c-res { order: 2; flex: 0 0 auto; margin-left: auto; font-size: var(--t-ui); font-weight: 700; text-align: right; }
  .rp-hist td.c-match { order: 3; flex: 1 1 100%; font-size: var(--t-small); overflow-wrap: anywhere; }
  .rp-hist td.c-book, .rp-hist td.c-odds, .rp-hist td.c-stake, .rp-hist td.c-status { order: 4; flex: 0 0 auto; font-size: var(--t-micro); color: var(--mist); }
  .rp-hist td.c-book { display: block; }
  .rp-hist td.c-booked { order: 5; flex: 1 1 100%; font-size: var(--t-micro); color: var(--mist-2); display: block; }
  .rp-hist td.c-booked .sub { display: block; margin-left: 0; }   /* publiceringstiden på egen rad, i cellens vänsterkant */
  .rp-hist td[data-th]::before { content: attr(data-th) " "; text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--t-micro); color: var(--mist-2); }
  .rp-hist td.c-match .flags { display: block; margin-top: 4px; }
  .rp-empty { display: block; padding: 14px 0; }
  .periods { width: 100%; }
  .periods button { flex: 1 1 45%; }
  .rp-custom label { flex: 1 1 40%; }
  .rp-custom .btn { flex: 1 1 100%; }
  .rp-chart-box { height: 200px; }
  .rp-table { font-size: var(--t-caption); }
  .rp-table .col-sm { display: none; }
  .res-kpis { grid-template-columns: 1fr 1fr; }
  .rp-kpi .s, .res-kpi .s { text-wrap: pretty; }   /* förklaringsraden under ett nyckeltal lämnar inte ett ensamt ord på sista raden */
}
@media print {
  .nav, .menu, .rp-bg, .rp-actions, .rp-filters, .rp-pager, .foot, .rp-controls { display: none !important; }
  .rp > .section { min-height: 0; padding-block: 12px; }
  .rp-panel, .rules-grid div { border-color: #999; background: #fff; color: #000; }
}
/* Månadsöversikten: tal, procenttecken och etiketter bryts aldrig isär; på telefon får etiketterna korta former i stället (sep 2025, Summa) */
.rp-table td.num, .rp-table th.r { white-space: nowrap; }
.rp-table td:first-child { min-width: 0; white-space: nowrap; }
/* Månadsnamn och summaradens etikett: hela på breda skärmar, korta på telefon (sep 2025, Summa), aldrig brutna över två rader */
.rp-table .m-short { display: none; }
/* Månadsöversikten listar också månader utan spel: tätare rader, så att en säsong ryms på avsnittets egen skärm (en rubrik per skärm) */
#manader .rp-table td { padding-block: 7px; }
@media (max-width: 640px) { .rp-table .m-long { display: none; } .rp-table .m-short { display: inline; } }
/* Smala telefoner: tätare kolumner och etiketten i linje med rubriken, så att månadsöversikten ryms utan sidrullning ned till 320 px */
@media (max-width: 400px) {
  #manader .rp-table th, #manader .rp-table td { padding-inline: 6px; }
  #manader .rp-table tr > :first-child { padding-left: 0; }
  #manader .rp-table tr > :last-child { padding-right: 0; }
}
/* Spelhistoriken: datum och bokföringstid hålls hela, men raden får brytas – korten på mobil rullar aldrig i sidled */
.rp-hist td.c-date, .rp-hist td.c-booked { white-space: normal; }
.rp-hist .c-date .sub, .rp-hist .c-booked .sub { overflow-wrap: anywhere; }
.rp-table .nw { white-space: nowrap; }
.rp-hist td.c-date { min-width: 8.5em; }
/* Spelbolag och bokföringstid under datumet där deras egna kolumner är dolda (641–1099 px); telefonens kort visar dem i egna rader.
   Alla åtta kolumner behöver drygt 900 px tabellbredd: upp till 1099 px (även liggande telefon, 932x430) gled tabellen annars i sidled
   med den sista kolumnen avklippt. */
.rp-hist td.c-date .sub-md { display: none; }
@media (min-width: 641px) and (max-width: 1099px) { .rp-hist td.c-date .sub-md { display: block; } .rp-hist .col-md { display: none; } }
/* Nyckeltal: etiketterna balanseras och värdena står på samma höjd i varje rad (subgrid; äldre webbläsare behåller dagens layout) */
.res-kpi .k, .rp-kpi .k { text-wrap: balance; }
.res-kpi, .rp-kpi { grid-row: span 3; grid-template-rows: subgrid; }
/* Nyckeltalens värden: enheten hålls ihop med talet, långa värden stegas ned i storlek. Stegen räknar tecken; ett värde som ändå inte
   ryms i sitt kort (bredare siffror, ett annat typsnitt) krymps därefter efter sin verkliga bredd (results-core.js, fitKpiValues) */
.rp-kpi .v.nw, .res-kpi .v.nw { white-space: nowrap; }
.res-kpi .v.is-long { font-size: clamp(1.15rem, 1.6vw, 1.45rem); }
.res-kpi .v.is-xlong { font-size: clamp(1rem, 1.3vw, 1.2rem); }
.rp-kpi .v.is-long { font-size: clamp(1.35rem, 2.1vw, 2rem); }
.rp-kpi .v.is-xlong { font-size: clamp(1.15rem, 1.7vw, 1.6rem); }
.rp-kpi .v .unit, .res-kpi .v .unit { font-size: max(12px, 0.62em); }   /* aldrig under 12 px, även i de nedstegade storlekarna */
/* Telefon: värdet bryts aldrig och styr därför kortets spår ("+15,06 u" är 117 px brett i 25,6 px, kortet rymmer 74 till 109 px
   på 320 till 390 px breda skärmar). Tätare kortluft och en storlek som följer skärmens bredd, så att värdet ryms i kortet. */
@media (max-width: 430px) {
  .rp-kpi { padding: 16px 14px; }
  .rp-kpi .v { font-size: clamp(1.25rem, 6.4vw, 1.6rem); }
  .rp-kpi .v.is-long { font-size: clamp(1.1rem, 5.4vw, 1.35rem); }
  .rp-kpi .v.is-xlong { font-size: clamp(1rem, 4.6vw, 1.15rem); }
  .res-kpi { padding: 12px; }
  .res-kpi .v { font-size: clamp(1.2rem, 6vw, 1.5rem); }
  .res-kpi .v.is-long { font-size: clamp(1.05rem, 5vw, 1.45rem); }
  .res-kpi .v.is-xlong { font-size: clamp(1rem, 4.4vw, 1.2rem); }
}
/* De smalaste telefonerna (320 till 359 px): tresiffriga par ("380 / 558") och långa resultat ("+114,92 u") får plats i kortet.
   Smalare kortluft och de långa värdena ett steg mindre; texten stannar på minst 12 px. */
@media (max-width: 359px) {
  .rp-kpi { padding: 14px 10px; }
  .rp-kpi .v.is-long { font-size: 1.05rem; }
  .rp-kpi .v.is-xlong { font-size: 0.94rem; }
  .res-kpi { padding: 12px 9px; }
  .res-kpi .v.is-xlong { font-size: 0.94rem; }
}
/* Resultatpanelerna: samma 16 px-rytm som resten av sidan; periodens summa läses som en summa */
[data-results] { transition: opacity var(--dur-ui) var(--ease-out); }
@starting-style { [data-results] { opacity: 0; } }
.rp-table tr.total td { font-weight: 600; background: rgba(255, 255, 255, 0.025); border-top: 1px solid var(--line-strong); }
.rp-table tr.total td:not(.pos, .neg, .zero) { color: var(--ivory); }   /* resultat och ROI behåller guld/korall även i summaraden */
@keyframes rpLoadIn { from { opacity: 0; } }

/* ---------- Pekskärm: naturlig scroll, avsnitten följer innehållets höjd ----------
   Gäller där page.js inte bläddrar sidvis (allt utom mus och styrplatta). Blocket står sist i filen: regeln "en rubrik per skärm"
   (styles.css, main > .section) har samma tyngd och gäller annars. Hjälteytan och avslutet är inte .section och är fortfarande
   hela skärmar; myntöversikten med riktiga resultat behåller sin enskärmskomposition (.stack-sticky). */
@media (hover: none), (pointer: coarse) {
  :root { --s-touch: clamp(40px, 14vw, 64px); }   /* luften över och under ett avsnitt: följer bredden, inte höjden, så att avsnitten står still när adressfält eller tangentbord ändrar höjden */
  main > .section { min-height: 0; padding-block: var(--s-touch); }
  main > .section:first-child { padding-top: calc(var(--nav-total) + clamp(20px, 4vh, 48px)); }   /* resultatsidans första avsnitt börjar under menyn */
  main > .section[id] { scroll-margin-top: calc(var(--nav-total) + 16px - var(--s-touch)); }      /* ankarlänk: rubriken 16 px under menyn */
  /* Väntelägena som ett block: tolvmånadersavsnittet döljs tills riktiga resultat finns, och resultatkortet säger att
     månadsöversikten kommer då (.res-wait-more) */
  .stack-sec.is-waiting, .stack-sec.is-empty { display: none; }   /* ett valt projekt utan spel: resultatkortet ovanför bär beskedet */
  .section-res.is-waiting .res-wait-more { display: block; }
  .section-res.is-waiting .res-link { margin-top: 1.1rem; }
  /* Resultatsidan: periodval, nyckeltal, diagram, månader och historik är en sammanhängande rapport, 16 px mellan panelerna.
     Första avsnittets innehåll står mot överkanten, så att det inte flyttar sig när lägesrutan byts mot resultat. Medan en period
     laddas (main.is-loading, results.js) fyller avsnittet skärmen: reglerna under det står då utanför bild och hoppar inte. */
  .rp > .rp-head { padding-bottom: 8px; align-content: start; }
  .rp > .rp-sec { padding-block: 8px; }
  .rp > .rp-sec[id] { scroll-margin-top: calc(var(--nav-total) + 8px); }
  .rp > .rp-hist-sec { padding-bottom: var(--s-touch); }
  .rp.is-loading > .rp-head { min-height: 100vh; min-height: 100svh; }
}