/* levels_ladder block (Phase 3 Stage 4).
   CSS ported from design-export/base.css; no literal colour, every value a token.
   the qualification levels ladder */

.levels-ladder__ladder { display: flex; flex-direction: column-reverse; }
.levels-ladder__rung { display: flex; gap: 1.4rem; align-items: flex-start; border-top: 1px solid var(--line); padding-block: 1.2rem; }
/* The rung carries its step of the brand-primary ramp as --c (set inline in
   levels_ladder.php). Nothing consumed --c before, so every badge painted the
   same flat --light and the ladder's colour coding conveyed nothing. */
.levels-ladder__level { flex: 0 0 92px; text-align: center; background: var(--c, var(--light)); border-radius: var(--radius-sm); padding: .7rem .5rem; }
/* Full-strength on-dark, NOT an alpha tint. The deep rungs are mid-tone brand
   fills sized to carry white at ~4.5:1, so they have no headroom and any alpha
   below 1 drops the label under: measured 4.01 (ucdon), 3.95 (ucnl) and 4.09
   (hesta) at .85. This is the same correction bridge.css already made when it
   retired the white tint on coloured grounds (kitchen-sink-visual-audit §3.1b),
   and it clears one of the eight blocks listed in §4.3. */
.levels-ladder__level--deep .levels-ladder__level-label { color: var(--text-on-dark); }
.levels-ladder__level--deep .levels-ladder__level-number { color: var(--text-on-dark); }
.levels-ladder__level--crown { background: var(--surface-dark); }
.levels-ladder__level--crown .levels-ladder__level-number { color: var(--accent-on-dark); }
.levels-ladder__level-label { display: block; font-size: var(--fs-meta); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.levels-ladder__level-number { display: block; font-family: var(--font-display); font-weight: 800; font-size: 2.25rem; line-height: 1; color: var(--text-heading); }
.levels-ladder__body { flex: 1 1 auto; }
.levels-ladder__meaning { font-size: 1.5625rem; margin-bottom: .6rem; }
.levels-ladder__chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.levels-ladder__chip { font-size: var(--fs-min); font-weight: 700; color: var(--navy); background: var(--light); padding: .45rem 1rem; border-radius: var(--radius-pill); text-decoration: none; }
.levels-ladder__chip:hover { background: var(--navy); color: var(--white); }
.levels-ladder__flex-note { display: flex; gap: .75rem; align-items: flex-start; border-top: 1px solid var(--line); padding-top: 1.2rem; }
.levels-ladder__flex-icon { flex: 0 0 auto; color: var(--em-color); font-size: 1.4375rem; }
.levels-ladder__flex-text { font-size: var(--fs-min); color: var(--muted); }