/* =========================================================================
   Levla education prototype — components.
   Every value comes from tokens.css (colour, type, space, radius, elevation, motion);
   change the look there. Reference page: design/. Guide: docs/design-system.md.
   ========================================================================= */
@import url("tokens.css");

/* Plus Jakarta Sans, self-hosted (SIL OFL 1.1, fonts/LICENSE-OFL.txt) — no third-party font requests. */
@font-face {
  font-family: "Plus Jakarta Sans"; font-style: normal; font-display: swap; font-weight: 200 800;
  src: url(fonts/plus-jakarta-sans-latin-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans"; font-style: normal; font-display: swap; font-weight: 200 800;
  src: url(fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* Other scripts, self-hosted (SIL OFL 1.1, fonts/README.md): the instruction languages of Svenska för
   jobbet (Ukrainian, Arabic, Dari, Tigrinya) and the language menu, which names every language in its
   own script. One family behind every Latin font in the stack; unicode-range means a file is only
   downloaded when a page has that script. */
@font-face { font-family: "Levla Scripts"; font-style: normal; font-display: swap; font-weight: 100 900; src: url(fonts/noto-sans-cyrillic-wght-normal.woff2) format("woff2-variations"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Levla Scripts"; font-style: normal; font-display: swap; font-weight: 100 900; src: url(fonts/noto-sans-arabic-arabic-wght-normal.woff2) format("woff2-variations"); unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC; }
@font-face { font-family: "Levla Scripts"; font-style: normal; font-display: swap; font-weight: 100 900; src: url(fonts/noto-sans-ethiopic-ethiopic-wght-normal.woff2) format("woff2-variations"); unicode-range: U+030E,U+1200-1399,U+2D80-2DDE,U+AB01-AB2E; }
/* Thai: the looped style (heads on the letters) that schoolbooks and body text use — easier for weak readers than the loopless display style. */
@font-face { font-family: "Levla Scripts"; font-style: normal; font-display: swap; font-weight: 100 900; src: url(fonts/noto-sans-thai-looped-thai-wght-normal.woff2) format("woff2-variations"); unicode-range: U+0E01-0E5B; }

/* =========================================================================
   Base
   ========================================================================= */
* { box-sizing: border-box; }
html, body { margin: 0; }
/* Keep focused elements clear of the sticky header and tab bar (WCAG 2.4.11). */
html { scroll-padding: 76px 0 110px; }
body {
  background: var(--page-bg); background-color: var(--bg); color: var(--ink);
  font: var(--text-body)/var(--line-height) var(--font);
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
}
h1, h2, h3, .big-num, .brand { font-family: var(--font-head); font-weight: var(--head-weight); letter-spacing: var(--head-spacing); }
h1, h2 { text-transform: var(--head-transform); }
button, input, textarea { font: inherit; color: inherit; }
a { color: var(--accent-text); }
:focus-visible { outline: var(--focus); outline-offset: 2px; border-radius: var(--radius-2); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); }
.small { font-size: var(--text-small); }
.center { text-align: center; }
.left { text-align: start; align-self: stretch; }
.ic { display: inline-grid; place-items: center; width: 24px; height: 24px; flex: none; }
.ic svg { width: 100%; height: 100%; }
.ic.sm { width: 20px; height: 20px; }
.ic.lg { width: 44px; height: 44px; }
.ic.dim { opacity: .35; filter: grayscale(1); }

/* overflow-x: clip — cards and feedback slide in 24px from the side; without it the page
   scrolls sideways for a moment on a phone. clip (not hidden) keeps sticky headers working. */
.shell { max-width: var(--shell-width); margin: 0 auto; min-height: 100dvh; display: flex; flex-direction: column; padding: 0 var(--gutter); overflow-x: clip; }

/* ---------- header ---------- */
.top { display: flex; align-items: center; gap: 10px; min-height: 60px; margin: 0 calc(-1 * var(--gutter)); padding: 8px var(--gutter); position: sticky; top: 0; z-index: var(--z-bar); background: color-mix(in srgb, var(--bg) 80%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.top .spacer { flex: 1; }
.brand { font-size: var(--text-brand); text-decoration: none; color: var(--ink); }
.top-title { font-size: var(--text-title-l); margin: 0; }
.icon-btn { border: 0; background: transparent; min-width: var(--tap); height: var(--tap); border-radius: var(--radius-6); display: inline-grid; place-items: center; cursor: pointer; color: var(--ink); text-decoration: none; font-size: var(--text-title-m); }
.icon-btn:hover { background: var(--surface-2); }
.icon-btn.sm { min-width: 32px; height: 32px; }
.icon-btn.sm svg { width: 18px; height: 18px; }
.icon-btn svg { width: 24px; height: 24px; }

.lvl-chip { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--weight-heavy); font-size: var(--text-small); padding-block: 3px; padding-inline: 3px 12px; border-radius: var(--radius-pill); background: var(--surface); border: var(--border-w) solid var(--line); box-shadow: var(--shadow); white-space: nowrap; font-variant-numeric: tabular-nums; }
.lvl-ring { position: relative; width: 36px; height: 36px; display: grid; place-items: center; }
.lvl-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.lvl-track { fill: var(--surface); stroke: var(--xp-ring-track); stroke-width: 4; }
.lvl-text { display: grid; line-height: 1.1; }
.lvl-name { font-size: var(--text-footnote); }
.lvl-text .xp-num { font-size: var(--text-caption); font-weight: var(--weight-semibold); color: var(--muted); }
.lvl-fill { fill: none; stroke: var(--xp-ring); stroke-width: 4; stroke-linecap: round; transition: stroke-dashoffset var(--dur-ring) var(--ease-out); }
.lvl-num { position: relative; font-size: var(--text-label); font-weight: var(--weight-heavy); }
.lvl-chip.bump { animation: bump var(--dur-bump) var(--ease-spring); }
.lvl-chip.level-up .lvl-ring { animation: levelup var(--dur-level-up) var(--ease-spring); }
@keyframes levelup { 30% { transform: scale(1.5) rotate(-8deg); } 60% { transform: scale(1.2) rotate(6deg); } }
.level-card { display: flex; align-items: center; gap: 16px; background: var(--surface); border: var(--border-w) solid var(--line); box-shadow: var(--shadow); border-radius: var(--radius); padding: 16px; margin: 6px 0 12px; }
.level-card > div:last-child { flex: 1; }
.level-card h2 { margin: 0; font-size: var(--text-title-l); }
.level-card .bar span { background: var(--xp-bar); }
.level-badge { width: 64px; height: 64px; flex: none; border-radius: var(--radius-round); display: grid; place-items: center; font-size: var(--text-display-s); font-weight: var(--weight-heavy); background: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow-glow); }
.level-big { position: relative; width: 170px; height: 170px; display: grid; place-items: center; }
.level-big svg { position: absolute; inset: 0; }
.level-big .lvl-track { stroke-width: 10; fill: var(--surface); }
.level-big .lvl-fill { stroke-width: 10; }
.level-big b { position: relative; font-size: var(--text-level-lg); font-weight: var(--weight-heavy); line-height: 1; }
.big-sub { font-size: var(--text-title-m); font-weight: var(--weight-bold); margin: 0 0 4px; }
@keyframes bump { 40% { transform: scale(1.18); } }

/* language menu */
.lang { position: relative; }
.lang-btn { display: inline-flex; align-items: center; gap: 2px; height: var(--tap); padding-block: 0; padding-inline: 12px 8px; border-radius: var(--radius-pill); border: var(--border-w) solid var(--line); background: var(--surface); box-shadow: var(--shadow); font-weight: var(--weight-heavy); font-size: var(--text-small); cursor: pointer; }
.lang-btn .ic { width: 18px; height: 18px; }
.lang-btn[aria-expanded="true"] .ic { transform: rotate(180deg); }
.lang-list { position: absolute; inset-inline-end: 0; top: calc(100% + 6px); min-width: 180px; margin: 0; padding: 6px; list-style: none; background: var(--surface); border: var(--border-w) solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-menu); z-index: var(--z-menu); }
.lang-list li { display: flex; align-items: center; gap: 12px; min-height: var(--tap); padding: 0 12px; border-radius: var(--radius-5); cursor: pointer; }
.lang-list li:hover, .lang-list li:focus-visible { background: var(--surface-2); }
.lang-list li[aria-selected="true"] { font-weight: var(--weight-heavy); }
.lang-list li[aria-selected="true"]::after { content: "✓"; margin-inline-start: auto; color: var(--accent-text); }
.lang-short { font-weight: var(--weight-heavy); font-size: var(--text-footnote); width: 26px; color: var(--muted); }

/* bottom tabs */
.tabs { position: sticky; bottom: 0; margin: auto calc(-1 * var(--gutter)) 0; display: grid; grid-template-columns: repeat(3, 1fr); background: var(--tab-bg); border-top: var(--border-w) solid var(--line); box-shadow: var(--shadow-tabs); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); z-index: var(--z-bar); backdrop-filter: blur(10px); }
.tab { display: grid; justify-items: center; gap: 2px; padding: 6px 0; min-height: var(--control-h); color: var(--muted); text-decoration: none; font-size: var(--text-caption); font-weight: var(--weight-semibold); border-radius: var(--radius-6); }
.tab .ic { width: 26px; height: 26px; }
.tab[aria-current="page"] { color: var(--accent-text); }
.tab[aria-current="page"] .ic { background: var(--accent-soft); border-radius: var(--radius-pill); width: 56px; }

/* pages */
.page { flex: 1; display: flex; flex-direction: column; padding-bottom: 24px; }
.page.center { align-items: center; text-align: center; }
.greeting { font-size: var(--text-display-m); margin: 10px 0 14px; line-height: 1.15; }
.section-title { font-size: var(--text-lead); font-weight: var(--weight-bold); margin: 30px 0 10px; }
.eyebrow { text-transform: uppercase; letter-spacing: .06em; font-size: var(--text-caption); font-weight: var(--weight-bold); color: var(--accent-text); margin: 0 0 6px; }
.empty { display: grid; justify-items: center; text-align: center; gap: 6px; color: var(--muted); background: var(--surface); border: var(--border-w) dashed var(--line); box-shadow: var(--shadow); border-radius: var(--radius-sm); padding: 18px; margin: 0; }
.empty p { margin: 0; color: var(--muted); }
.empty-art { width: 170px; height: auto; }

/* buttons */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--control-h); padding: 12px 22px; border-radius: var(--btn-radius); font-weight: var(--weight-bold); font-size: var(--text-body); cursor: pointer; text-decoration: none; border: 0; transition: transform var(--dur-press), box-shadow var(--dur-press); }
.btn.primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 var(--btn-depth) 0 var(--accent-deep), var(--shadow-glow); }
.btn.primary:active { transform: translateY(var(--btn-depth)); box-shadow: 0 0 0 var(--accent-deep), var(--shadow-glow); }
.btn.primary[aria-disabled="true"] { background: var(--surface-2); color: var(--muted); box-shadow: none; cursor: not-allowed; }
.btn.ghost { background: var(--surface); color: var(--ink); border: 0; box-shadow: inset 0 0 0 1.5px var(--line), 0 var(--btn-depth) 0 var(--line); }
.btn.link { background: transparent; color: var(--muted); padding: 8px; min-height: var(--tap); }
.btn.danger { color: var(--bad); }
.row { display: flex; gap: 10px; flex-wrap: wrap; }
.row .btn { flex: 1; }

