:root{
  --ink:#011821; --black:#000; --white:#fff; --fog:#f6f6f8; --fog-2:#eef0f3;
  --steel:#e3e4e8; --charcoal:#232730; --slate:#7c7f88; --slate-2:#a4a7b0;
  --plum:#111a4a; --orange:#ec652b; --grid:#023247; --moss:#44b48b;
  --info:#7ea7e9; --cyan:#167e6c; --teal:#88deeb;
  --t-solar:#d39200; --t-nuclear:#2563a8; --t-wind:#0f766e; --t-batteries:#5b3aa1; --t-transmission:#a05a2c;
  --sans:'Inter','SuisseIntl',system-ui,sans-serif;
  --serif:'Fraunces',Georgia,serif;
  --mono:'IBM Plex Mono','SFMono',ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--white);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;font-feature-settings:"ss01","cv11"}
body{overflow-x:hidden}
button{font:inherit;color:inherit;cursor:pointer;border:none;background:none}
a{color:inherit;text-decoration:none}

/* ── Dotted blueprint background ── */
.grid-bg{position:fixed;inset:0;pointer-events:none;background-image:radial-gradient(circle, rgba(2,50,71,.07) 1px, transparent 1px);background-size:24px 24px;z-index:0;mask-image:radial-gradient(ellipse at center, #000 30%, transparent 80%)}

/* ── Top chrome (persistent) ── */
.chrome{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.86);backdrop-filter:blur(12px);border-bottom:1px solid var(--steel)}
.chrome-row{display:flex;align-items:center;gap:32px;padding:14px 32px;max-width:1600px;margin:0 auto}
.brand{display:flex;align-items:baseline;gap:10px;flex-shrink:0}
.brand-mark{font-family:var(--mono);font-size:11px;letter-spacing:.18em;font-weight:500;color:var(--orange);text-transform:uppercase;border:1px solid var(--orange);padding:3px 7px;border-radius:2px}
.brand-name{font-family:var(--serif);font-size:18px;font-weight:400;letter-spacing:-.01em;color:var(--ink)}
.brand-name em{font-style:italic;color:var(--slate)}
.nav-tabs{display:flex;gap:2px;flex:1}
.tab{padding:7px 14px;font-size:13px;font-weight:500;color:var(--slate);border-radius:6px;letter-spacing:-.01em;transition:all .15s}
.tab:hover{color:var(--ink);background:var(--fog)}
.tab.active{color:var(--ink);background:var(--fog-2)}
.tab .num{font-family:var(--mono);font-size:10px;color:var(--slate-2);margin-left:6px}
.chrome-right{display:flex;align-items:center;gap:10px;flex-shrink:0}
.search-mini{display:flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid var(--steel);border-radius:6px;font-family:var(--mono);font-size:11px;color:var(--slate);min-width:200px}
.search-mini::before{content:"";width:11px;height:11px;border:1.5px solid currentColor;border-radius:50%;box-shadow:5px 5px 0 -3px currentColor;transform:rotate(-45deg);margin-right:2px}
.btn-cta{padding:7px 14px;border-radius:6px;background:var(--orange);color:#fff;font-size:13px;font-weight:500;letter-spacing:-.01em}
.kbd{font-family:var(--mono);font-size:10px;padding:1px 5px;border:1px solid var(--steel);border-radius:3px;color:var(--slate);background:#fff;margin-left:auto}

/* ── State container ── */
.view{position:relative;z-index:1}
.view[data-hidden]{display:none}

/* ════════════════════ LANDING ════════════════════ */
.landing{position:relative;min-height:calc(100vh - 53px);padding:0;overflow:hidden}
.land-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:0;min-height:calc(100vh - 53px)}
.land-left{padding:64px 56px 48px;display:flex;flex-direction:column;justify-content:space-between;border-right:1px solid var(--steel);position:relative;z-index:2;background:rgba(255,255,255,.6);backdrop-filter:blur(2px)}
.land-eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--slate);text-transform:uppercase;display:flex;align-items:center;gap:14px;margin-bottom:32px}
.land-eyebrow::before{content:"";width:24px;height:1px;background:var(--orange)}
.land-title{font-family:var(--serif);font-size:76px;line-height:.96;letter-spacing:-.035em;font-weight:300;color:var(--ink);margin-bottom:24px}
.land-title em{font-style:italic;font-weight:300}
.land-title b{font-weight:500}
.land-lede{font-size:19px;line-height:1.5;color:var(--charcoal);max-width:520px;letter-spacing:-.01em;font-weight:300;margin-bottom:36px}
.land-lede strong{font-weight:500;color:var(--ink)}
.land-actions{display:flex;gap:10px;margin-bottom:48px}
.btn{padding:12px 18px;border-radius:8px;font-size:14px;font-weight:500;letter-spacing:-.01em;display:inline-flex;align-items:center;gap:8px;transition:all .15s}
.btn-primary{background:var(--ink);color:#fff}
.btn-primary:hover{background:var(--plum)}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--steel)}
.btn-ghost:hover{background:var(--fog)}
.btn .arr{width:14px;height:1px;background:currentColor;position:relative}
.btn .arr::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.land-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding-top:24px;border-top:1px solid var(--steel)}
.meta-stat{font-family:var(--mono)}
.meta-num{font-family:var(--serif);font-size:40px;font-weight:300;letter-spacing:-.025em;color:var(--ink);line-height:1}
.meta-num em{font-style:italic;color:var(--orange)}
.meta-lbl{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);margin-top:8px;line-height:1.4}

.land-right{position:relative;background:var(--fog);overflow:hidden}
.globe-wrap{position:absolute;inset:0}
#globe-svg{width:100%;height:100%;display:block}
.globe-axis{position:absolute;font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--slate-2);text-transform:uppercase;pointer-events:none}
.globe-axis.tl{top:24px;left:24px}
.globe-axis.tr{top:24px;right:24px;text-align:right}
.globe-axis.br{bottom:24px;right:24px;text-align:right}
.globe-axis.bl{bottom:24px;left:24px}
.globe-axis .v{color:var(--ink);font-weight:500;display:block;margin-top:2px;font-family:var(--serif);font-size:14px;letter-spacing:-.01em;text-transform:none}

