/* Pluggis – base.css (kärnbyggaren). Reset, layout, komponenternas box-modell och tillstånd.
   Bara var(--token) för färg och typsnitt (temafilerna definierar dem, DESIGN 1.8/1.9).
   Undantag (funktion, inte stil): temaväljarens neutrala färger (DESIGN 2.2) eftersom inget tema
   finns innan eleven valt, [data-theme-only] och [data-combo-ui="hide"]. */

/* ---------------------------------------------------------------- Gemensamma tokens */
:root {
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; --sp-9: 56px;
  --gutter: 16px;
  --maxw: 75rem;
  --read-maxw: 47.5rem;
  --z-bg: 0; --z-under: 1; --z-glow: 2; --z-app: 3; --z-hud: 30; --z-callout: 31; --z-over: 40; --z-toast: 50;
}
@media (min-width: 37.5em) { :root { --gutter: 24px; } }
@media (min-width: 62.5em) { :root { --gutter: 32px; } }
@media (min-width: 87.5em) { :root { --maxw: 80rem; } }

:root[data-readfont="atkinson"] {
  --ff-read: "Atkinson Hyperlegible Next", ui-sans-serif, system-ui, sans-serif;
  --fw-opt: 600;
  --fw-q: 700;
}

/* ---------------------------------------------------------------- Reset */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  background: var(--c-bg);
  color: var(--c-text);
  font: 400 var(--fs-body)/var(--lh-body) var(--ff-ui);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
html[data-screen="theme"] body { background: #17141F; color: #F5F3FA; color-scheme: dark; }
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; }
img, svg { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: var(--focus-ring, 3px solid currentColor); outline-offset: var(--focus-offset, 3px); }
[tabindex="-1"]:focus:not(:focus-visible), h1[tabindex="-1"]:focus, h2[tabindex="-1"]:focus, main:focus { outline: none; }
::selection { background: rgb(var(--rgb-progress, 56 225 255) / .35); }
.num { font-variant-numeric: tabular-nums; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.ic { width: 24px; height: 24px; flex: none; fill: currentColor; }
[data-slot]:empty { display: none; }
.noscript { padding: 24px; text-align: center; }
/* ui/fit.js: mätelement för ordbredder, och knappetiketter på en rad medan en knappgrupps layout mäts */
.fit-measurer { position: absolute; left: -99999px; top: 0; visibility: hidden; white-space: nowrap; pointer-events: none; }
.fit-rem { position: absolute; left: -99999px; top: 0; width: 10rem; height: 1px; visibility: hidden; pointer-events: none; }
.fit-measuring .btn, .fit-measuring .btn * { white-space: nowrap !important; }

/* ---------------------------------------------------------------- Lager (DESIGN 1.6) */
.fx-bg, .fx-glow { position: fixed; inset: 0; pointer-events: none; }
.fx-bg { z-index: var(--z-bg); }
canvas.fx-under, canvas.fx-over { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
canvas.fx-under { z-index: var(--z-under); }
.fx-glow { z-index: var(--z-glow); }
.fx-edge, .fx-flash { position: absolute; inset: 0; opacity: 0; }
canvas.fx-over { z-index: var(--z-over); }
.shell { position: relative; z-index: var(--z-app); min-height: 100dvh; overflow-x: clip; }
[data-read] { position: relative; z-index: 1; }

.skip-link {
  position: absolute; left: 8px; top: -120px; z-index: 100; padding: 10px 14px;
  background: var(--c-surface); color: var(--c-text); border-radius: 8px; font-weight: 700;
}
.skip-link:focus { top: 8px; }

.offline-bar, .storage-warn {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--gutter); font-size: var(--fs-sm); font-weight: 600;
  background: var(--c-warn-soft); color: var(--c-text); border-bottom: var(--bw-ui) solid var(--c-warn);
}
.offline-bar .ic, .storage-warn .ic { width: 20px; height: 20px; }
.storage-warn { border: var(--bw-ui) solid var(--c-warn); border-radius: var(--r-opt); padding: var(--sp-3); }

/* ---------------------------------------------------------------- Skärmar */
.screens { display: block; }
.screen {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--sp-4) var(--gutter) calc(var(--sp-9) + env(safe-area-inset-bottom));
  animation: screen-in 260ms var(--e-out, ease-out) backwards;
}
/* 600–999 px: en kolumn, max 720 px innehåll centrerat (DESIGN 10). Skärmar med egna mått (Öva,
   temaväljaren, Flashcards, Om) sätter max-width längre ned med samma specificitet och vinner. */
@media (min-width: 37.5em) and (max-width: 62.49em) { .screen { max-width: calc(45rem + 2 * var(--gutter)); } }
@keyframes screen-in { from { opacity: 0; transform: translateY(12px); } }

.screen-head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); min-height: var(--icon-btn); }
/* Ordbrytning: inga avstavningar (hyphens: auto delar vanliga ord i onödan) och ingen overflow-wrap: anywhere.
   body har overflow-wrap: break-word, som bara bryter ett ord som inte ryms på en egen rad (sista utväg).
   Flex- och grid-barn med text får min-width: 0, annars blir de bredare än sin förälder. */
.screen-head h1 { font: 800 var(--fs-h1)/1.1 var(--ff-display); min-width: 0; }

h1 { font: 800 var(--fs-h1)/1.1 var(--ff-display); }
h2 { font: 800 1.125rem/1.25 var(--ff-ui); }
h3 { font: 700 var(--fs-body)/1.3 var(--ff-ui); }

.label, .xpbar-label, .q-count, .load-kicker, .res-kicker, .share-kicker, .fc-label, .level-badge-label, .stat-title {
  font: 700 var(--fs-label)/1.2 var(--ff-ui);
  text-transform: var(--label-transform, none);
  letter-spacing: var(--label-spacing, 0);
  color: var(--c-text-2);
}

/* ---------------------------------------------------------------- Appbar (3.1) */
.appbar {
  display: flex; align-items: center; gap: var(--sp-3);
  height: calc(64px + env(safe-area-inset-top));
  padding: calc(12px + env(safe-area-inset-top)) var(--gutter) 12px;
  max-width: var(--maxw); margin: 0 auto;
}
.logo { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 44px; text-decoration: none; color: var(--c-text); }
.logo-mark { width: 32px; height: 32px; }
.logo-word { font: 800 24px/1 var(--ff-display); text-transform: lowercase; }
.logo { flex: none; }
.appbar-stats { display: flex; gap: var(--sp-2); margin-left: auto; }
.appbar-settings { flex: none; }
/* Ryms inte raden (stora tal, stor text, 400 % zoom) komprimerar app.js den stegvis via data-fit:
   "tight" tätare chips, "logo" döljer logotexten, "xp" kortar XP-talet, "wrap" ger siffrorna en egen rad. */
.appbar[data-fit~="tight"] { gap: var(--sp-2); }
.appbar[data-fit~="tight"] .chip { gap: 4px; padding-left: 7px; padding-right: 7px; }
.appbar[data-fit~="logo"] .logo-word { display: none; }
.appbar[data-fit~="wrap"] { flex-wrap: wrap; height: auto; min-height: calc(64px + env(safe-area-inset-top)); row-gap: var(--sp-2); }
.appbar[data-fit~="wrap"] .appbar-settings { margin-left: auto; }
.appbar[data-fit~="wrap"] .appbar-stats { order: 3; flex: 1 0 100%; flex-wrap: wrap; margin-left: 0; }

/* ---------------------------------------------------------------- Knappar (3.0) */
/* Lodrät padding: vid stor text (eller en etikett på två rader) ligger texten aldrig mot kanten eller
   under Godispops glansstreck (temat sätter större padding upptill och nedtill, se theme-godispop.css). */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--btn-h); padding: 8px 20px;
  border: var(--bw-ui) solid transparent; border-radius: var(--r-btn);
  font: 700 1.0625rem/1.15 var(--ff-btn);
  text-decoration: none; text-align: center; cursor: pointer;
  -webkit-tap-highlight-color: transparent; user-select: none;
  transition: transform var(--d-press) var(--e-std), background-color var(--d-fast), border-color var(--d-fast), box-shadow var(--d-fast), color var(--d-fast);
}
.btn .ic { width: 22px; height: 22px; }
.btn:active { transform: var(--press-transform); }
@media (hover: hover) { .btn:hover { transform: var(--hover-transform); } }
.btn-primary { background: var(--c-primary); color: var(--c-on-primary); box-shadow: var(--sh-btn); }
@media (hover: hover) { .btn-primary:hover { box-shadow: var(--sh-btn-hover); } }
.btn-primary:active { box-shadow: var(--sh-btn-press); }
.btn-secondary { background: var(--c-surface); color: var(--c-text); border-color: var(--c-line-strong); }
.btn-ghost { background: transparent; color: var(--c-text-2); border-color: var(--c-line); }
.btn-review { background: var(--c-progress-soft); color: var(--c-text); border-color: var(--c-progress); }
.btn-danger { color: var(--c-wrong-ink); border-color: var(--c-wrong); }
.btn-lg { min-height: var(--btn-h-lg); font-size: 1.1875rem; padding: 8px 24px; }
.btn-sm { min-height: var(--btn-h-sm); padding: 6px 14px; font-size: var(--fs-sm); }
.btn-block { display: flex; width: 100%; }
.btn[aria-disabled="true"] { opacity: .62; cursor: not-allowed; transform: none; }
.btn-sub { font: 600 var(--fs-sm)/1.2 var(--ff-ui); margin-left: auto; } /* full textfärg: opacitet gav < 4,5:1 */

.icon-btn {
  display: inline-grid; place-items: center; flex: none;
  width: var(--icon-btn); height: var(--icon-btn); padding: 0;
  background: var(--c-surface); color: var(--c-text);
  border: var(--bw-card) solid var(--c-line); border-radius: var(--r-btn);
  text-decoration: none; cursor: pointer;
  transition: border-color var(--d-fast), background-color var(--d-fast), transform var(--d-press);
}
.icon-btn:active { transform: var(--press-transform); }
@media (hover: hover) { .icon-btn:hover { border-color: var(--c-line-strong); } }
/* Hover-lyftet (translateY(-2px): quizraderna, och i Godispop knappar, alternativ och Skapa-knappen)
   flyttar elementet bort från pekaren när den vilar vid underkanten: :hover släpper, elementet sjunker
   tillbaka, får :hover igen … och flimrar (varje bildruta med Mindre rörelse, där transform inte har någon
   övergång). En osynlig remsa under elementet medan det är hovrat håller kvar träffytan där elementet nyss
   låg. Elementet är position: relative; Godispops knappar m.fl. får samma remsa i temafilen. */
@media (hover: hover) {
  .quiz-link:hover::after { content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 8px; }
}
.icon-btn[aria-pressed="true"] { border-color: var(--c-progress); }

/* ---------------------------------------------------------------- Chips och pills */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 28px; padding: 2px 10px;
  border: var(--bw-ui) solid var(--c-line); border-radius: var(--r-chip);
  background: var(--c-surface); color: var(--c-text);
  font: var(--fw-num, 800) .9375rem/1.1 var(--ff-num); white-space: nowrap;
}
.chip .ic { width: 18px; height: 18px; }
.chip-xp .ic { color: var(--c-xp); }
.chip-streak .ic { color: var(--c-streak); }
.chip-streak[data-active="false"] .ic { color: var(--c-text-3); }
.chip-combo .ic { color: var(--c-combo); }
.chip-level .ic { color: var(--c-level); }
.chip-progress .ic { color: var(--c-progress); }
.chip-correct { border-color: var(--c-correct); color: var(--c-text); }
.chip-wrong { border-color: var(--c-wrong); }
.appbar .chip { min-height: 36px; }

.pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: var(--r-chip);
  font: 700 var(--fs-xs)/1.2 var(--ff-ui);
  background: var(--c-surface-3); color: var(--c-text); white-space: nowrap;
}
.pill .ic { width: 14px; height: 14px; }
.pill-retry { background: var(--c-progress-soft); box-shadow: inset 0 0 0 1px var(--c-progress); }
.pill-new { background: var(--c-level); color: var(--c-on-primary); }
.pill-opt { background: transparent; box-shadow: inset 0 0 0 1px var(--c-line); color: var(--c-text-2); }
.pill-mastered { background: transparent; box-shadow: inset 0 0 0 1px var(--c-level); }
.pill-mastered .ic { color: var(--c-level); }
.pill-extra { background: transparent; box-shadow: inset 0 0 0 1px var(--c-line-strong); }

.kbd {
  display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; margin-left: 6px;
  border: 1px solid currentColor; border-radius: 6px; font: 700 var(--fs-xs)/1 var(--ff-ui);
}
.keys-card .kbd { margin: 0 2px; }
.kbd-only { display: none !important; }
@media (hover: hover) and (pointer: fine) {
  span.kbd-only { display: inline !important; }
  kbd.kbd-only { display: inline-grid !important; }
  section.kbd-only { display: block !important; }
}

/* ---------------------------------------------------------------- Kort, rubriker */
.card {
  background: var(--c-surface);
  border: var(--bw-card) solid var(--c-line);
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
  padding: var(--sp-4);
}
@media (min-width: 62.5em) { .card { padding: var(--sp-5); } }
.section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px var(--sp-3); margin-bottom: var(--sp-3); }
.section-head > h2 { min-width: 0; }
.section-meta { font-size: var(--fs-sm); color: var(--c-text-2); font-weight: 600; }

/* ---------------------------------------------------------------- Formulär */
.textarea, .input {
  width: 100%;
  background: var(--c-surface); color: var(--c-text);
  border: var(--bw-ui) solid var(--c-line-strong); border-radius: var(--r-opt);
  font: 400 var(--fs-body)/1.5 var(--ff-read);
  padding: 12px 14px;
}
.textarea { min-height: 220px; resize: vertical; }
.input { min-height: 48px; }
.textarea::placeholder, .input::placeholder { color: var(--c-text-3); opacity: 1; }
.textarea[aria-invalid="true"], .input[aria-invalid="true"] { border-color: var(--c-wrong); }