/* streak */
.streak-card { background: var(--surface); border: var(--border-w) solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); }
.streak-card.plain { margin: 16px 0; width: 100%; }
.streak-head { display: flex; align-items: center; gap: 12px; }
.streak-head h2 { font-size: var(--text-streak-title); margin: 0; }
.streak-head p { margin: 2px 0 0; }
.week { list-style: none; display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; padding: 0; margin: 16px 0 10px; }
.day { display: grid; justify-items: center; gap: 6px; }
.day-name { font-size: var(--text-caption); font-weight: var(--weight-bold); color: var(--muted); text-transform: uppercase; }
.day-dot { width: 38px; height: 38px; border-radius: var(--radius-round); display: grid; place-items: center; background: var(--surface-2); }
.day--active .day-dot { background: color-mix(in srgb, var(--flame) 22%, var(--surface)); }
.day--paused .day-dot { background: color-mix(in srgb, var(--pause) 20%, var(--surface)); }
.day--missed .day-dot { background: transparent; box-shadow: inset 0 0 0 2px var(--line); }
.day.is-today .day-dot { outline: 2px solid var(--accent); outline-offset: 3px; }
.day--active .ic, .ic.lg { color: var(--flame); }
.day--paused .ic, .pauses .ic, .notice--pause .ic { color: var(--pause); }
.day.is-today .day-name { color: var(--ink); }
.pauses { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 4px 0 0; font-size: var(--text-small); }
.notice { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; padding-block: 10px; padding-inline: 12px 6px; border-radius: var(--radius-sm); font-size: var(--text-small); font-weight: var(--weight-medium); }
.notice > span:nth-child(2) { flex: 1; }
.notice--pause { background: color-mix(in srgb, var(--pause) 12%, var(--surface)); border: var(--border-w) solid var(--pause); }
.notice--info { background: var(--warn-soft); border: var(--border-w) solid var(--warn); }

/* hero (continue) */
.hero { position: relative; overflow: hidden; background: var(--surface); border: var(--border-w) solid var(--line); border-radius: var(--radius); padding: 0 0 20px; display: grid; justify-items: center; text-align: center; box-shadow: var(--shadow); }
.hero-cover { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: 14px; }
.hero .eyebrow { margin: 0 16px 4px; }
.hero h2 { font-size: var(--text-title-xl); margin: 0 0 2px; }
.hero p { margin: 0 0 14px; }
.hero .btn { min-width: 200px; }
.hero-art { margin-bottom: 6px; }

/* panel: the plain card surface for new content (components.js panel()) */
.panel { background: var(--surface); border: var(--border-w) solid var(--line); border-radius: var(--radius); padding: var(--space-4); box-shadow: var(--shadow); }
.panel--sm { border-radius: var(--radius-sm); padding: var(--space-3); }

/* tiles */
.tiles { display: grid; gap: 16px; margin: 10px 0 12px; }
.tile { position: relative; display: flex; gap: 14px; align-items: center; background: var(--surface); border: var(--border-w) solid var(--line); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow); }
.tile:hover { border-color: var(--accent); transform: translateY(-2px); transition: transform var(--dur-hover); }
.tile:focus-within { outline: var(--focus); outline-offset: 2px; }
.tile-art { flex: none; display: grid; place-items: center; }
.tile-body { flex: 1; min-width: 0; }
.tile h3 { font-size: var(--text-lead); margin: 0 0 2px; line-height: 1.25; }
.tile .eyebrow { margin-bottom: 2px; }
.tile p { margin: 0; }
.tile a.stretch { color: var(--ink); text-decoration: none; display: inline-block; min-height: 24px; }
.tile a.stretch::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.tile a.stretch:focus-visible { outline: none; }
.heart { position: relative; z-index: 1; align-self: flex-start; border: 0; background: transparent; width: var(--tap); height: var(--tap); border-radius: var(--radius-round); display: grid; place-items: center; cursor: pointer; color: var(--muted); }
.heart svg { width: 24px; height: 24px; }
.heart.on { color: var(--heart); --heart-fill: var(--heart); }
.heart:hover { background: var(--surface-2); }
/* Progress bars (div/span). Not SVG rects: CSS height would override a scene bar's height. */
.bar:not(rect) { height: 8px; background: var(--progress-track); border-radius: var(--radius-pill); overflow: hidden; margin: 8px 0 4px; }
.bar span { display: block; height: 100%; background: var(--progress-fill); border-radius: var(--radius-pill); transition: width var(--dur-slow) var(--ease-out); }

/* education path */
.path-page h1 { font-size: var(--text-display-s); margin: 0 0 6px; line-height: 1.15; }
.path-page > p { margin: 0 0 6px; }

.node { position: relative; display: grid; place-items: center; min-height: 96px; }
.node-base { position: absolute; left: 50%; top: 58%; width: 150px; transform: translateX(-50%); z-index: 0; pointer-events: none; }
.node-base svg { display: block; width: 100%; height: auto; }
.node-badge { position: relative; z-index: 1; display: grid; }
.node--current .node-badge { animation: pulse var(--dur-pulse) ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.06); } }
.node-check { position: absolute; inset-inline-end: -2px; bottom: 2px; width: 28px; height: 28px; border-radius: var(--radius-round); display: grid; place-items: center; background: var(--good); color: var(--on-fill); border: 3px solid var(--bg); }

.step-card { position: relative; z-index: 1; width: 100%; background: var(--surface); border: var(--border-w) solid var(--accent); border-radius: var(--radius); padding: 18px; text-align: center; box-shadow: var(--shadow); }
.step-card h2 { font-size: var(--text-title-l); margin: 0 0 4px; }
.step-card .btn { width: 100%; margin-top: 10px; }
.step-card .row .btn { margin-top: 6px; }

