/* Motion and vector layer. The existing navy / cobalt / lime / mint palette stays intact. */
.vector-icon{display:inline-block;width:1.25em;height:1.25em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.22em}
#mainNav .nav-icon .vector-icon{width:21px;height:21px}
#mainNav button{position:relative;transition:background .28s ease,color .28s ease,transform .28s cubic-bezier(.2,.7,.2,1),box-shadow .28s ease}
#mainNav button:hover{transform:translateX(3px)}
#mainNav button.active{transform:translateX(3px)}
#mainNav button.active:before{content:'';position:absolute;left:-15px;top:23%;bottom:23%;width:3px;border-radius:3px;background:var(--lime);box-shadow:0 0 10px rgba(223,255,84,.7)}
.view-switcher button{transition:transform .28s cubic-bezier(.2,.7,.2,1),background .25s,color .25s,box-shadow .25s}
.view-switcher button:hover{transform:translateY(-2px)}
.view-switcher button.active{box-shadow:0 8px 18px rgba(9,46,114,.2)}
.card,.metric{transition:transform .32s cubic-bezier(.2,.7,.2,1),box-shadow .32s,border-color .32s}
@media(hover:hover){.overview-menu button:hover,.metric:hover{transform:translateY(-3px);box-shadow:0 16px 30px rgba(23,67,125,.12)}.card:not(.map-card):not(.overview-banner):hover{box-shadow:0 18px 38px rgba(23,67,125,.1)}}
.hero{isolation:isolate}
.hero:before{content:'';position:absolute;inset:-100% auto -100% -45%;width:24%;z-index:0;transform:rotate(23deg) translateX(-160%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);pointer-events:none}
.hero.hero-reveal:before{animation:heroSweep 1.1s cubic-bezier(.23,.8,.24,1) .05s both}
.hero.hero-reveal h1,.hero.hero-reveal p{animation:titleReveal .58s cubic-bezier(.19,.8,.24,1) both}
.hero.hero-reveal p{animation-delay:.09s}
@keyframes heroSweep{from{transform:rotate(23deg) translateX(-160%)}to{transform:rotate(23deg) translateX(790%)}}
@keyframes titleReveal{from{opacity:.3;transform:translateY(10px);filter:blur(5px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
@supports(view-transition-name:analysis-content){#viewContent{view-transition-name:analysis-content}.hero{view-transition-name:analysis-hero}::view-transition-old(analysis-content){animation:oldScene .3s ease-in both}::view-transition-new(analysis-content){animation:newScene .54s cubic-bezier(.2,.72,.2,1) both}::view-transition-old(analysis-hero){animation:oldScene .25s ease-in both}::view-transition-new(analysis-hero){animation:newScene .52s cubic-bezier(.2,.72,.2,1) both}}
@keyframes oldScene{to{opacity:0;transform:translateY(-12px) scale(.987);filter:blur(6px)}}
@keyframes newScene{from{opacity:0;transform:translateY(16px) scale(1.01);filter:blur(7px)}to{opacity:1;transform:none;filter:none}}

.sector-icon{display:inline-grid;place-items:center;width:36px;height:36px;flex:none;border-radius:11px;color:var(--sector);background:#edf6fa;border:1px solid color-mix(in srgb,var(--sector) 28%,white);box-shadow:inset 0 1px rgba(255,255,255,.8);position:relative;transition:transform .3s cubic-bezier(.2,.75,.2,1),box-shadow .3s}
.sector-icon:after{content:'';position:absolute;width:7px;height:7px;border-radius:50%;right:4px;top:4px;background:var(--sector);opacity:.22}
.sector-icon .vector-icon{width:21px;height:21px}
.sector-icon.inline{width:24px;height:24px;border-radius:8px}
.sector-icon.inline .vector-icon{width:14px;height:14px}
.sector-label{display:inline-flex;align-items:center;gap:8px;min-width:0}
.sector-label > span:last-child{line-height:1.25}
.sector-label:hover .sector-icon{transform:translateY(-2px) rotate(-5deg);box-shadow:0 6px 13px color-mix(in srgb,var(--sector) 25%,transparent)}
.profile-detail .dominant-icon.vector-feature{width:74px;height:74px;border-radius:22px;background:radial-gradient(circle at 25% 20%,#fff 0,#ecf8ed 52%,#d6efeb 100%);box-shadow:0 12px 26px rgba(19,96,80,.14),inset 0 1px rgba(255,255,255,.9);border:1px solid #d4eade;overflow:visible;animation:featureFloat 4s ease-in-out infinite}
.profile-detail .dominant-icon .sector-icon.featured{width:55px;height:55px;border-radius:17px;background:rgba(255,255,255,.83)}
.profile-detail .dominant-icon .sector-icon.featured .vector-icon{width:31px;height:31px}
.profile-detail .sector-showcase{display:grid;grid-template-columns:88px minmax(0,1fr);grid-template-rows:auto auto auto;align-items:center;gap:2px 13px;padding:17px 18px;border:1px solid color-mix(in srgb,var(--sector) 25%,white);border-radius:17px;background:radial-gradient(circle at 7% 12%,color-mix(in srgb,var(--sector) 20%,white),#f8fbff 65%,#fff 100%);position:relative;overflow:hidden}
.profile-detail .sector-showcase:after{content:'';position:absolute;width:140px;height:140px;border:1px solid color-mix(in srgb,var(--sector) 22%,transparent);border-radius:50%;right:-60px;top:-85px;box-shadow:0 0 0 28px color-mix(in srgb,var(--sector) 6%,transparent)}
.profile-detail .sector-showcase .dominant-icon{grid-row:1/4;margin:0;z-index:1}
.profile-detail .sector-showcase .kicker,.profile-detail .sector-showcase h3,.profile-detail .sector-showcase p{grid-column:2;position:relative;z-index:1}
.profile-detail .sector-showcase h3{line-height:1.18;margin:0!important}
.profile-detail .sector-showcase p{align-self:start}
@keyframes featureFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.stack-row{grid-template-columns:minmax(135px,1fr) minmax(60px,1.25fr) 45px;font-size:11px}
.shift-row .name{font-size:11px}
.commodity-chip{display:inline-flex;align-items:center;gap:6px;transition:transform .25s,box-shadow .25s}.commodity-chip:hover{transform:translateY(-2px);box-shadow:0 6px 12px rgba(105,74,32,.1)}
.commodity-chip .chip-icon{width:14px;height:14px;color:#9e682a}
.map-head{flex-wrap:wrap}
.map-head>div:first-child{flex:1 1 260px}
.map-expand-button{display:inline-flex;align-items:center;gap:6px;border:1px solid #cedff0;background:#fff;color:var(--navy);padding:7px 10px;border-radius:9px;font-size:11px;font-weight:800;white-space:nowrap;transition:background .2s,transform .2s}
.map-expand-button:hover{background:#eef7ff;transform:translateY(-2px)}
.map-expand-button .expand-icon{width:15px;height:15px}
body.map-is-expanded{overflow:hidden}
#viewContent:has(.map-expanded){view-transition-name:none!important}
#viewContent:has(.map-expanded) .map-layout{animation:none!important;transform:none!important;filter:none!important}
.map-card.map-expanded{position:fixed;inset:12px;z-index:100;display:flex;flex-direction:column;box-shadow:0 30px 90px rgba(2,23,57,.42);border:1px solid #b7d9f1;background:#fff}
.map-card.map-expanded .map-head{flex:none;padding:16px 20px 6px}
.map-card.map-expanded .map-wrap{height:auto;min-height:0;flex:1;overflow:auto;overscroll-behavior:contain;touch-action:pan-x pan-y}
.map-card.map-expanded .map-wrap svg{height:100%;min-width:1000px}
.map-card.map-expanded .map-hint{flex:none;padding-bottom:9px}
.map-card.map-expanded .map-expand-button{background:var(--navy);color:white;border-color:var(--navy)}
.supply-icon-line{display:flex;flex-wrap:wrap;gap:8px!important;line-height:1.2!important}
.supply-icon-line>span{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:9px;background:#f3f8fd;border:1px solid #e4edf7;color:#415d7b;font-weight:700}
.overview-menu button>span .vector-icon{width:25px;height:25px;color:var(--blue)}
.demand-legend button{display:inline-flex;align-items:center;gap:7px}
.demand-legend button .demand-icon{width:16px;height:16px}
.trade-strip span{display:flex;align-items:center;gap:6px}
.trade-icon{width:14px;height:14px}
.module-bar p,.map-head small{font-size:13px}
.control label{font-size:11px}
.control select{font-size:13px}
.rank-row,.stack-row,.commodity-chip{font-size:12px}

#viewContent.scene-enter > *{animation:sceneReveal .58s cubic-bezier(.2,.75,.2,1) both}
#viewContent.scene-enter > *:nth-child(1){animation-delay:0s}
#viewContent.scene-enter > *:nth-child(2){animation-delay:.075s}
#viewContent.scene-enter > *:nth-child(3){animation-delay:.13s}
#viewContent.scene-enter > *:nth-child(4){animation-delay:.18s}
#viewContent.scene-enter > *:nth-child(n+5){animation-delay:.23s}
@keyframes sceneReveal{0%{opacity:0;transform:translateY(18px);filter:blur(5px)}65%{opacity:1;filter:blur(0)}100%{opacity:1;transform:none;filter:none}}
#viewContent.scene-enter .map-wrap{animation:mapUnveil .8s cubic-bezier(.17,.72,.19,1) .13s both}
@keyframes mapUnveil{from{clip-path:inset(0 100% 0 0 round 14px);filter:saturate(.6)}to{clip-path:inset(0 0 0 0 round 14px);filter:saturate(1)}}
#viewContent.data-update .metric strong,#viewContent.data-update .detail-number strong,#viewContent.data-update .demand-ring b{animation:dataFlicker .48s steps(1,end) both}
#viewContent.data-update .metric:nth-child(2) strong{animation-delay:.07s}
#viewContent.data-update .metric:nth-child(3) strong{animation-delay:.11s}
#viewContent.data-update .metric:nth-child(4) strong{animation-delay:.15s}
#viewContent.map-update .detail-card,#viewContent.map-update .metric-grid{animation:panelGlitch .48s steps(1,end) both}
#viewContent.map-update .map-wrap .province-shape.selected{animation:selectedPulse .7s ease-out both}
@keyframes dataFlicker{0%{opacity:0;transform:translateX(4px);filter:blur(4px)}12%{opacity:.8;transform:translateX(-2px)}18%{opacity:.1}31%{opacity:1;transform:translateX(2px)}38%{opacity:.28}53%{opacity:1;filter:blur(0);transform:translateX(0)}70%{opacity:.8}100%{opacity:1;transform:none;filter:none}}
@keyframes panelGlitch{0%{opacity:0;transform:translateY(8px) skewX(-1deg);filter:blur(6px)}13%{opacity:.9;transform:translateX(3px)}20%{opacity:.16;transform:translateX(-3px)}33%{opacity:.96;transform:translateX(-2px)}42%{opacity:.34;transform:translateX(2px)}60%{opacity:1;transform:none;filter:none}100%{opacity:1;transform:none;filter:none}}
@keyframes selectedPulse{0%{filter:brightness(1.8) drop-shadow(0 0 12px #dfff54)}100%{filter:drop-shadow(0 2px 5px rgba(7,44,105,.55))}}
.scroll-reveal{opacity:0;transform:translateY(18px);transition:opacity .65s ease,transform .65s cubic-bezier(.2,.75,.2,1)}.scroll-reveal.in-view{opacity:1;transform:translateY(0)}

.map-reveal{position:absolute;right:15px;top:15px;z-index:5;min-width:205px;max-width:235px;background:rgba(7,40,93,.96);color:white;border:1px solid rgba(223,255,84,.56);border-radius:15px;padding:15px 18px 16px;box-shadow:0 17px 32px rgba(5,33,77,.32),3px 0 0 rgba(81,207,175,.52),-3px 0 0 rgba(255,126,112,.45);overflow:hidden;opacity:0;pointer-events:none}
.map-reveal.is-visible{pointer-events:auto;animation:glitchPopup .54s steps(1,end) both}
.map-reveal:before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(180deg,transparent 0 8px,rgba(255,255,255,.07) 8px 9px);opacity:.32;pointer-events:none}
.map-reveal .map-reveal-index{display:block;color:var(--lime);letter-spacing:.15em;font-size:10px;font-weight:800;margin-bottom:5px}
.map-reveal b{display:block;font-family:'Plus Jakarta Sans';font-size:17px;line-height:1.22;padding-right:12px}
.map-reveal .map-reveal-label{display:block;margin-top:10px;color:#adcaef;font-size:11px}
.map-reveal strong{display:block;color:#fff;font-family:'Plus Jakarta Sans';font-size:24px;letter-spacing:-.03em}
.map-reveal-close{position:absolute;right:7px;top:6px;border:0;background:rgba(255,255,255,.12);color:white;width:25px;height:25px;border-radius:50%;font-size:18px;line-height:1;z-index:1}
.map-reveal-close:hover{background:rgba(255,255,255,.26)}
.map-reveal-scan{position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,transparent,rgba(223,255,84,.15),transparent);height:25%;transform:translateY(-200%)}
.map-reveal.is-visible .map-reveal-scan{animation:scanPass .52s ease-out both}
@keyframes glitchPopup{0%{opacity:0;transform:translate(7px,-5px) skewX(-3deg);filter:blur(5px)}10%{opacity:.87;transform:translate(-3px,2px)}18%{opacity:.1}29%{opacity:1;transform:translate(4px,-1px)}36%{opacity:.25}52%{opacity:1;transform:translate(-2px,0)}66%{opacity:.58}100%{opacity:1;transform:none;filter:none}}
@keyframes scanPass{from{transform:translateY(-200%)}to{transform:translateY(550%)}}

@media(max-width:850px){.map-reveal{min-width:175px;max-width:195px;padding:11px 13px}.map-reveal strong{font-size:20px}.stack-row{grid-template-columns:minmax(135px,1fr) minmax(40px,1fr) 42px}}
@media(max-width:620px){#mainNav button:hover,#mainNav button.active{transform:none}#mainNav button.active:before{display:none}#mainNav button:nth-child(n+6){display:flex}#mainNav{overflow-x:auto;scrollbar-width:none}#mainNav::-webkit-scrollbar{display:none}.map-reveal{right:8px;top:8px;max-width:170px;min-width:160px}.map-reveal b{font-size:14px}.map-reveal strong{font-size:18px}.map-reveal .map-reveal-index{font-size:8px}.sector-icon.inline{width:22px;height:22px}.stack-row{grid-template-columns:minmax(114px,1fr) minmax(35px,.8fr) 42px;gap:5px}.map-card.map-expanded{inset:6px 6px 72px}.map-card.map-expanded .map-wrap svg{width:950px;height:520px;min-width:950px}.map-expand-button{font-size:10px;padding:6px 8px}}
@media(prefers-reduced-motion:reduce){.hero:before,.hero.hero-reveal:before,.hero.hero-reveal h1,.hero.hero-reveal p,#viewContent.scene-enter>*,#viewContent.scene-enter .map-wrap,#viewContent.data-update .metric strong,#viewContent.data-update .detail-number strong,#viewContent.data-update .demand-ring b,#viewContent.map-update .detail-card,#viewContent.map-update .metric-grid,#viewContent.map-update .province-shape.selected,.profile-detail .dominant-icon.vector-feature,.map-reveal.is-visible,.map-reveal.is-visible .map-reveal-scan,::view-transition-old(analysis-content),::view-transition-new(analysis-content),::view-transition-old(analysis-hero),::view-transition-new(analysis-hero){animation:none!important}.scroll-reveal{opacity:1!important;transform:none!important;transition:none!important}.map-reveal.is-visible{opacity:1}.card,.metric,#mainNav button,.view-switcher button,.sector-icon{transition:none!important}}