.switch { position: relative; display: inline-flex; align-items: center; min-width: 52px; min-height: 44px; flex: none; cursor: pointer; }
.switch-input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.switch-track {
  display: flex; align-items: center; width: 52px; height: 32px; padding: 2px;
  background: var(--c-surface-3); border: var(--bw-ui) solid var(--c-line-strong); border-radius: 999px;
  transition: background-color var(--d-fast), border-color var(--d-fast);
}
.switch-thumb { width: 24px; height: 24px; border-radius: 50%; background: var(--c-text-2); transition: transform var(--d-fast) var(--e-std), background-color var(--d-fast); }
.switch-input:checked + .switch-track { background: var(--c-correct); border-color: var(--c-correct); }
.switch-input:checked + .switch-track .switch-thumb { transform: translateX(calc(52px - 2 * var(--bw-ui) - 4px - 24px)); background: var(--c-on-correct); }
.switch-input:focus-visible + .switch-track { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.switch-input[aria-disabled="true"] + .switch-track { opacity: .7; }

/* Segmenten står på en rad och delar bredden lika. Ryms inte alla tre etiketterna ("30 frågor") på en rad
   bredvid varandra – stor text på smal skärm, 400 % zoom – staplas de under varandra i stället för att
   radbrytas eller gå utanför kortet (flex-basis-växeln: negativ = 0 = en rad, stor = en knapp per rad).
   Gränsen har en del i em (texten, växer med textstorleken) och en i px (padding och mellanrum). */
.segmented {
  display: flex; flex-wrap: wrap; gap: 4px; padding: 4px;
  background: var(--c-surface-3); border-radius: var(--r-btn);
}
/* Vertikal luft: vid stor text bryts "20 frågor" på två rader, och texten ska då ligga en bit innanför
   den valda knappens kant/ram, inte mot den. */
.segmented button {
  flex: 1 1 calc((13.2em + 32px - 100%) * 999); /* 3 × ("30 frågor" ≈ 4,3em + 8 px padding) + 2 × 4 px mellanrum */
  min-height: 44px; padding: 6px 4px; border: 0; border-radius: var(--r-btn); background: transparent; color: var(--c-text);
  font: 700 var(--fs-sm)/1.2 var(--ff-ui);
}
.segmented button[aria-checked="true"] { background: var(--c-surface); box-shadow: 0 0 0 var(--bw-ui) var(--c-line-strong); }

/* ---------------------------------------------------------------- Ring och staplar */
/* Rutor med text (ring, nivåmärke, veckoprickar, poängring) har mått i rem: de växer med webbläsarens
   textstorlek, så att siffror och etiketter aldrig sticker ut ur dem (WCAG 1.4.4). 1rem = 16 px vid 100 %. */
.ring { position: relative; width: 4rem; height: 4rem; flex: none; }
.ring-svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.ring-track, .ring-fill { fill: none; stroke-width: 7; }
.ring-track { stroke: var(--c-surface-3); }
.ring-fill {
  stroke: var(--c-progress); stroke-linecap: butt;
  stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p, 0) * 100);
  transition: stroke-dashoffset var(--d-hero) var(--e-out);
}
.ring[data-done="true"] .ring-fill { stroke: var(--c-correct); }
.ring-txt { position: absolute; inset: 0; display: grid; place-items: center; font: var(--fw-num, 800) .9375rem/1 var(--ff-num); }

.bar { position: relative; display: block; height: 10px; border-radius: 999px; background: var(--c-surface-3); overflow: hidden; }
.bar-fill {
  display: block; height: 100%; width: calc(var(--p, 0) * 100%);
  background: var(--c-progress); border-radius: inherit;
  transition: width var(--d-hero) var(--e-out);
}
.bar-xp .bar-fill, .bar-level .bar-fill { background: var(--c-xp); }
.bar-mastery .bar-fill { background: var(--c-progress); }
.bar.is-reset .bar-fill { transition: none; }
.bar-ghost { position: absolute; inset: 0 auto 0 0; width: calc(var(--p0, 0) * 100%); background: var(--c-line-strong); opacity: .45; border-radius: inherit; }

/* ---------------------------------------------------------------- Nivå, monogram, märken */
.level-badge {
  display: grid; place-items: center; align-content: center; gap: 2px; flex: none;
  width: 3.875rem; height: 4.125rem;
  background: var(--c-surface-2); border: var(--bw-ui) solid var(--c-level); border-radius: var(--r-card);
}
.level-badge-label { font-size: var(--fs-xs); }
.level-badge-num { font: var(--fw-num, 800) 1.75rem/1 var(--ff-num); color: var(--c-text); }

.monogram { position: relative; display: inline-grid; place-items: center; flex: none; width: 48px; height: 48px; color: var(--c-text); }
.monogram-lg { width: 72px; height: 72px; }
.monogram-shape { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--c-surface-2); stroke: var(--c-line-strong); stroke-width: 2; overflow: visible; }
.monogram-txt { position: relative; font: 800 19px/1 var(--ff-display); }
.monogram-lg .monogram-txt { font-size: 29px; }
.monogram-wait { border-radius: var(--r-key); background: var(--c-surface-2); border: var(--bw-ui) dashed var(--c-line-strong); color: var(--c-text-2); }

/* Antal märken per rad efter märkesväggens faktiska bredd (container query, em = textstorleken): 3 på mobil,
   3 i Hems vänsterkolumn (≥ 1000 px; fyra kolumner gav "Månadsform" 76 px), 6 på surfplatta – och färre när texten är stor, så att märkesnamnen
   aldrig bryts mitt i ord. */