/* stats + badges */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 8px 0 0; }
.stats div { background: var(--surface); border: var(--border-w) solid var(--line); box-shadow: var(--shadow); border-radius: var(--radius-sm); padding: 12px; text-align: center; }
.stats dt { font-size: var(--text-caption); color: var(--muted); font-weight: var(--weight-bold); }
.stats dd { margin: 2px 0 0; font-size: var(--text-stat); font-weight: var(--weight-black); font-family: var(--font-head); font-variant-numeric: tabular-nums; }
.badge-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.badge-cell { display: grid; justify-items: center; text-align: center; gap: 4px; padding: 12px 8px; border-radius: var(--radius-sm); background: var(--surface); border: var(--border-w) solid var(--line); box-shadow: var(--shadow); color: var(--ink); text-decoration: none; height: 100%; }
a.badge-cell:hover { border-color: var(--accent); }
.badge-name { font-weight: var(--weight-strong); font-size: var(--text-small); line-height: 1.25; }
.badge-art.locked, .trophy-art.locked, .medal-art.locked { filter: grayscale(1); opacity: .45; }
img.badge-art, img.trophy-art { display: block; }
.seg { border: 0; padding: 0; margin: 0 0 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.seg legend { font-weight: var(--weight-strong); margin-bottom: 8px; padding: 0; }
.seg-opt { position: relative; }
.seg-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg-opt span { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 16px; border-radius: var(--radius-pill); border: var(--border-w) solid var(--line); background: var(--surface); font-weight: var(--weight-semibold); font-size: var(--text-label); }
.seg-opt input:checked + span { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.seg-opt input:focus-visible + span { outline: var(--focus); outline-offset: 2px; }

/* ---------- player ---------- */
.player-top { gap: 12px; min-height: 68px; padding-top: 14px; padding-bottom: 10px; }
.progress { display: flex; gap: 4px; width: 100%; }
.progress span { flex: 1; height: 6px; border-radius: var(--radius-3); background: var(--progress-track); transition: background var(--dur-base); }
.progress span.on { background: var(--progress-fill); }
.stage { flex: 1; display: flex; flex-direction: column; padding-top: 12px; padding-bottom: 8px; cursor: default; }
.card { flex: 1; display: flex; flex-direction: column; animation: card-in var(--dur-card) var(--ease-out) both; }
.card.back { animation-name: card-in-back; }
@keyframes card-in { from { opacity: 0; transform: translateX(24px); } }
@keyframes card-in-back { from { opacity: 0; transform: translateX(-24px); } }
.visual { position: relative; background: var(--surface); border: var(--border-w) solid var(--line); border-radius: var(--radius); padding: 10px; margin: 4px 0 18px; box-shadow: var(--shadow); }
.card .visual { margin-bottom: 22px; }
.visual .replay { position: absolute; inset-inline-end: 4px; bottom: 4px; color: var(--muted); }
.card-title { font-size: var(--text-card-title); line-height: 1.25; margin: 0 0 16px; }
.card .eyebrow { margin-bottom: 10px; }
.card .body p { margin: 0 0 12px; }
.options { display: grid; gap: 10px; margin: 6px 0 12px; }
.option { display: flex; align-items: center; gap: 10px; text-align: start; background: var(--surface); border: var(--border-w) solid var(--line); border-radius: var(--radius-sm); padding: 13px 15px; min-height: var(--control-h); cursor: pointer; font-size: var(--text-callout); line-height: 1.35; box-shadow: var(--shadow); }
.option:hover:not([aria-disabled]) { border-color: var(--accent); }
.option[aria-disabled] { cursor: default; }
.option .mark { flex: none; }
.option.is-correct { border-color: var(--good); background: var(--good-soft); }
.option.is-correct .mark { color: var(--good); }
.option.is-wrong { border-color: var(--bad); background: var(--bad-soft); }
.option.is-wrong .mark { color: var(--bad); }
.feedback { border-radius: var(--radius-sm); padding: 12px 15px; background: var(--surface); border: var(--border-w) solid var(--line); box-shadow: var(--shadow); animation: card-in var(--dur-base) both; }
.feedback b { display: block; margin-bottom: 2px; }
.feedback.ok b { color: var(--good); }
.feedback.no b { color: var(--bad); }
.field { margin: 0 0 14px; }
.field-label { display: block; font-weight: var(--weight-strong); font-size: var(--text-label); margin-bottom: 6px; }
.field textarea, .field input[type="text"] { width: 100%; background: var(--surface); border: var(--border-w) solid var(--line); box-shadow: inset 0 0 0 1.5px var(--line); border-radius: var(--radius-sm); padding: 12px 14px; resize: vertical; }
.field textarea:focus, .field input:focus { outline: none; border-color: var(--accent-text); box-shadow: var(--ring-focus-soft); }
.field textarea::placeholder, .field input::placeholder { color: var(--muted); opacity: 1; }
.scale { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.scale button { display: grid; gap: 2px; border: var(--border-w) solid var(--line); box-shadow: inset 0 0 0 1.5px var(--line); background: var(--surface); border-radius: var(--radius-sm); padding: 8px 4px; min-height: 56px; cursor: pointer; font-size: var(--text-footnote); line-height: 1.2; }
.scale button b { font-size: var(--text-lead); }
.scale button[aria-checked="true"] { border-color: var(--accent-text); background: var(--accent-soft); }
.hint { color: var(--muted); font-size: var(--text-small); margin: -4px 0 12px; }
.points { list-style: none; padding: 0; margin: 4px 0 16px; display: grid; gap: 10px; }
.points li { background: var(--surface); border: var(--border-w) solid var(--line); box-shadow: var(--shadow); border-radius: var(--radius-sm); padding-block: 12px; padding-inline: 46px 14px; position: relative; }
.points li::before { content: "✓"; position: absolute; inset-inline-start: 14px; top: 12px; width: 22px; height: 22px; border-radius: var(--radius-round); background: var(--good); color: var(--on-fill); font-size: var(--text-caption); font-weight: var(--weight-heavy); display: grid; place-items: center; }
details summary { cursor: pointer; font-weight: var(--weight-strong); padding: 10px 0; min-height: var(--tap); }
.sources { font-size: var(--text-small); color: var(--muted); padding-inline-start: 20px; }
.sources li { margin-bottom: 6px; overflow-wrap: anywhere; }
.examples { display: grid; gap: 10px; margin: 6px 0 16px; text-align: start; width: 100%; }
.examples div { background: var(--surface); border: var(--border-w) solid var(--line); box-shadow: var(--shadow); border-radius: var(--radius-sm); padding: 12px 14px; white-space: pre-wrap; }
.examples small { display: block; color: var(--muted); font-weight: var(--weight-bold); font-size: var(--text-footnote); margin-bottom: 2px; }

.nav { display: flex; flex-direction: column; gap: 10px; padding: 12px 0 calc(14px + env(safe-area-inset-bottom)); position: sticky; bottom: 0; background: linear-gradient(to top, var(--bg) 80%, transparent); z-index: var(--z-nav); }
.nav-row { display: flex; gap: 10px; align-items: flex-start; }
.nav-row > .btn.ghost { width: 56px; padding: 0; flex: none; }
.nav-main { flex: 1; display: grid; gap: 4px; }
.nav-main .btn { width: 100%; }
.gate-hint { margin: 0; text-align: center; font-size: var(--text-small); color: var(--muted); min-height: 0; }
.gate-hint:empty { display: none; }
.gate-hint.shake { animation: shake var(--dur-enter); color: var(--bad); }
@keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

/* XP fly */
.xp-fly { position: fixed; z-index: var(--z-fly); pointer-events: none; font-weight: var(--weight-ultra); font-size: var(--text-lead); background: var(--xp); color: var(--xp-ink); padding: 4px 10px; border-radius: var(--radius-pill); box-shadow: var(--shadow-fly); }

/* tap hint */
.tap-hint { position: fixed; inset: 0; z-index: var(--z-overlay); background: var(--overlay-bg); color: var(--overlay-ink); display: flex; flex-direction: column; }
.tap-zones { flex: 1; display: grid; grid-template-columns: 1fr 2fr; }
.tap-back, .tap-fwd { display: grid; place-content: center; justify-items: center; gap: 10px; text-align: center; font-size: var(--text-lead); font-weight: var(--weight-semibold); padding: 12px; }
.tap-back { border-inline-end: 3px solid var(--accent); }
.tap-arrow svg { width: 32px; height: 32px; }
.tap-ring { width: 120px; height: 120px; border-radius: var(--radius-round); border: 3px solid var(--accent); animation: ring var(--dur-hint) ease-out infinite; }
@keyframes ring { from { transform: scale(.7); opacity: 1; } to { transform: scale(1.1); opacity: 0; } }
.tap-foot { padding: 16px 16px calc(20px + env(safe-area-inset-bottom)); display: grid; gap: 12px; text-align: center; max-width: 560px; margin: 0 auto; width: 100%; }
.tap-foot p { margin: 0; }

/* ---------- reward ---------- */
.reward { align-items: center; text-align: center; justify-content: center; padding-top: 24px; overflow: hidden; position: relative; }
.reward h1 { font-size: var(--text-display-l); margin: 12px 0 6px; line-height: 1.15; }
.reward .eyebrow { margin-top: 10px; color: var(--muted); }
.coin { width: 150px; height: 150px; border-radius: var(--radius-round); display: grid; place-items: center; background: var(--xp); box-shadow: 0 16px 34px -16px var(--xp); }
.coin svg { width: 80px; height: 80px; }
.coin svg path { fill: var(--coin-ink) !important; }
.big-num { font-size: var(--text-reward-num); line-height: 1; margin: 0; font-variant-numeric: tabular-nums; color: var(--accent-text); }
.xp-lines { list-style: none; padding: 0; margin: 20px 0 0; width: 100%; display: grid; gap: 8px; }
.xp-line { display: flex; justify-content: space-between; background: var(--surface); border: var(--border-w) solid var(--line); box-shadow: var(--shadow); border-radius: var(--radius-sm); padding: 12px 16px; font-weight: var(--weight-bold); font-size: var(--text-label); animation: line-in var(--dur-enter) var(--ease-out) both; }
.xp-line b { color: var(--accent-text); }
@keyframes line-in { from { opacity: 0; transform: translateY(14px) scale(.96); } }
.flame-big { width: 150px; height: 150px; }
.flame-big svg { width: 100%; height: 100%; }
.reward-art { margin: 8px 0; }
.badge-title { font-weight: var(--weight-heavy); font-size: var(--text-title-m); margin: 6px 0; font-family: var(--font-head); }
.recent { list-style: none; padding: 0; margin: 6px 0 0; display: flex; gap: 12px; justify-content: center; }
.recent li { width: 64px; height: 64px; display: grid; place-items: center; border-radius: var(--radius-7); }
.recent li.is-new { background: var(--accent-soft); outline: 2px solid var(--accent); }
.recent .slot { display: block; width: 48px; height: 48px; border-radius: var(--radius-round); background: var(--surface-2); }
.pop { animation: pop var(--dur-slow) var(--ease-spring) both; }
@keyframes pop { from { transform: scale(0); } }
/* .shine: a slot for a glow behind new badges (the flat look has none). */
.shine { position: relative; }
.confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.confetti i { position: absolute; top: -12px; width: 8px; height: 14px; border-radius: var(--radius-1); animation: fall var(--dur-fall) var(--ease-fall) both; }
@keyframes fall { to { transform: translate(var(--drift), 105vh) rotate(var(--rot)); opacity: .2; } }

/* ---------- prototype tools ---------- */

.swatch { width: 28px; height: 28px; border-radius: var(--radius-round); border: 2px solid #fff; flex: none; }
#dev-panel { position: fixed; right: 8px; top: 64px; z-index: var(--z-dev); display: grid; gap: 6px; padding: 10px; background: #1b1a17; color: #fff; border-radius: var(--radius-6); font: 600 13px system-ui, sans-serif; box-shadow: var(--shadow-dev); }
#dev-panel button { font: inherit; padding: 6px 10px; border-radius: var(--radius-4); border: 0; background: #ffffff26; color: #fff; cursor: pointer; }

/* Figtree, the app's font (self-hosted, SIL OFL 1.1). */
@font-face { font-family: "Figtree"; font-style: normal; font-display: swap; font-weight: 300 900; src: url(fonts/figtree-latin-wght-normal.woff2) format("woff2-variations"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Figtree"; font-style: normal; font-display: swap; font-weight: 300 900; src: url(fonts/figtree-latin-ext-wght-normal.woff2) format("woff2-variations"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20C0,U+2C60-2C7F,U+A720-A7FF; }


/* Cards with generated covers */
.tile--cover { flex-direction: column; align-items: stretch; padding: 0; gap: 0; overflow: hidden; }
.tile-cover { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--surface-2); }
.tile--cover .tile-body { padding: 14px 16px 16px; }
.tile--cover .heart { position: absolute; top: 10px; inset-inline-end: 10px; background: color-mix(in srgb, var(--surface) 90%, transparent); box-shadow: var(--shadow); }
.tile--cover h3 { font-size: var(--text-title-s); }
@media (min-width: 420px) { .page--explore .tiles, .page--library .tiles { grid-template-columns: 1fr 1fr; } }

/* Education path cover */
.path-cover { display: block; width: calc(100% + 2 * var(--gutter)); margin: 0 calc(-1 * var(--gutter)) 18px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0 0 var(--radius-lg) var(--radius-lg); }

/* Reward screens: generated spot art with the level ring tucked under it */
.reward-spot { width: min(260px, 70vw); height: auto; }
.reward-spot + .level-big { width: 112px; height: 112px; margin-top: -26px; }
.reward-spot + .level-big b { font-size: var(--text-level-sm); }

/* Flat edition player: tap the sides, no visible buttons; more air at the top. */
.nav--tap { gap: 8px; padding-top: 18px; cursor: pointer; }
.nav--tap .nav-row { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.nav--tap .nav-row:focus-within { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; }
.nav--tap .gate-hint { margin-bottom: 2px; }

/* Streak card: pauses top-right, no explanation text. */
.streak-head { display: grid; grid-template-columns: auto 1fr auto; column-gap: 12px; row-gap: 2px; align-items: center; }
.streak-head > .ic { grid-row: span 2; align-self: start; }
.streak-head h2 { min-width: 0; }
.streak-head .streak-sub { grid-column: 2 / 4; margin: 0; }
.pause-chip { display: inline-flex; align-items: center; gap: 4px; margin: 2px 0 0; padding-block: 4px; padding-inline: 6px 10px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--pause) 12%, var(--surface)); font-size: var(--text-footnote); white-space: nowrap; flex: none; }
.pause-chip .ic { color: var(--pause); }

/* Flat edition: the education as a trail of footsteps. */
.trail { list-style: none; margin: 18px 0 40px; padding: 0; overflow-x: clip; }
.trail-step { display: grid; align-items: center; gap: 14px; }
.trail-step--left { grid-template-columns: 104px 1fr; }
.trail-step--right { grid-template-columns: 1fr 104px; }
.trail-step--right .node { order: 2; }
.trail-step--right .trail-label { text-align: end; }
.trail-step--current, .trail-step--trophy { justify-items: center; text-align: center; gap: 10px; }
.trail-step .node { min-height: 92px; }
.trail-name { font-weight: var(--weight-bold); font-size: var(--text-callout); line-height: 1.3; color: var(--ink); text-decoration: none; }
a.trail-name:hover { text-decoration: underline; }
.trail-step--locked .trail-name { color: var(--muted); }
.trail-gap { position: relative; height: 92px; }
.foot { position: absolute; width: 9px; height: 15px; border-radius: 50% 50% 45% 45% / 60% 60% 40% 40%; background: var(--line); }
.foot::before { content: ""; position: absolute; left: 50%; top: -5px; width: 7px; height: 4px; margin-left: -3.5px; border-radius: var(--radius-round); background: inherit; }
.trail-gap--walked .foot--a { background: color-mix(in oklab, var(--trail-mid) var(--p), var(--trail-start)); }
.trail-gap--walked .foot--b { background: color-mix(in oklab, var(--trail-end) var(--p), var(--trail-mid)); }
.trail-gap--walked .foot:nth-child(-n+2) { opacity: .8; }
.trail-gap--into .foot { animation: step-in var(--dur-bump) var(--ease-spring-soft) both; animation-delay: calc(var(--i) * var(--stagger) + 200ms); }
@keyframes step-in { from { opacity: 0; scale: .3; } }
.trail-step--current .step-card { margin-top: 2px; }
/* Unit headings on the path/trail: a label between stretches of courses. */
.unit-head { position: relative; z-index: 1; text-align: center; margin: 8px auto 4px; max-width: 30ch; }
.unit-head .eyebrow { margin: 0 0 2px; }
.unit-head h2 { font-size: var(--text-body); margin: 0; line-height: 1.3; display: inline-flex; align-items: center; gap: 6px; background: var(--bg); padding: 0 8px; }
.unit-check { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: var(--radius-round); background: var(--accent); color: var(--accent-ink); }

/* State styles win over component styles (answer feedback, choices, focus): :root lifts them. */
:root .option.is-correct { border-color: var(--good); background: var(--good-soft); }
:root .option.is-wrong { border-color: var(--bad); background: var(--bad-soft); }
:root .scale button[aria-checked="true"] { border-color: var(--accent-text); background: var(--accent-soft); }

:root :is(.field textarea, .field input):focus { outline: none; border-color: var(--accent-text); box-shadow: var(--ring-focus-soft); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .confetti { display: none; }
}

/* ---------- animation library (anim.js) ---------- */
.scene { display: block; width: 100%; height: auto; overflow: visible; }
.scene .t { fill: var(--ink); font-family: inherit; }
.scene .t.muted { fill: var(--muted); }
.scene .t.accent { fill: var(--accent-text); }
.scene .t.good { fill: var(--good); }
.scene .t.bad { fill: var(--bad); }
.scene .t.warn { fill: var(--warn); }
.scene .t.on-fill { fill: var(--on-fill); }
.scene .dot { fill: var(--ink); }
.scene .box { fill: var(--bg); stroke: var(--line); stroke-width: 1.5; }
.scene .box.dashed { fill: none; stroke-dasharray: 5 4; }
.scene .accent-stroke { stroke: var(--accent); }
.scene .warn-stroke { stroke: var(--warn); }
.scene .muted-stroke { stroke: var(--muted); }
.scene .ink-stroke { stroke: var(--ink); }
.scene .accent-soft { fill: var(--accent-soft); }
.scene .warn-soft { fill: var(--warn-soft); }
.scene .good-soft { fill: var(--good-soft); }
.scene .bad-soft { fill: var(--bad-soft); }
.scene .accent-fill-soft { fill: var(--accent-soft); stroke: var(--accent); }
.scene .stroke { fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.scene .stroke.thick { stroke-width: 3; }
.scene .stroke.dashed { stroke-dasharray: 4 4; }
.scene .ring { fill: none; stroke-width: 2; }
.scene .accent-fill, .scene .fill-accent { fill: var(--accent); }
.scene .good-fill { fill: var(--good); }
.scene .warn-fill { fill: var(--warn); }
.scene .bad-fill { fill: var(--bad); }
.scene .ink-fill, .scene .fill-ink { fill: var(--ink); }
.scene .fill-muted { fill: var(--muted); }
.scene .bar { fill: var(--accent); }
.scene .warn-bar { fill: var(--warn); }
.scene .muted-bar { fill: color-mix(in srgb, var(--accent) 38%, var(--surface)); }
.scene .tri { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; }
.scene .veil { fill: var(--surface); opacity: .72; }
.scene .cell { stroke: var(--surface); stroke-width: 1; }
.scene .good-cell { fill: var(--good-soft); }
.scene .warn-cell { fill: var(--warn-soft); }
.scene .bad-cell { fill: var(--bad-soft); }
.scene .marker { fill: var(--ink); stroke: var(--surface); stroke-width: 3; }
/* Office scenes: spreadsheet cells, key caps, board columns, the pointer. */
.scene .sheet-cell { fill: var(--surface); stroke: var(--line); stroke-width: 1; }
.scene .sheet-active { stroke-width: 2.5; }
.scene .keycap { fill: var(--surface); stroke: var(--line); stroke-width: 1.5; }
.scene .keycap-shadow { fill: var(--line); stroke: none; }
.scene .board-col { fill: var(--surface-2); stroke: none; }
.scene .board-card { fill: var(--surface); }
.scene .cursor { fill: var(--ink); stroke: var(--surface); stroke-width: 1.5; stroke-linejoin: round; }
/* Traffic scenes: fixed traffic colours, the same in every design and theme. */
.scene .road { fill: var(--traffic-road); }
.scene .verge { fill: var(--traffic-verge); }
.scene .mark { fill: var(--traffic-marking); }
.scene .mark-line { fill: none; stroke: var(--traffic-marking); stroke-width: 2.5; }
.scene .mark-line.thin { stroke-width: 1.6; }
.scene .mark-line.dashed-center { stroke-dasharray: 7 9; stroke-width: 2; }
.scene .ring.mark-line { stroke-width: 2; }
.scene .route { fill: none; stroke: var(--traffic-marking); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .55; }
.scene .route-me { stroke: var(--traffic-me); opacity: .9; }
.scene .veh { fill: var(--traffic-vehicle); stroke: var(--traffic-dark); stroke-width: 1.2; }
.scene .veh.me { fill: var(--traffic-me); }
.scene .veh.bus, .scene .veh.truck { fill: var(--traffic-bus); }
.scene .veh.bike { fill: var(--traffic-bike); }
.scene .veh.ped { fill: var(--traffic-pedestrian); }
.scene .veh-glass { fill: var(--traffic-dark); opacity: .55; }
.scene .housing { fill: var(--traffic-dark); }
.scene .lamp-off { fill: var(--traffic-lamp-off); }
.scene .lamp-red { fill: var(--traffic-red); }
.scene .lamp-yellow { fill: var(--traffic-yellow); }
.scene .lamp-green { fill: var(--traffic-green); }
.scene .lamp-red-ink .lamp-arrow { fill: var(--traffic-red); }
.scene .lamp-yellow-ink .lamp-arrow { fill: var(--traffic-yellow); }
.scene .lamp-green-ink .lamp-arrow { fill: var(--traffic-green); }
.scene.run .blink { animation: k-blink 1s steps(2, jump-none) 4; }
@keyframes k-blink { 50% { fill: var(--traffic-lamp-off); } }

/* Final state = natural style. Keyframes only describe where an element comes from. */
.scene.run .a { animation-duration: var(--dur, 600ms); animation-delay: var(--d, 0ms); animation-fill-mode: both; animation-timing-function: var(--ease-out); }
.scene .a-pop, .scene .a-grow, .scene .a-growy, .scene .a-up { transform-box: fill-box; }
.scene .a-pop { transform-origin: center; }
.scene .a-grow { transform-origin: left center; }
.scene .a-growy { transform-origin: center bottom; }
.scene.run .a-fade { animation-name: k-fade; }
.scene.run .a-up { animation-name: k-up; }
.scene.run .a-pop { animation-name: k-pop; animation-timing-function: var(--ease-spring-soft); }
.scene.run .a-draw { animation-name: k-draw; }
.scene.run .a-grow { animation-name: k-grow; }
.scene.run .a-growy { animation-name: k-growy; }
.scene.run .a-veil { animation-name: k-veil; }
.scene.run .a-glow { animation-name: k-glow; animation-duration: 1400ms; }
.scene .a-draw { stroke-dasharray: 1; stroke-dashoffset: 0; }
.scene .a-draw.dashed { stroke-dasharray: 1; }
@keyframes k-fade { from { opacity: 0; } }
@keyframes k-up { from { opacity: 0; transform: translateY(8px); } }
@keyframes k-pop { from { opacity: 0; transform: scale(.4); } }
@keyframes k-draw { from { stroke-dashoffset: 1; } }
@keyframes k-grow { from { transform: scaleX(0); } }
@keyframes k-growy { from { transform: scaleY(.25); } }
@keyframes k-veil { from { opacity: 0; } }
@keyframes k-glow { 0% { opacity: 0; } 30% { opacity: 1; r: 13; } 60% { r: 9; } }
@media (prefers-reduced-motion: reduce) {
  .scene.run .a { animation: none !important; }
  .card, .feedback, .done-badge { animation: none !important; }
}

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

/* Practice card: generated problems, own number keypad, feedback with the trick's steps. */
.practice { display: grid; gap: 12px; margin-top: 8px; }
.practice-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.chip-toggle { font: inherit; font-size: var(--text-footnote); padding: 6px 12px; border-radius: var(--radius-pill); border: var(--border-w) solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; min-height: var(--control-h-sm); }
.chip-toggle.on { border-color: var(--accent); background: var(--accent-soft); }
.practice-prompt { font-size: var(--text-display-m); font-weight: var(--weight-heavy); line-height: 1.25; margin: 4px 0; text-align: center; font-variant-numeric: tabular-nums; }
.practice-prompt.sheet-q { font-size: var(--text-lead); font-weight: var(--weight-bold); line-height: 1.35; text-align: start; }
.practice-prompt.is-mid { font-size: var(--text-title-l); font-weight: var(--weight-strong); line-height: 1.3; }
.practice-prompt.is-long { font-size: var(--text-lead); font-weight: var(--weight-semibold); line-height: 1.4; text-align: start; }
/* Spreadsheet items: a small grid like Excel's, formula bar on top. */
.sheet-wrap { display: grid; gap: 6px; overflow-x: auto; }
.fx-bar { display: flex; align-items: center; gap: 8px; font-size: var(--text-label); }
.fx-ref { min-width: 44px; text-align: center; font-weight: var(--weight-bold); padding: 4px 6px; border: 1px solid var(--line); border-radius: var(--radius-3); background: var(--surface); }
.fx-label { color: var(--muted); font-weight: var(--weight-bold); font-style: italic; }
.fx-formula { flex: 1; font-family: inherit; font-weight: var(--weight-medium); padding: 4px 8px; border: 1px solid var(--line); border-radius: var(--radius-3); background: var(--surface); overflow-wrap: anywhere; }
.sheet { border-collapse: collapse; font-size: var(--text-footnote); line-height: 1.25; font-variant-numeric: tabular-nums; background: var(--surface); width: 100%; }
.sheet th { color: var(--muted); font-size: var(--text-micro); font-weight: var(--weight-bold); background: var(--surface-2); padding: 1px 5px; border: 1px solid var(--line); }
.sheet td { border: 1px solid var(--line); padding: 2px 6px; white-space: nowrap; }
.sheet td.num { text-align: right; }
.sheet td.active { outline: 2px solid var(--accent); outline-offset: -2px; }
.sheet td.ask { background: var(--accent-soft); font-weight: var(--weight-heavy); text-align: center; }
.practice-input { min-height: 56px; display: grid; place-items: center; font-size: var(--text-display-s); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; border: 2px solid var(--line); border-radius: var(--radius); background: var(--surface); letter-spacing: .02em; }
.practice-input.ok { border-color: var(--good); background: var(--good-soft); }
.practice-input.no { border-color: var(--bad); background: var(--bad-soft); }
.practice-input .caret { width: 2px; height: 28px; background: var(--accent); animation: blink var(--dur-blink) steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .practice-input .caret { animation: none; } }
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.key { font: inherit; font-size: var(--text-title-l); font-weight: var(--weight-bold); min-height: var(--control-h); border-radius: var(--radius-7); border: var(--border-w) solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; touch-action: manipulation; }
.key:active { background: var(--surface-2); }
.key-answer { grid-column: 1 / -1; min-height: var(--control-h); }
.key-answer[aria-disabled="true"] { opacity: .5; }
/* Letter keypad (kind "text"): more, smaller keys. */
.keypad-text { grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); }
.keypad-text .key { font-size: var(--text-title-s); min-height: 48px; }
.practice .feedback { display: grid; gap: 6px; }
.practice .steps { margin: 0; padding-inline-start: 20px; font-variant-numeric: tabular-nums; }
.practice .steps li { margin: 2px 0; }
.practice-done { text-align: center; }
.practice-done.ok { background: var(--good-soft); }
.practice-done.mid { background: var(--warn-soft); }
.practice-done.mid b { color: var(--warn); }
.practice-done.no { background: var(--bad-soft); }
.practice-done b { font-size: var(--text-title-m); }
.practice-done .practice-score { font-weight: var(--weight-bold); }

/* Free practice entry points: on top of the tile's stretched link, small and quiet. */
.btn.small { min-height: var(--control-h-sm); padding: 6px 14px; font-size: var(--text-small); width: auto; }
.tile-action { position: relative; z-index: 2; margin-top: 8px; align-self: flex-start; }
.trail-practice { display: block; width: fit-content; margin-top: 4px; font-size: var(--text-small); font-weight: var(--weight-bold); color: var(--accent-text); text-decoration: none; position: relative; z-index: 2; }
.trail-practice::before { content: "↻ "; }
.unit-head .unit-practice { margin-top: 6px; }
.trail-step--right .trail-practice { margin-inline-start: auto; }

/* ---------- Provträning (mock tests) ---------- */
.exam-tile { display: grid; gap: 2px; margin: 14px 0 6px; padding: 14px 16px; border-radius: var(--radius); background: var(--accent-soft); color: var(--ink); text-decoration: none; border: 2px solid var(--accent); }
.exam-tile b { font-size: var(--text-lead); }
.exam section { margin: 18px 0; }
.exam h2 { font-size: var(--text-title-s); margin: 0 0 4px; }
.exam h3.eyebrow { margin: 14px 0 6px; }
.exam-card { background: var(--surface); border: var(--border-w, 1px) solid var(--line); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); }
.exam-card--current { border-color: var(--accent); }
.exam-card .row { margin-top: 10px; align-items: center; }
.exam-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.exam-list { list-style: none; padding: 0; margin: 0; }
.exam-list li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 2px; border-bottom: 1px solid var(--line); }
.exam-list a { font-weight: var(--weight-medium); }
.pill { display: inline-block; padding: 2px 10px; border-radius: var(--radius-pill); font-size: var(--text-footnote); font-weight: var(--weight-bold); }
.pill.ok { background: var(--good-soft); color: var(--good); }
.pill.no { background: var(--bad-soft); color: var(--bad); }
.pill.big { font-size: var(--text-callout); padding: 4px 14px; margin: 0 0 6px; }
.exam-run { padding-bottom: 32px; }
.exam-run .progress { display: block; height: 6px; background: var(--surface-2); border-radius: var(--radius-pill); overflow: hidden; margin: 2px 0 14px; }
.exam-run .progress span { display: block; height: 100%; background: var(--accent); }
.exam-count { font-weight: var(--weight-bold); font-size: var(--text-label); margin-inline-start: 6px; }
.exam-clock { font-variant-numeric: tabular-nums; font-weight: var(--weight-bold); padding: 4px 10px; border-radius: var(--radius-pill); background: var(--surface-2); }
.exam-clock.low { background: var(--bad-soft); color: var(--bad); }
.exam-sign { display: flex; justify-content: center; margin: 4px 0 12px; }
.exam-sign img { width: 132px; height: 132px; object-fit: contain; }
.exam-sign-sm { width: 56px; height: 56px; object-fit: contain; float: inline-end; margin-block: 0 6px; margin-inline: 10px 0; }
.option.is-picked { border-color: var(--accent); background: var(--accent-soft); }
.exam-nav { display: flex; justify-content: space-between; gap: 10px; margin: 16px 0 8px; }
.exam-nav .btn { flex: 1; }
.exam-overview { margin-top: 10px; }
.exam-overview summary { cursor: pointer; color: var(--muted); font-size: var(--text-small); padding: 6px 0; }
.exam-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 6px; margin: 8px 0 12px; }
.exam-grid button { height: 38px; border-radius: var(--radius-4); border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: var(--text-footnote); cursor: pointer; }
.exam-grid button.done { background: var(--accent-soft); border-color: var(--accent); }
.exam-grid button.here { outline: 2px solid var(--ink); outline-offset: 1px; }
.exam-areas ul { list-style: none; padding: 0; margin: 0; }
.exam-areas li { display: grid; grid-template-columns: 1fr auto; gap: 0 10px; align-items: center; margin: 8px 0; }
.exam-areas .bar { grid-column: 1 / -1; margin: 4px 0 0; }
.exam-area-name { font-weight: var(--weight-medium); font-size: var(--text-label); }
.exam-wrong ol { padding-inline-start: 20px; }
.exam-miss { margin: 0 0 18px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.exam-miss p { margin: 4px 0; }
.exam-miss-q { font-weight: var(--weight-medium); }
.is-wrong-text { color: var(--bad); }
.is-right-text { color: var(--good); }
.exam .row .btn { flex: 1 1 150px; text-align: center; }

/* ---------- spoken Swedish and language cards (Svenska för jobbet) ---------- */
.play-btn { flex: none; width: var(--tap); height: var(--tap); border-radius: var(--radius-round); border: 0; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; cursor: pointer; }
.play-btn[disabled] { background: var(--surface-2); color: var(--muted); cursor: not-allowed; }
.play-icon { width: 0; height: 0; margin-left: 4px; border-style: solid; border-width: 9px 0 9px 15px; border-color: transparent transparent transparent currentColor; }
.play-btn.playing .play-icon { margin: 0; width: 14px; height: 16px; border: 0; border-left: 5px solid currentColor; border-right: 5px solid currentColor; }
.say { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; background: var(--surface); border-radius: var(--radius-sm); padding: 10px 14px 10px 10px; margin: 8px 0; box-shadow: var(--shadow); }
.say-body { flex: 1; display: grid; justify-items: start; gap: 2px; min-width: 0; }
/* Speed: an icon in the row's corner opens Normal / Långsamt underneath. */
.speed-toggle { flex: none; align-self: flex-start; margin-block: -4px; margin-inline-end: -8px; color: var(--muted); }
.speed-toggle[aria-expanded="true"] { color: var(--accent-text); background: var(--accent-soft); }
.say-speeds { flex-basis: 100%; display: flex; gap: 8px; }
.say-speeds[hidden] { display: none; }
.speed-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--tap); padding: 0 12px; border-radius: var(--radius-pill); border: 0; background: var(--accent-soft); color: var(--accent-text); font: inherit; font-size: var(--text-label); font-weight: var(--weight-bold); cursor: pointer; }
.speed-btn.playing { background: var(--accent); color: var(--accent-ink); }
.say-text { font-size: var(--text-lead); font-weight: var(--weight-semibold); line-height: 1.35; overflow-wrap: anywhere; }
.say--hidden .say-text, .say--hidden .say-gloss { display: none; }
.say .show-text { padding: 0; min-height: 0; justify-self: start; text-decoration: underline; }
.phrases { margin: 8px 0 12px; }
.phrases .say { margin: 6px 0; }
.phrases .say-text { font-size: var(--text-body); }
.option-row { display: flex; align-items: center; gap: 8px; }
.option-row .option { flex: 1; min-width: 0; }
/* Spoken explanations in the instruction language (Svenska för jobbet): a speaker button next
   to the text it reads. Only rendered where a clip exists. */
