/* Reset, typography, layout and utilities. Components live in components.css. */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-gutter: stable;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-tap-highlight-color: transparent;
}
body {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font: 400 var(--fs-base)/var(--lh) var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
  overflow-x: clip; /* safety net only; layouts must not rely on it */
}
/* A modal <dialog> (confirm, sheet) locks page scroll. */
html:has(dialog[open]:modal), html.scroll-locked { overflow: hidden; }

img, svg, video, canvas { max-width: 100%; }
img, video { display: block; height: auto; }
svg { flex-shrink: 0; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
button:disabled { cursor: not-allowed; }
textarea { resize: vertical; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
table { border-collapse: collapse; }
[hidden] { display: none !important; }
::selection { background: color-mix(in srgb, var(--accent) 28%, transparent); }

/* ---- Typography ------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6 {
  font-weight: 680;
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  color: var(--text);
  text-wrap: balance;
}
h1 { font-size: var(--fs-2xl); font-weight: 700; }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); font-weight: 650; }
h4, h5, h6 { font-size: var(--fs-base); font-weight: 650; }
p { text-wrap: pretty; }
strong, b { font-weight: 650; }
small { font-size: var(--fs-xs); }

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

code, kbd, samp, pre { font-family: var(--mono); }
code {
  font-size: .875em;
  background: var(--code-bg);
  color: var(--text);
  padding: .12em .38em;
  border-radius: 6px;
  overflow-wrap: anywhere;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
pre {
  font-size: var(--fs-xs);
  line-height: 1.6;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  overflow-x: auto;
  tab-size: 2;
  -webkit-overflow-scrolling: touch;
}
pre code { background: none; padding: 0; border-radius: 0; font-size: inherit; overflow-wrap: normal; white-space: pre; }
hr { border: 0; border-top: 1px solid var(--border); margin: var(--sp-6) 0; }

/* ---- Focus ----------------------------------------------------------------- */
:focus { outline: none; }
:focus-visible { outline: none; box-shadow: var(--focus); }
a:not([class]):focus-visible { border-radius: 4px; }
@media (forced-colors: active) {
  :focus-visible { outline: 2px solid CanvasText; outline-offset: 2px; }
}
main:focus, main:focus-visible, [tabindex="-1"]:focus-visible { box-shadow: none; }

/* ---- App layout ------------------------------------------------------------ */
.app-main {
  display: block;
  min-height: calc(100dvh - var(--header-h));
  /* Leave room for the tutor FAB so it never covers the last row of content. */
  padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
}

.page {
  width: 100%;
  max-width: calc(var(--content-max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
.page-reading { max-width: calc(var(--reading-max) + 2 * var(--gutter)); }
.page { padding-top: var(--sp-6); }
@media (min-width: 768px) { .page { padding-top: var(--sp-8); } }

.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-6);
}
.page-header > :first-child { min-width: 0; flex: 1 1 280px; }
.page-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-xs); font-weight: 600; color: var(--text-3);
  margin-bottom: var(--sp-2);
}
.page-title { font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -0.015em; }
.page-subtitle { margin-top: 6px; color: var(--text-2); font-size: var(--fs-base); max-width: 64ch; }
.page-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.back-link {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: var(--tap); margin: -10px 0 var(--sp-2) -6px; padding: 0 8px 0 6px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm); font-weight: 550; color: var(--text-2);
}
.back-link:hover { color: var(--text); background: var(--surface-2); text-decoration: none; }

.section { margin-top: var(--sp-10); }
.section:first-child { margin-top: 0; }
.section-header {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.section-title { font-size: var(--fs-lg); font-weight: 650; }
.section-sub { color: var(--text-3); font-size: var(--fs-sm); margin-top: 2px; }

/* Grids: mobile-first, never overflow at 360px. */
.grid { display: grid; gap: var(--sp-4); grid-template-columns: minmax(0, 1fr); }
.grid-auto { grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); }
@media (min-width: 640px) { .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.stack { display: flex; flex-direction: column; gap: var(--sp-4); }
.stack-sm { display: flex; flex-direction: column; gap: var(--sp-2); }
.row { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.grow { flex: 1 1 auto; min-width: 0; }

/* ---- Utilities ------------------------------------------------------------- */
.text-2 { color: var(--text-2); }
.text-3 { color: var(--text-3); }
.bold { font-weight: 650; }
.tnum { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.mt-4 { margin-top: var(--sp-4); }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
@media (max-width: 639.98px) { .hide-sm { display: none !important; } }
@media (min-width: 640px) { .show-sm { display: none !important; } }
@media (max-width: 1023.98px) { .hide-md { display: none !important; } }
@media (min-width: 1024px) { .show-md { display: none !important; } }

.skip-link {
  position: fixed; left: 12px; top: calc(12px + env(safe-area-inset-top, 0px)); z-index: calc(var(--z-toast) + 1);
  padding: 10px 14px; border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text);
  transform: translateY(-300%);
}
.skip-link:focus-visible { transform: none; box-shadow: var(--shadow-lg), var(--focus); }

/* ---- Motion ---------------------------------------------------------------- */
@keyframes fade-in { from { opacity: 0; } }

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