/* Benerra Academy: base layer. Reset, page frame, typography, layout primitives, motifs, a11y.
   Uses working tokens only (no colour values here). Logical properties throughout (FT-316). */

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

html {
  scrollbar-gutter: stable;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--bg);
  color: var(--text);
}
/* The sign-in screen never scrolls and has no header to jump: no reserved gutter, so its panels reach the window edge
   with classic scrollbars too (FT-041, FT-029). App screens keep the stable gutter. */
html.is-bare { scrollbar-gutter: auto; }
/* With classic scrollbars the reserved gutter is painted by the canvas. Under a full-window overlay it takes the overlay's
   colour: the dark zoom viewer (C3.12, B-78), or the scrim over the page for a modal, the drawer and the lesson panel.
   The overlays fade in over --dur-base and are removed at once, so the canvas fades in with them (the transition sits on
   the open state only) and is back to the page colour in the same frame the overlay goes (B-239). */
html.has-modal, html.has-drawer, html.has-lesson-panel { background: var(--canvas-scrim); }
html.has-zoom { background: var(--zoom-bg); }
html.has-modal, html.has-drawer, html.has-lesson-panel, html.has-zoom { transition: background-color var(--dur-base) var(--ease-out); }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
img, video { max-width: 100%; height: auto; }
svg { flex: none; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
:disabled { cursor: not-allowed; }
a { color: var(--brand-text); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3, h4, p, ul, ol, figure, dl, dd { margin: 0; }
ul[role="list"], ol[role="list"], ul.plain, ol.plain { list-style: none; padding: 0; }
[hidden] { display: none !important; }
::selection { background: var(--brand); color: var(--on-brand); }
:lang(fr) q, :lang(es) q { quotes: "\00AB\00A0" "\00A0\00BB"; }

/* ---------- focus and a11y ---------- */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }
.sr-only {
  position: absolute !important; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; inset-block-start: var(--space-2); inset-inline-start: var(--space-2); z-index: var(--z-toast);
  padding: var(--space-2) var(--space-4); border: 0; border-radius: var(--radius-control);
  background: var(--surface-inverse); color: var(--on-inverse); font-weight: var(--fw-medium);
  transform: translateY(-200%); transition: transform var(--dur-fast) var(--ease-out);
}
.skip-link:focus, .skip-link:focus-visible { transform: none; }
main:focus { outline: none; }

/* ---------- app frame ---------- */
#app { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-rows: auto auto minmax(0, 1fr); }
.app-main { min-width: 0; padding-block: var(--space-8) var(--space-15); }
html.is-bare #app { display: block; }
html.is-bare .app-main { padding: 0; }
.screen-enter { animation: screen-in var(--dur-slow) var(--ease-out) both; }
@keyframes screen-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- containers (C4.5.2): centred, no 100vw ---------- */
.page { inline-size: 100%; max-inline-size: var(--container); margin-inline: auto; padding-inline: var(--page-pad); }
.page--wide { max-inline-size: var(--container-wide); }
.narrow { inline-size: 100%; max-inline-size: var(--narrow); margin-inline: auto; }
.narrow-wide { inline-size: 100%; max-inline-size: var(--narrow-wide); margin-inline: auto; }
.reading { max-inline-size: var(--reading); }
.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.stack--lg { gap: var(--space-8); }
.row { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.row--wrap { flex-wrap: wrap; }
.row--end { justify-content: flex-end; }
.row--between { justify-content: space-between; }
.grow { flex: 1 1 auto; min-width: 0; }
.scroll-y {
  overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable;
  scrollbar-width: thin; scrollbar-color: transparent transparent;
}
.scroll-y:hover, .scroll-y:focus-within { scrollbar-color: var(--scroll-thumb) transparent; }
.scroll-y::-webkit-scrollbar { inline-size: 8px; block-size: 8px; }
.scroll-y::-webkit-scrollbar-thumb { background: transparent; border-radius: var(--radius-sm); }
.scroll-y:hover::-webkit-scrollbar-thumb, .scroll-y:focus-within::-webkit-scrollbar-thumb { background: var(--scroll-thumb); }

/* ---------- typography ---------- */
.display, .page-title, .h2, .h3, .serif { font-family: var(--font-serif); font-weight: var(--fw-display); letter-spacing: var(--ls-display); }
.display { font-size: var(--fs-display); line-height: 1.04; }
.page-title { font-size: var(--fs-h1); line-height: var(--lh-tight); max-inline-size: 24ch; text-wrap: balance; color: var(--text); }
.h2 { font-size: var(--fs-h2); line-height: 1.2; }
.h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); }
.h4 { font-family: var(--font-sans); font-size: var(--fs-h4); font-weight: var(--fw-semibold); line-height: var(--lh-snug); }
.page-lead { font-size: var(--fs-body); color: var(--text-muted); max-inline-size: 80ch; }
.lead { font-size: var(--fs-read); line-height: var(--lh-body); color: var(--text-2); }
.text-sm { font-size: var(--fs-sm); }
.text-xs { font-size: var(--fs-xs); }
.muted { color: var(--text-muted); }
.faint { color: var(--text-faint); }
.eyebrow {
  display: block; font-family: var(--font-sans); font-size: var(--fs-eyebrow); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--ls-eyebrow); line-height: var(--lh-snug); color: var(--text-muted);
}
.eyebrow--accent { color: var(--accent-text); }
.hl { color: var(--accent-text); }
.num {
  font-family: var(--font-serif); font-weight: var(--fw-display); letter-spacing: var(--ls-display);
  font-variant-numeric: tabular-nums; line-height: var(--lh-1);
}
.num--xl { font-size: var(--fs-num-xl); }
.num--lg { font-size: var(--fs-num-lg); }
.num--accent { color: var(--accent-large); }
.tabular { font-variant-numeric: tabular-nums; }
.ell { display: block; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.clamp-2, .clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; }
.clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; }
.flip { transform: scaleX(-1); }
[dir="rtl"] .flip-rtl { transform: scaleX(-1); }
:lang(ar) .eyebrow, :lang(he) .eyebrow, :lang(zh) .eyebrow, :lang(ja) .eyebrow, :lang(ko) .eyebrow { letter-spacing: 0; text-transform: none; }

/* ---------- icons ---------- */
.i { display: inline-block; inline-size: 18px; block-size: 18px; min-inline-size: 18px; vertical-align: -3px; stroke-width: var(--icon-stroke); }
.i--14 { inline-size: 14px; block-size: 14px; min-inline-size: 14px; vertical-align: -2px; }
.i--16 { inline-size: 16px; block-size: 16px; min-inline-size: 16px; vertical-align: -3px; }
.i--20 { inline-size: 20px; block-size: 20px; min-inline-size: 20px; vertical-align: -4px; }
.i--24 { inline-size: 24px; block-size: 24px; min-inline-size: 24px; vertical-align: -5px; }
.i--32 { inline-size: 32px; block-size: 32px; min-inline-size: 32px; }

/* ---------- Benerra motifs: dark grid + translucent mark (one motif per screen) ---------- */
.motif-host { position: relative; isolation: isolate; overflow: hidden; }
.motif-grid { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; z-index: -1; color: var(--grid-line); pointer-events: none; }
.motif-mark {
  position: absolute; z-index: -1; pointer-events: none; color: var(--motif-mark); opacity: var(--motif-opacity);
  inline-size: min(70%, 640px); block-size: auto; inset-block-end: -12%; inset-inline-end: -14%;
}
.brand-mark { color: var(--logo-mark); }

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