.listen-btn { flex: none; width: var(--tap); height: var(--tap); border-radius: var(--radius-round); border: var(--border-w) solid var(--line); background: var(--surface); color: var(--accent-text); display: inline-grid; place-items: center; cursor: pointer; vertical-align: middle; padding: 0; }
.listen-btn svg { width: 22px; height: 22px; }
.listen-btn.playing { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.title-row { display: flex; align-items: flex-start; gap: 10px; }
.title-row .card-title { flex: 1; min-width: 0; }
.explained, .feedback > .explained { display: flex; align-items: flex-start; gap: 10px; }
.explained > span { flex: 1; min-width: 0; }
.say-gloss .listen-btn, .field-label .listen-btn, .hint .listen-btn, .doc-note .listen-btn { width: 36px; height: 36px; margin-inline-start: 8px; }
.field-label-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.doc-note .listen-btn { justify-self: start; margin: 4px 0 0; }
.ai-voice { margin-top: 10px; }
.tile-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 60px; padding: 8px; border-radius: var(--radius-sm); background: var(--surface-2); border: 2px dashed var(--line); }
.tile-line.is-right { border: 2px solid var(--good); background: var(--good-soft); }
.tile-line.is-wrong { border: 2px solid var(--bad); background: var(--bad-soft); }
.tile-bank { display: flex; flex-wrap: wrap; gap: 8px; }
.tile-word { font: inherit; font-size: var(--text-body); font-weight: var(--weight-semibold); min-height: var(--tap); padding: 6px 14px; border-radius: var(--radius-6); border: 2px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; box-shadow: 0 2px 0 var(--line); max-width: 100%; overflow-wrap: anywhere; }
.tile-word.placed { border-color: var(--accent); }
.tile-line .tile-word:first-child::first-letter { text-transform: uppercase; } /* tiles are written mid-sentence style */
.tile-word[aria-disabled] { cursor: default; }
.dictation { display: grid; gap: 10px; margin: 10px 0 12px; }
.dictation input[disabled] { opacity: .8; }
.diff { margin: 6px 0; font-size: var(--text-body); line-height: 1.6; }
.diff mark.miss { background: var(--bad-soft); color: var(--ink); border-bottom: 2px solid var(--bad); border-radius: var(--radius-2); padding: 0 3px; }
.doc { background: var(--surface); color: var(--ink); border-radius: var(--radius-3); padding: 16px 16px 12px; margin: 10px 0 12px; box-shadow: var(--shadow), inset 0 0 0 1px var(--line); font-size: var(--text-label); line-height: 1.45; }
.doc--payslip, .doc--schedule { font-variant-numeric: tabular-nums; }
.doc-heading { font-weight: var(--weight-heavy); font-size: var(--text-body); margin: 0 0 8px; }
.doc-part { display: block; width: 100%; margin: 0 0 8px; text-align: left; font: inherit; color: inherit; overflow-wrap: anywhere; }
.doc-small { font-size: var(--text-footnote); color: var(--muted); }
.doc-bold { font-weight: var(--weight-bold); }
.doc-row { font-variant-numeric: tabular-nums; }
.doc-mark { background: var(--warn-soft); border: 0; border-bottom: 2px solid var(--warn); border-radius: var(--radius-3); padding: 6px 8px; cursor: pointer; min-height: var(--tap); }
.doc-mark.open { outline: 3px solid var(--accent); outline-offset: 1px; }
.doc-mark.is-correct { background: var(--good-soft); border-bottom-color: var(--good); }
.doc-mark.is-wrong { background: var(--bad-soft); border-bottom-color: var(--bad); }
.feedback > span { display: block; margin-top: 2px; }
.doc-note { border-radius: var(--radius-sm); padding: 12px 15px; background: var(--accent-soft); display: grid; gap: 2px; animation: card-in var(--dur-base) both; }