.story-rail{position:absolute;left:0;right:0;bottom:0;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-top:1px solid var(--steel);padding:16px 24px}
.rail-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px}
.rail-title{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--slate);text-transform:uppercase}
.rail-title b{color:var(--ink);font-weight:500}
.rail-nav{display:flex;gap:6px}
.rail-arr{width:26px;height:26px;border-radius:50%;border:1px solid var(--steel);display:flex;align-items:center;justify-content:center;color:var(--slate);font-size:12px}
.rail-arr:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.rail-track{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
.rail-track::-webkit-scrollbar{display:none}
.story-card{flex:0 0 220px;border:1px solid var(--steel);border-radius:8px;padding:14px;background:#fff;cursor:pointer;transition:all .18s;position:relative}
.story-card:hover{border-color:var(--ink);transform:translateY(-2px);box-shadow:rgba(0,0,0,.05) 0 8px 16px}
.story-card.featured{background:var(--ink);color:#fff;border-color:var(--ink)}
.story-card.featured .sc-num,.story-card.featured .sc-meta{color:rgba(255,255,255,.5)}
.story-card.featured .sc-title{color:#fff}
.story-card.soon{opacity:.55}
.story-card.soon:hover{opacity:.9}
.sc-status{display:inline-flex;align-items:center;font-family:var(--mono);font-size:8px;letter-spacing:.14em;text-transform:uppercase;padding:3px 7px;border-radius:99px;background:var(--moss);color:#fff;font-weight:500;flex-shrink:0}
.sc-status.soon{background:transparent;color:var(--slate-2);border:1px solid var(--steel)}
.story-card.featured .sc-status{background:var(--moss);color:#fff}
.sc-top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px;min-height:20px}
.sc-tagrow{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:18px}
.sc-num{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--slate)}
.sc-tag{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate)}
.sc-tag .dot{width:7px;height:7px;border-radius:50%;background:currentColor}
.sc-title{font-family:var(--serif);font-size:18px;line-height:1.15;letter-spacing:-.015em;font-weight:400;color:var(--ink);margin-bottom:6px}
.sc-title em{font-style:italic;font-weight:300;color:var(--slate)}
.sc-meta{font-family:var(--mono);font-size:10px;color:var(--slate);letter-spacing:.04em}
.sc-spark{position:absolute;right:14px;bottom:12px;width:60px;height:24px;opacity:.7}

/* ════════════════════ STORY PAGE ════════════════════ */
.story{max-width:none}
.story-hero{padding:56px 56px 48px;border-bottom:1px solid var(--steel);position:relative;background:#fff}
.hero-eyebrow{display:flex;gap:14px;align-items:center;font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--slate);text-transform:uppercase;margin-bottom:28px}
.hero-eyebrow .crumb{display:inline-flex;align-items:center;gap:6px}
.hero-eyebrow .sep{color:var(--slate-2)}
.hero-eyebrow .tech-pill{padding:3px 9px;border-radius:99px;color:#fff;font-weight:500;letter-spacing:.08em}
.story-headline{font-family:var(--serif);font-size:88px;line-height:.95;letter-spacing:-.035em;font-weight:300;color:var(--ink);max-width:1200px;margin-bottom:24px}
.story-headline em{font-style:italic;color:var(--slate)}
.story-headline b{font-weight:500}
.story-deck{font-size:21px;line-height:1.5;color:var(--charcoal);max-width:760px;font-weight:300;letter-spacing:-.005em;margin-bottom:36px}
.story-deck strong{font-weight:500;color:var(--ink)}
.story-byline{display:flex;gap:32px;align-items:center;font-family:var(--mono);font-size:11px;color:var(--slate);letter-spacing:.04em;padding-top:24px;border-top:1px solid var(--steel);max-width:760px}
.byline-block strong{color:var(--ink);font-weight:500;display:block;margin-bottom:2px}

/* ── Section template ── */
.sec{padding:64px 56px;border-bottom:1px solid var(--steel);position:relative}
.sec.alt{background:var(--fog)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:36px;gap:48px}
.sec-head-left{max-width:680px}
.sec-num{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--orange);text-transform:uppercase;margin-bottom:12px;display:flex;gap:10px;align-items:center}
.sec-num::before{content:"";width:18px;height:1px;background:currentColor}
.sec-title{font-family:var(--serif);font-size:48px;line-height:1;letter-spacing:-.025em;font-weight:300;color:var(--ink);margin-bottom:14px}
.sec-title em{font-style:italic;color:var(--slate)}
.sec-deck{font-size:17px;line-height:1.55;color:var(--charcoal);font-weight:300;letter-spacing:-.005em}
.sec-aside{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--slate);text-transform:uppercase;text-align:right;flex-shrink:0;line-height:1.6}
.sec-aside b{color:var(--ink);display:block;font-family:var(--serif);font-size:32px;font-weight:300;letter-spacing:-.02em;text-transform:none;margin-top:4px}

/* ── §1 At a glance ── */
.glance{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--steel);border-radius:8px;background:#fff;overflow:hidden}
.glance-cell{padding:24px;border-right:1px solid var(--steel);position:relative}
.glance-cell:last-child{border-right:none}
.gc-lbl{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--slate);text-transform:uppercase;margin-bottom:12px}
.gc-num{font-family:var(--serif);font-size:44px;font-weight:300;letter-spacing:-.025em;color:var(--ink);line-height:1}
.gc-num em{font-style:italic;font-weight:300;color:var(--t-solar)}
.gc-num .unit{font-size:18px;color:var(--slate);font-weight:300;margin-left:4px}
.gc-sub{font-family:var(--mono);font-size:10px;color:var(--slate);margin-top:8px;display:flex;gap:6px;align-items:center}
.gc-trend{display:inline-flex;align-items:center;gap:3px;font-weight:500}
.gc-trend.up{color:var(--moss)}
.gc-trend.down{color:var(--orange)}

/* ── §2 Map ── */
.map-frame{display:grid;grid-template-columns:1fr 320px;gap:0;border:1px solid var(--steel);border-radius:8px;overflow:hidden;background:#fff}
.map-canvas{position:relative;height:560px;background:var(--fog)}
#story-map{width:100%;height:100%;display:block}
.map-overlay-tl{position:absolute;top:18px;left:18px;display:flex;gap:6px}
.chip{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:5px 9px;border-radius:99px;background:#fff;border:1px solid var(--steel);color:var(--slate);cursor:pointer}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.map-legend-bl{position:absolute;bottom:18px;left:18px;display:flex;gap:14px;font-family:var(--mono);font-size:10px;color:var(--slate);background:rgba(255,255,255,.9);padding:8px 12px;border:1px solid var(--steel);border-radius:6px}
.lg-item{display:flex;align-items:center;gap:6px}
.lg-dot{width:9px;height:9px;border-radius:50%;border:1.5px solid}
.map-side{padding:24px;border-left:1px solid var(--steel);background:#fff;display:flex;flex-direction:column;gap:18px}
.ms-title{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--slate);text-transform:uppercase}
.ms-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--fog-2);font-size:13px}
.ms-row:last-child{border-bottom:none}
.ms-flag{width:18px;height:13px;border-radius:2px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:8px;font-weight:600;color:#fff;letter-spacing:.04em;background:var(--ink)}
.ms-name{flex:1;font-weight:500;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:-.01em}
.ms-val{font-family:var(--mono);font-size:11px;color:var(--slate)}
.ms-bar{height:3px;background:var(--fog-2);border-radius:2px;margin-top:4px;width:100%;position:relative;overflow:hidden}
.ms-bar i{position:absolute;left:0;top:0;height:100%;background:var(--t-solar);border-radius:2px}
.ms-row.bbar{flex-direction:column;align-items:stretch;gap:4px}
.ms-row.bbar .ms-bar i{background:var(--info)}
.ms-rowtop{display:flex;align-items:center;gap:10px}

/* ── §3 Value chain ladder ── */
.ladder{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border:1px solid var(--steel);border-radius:8px;background:#fff;overflow:hidden}
.rung{padding:20px 18px;border-right:1px solid var(--steel);position:relative;display:flex;flex-direction:column;gap:12px;min-height:280px}
.rung:last-child{border-right:none}
.rung-stage{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--slate);text-transform:uppercase;display:flex;justify-content:space-between;align-items:center}
.rung-stage .step{font-family:var(--serif);font-style:italic;font-weight:300;color:var(--slate-2);font-size:18px;letter-spacing:-.02em;text-transform:none}
.rung-name{font-family:var(--serif);font-size:22px;line-height:1.05;letter-spacing:-.02em;font-weight:400;color:var(--ink)}
.rung-bal{display:flex;flex-direction:column;gap:6px;margin-top:auto;font-family:var(--mono);font-size:10px;color:var(--slate)}
.rung-bal-row{display:flex;justify-content:space-between}
.rung-bal-row .v{color:var(--ink);font-weight:500}
.rung-bal-bar{height:4px;background:var(--fog-2);border-radius:2px;overflow:hidden;display:flex}
.rung-bal-bar .imp{background:var(--orange);height:100%}
.rung-bal-bar .exp{background:var(--moss);height:100%}
.rung-net{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.04em}
.rung-net.neg{color:var(--orange)}
.rung-net.pos{color:var(--moss)}
.rung.focus::before{content:"India focus";position:absolute;top:-1px;left:-1px;right:-1px;height:3px;background:var(--t-solar)}
.rung.focus::after{content:"";position:absolute;top:0;left:0;width:100%;height:0}

/* ── §4 Timeline ── */
.tl-frame{border:1px solid var(--steel);border-radius:8px;background:#fff;padding:28px}
.tl-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:16px}
.tl-toggle{display:flex;gap:2px;background:var(--fog);padding:3px;border-radius:6px}
.tl-tg{padding:5px 11px;border-radius:4px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate)}
.tl-tg.on{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.06)}
#tl-svg{width:100%;height:340px;display:block}
.tl-legend{display:flex;flex-wrap:wrap;gap:16px;margin-top:16px;padding-top:16px;border-top:1px solid var(--fog-2)}
.tl-lg{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--slate)}
.tl-lg-sw{width:14px;height:3px;border-radius:1px}