.badges { container: badges / inline-size; }
.badge-wall { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4) var(--sp-3); margin-bottom: var(--sp-3); }
@container badges (min-width: 11em) { .badge-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container badges (min-width: 17em) { .badge-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container badges (min-width: 23em) { .badge-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@container badges (min-width: 35em) { .badge-wall { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@container badges (min-width: 40em) { .badge-wall { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
@container badges (min-width: 46em) { .badge-wall { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
.badge-wall[data-expanded="false"] .badge:nth-child(n+7) { display: none; }
.badge { position: relative; display: grid; justify-items: center; align-content: start; gap: 4px; text-align: center; list-style: none; }
.badge-medal {
  display: grid; place-items: center; width: 56px; height: 56px;
  background: var(--c-surface-2); color: var(--c-level);
  border: var(--bw-ui) solid var(--c-level); border-radius: var(--r-card);
}
.badge-medal .ic { width: 30px; height: 30px; }
.badge[data-earned="false"] .badge-medal { border-style: dashed; border-color: var(--c-line-strong); color: var(--c-text-3); }
.badge-name { font: 600 var(--fs-sm)/1.25 var(--ff-ui); }
.badge-progress { font-size: var(--fs-xs); color: var(--c-text-2); line-height: 1.25; }
.badge .pill-new { position: absolute; top: -6px; right: 0; }

/* ---------------------------------------------------------------- Temaväljaren (kap. 2) */
.screen-theme { max-width: none; min-height: 100dvh; padding-top: var(--sp-6); }
.tp-head { display: grid; justify-items: center; text-align: center; gap: var(--sp-3); padding: 0 0 var(--sp-6); max-width: 40rem; margin: 0 auto; }
.tp-logo { width: 40px; height: 40px; }
.tp-title { font: 800 clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem)/1.1 "Atkinson Hyperlegible Next", system-ui, sans-serif; color: #F5F3FA; }
.tp-sub { color: #CFC8DC; font: 400 1.0625rem/1.5 "Atkinson Hyperlegible Next", system-ui, sans-serif; }
.tp-options { display: grid; gap: var(--sp-4); max-width: 67.5rem; margin: 0 auto; }
.tp-option {
  position: relative; display: flex; flex-direction: column; width: 100%; min-height: 280px; padding: 0;
  text-align: left; overflow: hidden; cursor: pointer;
  border: 2px solid #3A3350; border-radius: 22px; background: var(--c-bg);
  transition: transform 240ms var(--e-out, ease-out), opacity 240ms var(--e-out, ease-out), border-color 160ms;
}
.tp-option > span, .tp-meta > span { display: block; }
.tp-option > .tp-meta { display: grid; }
@media (hover: hover) { .tp-option:hover { border-color: #F5F3FA; } }
/* Den neutrala ramen är gjord för temaväljarens mörka bakgrund. I Inställningar ligger korten på
   temats kort (vitt i Godispop): där gäller temats vanliga fokusring. */
html[data-screen="theme"] .tp-option:focus-visible { border-color: #F5F3FA; outline: 3px solid #F5F3FA; outline-offset: 3px; }
.tp-option.is-chosen { transform: scale(1.02); }
.tp-option.is-other { opacity: .4; }
.tp-preview { height: 190px; overflow: hidden; background: var(--c-bg); }
.tp-meta { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; flex: 1; align-content: start; padding: 14px 16px 16px; background: var(--c-surface); color: var(--c-text); }
.tp-name { font: 800 28px/1.1 var(--ff-display); color: var(--c-text); }
.tp-tags { font: 600 15px/1.4 var(--ff-read); color: var(--c-text-2); }
.tp-cta {
  display: flex !important; align-items: center; justify-content: center; margin-top: 8px;
  min-height: var(--btn-h); padding: 8px 20px; border-radius: var(--r-btn);
  background: var(--c-primary); color: var(--c-on-primary); box-shadow: var(--sh-btn);
  font: 700 1.0625rem/1.15 var(--ff-btn);
}
.tp-check {
  position: absolute; top: 12px; right: 12px; display: inline-flex !important; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 999px; background: var(--c-surface); color: var(--c-text);
  border: var(--bw-ui) solid var(--c-line-strong); font: 700 var(--fs-sm)/1.2 var(--ff-ui);
}
.tp-check[hidden] { display: none !important; }
.tp-check .ic { width: 18px; height: 18px; color: var(--c-correct-ink); }
@media (min-width: 43.75em) {
  .tp-options { grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
  /* Hela kortet inklusive "Välj …" ska rymmas även på en Chromebook med webbläsarlist (1366 × 657) */
  .tp-option { min-height: 0; }
  .tp-preview { height: clamp(190px, calc(100dvh - 375px), 330px); }
  .tp-logo { width: 48px; height: 48px; }
  .tp-cta { justify-self: end; }
}
.tp-options--compact { grid-template-columns: 1fr; gap: var(--sp-3); max-width: none; }
.tp-options--compact .tp-option { min-height: 0; border-color: var(--c-line-strong); }
.tp-options--compact .tp-preview { height: 140px; }
/* Förhandsvisningens miniscen är ritad för ~200 px höjd: skala upp i de stora korten, ned i den kompakta varianten */
@media (min-width: 43.75em) { .tp-options:not(.tp-options--compact) .tp-preview.pv > * { width: 70%; height: 70%; transform: scale(1.4286); transform-origin: 0 0; } }
.tp-options--compact .tp-preview.pv > * { width: 140%; height: 140%; transform: scale(.714); transform-origin: 0 0; }
.tp-options--compact .tp-cta { display: none !important; }
.tp-options--compact .tp-option[aria-pressed="true"] { border-color: var(--c-progress); }
/* Sidans fokusring (inte förhandsvisningens: kortet har data-pv med det andra temats tokens).
   Custom properties med var() räknas ut där de deklareras, alltså med sidans tema. */
.tp-options--compact { --page-focus-ring: var(--focus-ring); --page-focus-offset: var(--focus-offset); }
.tp-options--compact .tp-option:focus-visible { outline: var(--page-focus-ring); outline-offset: var(--page-focus-offset); }
@media (min-width: 32.5em) { .tp-options--compact { grid-template-columns: 1fr 1fr; } }

/* ---------------------------------------------------------------- Hem (3.2) */
/* DOM-ordningen är mobilordningen (DESIGN 10): .home-side (hello, profil) → .home-main (Skapa,
   repetera, Mina quiz) → .badges → .home-foot. Ingen CSS-order: tabbordning och skärmläsarens
   ordning ska följa det eleven ser (WCAG 1.3.2, 2.4.3). Från 1000 px placeras märkena och fotnoten
   under profilen i vänsterkolumnen; högerkolumnen spänner över alla rader. */
.home-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
/* minmax(0, 1fr): utan uttalat spår blir kolumnen lika bred som det bredaste innehållets min-content
   (Gelle + längsta ordet i hälsningen) och går utanför sidan på smala skärmar. */
.home-side, .home-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); align-content: start; min-width: 0; }
@media (min-width: 62.5em) {
  .home-grid {
    grid-template-columns: 23.75rem minmax(0, 1fr); grid-template-rows: auto auto auto 1fr;
    column-gap: var(--sp-7); row-gap: var(--sp-4); align-items: start;
  }
  .home-side { grid-column: 1; grid-row: 1; }
  .home-grid > .badges-btn { grid-column: 1; grid-row: 2; }
  .home-grid > .home-foot { grid-column: 1; grid-row: 3; }
  .home-main { grid-column: 2; grid-row: 1 / -1; }
}
/* Maskoten (Godispop) krymper först (ned till 88 px) och hamnar sedan på en egen rad under texten, i stället
   för att hälsningens ord bryts: texten behöver 11em bredvid maskoten (längsta ordet, "Välkommen"). */
.hello { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) 0; }
.hello-text { flex: 1 1 11em; min-width: 0; }
.hello-title { font: 800 var(--fs-h1)/1.1 var(--ff-display); }
.hello-sub { color: var(--c-text-2); margin-top: var(--sp-2); }
.hello-mascot { flex: 99 0 88px; max-width: 120px; margin-left: auto; }
@media (min-width: 62.5em) { .hello-mascot { max-width: 150px; } }

/* Nivåmärket bredvid XP-stapeln; ryms de inte (smal skärm, stor text) hamnar stapeln under */
.profile-level { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.profile-level > .xpbar { flex: 1 1 9em; min-width: 0; }
.xpbar { display: grid; gap: 6px; }
.xpbar-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0 8px; }
.xpbar-val { font: var(--fw-num, 800) var(--fs-sm)/1 var(--ff-num); }
.xpbar-hint { font-size: var(--fs-sm); color: var(--c-text-2); }
/* Två kolumner när de ryms (minst 7,5rem var), annars en: vid stor text ryms inte ringen och texten i en halv
   kolumn. Spårets minsta bredd är halva raden (eller 7,5rem om det är mer), så det blir aldrig fler än två
   spår – veckoraden spänner över alla spår (1 / -1), och med auto-fit och fler spår stod rutorna i de två
   första och resten av kortet tomt. */
.profile-stats {
  --ps-gap: 10px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, max(7.5rem, (100% - var(--ps-gap)) / 2)), 1fr));
  gap: var(--ps-gap); margin-top: 14px;
}
.stat { display: grid; align-content: start; gap: 4px; padding: 12px; background: var(--c-surface-2); border: var(--bw-card) solid var(--c-line); border-radius: var(--r-opt); }
.stat-streak { grid-template-columns: auto 1fr; align-items: center; column-gap: 8px; }
.stat-streak > .ic { width: 28px; height: 28px; color: var(--c-streak); }
.stat-streak[data-active="false"] > .ic { color: var(--c-text-3); }
.stat-num { font: var(--fw-num, 800) 28px/1 var(--ff-num); }
.stat-streak .stat-label, .stat-streak .week { grid-column: 1 / -1; }
.stat-label { font-size: var(--fs-sm); color: var(--c-text-2); line-height: 1.3; }
/* Ringen och texten bredvid varandra; ryms de inte (smal skärm, stor teckenstorlek) hamnar texten under */
.stat-goal { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.stat-goal-text { display: grid; gap: 2px; min-width: 0; }
.week { list-style: none; display: grid; grid-template-columns: repeat(7, minmax(0, 1.375rem)); gap: 3px; margin-top: 6px; }
.week li {
  display: grid; place-items: center; aspect-ratio: 1; min-width: 0;
  border-radius: var(--r-key); font: 700 var(--fs-xs)/1 var(--ff-ui); color: var(--c-text-2);
  border: 1.5px solid var(--c-line);
}
/* Hem: veckoraden spänner över hela profilkortet (plats för 22–28 px prickar) */
.profile-stats .week-row { grid-column: 1 / -1; grid-template-columns: repeat(7, minmax(0, 1.75rem)); justify-content: space-between; gap: 4px; margin-top: 2px; }
.week li[data-state="done"] { background: var(--c-streak); border-color: var(--c-streak); color: var(--c-on-primary); }
.week li[data-state="today"] { border-color: var(--c-streak); color: var(--c-text); }
.week li[data-state="future"] { border-style: dashed; }
.week li[data-state="missed"] { background: var(--c-surface-3); }

.cta-create {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px;
  min-height: 88px; padding: 16px 18px;
  background: var(--c-primary); color: var(--c-on-primary);
  border-radius: var(--r-card); box-shadow: var(--sh-btn); text-decoration: none;
  transition: transform var(--d-press) var(--e-std), box-shadow var(--d-fast);
}
.cta-create:active { transform: var(--press-transform); }
@media (hover: hover) { .cta-create:hover { transform: var(--hover-transform); box-shadow: var(--sh-btn-hover); } }
.cta-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--r-key); background: var(--c-on-primary); color: var(--c-primary); }
.cta-icon .ic { width: 28px; height: 28px; }
.cta-text { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
/* Smal knapp (stor text på mobil): pilen är dekor och får lämna plats åt texten */
.cta-create { container-type: inline-size; }
@container (max-width: 17em) { .cta-create .ic-next { display: none; } }
.cta-title { font: 800 24px/1.1 var(--ff-display); }
.cta-sub { font: 600 var(--fs-sm)/1.3 var(--ff-ui); }
.cta-create .ic-next { width: 26px; height: 26px; }

.due { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; }
.due-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-key); background: var(--c-progress-soft); color: var(--c-progress); border: 1px solid var(--c-progress); }
.due-title { font: 700 var(--fs-body)/1.3 var(--ff-ui); }
.due-sub { font-size: var(--fs-sm); color: var(--c-text-2); }
.due-go { grid-column: 1 / -1; }
@media (min-width: 37.5em) { .due { grid-template-columns: auto minmax(0, 1fr) auto; } .due-go { grid-column: auto; } }

.quiz-list { list-style: none; display: grid; gap: 10px; }
@media (min-width: 45em) { .quiz-list { grid-template-columns: 1fr 1fr; } }
.quiz-item { list-style: none; min-width: 0; container: quiz / inline-size; }
.quiz-link {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; column-gap: 12px; row-gap: 6px;
  height: 100%; min-height: 76px; padding: 14px;
  background: var(--c-surface); color: var(--c-text); text-decoration: none;
  border: var(--bw-card) solid var(--c-line); border-radius: var(--r-card); box-shadow: var(--sh-card);
  transition: background-color var(--d-fast), border-color var(--d-fast), transform var(--d-press);
}
@media (hover: hover) { .quiz-link:hover { background: var(--c-hover); border-color: var(--c-line-strong); } }
.quiz-link:active { transform: var(--press-transform); }
.quiz-link > .monogram { grid-row: 1 / span 2; }
.quiz-body { grid-column: 2; grid-row: 1; display: grid; gap: 4px; min-width: 0; }
.quiz-link > .pill, .quiz-link > .due-pill { grid-column: 2; grid-row: 2; justify-self: start; }
.quiz-link > .ic-chevron { grid-column: 3; grid-row: 1 / span 2; }
.quiz-link:not(:has(> .pill, > .due-pill)) .quiz-body { grid-row: 1 / span 2; }
.quiz-title { font: 700 var(--fs-body)/1.25 var(--ff-ui); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.quiz-meta { font-size: var(--fs-sm); color: var(--c-text-2); }
.mastery { display: flex; align-items: center; gap: 8px; }
.mastery .bar { flex: 1; max-width: 140px; height: 6px; }
.mastery-val { font: 700 var(--fs-xs)/1 var(--ff-ui); color: var(--c-text-2); }
.due-pill {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px;
  border: 1.5px solid var(--c-progress); border-radius: var(--r-chip);
  background: var(--c-progress-soft); font: 700 var(--fs-xs)/1.2 var(--ff-ui); white-space: nowrap;
}
.due-pill .ic { width: 14px; height: 14px; }
.quiz-link .ic-chevron { width: 20px; height: 20px; color: var(--c-text-3); }
.quiz-item[data-state="creating"] .quiz-link { border-style: dashed; }
/* Smal rad (stor text på mobil): först pilen, sedan monogrammet (dekor) lämnar plats åt titeln, så att
   långa titelord inte bryts. 19em = 323 px och 13em = 221 px vid 100 % (gäller bara 320 px respektive aldrig). */
@container quiz (max-width: 19em) { .quiz-link .ic-chevron { display: none; } }
@container quiz (max-width: 13em) { .quiz-link > .monogram { display: none; } }
.home-foot { display: flex; align-items: flex-start; gap: 8px; font-size: var(--fs-sm); color: var(--c-text-2); }
.home-foot > span { min-width: 0; }
.home-foot .ic { width: 18px; height: 18px; margin-top: 2px; }
.home-foot a { color: var(--c-text); font-weight: 700; }

/* ---------------------------------------------------------------- Tomma lägen (3.12) */
.empty { display: grid; justify-items: center; text-align: center; gap: var(--sp-3); padding: var(--sp-6) var(--sp-2); }
.empty-art { width: 7.5rem; max-width: 100%; min-height: 0; }
.empty > * { max-width: 100%; }
.empty-title { font: 800 var(--fs-h2)/1.2 var(--ff-display); }
.empty-text { color: var(--c-text-2); max-width: 40ch; }
.empty-hint { font-size: var(--fs-sm); color: var(--c-text-2); max-width: 40ch; }
.screen-empty .empty { padding-top: var(--sp-9); }

/* ---------------------------------------------------------------- Skapa (3.3) */
.create-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
/* Skapa på dator (Erik 2026-10-26): uppladdning och tips till vänster, textrutan med titel och knapp till höger,
   så att allt ryms utan scroll. */
.create-left, .create-right { display: grid; gap: var(--sp-5); align-content: start; min-width: 0; }
@media (min-width: 62.5em) {
  .screen-create .screen-head { margin-bottom: var(--sp-3); }
  .create-grid > .create-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); column-gap: var(--sp-6); align-items: start; }
  .create-left, .create-right { gap: var(--sp-3); }
  .create-grid .create-or { display: none; }
  .create-grid .field-text .textarea { min-height: 0; height: clamp(9rem, 32vh, 18rem); }
  .create-grid .field-title .field-help { display: none; }
}
@media (min-width: 62.5em) and (max-height: 760px) {
  .create-grid .field-text .textarea { height: 7.5rem; }
  .create-grid .quota { padding: 8px 12px; }
  .create-grid .quota-sub { display: none; }
}
.create-form { display: grid; gap: var(--sp-5); }
.field { display: grid; gap: var(--sp-2); }
.field-label { font: 700 var(--fs-body)/1.3 var(--ff-ui); }
.field-opt { font-weight: 400; color: var(--c-text-2); }
.field-help { font-size: var(--fs-sm); color: var(--c-text-2); }
.warn-callout {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px;
  background: var(--c-warn-soft); border: var(--bw-ui) solid var(--c-warn); border-radius: var(--r-opt);
  font-size: var(--fs-sm);
}
.warn-callout .ic { color: var(--c-text); margin-top: 1px; }
/* Stapeln överst, räknaren och tipset på raden under – tipset hamnar på en egen rad när båda inte ryms */
.counter { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; align-items: baseline; }
.counter .bar { flex: 1 0 100%; height: 6px; overflow: visible; }
.counter-txt, .counter-hint { min-width: 0; }
.counter .bar::after { content: ""; position: absolute; left: 5%; top: -3px; bottom: -3px; width: 2px; background: var(--c-text-3); border-radius: 1px; }
.counter-txt { font: 700 var(--fs-sm)/1.2 var(--ff-ui); }
.counter-hint { font-size: var(--fs-sm); color: var(--c-text-2); text-align: right; margin-left: auto; }
.counter[data-state="ok"] .bar-fill { background: var(--c-correct); }
.counter[data-state="ok"] .counter-hint { color: var(--c-correct-ink); font-weight: 600; }
.counter[data-state="long"] .bar-fill { background: var(--c-wrong); }
.counter[data-state="long"] .counter-hint { color: var(--c-wrong-ink); font-weight: 600; }
.quota { display: flex; align-items: flex-start; gap: 10px; padding: 12px; background: var(--c-surface-2); border: var(--bw-card) solid var(--c-line); border-radius: var(--r-opt); }
.quota-icon { display: grid; place-items: center; color: var(--c-progress); }
.quota-txt { font-weight: 600; }
.quota-sub { font-size: var(--fs-sm); color: var(--c-text-2); }
.quota[data-state="hour-full"], .quota[data-state="day-full"], .quota[data-state="cap-full"], .quota[data-state="low"] { background: var(--c-warn-soft); border-color: var(--c-warn); }
.quota[data-state="hour-full"] .quota-icon, .quota[data-state="day-full"] .quota-icon, .quota[data-state="cap-full"] .quota-icon { color: var(--c-text); }
.form-error {
  padding: 10px 12px; font-weight: 600; color: var(--c-text);
  background: var(--c-wrong-soft); border: var(--bw-ui) solid var(--c-wrong); border-radius: var(--r-opt);
}
.create-tips summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; list-style: none; }
.create-tips summary::-webkit-details-marker { display: none; }
.create-tips summary::after { content: "+"; margin-left: auto; font: 700 1.5rem/1 var(--ff-ui); color: var(--c-text-2); }
.create-tips details[open] summary::after { content: "–"; }
.create-tips ul { display: grid; gap: 8px; padding-left: 1.2em; margin-top: var(--sp-2); color: var(--c-text-2); }

/* ---------------------------------------------------------------- Laddar (3.4) */
.screen-load { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); align-content: start; padding-top: calc(var(--sp-5) + env(safe-area-inset-top)); }
.screen-result { padding-top: calc(var(--sp-4) + env(safe-area-inset-top)); }
.load-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }
.load-head > div { flex: 1 1 10em; min-width: 0; }
.load-leave { margin-left: auto; }
.load-title { font: 800 var(--fs-h2)/1.15 var(--ff-display); margin-top: 4px; }
.load-leave { flex: none; }
.load-mascot { display: grid; justify-items: center; }
.load-progress { display: grid; gap: var(--sp-3); }
.bar-load { height: 8px; margin: 10px 8px; overflow: visible; }
.bar-load .bar-fill { transition: width 250ms linear; }
.load-runner {
  position: absolute; left: -8px; top: 50%; width: 16px; height: 16px; border-radius: 50%;
  background: var(--c-text); border: 3px solid var(--c-primary);
  transform: translate(calc(var(--p, 0) * var(--track-w, 0px)), -50%);
  transition: transform 250ms linear;
}
.load-steps { list-style: none; display: grid; gap: 8px; }
.load-step { display: flex; align-items: center; gap: 10px; color: var(--c-text-3); font-weight: 600; }
.load-step-mark { display: grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 50%; border: 2px dashed var(--c-line-strong); }
.load-step-mark .ic { width: 14px; height: 14px; }
.load-step[data-state="active"] { color: var(--c-text); font-weight: 700; }
.load-step[data-state="active"] .load-step-mark { border: 2px solid var(--c-progress); }
.load-step[data-state="done"] { color: var(--c-text-2); }
.load-step[data-state="done"] .load-step-mark { border: 0; background: var(--c-correct); color: var(--c-on-correct); }
.load-time { font-size: var(--fs-sm); color: var(--c-text-2); }
.load-status { padding: 10px 12px; background: var(--c-progress-soft); border: 1px solid var(--c-progress); border-radius: var(--r-opt); font-weight: 600; }
.load-game .section-head { margin-bottom: var(--sp-3); }
.load-tips { display: grid; gap: var(--sp-3); }
.load-tips-title { display: flex; align-items: center; gap: 8px; }
.load-tips-title .ic { color: var(--c-level); }
.load-tip { min-height: 4.5em; transition: opacity 250ms; }
.load-tip.is-fading { opacity: 0; }
.load-tips-ctrl { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.load-done, .load-error { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); text-align: center; justify-items: center; }
.load-done > *, .load-error > * { max-width: 100%; }
.load-done .btn, .load-error .btn { width: 100%; max-width: 26.25rem; }
.load-done-title { font: 800 var(--fs-h1)/1.1 var(--ff-display); }
.load-done-sub { color: var(--c-text-2); }
.load-bonus { font-weight: 700; color: var(--c-text); }
.load-save-warn { max-width: 48ch; padding: 10px 12px; font-size: var(--fs-sm); font-weight: 600; background: var(--c-warn-soft); border: var(--bw-ui) solid var(--c-warn); border-radius: var(--r-opt); }
.load-error-title { font: 800 var(--fs-h2)/1.2 var(--ff-display); }
.load-error-msg { max-width: 48ch; }
.load-error-mascot { width: 96px; }
.load-error-actions { display: grid; gap: 10px; width: 100%; justify-items: center; }
.screen-load[data-load="error"] .bar-fill { background: var(--c-wrong); }
/* ≥ 1000 px: förloppet överst till vänster (syns direkt även i 1366 × 657), spelet till höger.
   Med maskot (Godispop): maskoten under förloppet, tipsen under spelet. Maskoten spänner över rad 3–4,
   så att rad 3 bara blir så hög som spelet behöver utöver förloppet och tipsen kommer direkt under
   spelet (i stället för under maskotens rad). Utan maskot (Arkad, eller Gelle avstängd): tipsen under
   förloppet, så att ingen halva av skärmen står tom. */
@media (min-width: 62.5em) {
  .screen-load { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-5) var(--sp-7); align-items: start; }
  .load-head { grid-column: 1 / -1; grid-row: 1; }
  .load-progress { grid-column: 1; grid-row: 2; }
  .load-mascot { grid-column: 1; grid-row: 3 / span 2; }
  .load-game { grid-column: 2; grid-row: 2 / span 2; }
  .load-tips { grid-column: 2; grid-row: 4; }
  .load-mascot:empty ~ .load-tips { grid-column: 1; grid-row: 3; }
  .load-done, .load-error { grid-column: 1 / -1; grid-row: 3; justify-self: center; width: 100%; max-width: 40rem; }
  .screen-load[data-load="done"] .load-mascot { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
  .load-mascot:empty ~ .load-done, .screen-load[data-load="error"] .load-error { grid-row: 2; }
}

/* ---------------------------------------------------------------- Quiz-översikt (3.5, 6.5) */
/* Alla spår minmax(0, 1fr): ett långt ord i titeln ("Klimatförändringarna") får inte göra
   kolumnen bredare än skärmen (då klipps "Ta bort" och lådorna av .shell { overflow-x: clip }). */
.ov-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
.ov-main, .ov-side { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); align-content: start; }
.ov-main { container-type: inline-size; }
@media (min-width: 62.5em) { .ov-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp-6); align-items: start; } }
/* Överskådlig översikt på dator (Erik 2026-10-26): allt ryms utan scroll – mindre titel, pluggsätten 2×2,
   kompakta kort och lägre repetitionslådor. */