/* ---------- Explore: search, filter chips, results ---------- */
.search { position: relative; margin: 6px 0 12px; }
.search-input { width: 100%; min-height: var(--control-h); padding-block: 12px; padding-inline: 46px 48px; border-radius: var(--radius-pill); border: 0; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line), var(--shadow); font-size: var(--text-body); -webkit-appearance: none; appearance: none; }
.search-input::placeholder { color: var(--muted); opacity: 1; }
.search-input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--accent-text), 0 0 0 4px var(--accent-soft); }
.search-input::-webkit-search-cancel-button { display: none; }
.search-icon { position: absolute; inset-inline-start: 16px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.search-icon svg { width: 100%; height: 100%; display: block; }
.search-clear { position: absolute; inset-inline-end: 4px; top: 50%; transform: translateY(-50%); width: var(--tap); height: var(--tap); border: 0; border-radius: var(--radius-round); background: transparent; color: var(--muted); display: grid; place-items: center; cursor: pointer; }
.search-clear:hover { background: var(--surface-2); color: var(--ink); }
.search-clear[hidden] { display: none; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); padding-block: 0; padding-inline: 14px 12px; border-radius: var(--radius-pill); border: 0; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line); font-weight: var(--weight-semibold); font-size: var(--text-label); cursor: pointer; color: var(--ink); max-width: 100%; text-align: start; }
.chip:hover { box-shadow: inset 0 0 0 1.5px var(--accent-text); }
.chip.on { background: var(--ink); color: var(--bg); box-shadow: none; }
.chip--menu[aria-expanded="true"] { box-shadow: inset 0 0 0 2px var(--ink); }
.chip--menu.on[aria-expanded="true"] { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--ink); }
.chip-chev { transition: transform var(--dur-fast); }
.chip--menu[aria-expanded="true"] .chip-chev { transform: rotate(180deg); }
.chip-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--bg); color: var(--ink); font-size: var(--text-footnote); font-weight: var(--weight-heavy); }
.chip--clear { background: transparent; box-shadow: none; color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; padding: 0 8px; }
.chip--clear:hover { box-shadow: none; }
.chips--scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 3px var(--gutter); scroll-padding-inline: var(--gutter); }
.chips--scroll::-webkit-scrollbar { display: none; }
.chips--scroll .chip { flex: none; }
.chip--sm { min-height: var(--control-h-sm); padding: 0 12px; font-size: var(--text-small); }
.filter-panel { margin-top: 10px; padding: 14px; border-radius: var(--radius-sm); background: var(--surface-2); display: grid; gap: 8px; }
.chips-label { margin: 4px 0 0; font-size: var(--text-footnote); font-weight: var(--weight-bold); color: var(--muted); }
.chips-label:first-child { margin-top: 0; }
.results-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 18px 0 0; }
.results-count { margin: 0; font-weight: var(--weight-bold); display: flex; align-items: center; gap: 4px; }
.results .section-title:first-of-type { margin-top: 16px; }
.results-empty { margin-top: 18px; }
.results-empty .empty-title { color: var(--ink); font-weight: var(--weight-bold); }
.btn.more { width: 100%; margin: 4px 0 8px; }
.btn.more[hidden] { display: none; }
.tile--row { align-items: flex-start; padding: 12px; gap: 12px; }
.tile-thumb { flex: none; width: 76px; height: 76px; border-radius: var(--radius-sm); object-fit: cover; background: var(--surface-2); }
.tile--row h3 { font-size: var(--text-body); }
.tile--row .heart { margin-block: -6px 0; margin-inline: -8px -6px; }
.tile-foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.tile-foot .tile-action { margin: 0 auto 0 0; }
.tile p.tile-edu { margin: 0 0 0 auto; padding: 3px 10px; border-radius: var(--radius-pill); background: var(--surface-2); color: var(--muted); font-size: var(--text-footnote); font-weight: var(--weight-semibold); line-height: 1.4; max-width: 100%; }

