/* ============================================================
   Bosshart Study — Base layer
   Minimal resets, document defaults, selection, focus, and the
   .prose reading container. Tokens must be imported before this.
   ============================================================ */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  font-weight: var(--fw-regular);
}

::selection { background: var(--selection-bg); color: var(--selection-fg); }

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

:where(:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

:where(code, pre, kbd, samp) { font-family: var(--font-mono); }

:where(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-display);
  color: var(--text-strong);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-heading);
  margin: 0;
  text-wrap: balance;
}

:where(p) { text-wrap: pretty; }

:where(hr) {
  border: none;
  border-top: var(--rule);
  margin: var(--space-8) 0;
}

img, svg, video { display: block; max-width: 100%; }

/* ---------- .prose: the long-form reading container ---------- */
.prose {
  max-width: var(--measure);
  color: var(--text-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
}
.prose > * + * { margin-top: var(--space-4); }
.prose h2 {
  font-size: var(--text-2xl);
  letter-spacing: var(--tracking-tight);
  margin-top: var(--space-10);
  margin-bottom: var(--space-1);
  scroll-margin-top: calc(var(--nav-height) + var(--space-6));
}
.prose h3 {
  font-size: var(--text-xl);
  margin-top: var(--space-8);
  margin-bottom: var(--space-1);
  scroll-margin-top: calc(var(--nav-height) + var(--space-6));
}
.prose h4 {
  font-size: var(--text-lg);
  margin-top: var(--space-6);
  margin-bottom: var(--space-1);
}
.prose p { margin: 0; }
.prose strong { font-weight: var(--fw-semibold); color: var(--text-strong); }
.prose a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--accent-border); }
.prose a:hover { text-decoration-color: currentColor; }
.prose ul, .prose ol { margin: 0; padding-left: var(--space-6); }
.prose li { margin-top: var(--space-2); }
.prose li::marker { color: var(--text-faint); }
.prose code:not(pre code) {
  font-family: var(--font-mono);
  font-size: var(--text-code-inline);
  background: var(--code-inline-bg);
  color: var(--code-inline-fg);
  padding: 0.1em 0.38em;
  border-radius: var(--radius-sm);
  border: var(--border-width) solid var(--border-soft);
  white-space: nowrap;
}
.prose blockquote {
  margin: 0;
  padding-left: var(--space-4);
  border-left: var(--border-width-2) solid var(--accent-border);
  color: var(--text-muted);
  font-style: italic;
}

/* Eyebrow / uppercase label utility */
.eyebrow {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  font-weight: var(--fw-semibold);
  color: var(--text-faint);
}

/* ============================================================
   Reading-first prose spine — synced from DesignSync 3c2d0b06
   The DEFAULT for theory is flowing prose, not a stack of boxes.
   `.prose` above is the spine; the helpers below are the only
   "blocks" that still flow inline (lead, definition, steps,
   worked example). Boxed blocks live in styles/components.css.
   ============================================================ */

/* The one framing paragraph under an h2 — flowing, a touch larger + quieter */
.prose .lead, .lead {
  font-size: var(--text-md);
  line-height: var(--leading-body);
  color: var(--text-muted);
}

/* Definition — a named term defined IN the flow (no box). The headword
   carries the weight; everything after it is ordinary prose. */
.prose .tb-def { margin: var(--space-4) 0; }
.tb-def__term { font-weight: var(--fw-semibold); color: var(--text-strong); }
.tb-def__term::after { content: " — "; color: var(--text-faint); font-weight: var(--fw-regular); }
.tb-def__term--bare::after { content: none; }

/* Steps / method — a procedure as a flowing numbered list (no box) */
.prose .tb-steps { list-style: none; counter-reset: tb-step; margin: var(--space-4) 0; padding: 0; }
.prose .tb-steps > li {
  position: relative; counter-increment: tb-step;
  padding-left: var(--space-8); margin-top: var(--space-3); line-height: var(--leading-body);
}
.prose .tb-steps > li:first-child { margin-top: 0; }
.prose .tb-steps > li::before {
  content: counter(tb-step); position: absolute; left: 0; top: 0.12em;
  width: 1.5em; height: 1.5em; border-radius: var(--radius-full);
  background: var(--accent-soft); color: var(--accent-text);
  border: var(--border-width) solid var(--accent-border);
  font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: var(--fw-semibold);
  display: grid; place-items: center;
}

/* Worked example — prose + a CodeBlock (its surface is the only chrome) +
   an optional result line. No wrapper box. */
.prose .tb-worked { margin: var(--space-5) 0; }
.prose .tb-worked > * + * { margin-top: var(--space-3); }
.tb-worked__cap { font-size: var(--text-xs); color: var(--text-muted); }

/* ---------- Inline prose utilities ---------- */
/* defined / key term inline (also the headword style for .tb-def) */
.tb-term { font-weight: var(--fw-semibold); color: var(--text-strong); }
/* a term quoted in the other language (FR↔EN) */
.tb-fr { font-style: italic; color: var(--text-strong); }
/* result / value highlight — a calm accent wash, used sparingly */
.tb-mark {
  background: color-mix(in srgb, var(--accent-soft) 85%, transparent);
  color: var(--accent-text); font-weight: var(--fw-medium);
  padding: 0.05em 0.32em; border-radius: var(--radius-xs);
}
/* inline ✔ / ✗ verdicts */
.tb-ok  { color: var(--positive); font-weight: var(--fw-semibold); }
.tb-no  { color: var(--danger);  font-weight: var(--fw-semibold); }
/* keyboard key */
.tb-kbd {
  font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-muted);
  background: var(--color-surface); border: var(--border-width) solid var(--border);
  border-bottom-width: 2px; border-radius: var(--radius-xs); padding: 1px 5px; white-space: nowrap;
}
/* "→ value" result marker for a worked example */
.tb-result { font-family: var(--font-mono); font-size: var(--text-code-inline); color: var(--text-muted); }
.tb-result::before { content: "→\00a0"; color: var(--text-faint); }