/* ==========================================================================
   Explainer blocks — pure_cms.blocks_explainer

   One rule governs this file: nothing here paints a background. Every surface,
   border and muted tone is mixed from `currentColor`, so a block takes the
   colour of the section it is dropped into. Put the block in a `bg-dark`
   section with `foreground_colour: white` and it becomes a dark band; put it in
   a plain section and it is light. There is no second stylesheet for dark, and
   no way to end up with a dark card marooned in a white page.

   The only fixed colours are the categorical accents, because a hue that means
   "business" or "infrastructure" has to mean it in both.
   ========================================================================== */

.ex {
  --ex-surface: color-mix(in srgb, currentColor 5%, transparent);
  --ex-surface-2: color-mix(in srgb, currentColor 9%, transparent);
  --ex-line: color-mix(in srgb, currentColor 20%, transparent);
  --ex-line-strong: color-mix(in srgb, currentColor 34%, transparent);
  --ex-muted: color-mix(in srgb, currentColor 72%, transparent);
  --ex-faint: color-mix(in srgb, currentColor 55%, transparent);
  --ex-radius: 12px;
  --ex-radius-sm: 8px;
  --ex-accent: currentColor;
}

/* categorical accents — constant across light and dark sections */
.ex-accent-indigo  { --ex-accent: #312b6d; }
.ex-accent-blue    { --ex-accent: #1d74b3; }
.ex-accent-sky     { --ex-accent: #82cae6; }
.ex-accent-magenta { --ex-accent: #cc1d63; }
.ex-accent-coral   { --ex-accent: #ec7d6a; }
.ex-accent-gold    { --ex-accent: #f9d68a; }
.ex-accent-green   { --ex-accent: #2bb673; }

/* a dark section needs the deeper accents lifted to stay legible */
.bg-dark .ex-accent-indigo,
.bg-black .ex-accent-indigo { --ex-accent: #8f88d6; }
.bg-dark .ex-accent-blue,
.bg-black .ex-accent-blue { --ex-accent: #5aa9e0; }
.bg-dark .ex-accent-magenta,
.bg-black .ex-accent-magenta { --ex-accent: #ef6ba0; }

.ex-eyebrow {
  font-weight: 800;
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ex-faint);
  margin-bottom: .5rem;
}
.ex-heading { font-weight: 800; letter-spacing: -.01em; margin-bottom: .35rem; }
.ex-intro { color: var(--ex-muted); max-width: 62ch; }
.ex-footnote { color: var(--ex-faint); font-size: .88rem; margin-top: 1rem; }
.ex-card {
  border: 1.5px solid var(--ex-line);
  border-radius: var(--ex-radius);
  background: var(--ex-surface);
  padding: 1.1rem 1.2rem;
  height: 100%;
}
.ex-code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: .74rem;
  color: var(--ex-faint);
  display: block;
  margin-top: .35rem;
  word-break: break-word;
}

/* ── status chips ─────────────────────────────────────────────────────── */
.ex-chip {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .04em;
  border-radius: 999px;
  padding: .15em .6em;
  border: 1.5px solid var(--ex-line-strong);
  white-space: nowrap;
}
.ex-chip::before {
  content: "";
  width: .5em;
  height: .5em;
  border-radius: 50%;
  background: currentColor;
}
.ex-chip-live { color: #1f9d57; border-color: color-mix(in srgb, #1f9d57 45%, transparent); }
.ex-chip-built { color: #c98a12; border-color: color-mix(in srgb, #c98a12 45%, transparent); }
.ex-chip-built::before { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
.ex-chip-planned { color: var(--ex-faint); border-style: dashed; }
.bg-dark .ex-chip-live, .bg-black .ex-chip-live { color: #37c980; }
.bg-dark .ex-chip-built, .bg-black .ex-chip-built { color: #f0c05a; }
.ex-status-note { font-size: .78rem; color: var(--ex-faint); margin-top: .3rem; }

/* ── process steps ────────────────────────────────────────────────────── */
.ex-steps { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.ex-step { position: relative; }
.ex-step-n {
  width: 2rem; height: 2rem;
  display: grid; place-items: center;
  border-radius: var(--ex-radius-sm);
  border: 1.5px solid var(--ex-accent);
  color: var(--ex-accent);
  font-weight: 900; font-size: .85rem;
  margin-bottom: .6rem;
}
.ex-step-label { font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ex-faint); }
.ex-step h4 { font-size: 1.05rem; font-weight: 800; margin: .15rem 0 .3rem; }
.ex-step p { color: var(--ex-muted); font-size: .92rem; margin: 0; }

/* ── timeline ─────────────────────────────────────────────────────────── */
.ex-timeline { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.ex-stage { border-top: 3px solid var(--ex-accent); padding-top: .85rem; }
.ex-stage .ex-step-label { color: var(--ex-accent); }
.ex-stage h4 { font-size: 1.1rem; font-weight: 800; margin: .2rem 0 .35rem; }
.ex-stage p { color: var(--ex-muted); font-size: .92rem; margin: 0; }

/* ── comparison ───────────────────────────────────────────────────────── */
.ex-comparison { display: grid; gap: 1.25rem; grid-template-columns: 1fr auto 1fr; align-items: center; }
@media (max-width: 820px) { .ex-comparison { grid-template-columns: 1fr; } .ex-comparison-arrow { transform: rotate(90deg); } }
.ex-before { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .5rem; }
.ex-before-item {
  text-align: center;
  font-size: .82rem; font-weight: 700;
  color: var(--ex-muted);
  padding: .7rem .5rem;
  border: 1.5px dashed var(--ex-line-strong);
  border-radius: var(--ex-radius-sm);
  background: repeating-linear-gradient(45deg, transparent, transparent 6px,
              color-mix(in srgb, currentColor 4%, transparent) 6px,
              color-mix(in srgb, currentColor 4%, transparent) 7px);
}
.ex-comparison-arrow { color: var(--ex-faint); font-size: 1.6rem; text-align: center; }
.ex-after {
  border: 2px solid var(--ex-accent);
  border-radius: var(--ex-radius);
  background: color-mix(in srgb, var(--ex-accent) 12%, transparent);
  padding: 1.2rem 1.3rem;
}
.ex-after b { display: block; font-size: 1.4rem; font-weight: 900; line-height: 1.1; }
.ex-after span { color: var(--ex-muted); font-size: .92rem; }

/* ── can / cannot ─────────────────────────────────────────────────────── */
.ex-cancannot { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 700px) { .ex-cancannot { grid-template-columns: 1fr; } }
.ex-list { list-style: none; margin: 0; padding: 0; }
.ex-list li { display: flex; gap: .6rem; padding: .45rem 0; border-top: 1px solid var(--ex-line); color: var(--ex-muted); font-size: .93rem; }
.ex-list li:first-child { border-top: 0; }
.ex-list li::before { font-weight: 900; flex: none; }
.ex-can li::before { content: "\2713"; color: #1f9d57; }
.ex-cannot li::before { content: "\2715"; color: #cc1d63; }
.bg-dark .ex-can li::before, .bg-black .ex-can li::before { color: #37c980; }
.bg-dark .ex-cannot li::before, .bg-black .ex-cannot li::before { color: #ef6ba0; }

/* ── numbered rules ───────────────────────────────────────────────────── */
.ex-rules { display: grid; gap: 0; }
.ex-rule { display: flex; gap: .85rem; padding: .85rem 0; border-top: 1px dashed var(--ex-line-strong); }
.ex-rule:first-child { border-top: 0; }
/* Filled-with-currentColor is a trap: the badge sets its own `color`, so a
   background of var(--ex-accent) resolving to currentColor picks up that new
   colour and the number disappears into its own chip. Outline it instead —
   which also matches the step badge. */
.ex-rule-n {
  width: 1.7rem; height: 1.7rem; flex: none;
  display: grid; place-items: center;
  border-radius: 7px;
  border: 1.5px solid var(--ex-accent);
  background: color-mix(in srgb, var(--ex-accent) 14%, transparent);
  color: var(--ex-accent);
  font-weight: 900; font-size: .8rem;
}
.ex-rule h4 { font-size: .98rem; font-weight: 800; margin: 0 0 .15rem; }
.ex-rule p { color: var(--ex-muted); font-size: .9rem; margin: 0; }

/* ── capability grid ──────────────────────────────────────────────────── */
.ex-grid { display: grid; gap: 1rem; }
.ex-grid-1 { grid-template-columns: 1fr; }
.ex-grid-2 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.ex-grid-3 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.ex-grid-4 { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.ex-grid-5 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.ex-grid-6 { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.ex-cap-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem; }
.ex-cap h4 { font-size: 1.02rem; font-weight: 800; margin: 0 0 .2rem; color: var(--ex-accent); }
.ex-cap .ex-cap-sub { font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ex-faint); }
.ex-cap p { color: var(--ex-muted); font-size: .9rem; margin: .25rem 0 0; }