/* ---------- Right to left (Arabic, Dari): <html dir="rtl"> from i18n/locales.json ----------
   Layout uses logical properties (inline-start/end) and flex/grid, which mirror on their own.
   What stays left to right: the Swedish being taught (everything with lang="sv": spoken texts,
   tiles, dictation, documents), a card shown in the English fallback (dir="ltr" from player.js)
   and the scenes (SVG with Swedish/English captions). Play icons are media controls: never mirrored. */
[dir="rtl"] [lang="sv"], [dir="rtl"] .tile-line, [dir="rtl"] .tile-bank { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] .say-text { text-align: right; } /* Swedish, but beside its play button on the right */
[dir="rtl"] .visual { direction: ltr; }
[dir="rtl"] .rtl-flip { transform: scaleX(-1); }
/* Forward is to the left: the next card, a feedback box and a note slide in from the left. */
[dir="rtl"] :is(.card, .feedback, .doc-note) { animation-name: card-in-back; }
[dir="rtl"] .card.back { animation-name: card-in; }
/* Options and glosses may be Swedish ("78 kronor", "matta") or the instruction language: each takes the
   direction of its own first letter, so a Swedish option reads "78 kronor", not "kronor 78". */
[dir="rtl"] :is(.option > span, .say-gloss) { unicode-bidi: plaintext; }
/* Swedish quoted in Arabic/Dari text (isolateLtr in locales.js) moves to the next line as a whole
   instead of splitting "Hur mycket kostar | den?" across a right-to-left line break. */
