/* AIEWF '26 Field Course — shared take-home + doc styles.
   Palette, type voices, and depth vocabulary per DESIGN.md. */

:root {
  --bg: oklch(1 0 0);
  --surface: oklch(0.976 0.004 340);
  --sunken: oklch(0.955 0.005 340);
  --ink: oklch(0.20 0.024 340);
  --muted: oklch(0.455 0.02 340);
  --border: oklch(0.90 0.005 340);
  --border-strong: oklch(0.82 0.008 340);
  --magenta: oklch(0.585 0.224 353);
  --magenta-ink: oklch(0.50 0.205 353);
  --magenta-deep: oklch(0.42 0.20 353);
  --on-magenta: oklch(0.99 0.01 340);
  --lime: oklch(0.885 0.17 128);
  --lime-deep: oklch(0.62 0.13 128);
  --on-lime: oklch(0.27 0.07 132);
  --overdue: oklch(0.565 0.205 25);

  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-pill: 999px;
  --s-2xs: 4px; --s-xs: 8px; --s-sm: 12px; --s-md: 16px;
  --s-lg: 24px; --s-xl: 32px; --s-2xl: 48px;

  --sans: "Archivo", system-ui, -apple-system, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: oklch(0.165 0.018 340);
    --surface: oklch(0.205 0.022 340);
    --sunken: oklch(0.245 0.022 340);
    --ink: oklch(0.955 0.01 340);
    --muted: oklch(0.72 0.03 340);
    --border: oklch(0.32 0.02 340);
    --border-strong: oklch(0.40 0.025 340);
    --magenta: oklch(0.66 0.22 353);
    --magenta-ink: oklch(0.72 0.20 353);
    --magenta-deep: oklch(0.40 0.20 353);
    --lime: oklch(0.86 0.17 128);
    --lime-deep: oklch(0.52 0.12 128);
    --overdue: oklch(0.62 0.20 25);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 450;
  line-height: 1.6;
  font-size: 1.02rem;
  -webkit-font-smoothing: antialiased;
}

/* ---- Top bar (shared chrome) ---- */
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: var(--s-md);
  padding: var(--s-sm) var(--s-lg);
  background: color-mix(in oklch, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--border);
}
.topbar .brand {
  font-family: var(--sans);
  font-weight: 800;
  font-stretch: 125%;
  letter-spacing: -0.01em;
  font-size: 1rem;
  margin-right: auto;
  color: var(--ink);
  text-decoration: none;
}
.topbar .brand .tick { color: var(--magenta-ink); }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: var(--s-xs);
  font-family: var(--sans); font-weight: 700; font-size: 0.95rem;
  padding: 10px 16px; border-radius: var(--r-md);
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: transform 140ms cubic-bezier(0.2,0.9,0.3,1),
              box-shadow 140ms cubic-bezier(0.2,0.9,0.3,1);
}
.btn-primary {
  background: var(--magenta); color: var(--on-magenta);
  box-shadow: 4px 4px 0 var(--magenta-deep);
}
.btn-primary:hover { transform: translate(-1px,-1px); box-shadow: 5px 5px 0 var(--magenta-deep); }
.btn-primary:active { transform: translate(4px,4px); box-shadow: 0 0 0 var(--magenta-deep); }
.btn-ghost {
  background: var(--surface); color: var(--magenta-ink);
  border-color: var(--border-strong);
  box-shadow: 3px 3px 0 color-mix(in oklch, var(--magenta-ink) 35%, transparent);
}
.btn-ghost:hover { transform: translate(-1px,-1px); }
.btn-ghost:active { transform: translate(3px,3px); box-shadow: 0 0 0 transparent; }

/* ---- Mono label ---- */
.label {
  font-family: var(--mono); font-weight: 600; font-size: 0.72rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}

/* ---- Links in prose ---- */
a { color: var(--magenta-ink); text-underline-offset: 2px; }

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ================= DOC PAGES (pandoc) ================= */
.doc {
  max-width: 760px; margin: 0 auto; padding: var(--s-2xl) var(--s-lg) 96px;
}
.doc h1 {
  font-family: var(--sans); font-weight: 800; font-stretch: 125%;
  font-size: clamp(1.7rem, 4vw, 2.3rem); line-height: 1.08;
  letter-spacing: -0.02em; margin: 0.2em 0 0.6em;
}
.doc h2 {
  font-family: var(--sans); font-weight: 700; font-size: 1.4rem;
  line-height: 1.2; letter-spacing: -0.01em;
  margin: 2em 0 0.5em; padding-top: 0.8em; border-top: 1px solid var(--border);
}
.doc h3 { font-family: var(--sans); font-weight: 650; font-size: 1.12rem; margin: 1.6em 0 0.4em; }
.doc h4 { font-weight: 700; font-size: 1rem; margin: 1.3em 0 0.3em; color: var(--magenta-ink); }
.doc p, .doc li { font-size: 1.02rem; }
.doc ul, .doc ol { padding-left: 1.3em; }
.doc li { margin: 0.3em 0; }
.doc strong { font-weight: 700; color: var(--ink); }
.doc code {
  font-family: var(--mono); font-size: 0.86em;
  background: var(--sunken); padding: 0.12em 0.38em; border-radius: 6px;
  border: 1px solid var(--border);
}
.doc pre {
  font-family: var(--mono); font-size: 0.82rem; line-height: 1.5;
  background: var(--sunken); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: var(--s-md); overflow-x: auto;
}
.doc pre code { background: none; border: none; padding: 0; }
.doc blockquote {
  margin: 1.2em 0; padding: 0.2em 0 0.2em 1.1em;
  border-left: 3px solid var(--magenta-ink); color: var(--muted);
}
.doc hr { border: none; border-top: 1px solid var(--border); margin: 2.4em 0; }
.doc table { border-collapse: collapse; width: 100%; font-size: 0.95rem; margin: 1.2em 0; }
.doc th, .doc td { border: 1px solid var(--border); padding: 8px 12px; text-align: left; }
.doc th { background: var(--sunken); font-weight: 700; }
.doc img { max-width: 100%; border-radius: var(--r-md); }

.doc-foot {
  max-width: 760px; margin: 0 auto; padding: 0 var(--s-lg) 64px;
  color: var(--muted); font-family: var(--mono); font-size: 0.72rem;
  letter-spacing: 0.06em;
}