/* Shared documentation styles for the Sandke Apps doc site.
 *
 * Extracted from the inline <style> blocks that were duplicated byte-for-byte
 * across the doc pages. Pages still carry their own inline block for anything
 * genuinely page-specific; because this file is linked BEFORE that block, a
 * page can override any rule here simply by keeping its own version inline.
 * Several pages legitimately do (different .doc p margins, a smaller .doc h3,
 * a .step img without a top margin) — those variants were deliberately left in
 * place rather than normalised, so this extraction changes no page's
 * appearance except for figures, below.
 *
 * Depth matters when linking this: ../assets/docs.css from an app directory,
 * ../../assets/docs.css from a usage/ or how-to/ subdirectory.
 */

body { margin: 0 }

/* ---- Prose ------------------------------------------------------------- */

.doc h3 { font: 600 18px/1.4 var(--font-display); color: var(--ice); margin: 0 0 8px }
.doc p, .doc ul { font: 15px/1.65 var(--font-text); color: var(--frost); margin: 0 0 16px }
.doc li { margin-bottom: 4px }
.doc strong { color: var(--ice) }
.doc a { color: var(--bearing) }

/* ---- Numbered steps ---------------------------------------------------- */

.step { padding: 28px 0; border-bottom: 1px solid var(--wave) }
.step:last-child { border-bottom: none }
.stepnum { font: 700 13px/1 var(--font-mono); color: var(--bearing); margin-bottom: 8px }

/* Placeholder block for a screenshot that does not exist yet. */
.shot {
  border: 1px dashed var(--wave);
  border-radius: var(--radius-card);
  padding: 16px;
  background: color-mix(in srgb, var(--inst-bg-panel) 72%, transparent);
  font: 13px/1.55 var(--font-text);
  color: var(--haze);
  margin-top: 12px;
}

/* ---- Figures ----------------------------------------------------------- */
/*
 * A screenshot and its caption are one unit, so they share one panel. This is
 * structural rather than a spacing judgement: previously the caption sat 10px
 * below its own image and 12px above the *next* one, which on multi-image
 * steps left it genuinely ambiguous which image a caption belonged to.
 *
 * The caption uses --inst-text-muted (#8FAFC3 in dark), not --haze (#4A7FA0).
 * --haze on --void measures ≈3.9:1, below the WCAG AA 4.5:1 floor for text at
 * this size; --inst-text-muted on --inst-bg-panel measures ≈6.1:1. Do not
 * "quieten" captions by dimming them further — separate them by form instead.
 */

.doc figure {
  margin: 26px 0 0;
  background: var(--inst-bg-panel);
  border: 1px solid var(--wave);
  border-radius: var(--radius-card);
  padding: 10px 10px 0;
}

.doc figure img {
  width: 100%;
  display: block;
  margin: 0;
  border: none;
  border-radius: 6px;
}

.doc figcaption {
  font: 13px/1.5 var(--font-text);
  color: var(--inst-text-muted);
  margin: 0;
  padding: 9px 3px 11px;
}

/* Consecutive figures in one step need breathing room between the groups. */
.doc figure + figure { margin-top: 18px }