/* generated by build/build_analysis_tab.py — analysis tab, light design */
.panel-analysis { background:#ffffff; color:#172238; font-family:Inter, ui-sans-serif, -apple-system, "Segoe UI", sans-serif; color-scheme:light; }
.panel-analysis .an-wrap { width:min(1180px, calc(100% - 48px)); margin:0 auto; padding:20px 0 90px; }
.panel-analysis .an-header h1 { font-size:52px; letter-spacing:-0.03em; margin:0 0 14px; line-height:1.02; color:#172238; font-family:Inter, ui-sans-serif, -apple-system, "Segoe UI", sans-serif; }
.panel-analysis .an-lede { font-size:20px; color:#5b6b81; margin:0 0 30px; max-width:900px; line-height:1.5; }
.panel-analysis .an-part { margin:72px 0 8px; border-bottom:2px solid #172238; }
.panel-analysis .an-part h2 { font-size:24px; text-transform:uppercase; letter-spacing:0.06em; margin:0 0 10px; color:#172238; }
.panel-analysis .an-sec { padding:44px 0 10px; border-bottom:1px solid #e3e8ee; }
.panel-analysis .an-num { font-size:15px; font-weight:800; color:#8a97a9; letter-spacing:0.08em; }
.panel-analysis .an-sec h3 { font-size:29px; letter-spacing:-0.02em; margin:4px 0 10px; line-height:1.15; color:#172238; }
.panel-analysis .an-dek { font-size:17.5px; color:#5b6b81; margin:0 0 24px; max-width:940px; line-height:1.5; }
.panel-analysis .an-plot svg { width:100%; height:auto; display:block; }
.panel-analysis .an-scrolly { position:relative; margin:30px calc(50% - (100vw - var(--sidetabs-w, 0px)) / 2) 40px; width:calc(100vw - var(--sidetabs-w, 0px)); }

.panel-analysis .an-stick { position:sticky; top:var(--tabbar-h, 0px); height:calc(100vh - var(--tabbar-h, 0px)); z-index:0; }
.panel-analysis .an-step { position:relative; z-index:2; height:56vh; pointer-events:none; visibility:hidden; }
.panel-analysis .an-step:first-child { height:80vh; }
.panel-analysis .an-step:last-child { height:100vh; }
/* the text overlay owns the golden-ratio share of the width: the headline
   spans it, the dek keeps a readable measure */
.panel-analysis .an-rail { position:absolute; z-index:3; left:0; top:18px; width:61.8vw; padding-left:clamp(20px, 3vw, 48px); display:flex; flex-direction:column; gap:20px; pointer-events:auto; }
.panel-analysis .an-rail-nav { width:min(400px, 100%); }
/* invisible scroll cards mirror the overlay type so the canvas can measure
   the incoming text height before the swap lands */
.panel-analysis .an-card { width:calc(61.8vw - clamp(20px, 3vw, 48px)); max-width:none; }
.panel-analysis .an-card h3 { font-size:clamp(34px, 3vw, 50px); letter-spacing:-.022em; margin:0 0 12px; line-height:1.05; }
.panel-analysis .an-card p { font-size:20px; margin:0; line-height:1.55; max-width:860px; }
.an-dd { position:relative; }
.an-dd-btn { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; font:600 16px/1.3 Inter, ui-sans-serif, -apple-system, "Segoe UI", sans-serif; color:#172238; background:#faf9f5; border:1.5px solid #a8a291; border-radius:9px; padding:11px 14px; cursor:pointer; transition:border-color .15s ease, box-shadow .15s ease; }
.an-dd-btn:hover { border-color:#7f7a6a; }
.an-dd[data-open] .an-dd-btn { border-color:#7f7a6a; box-shadow:0 6px 24px rgba(23,34,56,.10); }
.an-dd-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.an-dd-chev { flex:none; color:#5b6b81; transition:transform .18s ease; }
.an-dd[data-open] .an-dd-chev { transform:rotate(180deg); }
.an-dd-list { position:absolute; z-index:40; left:0; width:min(596px, calc(100vw - 72px)); top:calc(100% + 8px); background:#faf9f5; border:1.5px solid #a8a291; border-radius:11px; box-shadow:0 18px 50px rgba(23,34,56,.13); padding:5px; }
.an-dd-list .an-dd-title { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.an-dd-list button { all:unset; box-sizing:border-box; display:flex; align-items:baseline; gap:12px; width:100%; padding:4px 12px; border-radius:7px; font:500 15px/1.3 Inter, ui-sans-serif, -apple-system, "Segoe UI", sans-serif; color:#172238; cursor:pointer; }
.an-dd-list button:hover { background:#e9e6da; }
.an-dd-list button.on { background:#131711; color:#faf9f5; font-weight:650; }
.an-dd-list button.on .an-dd-num { color:#b2d960; }
.an-dd-num { flex:none; width:26px; font-family:'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace; font-size:14px; font-weight:700; color:#8a97a9; font-variant-numeric:tabular-nums; }
.an-dd-title { min-width:0; }
.panel-analysis .an-rail-text { transition:opacity .28s ease, transform .28s ease; }
.panel-analysis .an-rail-text.swap { opacity:0; transform:translateY(6px); }
.panel-analysis .an-rail-text h3 { font-size:clamp(34px, 3vw, 50px); letter-spacing:-.022em; margin:0 0 12px; line-height:1.05; color:#172238; }
.panel-analysis .an-rail-text p { font-size:20px; color:#2b3547; margin:0; line-height:1.55; max-width:860px; }
.an-track { position:absolute; z-index:4; right:10px; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; align-items:center; gap:0; }
.an-track button { all:unset; cursor:pointer; width:26px; height:min(28px, calc((100vh - 220px) / 25)); display:flex; align-items:center; justify-content:center; }
.an-track button::before { content:""; display:block; width:4px; height:72%; border-radius:2px; background:#e3e8ee; transition:background .3s ease, width .2s ease; }
.an-track button.done::before { background:#8a97a9; }
.an-track button.now::before { background:#172238; width:6px; }
.an-track button:hover::before { background:#5b6b81; }
#an-dots { cursor:default; }
#an-dots.hit { cursor:pointer; }
.an-tip { position:absolute; z-index:3; pointer-events:none; background:#ffffff; color:#172238; border:1px solid #e3e8ee; border-radius:6px; box-shadow:0 6px 24px rgba(23,34,56,.14); padding:10px 14px; font-size:15px; line-height:1.35; max-width:320px; opacity:0; transition:opacity .12s ease; }
.an-tip b { display:block; font-size:16px; }
.an-tip span { color:#5b6b81; }
.an-tip.show { opacity:1; }

@supports (height: 100dvh) {
.panel-analysis .an-stick { height:calc(100dvh - var(--tabbar-h, 0px)); }
}

/* Phones read the story FLAT: the live canvas scrolly is hidden and each
   scene is real HTML text over a pre-rendered image of its graphic
   (assets/scenes, written by build/render_scene_images.py). Guaranteed
   rendering; the engine never boots at phone width. */
.an-flat { display:none; }
.an-flat-scene { padding:34px 14px 10px; border-bottom:1px solid #e3e8ee; }
.an-flat-scene:last-child { border-bottom:0; }
.an-flat-num { font-family:'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace; font-size:14px; font-weight:700; color:#8a97a9; letter-spacing:.06em; margin-bottom:8px; }
.an-flat-scene h3 { font-size:24px; letter-spacing:-.02em; margin:0 0 10px; line-height:1.16; color:#172238; }
.an-flat-scene p { font-size:16px; color:#5b6b81; margin:0 0 18px; line-height:1.55; }
.an-flat-scene img { width:100%; height:auto; display:block; }
@media (max-width: 720px) {
.panel-analysis .an-scrolly { display:none; }
.panel-analysis .an-flat { display:block; }
.panel-analysis .an-wrap { width:100%; padding-top:6px; }
}

/* touch: neutralize sticky :hover states (iOS keeps them after a tap) */
@media (hover: none) {
.an-dd-btn:hover { border-color:#a8a291; box-shadow:none; }
.an-dd-list button:hover { background:transparent; }
.an-dd-list button.on:hover { background:#eef4ea; }
}