/* s05 — Hệ 1 – Hệ 2 – Người quyết định (cascade) */
#s05 > .src { bottom: 58px; font-size: 14px; max-width: 1680px; }
.s05 { position: relative; }
.s05-head { position: absolute; left: 0; top: 0; right: 0; }
.s05-head h2 { font-size: 58px; }
.s05-ana { margin: 12px 0 0; font-size: 21px; color: var(--ink3); }
.s05-ana .quote { font-size: 22px; color: var(--ink2); }

/* diagram */
.s05-dia { position: absolute; left: 0; top: 163px; width: 1680px; height: 445px; }
.s05-svg, .s05-cv { position: absolute; left: 0; top: 0; width: 1680px; height: 445px; overflow: visible; }
.s05-cv { z-index: 2; pointer-events: none; }
.s05-svg { z-index: 0; }
.s05-b12, .s05-b23, .s05-gate, .s05-audit, .s05-fb { opacity: 0; }
.s05-axis { stroke: rgba(236, 247, 240, .55); stroke-width: 2; }
.s05-unc { fill: rgba(255, 176, 32, .55); }
.s05-tau { stroke: var(--gold); stroke-width: 3; stroke-linecap: round; }
.s05-taul { font: 700 15px var(--mono); fill: var(--gold); }
.s05-drop { fill: none; stroke: rgba(76, 201, 240, .5); stroke-width: 2; }
.s05-auditp { fill: none; stroke: var(--gold); stroke-width: 2.5; stroke-dasharray: 7 7; }
.s05-fbp { fill: none; stroke: url(#s05-gfb); stroke-width: 3; }

.s05-tier { position: absolute; z-index: 3; border-radius: 20px; padding: 16px 20px; background: rgba(8, 22, 17, .55); border: 1px solid var(--line); display: flex; flex-direction: column; }
.s05-tier.t1 { left: 0; top: 70px; width: 340px; height: 310px; border-color: rgba(76, 201, 240, .5); box-shadow: 0 0 60px rgba(76, 201, 240, .10) inset; background: rgba(6, 20, 22, .35); }
.s05-tier.t2 { left: 640px; top: 105px; width: 360px; height: 240px; border-color: rgba(167, 139, 250, .5); background: rgba(14, 12, 28, .72); }
.s05-tier.t3 { left: 1290px; top: 130px; width: 390px; height: 190px; border-color: rgba(242, 193, 78, .6); background: rgba(24, 18, 4, .78); box-shadow: 0 20px 60px rgba(242, 193, 78, .10); }
.s05-tt { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.s05-tt .tag { font-size: 14px; padding: 6px 10px; background: rgba(0, 0, 0, .35); }
.s05-tt b { font-size: 20px; font-weight: 700; }
.s05-vol { font: 800 42px/1 var(--font); letter-spacing: -.02em; margin-top: 12px; }
.s05-vs { font-size: 18px; color: var(--ink2); margin-top: 4px; }
.s05-tb { font-size: 16px; color: var(--ink3); margin-top: 8px; line-height: 1.35; }
.s05-tb b { color: var(--ink2); font-weight: 600; }
.s05-demo { margin-top: auto; font: 500 14px var(--mono); color: var(--ink3); }
.s05-tier.t1 .s05-tb { margin-top: auto; }
.s05-tier.t1 .s05-demo { margin-top: 10px; }

.s05-gl { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.s05-gl > * { opacity: 0; transition: opacity .6s var(--ease-out), transform .7s var(--ease-out); transform: translateY(10px); }
.s05-gl.shown > * { opacity: 1; transform: none; }
.s05-gl.shown > .s05-rl { transition-delay: .25s; } .s05-gl.shown > .s05-bin { transition-delay: .45s; } .s05-gl.shown > .s05-aud { transition-delay: 1s; }
.s05-pol { position: absolute; left: 400px; top: 22px; width: 280px; padding: 8px 12px; border-radius: 10px; background: rgba(24, 18, 4, .9); border: 1px solid rgba(242, 193, 78, .65); }
.s05-pol b { display: block; font-size: 15px; line-height: 1.25; color: var(--gold); }
.s05-pol span { display: block; font: 500 13px var(--mono); color: var(--ink3); margin-top: 3px; }
.s05-rl { position: absolute; left: 452px; font: 600 14px/30px var(--mono); padding: 0 8px; border-radius: 8px; background: rgba(4, 12, 9, .82); white-space: nowrap; }
.s05-rl.hi { color: var(--violet); } .s05-rl.unc { color: var(--amber); } .s05-rl.lo { color: var(--ink3); }
.s05-bin { position: absolute; left: 438px; top: 385px; width: 562px; height: 50px; border-radius: 12px; border: 1px dashed rgba(170, 230, 200, .35); background: rgba(8, 22, 17, .55); display: flex; align-items: center; justify-content: flex-end; padding: 0 18px; font-size: 17px; color: var(--ink2); }
.s05-bin b { color: var(--ink); margin-right: 6px; }
.s05-aud { position: absolute; left: 1036px; top: 330px; font-size: 16px; line-height: 1.3; color: var(--gold); }
.s05-aud b { color: var(--gold); }
.s05-aud span { color: var(--ink3); font-size: 15px; }
.s05-fbl { position: absolute; left: 720px; top: 18px; width: 560px; z-index: 3; font-size: 16px; line-height: 1.3; color: var(--ink2); text-align: center; opacity: 0; transition: opacity .8s .9s; }
.s05-fbl.shown { opacity: 1; }
.s05-fbl b { color: var(--cyan); }
.s05-fbl span { color: var(--ink3); font-size: 14px; }

/* bottom band */
.s05-band { position: absolute; left: 0; right: 0; top: 626px; height: 246px; }
.s05-roles { position: absolute; left: 0; top: 0; width: 1110px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; transition: opacity .5s, transform .6s var(--ease-out); }
#s05.s05-st2 .s05-roles { opacity: 0; transform: translateY(-14px); pointer-events: none; }
.s05-bh { grid-column: 1 / -1; font-size: 22px; color: var(--ink2); }
.s05-bh b { color: var(--cyan); }
.s05-rc { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 12px 18px; min-height: 172px; }
.s05-rc i { display: block; font: 600 14px var(--mono); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--cyan); margin-bottom: 8px; }
.s05-rc p { margin: 0; font-size: 17px; line-height: 1.38; color: var(--ink2); }
.s05-rc p b { color: var(--ink); }
.s05-rc.news { border-style: dashed; border-color: rgba(167, 139, 250, .4); }
.s05-rc.news i { color: var(--violet); }

.s05-vals { position: absolute; left: 0; top: 0; width: 1110px; height: 246px; background: var(--panel); border: 1px solid rgba(167, 139, 250, .35); border-radius: 18px; padding: 14px 22px; display: flex; flex-direction: column; gap: 6px; }
.s05-vh { font-size: 18px; color: var(--ink2); display: flex; align-items: center; gap: 12px; }
.s05-tagnews { color: var(--violet); font-size: 13px; padding: 5px 9px; }
.s05-vr { display: grid; grid-template-columns: 210px 1fr 390px; align-items: center; gap: 18px; height: 58px; }
.s05-vl { font-size: 20px; font-weight: 700; line-height: 1.15; }
.s05-vl span { display: block; font: 500 13px var(--mono); color: var(--ink3); margin-top: 3px; font-weight: 400; }
.s05-vb { position: relative; height: 20px; border-radius: 10px; background: rgba(170, 230, 200, .08); }
.s05-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 10px; background: linear-gradient(90deg, rgba(76, 201, 240, .5), var(--cyan)); transition: width 1.2s var(--ease-out) .3s; }
.s05-lead { position: absolute; left: var(--x); top: -8px; bottom: -8px; width: 3px; margin-left: -1.5px; background: var(--violet); border-radius: 2px; opacity: 0; transition: opacity .5s .2s; }
.s05-lead em { position: absolute; bottom: 100%; right: 6px; font: 600 13px var(--mono); font-style: normal; color: var(--violet); white-space: nowrap; }
.s05-vals.shown .r1 .s05-fill { width: var(--w); }
.s05-vals.shown .r1 .s05-lead { opacity: 1; }
.s05-vv { display: flex; align-items: center; gap: 12px; }
.s05-vv b { font: 800 28px/1 var(--font); font-variant-numeric: tabular-nums; }
.s05-badge { font: 700 14px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; padding: 7px 10px; border-radius: 999px; white-space: nowrap; }
.s05-badge.ok { color: var(--green); border: 1px solid rgba(62, 224, 143, .6); }
.s05-badge.bad { color: var(--amber); border: 1px solid rgba(255, 176, 32, .7); background: rgba(255, 176, 32, .08); }
.s05-rank { display: flex; gap: 3px; }
.s05-rank i { width: 9px; height: 18px; border-radius: 3px; background: rgba(167, 139, 250, .35); }
.s05-rank i.me { background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.s05-q { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font: 800 20px var(--mono); color: var(--violet); transition: opacity .3s; }
.s05-guess { display: flex; align-items: center; gap: 12px; margin-top: 6px; font-size: 19px; color: var(--ink); transition: opacity .4s; }
.s05-guess span { margin-right: 6px; }
.s05-guess button { all: unset; cursor: pointer; font-size: 17px; font-weight: 600; padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(167, 139, 250, .55); color: var(--ink2); }
.s05-guess button.picked { background: rgba(167, 139, 250, .2); color: var(--ink); border-color: var(--violet); }
.s05-line { position: absolute; left: 22px; right: 22px; bottom: 14px; font-size: 30px; font-weight: 800; letter-spacing: -.01em; opacity: 0; transform: translateY(12px); transition: opacity .8s var(--ease-out) 1.5s, transform .9s var(--ease-out) 1.5s; }
/* row 2 hidden until step 3 */
.r2 .s05-vv > *, .r2 .s05-lead { opacity: 0; transition: opacity .5s; }
#s05.s05-st3 .r2 .s05-fill { width: var(--w); transition-duration: 1.6s; transition-timing-function: cubic-bezier(.5, 0, .2, 1); }
#s05.s05-st3 .r2 .s05-lead { opacity: 1; transition-delay: .2s; }
#s05.s05-st3 .r2 .s05-vv > * { opacity: 1; transition-delay: 1.5s; }
#s05.s05-st3 .s05-q { opacity: 0; }
#s05.s05-st3 .s05-guess { opacity: 0; pointer-events: none; }
#s05.s05-st3 .s05-line { opacity: 1; transform: none; }

.s05-law { position: absolute; left: 1140px; top: 0; width: 540px; height: 246px; background: rgba(24, 18, 4, .7); border: 1px solid rgba(242, 193, 78, .5); border-left: 4px solid var(--gold); border-radius: 16px; padding: 16px 22px; }
.s05-law::before { content: ''; position: absolute; left: 440px; top: -146px; height: 146px; width: 0; border-left: 2px dashed rgba(242, 193, 78, .6); }
.s05-lh { font-size: 18px; font-weight: 700; color: var(--gold); }
.s05-lh b { color: var(--gold); }
.s05-lh span { display: block; font: 500 14px var(--mono); color: var(--ink3); margin-top: 3px; }
.s05-lh span b { color: var(--gold); }
.s05-law .quote { margin: 10px 0 0; font-size: 20px; line-height: 1.42; color: var(--ink); }

/* QA pass: projector legibility (raise small mono labels, replace --ink3/--ink4 where the text carries meaning) */
#s05 > .src { font-size: 15px; color: var(--ink3); }
.s05-ana { color: var(--ink2); }
.s05-tt .tag { font-size: 15px; }
.s05-tb { font-size: 17px; color: var(--ink2); }
.s05-tb b { color: var(--ink); }
.s05-demo { font-size: 15px; color: var(--ink2); }
.s05-taul { font-size: 17px; }
.s05-pol b { font-size: 17px; }
.s05-pol span { font-size: 15px; color: var(--ink2); }
.s05-rl { font-size: 16px; }
.s05-rl.lo { color: var(--ink2); }
.s05-bin { font-size: 19px; }
.s05-aud { font-size: 18px; }
.s05-aud span { font-size: 16px; color: var(--ink2); }
.s05-fbl { font-size: 18px; }
.s05-fbl span { font-size: 15px; color: var(--ink2); }
.s05-rc p { font-size: 18px; }
.s05-vl span { font-size: 15px; color: var(--ink2); }
.s05-lead em { font-size: 15px; }
.s05-lh span { font-size: 15px; color: var(--ink2); }
.s05-guess button { font-size: 18px; color: var(--ink); }

/* ghost tiers before step 1: the empty slots create anticipation */
.s05-tier.t2[data-step]:not(.shown), .s05-tier.t3[data-step]:not(.shown) { opacity: .22; filter: none; transform: none; border-style: dashed; background: transparent; box-shadow: none; transition-delay: 0s; }
.s05-tier[data-step]:not(.shown) > * { opacity: 0; }
.s05-tier[data-step] > * { transition: opacity .6s var(--ease-out) .25s; }
/* step 2 = one beat: fact-check bar first, then the LegalBench bar drops, then the line */
#s05.s05-st3 .r2 .s05-fill { transition-delay: 1.4s; }
#s05.s05-st3 .r2 .s05-lead { transition-delay: 1.4s; }
#s05.s05-st3 .r2 .s05-vv > * { transition-delay: 2.9s; }
#s05.s05-st3 .s05-line { transition-delay: 3.3s, 3.3s; }
.s05-q { display: none; }
.s05-bin { font-size: 16.5px; line-height: 1.2; }
.s05-bin span { text-align: right; }
.s05-tb { font-size: 16px; }
.s05-demo { font-size: 14.5px; }
.s05-pol { width: 300px; }
.s05-pol b { font-size: 16px; }
.s05-pol span { font-size: 14px; }
.s05-bin b { margin-right: 0; }
/* glossary chips: free header space at top right (τ appears with step 3) */
.s05-gl3 { left: 1084px; top: -14px; width: 596px; gap: 6px; }
.s05-gl3 .gl-chip { width: calc(50% - 4px); padding: 6px 12px 6px 10px; line-height: 1.28; }
.s05-gl3 .gl-chip.wide { width: 100%; }

/* polish pass (19/10): breathing room inside tiers + labels clear of borders/arrows */
.s05-tier.t2 { height: 254px; }
.s05-rl { left: 444px; font-size: 15px; }
.s05-bin { height: 56px; }
.s05-tagnews { font-size: 14px; padding: 5px 11px; }