/* base.css: shared foundation for every page (learner, sign-in, dashboard, editor).
 * White clay by default. Clay = a matte fill lit from the top left: a lighter face, an inner
 * highlight, an inner shade on the lower edge, and a soft drop shadow. One hue per object.
 * Theme tokens (--ground --surface --ink --accent --accent2 --radius --depth --font-head
 * --font-body) come from the course theme stylesheet; the defaults below are the white preset.
 */
:root {
  --ground: #F3F1EC; --surface: #FFFFFF; --ink: #1D2127; --accent: #E07A3F; --accent2: #6BA3E0;
  --radius: 18px; --depth: .6; --font-head: 'Archivo', system-ui, sans-serif; --font-body: 'Archivo', system-ui, sans-serif;
  color-scheme: light;

  --muted: color-mix(in oklab, var(--ink) 66%, var(--ground));
  --line: color-mix(in oklab, var(--ink) 12%, transparent);
  --a-hi: color-mix(in oklab, var(--accent) 58%, #ffffff);
  --a-mid: var(--accent);
  --a-lo: color-mix(in oklab, var(--accent) 70%, #000000);
  --s-hi: color-mix(in oklab, var(--accent2) 58%, #ffffff);
  --s-mid: var(--accent2);
  --s-lo: color-mix(in oklab, var(--accent2) 66%, #000000);
  --c-hi: color-mix(in oklab, var(--surface) 70%, #ffffff);
  --c-lo: color-mix(in oklab, var(--surface) 93%, var(--ink));
  --clay-surface: linear-gradient(150deg, var(--c-hi), var(--surface) 55%, var(--c-lo));
  --drop: 0 calc(6px + var(--depth) * 10px) calc(16px + var(--depth) * 22px) calc(-6px - var(--depth) * 4px) rgb(40 34 26 / calc(.12 + var(--depth) * .14));
  --drop-lift: 0 calc(12px + var(--depth) * 14px) calc(24px + var(--depth) * 26px) calc(-8px - var(--depth) * 4px) rgb(40 34 26 / calc(.16 + var(--depth) * .16));
  --inner-hi: inset 2px 3px 2px rgb(255 255 255 / .9);
  --inner-lo: inset -3px -5px 10px rgb(40 34 26 / calc(.04 + var(--depth) * .07));
  --well-shadow: inset 2px 3px 6px rgb(40 34 26 / calc(.10 + var(--depth) * .10)), inset -2px -2px 4px rgb(255 255 255 / .9);
  --ink-on-accent: color-mix(in oklab, var(--accent) 22%, #1a0c04);
  --ink-on-steel: color-mix(in oklab, var(--accent2) 18%, #06101c);
  --accent-text: color-mix(in oklab, var(--accent) 64%, #000000);
  --steel-text: color-mix(in oklab, var(--accent2) 55%, #000000);
}
html[data-mode="dark"] {
  color-scheme: dark;
  --muted: color-mix(in oklab, var(--ink) 72%, var(--ground));
  --c-hi: color-mix(in oklab, var(--surface) 86%, #ffffff);
  --c-lo: color-mix(in oklab, var(--surface) 78%, #000000);
  --drop: 0 calc(10px + var(--depth) * 14px) calc(22px + var(--depth) * 26px) calc(-8px - var(--depth) * 4px) rgb(0 0 0 / calc(.35 + var(--depth) * .25));
  --drop-lift: 0 calc(16px + var(--depth) * 18px) calc(30px + var(--depth) * 30px) calc(-10px - var(--depth) * 4px) rgb(0 0 0 / calc(.4 + var(--depth) * .25));
  --inner-hi: inset 2px 3px 2px rgb(255 255 255 / calc(.08 + var(--depth) * .1));
  --inner-lo: inset -3px -5px 10px rgb(0 0 0 / calc(.18 + var(--depth) * .22));
  --well-shadow: inset 2px 3px 6px rgb(0 0 0 / .45), inset -1px -1px 2px rgb(255 255 255 / .06);
  --accent-text: color-mix(in oklab, var(--accent) 70%, #ffffff);
  --steel-text: color-mix(in oklab, var(--accent2) 70%, #ffffff);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; background: var(--ground); color: var(--ink); font-family: var(--font-body); line-height: 1.6; overflow-x: clip; }
h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.15; letter-spacing: -.015em; }
h1 { font-weight: 800; }
a { color: var(--accent-text); }
img { max-width: 100%; height: auto; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; border-radius: 4px; }
:focus:not(:focus-visible) { outline: none; }
::selection { background: color-mix(in oklab, var(--accent) 30%, transparent); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -9999px; }
.skip:focus-visible { left: 12px; top: 12px; z-index: 300; padding: 10px 16px; background: var(--surface); border-radius: 12px; box-shadow: var(--drop); }
.eyebrow { margin: 0 0 10px; font: 700 .76rem/1.2 var(--font-head); letter-spacing: .14em; text-transform: uppercase; color: var(--steel-text); }

/* clay surfaces */
.clay { background: var(--clay-surface); border-radius: var(--radius); box-shadow: var(--inner-hi), var(--inner-lo), var(--drop); }
.well { background: var(--c-lo); border-radius: calc(var(--radius) * .7); box-shadow: var(--well-shadow); }

/* spheres: lit clay balls; size and position are set by the page */
.sphere { display: block; border-radius: 50%; box-shadow: inset -14px -18px 30px rgb(0 0 0 / .22), inset 8px 10px 18px rgb(255 255 255 / .35), var(--drop-lift); }
.sphere-accent { background: radial-gradient(circle at 34% 28%, var(--a-hi), var(--a-mid) 46%, var(--a-lo)); }
.sphere-steel { background: radial-gradient(circle at 34% 28%, var(--s-hi), var(--s-mid) 48%, var(--s-lo)); }
.sphere-neutral { background: radial-gradient(circle at 34% 28%, var(--c-hi), var(--surface) 50%, var(--c-lo)); }

/* buttons: clay pills that rise on hover and press in */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border: 0; border-radius: 999px; cursor: pointer; text-decoration: none;
  font: 700 .95rem/1.2 var(--font-head); color: var(--ink); background: var(--clay-surface);
  box-shadow: var(--inner-hi), var(--inner-lo), var(--drop);
  transition: transform .16s cubic-bezier(.2,.8,.2,1), box-shadow .16s cubic-bezier(.2,.8,.2,1), filter .16s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--inner-hi), var(--inner-lo), var(--drop-lift); }
.btn:active { transform: translateY(1px) scale(.985); box-shadow: var(--well-shadow); }
.btn-primary { color: var(--ink-on-accent); background: radial-gradient(130% 160% at 28% 12%, var(--a-hi), var(--a-mid) 50%, var(--a-lo));
  box-shadow: inset 2px 3px 2px rgb(255 255 255 / .35), inset -3px -6px 10px rgb(0 0 0 / .14), 0 10px 20px -10px color-mix(in oklab, var(--accent) 70%, transparent), var(--drop); }
.btn-primary:hover { box-shadow: inset 2px 3px 2px rgb(255 255 255 / .35), inset -3px -6px 10px rgb(0 0 0 / .14), 0 14px 26px -10px color-mix(in oklab, var(--accent) 75%, transparent), var(--drop-lift); }
.btn-secondary { color: var(--ink-on-steel); background: radial-gradient(130% 160% at 28% 12%, var(--s-hi), var(--s-mid) 50%, var(--s-lo));
  box-shadow: inset 2px 3px 2px rgb(255 255 255 / .35), inset -3px -6px 10px rgb(0 0 0 / .14), 0 10px 20px -10px color-mix(in oklab, var(--accent2) 65%, transparent), var(--drop); }
.btn-ghost { background: var(--clay-surface); }
.btn-sm { padding: 7px 14px; font-size: .82rem; }
.btn-danger { color: #B3261E; }
.btn-danger:hover { color: #fff; background: radial-gradient(130% 160% at 28% 12%, #EE8A84, #D93A30 50%, #9E2019); }
.btn:disabled, .btn[aria-disabled="true"], .btn.is-locked { opacity: .5; cursor: not-allowed; filter: grayscale(.7); transform: none; box-shadow: var(--inner-hi), var(--inner-lo); }

/* inputs: pressed-in wells */
input[type="text"], input[type="password"], input[type="email"], input[type="url"], input[type="search"], input[type="number"], textarea, select {
  width: 100%; padding: 11px 14px; border: 0; border-radius: calc(var(--radius) * .6);
  font: inherit; color: var(--ink); background: var(--c-lo); box-shadow: var(--well-shadow);
}
textarea { resize: vertical; min-height: 90px; }
input[type="checkbox"], input[type="radio"], input[type="range"] { accent-color: var(--accent); }
label { font-weight: 600; }

/* rich text */
.rich > :first-child { margin-top: 0; }
.rich > :last-child { margin-bottom: 0; }
.rich p { margin: 0 0 .8em; }
.rich ul, .rich ol { margin: 0 0 .8em; padding-left: 1.3em; }
.rich li { margin: .2em 0; }
.rich h3, .rich h4 { margin: 1.1em 0 .4em; }
.rich a { color: var(--accent-text); text-underline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .btn:hover { transform: none; }
}