/*
 * be-explainer.css
 *
 * Component overlay for ph_dataset support pages where
 * _be_support_page_type = 'explainer' | 'briefing' | 'methodology'.
 *
 * These pages render via page.php (standard editorial template, sidebar TOC).
 * They DO NOT load be-payments-stats-v6.css, so they need their own lightweight
 * component vocabulary for the same data-hub design language:
 *
 *   .be-x-quick         quick-answer panel (lavender)
 *   .be-x-stats         6-up stat-card grid
 *   .be-x-flow          horizontal fee-flow visual
 *   .be-x-diag          diagnostic-card grid (5 short why-it-varies cards)
 *   .be-x-cap           capped vs not-capped two-column compare
 *   .be-x-warn          amber warning callout
 *   .be-x-tree          decision-tree pricing-model block
 *   .be-x-twocol        scheme-vs-interchange two-column compare
 *   .be-x-psr           PSR findings callout (purple, bulleted)
 *   .be-x-before-after  Brexit before/after table
 *   .be-x-timeline      milestone strip (3-up)
 *   .be-x-calc          worked-example calculator table
 *   .be-x-checklist     practical end-of-article checklist
 *   .be-x-sourcenote    small source-note paragraph
 *
 * Everything is scoped under `.be-explainer` (article wrapper) so it can't
 * collide with other pages even if the stylesheet is enqueued site-wide.
 */

.be-explainer { --x-ink-0:#1a1a1a; --x-ink-1:#2c2c2c; --x-ink-2:#5a5a5a; --x-ink-3:#8a8a8a;
  --x-paper:#fff; --x-paper-2:#fafafa; --x-line:#e5e5e5; --x-line-soft:#efefef;
  --x-purple:#5b3a8a; --x-purple-soft:#d9cbe9; --x-lavender:#f4eefa; --x-lavender-2:#faf6ff;
  --x-amber:#a86b1a; --x-amber-bg:#fdf3e0; --x-amber-line:#ecd7b6;
  --x-ok:#1f6b3c; --x-ok-bg:#eaf5ee;
  --x-serif: Georgia, "Times New Roman", serif;
}

/* ── Quick answer ─────────────────────────────────────────────────────── */
.be-explainer .be-x-quick {
  background: var(--x-lavender);
  border: 1px solid var(--x-purple-soft);
  border-left: 4px solid var(--x-purple);
  border-radius: 10px;
  padding: 22px 26px;
  margin: 28px 0 36px;
  max-width: 760px;
}
.be-explainer .be-x-quick .lbl {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--x-purple);
  margin-bottom: 8px;
}
.be-explainer .be-x-quick p {
  font-family: var(--x-serif);
  font-size: 18px;
  line-height: 1.55;
  color: var(--x-ink-0);
  margin: 0 0 10px;
}
.be-explainer .be-x-quick p:last-child { margin-bottom: 0; }
.be-explainer .be-x-quick b { color: var(--x-purple); font-weight: 700; }

/* ── Stat grid (6 cards) ──────────────────────────────────────────────── */
.be-explainer .be-x-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 28px 0 12px;
}
.be-explainer .be-x-stats .card {
  background: var(--x-paper);
  border: 1px solid var(--x-line);
  border-radius: 12px;
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.be-explainer .be-x-stats .card .num {
  font-family: var(--x-serif);
  font-size: 38px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.01em;
  color: var(--x-ink-0);
}
.be-explainer .be-x-stats .card .num .u { font-size: 18px; color: var(--x-ink-2); margin-left: 2px; font-weight: 500; }
.be-explainer .be-x-stats .card .lbl {
  font-size: 14px;
  color: var(--x-ink-2);
  line-height: 1.45;
  margin-top: 2px;
}
.be-explainer .be-x-sourcenote {
  font-size: 13px;
  color: var(--x-ink-2);
  line-height: 1.6;
  margin: 4px 0 28px;
  font-style: italic;
}

/* ── Fee-flow visual ──────────────────────────────────────────────────── */
.be-explainer .be-x-flow {
  background: var(--x-paper-2);
  border: 1px solid var(--x-line);
  border-radius: 12px;
  padding: 22px;
  margin: 24px 0 32px;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  align-items: stretch;
}
.be-explainer .be-x-flow .step {
  background: var(--x-paper);
  border: 1px solid var(--x-line);
  border-radius: 8px;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
  position: relative;
}
.be-explainer .be-x-flow .step + .step::before {
  content: "\203A";
  position: absolute;
  left: -10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  color: var(--x-purple);
  font-weight: 700;
}
.be-explainer .be-x-flow .step .k {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--x-purple);
}
.be-explainer .be-x-flow .step .v {
  font-size: 13px;
  line-height: 1.4;
  color: var(--x-ink-1);
  font-weight: 500;
}

