/* Reset, fonts, type scale, focus and motion.
 *
 * Fonts are self-hosted rather than linked from Google: the app has to work
 * fully offline, and a webfont that 404s on a plane is a layout that reflows on
 * a plane. Both families are OFL.
 */

/* Plus Jakarta Sans ships as a variable font (wght 200-800), so one file per
 * subset covers all five weights the design uses. */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/plus-jakarta-sans-latin.52d04440a9fa.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;
}

/* latin-ext carries ɔ ɛ ʉ ɨ ŋ and the tone marks. Maa needs it; without this
 * subset the accented forms fall back to a system serif mid-word. */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/plus-jakarta-sans-latin-ext.5ffe46eeb00d.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: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/instrument-serif-400-latin.c008db4e8a97.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;
}

@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/instrument-serif-400-latin-ext.18e8ea957b6c.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;
}

/* Italic serif carries the proverbs. */
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/instrument-serif-400-italic-latin.26082c73a711.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;
}

@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/instrument-serif-400-italic-latin-ext.c3fbcb38845f.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;
}

/* --- Reset ---------------------------------------------------------------- */

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-body);
  background: var(--sand);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Never a horizontal scrollbar. The layouts wrap instead; see components.css. */
  overflow-x: hidden;
}

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

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: none;
  cursor: pointer;
}

a {
  color: inherit;
}

ul,
ol {
  list-style: none;
  padding: 0;
}

/* --- Type scale ------------------------------------------------------------
 * clamp() between the mobile and desktop sizes in design-tokens.md, so the
 * headline sizes are continuous rather than snapping at a breakpoint.
 */

h1,
h2,
h3,
h4 {
  font-weight: 400;
  line-height: 1.15;
  color: var(--ink);
  text-wrap: balance;
}

.t-gate-proverb {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(33px, 4.6vw, 66px);
  line-height: 1.1;
  color: var(--gate-heading);
}

.t-page-title {
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 38px);
}

.t-greeting {
  font-family: var(--font-display);
  font-size: clamp(29px, 3.4vw, 42px);
}

.t-card-headline {
  font-family: var(--font-display);
  font-size: clamp(25px, 2.6vw, 32px);
}

.t-prompt {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 46px);
}

.t-flashcard {
  font-family: var(--font-display);
  font-size: clamp(40px, 5.5vw, 62px);
  line-height: 1.05;
}

.t-numeral {
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: clamp(24px, 3vw, 44px);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.t-body {
  font-size: clamp(14px, 1vw, 15px);
}

.t-secondary {
  font-size: clamp(12px, 0.9vw, 14px);
  color: var(--text-muted);
}

/* Secondary text on an ink surface takes the ink-muted colour. Shared partials
 * (the audio block above all) render on both light cards and the flashcard, so
 * this has to follow the surface rather than be chosen at the call site --
 * --text-muted on ink measures 2.95:1, well under AA. */
.on-ink .t-secondary {
  color: var(--text-on-ink-muted);
}

/* Kicker/eyebrow. 11px is below the AA floor for --text-faint, so a kicker
 * never uses it; it takes --text-muted on light or --ochre on ink. */
.t-kicker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.t-kicker--on-ink {
  color: var(--ochre);
}

/* Maa can be long and hyphenated (ɔl-ɔɨŋɔ́ni). Anywhere-breaking beats a word
 * pushing the card wider than the viewport. */
.maa {
  overflow-wrap: anywhere;
}

/* Long-form copy only. Never on headlines — pretty and balance conflict. */
p {
  text-wrap: pretty;
}

/* --- Focus -----------------------------------------------------------------
 * Every control shows a ring. `outline: none` is never correct here: the
 * reference design has no focus styles at all and that is the single biggest
 * accessibility gap in it.
 */

:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Red disappears against ink, so ink surfaces take ochre. */
.on-ink :focus-visible,
.on-ink:focus-visible {
  outline-color: var(--ochre);
}

/* --- Motion ----------------------------------------------------------------
 * Both animations are defined inside the no-preference guard, so honouring
 * prefers-reduced-motion is not a separate override that can be forgotten.
 */

@media (prefers-reduced-motion: no-preference) {
  @keyframes maaPulse {
    0%,
    100% {
      box-shadow: 0 0 0 7px rgb(181 52 42 / 0.22);
    }
    50% {
      box-shadow: 0 0 0 12px rgb(181 52 42 / 0.08);
    }
  }

  @keyframes maaRise {
    from {
      opacity: 0;
      transform: translateY(8px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }

  .anim-pulse {
    animation: maaPulse 2.6s ease-in-out infinite;
  }

  .anim-rise {
    animation: maaRise 0.22s ease;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Utilities -------------------------------------------------------------- */

/* Alpine sets x-cloak on elements that must not appear before it initialises.
 * Without this rule the back of every flashcard is briefly visible on load,
 * which would show the answer before the learner has tried to recall it. */
[x-cloak] {
  display: none !important;
}

/* Visible to screen readers, not to sighted users. Used for the text
 * equivalents of progress bars and for icon-button labels where the design
 * shows no text. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: var(--s-3) var(--s-4);
  background: var(--ink);
  color: var(--text-on-ink);
  border-radius: 0 0 var(--r-tile) 0;
}

.skip-link:focus {
  left: 0;
}

/* The beadwork divider. */
.beadwork {
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--beadwork);
}