/* Capture: flow figures (src/vignettes/capture/*). Scoped to .page-capture. Loaded after site.css. */

/* ---- labels drawn on the figures: real text, on a dark chip so glow never sits behind words */
.page-capture .vig .anat-lbl,
.page-capture .vig .gat-lbl,
.page-capture .vig .gap-lbl {
  position: absolute; left: 0; top: 0; z-index: 1; white-space: nowrap; pointer-events: none;
  padding: 3px 7px; border-radius: var(--radius-sm); background: oklch(11% 0.02 240 / 0.82);
  color: var(--color-muted); font-size: 0.6875rem; line-height: 1.2;
  transition: color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}
.page-capture .vig .anat-lbl.is-on,
.page-capture .vig .gat-lbl.is-on { color: var(--color-accent-hi); }
.page-capture .vig .anat-lbl--fact { color: var(--color-ink); }
.page-capture .vig .gap-lbl--gap { color: var(--color-alert); }
.page-capture .vig .gap-lbl--two { color: var(--color-alert); }
.page-capture .vig .gap-lbl.is-on { background: oklch(14% 0.03 40 / 0.9); }

/* ---- what one fact looks like: card | (figure over the note) */
.page-capture .anatomy { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: var(--space-6); }
.page-capture .anatomy__side { display: grid; gap: var(--space-3); align-content: center; min-width: 0; }
.page-capture .vig--anatomy { height: clamp(290px, 25vw, 360px); margin: 0 calc(-1 * var(--space-3)); }
.page-capture .anatomy__note { max-width: 32ch; min-height: 5.6em; }
@media (max-width: 900px) {
  .page-capture .anatomy { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .page-capture .anatomy__side { display: contents; }
  .page-capture .vig--anatomy { order: -1; height: 280px; margin: 0 calc(-1 * var(--gutter)); }
  .page-capture .anatomy__note { min-height: 0; }
}

/* ---- what we gather: the ledger, and its streams running out of each item's rule */
.page-capture .gather { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); align-items: stretch; }
.page-capture .gather .ledger { grid-template-columns: minmax(0, 1fr); gap: 0; }
.page-capture .gather .ledger li { position: relative; padding: var(--space-4) var(--space-5) var(--space-5) 0; }
.page-capture .gather .ledger li::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, oklch(83% 0.145 78 / 0), var(--color-accent));
  opacity: 0; transition: opacity var(--dur-slow) var(--ease-out);
}
.page-capture .gather .ledger li b { transition: color var(--dur-slow) var(--ease-out); }
.page-capture .gather .ledger li.is-lit::before { opacity: 1; }
.page-capture .gather .ledger li.is-lit b { color: var(--color-accent-hi); }
.page-capture .vig--gather { min-height: 420px; margin: -48px 0; }
.page-capture .vig--gather.is-side .gat-lbl { display: none; }
@media (max-width: 760px) {
  .page-capture .gather { grid-template-columns: minmax(0, 1fr); }
  .page-capture .vig--gather { order: -1; min-height: 0; height: 390px; margin: calc(-1 * var(--space-4)) calc(-1 * var(--gutter)) var(--space-4); }
  .page-capture .gather .ledger li { padding-right: 0; }
}

/* ---- what we will not do: figure | the four refusals */
.page-capture .refuse-wrap { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: var(--space-7); align-items: center; }
.page-capture .refuse-wrap .refuse { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
.page-capture .vig--gap { height: clamp(340px, 33vw, 470px); margin-left: calc(-1 * var(--space-5)); }
@media (max-width: 900px) {
  .page-capture .refuse-wrap { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .page-capture .vig--gap { height: 320px; margin: 0 calc(-1 * var(--gutter)); }
}

/* ---- no WebGL (or ?nogl): the figures are gone, so the text gets its original two-column grids back */
.no-vig .page-capture .gather, .no-vig .page-capture .refuse-wrap { display: block; }
.no-vig .page-capture .gather .ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-8); }
.no-vig .page-capture .gather .ledger li { padding: var(--space-5) 0; }
.no-vig .page-capture .refuse-wrap .refuse { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-8); }
@media (max-width: 760px) {
  .no-vig .page-capture .gather .ledger, .no-vig .page-capture .refuse-wrap .refuse { grid-template-columns: minmax(0, 1fr); }
}