[dir="rtl"] bdi[dir="ltr"] { display: inline-block; max-width: 100%; }
[dir="rtl"] .ltr-quote { white-space: nowrap; }
[dir="rtl"] .ltr-quote > bdi { white-space: normal; }

/* =========================================================================
   Accounts, teacher view, admin (account.js, teach.js, admin.js)
   ========================================================================= */
.back-link { align-self: flex-start; min-height: var(--tap); padding: 6px 16px 6px 10px; font-size: var(--text-label); margin: 4px 0 10px; }
.back-link .ic { width: 20px; height: 20px; }
.btn.block { display: flex; width: 100%; margin: 8px 0; }
.page--account .btn:not(.primary):not(.ghost):not(.link):not(.social),
.page--teach .btn:not(.primary):not(.ghost):not(.link),
.page--admin .btn:not(.primary):not(.ghost):not(.link) { background: var(--surface); color: var(--ink); border: var(--border-w) solid var(--line); }
.lead { font-size: var(--text-body); line-height: 1.45; margin: 6px 0 16px; }
.social-list { display: grid; gap: 10px; margin: 4px 0; }
.btn.social { width: 100%; justify-content: flex-start; gap: 14px; padding-inline: 18px; background: #ffffff; color: #1f1f1f; border: 1px solid #c9c7c0; font-weight: var(--weight-bold); }
.btn.social--apple, .btn.social--tiktok { background: #000000; color: #ffffff; border-color: #000000; }
.social-mark { display: inline-grid; width: 22px; height: 22px; flex: none; }
.social-mark svg { width: 22px; height: 22px; }
.or-line { display: flex; align-items: center; gap: 12px; color: var(--muted); margin: 16px 0 6px; }
.or-line::before, .or-line::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.field input[type="email"], .field input[type="date"], .field input[type="number"], .field input[type="search"], .field select,
.page--teach input[readonly], .page--admin input[readonly] { width: 100%; min-height: var(--tap); background: var(--surface); color: var(--ink); border: 2px solid var(--line); border-radius: var(--radius-sm); padding: 10px 14px; font: inherit; }
.field .row input, .row input[readonly] { flex: 1 1 170px; width: auto; min-width: 0; }
.field .row .btn, .invite-share .row .btn { flex: 0 0 auto; }
.field-label-row .field-label { margin-bottom: 0; }
.acc-note { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: var(--radius-sm); background: var(--accent-soft); margin-top: 18px; }
.acc-note p { margin: 0; }
.acc-banner { display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: var(--radius-sm); background: var(--surface); border: var(--border-w) solid var(--line); color: var(--ink); text-decoration: none; margin: 4px 0 14px; }
.acc-banner > span:last-child { display: grid; gap: 2px; }
.acc-banner .ic { width: 28px; height: 28px; color: var(--accent-text); }
.acc-card { background: var(--surface); border: var(--border-w) solid var(--line); border-radius: var(--radius-sm); padding: 14px; }
.acc-card .field { margin-bottom: 4px; }
.acc-edus, .invite-list, .user-list, .admin-log, .course-results, .answer-lines, .test-results { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.acc-edu, .invite-card, .user-row, .course-result details { display: grid; gap: 4px; padding: 12px 14px; background: var(--surface); border: var(--border-w) solid var(--line); border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; }
.acc-edu a { font-weight: var(--weight-strong); color: var(--ink); }
.join { display: grid; gap: 12px; }
.join-title { font-size: var(--text-title-xl); line-height: 1.25; margin: 8px 0 0; }
.join-points { margin: 0; padding-inline-start: 22px; display: grid; gap: 8px; font-size: var(--text-callout); }
.remind { display: flex; gap: 8px; align-items: center; color: var(--warn); font-weight: var(--weight-bold); }
.remind .ic { width: 18px; height: 18px; }
p.remind { background: var(--warn-soft); padding: 12px 14px; border-radius: var(--radius-sm); }
/* QR codes stay dark on white in every theme, or phone cameras can't read them. */
.qr { margin: 8px auto; display: grid; justify-items: center; gap: 8px; text-align: center; max-width: 320px; }
.qr-code { width: min(70vw, 280px); background: #ffffff; border-radius: var(--radius-6); padding: 6px; }
.qr-code svg { display: block; width: 100%; height: auto; }
.invite-code { text-align: center; font-size: var(--text-lead); margin: 4px 0 10px; }
.invite-code b { letter-spacing: .08em; }
.page--teach .stats { grid-template-columns: repeat(2, 1fr); margin: 14px 0; }
.page--teach .stats dd { font-size: var(--text-callout); }
.table-wrap { overflow-x: auto; margin: 0 -4px; }
.teach-table { width: 100%; border-collapse: collapse; font-size: var(--text-small); }
.teach-table th, .teach-table td { text-align: start; padding: 10px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
.teach-table thead th { color: var(--muted); font-weight: var(--weight-bold); font-size: var(--text-caption); }
.teach-table td .bar { width: 72px; }
.teach-table .warn { color: var(--warn); font-weight: var(--weight-bold); }
.teach-table .bad, .bad { color: var(--bad); }
.good { color: var(--good); }
.course-result summary { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; cursor: pointer; font-weight: var(--weight-bold); }
.course-result summary span:last-child { flex: none; }
.answer-lines { margin-top: 10px; gap: 6px; font-size: var(--text-label); }
.answer-lines li { display: flex; gap: 8px; align-items: flex-start; }
.answer-lines li.ok .ic { color: var(--good); }
.answer-lines li.no .ic { color: var(--bad); }
.unit-results h3 { font-size: var(--text-callout); margin: 18px 0 8px; }
.teach-form { display: grid; gap: 2px; }
.user-row .row { gap: 6px; }
.role { font-size: var(--text-caption); padding: 2px 8px; border-radius: var(--radius-pill); background: var(--surface-2); font-weight: var(--weight-bold); }
.role--teacher { background: var(--accent-soft); color: var(--accent-text); }
.role--admin { background: var(--warn-soft); color: var(--warn); }
.link-box { display: grid; gap: 8px; margin: 8px 0 14px; }
.admin-log li { padding: 6px 0; border-bottom: 1px solid var(--line); }

/* ---------- classes (teach.js, classes.js — docs/accounts.md) ---------- */
.seg-tabs { display: flex; gap: 6px; margin: 18px 0 12px; padding: 4px; border-radius: var(--radius-pill); background: var(--surface-2); }
.seg-tab { flex: 1; display: grid; place-items: center; min-height: var(--tap); border-radius: var(--radius-pill); color: var(--muted); font-weight: var(--weight-bold); font-size: var(--text-label); text-decoration: none; }
.seg-tab[aria-current="page"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.seg-tab:focus-visible { outline: var(--focus); outline-offset: 2px; }
.class-card b { font-size: var(--text-lead); }
.class-card--compact b { font-size: var(--text-callout); }
.my-classes .section-title { margin-top: 12px; }
.my-classes .row { margin-top: 10px; }
.notice--class { background: var(--accent-soft); border: var(--border-w) solid var(--accent); color: var(--ink); text-decoration: none; margin: 0 0 10px; }
.notice--class .ic { color: var(--accent-text); }
.new-badge { position: absolute; inset-block-start: -8px; inset-inline-start: 12px; z-index: 1; padding: 2px 10px; border-radius: var(--radius-pill); background: var(--accent); color: var(--accent-ink); font-size: var(--text-footnote); font-weight: var(--weight-heavy); }
.email-row { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 14px; background: var(--surface); border: var(--border-w) solid var(--line); border-radius: var(--radius-sm); overflow-wrap: anywhere; }
.item-results h3 { font-size: var(--text-lead); margin: 22px 0 4px; }
.item-results h4 { font-size: var(--text-callout); margin: 14px 0 8px; }
.acc-password { margin-top: 18px; }
.acc-password summary { cursor: pointer; font-weight: var(--weight-bold); }
.acc-password form { margin-top: 12px; }
.field input[type="password"] { width: 100%; min-height: var(--tap); background: var(--surface); color: var(--ink); border: 2px solid var(--line); border-radius: var(--radius-sm); padding: 10px 14px; font: inherit; }
.join-go { min-height: calc(var(--tap) + 12px); font-size: var(--text-lead); gap: 10px; }

/* Email addresses as tags in one field (teach.js emailInvite). */
.tag-input { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: var(--tap); padding: 6px 8px; background: var(--surface); border: 2px solid var(--line); border-radius: var(--radius-sm); cursor: text; }
.tag-input:focus-within { border-color: var(--accent-text); box-shadow: var(--ring-focus-soft); }
.tag-input input[type="email"] { flex: 1 1 160px; min-width: 120px; min-height: 36px; border: 0; padding: 4px; background: transparent; box-shadow: none; }
.tag-input input[type="email"]:focus { outline: none; box-shadow: none; }
.tags { display: contents; list-style: none; }
.tag { display: inline-flex; align-items: center; gap: 2px; padding-block: 2px; padding-inline: 10px 2px; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--ink); font-size: var(--text-small); font-weight: var(--weight-semibold); max-width: 100%; overflow-wrap: anywhere; }
.tag--bad { background: var(--bad-soft); color: var(--bad); text-decoration: underline wavy; text-underline-offset: 3px; }
.tag-x { border: 0; background: transparent; color: inherit; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-pill); cursor: pointer; }
.tag-x:hover { background: var(--surface-2); }

/* "Anslut klass": the button in the header, the sheet, the banner on Explore. */
.top .connect-btn { flex: none; gap: 6px; }
dialog.sheet { width: min(100% - 2 * var(--gutter), 460px); max-height: 86vh; overflow: auto; padding: 0; border: var(--border-w) solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-menu); }
dialog.sheet::backdrop { background: var(--overlay-bg); }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 12px 4px 18px; }
.sheet-head h2 { margin: 0; font-size: var(--text-title-s); }
.sheet-body { padding: 4px 18px 18px; }
.connect-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border: var(--border-w) solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.connect-row > span { display: grid; gap: 2px; }
.connect-row--target { border-color: var(--accent); background: var(--accent-soft); }
.connect-row .btn { flex: none; }
.connected { display: flex; gap: 8px; align-items: flex-start; }
.connected .ic { color: var(--good); flex: none; }
.connect-banner { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 8px 0 12px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--accent-soft); border: var(--border-w) solid var(--accent); font-weight: var(--weight-bold); }
.connect-banner .btn { flex: none; }

/* ---------- the profile (profile.js, account.js) ---------- */
.profile-btn { flex: none; color: var(--ink); }
.profile-btn .ic { width: 30px; height: 30px; }
.profile-btn[aria-current="page"] { color: var(--accent-text); background: var(--accent-soft); }
.profile-head { display: flex; align-items: center; gap: 14px; margin: 6px 0 14px; }
.profile-head h1 { margin: 0 0 4px; font-size: var(--text-title-l); line-height: 1.2; overflow-wrap: anywhere; }
.avatar { width: 56px; height: 56px; flex: none; border-radius: var(--radius-round); display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); font-size: var(--text-title-l); font-weight: var(--weight-heavy); }
.avatar .ic { width: 32px; height: 32px; }
.tool-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.tool { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--surface); border: var(--border-w) solid var(--line); border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; min-height: var(--tap); }
.tool > span:nth-child(2) { display: grid; gap: 2px; flex: 1; }
.tool .ic { color: var(--accent-text); }
.page--me .my-classes .section-title { margin-top: 30px; }
.page--me .my-classes { margin-bottom: 18px; }
.earn-none { margin-top: 18px; }
/* A horizontal row: native scrolling, each card a link, the next one peeking in (the pattern the other
   pages will reuse). Snap keeps cards aligned; nothing is hidden from keyboard or screen readers. */