/* ── Diagnostic cards ─────────────────────────────────────────────────── */
.be-explainer .be-x-diag {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 24px 0 28px;
}
.be-explainer .be-x-diag .card {
  background: var(--x-paper);
  border: 1px solid var(--x-line);
  border-radius: 10px;
  padding: 20px 22px;
}
.be-explainer .be-x-diag .card h4 {
  font-family: var(--x-serif);
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--x-ink-0);
}
.be-explainer .be-x-diag .card p {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--x-ink-1);
}

/* ── Capped vs not-capped compare ─────────────────────────────────────── */
.be-explainer .be-x-cap {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin: 24px 0 24px;
}
.be-explainer .be-x-cap .col {
  background: var(--x-paper);
  border: 1px solid var(--x-line);
  border-radius: 12px;
  padding: 22px 24px;
}
.be-explainer .be-x-cap .col.yes { border-top: 4px solid var(--x-ok); }
.be-explainer .be-x-cap .col.no  { border-top: 4px solid var(--x-amber); }
.be-explainer .be-x-cap .stamp {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.be-explainer .be-x-cap .col.yes .stamp { color: var(--x-ok); }
.be-explainer .be-x-cap .col.no  .stamp { color: var(--x-amber); }
.be-explainer .be-x-cap h4 {
  font-family: var(--x-serif);
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 12px;
  color: var(--x-ink-0);
}
.be-explainer .be-x-cap ul { margin: 0; padding-left: 18px; }
.be-explainer .be-x-cap li { margin: 6px 0; font-size: 15px; line-height: 1.55; color: var(--x-ink-1); }
.be-explainer .be-x-cap li b { color: var(--x-ink-0); font-weight: 700; }

/* ── Amber warning callout (provider-table caveat) ────────────────────── */
.be-explainer .be-x-warn {
  background: var(--x-amber-bg);
  border: 1px solid var(--x-amber-line);
  border-left: 4px solid var(--x-amber);
  border-radius: 8px;
  padding: 16px 22px;
  margin: 16px 0 24px;
  font-size: 15px;
  line-height: 1.55;
  color: #4a3008;
}
.be-explainer .be-x-warn .lbl {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--x-amber);
  margin-bottom: 6px;
}
.be-explainer .be-x-warn p { margin: 0; }

/* ── Decision tree ────────────────────────────────────────────────────── */
.be-explainer .be-x-tree {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 24px 0 28px;
}
.be-explainer .be-x-tree .branch {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  background: var(--x-paper);
  border: 1px solid var(--x-line);
  border-radius: 10px;
  padding: 16px 22px;
}
.be-explainer .be-x-tree .branch .if  { font-size: 15px; color: var(--x-ink-1); line-height: 1.45; }
.be-explainer .be-x-tree .branch .arrow {
  font-size: 18px;
  color: var(--x-purple);
  font-weight: 700;
}
.be-explainer .be-x-tree .branch .then {
  font-family: var(--x-serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--x-purple);
  text-align: right;
}