@media (min-width: 62.5em) {
  .screen-overview .screen-head { margin-bottom: 0; }
  .screen-overview .ov-main, .screen-overview .ov-side { gap: var(--sp-3); }
  .screen-overview .ov-title { font-size: clamp(1.6rem, 1.1rem + 1.1vw, 2.25rem); }
  .screen-overview .ov-head .monogram { width: 56px; height: 56px; }
  .screen-overview .ov-modes { padding: var(--sp-4); }
  .screen-overview .ov-modes .section-head { margin-bottom: 4px; }
  .screen-overview .ov-modes-lead { font-size: var(--fs-sm); margin-bottom: var(--sp-2); }
  .screen-overview .mode-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .screen-overview .mode { padding: 10px 12px; gap: 10px; }
  .screen-overview .mode-icon { width: 40px; height: 40px; }
  .screen-overview .mode-icon .ic { width: 22px; height: 22px; }
  .screen-overview .mode-blurb { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .screen-overview .ov-side .card { padding: var(--sp-4); }
  :root .screen-overview .lt-stack { height: 64px; }
  .screen-overview .ov-mastery .section-head { margin-bottom: 4px; }
}
@media (min-width: 62.5em) and (max-height: 760px) {
  .screen-overview .leitner-help, .screen-overview .ov-modes-lead { display: none; }
  :root .screen-overview .lt-stack { height: 44px; }
  :root .screen-overview .ov-practice { min-height: 48px; }
  :root .screen-overview .ov-title { font-size: 1.6rem; }
  .screen-overview .ov-meta { margin-top: 2px; }
  :root .screen-overview .mode-blurb { -webkit-line-clamp: 1; }
}
.ov-head { display: flex; align-items: center; gap: var(--sp-4); }
.ov-head > div { min-width: 0; }
/* Smal kolumn i förhållande till textstorleken (stor text på mobil): monogrammet ovanför titeln, så att
   titelns ord får hela raden. 15em = 255 px vid 100 % (gäller aldrig då), 382 px vid 150 %, 510 px vid
   200 %. Ryms titelns längsta ord ändå inte krymper rubriken (ui/fit.js), aldrig under brödtextens storlek. */
@container (max-width: 15em) { .ov-head { flex-direction: column; align-items: stretch; gap: var(--sp-3); } }
.ov-title { font: 800 var(--fs-h1)/1.1 var(--ff-display); }
.ov-meta { font-size: var(--fs-sm); color: var(--c-text-2); margin-top: 6px; }
/* Öva överst över hela bredden. Flashcards, Dela och Ta bort: tre lika breda kolumner med ikonen bredvid
   texten när etiketterna ryms så ("row"), annars tre kolumner med ikonen över texten ("col"), annars en
   knapp per rad (standard, också utan JS). overview.js väljer med fitLayout (ui/fit.js) efter knapparnas
   faktiska utrymme (data-fit), inte fönstrets bredd: kolumnen är smal på 1000–1440 px, och knapparnas
   bredd är text (växer med textstorleken) plus fasta px (padding, ikon, kant). Orden bryts aldrig mitt i. */
.ov-actions-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.ov-actions .btn { min-width: 0; }
.ov-practice { grid-column: 1 / -1; }
.ov-actions .btn:not(.ov-practice) { padding-left: 10px; padding-right: 10px; }
.ov-actions:is([data-fit="row"], [data-fit="col"]) .ov-actions-in { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ov-actions[data-fit="col"] .btn:not(.ov-practice) { flex-direction: column; gap: 4px; min-height: 64px; padding: 6px 4px; font-size: var(--fs-sm); }
.ov-mastery .section-head { margin-bottom: var(--sp-2); }
.ov-mastery-row { display: flex; align-items: center; gap: 12px; }
.ov-mastery-row .bar { flex: 1; }
.ov-mastery-row .mastery-val { font: var(--fw-num, 800) var(--fs-body)/1 var(--ff-num); color: var(--c-text); }
.leitner-help { font-size: var(--fs-sm); color: var(--c-text-2); margin-top: 6px; }
/* Sex lådor i rad; blir lådan smalare än 2,25rem (stor text på smal skärm) två rader om tre – aldrig 4 + 2
   eller 5 + 1. Spårets minsta bredd är en sjättedel av raden när den räcker, annars en tredjedel
   (clamp-växeln: (2,25rem − sjättedel) × 999 är negativ när sjättedelen räcker). */
.leitner-boxes {
  --lt-gap: 8px; --lt6: calc((100% - 5 * var(--lt-gap)) / 6); --lt3: calc((100% - 2 * var(--lt-gap)) / 3);
  list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(var(--lt6), (2.25rem - var(--lt6)) * 999, var(--lt3)), 1fr));
  gap: var(--lt-gap); margin: var(--sp-4) 0; align-items: end;
}
.lt-box { display: grid; justify-items: center; gap: 4px; }
.lt-stack { display: flex; flex-direction: column-reverse; align-items: center; justify-content: flex-start; gap: 3px; height: 107px; }
.lt-dot { width: 18px; height: 8px; border-radius: 2px; background: var(--c-progress); flex: none; }
.lt-box[data-box="0"] .lt-dot { background: transparent; border: 1.5px solid var(--c-text-3); }
.lt-box[data-box="5"] .lt-dot { background: var(--c-correct); }
.lt-dot[data-due="true"] { outline: 2px solid var(--c-progress); outline-offset: 1px; }
.lt-count { font: var(--fw-num, 800) var(--fs-body)/1 var(--ff-num); }
.lt-label { font: 700 var(--fs-xs)/1 var(--ff-ui); color: var(--c-text-2); }
.leitner-foot { display: flex; align-items: center; gap: 10px; font-size: var(--fs-sm); font-weight: 600; }
.leitner-foot .bar { flex: 1; height: 8px; }
.ov-qlist summary { display: flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; font-weight: 700; list-style: none; }
.ov-qlist summary::-webkit-details-marker { display: none; }
.ov-qlist summary::after { content: "+"; margin-left: auto; font: 700 1.5rem/1 var(--ff-ui); color: var(--c-text-2); }
.ov-qlist[open] summary::after { content: "–"; }
.ov-qlist ol { padding-left: 1.4em; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); margin-top: var(--sp-2); }
.ov-q { background: transparent; }
.ov-q-text { font-weight: 600; }
.ov-q-answer { font-size: var(--fs-sm); color: var(--c-text-2); margin-top: 2px; }
.ov-q-label { font-weight: 700; color: var(--c-correct-ink); }
/* Frågelistan vid stor text på smal skärm: inget indrag och mindre kortmarginal, så att orden får plats på raden */
.ov-side { container: ov-side / inline-size; }
@container ov-side (max-width: 15em) {
  .ov-side .ov-questions.card { padding-left: 10px; padding-right: 10px; }
  /* numret i texten i stället för i indraget */
  .ov-qlist ol { padding-left: 0; list-style: none; counter-reset: ovq; }
  .ov-qlist .ov-q { counter-increment: ovq; }
  .ov-qlist .ov-q-text::before { content: counter(ovq) ". "; }
}

/* ---------------------------------------------------------------- Öva (3.6) */
.screen-play { max-width: none; padding: 0 0 calc(var(--sp-9) + env(safe-area-inset-bottom)); }
/* Fokus som skrollas in i bild (Tab/Shift+Tab) ska hamna under den klistrade HUD:en, inte bakom den (WCAG 2.4.11) */
html[data-screen="play"] { scroll-padding-top: calc(var(--hud-h) + 24px + env(safe-area-inset-top)); }
.hud { position: sticky; top: 0; z-index: var(--z-hud); background: var(--c-bg); border-bottom: 1px solid var(--c-line); padding-top: env(safe-area-inset-top); }
.hud-row { display: flex; align-items: center; gap: 10px; height: var(--hud-h); max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); container: hudrow / inline-size; }
/* Mycket smal HUD (stor text på smal mobil): XP-etiketten bara för skärmläsare och tätare chips, så att
   framstegsprickarna får plats. 12em = 408 px vid 200 % text, 306 px vid 150 % (204 px vid 100 %: aldrig). */
@container hudrow (max-width: 12em) {
  .hud-xp-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .hud-combo, .hud-xp { padding-left: 6px; padding-right: 6px; gap: 3px; }
}
/* Framstegsprickarna krymper med utrymmet och antalet: kombo- och XP-chipen växer med textstorleken, och
   varje fel svar lägger till en revanschfråga (upp till 30 prickar). Prickarna har ingen minsta bredd
   (flex: 1 1 0), och mellanrum, sidomarginal och (Godispop) kontur blir tätare i steg – så hamnar de
   aldrig utanför sin ruta eller under chipen. Temana sätter grundvärdena på :root (--pip-gap, --pip-pad,
   --pip-pad-tight); stegen nedan sätter dem på .pips. */
.hud-progress { flex: 1; min-width: 0; container: hudp / inline-size; }
.pips { list-style: none; display: flex; gap: var(--pip-gap, 4px); padding: 0 var(--pip-pad, 0px); }
.pip { flex: 1 1 0; min-width: 0; height: 8px; border-radius: 3px; background: var(--c-surface-3); list-style: none; }
.pips:has(> :nth-child(13)) { --pip-gap: 2px; --pip-pad: var(--pip-pad-tight, 0px); --pip-bw: 1.5px; --pip-bw-cur: 2.5px; }
.pips:has(> :nth-child(21)) { --pip-gap: 1px; --pip-bw: 1px; --pip-bw-cur: 2px; }
@container hudp (max-width: 120px) {
  .pips { --pip-gap: 2px; --pip-pad: var(--pip-pad-tight, 0px); --pip-bw: 1.5px; --pip-bw-cur: 2.5px; }
  .pips:has(> :nth-child(13)) { --pip-gap: 1px; --pip-bw: 1px; --pip-bw-cur: 2px; }
  .pips:has(> :nth-child(21)) { --pip-gap: 0px; }
}
@container hudp (max-width: 72px) {
  .pips, .pips:has(> :nth-child(13)) { --pip-gap: 1px; --pip-bw: 1px; --pip-bw-cur: 2px; }
  .pips:has(> :nth-child(13)) { --pip-gap: 0px; }
}
.pip[data-state="current"] { background: var(--c-progress); }
.pip[data-state="correct"] { background: var(--c-correct); }
.pip[data-state="wrong"] { background: var(--c-wrong); }
.pip[data-retry="true"][data-state="todo"] { background: transparent; box-shadow: inset 0 0 0 1.5px var(--c-text-3); }
.combo, .hud-xp { display: inline-flex; align-items: center; gap: 6px; }
.hud-combo, .hud-xp {
  min-height: 40px; padding: 4px 10px; flex: none;
  background: var(--c-surface); border: var(--bw-card) solid var(--c-line); border-radius: var(--r-chip);
}
.hud-combo .ic { width: 20px; height: 20px; color: var(--c-combo); }
.hud-xp .ic { width: 20px; height: 20px; color: var(--c-xp); }
.combo-num, .hud-xp-num { font: var(--fw-num, 800) 1.125rem/1 var(--ff-num); }
.combo-label, .hud-xp-label, .combo-mult { font: 700 var(--fs-xs)/1 var(--ff-ui); color: var(--c-text-2); }
.screen-play[data-combo-tier="0"] .hud-combo .combo-mult { display: none; }
@media (max-width: 37.49em) { .hud-combo .combo-label, .hud-combo .combo-mult { display: none; } }
.combo-lane { list-style: none; display: flex; gap: 3px; }
.lane-seg { flex: 1; background: var(--c-surface-3); list-style: none; }
.lane-seg[data-on="true"] { background: var(--c-combo); }
.hud-lane { display: none; height: 6px; max-width: var(--maxw); margin: 0 auto 6px; padding: 0 var(--gutter); }
.hud-callout { position: absolute; left: 0; right: 0; top: env(safe-area-inset-top); height: var(--hud-h); max-height: var(--hud-h); overflow: hidden; display: grid; place-items: center; pointer-events: none; z-index: var(--z-callout); }
.hud-pops { position: absolute; right: var(--gutter); top: 100%; pointer-events: none; }

