/* Typing course in the RaiseSteady look (P2-125, from Notella P2-122, 2 Nov 2026): paper ground, navy 2px edges, hard offset shadows,
   pill buttons (navy with yellow text), Orbitron headings, Geist text. Earlier direction "Manuscript" by P2-92.
   Notes are always ink; colour marks state (right green, wrong red, current violet), always with an icon or text.
   Sizes are in rem so the layout follows the reader's font size (tested at 20 px and 110% zoom).
   Reduced motion keeps the same timings as fades. */

/* Georgian letters: FiraGO by bBox Type (SIL OFL 1.1, licences/FiraGO-OFL.txt). unicode-range keeps the files from
   loading until Georgian text is on screen; Latin and Cyrillic fall through to the stacks below. */
@font-face { font-family: "FiraGO Georgian"; src: url("../fonts/firago-georgian-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+10A0-10FF, U+1C90-1CBF, U+2D00-2D2F; }
@font-face { font-family: "FiraGO Georgian"; src: url("../fonts/firago-georgian-medium.woff2") format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+10A0-10FF, U+1C90-1CBF, U+2D00-2D2F; }
@font-face { font-family: "FiraGO Georgian"; src: url("../fonts/firago-georgian-bold.woff2") format("woff2"); font-weight: 600 900; font-display: swap; unicode-range: U+10A0-10FF, U+1C90-1CBF, U+2D00-2D2F; }
/* Geist by Vercel and Orbitron by Matt McInerney (SIL OFL 1.1, licences/Geist-OFL.txt, licences/Orbitron-OFL.txt),
   the RaiseSteady site's fonts, self-hosted. Both cover Latin only: Cyrillic falls through to the system font. */
@font-face { font-family: "Geist"; src: url("../fonts/geist-latin-ext.woff2") format("woff2"); font-weight: 300 700; font-display: swap; 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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Geist"; src: url("../fonts/geist-latin.woff2") format("woff2"); font-weight: 300 700; font-display: swap; 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: "Orbitron"; src: url("../fonts/orbitron-variable.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }

:root {
  --navy: #282858; --yellow: #FEDB71; --mint: #75C5A8; --coral: #FB7D7E;
  --paper: #F5F5F0; --card: #FFFFFF; --card-2: #F4EDFF; --ink: #1A1A1A; --ink-soft: #4A4A68; --line: #D9D9E8;
  --staff: #282858; --accent: #282858; --accent-bg: #FEDB71; --current: #6A4FD0; --good: #1C7547; --good-bg: #BFFFE6;
  --bad: #B0261D; --bad-bg: #FFE1E1; --gold: #946600; --warm: #C4501A; --ghost: #8A8AA6;
  --heading: #282858; --on-ink: #FEDB71; --shadow: rgba(40, 40, 88, .18); --press: #282858; --edge-c: #282858; --lift-c: #282858;
  --edge: 2px solid var(--edge-c); --lift: 4px 4px 0 var(--lift-c); --lift-down: 1px 1px 0 var(--lift-c); --lift-card: 6px 6px 0 var(--lift-c);
  --display: "FiraGO Georgian", Orbitron, Geist, Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --serif: "FiraGO Georgian", Geist, Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --sans: "FiraGO Georgian", Geist, Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --r: 24px; --r-small: 14px; --gap: 1rem; --tab-h: 4.25rem;
  --fade: 180ms; --move: 220ms;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #121230; --card: #1D1D44; --card-2: #2A2A58; --ink: #F5F5F0; --ink-soft: #C2C2DC; --line: #3C3C6E;
    --staff: #E6E6F2; --accent: #FEDB71; --accent-bg: #45406B; --current: #FEDB71; --good: #63CF95; --good-bg: #173A30;
    --bad: #FF8F80; --bad-bg: #3E1F2A; --gold: #FEDB71; --warm: #FB7D7E; --ghost: #8080A8;
    --heading: #F5F5F0; --on-ink: #1A1A3A; --shadow: rgba(0, 0, 0, .45); --press: #05051A; --edge-c: #A6A6DC; --lift-c: #05051A;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #121230; --card: #1D1D44; --card-2: #2A2A58; --ink: #F5F5F0; --ink-soft: #C2C2DC; --line: #3C3C6E;
  --staff: #E6E6F2; --accent: #FEDB71; --accent-bg: #45406B; --current: #FEDB71; --good: #63CF95; --good-bg: #173A30;
  --bad: #FF8F80; --bad-bg: #3E1F2A; --gold: #FEDB71; --warm: #FB7D7E; --ghost: #8080A8;
  --heading: #F5F5F0; --on-ink: #1A1A3A; --shadow: rgba(0, 0, 0, .45); --press: #05051A; --edge-c: #A6A6DC; --lift-c: #05051A;
  color-scheme: dark;
}

/* ---- Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1rem/1.5 var(--sans);
  -webkit-font-smoothing: antialiased; min-height: 100vh; min-height: 100dvh; overflow-x: hidden; }
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
h1, h2 { font-family: var(--display); font-weight: 700; letter-spacing: .01em; color: var(--heading); }
.serif { font-family: var(--serif); font-weight: 600; }
h1 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem); line-height: 1.15; }
h2 { font-size: clamp(1.25rem, 1.05rem + .8vw, 1.6rem); line-height: 1.2; }
h3 { font-size: 1rem; font-weight: 700; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
img, svg { display: block; }
.icon { width: 1.25em; height: 1.25em; flex: none; }
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 10; background: var(--ink); color: var(--on-ink); padding: .6rem 1rem; border-radius: var(--r-small); }
.skip:focus { top: 1rem; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
:focus:not(:focus-visible) { outline: none; }
[tabindex="-1"]:focus { outline: none; }   /* headings focused for screen readers after a page change */
[hidden] { display: none !important; }

/* ---- App frame: the tab bar (at the bottom on phones and iPads; a top header with the name on wide screens, like
   raisesteady.com), then the content. Lessons, games and tests hide the bar so they fit one screen. */
.app { min-height: 100vh; min-height: 100dvh; }
.main { padding: max(1.25rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) calc(var(--tab-h) + 2rem + env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)); outline: none; }
.page { max-width: 46rem; margin: 0 auto; display: flex; flex-direction: column; gap: 1.25rem; }
.page.narrow { max-width: 40rem; }
.tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; display: flex; justify-content: center; gap: .25rem;
  padding: .4rem max(.5rem, env(safe-area-inset-left)) calc(.4rem + env(safe-area-inset-bottom)); background: var(--card);
  border-top: var(--edge); }
