/* ===========================================================
   CHAPTER AT A GLANCE — flow illustration
   ===========================================================
   A tiny, friendly chain of beats near the top of each chapter
   page: colour-coded pills joined by arrows, captioned beneath.
   The 10-second on-ramp above the deep verse-by-verse study.

   Palette ties to the dark theme tokens in base.css. Each beat
   type gets a distinct but harmonious hue. Light on bandwidth:
   no images, no JS, prints cleanly, wraps + stacks on mobile.
   =========================================================== */

.chapter-flow{
  margin: 0 0 2rem;
  padding: 1.25rem 1.4rem 1.1rem;
  border: 1px solid rgba(201,162,74,.28);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(26,20,16,.55), rgba(20,24,38,.35));
  box-shadow: 0 1px 0 rgba(255,255,255,.03) inset;
}

.flow-heading{
  margin: 0 0 1rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: #cda952;
}

/* The chain — a real ordered list flattened into a flowing row. */
.flow-track{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem .15rem;
}

.flow-step{
  display: inline-flex;
  align-items: center;
  gap: .15rem;
}

/* A beat pill. */
.flow-node{
  display: inline-flex;
  align-items: center;
  padding: .42rem .8rem;
  border-radius: 999px;
  border: 1px solid var(--flow-bd, rgba(244,235,217,.3));
  background: var(--flow-bg, rgba(244,235,217,.08));
  color: var(--flow-fg, var(--parchment));
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .82rem;
  font-weight: 500;
  line-height: 1.15;
  white-space: nowrap;
}
.flow-node-label{ display: inline-block; }

/* Arrows + meaningful connectors. */
.flow-arrow{
  color: rgba(244,235,217,.4);
  font-size: .95rem;
  padding: 0 .12rem;
  user-select: none;
}
.flow-conn{
  display: inline-flex;
  align-items: center;
  gap: .12rem;
}
.flow-conn-word{
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .08rem .34rem;
  border-radius: 999px;
}
/* "but" = a reversal (grace after judgment); "so" = consequence. */
.flow-conn--but  .flow-conn-word{ color: var(--pulse-good); background: rgba(109,187,109,.14); }
.flow-conn--so   .flow-conn-word{ color: #e6c878; background: rgba(233,200,112,.12); }
.flow-conn--because .flow-conn-word{ color: #cdddf0; background: rgba(168,196,226,.12); }

/* Caption — names the arc of the chapter. */
.flow-caption{
  margin: 1rem 0 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.05rem;
  font-style: italic;
  color: var(--parchment-dim);
  line-height: 1.4;
}

/* Per-page legend (rendered once per flow). */
.flow-legend{
  list-style: none;
  margin: .95rem 0 0;
  padding: .8rem 0 0;
  border-top: 1px solid rgba(244,235,217,.1);
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .9rem;
}
.flow-legend-item{
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.flow-swatch{
  width: .7rem;
  height: .7rem;
  border-radius: 3px;
  border: 1px solid var(--flow-bd, rgba(244,235,217,.3));
  background: var(--flow-bg, rgba(244,235,217,.12));
}
.flow-legend-label{
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .66rem;
  letter-spacing: .04em;
  color: rgba(244,235,217,.62);
}

/* ===========================================================
   TYPE PALETTE — distinct but harmonious hues.
   Values are pinned (not theme tokens) on purpose: the active
   "cinematic" theme layer whitewashes --gold/--parchment to
   white, which would collapse the colour-coding. These hold the
   spec's hues (divine warm gold, grace green, sin/judgment muted
   red, person/place neutral) on both the base and black themes.
   =========================================================== */
.flow-node--divine   { --flow-fg:#1a1410; --flow-bg:#cda952;             --flow-bd:#e6c878; font-weight:600; }
.flow-node--grace    { --flow-fg:#0c1a0c; --flow-bg:#6dbb6d;             --flow-bd:#8fd08f; font-weight:600; }
.flow-node--covenant { --flow-fg:#f7ecd2; --flow-bg:rgba(176,134,52,.5); --flow-bd:#b8893a; }
.flow-node--prophecy { --flow-fg:#eaf2fb; --flow-bg:rgba(107,142,184,.34);--flow-bd:#7e9fc4; }
.flow-node--sin      { --flow-fg:#fbeaea; --flow-bg:rgba(176,72,72,.34);  --flow-bd:#c96b6b; }
.flow-node--judgment { --flow-fg:#f7dcdc; --flow-bg:rgba(150,40,40,.5);   --flow-bd:#b04848; }
.flow-node--person   { --flow-fg:#eaf2fb; --flow-bg:rgba(107,142,184,.2); --flow-bd:rgba(125,159,196,.55); }
.flow-node--place    { --flow-fg:#efe7d4; --flow-bg:rgba(229,221,203,.1); --flow-bd:rgba(229,221,203,.34); }
.flow-node--event    { --flow-fg:#f1ead9; --flow-bg:rgba(229,221,203,.14);--flow-bd:rgba(229,221,203,.4); }
.flow-node--teaching { --flow-fg:#f3ead4; --flow-bg:rgba(201,162,74,.18); --flow-bd:rgba(201,162,74,.45); }

/* ---- Mobile: stack the chain vertically ---- */
@media (max-width: 560px){
  .flow-track{ flex-direction: column; align-items: stretch; gap: .1rem; }
  .flow-step{ flex-direction: column; align-items: stretch; gap: .1rem; }
  .flow-node{ white-space: normal; justify-content: center; text-align: center; }
  .flow-arrow{ transform: rotate(90deg); align-self: center; padding: .1rem 0; }
  .flow-conn{ flex-direction: column; }
  .flow-conn .flow-arrow{ transform: rotate(90deg); }
}

/* ---- Print: clean, ink-friendly ---- */
@media print{
  .chapter-flow{
    border: 1px solid #999;
    background: none;
    box-shadow: none;
    break-inside: avoid;
  }
  .flow-heading, .flow-caption, .flow-legend-label{ color: #000; }
  .flow-node{
    border: 1px solid #555 !important;
    background: none !important;
    color: #000 !important;
  }
  .flow-arrow{ color: #555; }
  .flow-conn-word{ color: #000 !important; background: none !important; border: 1px solid #999; }
  .flow-swatch{ border: 1px solid #555 !important; }
}