/* Scene 07 · 3 chốt chặn (upgrade 20/10). One record, three gates, one trace per gate; the six risks underneath.
   Stage coordinates (1920 × 1080). Rail y = 372 · gates x = 680 / 1100 / 1520 · end x = 1700.
   Type floor: content 28 px, labels 24 px. Colours: blue = passed / flow, red = blocked, amber = sent back. */
#s-risk{--r7b:#8BB6FA;--r7r:#E0584F;--r7a:#F0A63A;--r7t:#C9D6EC}
#s-risk :is(.r7-src,.r7-rail,.r7-pk,.r7-rec,.r7-gates,.r7-ret,.r7-end,.r7-t,.r7-log,.r7-risks,.r7-det){position:absolute;margin:0}
#s-risk p{margin:0}
#s-risk .head .h1{font-size:64px}
#s-risk .r7-src{right:160px;top:72px;display:inline-flex;align-items:center;gap:10px;font-size:24px;font-weight:500;color:#C6D3E8;background:rgba(158,178,220,.13);padding:5px 18px 6px;border-radius:999px}
#s-risk .r7-src::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}

/* ---- the rail ---- */
#s-risk .r7-rail{left:0;top:220px;width:1920px;height:240px;overflow:visible;fill:none;stroke-linecap:round;stroke-linejoin:round}
#s-risk .r7-base{stroke:rgba(139,182,250,.2);stroke-width:2}
#s-risk .r7-ret{left:1028px;top:234px;transform:translateX(-50%);font-size:24px;font-weight:600;color:var(--r7a);white-space:nowrap}

/* ---- the record ---- */
#s-risk .r7-rec{left:160px;top:250px;width:352px;box-sizing:border-box;padding:22px 28px 24px;border-radius:22px;background:#F3F6FA;color:#0E1727;box-shadow:var(--shadow),0 50px 110px -30px rgba(0,0,0,.7)}
#s-risk .r7-rec small{display:block;font-size:24px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#46566E}
#s-risk .r7-rec b{display:block;margin-top:4px;font-size:46px;line-height:1.12;font-weight:700;letter-spacing:-.015em}
#s-risk .r7-rec p{margin:2px 0 0;font-size:28px;font-weight:500;color:#2A3A52}
#s-risk .r7-st{display:inline-grid;margin-top:14px;font-style:normal;font-size:24px;font-weight:600;line-height:1.3}
#s-risk .r7-st span{grid-area:1/1;padding:3px 14px 4px;border-radius:999px}
#s-risk .r7-st .s0{background:#E4EAF2;color:#46566E;opacity:0}
#s-risk .r7-st .s1{background:#DCE9FF;color:#1D4FA8}

/* ---- gates ---- */
#s-risk .r7-gates{left:0;top:0;padding:0;list-style:none}
#s-risk .r7-g{position:absolute;top:280px;width:0;height:0}
#s-risk .r7-g1{left:680px} #s-risk .r7-g2{left:1100px} #s-risk .r7-g3{left:1520px}
#s-risk .r7-g p{position:absolute;left:0;top:166px;transform:translateX(-50%);display:flex;align-items:center;gap:12px;white-space:nowrap;font-size:32px;font-weight:600;letter-spacing:-.01em;color:var(--white)}
#s-risk .r7-g p b{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;font-size:24px;font-weight:600;color:var(--r7b);box-shadow:inset 0 0 0 1.5px rgba(139,182,250,.55)}
#s-risk .r7-end{left:1672px;top:332px;width:56px;display:flex;flex-direction:column;align-items:center;gap:10px;font-size:24px;font-weight:500;color:var(--r7t);white-space:nowrap}
#s-risk .r7-end i{display:grid;place-items:center;width:56px;height:56px;box-sizing:border-box;border-radius:50%;border:2px solid rgba(139,182,250,.6)}
#s-risk .r7-end svg{width:26px;height:26px;fill:none;stroke:var(--r7b);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* ---- traces: what each gate wrote into the record ---- */
#s-risk .r7-t{top:510px;box-sizing:border-box;text-align:center}
#s-risk .r7-t1{left:500px;width:360px}
#s-risk .r7-t3{left:1340px;width:360px}
#s-risk .r7-ok{display:inline-flex;align-items:center;gap:12px;font-size:30px;font-weight:600;color:var(--white);white-space:nowrap}
#s-risk .r7-ok::before{content:"";flex:none;width:11px;height:21px;margin:0 6px 6px 4px;border:solid var(--r7b);border-width:0 3.5px 3.5px 0;transform:rotate(45deg)}
#s-risk .r7-sub{margin-top:8px;font-size:28px;line-height:1.3;color:var(--r7t);text-wrap:balance}
#s-risk .r7-t2{left:870px;top:508px;width:460px;padding:18px 26px 18px;border-radius:20px;text-align:left;background:#F3F6FA;color:#0E1727;box-shadow:var(--shadow),0 40px 90px -30px rgba(0,0,0,.7)}
#s-risk .r7-t2 header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
#s-risk .r7-t2 header small{font-size:24px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#46566E}
#s-risk .r7-block{font-style:normal;font-size:24px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#B42318;background:#FDECEA;box-shadow:inset 0 0 0 1.5px #F1B5AE;padding:1px 14px 2px;border-radius:999px}
#s-risk .r7-no{font-size:28px;font-weight:500;color:#B42318}
#s-risk .r7-no s{text-decoration-thickness:2.5px;text-decoration-color:rgba(180,35,24,.8)}
#s-risk .r7-need{margin-top:2px;font-size:28px;color:#2A3A52}
#s-risk .r7-fix{display:flex;align-items:center;gap:12px;margin-top:12px;padding-top:12px;border-top:1.5px solid #DCE3EC;font-size:28px;font-weight:600;color:#1D4FA8;white-space:nowrap}
#s-risk .r7-fix i{flex:none;position:relative;width:34px;height:34px;border-radius:50%;background:#DCE9FF}
#s-risk .r7-fix i::after{content:"";position:absolute;left:12px;top:6px;width:7px;height:15px;border:solid #1D4FA8;border-width:0 3px 3px 0;transform:rotate(45deg)}
/* evidence chips: open the real screenshot */
#s-risk .r7-pl{display:inline-flex;align-items:center;gap:8px;padding:3px 14px 4px;border:0;border-radius:999px;font:inherit;font-size:24px;font-weight:600;line-height:1.3;color:#C6D3E8;background:rgba(158,178,220,.14);cursor:zoom-in}
#s-risk .r7-pl::before{content:"";width:13px;height:13px;border:2px solid currentColor;border-radius:3px;opacity:.85}
#s-risk :is(.r7-t1,.r7-t3) .r7-pl{display:flex;margin:14px auto 0;width:max-content}
#s-risk .r7-t2 .r7-pl{margin-left:auto;color:#33445C;background:#E4EAF2}
#s-risk .r7-pl:hover,#s-risk .r7-pl:focus-visible{background:rgba(158,178,220,.28);color:var(--white);outline:none}
#s-risk .r7-t2 .r7-pl:hover,#s-risk .r7-t2 .r7-pl:focus-visible{background:#D3DDEB;color:#0E1727}