/* ── Two-column comparison (scheme vs interchange) ────────────────────── */
.be-explainer .be-x-twocol {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin: 24px 0 24px;
}
.be-explainer .be-x-twocol .col {
  background: var(--x-paper);
  border: 1px solid var(--x-line);
  border-radius: 12px;
  padding: 24px 26px;
}
.be-explainer .be-x-twocol .col h4 {
  font-family: var(--x-serif);
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 12px;
  color: var(--x-ink-0);
}
.be-explainer .be-x-twocol .col p { margin: 0 0 10px; font-size: 15px; line-height: 1.6; color: var(--x-ink-1); }
.be-explainer .be-x-twocol .col p:last-child { margin-bottom: 0; }
.be-explainer .be-x-twocol .col .pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 4px;
  margin-bottom: 10px;
}
.be-explainer .be-x-twocol .col.a .pill { background: var(--x-ok-bg); color: var(--x-ok); }
.be-explainer .be-x-twocol .col.b .pill { background: var(--x-amber-bg); color: var(--x-amber); }

/* ── PSR findings callout (purple, bulleted) ──────────────────────────── */
.be-explainer .be-x-psr {
  background: var(--x-lavender-2);
  border: 1px solid var(--x-purple-soft);
  border-radius: 12px;
  padding: 22px 26px;
  margin: 20px 0 28px;
}
.be-explainer .be-x-psr .lbl {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--x-purple);
  margin-bottom: 12px;
}
.be-explainer .be-x-psr ul { margin: 0; padding-left: 20px; }
.be-explainer .be-x-psr li {
  font-size: 15px;
  line-height: 1.55;
  color: var(--x-ink-1);
  margin: 6px 0;
}
.be-explainer .be-x-psr li b { color: var(--x-ink-0); font-weight: 700; }

/* ── Before/after table (Brexit CNP) ──────────────────────────────────── */
.be-explainer .be-x-before-after {
  margin: 24px 0 12px;
  overflow-x: auto;
}
.be-explainer .be-x-before-after table {
  width: 100%;
  border-collapse: collapse;
  background: var(--x-paper);
  border: 1px solid var(--x-line);
  border-radius: 10px;
  overflow: hidden;
}
.be-explainer .be-x-before-after th,
.be-explainer .be-x-before-after td {
  text-align: left;
  padding: 14px 18px;
  border-bottom: 1px solid var(--x-line-soft);
  font-size: 15px;
}
.be-explainer .be-x-before-after th {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--x-ink-2);
  background: var(--x-paper-2);
}
.be-explainer .be-x-before-after td.before { color: var(--x-ink-2); }
.be-explainer .be-x-before-after td.after  { color: var(--x-purple); font-weight: 700; }
.be-explainer .be-x-before-after tr:last-child td { border-bottom: 0; }

/* ── Timeline (3-up) ──────────────────────────────────────────────────── */
.be-explainer .be-x-timeline {
  position: relative;
  margin: 28px 0 32px;
  padding-top: 6px;
}
.be-explainer .be-x-timeline .axis {
  position: relative;
  height: 2px;
  background: var(--x-line);
  margin: 56px 16px 0;
}
.be-explainer .be-x-timeline .axis::before,
.be-explainer .be-x-timeline .axis::after {
  content: '';
  position: absolute;
  top: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--x-ink-3);
}
.be-explainer .be-x-timeline .axis::before { left: -4px; }
.be-explainer .be-x-timeline .axis::after  { right: -4px; }
.be-explainer .be-x-timeline .row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: -78px;
  position: relative;
}
.be-explainer .be-x-timeline .item {
  background: var(--x-paper);
  border: 1px solid var(--x-line);
  border-radius: 10px;
  padding: 16px 20px 18px;
  position: relative;
}
.be-explainer .be-x-timeline .item .when {
  font-family: var(--x-serif);
  font-style: italic;
  font-weight: 600;
  color: var(--x-purple);
  font-size: 15px;
  margin-bottom: 6px;
}
.be-explainer .be-x-timeline .item h5 {
  font-family: var(--x-serif);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 6px;
  color: var(--x-ink-0);
}
.be-explainer .be-x-timeline .item p {
  font-size: 14px;
  line-height: 1.5;
  color: var(--x-ink-1);
  margin: 0;
}
.be-explainer .be-x-timeline .item::before {
  content: '';
  position: absolute;
  bottom: -38px;
  left: 24px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--x-purple);
  border: 3px solid var(--x-paper-2);
  box-shadow: 0 0 0 1px var(--x-purple);
}