.play-grid { display: block; }
.play-left, .play-right { display: none; }
.play-center-wrap { max-width: var(--read-maxw); margin: 0 auto; padding: var(--sp-3) var(--gutter) 0; }
.play-center { display: flex; flex-direction: column; gap: var(--sp-3); }
.play-alert {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px; font-weight: 600; font-size: var(--fs-sm);
  background: var(--c-wrong-soft); color: var(--c-text); border: var(--bw-ui) solid var(--c-wrong); border-radius: var(--r-opt);
}
.play-alert .ic { width: 20px; height: 20px; }
@media (min-width: 62.5em) {
  .play-grid { display: grid; grid-template-columns: 10rem minmax(0, 47.5rem) 16.25rem; gap: 28px; justify-content: center; align-items: start; max-width: var(--maxw); margin: 0 auto; padding: var(--sp-4) var(--gutter) 0; }
  .play-center-wrap { padding: 0; max-width: none; }
  .play-left, .play-right { display: grid; gap: var(--sp-4); position: sticky; top: calc(var(--hud-h) + 16px); align-content: start; }
  .hud-combo { display: none; }
}
.combo-v { display: grid; justify-items: center; gap: 8px; padding: 14px 10px; background: var(--c-surface); border: var(--bw-card) solid var(--c-line); border-radius: var(--r-card); }
.combo-v .combo-num { font-size: 2.5rem; }
.combo-v .combo-lane { flex-direction: column-reverse; width: 40px; height: min(480px, calc(100dvh - var(--hud-h) - 240px)); min-height: 160px; gap: 4px; }
.combo-v .lane-seg { width: 100%; }
.play-mascot { display: grid; justify-items: center; }
.play-bubble { padding: 8px 12px; background: var(--c-surface); border: var(--bw-card) solid var(--c-line); border-radius: var(--r-card); font-size: var(--fs-sm); }
.round-title { font: 700 var(--fs-sm)/1.2 var(--ff-ui); color: var(--c-text-2); margin-bottom: var(--sp-3); }
/* En rad per värde (etiketten till vänster, siffran till höger): i den smala högerkolumnen bröts "Bästa kombo"
   på två rader i tre kolumner, och siffran hamnade lägre än de andra. */
.round-stats { display: grid; gap: 6px; }
.round-stats > div { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 8px; }
.round-stats dt { font-size: var(--fs-sm); color: var(--c-text-2); }
.round-stats dd { font: var(--fw-num, 800) 1.375rem/1.1 var(--ff-num); margin-left: auto; }
.collect { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.collect-slot { aspect-ratio: 1; border-radius: var(--r-key); background: var(--c-surface-3); list-style: none; transition: background-color var(--d-base), opacity var(--d-base); }
.collect-slot[data-state="earned"] { background: var(--c-correct); }
.collect-slot[data-state="revenge"] { background: var(--c-progress); }
.collect-slot[data-state="missed"] { background: transparent; box-shadow: inset 0 0 0 2px var(--c-wrong); }
.keys-card p { font-size: var(--fs-sm); color: var(--c-text-2); margin-top: 6px; }

.q-stage { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.q-card {
  background: var(--c-surface); border: var(--bw-card) solid var(--c-line); border-radius: var(--r-qcard);
  box-shadow: var(--sh-card); padding: 18px 20px 22px;
}
.q-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; font-size: var(--fs-sm); color: var(--c-text-2); }
.q-quiz { margin-left: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40%; }
.q-text { font: var(--fw-q) var(--fs-q)/var(--lh-q) var(--ff-read); max-width: 34ch; color: var(--c-text); }
.q-text:focus { outline: none; }
.opts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; background: transparent; container: opts / inline-size; }
.opts[data-layout="grid"] { grid-template-columns: 1fr 1fr; }
.opts[data-layout="grid"] .opt { min-height: var(--opt-min-h-grid, var(--opt-min-h)); }
/* Efter ihopfällning vid rätt svar står bara ett alternativ kvar: låt det ta hela bredden i stället för en halv kolumn */
.opts[data-layout="grid"][data-collapsed="true"]:not(:has(.opt[data-state="wrong"])) { grid-template-columns: 1fr; }
.opt {
  display: grid; grid-template-columns: var(--key-size) minmax(0, 1fr) auto auto; align-items: center; gap: 12px;
  width: 100%; min-height: var(--opt-min-h); padding: 12px 14px; text-align: left;
  background: var(--c-surface-2); color: var(--c-text);
  border: var(--bw-ui) solid var(--c-line-strong); border-radius: var(--r-opt);
  font: var(--fw-opt) var(--fs-opt)/var(--lh-opt) var(--ff-read);
  transition: background-color var(--d-fast), border-color var(--d-fast), opacity 150ms linear;
  -webkit-tap-highlight-color: transparent;
}
.opt:disabled, .opt[aria-disabled="true"] { cursor: default; color: var(--c-text); opacity: 1; }
@media (hover: hover) { .opt:not(:disabled):not([aria-disabled="true"]):hover { background: var(--c-hover); border-color: var(--c-progress); } }
.opt-key {
  display: grid; place-items: center; width: var(--key-size); height: var(--key-size);
  background: var(--c-bg); color: var(--c-text); border: var(--bw-ui) solid var(--c-line-strong); border-radius: var(--r-key);
  font: var(--fw-num, 800) 1rem/1 var(--ff-num);
}
.opt-text { min-width: 0; overflow-wrap: break-word; } /* brytning mitt i ord bara som sista utväg (ord bredare än hela raden) */
/* play.js mäter om 2 × 2 ryms: utan ordbrytning, och med bockens/kryssets plats som efter svaret */
:root .opts.is-measuring .opt-text { overflow-wrap: normal; }
:root .opts.is-measuring .opt-mark:empty { width: 24px; }
/* Mycket smalt alternativ (stor text på mobil): bokstavsrutan och bocken/krysset ovanför texten, så att
   texten får alternativets hela bredd och vanliga ord inte bryts mitt i. 15em = 255 px vid 100 % (gäller
   aldrig då), men 382 px vid 150 % och 510 px vid 200 % text. */
@container opts (max-width: 15em) {
  :root .opts[data-layout] .opt { grid-template-columns: var(--key-size) minmax(0, 1fr) auto; grid-template-rows: auto auto; row-gap: 8px; }
  :root .opts[data-layout] .opt-key { grid-column: 1; grid-row: 1; }
  :root .opts[data-layout] .opt-text { grid-column: 1 / -1; grid-row: 2; }
  :root .opts[data-layout] .opt-tag:not([hidden]) { grid-column: 2; grid-row: 1; justify-self: start; }
  :root .opts[data-layout] .opt-mark { grid-column: 3; grid-row: 1; }
}
.opt-tag { padding: 4px 8px; border-radius: var(--r-chip); background: var(--c-surface); border: 1px solid currentColor; font: 700 var(--fs-xs)/1 var(--ff-ui); white-space: nowrap; }
.opt-mark { display: grid; place-items: center; width: 24px; height: 24px; }
.opt-mark:empty { width: 0; }
.opt[data-state="correct"], .opt[data-state="reveal"] { background: var(--c-correct-soft); border-color: var(--c-correct); }
.opt[data-state="correct"] .opt-key { background: var(--c-correct); color: var(--c-on-correct); border-color: var(--c-correct); }
.opt[data-state="correct"] .opt-mark, .opt[data-state="correct"] .opt-tag, .opt[data-state="reveal"] .opt-mark, .opt[data-state="reveal"] .opt-tag { color: var(--c-correct-ink); }
.opt[data-state="reveal"] .opt-key { border-color: var(--c-correct); }
.opt[data-state="wrong"] { background: var(--c-wrong-soft); border-color: var(--c-wrong); }
.opt[data-state="wrong"] .opt-key { background: var(--c-wrong); color: var(--c-on-wrong); border-color: var(--c-wrong); }
.opt[data-state="wrong"] .opt-mark, .opt[data-state="wrong"] .opt-tag { color: var(--c-wrong-ink); }
.opt[data-state="dim"], .opt[data-state="dim"]:disabled, .opt[data-state="dim"][aria-disabled="true"] { background: var(--c-surface); border-color: var(--c-line); color: var(--c-text-3); }
.opt[data-state="collapsed"] { display: none; }
.opt.is-fading { opacity: 0; }
.opt-tag, .opt-mark { color: var(--c-text); }

.q-stage.is-entering .q-card, .q-stage.is-entering .opt { animation: q-in 380ms var(--e-out) both; }
.q-stage.is-entering .opt { animation-delay: calc(80ms + var(--i, 0) * 45ms); }
@keyframes q-in { from { opacity: 0; transform: translateX(26px); } }

.fb {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 16px;
  background: var(--c-surface); border: var(--bw-card) solid var(--c-line); border-radius: var(--r-card); box-shadow: var(--sh-card);
}
.fb[data-result="correct"] { background: var(--c-correct-soft); border-color: var(--c-correct); }
.fb[data-result="wrong"] { background: var(--c-wrong-soft); border-color: var(--c-wrong); }
.fb.is-entering { animation: fb-in 280ms var(--e-out) both; }
@keyframes fb-in { from { opacity: 0; transform: translateY(12px); } }
.fb-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fb-icon { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--c-correct); color: var(--c-on-correct); overflow: hidden; }
.fb[data-result="wrong"] .fb-icon { background: var(--c-wrong); color: var(--c-on-wrong); }
.fb-icon .ic { width: 28px; height: 28px; }
/* Rubriken delar rad med ikonen (och chipen) så länge dess längsta ord ryms (min-content), annars hamnar
   den på en egen rad under ikonen – ord bryts aldrig (rubrikerna är korta fasta fraser, 6.2) */
.fb-title { flex: 1 1 0; min-width: min-content; font: 800 var(--fs-h2)/1.1 var(--ff-display); color: var(--c-text); }
.fb-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.fb-why { font: 400 var(--fs-body)/var(--lh-body) var(--ff-read); }
.fb-why-label { font-weight: 700; color: var(--c-text-2); }
.fb-note { display: flex; align-items: flex-start; gap: 8px; font-size: var(--fs-sm); color: var(--c-text-2); }
.fb-note .ic { width: 18px; height: 18px; margin-top: 2px; }
.fb-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.fb-next { flex: 1 1 auto; } /* delar raden med "Visa alla" när den ryms, annars egen rad (aldrig klämd) */
@media (min-width: 43.75em) { .fb-next { flex: 0 1 auto; min-width: 220px; margin-left: auto; } }

/* Kompakta mått på Öva under 600 px (3.6.4) */
@media (max-width: 37.49em) {
  .play-center-wrap { padding-top: var(--sp-2); }
  .q-card { padding: 12px 14px 14px; }
  .q-meta { margin-bottom: 6px; }
  .q-quiz { display: none; }
  .fb { padding: 12px 14px 14px; gap: 6px; }
  .fb-icon { width: 40px; height: 40px; }
  .fb-icon .ic { width: 24px; height: 24px; }
  .fb-next { min-height: min(var(--btn-h), 52px); }
  .fb-title { font-size: 1.375rem; }
  .opt { padding: 10px 12px; gap: 10px; }
  .q-stage, .opts { gap: 8px; }
  .fb-showall { padding: 0 12px; flex: none; }
  .fb-showall-more, .fb .kbd { display: none !important; }
}
/* Liggande mobil */
@media (max-height: 559px) {
  :root { --hud-h: 52px; }
  .q-meta { display: none; }
}