.tabs a { flex: 1; max-width: 9rem; min-height: 3.25rem; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .15rem; text-decoration: none; color: var(--ink-soft); font-size: .8rem; font-weight: 600; border-radius: var(--r-small); text-align: center; line-height: 1.15; padding: .25rem; }
.tabs a svg { width: 1.5rem; height: 1.5rem; }
.tabs a[aria-current] { color: var(--ink); background: var(--accent-bg); box-shadow: inset 0 0 0 2px var(--edge-c); border-radius: 999px; }
.no-tabs .tabs { display: none; }
.no-tabs .main { padding-bottom: calc(1.5rem + env(safe-area-inset-bottom)); }
/* The name with raisesteady.com under it: in the wide header, and at the top of the trail, Play, Progress and Settings. */
.rs-link { display: inline-flex; align-items: center; min-height: 24px; font: 700 .8rem/1.2 var(--sans); letter-spacing: .02em;
  color: var(--ink-soft); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.rs-link:hover { color: var(--ink); }
.brand-lockup { display: inline-flex; flex-direction: column; align-items: flex-start; }
.brand-lockup .rs-link { margin-inline-start: 2.05rem; }   /* under the word, past the icon */
.tabs .tabs-brand { display: none; }
:root { --head-h: 4rem; }
@media (min-width: 1100px) {
  .tabs { position: sticky; top: 0; bottom: auto; justify-content: center; align-items: center; gap: .4rem; min-height: var(--head-h);
    padding: .55rem max(1.5rem, env(safe-area-inset-right)) .55rem max(1.5rem, env(safe-area-inset-left)); border-top: 0; border-bottom: var(--edge); }
  .tabs .tabs-brand { display: flex; flex: 1 1 0; min-width: 0; flex-direction: column; align-items: flex-start; justify-content: center; }
  .tabs .tabs-brand a { flex: none; max-width: none; min-height: 0; flex-direction: row; justify-content: flex-start; padding: 0; border-radius: 0; }
  .tabs .tabs-brand .brand-home { font-size: 1rem; color: var(--heading); }
  .tabs .tabs-brand svg { width: 1.4rem; height: 1.4rem; }
  .tabs .tabs-brand .rs-link { min-height: 24px; margin-inline-start: 1.8rem; font-size: .8rem; color: var(--ink-soft); }
  .tabs .tabs-brand .rs-link:hover { color: var(--ink); }
  .tabs::after { content: ""; flex: 1 1 0; }   /* as wide as the name, so the links sit in the true centre; the page's star and language pill sit on it */
  .tabs a[data-tab] { flex: none; max-width: none; min-height: 2.75rem; flex-direction: row; gap: .45rem; padding: .35rem 1rem;
    font-size: 1rem; border-radius: 999px; }
  .tabs a[data-tab] svg { width: 1.25rem; height: 1.25rem; }
  .main { padding-bottom: 2rem; }
}

/* ---- Buttons and small parts */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.75rem; min-width: 2.75rem;
  padding: .55rem 1.2rem; border-radius: 999px; border: var(--edge); background: var(--card); color: var(--ink);
  font: 600 1rem/1.2 var(--sans); text-decoration: none; cursor: pointer; box-shadow: var(--lift);
  transition: transform var(--fade), box-shadow var(--fade), background-color var(--fade); touch-action: manipulation; }