/* ── §5 Competitiveness ── */
.scatter-frame{display:grid;grid-template-columns:1.4fr 1fr;gap:24px}
.scatter-box{border:1px solid var(--steel);border-radius:8px;background:#fff;padding:24px}
#scatter-svg{width:100%;height:420px;display:block}
.radar-box{border:1px solid var(--steel);border-radius:8px;background:#fff;padding:24px;display:flex;flex-direction:column}
#radar-svg{width:100%;flex:1;display:block;min-height:280px}
.box-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.box-t{font-family:var(--serif);font-size:22px;font-weight:400;letter-spacing:-.02em;color:var(--ink)}
.box-d{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--slate);text-transform:uppercase}
.box-deck{font-size:13px;color:var(--slate);line-height:1.55;margin-bottom:16px;letter-spacing:-.005em}

/* ── §6 Pull quote ── */
.pull{padding:80px 56px;border-bottom:1px solid var(--steel);background:var(--ink);color:#fff;position:relative}
.pull-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;max-width:1400px;margin:0 auto}
.pull-quote{font-family:var(--serif);font-size:42px;line-height:1.1;letter-spacing:-.02em;font-weight:300}
.pull-quote em{color:var(--story-accent,var(--t-solar));font-style:italic}
.story-headline .accent{color:var(--story-accent,var(--t-solar))}
.pull-attr{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:rgba(255,255,255,.5);text-transform:uppercase;margin-top:24px}
.pull-attr b{color:#fff;display:block;font-weight:500;margin-bottom:2px}
.pull-fig{display:grid;grid-template-rows:auto auto auto;gap:14px}
.pf-cell{padding:18px 22px;border:1px solid rgba(255,255,255,.12);border-radius:8px;background:rgba(255,255,255,.03)}
.pf-l{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:rgba(255,255,255,.5);text-transform:uppercase;margin-bottom:6px}
.pf-v{font-family:var(--serif);font-size:32px;font-weight:300;letter-spacing:-.025em}
.pf-v em{font-style:italic;color:var(--t-solar)}

/* ── §7 What next ── */
.next{padding:64px 56px;border-bottom:1px solid var(--steel)}
.next-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:32px}
.next-card{border:1px solid var(--steel);border-radius:8px;padding:24px;background:#fff;transition:all .18s;cursor:pointer;position:relative;display:flex;flex-direction:column;gap:12px;min-height:200px}
.next-card:hover{border-color:var(--ink);box-shadow:rgba(0,0,0,.05) 0 8px 16px}
.nc-tag{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);display:flex;align-items:center;gap:6px}
.nc-tag .dot{width:7px;height:7px;border-radius:50%}
.nc-t{font-family:var(--serif);font-size:22px;line-height:1.1;letter-spacing:-.02em;font-weight:400;color:var(--ink)}
.nc-t em{font-style:italic;color:var(--slate)}
.nc-b{font-size:13px;color:var(--charcoal);line-height:1.55;letter-spacing:-.005em;flex:1}
.nc-arr{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--orange);display:flex;align-items:center;gap:6px;margin-top:auto}

/* ════════════════════ EXPLORE ════════════════════ */
.explore{padding:0}
.exp-hero{padding:48px 56px 32px;border-bottom:1px solid var(--steel)}
.exp-h-row{display:flex;justify-content:space-between;align-items:flex-end;gap:48px}
.exp-title{font-family:var(--serif);font-size:56px;line-height:1;letter-spacing:-.03em;font-weight:300;color:var(--ink);margin-bottom:12px}
.exp-title em{font-style:italic;color:var(--slate)}
.exp-deck{font-size:16px;color:var(--charcoal);max-width:560px;line-height:1.5;font-weight:300}

.exp-body{display:grid;grid-template-columns:280px 1fr;min-height:calc(100vh - 53px - 200px)}
.filters{padding:28px 28px 28px 56px;border-right:1px solid var(--steel);background:var(--fog)}
.filt-grp{margin-bottom:24px}
.filt-h{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--slate);text-transform:uppercase;margin-bottom:10px;display:flex;justify-content:space-between;align-items:center}
.filt-h .clr{color:var(--orange);font-size:10px;letter-spacing:.04em;text-transform:none;cursor:pointer}
.filt-opts{display:flex;flex-wrap:wrap;gap:5px}
.filt-chip{padding:6px 10px;border-radius:99px;border:1px solid var(--steel);background:#fff;font-size:12px;color:var(--charcoal);cursor:pointer;letter-spacing:-.01em;display:flex;align-items:center;gap:5px}
.filt-chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.filt-chip .dot{width:7px;height:7px;border-radius:50%}
.range-bar{position:relative;height:36px;margin-top:6px}
.range-bar .track{position:absolute;top:50%;left:0;right:0;height:3px;background:var(--steel);border-radius:2px;transform:translateY(-50%)}
.range-bar .fill{position:absolute;top:50%;left:20%;right:20%;height:3px;background:var(--ink);border-radius:2px;transform:translateY(-50%)}
.range-bar .knob{position:absolute;top:50%;width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid var(--ink);transform:translate(-50%,-50%)}
.range-vals{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;color:var(--slate);margin-top:4px;letter-spacing:.04em}

.exp-results{padding:28px 56px}
.exp-tools{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;padding-bottom:14px;border-bottom:1px solid var(--steel)}
.exp-count{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--slate)}
.exp-count b{color:var(--ink);font-weight:500}
.exp-view-tg{display:flex;gap:2px;background:var(--fog);padding:3px;border-radius:6px}
.exp-vt{padding:5px 11px;border-radius:4px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate);cursor:pointer}
.exp-vt.on{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.06)}
.sort-pick{font-family:var(--mono);font-size:11px;color:var(--slate);display:flex;align-items:center;gap:8px;cursor:pointer}
.sort-pick b{color:var(--ink);font-weight:500}