/* ---------------------------------------------------------------- Resultat (3.7) */
.screen-result { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
.res-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-3); min-height: 48px; }
.res-kicker { flex: 1 1 10em; min-width: 0; }
.res-skip { flex: none; white-space: nowrap; }
.res-skip .ic { width: 18px; height: 18px; }
.screen-result[data-seq="done"] .res-skip { display: none; } /* tar ingen plats: rubriken får hela raden (res-top behåller sin höjd) */
.res-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
.res-hero { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: var(--sp-3); }
.res-score { position: relative; width: min(100%, clamp(8rem, 34vw, 10rem)); aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.res-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.res-ring .ring-track, .res-ring .ring-fill { stroke-width: 10; }
.res-score-num { position: relative; font: var(--fw-num, 800) clamp(2.75rem, 2rem + 3vw, 4rem)/1 var(--ff-num); }
.res-score-of { position: relative; font-size: var(--fs-sm); color: var(--c-text-2); font-weight: 600; }
.screen-result[data-perfect="true"] .res-ring .ring-fill { stroke: var(--c-level); }
.res-stamp { display: inline-block; padding: 6px 14px; border: 2px solid var(--c-level); border-radius: var(--r-chip); font: 800 var(--fs-label)/1.2 var(--ff-display); text-transform: var(--label-transform, none); letter-spacing: var(--label-spacing, 0); transform: rotate(-6deg); }
.res-title { font: 800 var(--fs-h1)/1.1 var(--ff-display); }
.res-sub { color: var(--c-text-2); max-width: 44ch; }
.collect-res { width: 100%; max-width: 12.5rem; gap: 6px; }
.res-xp { list-style: none; width: 100%; max-width: 22.5rem; display: grid; gap: 6px; margin-top: var(--sp-2); }
.res-xp-row, .res-xp-total { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 12px; font-weight: 600; transition: opacity var(--d-base); }
.res-xp-row .num, .res-xp-total .num { font-family: var(--ff-num); font-weight: var(--fw-num, 800); }
.res-xp-total { border-top: 1px solid var(--c-line); padding-top: 8px; font-weight: 800; font-size: 1.125rem; }
.res-xp .is-pending { opacity: 0; }
.res-side { display: grid; background: var(--c-surface); border: var(--bw-card) solid var(--c-line); border-radius: var(--r-card); box-shadow: var(--sh-card); overflow: hidden; }
.res-row { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 64px; padding: 10px 14px; border-top: 1px solid var(--c-line); }
.res-side > .res-row:first-child { border-top: 0; }
.res-row > .ic { width: 32px; height: 32px; justify-self: center; color: var(--c-streak); }
.res-row .level-badge { width: 3.25rem; height: 3.5rem; justify-self: center; }
.res-row .level-badge-num { font-size: 1.375rem; }
.res-row .ring { width: 3rem; height: 3rem; justify-self: center; }
.res-row .ring-txt { font-size: var(--fs-xs); }
.res-row-body { display: grid; gap: 4px; min-width: 0; }
.res-row-title { font-weight: 700; }
.res-row-sub { font-size: var(--fs-sm); color: var(--c-text-2); }
.res-row .bar { height: 8px; }
.res-flag { padding: 4px 8px; border-radius: var(--r-chip); background: var(--c-level); color: var(--c-on-primary); font: 800 var(--fs-xs)/1.2 var(--ff-ui); white-space: nowrap; }
.res-badges .res-row-body, .res-mastery .res-row-body { grid-column: 1 / -1; }
/* Dagar i rad: veckoraden får hela radens bredd under rubrik och flagga (22 px prickar, 13 px text) */
.res-streak { row-gap: 4px; }
.res-streak .res-row-body { display: contents; }
.res-streak > .ic { grid-row: 1 / span 2; }
.res-streak .res-row-title { grid-column: 2; grid-row: 1; }
.res-streak .res-flag { grid-column: 3; grid-row: 1; justify-self: end; }
.res-streak .week { grid-column: 2 / -1; grid-row: 2; margin-top: 2px; }
/* Smal resultatlista vid stor text (mobil med 150–200 % text): ikonen/märket, texten och flaggan på var sin
   rad, så att orden får radens hela bredd. 14em = 238 px vid 100 % (gäller aldrig då). */
.res-side { container: res-side / inline-size; }
@container res-side (max-width: 14em) {
  .res-row { grid-template-columns: minmax(0, 1fr); }
  :root .res-side .res-row > *, :root .res-side .res-streak .res-row-body > * { grid-column: 1; grid-row: auto; }
  :root .res-side .res-row > :not(.res-row-body) { justify-self: start; }
}
.res-badge-list { list-style: none; display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; }
.res-badge-list .badge { width: 5.5rem; }
/* Knapparna ska synas utan att eleven själv skrollar, också när sekvensen är klar:
   600–999 px en klistrad rad längst ned, ≥ 1000 px överst i högerkolumnen (se nedan). Mobil: en knapp per
   rad, och sista steget i koreografin skrollar dem i bild.
   Från 600 px väljer result.js radbrytningen med fitLayout (ui/fit.js) efter knapparnas faktiska utrymme
   (data-fit), inte fönstrets bredd eller en uppskattad gräns: knapparnas bredd är text (växer med
   textstorleken) plus fasta px (padding, ikon, kant, mellanrum). Alla tre på en rad när de ryms ("row");
   annars "Öva igen" på en egen hel rad och de två andra lika breda under ("split", aldrig en ensam knapp på
   en andra rad); annars en knapp per rad (standard, också utan JS). Orden bryts aldrig mitt i. */
.res-actions-in { display: grid; gap: 10px; }
@media (min-width: 37.5em) {
  .res-actions .btn { gap: var(--sp-2); padding-left: 16px; padding-right: 16px; }
  .res-actions[data-fit="split"] .res-actions-in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .res-actions[data-fit="split"] .res-again { grid-column: 1 / -1; }
  .res-actions[data-fit="row"] .res-actions-in { display: flex; flex-wrap: nowrap; justify-content: center; }
  .res-actions[data-fit="row"] .btn { flex: 0 0 auto; }
}
@media (min-width: 37.5em) and (max-width: 62.49em) {
  /* Fast rad längst ned (en klistrad grid-del kan inte röra sig utanför sin egen rad). Sidan får
     motsvarande luft i botten, så att sista raden aldrig hamnar bakom knapparna. Radens verkliga höjd
     (--res-bar-h, mäts i result.js) gäller, eftersom knapparna kan ligga på två eller tre rader vid stor
     text; reserven före mätningen är en rad. scroll-padding: fokus och skrollning landar ovanför raden. */
  .screen-result { padding-bottom: calc(var(--res-bar-h, calc(var(--btn-h-lg) + var(--sp-6) + env(safe-area-inset-bottom))) + var(--sp-7)); }
  :root[data-screen="result"] { scroll-padding-bottom: calc(var(--res-bar-h, 0px) + var(--sp-3)); }
  .res-actions {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 5;
    padding: var(--sp-3) var(--gutter) calc(var(--sp-3) + env(safe-area-inset-bottom));
    background: var(--c-bg); border-top: var(--bw-card) solid var(--c-line);
  }
}
@media (min-width: 62.5em) {
  .screen-result { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: var(--sp-6); align-items: start; }
  .res-top { grid-column: 1 / -1; }
  .res-grid { display: contents; }
  .res-hero { grid-column: 1; grid-row: 2 / span 2; }
  .res-actions { grid-column: 2; grid-row: 2; }
  .res-actions-in { justify-content: flex-start; }
  .res-side { grid-column: 2; grid-row: 3; }
  .res-side { background: transparent; border: 0; box-shadow: none; gap: var(--sp-3); overflow: visible; }
  .res-row { border-top: var(--bw-card) solid var(--c-line); border: var(--bw-card) solid var(--c-line); border-radius: var(--r-card); background: var(--c-surface); box-shadow: var(--sh-card); }
  .res-side > .res-row:first-child { border-top: var(--bw-card) solid var(--c-line); }
}
/* Låg desktopskärm (Chromebook med webbläsarlist, 1366 × 657): XP-raderna i två kolumner så att
   "Totalt" ryms ovanför vecket */
@media (min-width: 62.5em) and (max-height: 820px) {
  .res-hero { gap: var(--sp-2); }
  .res-xp { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-4); max-width: 35rem; }
  .res-xp-total { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------- Flashcards (3.8) */
.screen-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); max-width: 45rem; }
.screen-cards .screen-head { margin-bottom: 0; flex-wrap: wrap; }
.fc-title { font-size: var(--fs-h2) !important; flex: 1 1 8ch; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc-count { font: 700 var(--fs-sm)/1 var(--ff-ui); color: var(--c-text-2); white-space: nowrap; }
.fc-stage { perspective: 1200px; }
/* Kortet växer med innehållet (inga fasta höjder på textytor, DESIGN 10): sidorna ligger i samma
   grid-cell och den synliga sidan bestämmer kortets höjd, minst clamp(280px, 52vh, 460px). Lång text
   eller 200 % textstorlek gör kortet högre och sidan skrollar som vanligt – inget klipps ovanför kortet
   och inget behöver skrollas inuti knappen (mellanslag vänder kortet). Sidan som är vänd bort ligger
   utanför flödet med kortets mått: en lång fråga ger inte ett tomt, uppblåst svarskort (eller tvärtom). */
.fc-card {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr);
  width: 100%; max-width: 40rem; margin: 0 auto; padding: 0;
  border: 0; background: transparent; color: inherit; text-align: center;
  transform-style: preserve-3d; transition: transform 420ms var(--e-out); cursor: pointer;
}
.fc-card[data-side="back"] { transform: rotateY(180deg); }
.fc-card.no-anim, .fc-card.no-anim .fc-face { transition: none !important; }
.fc-face {
  grid-area: 1 / 1; min-height: clamp(280px, 52vh, 460px); min-width: 0;
  display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 24px; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: var(--c-surface); border: var(--bw-card) solid var(--c-line); border-radius: var(--r-qcard); box-shadow: var(--sh-card);
}
.fc-face > * { max-width: 100%; }
.fc-card[data-side="front"] .fc-back, .fc-card[data-side="back"] .fc-front { position: absolute; inset: 0; overflow: hidden; }
.fc-back { transform: rotateY(180deg); background: var(--c-correct-soft); border-color: var(--c-correct); }
.fc-q { font: var(--fw-q) var(--fs-q)/var(--lh-q) var(--ff-read); max-width: min(30ch, 100%); }
.fc-a { font: 800 var(--fs-h2)/1.25 var(--ff-read); max-width: min(30ch, 100%); }
.fc-why { font: 400 var(--fs-body)/var(--lh-body) var(--ff-read); max-width: min(46ch, 100%); }
.fc-why-label { font-weight: 700; color: var(--c-text-2); }
.fc-hint { font-size: var(--fs-sm); color: var(--c-text-2); }
/* Bredvid varandra när båda etiketterna ryms på en rad, annars under varandra – orden bryts aldrig
   ("Behöve/r") och etiketterna radbryts inte. cards.js väljer med fitLayout (ui/fit.js, data-fit) efter
   knapparnas faktiska utrymme: etikett och tangentmärke växer med textstorleken, padding och kant är px. */
.fc-rate { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; width: 100%; max-width: 40rem; margin: 0 auto; }
.fc-rate[data-fit="row"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fc-rate .btn { min-width: 0; padding-left: 12px; padding-right: 12px; overflow-wrap: normal; }
/* Smalt fönster med mus (t.ex. 400 % zoom): tangentmärket tar platsen som knapptexten behöver för att
   rymmas på en rad. Kortkommandona (1 och 2) beskrivs under Inställningar och fungerar som vanligt. */
@media (max-width: 26em) { .fc-rate kbd.kbd-only { display: none !important; } }
.fc-done { display: grid; gap: var(--sp-3); text-align: center; justify-items: center; width: 100%; max-width: 40rem; margin: 0 auto; }
.fc-done h2 { font: 800 var(--fs-h2)/1.2 var(--ff-display); }
.fc-done-xp { font: 800 var(--fs-h3, 1.25rem)/1.2 var(--ff-display); color: var(--c-xp, currentColor); margin: 0; }
.fc-done-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
:root[data-motion="reduce"] .fc-card[data-side="back"] { transform: none; }
:root[data-motion="reduce"] .fc-back { transform: none; }
:root[data-motion="reduce"] .fc-face { transition: opacity 120ms linear; }
:root[data-motion="reduce"] .fc-card[data-side="front"] .fc-back,
:root[data-motion="reduce"] .fc-card[data-side="back"] .fc-front { opacity: 0; visibility: hidden; }

/* ---------------------------------------------------------------- Delad länk (3.9) */
.screen-share { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; }
.share-card { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: var(--sp-3); width: 100%; max-width: 40rem; }
.share-title { font: 800 var(--fs-h1)/1.1 var(--ff-display); max-width: 100%; }
/* Stora rubriker (även .screen-head h1 och .hello-title) krymper bara när deras längsta ord inte ryms på
   raden ("Fotosyntesen", "Inställningar" vid stor text på smal skärm): ui/fit.js fitText, aldrig under
   brödtextens storlek, så att de fortfarande växer med webbläsarens textstorlek. */
.share-meta { color: var(--c-text-2); }
.share-preview {
  width: 100%; text-align: left; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 12px 14px 12px 34px;
  background: var(--c-surface-2); border: var(--bw-card) solid var(--c-line); border-radius: var(--r-opt);
}
.share-actions { display: grid; gap: 10px; width: 100%; justify-items: center; }
.share-added { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; color: var(--c-correct-ink); }
.share-warn { max-width: 48ch; padding: 10px 12px; font-size: var(--fs-sm); font-weight: 600; text-align: left; background: var(--c-warn-soft); border: var(--bw-ui) solid var(--c-warn); border-radius: var(--r-opt); }
.share-note { display: inline-flex; align-items: flex-start; gap: 6px; font-size: var(--fs-sm); color: var(--c-text-2); text-align: left; }
.share-note .ic { width: 18px; height: 18px; }
.share-mascot { width: 96px; }
.skeleton { display: block; background: var(--c-surface-3); border-radius: 6px; }
.skeleton-line { height: 1em; width: 80%; margin: 0 auto; }
.share-preview .skeleton-line { margin: 0; }
.skeleton-short { width: 30%; }
.skeleton-mono { width: 72px; height: 72px; border-radius: var(--r-key); }

/* ---------------------------------------------------------------- Inställningar och Om (3.10) */
.screen-about { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); max-width: 47.5rem; }
/* Flikar (Erik 2026-10-26): en flik i taget, varje flik ryms på en skärm på dator */
.set-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px; border-radius: var(--r-card); background: var(--c-surface-2); }
.set-tab { flex: 1 1 auto; min-height: 44px; padding: 8px 14px; border: 0; border-radius: calc(var(--r-card) - 4px); background: transparent; color: var(--c-text-2); font: 700 var(--fs-sm)/1.2 var(--ff-ui); cursor: pointer; }
.set-tab[aria-selected="true"] { background: var(--c-surface); color: var(--c-text); box-shadow: 0 0 0 var(--bw-ui, 2px) var(--c-line-strong); }
.set-tab:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.set-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
.set-panel[hidden] { display: none; }
@media (min-width: 62.5em) {
  .screen-about { max-width: var(--maxw); }
  .set-panel-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .set-row { padding: 8px 0; }
  .set-help { margin-top: 0; }
  .about.card { columns: 2 22rem; column-gap: var(--sp-6); }
  .about.card > h2 { column-span: all; }
  .about.card :is(h3, p) { break-inside: avoid; }
  .screen-about .tp-preview { height: 130px; }
}
.screen-about .screen-head { margin-bottom: 0; }
.set-group > h2 { margin-bottom: var(--sp-3); }
/* Reglaget hamnar under texten när texten annars skulle få mindre än 9em (stor text på smal skärm) */
.set-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-4); padding: 12px 0; border-top: 1px solid var(--c-line); }
.set-row > :last-child:not(.set-text) { margin-left: auto; }
.set-group > h2 + .set-row { border-top: 0; }
.set-text { flex: 1 1 9em; min-width: 0; }
.set-label { font-weight: 700; cursor: pointer; }
.set-help { font-size: var(--fs-sm); color: var(--c-text-2); margin-top: 2px; }
.set-group > .set-help { margin: -4px 0 var(--sp-3); }
.set-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--sp-3); }
.set-import { position: relative; }
.set-import:focus-within { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.set-msg { min-height: 1.5em; margin-top: var(--sp-3); font-weight: 600; font-size: var(--fs-sm); }
.set-msg:empty { margin-top: 0; min-height: 0; }
:root:not([data-theme="arkad"]) [data-theme-only="arkad"],
:root:not([data-theme="godispop"]) [data-theme-only="godispop"] { display: none; }
.about h2 { margin-bottom: var(--sp-2); }
.about h3 { margin-top: var(--sp-4); }
.about p { margin-top: 4px; }
.about-version { text-align: center; font-size: var(--fs-sm); color: var(--c-text-2); }

/* ---------------------------------------------------------------- Toasts och dialoger (3.11) */
.toasts {
  position: fixed; z-index: var(--z-toast); left: 50%; top: calc(env(safe-area-inset-top) + 12px);
  transform: translateX(-50%); width: min(26.25rem, calc(100% - 2 * var(--gutter)));
  display: grid; gap: 8px; pointer-events: none;
}
.toast {
  pointer-events: auto; display: flex; align-items: center; gap: 10px; padding: 8px 6px 8px 14px;
  background: var(--c-surface-2); color: var(--c-text); border: var(--bw-card) solid var(--c-line); border-radius: var(--r-card); box-shadow: var(--sh-card);
  animation: toast-in 200ms var(--e-out) both; transition: opacity 200ms, transform 200ms;
}
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } }
.toast[data-leaving="true"] { opacity: 0; transform: translateY(-8px); }
.toast > .ic { color: var(--c-progress); }
.toast[data-tone="success"] > .ic { color: var(--c-correct-ink); }
.toast[data-tone="error"] > .ic { color: var(--c-wrong-ink); }
.toast-msg { flex: 1; font-weight: 600; font-size: var(--fs-sm); line-height: 1.35; }
.toast-close { border-color: transparent; background: transparent; }
.toast-action { flex: none; }

