/* generated by build/build_analysis_tab.py — analysis tab, light design */
/* transparent: the viewport-fixed field/story canvases paint beneath, on
   the body's own white ground */
.panel-analysis { background:transparent; color:#172238; font-family:Inter, ui-sans-serif, -apple-system, "Segoe UI", sans-serif; color-scheme:light; }
main.daylight[data-tab="analysis"] { background:transparent; }
.panel-analysis .an-wrap { width:min(1180px, calc(100% - 48px)); margin:0 auto; padding:20px 0 90px; }
.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:fixed; inset:0; z-index:0; pointer-events:none; }
/* two stacked layers: the WebGL dot field beneath, the 2d canvas (text,
   rules, hover) above — only the 2d layer takes the pointer */
.panel-analysis .an-stick canvas { position:absolute; left:0; top:0; }
.panel-analysis #an-dots { pointer-events:auto; }
.panel-analysis #an-dots-gl { pointer-events:none; }
/* cards exit under the masthead through a white fade, never colliding with
   the fixed brand text; the story engine shows it only while in the story */
.panel-analysis .an-scrim { position:fixed; top:0; left:0; right:0; height:118px; z-index:4; pointer-events:none; visibility:hidden;
  background:linear-gradient(to bottom, #fff 0, #fff 46px, rgba(255,255,255,0) 118px); }
/* each step is one scroll segment: its card is real, scrolling text over the
   pinned stage. pointer-events stay off the step shell so the canvas keeps
   hover and click; the card itself stays selectable */
/* taller than the viewport: the extra travel keeps the NEXT card offstage
   until the current one has cleared the masthead and the glide fires */
.panel-analysis .an-step { position:relative; z-index:2; height:calc(100vh + 260px); height:calc(100svh + 260px); pointer-events:none; padding-top:calc(clamp(18px, 3.2vh, 32px) + 56px); }
.panel-analysis .an-step:last-child { height:100vh; height:100svh; }
/* white ground, invisible at rest on the white page, so the card stays
   legible while it rides over the dots mid-glide */
.panel-analysis .an-card { pointer-events:auto; width:calc(61.8vw - clamp(20px, 3vw, 48px)); max-width:none;
  margin-left:calc(clamp(20px, 3vw, 48px) - 20px); background:#fff; border-radius:12px; padding:14px 20px 16px; }
.panel-analysis .an-card h3 { font-size:clamp(34px, 3vw, 50px); letter-spacing:-.022em; margin:0 0 12px; line-height:1.05; color:#172238; }
.panel-analysis .an-card p { font-size:20px; color:#2b3547; margin:0; line-height:1.55; max-width:860px; }
#an-dots { cursor:default; }
#an-dots.hit { cursor:pointer; }
/* dot hover uses the landing's #hero-tip card (styles.css); no chart-local tip */

/* 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; }
/* scrolly mode: the story's last scene IS the end of the page — no
   trailing padding to scroll into (the controller clamps too; phones keep
   the pad under the flat list) */
@media (min-width: 721px) {
.panel-analysis .an-wrap { padding-bottom:0; }
.panel-analysis .an-scrolly { margin-bottom:0; }
}
@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; }
}