.btn:hover:not(:disabled) { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--lift-c); }
.btn:active:not(:disabled) { transform: translate(3px, 3px); box-shadow: var(--lift-down); }
.btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; transform: none; }
.btn.primary { background: var(--accent); color: var(--on-ink); border-color: var(--edge-c); box-shadow: var(--lift); }
.btn.big { min-height: 3.25rem; padding: .75rem 1.6rem; font-size: 1.1rem; border-radius: 999px; }
.btn.small { min-height: 2.75rem; padding: .4rem .9rem; font-size: .95rem; }
.btn.ghost, .btn.ghost:hover:not(:disabled) { background: transparent; border-color: transparent; box-shadow: none; transform: none; }
.btn.ghost:hover { background: var(--card-2); }
.btn.danger { color: var(--bad); border-color: currentColor; }
.btn.icon-btn { padding: 0; width: 2.75rem; }
/* The square back button of raisesteady.com's games: white, navy edge, a hard shadow. */
.back-btn { display: inline-grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; border: var(--edge); border-radius: var(--r-small);
  background: var(--card); color: var(--ink); box-shadow: 3px 3px 0 var(--lift-c); text-decoration: none;
  transition: transform var(--fade), box-shadow var(--fade); }
.back-btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--lift-c); }
.back-btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--lift-c); }
.btn.record { background: var(--card); }
.btn.record svg { color: var(--bad); }
.btn.record.on { background: var(--bad); color: #fff; border-color: var(--bad); }
.btn.record.on svg { color: #fff; }
.button-row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.button-row.center { justify-content: center; }
.chip { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.75rem; padding: .3rem .8rem; border: var(--edge);
  border-radius: 999px; background: var(--card); font-weight: 650; font-size: .95rem; text-decoration: none; }
.chip > span { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
.flame { color: var(--warm); }
.eyebrow { font-size: .85rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.lead { font-size: 1.1rem; color: var(--ink-soft); }
.sub, .hint, .fine { color: var(--ink-soft); }
.fine { font-size: .9rem; }
.tag { align-self: flex-start; font-size: .85rem; font-weight: 700; padding: .2rem .6rem; border-radius: 999px; background: var(--card-2); }
.card { background: var(--card); border: var(--edge); border-radius: var(--r); padding: 1.25rem; box-shadow: var(--lift-card); }
a.card { display: flex; align-items: center; gap: 1rem; text-decoration: none; }
a.card:active { transform: translate(3px, 3px); box-shadow: var(--lift-down); }
.card-icon { width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--accent-bg); color: var(--accent); border: var(--edge); }
.card-icon .icon { width: 1.5rem; height: 1.5rem; }
.card-text { display: flex; flex-direction: column; gap: .15rem; flex: 1; min-width: 0; }
.card-text strong { font: 700 1.15rem/1.25 var(--display); color: var(--heading); }
.card-text span { color: var(--ink-soft); }
.icon.end { color: var(--ink-soft); }
.ring svg { width: 1.6rem; height: 1.6rem; }
.ring-bg, .ring-fg { fill: none; stroke-width: 5; }
.ring-bg { stroke: var(--line); }
.ring-fg { stroke: var(--good); stroke-linecap: round; transform: rotate(-90deg); transform-origin: 18px 18px; }
.brand-mark { display: inline-flex; align-items: center; gap: .4rem; font: 800 1.3rem var(--display); color: var(--heading); }
.brand-mark .icon { color: var(--accent); }