.dialog {
  width: min(30rem, calc(100% - 32px)); max-width: calc(100% - 32px); max-height: calc(100dvh - 32px); padding: var(--dlg-pad, 20px); /* max-width: webbläsarens standard (100% − 2em) gör dialogen smal vid stor text */
  background: var(--c-surface); color: var(--c-text);
  border: var(--bw-card) solid var(--c-line-strong); border-radius: var(--r-card); box-shadow: var(--sh-card);
}
.dialog::backdrop { background: color-mix(in srgb, var(--c-bg) 72%, transparent); }
.dialog-title { font: 800 var(--fs-h2)/1.2 var(--ff-display); margin-bottom: var(--sp-2); }
.dialog-text { margin-bottom: var(--sp-4); color: var(--c-text-2); }
.dialog-body { margin-bottom: var(--sp-4); }
/* Knapparna står kvar längst ned i dialogen när den är högre än fönstret (stor text på liten skärm) och
   dialogen öppnas överst (feedback.js), så att rubriken – vad det gäller – syns tillsammans med knapparna
   och texten däremellan skrollar. Utan skrollning: samma utseende som förut. */
.dialog-actions {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end;
  position: sticky; bottom: 0; z-index: 1; /* över dialogens padding: */
  margin: 0 calc(-1 * var(--dlg-pad, 20px)) calc(-1 * var(--dlg-pad, 20px)); padding: 0 var(--dlg-pad, 20px) var(--dlg-pad, 20px);
  background: var(--c-surface);
}
.dialog-actions:not(:last-child) { margin-bottom: 0; padding-bottom: var(--sp-3); }
.dialog-actions:not(:last-child) + .dialog-small { margin-top: 0; }
.dialog-sound .dialog-actions, .dialog-confirm .dialog-actions { flex-direction: row-reverse; justify-content: flex-start; }
/* Knapparna delar raden när de ryms (flex-basis = innehållet), annars får de varsin rad – texten bryts aldrig inuti knappen */
.dialog-sound .dialog-actions .btn { flex: 1 1 auto; }
.dialog-small { margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--c-text-2); }

/* ---------------------------------------------------------------- Smal skärm i förhållande till textstorleken
   Under 15em (360 px vid 150 % text, alla mobiler vid 200 %; aldrig vid 100 %) blir kortens inre marginaler
   mindre, så att orden får mer av raden och färre långa ord behöver brytas (5.1). Temana gör samma sak
   för sina egna mått. */
@media (max-width: 15em) {
  .card { padding: 10px; }
  .fc-face { padding: 16px 12px; }
  .q-card, .fb { padding-left: 10px; padding-right: 10px; }
  .dialog { --dlg-pad: 14px; }
  .share-preview { padding-left: 28px; padding-right: 10px; }
}

/* ---------------------------------------------------------------- Dölj kombo (funktion) */
:root[data-combo-ui="hide"] .hud-combo,
:root[data-combo-ui="hide"] .hud-lane,
:root[data-combo-ui="hide"] .combo-v,
:root[data-combo-ui="hide"] .chip-combo { display: none !important; }

