/* Sophie Mini Apps — element defaults.
 * Loaded after tokens.css and before components.css.
 *
 * Includes the browser surfaces that ship with defaults belonging to no design
 * system: selection, caret, focus ring, scrollbar, tap highlight, and the
 * numerals in anything that counts.
 */

/* Manrope variable, subset by writing system. A learner's name is often
   Cyrillic, so that subset is not optional. Files are local: a Mini App on a
   phone data connection should not wait on fonts.gstatic.com. */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/manrope-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/manrope-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/manrope-latin-ext.woff2") format("woff2");
  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;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/manrope-latin.woff2") format("woff2");
  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;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  background: var(--bg);
}

body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--tr-body);
  font-weight: 500;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 800;
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-title);
}
h1 { font-size: var(--fs-display); letter-spacing: var(--tr-display); }
h2 { font-size: var(--fs-title); }
h3 { font-size: var(--fs-lead); }
h4 { font-size: var(--fs-body); }

p { margin: 0; }
p + p { margin-top: var(--s3); }

b, strong { font-weight: 800; }

a { color: var(--accent-text); text-decoration-thickness: 1px; text-underline-offset: 2px; }

button, input, select, textarea {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
}
button { -webkit-appearance: none; appearance: none; }

img, svg, audio, video { max-width: 100%; }
audio { width: 100%; }

/* Anything that counts gets tabular figures — a timer or a band that reflows
   its own width as it ticks reads as broken. */
.tnum, .band-num, .timer, .stat-v, time {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ── Browser surfaces ───────────────────────────────────────────────────── */
::selection { background: var(--accent-soft); color: var(--text); }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

* { scrollbar-width: thin; scrollbar-color: var(--track) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--track); border-radius: var(--r-pill); }

/* ── Page frame ─────────────────────────────────────────────────────────── */
.page {
  max-width: var(--page);
  margin: 0 auto;
  padding: var(--s4) var(--s4)
           calc(var(--tabbar-h) + var(--dock-h) + var(--safe-b) + var(--s6));
}

.view { animation: view-in var(--dur-2) var(--ease) both; }
@keyframes view-in { from { opacity: 0; } to { opacity: 1; } }

/* Utilities. Deliberately few — layout belongs in components.css. */
.muted   { color: var(--text-2); }
.faint   { color: var(--text-3); }
.small   { font-size: var(--fs-small); }
.tiny    { font-size: var(--fs-tiny); }
.center  { text-align: center; }
.up      { color: var(--good-text); }
.down    { color: var(--danger-text); }
.hide    { display: none !important; }
[hidden] { display: none !important; }
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}