.hrow-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.hrow-head .btn.link { flex: none; padding-inline: 4px; color: var(--accent-text); }
.hrow { list-style: none; margin: 0 calc(-1 * var(--gutter)); padding: 4px var(--gutter) 10px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(132px, 38%);
  gap: 10px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: thin; }
.hrow > li { scroll-snap-align: start; }
.hrow .badge-cell:focus-visible { outline: var(--focus); outline-offset: 2px; }
.acc-settings .acc-card { display: grid; gap: 10px; }
.acc-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; overflow-wrap: anywhere; }
.acc-line > span:nth-child(2) { flex: 1 1 160px; }
.acc-line .btn { flex: none; }
.acc-sub { font-size: var(--text-callout); margin: 22px 0 4px; }
.acc-settings .social-list { list-style: none; padding: 0; }
.linked { display: flex; align-items: center; gap: 14px; margin: 0; min-height: var(--control-h); padding: 0 18px; border-radius: var(--btn-radius); background: var(--surface-2); font-weight: var(--weight-bold); }
.linked > span:nth-child(2) { flex: 1; }
.linked > .ic { color: var(--good); }
.acc-settings .sign-out { margin-top: 18px; }
.notice--email { background: var(--accent-soft); border: var(--border-w) solid var(--accent); margin: 0 0 10px; }
.notice--email a { color: var(--ink); font-weight: var(--weight-bold); }
.notice--email .ic { color: var(--accent-text); }

/* ---------- inviting students (teach.js, sheet.js) ---------- */
.choice-list { display: grid; gap: 10px; margin: 12px 0; }
.choice { display: flex; align-items: center; gap: 14px; padding: 16px; background: var(--surface); border: var(--border-w) solid var(--line); box-shadow: var(--shadow); border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; }
.choice > span { display: grid; gap: 2px; }
.choice b { font-size: var(--text-callout); }
.choice .ic { color: var(--accent-text); }
.qr-big .qr { max-width: 420px; }
.qr-big .qr-code { width: min(86vw, 380px); }
.personal-qr h2 { text-align: center; margin: 14px 0 0; font-size: var(--text-title-l); }
.howto-scan { align-items: center; justify-content: center; gap: 8px; }

/* The instruction sheet: a preview card on screen, one A4 page on paper. */
.howto { background: #ffffff; color: #111111; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 16px; margin: 12px 0; }
.howto-head { display: flex; gap: 16px; align-items: center; justify-content: space-between; border-bottom: 2px solid #111111; padding-bottom: 10px; margin-bottom: 10px; }
.howto-head h2 { font-size: 22px; margin: 0 0 6px; line-height: 1.15; overflow-wrap: anywhere; }
.howto-brand { margin: 0 0 2px; font-weight: var(--weight-heavy); color: #555555; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.howto-code { margin: 0 0 4px; font-size: 18px; letter-spacing: .08em; }
.howto-link { margin: 0; font-size: 10px; color: #555555; overflow-wrap: anywhere; }
.howto-head .qr { margin: 0; flex: none; max-width: none; }
.howto-head .qr-code { width: 130px; padding: 0; }
.howto-head .qr figcaption { display: none; }
.howto-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px 14px; }
.howto-lang { break-inside: avoid; border: 1px solid #cccccc; border-radius: 8px; padding: 6px 8px; font-size: 12px; line-height: 1.35; }
.howto-lang h3 { margin: 0 0 4px; font-size: 13px; }
.howto-lang ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.howto-lang li { display: flex; gap: 6px; align-items: flex-start; }
.howto-pic { flex: none; display: inline-flex; align-items: center; gap: 2px; min-width: 40px; }
.howto-pic b { font-size: 12px; }
.howto-pic .ic { width: 20px; height: 20px; }
.howto-ui { font-weight: var(--weight-heavy); }
.howto-abc, .howto-ui.nowrap { white-space: nowrap; }
.howto-sv { display: inline-flex; align-items: center; gap: 1px; padding: 0 5px; border: 1.5px solid #111111; border-radius: 999px; font-size: 10px; font-weight: var(--weight-heavy); line-height: 16px; }
.howto-sv .ic { width: 10px; height: 10px; }
.howto--dense .howto-lang { font-size: 10.5px; }

/* The class QR, printed to hand out: only the sheet goes on paper. */
.print-only { display: none; }
@media print {
  @page { size: A4; margin: 10mm; }
  .top, .tabs, .back-link, .seg-tabs, .no-print, #dev-panel { display: none !important; }
  body, .page { background: white !important; color: black !important; }
  .print-only { display: block; }
  p.howto-scan.print-only { display: flex; font-size: 16pt; }
  .print-sheet { text-align: center; }
  .print-sheet h2 { font-size: 28pt; margin: 0 0 12pt; }
  .print-sheet .qr-code { width: 12cm; }
  .print-sheet .invite-code { font-size: 22pt; }
  .print-link { font-size: 10pt; overflow-wrap: anywhere; }
  .page--teach:has(.howto) { padding: 0; max-width: none; }
  .howto { border: 0; padding: 0; margin: 0; }
  .howto-head { padding-bottom: 3mm; margin-bottom: 4mm; }
  .howto-head .qr-code { width: 46mm; }
  .howto-head h2 { font-size: 24pt; }
  .howto-grid { grid-template-columns: repeat(2, 1fr); gap: 3mm 5mm; }
  .howto-lang { font-size: 9.5pt; line-height: 1.28; padding: 2mm 3mm; }
  .howto-lang h3 { font-size: 11pt; margin-bottom: 1.5mm; }
  .howto-lang ol { gap: 1.2mm; }
  .howto--dense .howto-grid { grid-template-columns: repeat(3, 1fr); gap: 2mm 3mm; }
  .howto--dense .howto-head { padding-bottom: 2mm; margin-bottom: 3mm; }
  .howto--dense .howto-head .qr-code { width: 40mm; }
  .howto--dense .howto-lang { font-size: 8pt; line-height: 1.25; padding: 1.5mm 2mm; }
  .howto--dense .howto-lang ol { gap: 1mm; }
  .howto--dense .howto-pic { min-width: 28px; }
  .howto--dense .howto-pic .ic { width: 14px; height: 14px; }
  .howto--dense .howto-sv { font-size: 8px; line-height: 13px; padding: 0 4px; }
  .howto--dense .howto-sv .ic { width: 8px; height: 8px; }
}
.class-card .new-pill { justify-self: start; padding: 2px 10px; border-radius: var(--radius-pill); background: var(--accent); color: var(--accent-ink); font-size: var(--text-footnote); font-weight: var(--weight-heavy); }
.page--home .notice--class { margin-top: 4px; }