/* ── Worked-example calculator table ──────────────────────────────────── */
.be-explainer .be-x-calc {
  margin: 22px 0 16px;
  overflow-x: auto;
}
.be-explainer .be-x-calc table {
  width: 100%;
  border-collapse: collapse;
  background: var(--x-paper);
  border: 1px solid var(--x-line);
  border-radius: 10px;
  overflow: hidden;
}
.be-explainer .be-x-calc th,
.be-explainer .be-x-calc td {
  text-align: left;
  padding: 14px 18px;
  border-bottom: 1px solid var(--x-line-soft);
  font-size: 15px;
}
.be-explainer .be-x-calc th {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--x-ink-2);
  background: var(--x-paper-2);
}
.be-explainer .be-x-calc tr.diff td {
  background: var(--x-lavender-2);
  font-weight: 600;
  color: var(--x-purple);
}
.be-explainer .be-x-calc tr:last-child td { border-bottom: 0; }

/* ── Practical checklist ──────────────────────────────────────────────── */
.be-explainer .be-x-checklist {
  background: var(--x-paper);
  border: 1px solid var(--x-line);
  border-radius: 12px;
  padding: 24px 28px;
  margin: 24px 0 28px;
}
.be-explainer .be-x-checklist .lbl {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--x-purple);
  margin-bottom: 14px;
}
.be-explainer .be-x-checklist ul { list-style: none; margin: 0; padding: 0; }
.be-explainer .be-x-checklist li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--x-line-soft);
  font-size: 15px;
  line-height: 1.55;
  color: var(--x-ink-1);
}
.be-explainer .be-x-checklist li:last-child { border-bottom: 0; }
.be-explainer .be-x-checklist li::before {
  content: "";
  display: inline-block;
  width: 18px; height: 18px;
  border: 1.5px solid var(--x-purple);
  border-radius: 4px;
  margin-top: 2px;
}
.be-explainer .be-x-checklist li b { color: var(--x-ink-0); font-weight: 700; }

/* ── Mobile ───────────────────────────────────────────────────────────── */
@media (max-width: 880px) {
  .be-explainer .be-x-stats     { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .be-explainer .be-x-diag      { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .be-explainer .be-x-cap       { grid-template-columns: 1fr; }
  .be-explainer .be-x-twocol    { grid-template-columns: 1fr; }
  .be-explainer .be-x-flow {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .be-explainer .be-x-flow .step + .step::before {
    content: "\2193";
    left: 50%;
    top: -18px;
    transform: translateX(-50%);
    font-size: 22px;
  }
  .be-explainer .be-x-timeline .row {
    grid-template-columns: 1fr;
    margin-top: 16px;
    gap: 28px;
  }
  .be-explainer .be-x-timeline .axis { display: none; }
  .be-explainer .be-x-timeline .item::before { display: none; }
  .be-explainer .be-x-tree .branch {
    grid-template-columns: 1fr;
    gap: 6px;
    text-align: left;
  }
  .be-explainer .be-x-tree .branch .arrow { display: none; }
  .be-explainer .be-x-tree .branch .then  { text-align: left; font-size: 17px; }
}

@media (max-width: 560px) {
  .be-explainer .be-x-stats { grid-template-columns: 1fr; }
  .be-explainer .be-x-diag  { grid-template-columns: 1fr; }
}