/* base.css — Fonts, the reset and the focus ring. Design tokens live in
   theme.css.

   Design system, taken from the Fluento Figma kit, with rounded Nunito typography
   in sentence case. Depth comes from flat colour offsets, never blur. The kit
   is light-only and mobile-only; dark mode and the desktop rail are mapped in
   theme.css. */

@font-face {
  font-family: Nunito;
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url("../fonts/nunito.woff2") format("woff2");
}
@font-face {
  /* Wordmark only: Fredoka Bold (SIL Open Font License), latin subset, self-hosted. */
  font-family: Fredoka;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/fredoka-700.woff2") format("woff2");
}

*,
*::before,
*::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

/* Apply to nested scrollers as well as controls: taps should not zoom the
   app. Scrolling and deliberate pinch zoom remain available to the browser. */
* {
  touch-action: manipulation;
}

[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
  height: 100%;
}

body {
  background: var(--paper);
  color: var(--ink);
  overflow: hidden;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
  padding: 0;
  user-select: none;
}

:where(h1, h2, h3, h4, h5, h6, p, div, section, main)[tabindex="-1"]:focus {
  outline: none;
}
button,
.ghost {
  font-weight: 800;
}

:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  /* The ring used to be the brand blue, which made it invisible against every
     brand-blue button it was drawn around. */
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

button,
.big,
.ghost,
.chip,
.pill,
input:not([type="checkbox"]) {
  min-height: 44px;
}

/* The shell's icon sprite (index.html): symbols only, taking no room. */
.icon-sprite {
  position: absolute;
}

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

/* Small label. The kit sets everything in sentence case at 14–16px, so a
   label is weight and colour rather than uppercase tracking. Buttons opt out
   below — they carry the full 16px. */
.caps {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.ghost.caps,
.why.caps {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0;
}

.q {
  color: var(--ink);
  font-weight: 900;
}

/* Native app (Capacitor): Apple and Google require the store's own purchase
   for anything sold in the app, so pricing never renders there, nor do links
   to the website's home page, which shows the web price. The Unlock tab
   appears only once the store purchase is on (study-api.js), and the looks
   still being tried stay on the web. The sidebar wordmark stays, without its
   link (main.js). */
body.native-app .price-link,
body.native-app a[href="/pricing"],
body.native-app a[href="/about"],
body.native-app a[href="/"],
body.native-app .setdesign,
body.native-app:not(.course-on-sale) [data-tab="unlock"] {
  display: none !important;
}