/* Lesson/track-index prose (Story 1.6): callouts, code blocks, and inline
   links for the Pandoc-converted HTML tools/ingest.py writes (via
   tools/callouts-html.lua). References the custom properties
   tokens.css.njk already emits -- no color, font, or spacing value is
   restated here. Token assignments per DESIGN.md's Components section:
   callout-oneline, callout-metaphor, code-block, link-inline. */

.lesson-prose {
  max-width: var(--spacing-measure);
}

/* .callout -- every elevated surface carries bg-elevated plus a 1px
   border edge (DESIGN.md's Elevation rule); the left edge widens to 3px
   as the rail, color-coded per kind below. The border (not the tonal
   step alone) is what survives forced-colors: active (NFR34). */
.callout {
  margin: var(--spacing-8) 0;
  padding: var(--spacing-3) var(--spacing-4);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: var(--radius-sm);
}

.callout > :first-child {
  margin-top: 0;
}

.callout > :last-child {
  margin-bottom: 0;
}

.callout-label {
  margin: 0 0 var(--spacing-2);
  font-size: var(--font-callout-label-size);
  font-weight: var(--font-callout-label-weight);
  line-height: var(--font-callout-label-line-height);
  letter-spacing: var(--font-callout-label-letter-spacing);
  text-transform: uppercase;
}

/* oneline carries the chapter's load-bearing thesis: accent rail + label. */
.callout-oneline {
  border-left-color: var(--accent);
}

.callout-oneline .callout-label {
  color: var(--accent);
}

/* metaphor and the four kinds DESIGN.md doesn't spec (watchout, recall,
   aside, napkin) are equally non-load-bearing explanatory scaffolding, so
   they share metaphor's border/fg-muted treatment -- distinguished only by
   their label text (napkin's also carries its title). */
.callout-metaphor,
.callout-watchout,
.callout-recall,
.callout-aside,
.callout-napkin {
  border-left-color: var(--border);
}

.callout-metaphor .callout-label,
.callout-watchout .callout-label,
.callout-recall .callout-label,
.callout-aside .callout-label,
.callout-napkin .callout-label {
  color: var(--fg-muted);
}

/* forced-colors: active (NFR34, Story 1.10) -- an explicit CanvasText
   border on every kind, the same guarantee shell.css's .block-cursor
   override makes, rather than trusting the themed var(--border)/
   var(--accent) border-left-color to survive the forced palette
   unverified. */
@media (forced-colors: active) {
  .callout {
    border-color: CanvasText;
  }
}

/* code-block -- same elevation treatment, never wraps: long lines scroll
   horizontally inside their own container, never the page body. */
.lesson-prose pre.code-block {
  margin: var(--spacing-8) 0;
  padding: var(--spacing-3) var(--spacing-4);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow-x: auto;
  white-space: pre;
}

.lesson-prose pre.code-block code {
  font-family: var(--font-family);
  font-size: var(--font-code-size);
  font-weight: var(--font-code-weight);
  line-height: var(--font-code-line-height);
}

/* link-inline -- accent, underlined at rest in both themes (never color
   alone, NFR19); thickens on hover; the global :focus-visible rule
   (shell.css) supplies the focus ring. */
.lesson-prose a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.lesson-prose a:hover {
  text-decoration-thickness: 2px;
}

/* figure (Story 1.7) -- unframed content (UX-DR20): no shadow, no border,
   no background box. The inlined SVG itself already carries its own
   theming (currentColor / var(--token, #print-hex)); this rule only
   governs the figure element's own box and the caption's type/color. */
.lesson-prose figure {
  margin: var(--spacing-8) 0;
  background: transparent;
  border: none;
  max-width: 100%;
}

.lesson-prose figure svg {
  max-width: 100%;
  height: auto;
}

/* Story 4.1: post/page figures are markdown-it-implicit-figures' <img>-based
   shape (lesson figures inline an SVG twin instead -- the rule above). */
.lesson-prose figure img {
  max-width: 100%;
  height: auto;
}

.lesson-prose figcaption {
  margin-top: var(--spacing-2);
  font-size: var(--font-meta-size);
  font-weight: var(--font-meta-weight);
  line-height: var(--font-meta-line-height);
  color: var(--fg-muted);
}