/* Results table */
.res-table{width:100%;border-collapse:collapse;font-size:13px;border:1px solid var(--steel);border-radius:8px;overflow:hidden;background:#fff}
.res-table th{text-align:left;padding:10px 14px;background:var(--fog);font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.14em;color:var(--slate);text-transform:uppercase;border-bottom:1px solid var(--steel)}
.res-table td{padding:14px;border-bottom:1px solid var(--fog-2);vertical-align:middle}
.res-table tr:hover td{background:var(--fog)}
.res-table tr:last-child td{border-bottom:none}
.rt-rank{font-family:var(--mono);color:var(--slate-2);width:36px}
.rt-pair{display:flex;align-items:center;gap:10px}
.rt-flag{width:22px;height:16px;border-radius:2px;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.04em}
.rt-name{font-weight:500;letter-spacing:-.01em}
.rt-tech{font-family:var(--mono);font-size:11px;color:var(--slate);text-transform:uppercase;letter-spacing:.06em;display:inline-flex;align-items:center;gap:5px}
.rt-tech .dot{width:7px;height:7px;border-radius:50%}
.rt-mini{position:relative;width:80px;height:18px}
.rt-mini svg{width:100%;height:100%;display:block}
.rt-num{font-family:var(--mono);font-size:12px;text-align:right;color:var(--ink)}
.rt-num .pct{color:var(--moss);margin-left:6px}
.rt-num .pct.dn{color:var(--orange)}
.rt-cta{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--orange);text-transform:uppercase;text-align:right}
/* Phase 4 slice 5 — routing-ladder visuals.
   Non-routable rows render with muted CTA + default cursor.
   Click marks the row "selected" for visual confirmation that
   the click registered, while remaining honest about the lack
   of a destination. */
.res-table tr[data-route="none"] .rt-cta{color:var(--slate-2)}
.res-table tr[data-route="none"]:hover td{background:var(--fog-2)}
.res-table tr.exp-row-selected td{background:rgba(236,101,43,.04)}
.res-table tr.exp-row-selected td:first-child{box-shadow:inset 2px 0 0 0 var(--orange)}

/* Map view in explore */
.exp-map{height:560px;border:1px solid var(--steel);border-radius:8px;background:var(--fog);position:relative;overflow:hidden}
#exp-map-svg{width:100%;height:100%;display:block}

/* ════════════════════ CREATE ════════════════════ */
.create{padding:48px 56px}
.cr-hero{display:flex;justify-content:space-between;align-items:flex-end;gap:48px;margin-bottom:40px;padding-bottom:32px;border-bottom:1px solid var(--steel)}
.cr-title{font-family:var(--serif);font-size:60px;line-height:1;letter-spacing:-.03em;font-weight:300;color:var(--ink);margin-bottom:12px}
.cr-title em{font-style:italic;color:var(--slate)}
.cr-deck{font-size:17px;color:var(--charcoal);max-width:600px;line-height:1.5;font-weight:300}