/* ---- the record's trail ---- */
#s-risk .r7-log{left:160px;top:526px;width:320px}
#s-risk .r7-log b{display:block;font-size:24px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--r7b)}
#s-risk .r7-log ul{margin:10px 0 0;padding:0;list-style:none}
#s-risk .r7-log li{display:flex;align-items:center;gap:14px;font-size:28px;line-height:1.5;color:var(--white)}
#s-risk .r7-log li::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--r7b)}

/* ---- the six risks (Bảng 3.2): two groups, short names, level and P × I ---- */
#s-risk .r7-risks{left:160px;right:160px;top:800px;display:grid;grid-template-columns:1fr 1fr;column-gap:64px}
#s-risk .r7-rl{display:flex;justify-content:space-between;padding:0 12px 8px 0;border-bottom:1px solid rgba(158,178,220,.28);font-size:24px;font-weight:600;letter-spacing:.04em;color:#9EB2DC}
#s-risk .r7-rl small{font-size:24px;font-weight:500;letter-spacing:0;color:#9EB2DC}
#s-risk .r7-r{display:grid;grid-template-columns:52px 1fr auto;align-items:baseline;width:100%;margin:0;padding:7px 12px 6px;border:0;border-bottom:1px solid rgba(158,178,220,.14);border-radius:0;text-align:left;font:inherit;color:var(--white);background:none;cursor:pointer;white-space:nowrap}
#s-risk .r7-r b{font-size:24px;font-weight:700;color:var(--r7t)}
#s-risk .r7-r span{font-size:28px;font-weight:500;color:#E6ECF6}
#s-risk .r7-r em{font-style:normal;font-size:24px;font-weight:600;color:var(--r7t)}
#s-risk .r7-r.r7-hi b,#s-risk .r7-r.r7-hi em{color:#F6BE6B}
#s-risk .r7-r:hover,#s-risk .r7-r:focus-visible{background:rgba(158,178,220,.1);outline:none}
#s-risk .r7-r.rk-on{background:rgba(240,166,58,.14);box-shadow:inset 0 0 0 1.5px rgba(240,166,58,.6);border-radius:10px}

/* ---- a risk opened (click, keys 1–6, Q&A deep link) ---- */
#s-risk .r7-det{left:520px;top:486px;width:1240px;box-sizing:border-box;padding:24px 32px 22px;border-radius:22px;background:#0D1C46;box-shadow:inset 0 0 0 1.5px rgba(240,166,58,.55),0 40px 90px -20px rgba(0,0,0,.85);opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .25s,transform .3s var(--out),visibility 0s .3s;z-index:5}
#s-risk[data-sel] .r7-det{opacity:1;visibility:visible;transform:none;transition:opacity .25s,transform .3s var(--out),visibility 0s}
#s-risk .r7-det h3{display:flex;align-items:baseline;gap:14px;margin:0;font-size:32px;font-weight:600;color:var(--white)}
#s-risk .r7-det h3 b{font-size:28px;color:#F6BE6B}
#s-risk .r7-det .r7-sc{margin:6px 0 14px;font-size:24px;color:var(--r7t)}
#s-risk .r7-det dl{display:grid;grid-template-columns:170px 1fr;gap:8px 20px;margin:0}
#s-risk .r7-det dt{font-size:24px;font-weight:600;color:var(--r7b)}
#s-risk .r7-det dd{margin:0;font-size:28px;line-height:1.3;color:var(--white)}
#s-risk .r7-det .r7-x{position:absolute;right:26px;top:30px;margin:0;font-size:24px;color:#9EB2DC}
#s-risk[data-sel] :is(.r7-t,.r7-log){opacity:.15;transition:opacity .25s}

/* ---- build (≤ 1.2 s) and the gate-2 accent: up-risk.css (transform / opacity only: the sheet rides the track, barrier arms lift,
   lamp lenses light; gate 2 stops it, it goes back to Pricing, then passes) ---- */
/* calm: was @media (prefers-reduced-motion:reduce); body.calm is set by app.js and can be turned off */
body.calm #s-risk *,body.calm #s-risk *::before,body.calm #s-risk *::after{animation:none!important;transition:none!important}