/* ---------------------------------------------------------------- Rörelse (5.2) */
.theme-switching *, .theme-switching *::before, .theme-switching *::after { transition: none !important; }
:root[data-motion="reduce"] *, :root[data-motion="reduce"] *::before, :root[data-motion="reduce"] *::after {
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  transition-property: color, background-color, border-color, opacity, fill, stroke !important;
  transition-duration: 120ms !important;
  scroll-behavior: auto !important;
}
@media (prefers-reduced-motion: reduce) {
  :root:not(.js) *, :root:not(.js) *::before, :root:not(.js) *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ================================================================ Filuppladdning i Skapa (DESIGN 3.3b) */
.import { display: grid; gap: var(--sp-3); }
.import[data-drop="true"] { border-color: var(--c-progress); box-shadow: inset 0 0 0 2px var(--c-progress); }
.import-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.import-actions .btn { position: relative; flex: 1 1 11rem; }
.import-actions .btn:focus-within { outline: var(--focus-ring, 3px solid currentColor); outline-offset: var(--focus-offset, 3px); }
.import-actions .btn.is-disabled { opacity: .55; pointer-events: none; }
/* Filfältet ligger över hela knappen men syns inte: ett tryck eller Enter/mellanslag öppnar filväljaren */
.import-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 0; }
.import-status { display: grid; gap: 8px; padding: 12px; background: var(--c-surface-2); border: var(--bw-ui) solid var(--c-line); border-radius: var(--r-opt); }
.import-status-txt { font-weight: 600; }
.import-status .btn { justify-self: start; }
.import-result { display: grid; gap: var(--sp-3); }
.import-file-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.import-file { font-weight: 700; min-width: 0; }
.import-file-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.import-units {
  list-style: none; display: grid; gap: 4px; max-height: min(20rem, 55vh); overflow: auto; padding: 4px;
  background: var(--c-surface-2); border: var(--bw-ui) solid var(--c-line); border-radius: var(--r-opt);
}
.import-unit label { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px 10px; border-radius: var(--r-key); cursor: pointer; }
.import-unit label:has(input:focus-visible) { outline: var(--focus-ring, 3px solid currentColor); outline-offset: -2px; }
.import-unit input[type="checkbox"], .import-check input[type="checkbox"] { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--c-primary); cursor: pointer; }
.import-unit:has(input:checked) label { background: var(--c-progress-soft); }
.unit-body { display: grid; gap: 2px; min-width: 0; }
.unit-label { font-weight: 700; }
.unit-meta { font-size: var(--fs-sm); color: var(--c-text-2); }
.unit-preview { font-size: var(--fs-sm); color: var(--c-text-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.unit-preview:empty { display: none; }
.import-meter .bar::after { display: none; }
.import-ocr { display: grid; gap: var(--sp-3); padding: 12px; background: var(--c-surface-2); border: var(--bw-ui) solid var(--c-line); border-radius: var(--r-opt); }
.import-check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-weight: 600; }
.import-note { padding: 10px 12px; background: var(--c-correct-soft); border: var(--bw-ui) solid var(--c-correct); border-radius: var(--r-opt); font-size: var(--fs-sm); font-weight: 600; }
.create-or { display: flex; align-items: center; gap: 12px; color: var(--c-text-2); font-size: var(--fs-sm); font-weight: 600; }
.create-or::before, .create-or::after { content: ""; flex: 1; height: 1px; background: var(--c-line); }

/* ================================================================ Pluggsätt i quiz-översikten (DESIGN 3.5b) */
.ov-modes { container: modes / inline-size; }
.ov-modes .section-head { margin-bottom: 4px; }
.ov-modes-lead { color: var(--c-text-2); font-size: var(--fs-sm); margin-bottom: var(--sp-3); }
.mode-grid { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
@container modes (min-width: 32em) { .mode-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mode {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; height: 100%; min-height: 76px; padding: 12px 14px;
  color: inherit; text-decoration: none; background: var(--c-surface-2); border: var(--bw-ui) solid var(--c-line-strong); border-radius: var(--r-opt);
  transition: transform var(--d-press) var(--e-std), background-color var(--d-fast), border-color var(--d-fast); -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) { a.mode:hover { background: var(--c-hover); border-color: var(--c-progress); transform: var(--hover-transform, none); } }
a.mode:active { transform: var(--press-transform, none); }
.mode-icon { display: grid; place-items: center; width: 48px; height: 48px; background: var(--c-bg); border: var(--bw-ui) solid var(--c-line-strong); border-radius: var(--r-key); }
.mode-icon .ic { width: 28px; height: 28px; }
.mode-body { display: grid; gap: 2px; min-width: 0; }
.mode-title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font: 800 1.0625rem/1.2 var(--ff-btn); }
.mode-blurb { font-size: var(--fs-sm); color: var(--c-text-2); }
.mode-meta { font-size: var(--fs-xs); font-weight: 700; color: var(--c-text-2); }
.mode-go .ic { width: 20px; height: 20px; color: var(--c-text-2); }
.mode.is-off { border-style: dashed; border-color: var(--c-line); background: transparent; color: var(--c-text-2); cursor: not-allowed; }
.mode.is-off .mode-icon { border-color: var(--c-line); }
.mode.is-off .mode-icon .ic { opacity: .55; }
.ov-modes-note { margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--c-text-2); }
.ov-modes-note a { font-weight: 700; text-decoration: underline; }
.ov-tools-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.ov-tools .btn { min-width: 0; padding-left: 10px; padding-right: 10px; }
.ov-tools:is([data-fit="row"], [data-fit="col"]) .ov-tools-in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ov-tools[data-fit="col"] .btn { flex-direction: column; gap: 4px; min-height: 64px; padding: 6px 4px; font-size: var(--fs-sm); }
.load-modes-wrap { display: grid; gap: var(--sp-2); justify-items: center; width: 100%; }
.load-modes-title { font-size: var(--fs-sm); font-weight: 700; color: var(--c-text-2); }
.load-modes { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.load-done .load-modes .btn { width: auto; max-width: none; }
.unavailable { display: grid; gap: var(--sp-3); max-width: 40rem; margin: 0 auto; }
.unavailable-lead { font: 800 var(--fs-h3, 1.25rem)/1.25 var(--ff-display); }
.unavailable-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ================================================================ Para ihop och Lucktext (DESIGN 3.6b, 3.6c) */
.screen-game .game-center { gap: var(--sp-4); }
.match-intro { display: grid; gap: var(--sp-3); }
.match-intro-title { font: 800 var(--fs-h2)/1.2 var(--ff-display); }
.match-help { color: var(--c-text-2); font-size: var(--fs-sm); }
.match-board { display: grid; gap: var(--sp-3); }
.match-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
@media (min-width: 40em) { .match-cols { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: start; } }
.match-col-title { font: 700 var(--fs-sm)/1.2 var(--ff-ui); color: var(--c-text-2); margin-bottom: var(--sp-2); text-transform: var(--label-transform, none); letter-spacing: var(--label-spacing, 0); }
.match-list { display: grid; gap: 10px; }
.match-terms { container: mterms / inline-size; }
@media (max-width: 39.99em) { .match-terms .match-list[data-layout="grid"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.match-list.is-measuring .tile-text { overflow-wrap: normal; }
.tile {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 10px 12px; text-align: left;
  background: var(--c-surface-2); color: var(--c-text); border: var(--bw-ui) solid var(--c-line-strong); border-radius: var(--r-opt);
  font: var(--fw-opt) var(--fs-opt)/var(--lh-opt) var(--ff-read); -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none;
  transition: background-color var(--d-fast), border-color var(--d-fast), transform var(--d-press) var(--e-std), opacity 150ms linear;
}
/* Begreppen kan dras med pekaren (touch-action: none); förklaringarna skrollar sidan vid svep på touch */
.tile[data-side="term"] { touch-action: none; cursor: grab; }
.tile[data-side="def"] { touch-action: pan-y; }
.tile[data-side="def"] .tile-text { font-weight: 400; font-size: var(--fs-body); line-height: 1.4; }
.tile-key {
  display: grid; place-items: center; width: var(--key-size); height: var(--key-size); background: var(--c-bg); color: var(--c-text-2);
  border: var(--bw-ui) solid var(--c-line-strong); border-radius: var(--r-key); font: var(--fw-num, 800) 1rem/1 var(--ff-num);
}
.tile-text { min-width: 0; overflow-wrap: break-word; }
.tile-mark { display: grid; place-items: center; width: 24px; height: 24px; }
.tile-mark:empty { width: 0; }
@media (hover: hover) { .tile:not([aria-disabled="true"]):not([data-locked]):hover { background: var(--c-hover); border-color: var(--c-progress); } }
.tile[data-state="selected"], .tile[data-hover="true"] { background: var(--c-progress-soft); border-color: var(--c-progress); box-shadow: 0 0 0 2px var(--c-progress); }
.tile[data-dragging="true"] { opacity: .45; }
.tile[data-state="matched"] { background: var(--c-correct-soft); border-color: var(--c-correct); cursor: default; }
.tile[data-state="matched"] .tile-key { background: var(--c-correct); border-color: var(--c-correct); color: var(--c-on-correct); }
.tile[data-state="matched"] .tile-mark { color: var(--c-correct-ink); }
.tile[data-state="wrong"] { background: var(--c-wrong-soft); border-color: var(--c-wrong); }
.tile[data-state="wrong"] .tile-key { background: var(--c-wrong); border-color: var(--c-wrong); color: var(--c-on-wrong); }
.tile[data-state="wrong"] .tile-mark { color: var(--c-wrong-ink); }
.drag-ghost {
  position: fixed; left: 0; top: 0; z-index: var(--z-toast); max-width: min(18rem, 80vw); padding: 8px 12px; pointer-events: none; will-change: transform;
  background: var(--c-primary); color: var(--c-on-primary); border-radius: var(--r-opt); box-shadow: var(--sh-card); font: 700 var(--fs-sm)/1.3 var(--ff-ui);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
/* Klockan (Para ihop): chip i HUD-raden och en tunn stapel under den. Staplen ändras bara med transform. */
.hud-clock { display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 40px; padding: 4px 10px; background: var(--c-surface); border: var(--bw-card) solid var(--c-line); border-radius: var(--r-chip); }
.hud-clock .ic { width: 20px; height: 20px; color: var(--c-progress); }
.hud-clock-num { font: var(--fw-num, 800) 1.125rem/1 var(--ff-num); min-width: 2ch; text-align: right; }
.hud-time { height: 4px; background: var(--c-surface-3); overflow: hidden; }
.hud-time-fill { display: block; height: 100%; background: var(--c-progress); transform-origin: left center; transform: scaleX(var(--p, 1)); transition: transform 220ms linear; }
.screen-game[data-clock="low"] .hud-clock .ic, .screen-game[data-clock="low"] .hud-clock-num { color: var(--c-wrong-ink); }
.screen-game[data-clock="low"] .hud-time-fill { background: var(--c-wrong); }
.screen-game[data-clock="off"] .hud-clock, .screen-game[data-clock="off"] .hud-time { display: none; }
@container hudrow (max-width: 12em) { .hud-clock { padding-left: 6px; padding-right: 6px; gap: 3px; } .hud-clock .ic { display: none; } }

.cloze-board { display: grid; gap: var(--sp-4); }
.cloze-text {
  padding: 18px 20px; background: var(--c-surface); border: var(--bw-card) solid var(--c-line); border-radius: var(--r-qcard); box-shadow: var(--sh-card);
  font: 600 var(--fs-opt)/2.1 var(--ff-read); color: var(--c-text);
}
.gap {
  display: inline-flex; align-items: center; justify-content: center; gap: .25em; min-width: calc(var(--len, 6) * .56em + 1.2em); min-height: 1.8em; margin: 0 .1em; padding: 0 .45em;
  background: var(--c-surface-3); color: var(--c-text); border: 2px dashed var(--c-line-strong); border-radius: var(--r-key); font: inherit; font-weight: 800; vertical-align: baseline;
  -webkit-tap-highlight-color: transparent; transition: background-color var(--d-fast), border-color var(--d-fast);
}
.gap-blank { display: inline-block; min-height: 1em; }
.gap-mark { display: inline-grid; place-items: center; }
.gap-mark .ic { width: .9em; height: .9em; }
@media (hover: hover) { .gap[data-state="empty"]:hover { border-color: var(--c-progress); background: var(--c-progress-soft); } }
.gap[data-state="selected"], .gap[data-hover="true"] { border-style: solid; border-color: var(--c-progress); background: var(--c-progress-soft); box-shadow: 0 0 0 2px var(--c-progress); }
.gap[data-state="correct"] { border-style: solid; border-color: var(--c-correct); background: var(--c-correct-soft); cursor: default; }
.gap[data-state="correct"] .gap-mark { color: var(--c-correct-ink); }
.gap[data-state="revealed"] { border-style: solid; border-color: var(--c-line-strong); background: var(--c-surface-2); cursor: default; }
.gap[data-state="wrong"] { border-style: solid; border-color: var(--c-wrong); background: var(--c-wrong-soft); }
.gap[data-state="wrong"] .gap-mark { color: var(--c-wrong-ink); }
.bank { padding: var(--sp-3); background: var(--c-surface); border: var(--bw-card) solid var(--c-line); border-radius: var(--r-card); box-shadow: var(--sh-card); }
.bank-title { font: 700 var(--fs-sm)/1.2 var(--ff-ui); color: var(--c-text-2); margin-bottom: var(--sp-2); text-transform: var(--label-transform, none); letter-spacing: var(--label-spacing, 0); }
.bank-list { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.chip-word {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 14px; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none;
  background: var(--c-surface-2); color: var(--c-text); border: var(--bw-ui) solid var(--c-line-strong); border-radius: var(--r-opt); font: 700 var(--fs-opt)/1.2 var(--ff-read);
  -webkit-tap-highlight-color: transparent; transition: background-color var(--d-fast), border-color var(--d-fast), transform var(--d-press) var(--e-std), opacity 150ms linear;
}
@media (hover: hover) { .chip-word:not([data-locked]):hover { background: var(--c-hover); border-color: var(--c-progress); } }
.chip-key { color: var(--c-text-2); font: var(--fw-num, 800) var(--fs-xs)/1 var(--ff-num); }
.chip-word[data-state="selected"] { background: var(--c-progress-soft); border-color: var(--c-progress); box-shadow: 0 0 0 2px var(--c-progress); }
.chip-word[data-state="wrong"] { background: var(--c-wrong-soft); border-color: var(--c-wrong); }
.chip-word[data-dragging="true"] { opacity: .45; }
.cloze-tools { display: flex; justify-content: flex-end; }
.cloze-parts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
.cloze-part-label { margin: 0; font-weight: 800; }
.cloze-part-list { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.cloze-part-link { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; border-radius: var(--r-chip); border: var(--bw-ui, 2px) solid var(--c-line-strong); color: var(--c-text); font-weight: 800; text-decoration: none; background: var(--c-surface); }
.cloze-part-link[aria-current="page"] { background: var(--c-primary); color: var(--c-on-primary); border-color: transparent; }
.cloze-part-link:focus-visible { outline: 3px solid var(--c-focus, currentColor); outline-offset: 2px; }
/* Mobil och platta: ordbanken ligger kvar i nederkanten medan texten skrollas, så att ord och luckor syns samtidigt */
@media (max-width: 62.49em) { .bank { position: sticky; bottom: calc(8px + env(safe-area-inset-bottom)); z-index: 5; max-height: 40vh; overflow: auto; } }

/* Rensa pluggpaket på Hem (Erik 2026-10-22) */
.quizzes .section-head { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.quizzes .section-head .clean-toggle { margin-inline-start: auto; }
.clean-bar { position: sticky; bottom: calc(var(--sp-3) + env(safe-area-inset-bottom, 0px)); z-index: 5; display: grid; gap: var(--sp-2); padding: var(--sp-3); margin-block: var(--sp-2); border-radius: var(--r-card); background: var(--c-surface); border: var(--bw-ui, 2px) solid var(--c-line-strong); box-shadow: 0 8px 24px rgb(0 0 0 / .18); }
.clean-help { margin: 0; color: var(--c-text-2); font-size: var(--fs-sm); }
.clean-quick { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.clean-delete[disabled] { opacity: .5; cursor: not-allowed; }
.clean-label { cursor: pointer; }
.clean-check { inline-size: 26px; block-size: 26px; flex: none; accent-color: var(--c-wrong); margin: 0; }
.quiz-item.is-cleaning:has(.clean-check:checked) .quiz-link { outline: 3px solid var(--c-wrong); outline-offset: -3px; }


/* Märken: liten knapp på Hem som öppnar hela väggen i en ruta (Erik 2026-10-23) */
.badges-btn { display: flex; align-items: center; gap: var(--sp-3); width: 100%; text-align: start; cursor: pointer; font: inherit; color: inherit; padding: var(--sp-3) var(--sp-4); }
.badges-btn-icon { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--c-surface-2); color: var(--c-level); }
.badges-btn-icon .ic { width: 26px; height: 26px; }
.badges-btn-text { display: grid; gap: 2px; flex: 1; min-width: 0; }
.badges-btn-title { font: 800 var(--fs-h3, 1.15rem)/1.2 var(--ff-display); }
.badges-btn-count { font: 600 var(--fs-sm) var(--ff-ui); color: var(--c-text-2); margin-inline-start: 4px; }
.badges-btn-sub { color: var(--c-text-2); font-size: var(--fs-sm); }
.badges-btn.has-new .badges-btn-sub { color: var(--c-text); font-weight: 700; }
.badges-btn-medals { display: flex; }
.badges-btn-medals .badges-btn-medal { display: grid; place-items: center; width: 30px; height: 30px; margin-inline-start: -8px; border-radius: 50%; background: var(--c-surface-2); color: var(--c-level); border: 2px solid var(--c-surface); }
.badges-btn-medal .ic { width: 16px; height: 16px; }
.badges-btn .ic-chevron { flex: none; }
.badges-btn:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.dialog-badges { width: min(52rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); overflow: auto; }
.dialog-badges .badge-wall { gap: var(--sp-3) var(--sp-2); }
.dialog-badges .badges { overflow: visible; padding-bottom: var(--sp-3); }
.badges-btn-icon .ic { width: 30px; height: 30px; }

/* ---------------------------------------------------------------- Överskådligt på dator (Erik 2026-10-26)
   Rubrikerna lagom stora på dator, och på låga skärmar (Chromebook 1366×657) krymper avstånd, rubriker och
   frågetext något så att varje skärm ryms utan scroll. Mobil påverkas inte. */
@media (min-width: 62.5em) {
  html:root[data-theme] { --fs-h1: clamp(1.75rem, 1.2rem + 1.2vw, 2.4rem); }
  .create-grid .field-text .textarea { height: clamp(8rem, 28vh, 16rem); }
}
@media (min-width: 62.5em) and (max-height: 760px) {
  html:root[data-theme] {
    --sp-4: 12px; --sp-5: 14px; --sp-6: 18px; --sp-7: 22px; --sp-8: 28px; --sp-9: 36px;
    --fs-h1: 1.7rem; --fs-q: clamp(1.25rem, 1rem + .8vw, 1.6rem); --hud-h: 56px;
  }
  .card { padding: var(--sp-4); }
  .hello-mascot { max-width: 110px; }
}
@media (min-width: 62.5em) and (max-height: 760px) {
  /* Hem: lägre statistikrutor och hälsning */
  .profile-stats { grid-auto-rows: auto; }
  .stat { padding: 8px 10px; min-height: 0; }
  .hello { padding: 0; }
  .hello-sub { margin-top: 4px; }
  /* Lucktext och Para ihop: tätare text och hjälprad */
  .cloze-board { gap: var(--sp-3); }
  :root .cloze-text { line-height: 2.05; padding: var(--sp-4); }
  .match-help { font-size: var(--fs-xs); }
  .bank { padding: 8px var(--sp-3); }
  .bank-title { margin-bottom: 4px; }
  /* Skapa: kortare uppladdningsbeskrivning */
  .create-left .import > p { font-size: var(--fs-xs); }
  .create-left .import { padding: var(--sp-4); }
}
@media (min-width: 62.5em) and (max-height: 760px) {
  /* Hem: Märken-knappen och fotnoten flyttar till högerkolumnen när skärmen är låg */
  .home-grid { grid-template-rows: auto auto 1fr; }
  .home-side { grid-row: 1 / -1; }
  .home-main { grid-row: 1; }
  .home-grid > .badges-btn { grid-column: 2; grid-row: 2; }
  .home-grid > .home-foot { grid-column: 2; grid-row: 3; }
  /* Inställningar: lägre förhandsvisningar och tätare rader */
  .screen-about .tp-preview { height: 96px; }
  .screen-about .tp-meta { padding: 8px 12px 10px; }
  .screen-about .tp-name { font-size: 22px; }
  .set-row { padding: 6px 0; }
  .set-help { font-size: var(--fs-xs); }
  .para-board, .match-board { gap: var(--sp-3); }
}
@media (min-width: 62.5em) and (max-height: 760px) {
  /* Skapa: lägre textruta och tätare fält */
  .create-grid .field-text .textarea { height: 6.5rem; }
  .create-right .field { gap: 4px; }
  .create-right .warn-callout, .create-left .warn-callout { padding: 8px 10px; }
  /* Para ihop och Lucktext: tätare brickor */
  .match-list { gap: 6px; }
  :root .tile { padding-top: 6px; padding-bottom: 6px; min-height: 0; }
  .match-cols { gap: var(--sp-3); }
  .match-col-title { margin-bottom: 4px; }
}