.cr-stepper{display:flex;align-items:center;gap:16px;margin-bottom:36px;padding:0;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.cr-step{display:flex;align-items:center;gap:8px;color:var(--slate-2);padding:8px 0}
.cr-step.done{color:var(--moss)}
.cr-step.on{color:var(--ink);font-weight:500}
.cr-step .nm{width:22px;height:22px;border-radius:50%;border:1px solid currentColor;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:500}
.cr-step.on .nm{background:var(--ink);color:#fff;border-color:var(--ink)}
.cr-step.done .nm{background:var(--moss);color:#fff;border-color:var(--moss)}
.cr-line{flex:0 1 60px;height:1px;background:var(--steel)}

/* Phase 3 step 3b — three-panel layout. Desktop: Brief / Draft /
   Evidence Inspector as 3 columns. Tablet (768-1023px): Brief
   spans the top row, Draft + Inspector are 2 columns below.
   Mobile (<768px): tabs (.cr-tabs) reveal one panel at a time
   via [data-active="true"]. Default (desktop) below; the
   media queries at the bottom of this file handle smaller. */
.cr-grid{display:grid;grid-template-columns:300px 1fr 320px;gap:0;border:1px solid var(--steel);border-radius:12px;overflow:hidden;background:#fff;min-height:520px}
/* Tabs (mobile only — hidden by default; revealed via the @media block below) */
.cr-tabs{display:none;gap:0;margin:14px 0 -1px;border-bottom:1px solid var(--steel)}
.cr-tab{flex:1;padding:10px 14px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--slate);text-transform:uppercase;background:transparent;border:none;border-bottom:2px solid transparent;cursor:pointer;transition:color .15s, border-color .15s}
.cr-tab:hover{color:var(--charcoal)}
.cr-tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--orange)}
.cr-form{padding:36px;border-right:1px solid var(--steel);background:#fff;display:flex;flex-direction:column;gap:24px}

/* Phase 3 step 4 — Compare toggle (Brief-panel opt-in). Chip-style
   button; aria-pressed flips visual state. When ON, a secondary
   pair selector + suggested comparisons block reveals below the
   framing field (slice 2). Slice 1 ships only the toggle. */
.cr-compare-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:-8px -4px 8px;padding:6px 4px}
.cr-compare-tog{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 10px;border-radius:999px;border:1px solid var(--steel);background:#fff;font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--slate);text-transform:uppercase;cursor:pointer;transition:all .15s}
.cr-compare-tog:hover{border-color:var(--ink);color:var(--ink)}
.cr-compare-tog .cr-ct-dot{width:8px;height:8px;border-radius:50%;border:1.5px solid var(--slate-2);background:transparent;transition:all .15s}
.cr-compare-tog .cr-ct-s{font-family:var(--sans);font-size:9px;letter-spacing:.04em;text-transform:none;color:var(--slate-2);font-style:italic}
.cr-compare-tog[aria-pressed="true"]{background:rgba(236,101,43,.08);border-color:var(--orange);color:var(--orange)}
.cr-compare-tog[aria-pressed="true"] .cr-ct-dot{background:var(--orange);border-color:var(--orange);box-shadow:0 0 0 3px rgba(236,101,43,.18)}
.cr-compare-tog[aria-pressed="true"] .cr-ct-s{color:var(--orange);opacity:.85}

/* Phase 3 step 5 slice 2 — Draft Modes segmented controls. Three
   rows (audience / tone / length) of grouped pills. Visually
   distinct from the primary cr-pill so the user reads them as
   tools rather than the main builder selectors. Click writes
   to DRAFT_MODE; slice 2 leaves prose unchanged (the active-
   state still flips so the user sees the click). */
.cr-mode-grid{display:flex;flex-direction:column;gap:8px}
.cr-mode-row{display:grid;grid-template-columns:64px 1fr;align-items:center;gap:10px}
.cr-mode-l{font-family:var(--mono);font-size:9px;letter-spacing:.14em;color:var(--slate-2);text-transform:uppercase}
.cr-mode-segs{display:flex;border:1px solid var(--steel);border-radius:6px;overflow:hidden;background:#fff}
.cr-mode-seg{flex:1;padding:6px 4px;border:none;border-left:1px solid var(--fog-2);background:transparent;font-family:var(--sans);font-size:11px;letter-spacing:-.01em;color:var(--charcoal);cursor:pointer;text-transform:capitalize;transition:all .12s;min-width:0;white-space:nowrap}
.cr-mode-seg:first-child{border-left:none}
.cr-mode-seg:hover{background:var(--fog)}
.cr-mode-seg.on{background:var(--ink);color:#fff}

/* Phase 3 step 6 slice 2 — Regenerate buttons. Small inline icon
   button at the trailing edge of each prose block (.cr-prev-block).
   Subtle by default, more prominent when an override is active
   (variant badge appears). Slice 2 visual only — slice 3 wires
   the actual variant swap. */
.cr-prev-block{position:relative;display:flex;align-items:flex-start;gap:8px}
.cr-prev-block .cr-prev-h{flex:1;min-width:0}
.cr-prev-block .cr-prev-deck{flex:1;min-width:0;margin:0}
.cr-prev-block .cr-prev-framing{flex:1;min-width:0}
.cr-regen-btn{flex:0 0 auto;display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border:1px solid var(--steel);border-radius:99px;background:#fff;font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--slate-2);cursor:pointer;opacity:.5;transition:all .15s;align-self:flex-start;margin-top:4px}
.cr-regen-btn:hover{opacity:1;border-color:var(--ink);color:var(--ink)}
.cr-regen-btn[data-active="true"]{opacity:1;border-color:var(--orange);background:rgba(236,101,43,.06);color:var(--orange)}
.cr-regen-icon{font-size:11px;line-height:1;display:inline-block;transform:rotate(0deg);transition:transform .25s}
.cr-regen-btn:hover .cr-regen-icon{transform:rotate(180deg)}
.cr-regen-badge{font-weight:500;letter-spacing:.04em}
.cr-regen-badge:empty{display:none}

/* Phase 3 step 6 slice 4 — Override visual feedback + reset-all
   affordance. Overridden blocks gain a left-side orange accent so
   the user can see at a glance which prose has been regenerated.
   Reset button at the top of the preview clears all 3 overrides
   in one click; hidden when nothing is overridden. */
.cr-prev-block[data-overridden="true"]{padding-left:10px;border-left:2px solid var(--orange);background:rgba(236,101,43,.02)}

/* Phase 3 step 7 slice 2 — Quality warnings panel. Lives between
   the evidence chips and the chart row so the visual flow reads
   "evidence states → warnings → underlying data". Empty when no
   warnings (state-free derivation; reset/start-new clears it
   because the inputs clear). Severity colors mirror the per-state
   chip colors so the user can scan the strip → warnings → inspector
   and see consistent palette per slot. */
.cr-prev-warnings{display:flex;flex-direction:column;gap:4px;margin:4px 0 0}
.cr-prev-warnings:empty{display:none}
.cr-warn{display:flex;align-items:flex-start;gap:8px;padding:6px 10px;border-radius:5px;font-family:var(--mono);font-size:10px;line-height:1.45;letter-spacing:.02em}
.cr-warn-dot{width:6px;height:6px;border-radius:50%;flex:0 0 auto;margin-top:5px}
.cr-warn-info   {background:rgba(37,99,168,.06);color:#1f487a}
.cr-warn-info   .cr-warn-dot{background:#2563a8}
.cr-warn-warn   {background:rgba(211,146,0,.07);color:#7a5400}
.cr-warn-warn   .cr-warn-dot{background:#d39200}
.cr-warn-caution{background:rgba(236,101,43,.07);color:var(--orange)}
.cr-warn-caution .cr-warn-dot{background:var(--orange)}
/* Phase 3 step 6 — Compare-Mode A-only safety. Regenerate is a
   single-mode feature; in paired mode the overrides are suppressed at
   render (see compose-render.js renderComposePreview), and the UI hides
   accordingly so the user doesn't see a button that would set state
   the renderer ignores. renderRegenerateButtons also clears
   data-overridden on each block when paired so the orange accent
   doesn't paint against base content. State persists across the
   toggle so flipping compare back off restores both the buttons and
   the override state. */
.cr-prev[data-paired="true"] .cr-regen-btn,
.cr-prev[data-paired="true"] .cr-prev-reset{display:none}
.cr-prev-top-r{display:flex;align-items:center;gap:10px}
.cr-prev-reset{font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--orange);background:rgba(236,101,43,.06);border:1px solid rgba(236,101,43,.3);padding:3px 8px;border-radius:99px;cursor:pointer;transition:all .15s}
.cr-prev-reset:hover{background:rgba(236,101,43,.12);border-color:var(--orange)}

/* Phase 3 step 5 slice 4 — inline markers for tone + length effects.
   Tone prefixes the headline; length 'full' appends an extra line to
   the deck. Subtle visual cues so the user reads the mode change at
   a glance without it overwhelming the editorial prose. */
.cr-prev-h em.mode-urgent,.cppc-h em.mode-urgent{font-style:normal;color:var(--orange);font-family:var(--mono);font-size:.6em;letter-spacing:.14em;text-transform:uppercase;vertical-align:middle;margin-right:6px}
.cr-prev-h em.mode-board,.cppc-h em.mode-board{font-style:normal;color:var(--ink);font-family:var(--mono);font-size:.55em;letter-spacing:.14em;text-transform:uppercase;vertical-align:middle;margin-right:8px;padding:2px 6px;background:var(--fog);border-radius:3px}
.cr-prev-deck em.mode-full-extra,.cppc-deck em.mode-full-extra{font-style:italic;color:var(--slate);display:block;margin-top:8px;padding-top:8px;border-top:1px dashed var(--steel);font-size:.95em}

/* Phase 3 step 4 slice 2 — secondary-pair selector field. Hidden until
   COMPARE.enabled flips on (data-on="true"). When on, mirrors the
   primary fields' visual rhythm. Preset row stacks 4 2-line buttons
   each setting both primary + secondary in one click. */
#cr-compare-fld[data-on="false"],
#cr-compare-divider[data-on="false"]{display:none}
.cr-compare-sub{font-family:var(--mono);font-size:9px;letter-spacing:.14em;color:var(--slate-2);text-transform:uppercase;margin:6px 0 -2px}
.cr-presets{display:grid;grid-template-columns:1fr;gap:6px;margin-top:4px}
.cr-preset{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:10px 14px;border-radius:8px;border:1px solid var(--steel);background:#fff;font-family:var(--sans);text-align:left;cursor:pointer;transition:all .15s}
.cr-preset:hover{border-color:var(--ink);transform:translateY(-1px);box-shadow:0 1px 4px rgba(1,24,33,.06)}
.cr-preset.on{border-color:var(--orange);background:rgba(236,101,43,.06)}
.cr-preset .cr-preset-pair{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--ink);font-weight:500;letter-spacing:-.005em}
.cr-preset .cr-preset-pair .cr-pp-arrow{font-family:var(--mono);font-size:11px;color:var(--slate-2);font-weight:400}
.cr-preset .cr-preset-pair .cr-pp-tech{display:inline-block;width:7px;height:7px;border-radius:50%}
.cr-preset .cr-preset-hint{font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--slate);font-style:italic}

/* Evidence Inspector (right panel) — Phase 3 step 3b */
.cr-inspector{padding:28px 26px;background:#fff;border-left:1px solid var(--steel);display:flex;flex-direction:column;gap:6px;overflow-y:auto;max-height:calc(100vh - 80px)}
.ci-stance{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--slate);text-transform:uppercase;display:flex;align-items:center;gap:8px;padding-bottom:12px;border-bottom:1px solid var(--fog-2)}
.ci-stance::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--slate-2)}
.ci-stance[data-stance="source-backed"]::before{background:var(--moss)}
.ci-stance[data-stance="mixed"]::before{background:var(--orange)}
.ci-stance[data-stance="awaiting"]::before{background:var(--slate-2)}
.ci-block{padding:10px 0;border-bottom:1px solid var(--fog-2);transition:background .18s, padding-left .18s}
.ci-block:last-child{border-bottom:none}
.ci-block-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:4px}
.ci-block h3{font-family:var(--serif);font-size:14px;font-weight:400;color:var(--ink);letter-spacing:-.005em;margin:0}
.ci-block .ci-state{font-family:var(--mono);font-size:9px;letter-spacing:.06em;color:var(--slate-2);padding:2px 7px;border-radius:999px;border:1px solid var(--steel);background:#fff}
.ci-block[data-state="authored"] .ci-state     {color:#1d6e4f;border-color:rgba(68,180,139,.5);background:rgba(68,180,139,.08)}
.ci-block[data-state="reference"] .ci-state    {color:#1f487a;border-color:rgba(37,99,168,.45);background:rgba(37,99,168,.06)}
.ci-block[data-state="tech-template"] .ci-state{color:#7a5400;border-color:rgba(211,146,0,.45);background:rgba(211,146,0,.07)}
.ci-block[data-state="placeholder"] .ci-state  {color:var(--slate-2)}
.ci-summary{font-family:var(--sans);font-size:12px;color:var(--charcoal);line-height:1.5;margin:4px 0 0}
.ci-data{font-family:var(--mono);font-size:11px;color:var(--ink);line-height:1.6;margin-top:6px}
.ci-list{list-style:none;padding:0;margin:6px 0 0;display:flex;flex-direction:column;gap:3px}
.ci-list li{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;color:var(--charcoal);letter-spacing:.02em}
.ci-list li .ci-li-iso{font-weight:500;color:var(--ink)}
.ci-list li .ci-li-val{color:var(--slate)}
.ci-meta{margin-top:8px;padding-top:14px;border-top:1px dashed var(--steel);font-family:var(--mono);font-size:10px;line-height:1.65;color:var(--slate);letter-spacing:.02em}
.ci-meta strong{color:var(--charcoal);font-weight:500}
/* Phase 3 step 4 slice 4 — paired Evidence Inspector. Each .ci-block-paired
   wraps two .ci-half columns (A primary / B secondary). On a 320px
   inspector column the two halves stack — at the desktop width the
   tighter sub-grid keeps both visible. Stronger / weaker badges in the
   half-header flag the relative-evidence comparison. */
.ci-block-paired .ci-pair{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px}
.ci-half{padding:7px 9px;border-radius:5px;border:1px solid var(--fog-2);background:#fcfcfd;display:flex;flex-direction:column;gap:4px}
.ci-half[data-side="a"]{border-left:3px solid var(--orange)}
.ci-half[data-side="b"]{border-left:3px solid var(--ink)}
.ci-half-h{display:flex;flex-direction:column;gap:3px;align-items:flex-start}
.ci-half-tag{font-family:var(--mono);font-size:9px;letter-spacing:.06em;color:var(--charcoal);font-weight:500;line-height:1.3}
.ci-half[data-side="a"] .ci-half-tag{color:var(--orange)}
.ci-half[data-side="b"] .ci-half-tag{color:var(--ink)}
.ci-half .ci-state{font-family:var(--mono);font-size:8px;letter-spacing:.06em;padding:1px 5px;border-radius:999px;border:1px solid var(--steel);align-self:flex-start}
.ci-half[data-state="authored"] .ci-state     {color:#1d6e4f;border-color:rgba(68,180,139,.5);background:rgba(68,180,139,.08)}
.ci-half[data-state="reference"] .ci-state    {color:#1f487a;border-color:rgba(37,99,168,.45);background:rgba(37,99,168,.06)}
.ci-half[data-state="tech-template"] .ci-state{color:#7a5400;border-color:rgba(211,146,0,.45);background:rgba(211,146,0,.07)}
.ci-half[data-state="placeholder"] .ci-state  {color:var(--slate-2)}
.ci-strength{font-family:var(--mono);font-size:8px;letter-spacing:.1em;text-transform:uppercase;padding:1px 5px;border-radius:3px;align-self:flex-start;margin-top:2px}
.ci-strength.stronger{background:rgba(68,180,139,.16);color:#1d6e4f;border:1px solid rgba(68,180,139,.55)}
.ci-strength.weaker{background:rgba(124,127,136,.10);color:var(--slate);border:1px solid var(--slate-2)}
.ci-half-empty{font-family:var(--mono);font-size:9px;color:var(--slate-2);font-style:italic;padding:4px 0}
.ci-half .ci-list{margin-top:4px}
.ci-half .ci-list li{font-size:9px;letter-spacing:.01em}
.ci-stance-paired{font-family:var(--mono);font-size:9px}
/* Mobile: paired halves stack so each slot reads top-to-bottom. */
@media (max-width:767px){
  .ci-block-paired .ci-pair{grid-template-columns:1fr}
}

/* Inspector block highlight when an evidence chip is clicked
   (mirrors .cr-pc-highlight on chart cards). 1500ms pulse. */
.ci-block-highlight{animation:ci-block-pulse 1.5s ease-out 1}
@keyframes ci-block-pulse{
  0%  {box-shadow:inset 3px 0 0 0 var(--orange);background:rgba(236,101,43,.16)}
  60% {box-shadow:inset 3px 0 0 0 transparent;background:rgba(236,101,43,.04)}
  100%{box-shadow:inset 3px 0 0 0 transparent;background:transparent}
}
.cr-fld{display:flex;flex-direction:column;gap:8px}
.cr-lbl{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--slate);text-transform:uppercase;display:flex;justify-content:space-between}
.cr-lbl .opt{color:var(--slate-2);text-transform:none;letter-spacing:.04em}
.cr-q{font-family:var(--serif);font-size:24px;font-weight:400;letter-spacing:-.02em;color:var(--ink);line-height:1.2}
.cr-q em{font-style:italic;color:var(--slate)}
.cr-row{display:flex;flex-wrap:wrap;gap:6px}
.cr-pill{padding:8px 14px;border-radius:99px;border:1px solid var(--steel);background:#fff;font-size:13px;color:var(--charcoal);cursor:pointer;letter-spacing:-.01em;display:inline-flex;align-items:center;gap:6px;transition:all .15s}
.cr-pill:hover{border-color:var(--ink)}
.cr-pill.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.cr-pill .dot{width:8px;height:8px;border-radius:50%}
.cr-input{padding:14px 16px;border:1px solid var(--steel);border-radius:8px;font-family:var(--serif);font-size:18px;font-weight:300;color:var(--ink);background:var(--fog);letter-spacing:-.01em;width:100%;font-style:italic}
.cr-input:focus{outline:none;border-color:var(--ink);background:#fff}
.cr-divider{height:1px;background:var(--fog-2);margin:8px 0}
.cr-actions{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:24px;border-top:1px solid var(--fog-2)}
.cr-back{font-family:var(--mono);font-size:11px;color:var(--slate);letter-spacing:.04em;cursor:pointer}

.cr-prev{padding:36px;background:linear-gradient(to bottom right, #fff, var(--fog));position:relative;display:flex;flex-direction:column;gap:18px}
.cr-prev-top{display:flex;justify-content:space-between;align-items:flex-start}
.cr-prev-tag{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--orange);text-transform:uppercase;display:flex;align-items:center;gap:8px}
.cr-prev-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--orange);animation:pulse 1.5s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.cr-prev-h{font-family:var(--serif);font-size:36px;line-height:1;letter-spacing:-.025em;font-weight:300;color:var(--ink)}
.cr-prev-h em{font-style:italic;color:var(--slate)}
.cr-prev-h .accent{color:var(--t-batteries)}
.cr-prev-deck{font-size:14px;color:var(--charcoal);line-height:1.55;font-weight:300}
.cr-prev-charts{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* Phase 3 step 4 slice 3 — paired draft view. Reveal when the panel
   carries data-paired="true" (set by renderComposePreview when COMPARE
   is enabled and both COMPARE.country + COMPARE.tech are picked). The
   single-mode chrome (.cr-prev-single = badge + headline + deck +
   metrics + charts) hides automatically; the paired pair-card grid
   takes its place. Each card is a compact summary: tag + badge +
   headline + deck + 3 metrics. Charts are NOT duplicated (per spec). */
.cr-prev-pair{display:none;grid-template-columns:1fr 1fr;gap:14px}
.cr-prev[data-paired="true"] .cr-prev-pair{display:grid}
.cr-prev[data-paired="true"] .cr-prev-single{display:none}
.cppc{display:flex;flex-direction:column;gap:8px;padding:16px 18px;border:1px solid var(--steel);border-radius:8px;background:#fff;min-height:180px}
.cppc[data-side="a"]{border-left:3px solid var(--orange)}
.cppc[data-side="b"]{border-left:3px solid var(--ink)}
.cppc-tag{font-family:var(--mono);font-size:9px;letter-spacing:.14em;color:var(--slate-2);text-transform:uppercase}
.cppc[data-side="a"] .cppc-tag{color:var(--orange)}
.cppc[data-side="b"] .cppc-tag{color:var(--ink)}
.cppc-badge{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--slate);text-transform:uppercase;display:flex;gap:8px;align-items:center;min-height:20px}
.cppc-h{font-family:var(--serif);font-size:18px;line-height:1.2;letter-spacing:-.015em;font-weight:300;color:var(--ink);margin:0}
.cppc-h em{font-style:italic;color:var(--slate)}
.cppc-h .accent{color:var(--ink)}
.cppc-deck{font-size:12px;color:var(--charcoal);line-height:1.5;font-weight:300;margin:0}
.cppc-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:auto}
.cppc-pm{padding:7px 8px;border-radius:5px;background:var(--fog);min-width:0}
.cppc-pm-l{font-family:var(--mono);font-size:8px;letter-spacing:.1em;color:var(--slate-2);text-transform:uppercase;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cppc-pm-v{font-family:var(--serif);font-size:14px;font-weight:400;letter-spacing:-.01em;color:var(--ink);line-height:1.1}
.cppc-pm-v em{font-style:italic;color:var(--orange)}
/* Mobile: stack the two cards vertically. Keep readable on 375px. */
@media (max-width:767px){
  .cr-prev-pair{grid-template-columns:1fr}
}
.cr-pc{border:1px solid var(--steel);border-radius:6px;padding:14px;background:#fff;height:120px;position:relative;display:flex;flex-direction:column;gap:6px;transition:border-color .2s}
.cr-pc-l{font-family:var(--mono);font-size:9px;letter-spacing:.14em;color:var(--slate);text-transform:uppercase}
.cr-pc-svg{flex:1;display:block;width:100%}

/* Phase 3 step 3a — Evidence-quality chips. Each draft.evidence slot
   renders as a small pill above the chart row, color-coded by state.
   Clicking a chip pulses its target chart so the user can trace a
   quality claim ("this story's partner data is tech-template") to
   the chart it actually drives. State colors are deliberately
   distinct so a glance-scan reads quality without parsing labels. */
.cr-prev-chips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 -4px;align-items:center}
.cr-prev-chips-l{font-family:var(--mono);font-size:9px;letter-spacing:.14em;color:var(--slate-2);text-transform:uppercase;margin-right:6px}
.cr-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;border:1px solid var(--steel);background:#fff;font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--charcoal);cursor:pointer;transition:transform .12s, box-shadow .12s, border-color .2s}
.cr-chip:hover{transform:translateY(-1px);box-shadow:0 1px 4px rgba(1,24,33,.08)}
.cr-chip-dot{width:6px;height:6px;border-radius:50%;background:var(--slate-2)}
.cr-chip em{font-style:normal;color:var(--slate);font-size:9px;letter-spacing:.06em}
.cr-chip-authored      {border-color:rgba(68,180,139,.55);background:rgba(68,180,139,.08);color:#1d6e4f}
.cr-chip-authored .cr-chip-dot     {background:#44b48b}
.cr-chip-authored em   {color:#1d6e4f;opacity:.8}
.cr-chip-reference     {border-color:rgba(37,99,168,.45);background:rgba(37,99,168,.06);color:#1f487a}
.cr-chip-reference .cr-chip-dot    {background:#2563a8}
.cr-chip-reference em  {color:#1f487a;opacity:.8}
.cr-chip-template      {border-color:rgba(211,146,0,.5);background:rgba(211,146,0,.07);color:#7a5400}
.cr-chip-template .cr-chip-dot     {background:#d39200}
.cr-chip-template em   {color:#7a5400;opacity:.8}
.cr-chip-placeholder   {border-color:var(--steel);background:#fff;color:var(--slate-2)}
.cr-chip-placeholder .cr-chip-dot  {background:var(--slate-2)}
.cr-chip-placeholder em{color:var(--slate-2);opacity:.7}

/* Click-target highlight on the matching chart card (.cr-pc). 1500ms
   pulse drawn from the chip's accent — green for authored chips,
   solar orange for everything else (reference / template / placeholder).
   --pulse-c is set inline by the click handler so the pulse color
   always matches the originating chip. */
.cr-pc-highlight{animation:cr-pc-pulse 1.5s ease-out 1;border-color:var(--pulse-c, #44b48b)}
@keyframes cr-pc-pulse{
  0%  {box-shadow:0 0 0 0 var(--pulse-c, rgba(68,180,139,.55))}
  60% {box-shadow:0 0 0 10px rgba(0,0,0,0)}
  100%{box-shadow:0 0 0 0 rgba(0,0,0,0)}
}
.cr-prev-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:6px 0 4px}
.cr-pm{border:1px solid var(--steel);border-radius:6px;padding:10px 12px;background:#fff}
.cr-pm-l{font-family:var(--mono);font-size:9px;letter-spacing:.14em;color:var(--slate);text-transform:uppercase;margin-bottom:4px}
.cr-pm-v{font-family:var(--serif);font-size:22px;font-weight:300;letter-spacing:-.02em;color:var(--ink);line-height:1}
.cr-pm-v em{font-style:italic;color:var(--orange)}
.cr-pm-s{font-family:var(--mono);font-size:9px;color:var(--slate-2);margin-top:4px}
.cr-prev-framing{font-family:var(--serif);font-style:italic;font-size:13px;color:var(--slate);line-height:1.4;margin-top:-4px;display:none}
.cr-prev-framing.active{display:block}
.cr-prev-framing::before{content:"§ ";color:var(--orange);font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.14em;margin-right:4px}
/* Step 8 slice 2 — draft_text region. Adjacency rule: subordinate
   commentary on the deterministic floor above. Carries cr-prev-single
   so it auto-hides in paired mode (Compare-Mode safety) — slice 4
   formalizes the cache-side discipline. */
.cr-prev-llm{margin:14px 0 0;padding:12px 14px;border:1px solid var(--steel);border-radius:8px;background:var(--fog);font-family:var(--sans);font-size:13px;color:var(--charcoal);line-height:1.5}
.cr-prev-llm-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate)}
.cr-prev-llm-tag{color:var(--orange)}
.cr-prev-llm-body{font-family:var(--sans);font-size:13px;line-height:1.5;color:var(--charcoal)}
.cr-prev-llm[data-state="idle"] .cr-prev-llm-body{color:var(--slate);font-style:italic}
.cr-prev-llm[data-state="loading"] .cr-prev-llm-body{color:var(--slate)}
.cr-prev-llm[data-state="loading"] .cr-prev-llm-body::after{content:"…"}
.cr-prev-llm[data-state="error"]{border-color:var(--orange)}
.cr-prev-llm[data-state="error"] .cr-prev-llm-body{color:var(--orange)}
.cr-prev-meta{font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--slate);display:flex;justify-content:space-between;padding-top:10px;border-top:1px solid var(--fog-2);margin-top:auto}

/* Footer */
.foot{padding:32px 56px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--slate);text-transform:uppercase;display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--steel)}
.foot a{color:var(--slate)}
.foot a:hover{color:var(--ink)}

/* misc */
.tooltip{position:fixed;background:var(--ink);color:#fff;padding:8px 12px;border-radius:6px;font-size:12px;pointer-events:none;opacity:0;transition:opacity .12s;z-index:100;max-width:240px;line-height:1.4}

/* In-production story state: visible at #/story/<n> for stories without
   STORY_CONTENT entries. Hide the chart sections (their data is India/Solar
   specific and would be misleading); also hide the §01 sec-head prose
   (which is hardcoded India copy). Keep hero, position glance numbers,
   pull-quote "in production" message, and what-next. */
body.story-pending .sec:has(#story-map),
body.story-pending .sec:has(#ladder),
body.story-pending .sec:has(#tl-svg),
body.story-pending .sec:has(#scatter-svg){ display:none }
body.story-pending .sec:has(#glance-row) .sec-head{display:none}
body.story-pending .pending-banner{display:flex}
.pending-banner{display:none;align-items:center;gap:14px;margin:24px 0 0;padding:14px 18px;border:1px dashed var(--orange);border-radius:8px;background:rgba(236,101,43,0.04);font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--charcoal)}
.pending-banner b{color:var(--orange);text-transform:uppercase;letter-spacing:.14em;font-weight:500}
.tooltip strong{display:block;font-family:var(--serif);font-size:14px;font-weight:400;margin-bottom:2px;letter-spacing:-.01em}
.tooltip .meta{font-family:var(--mono);font-size:10px;color:rgba(255,255,255,.6);letter-spacing:.04em;margin-top:2px}

@media (max-width:1100px){
  .land-grid{grid-template-columns:1fr}
  .land-left{border-right:none;border-bottom:1px solid var(--steel)}
  .scatter-frame{grid-template-columns:1fr}
  .map-frame{grid-template-columns:1fr}
  .next-grid{grid-template-columns:1fr 1fr}
  .pull-grid{grid-template-columns:1fr;gap:32px}
  .exp-body{grid-template-columns:1fr}
  .filters{padding-left:32px}
}

/* Phase 3 step 3b — Compose responsive breakpoints.
   Tablet (768-1023px): Brief spans full width on top, Draft + Evidence
   Inspector below as 2 columns. Brief loses its right border, gets
   a bottom border. Inspector keeps its left border (against Draft). */
@media (max-width:1023px) and (min-width:768px){
  .cr-grid{grid-template-columns:1fr 320px;grid-template-areas:"brief brief" "draft inspector"}
  .cr-form{grid-area:brief;border-right:none;border-bottom:1px solid var(--steel)}
  .cr-prev{grid-area:draft}
  .cr-inspector{grid-area:inspector;max-height:none}
}
/* Mobile (<768px): tabs reveal one panel at a time. cr-tabs flex
   appears above the cr-grid, panels stack as a single column with
   only [data-active="true"] visible. Inspector loses its left
   border (no adjacent panel). */
@media (max-width:767px){
  .cr-tabs{display:flex}
  .cr-grid{grid-template-columns:1fr}
  .cr-form,.cr-prev,.cr-inspector{display:none;border-right:none;border-left:none}
  .cr-form[data-active="true"],
  .cr-prev[data-active="true"],
  .cr-inspector[data-active="true"]{display:flex}
  .cr-form{border-bottom:none}
  .cr-prev-charts{grid-template-columns:1fr}
  .cr-inspector{max-height:none}
}