/* Page-scoped styles extracted from es/blog-maturity-ladder.html. */

/* Blog post page-scoped styles (SHARED block; identical to the EN twin).
   Class prefix bl-. Tokens from site-tokens.css only. Token repair map is
   enumerated in PROGRESS-carryover-2.md. Zero em-dashes / en-dashes here. */
.bl-wrap { max-width: 760px; margin-inline: auto; }
.bl-post-hero { padding-block: var(--s-9) var(--s-6); }
.bl-post-meta { font-family: var(--font-mono); font-size: var(--fs-13); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--ink-soft); margin-bottom: var(--s-4); }
.bl-post-hero h1 { margin: 0 0 var(--s-4); }
.bl-post-hero .lede { max-width: 60ch; margin: 0; }
.bl-post-body { padding-block: var(--s-4) var(--s-9); }
.bl-prose > p { font-size: var(--fs-18); line-height: 1.7; color: var(--ink-muted); margin: 0 0 var(--s-4); max-width: 66ch; }
.bl-prose h2 { margin: var(--s-8) 0 var(--s-4); }
.bl-prose h3 { margin: var(--s-6) 0 var(--s-3); }
.bl-prose strong { color: var(--ink); font-weight: var(--weight-semibold); }
.bl-prose em { color: var(--ink); font-style: italic; }
.bl-prose a { color: var(--blue-deep); text-decoration: underline; text-decoration-color: var(--blue-soft); text-underline-offset: 3px; }
.bl-prose a:hover { color: var(--blue); text-decoration-color: var(--blue); }
.bl-prose ul, .bl-prose ol { font-size: var(--fs-18); line-height: 1.7; color: var(--ink-muted); padding-left: 1.3em; margin: 0 0 var(--s-4); max-width: 66ch; }
.bl-prose li { margin-bottom: var(--s-2); }
.bl-prose hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-7) 0; }
.bl-prose sup { font-size: 0.7em; }
.bl-table-wrap { overflow-x: auto; margin: var(--s-6) 0; -webkit-overflow-scrolling: touch; }
.bl-prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-14); background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; min-width: 560px; }
.bl-prose thead { background: var(--bg-cream); }
.bl-prose th, .bl-prose td { padding: var(--s-3) var(--s-4); text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.bl-prose th { font-family: var(--font-mono); font-size: var(--fs-12); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); font-weight: var(--weight-medium); }
.bl-prose tr:last-child td { border-bottom: 0; }
.bl-diagram { margin: var(--s-6) 0; }
.bl-diagram-ph { display: flex; align-items: center; justify-content: center; min-height: 160px; padding: var(--s-6) var(--s-5); background: var(--bg-cream); border: 1px dashed var(--line); border-radius: var(--r-md); color: var(--ink-soft); font-family: var(--font-mono); font-size: var(--fs-13); text-align: center; letter-spacing: 0.02em; }
/* =====================================================================
   FIGURE VOCABULARY (v5 addition, class prefix bl-fig / bl-chain /
   bl-split / bl-tier / bl-grid). Code-native: every label is real DOM
   text so the ES twin translates and screen readers read it. No SVG,
   no images, no new copy. Tokens only. Zero em-dashes / en-dashes.
   ===================================================================== */
.bl-fig { margin: var(--s-7) 0; max-width: 66ch; }
.bl-fig-label {
  font-family: var(--font-mono); font-size: var(--fs-12);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: var(--s-3);
}
.bl-fig figcaption, .bl-fig-note {
  font-size: var(--fs-13); line-height: 1.6; color: var(--ink-soft);
  margin-top: var(--s-3);
}

/* -- Sequence chain: ordered stages, one optionally in focus -- */
.bl-chain { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.bl-chain-node {
  flex: 1 1 0; min-width: 0; padding: var(--s-4) var(--s-3);
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--r-md); text-align: center;
  display: flex; flex-direction: column; gap: var(--s-1);
}
.bl-chain-step {
  font-family: var(--font-mono); font-size: var(--fs-12);
  color: var(--ink-muted);
}
.bl-chain-name { font-size: var(--fs-16); font-weight: var(--weight-semibold); color: var(--ink); line-height: var(--lh-snug); }
.bl-chain-node--focus {
  background: var(--blue); border-color: var(--blue-deep);
  box-shadow: var(--shadow-blue);
}
.bl-chain-node--focus .bl-chain-name { color: var(--on-ink); }
.bl-chain-node--focus .bl-chain-step { color: var(--on-ink-soft); }
.bl-chain-node--focus .bl-chain-here {
  font-family: var(--font-mono); font-size: var(--fs-12);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--on-ink-muted);
}

/* -- Proportion split: where the value sits, drawn to scale -- */
.bl-split { display: flex; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.bl-split-seg { padding: var(--s-5) var(--s-4); display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.bl-split-seg + .bl-split-seg { border-left: 1px solid var(--line); }
.bl-split-seg--major { flex: 70 1 0; background: var(--blue); }
.bl-split-seg--minor { flex: 30 1 0; background: var(--bg-cream); }
.bl-split-pct { font-size: var(--fs-32); line-height: var(--lh-tight); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); }
.bl-split-name { font-size: var(--fs-14); line-height: var(--lh-snug); }
.bl-split-seg--major .bl-split-pct { color: var(--on-ink); }
.bl-split-seg--major .bl-split-name { color: var(--on-ink-muted); }
.bl-split-seg--minor .bl-split-pct { color: var(--ink); }
.bl-split-seg--minor .bl-split-name { color: var(--ink-muted); }

/* -- Tier stack: layers that build on each other, widest at the base -- */
.bl-tiers { display: flex; flex-direction: column-reverse; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.bl-tier {
  padding: var(--s-4) var(--s-5); border: 1px solid var(--line);
  border-radius: var(--r-md); background: var(--bg);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-4);
}
.bl-tier--base { background: var(--blue-soft); border-color: var(--blue-soft); }
.bl-tier--mid { background: var(--bg-cream); }
.bl-tier--top { background: var(--bg); border-style: dashed; }
.bl-tier-name { font-size: var(--fs-16); font-weight: var(--weight-semibold); color: var(--ink); }
.bl-tier-reach { font-family: var(--font-mono); font-size: var(--fs-13); color: var(--ink-muted); margin-left: auto; }

/* -- Item grid: enumerations that read as a set, not a scroll -- */
.bl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.bl-grid--tight { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bl-grid-item {
  padding: var(--s-3) var(--s-4); background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--r-md);
  font-size: var(--fs-14); line-height: var(--lh-snug); color: var(--ink-muted);
  display: flex; flex-direction: column; gap: var(--s-1);
}
.bl-grid-n { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--ink-muted); }
.bl-grid-item strong { color: var(--ink); font-weight: var(--weight-semibold); font-size: var(--fs-16); }
.bl-grid--tight .bl-grid-item { font-size: var(--fs-14); color: var(--ink); }

@media (max-width: 640px) {
  .bl-chain { flex-direction: column; }
  .bl-chain-node { flex: 1 1 auto; text-align: left; }
  .bl-split { flex-direction: column; }
  .bl-split-seg + .bl-split-seg { border-left: 0; border-top: 1px solid var(--line); }
  .bl-split-seg--major, .bl-split-seg--minor { flex: 1 1 auto; }
  .bl-grid, .bl-grid--tight { grid-template-columns: 1fr; }
  .bl-tier-reach { margin-left: 0; }
}

.bl-backlink { margin-top: var(--s-7); }
.bl-backlink a { font-family: var(--font-mono); font-size: var(--fs-14); }