/* Issue 001 signal infographics. Scoped to .ig so nothing leaks into the site's styles.
   Colours and fonts are the site's own (navy #101a32, orange #e75435, blue #204bd5, Manrope, DM Sans).
   Motion: once on scroll-in plus two small loops; off under prefers-reduced-motion and the site's .motion-paused. */
.ig{--bg:#f5f5f1;--paper:#fff;--ink:#192135;--navy:#101a32;--muted:#606879;--line:#dedfdc;
  --accent:#e75435;--accent-soft:#f9d9d1;--bar:#e75435;--bar2:#204bd5;--track:#ecebe6;
  --tag-bg:#f6e5b8;--tag-ink:#5a4510;font-family:'DM Sans',Arial,sans-serif;font-size:16px;line-height:1.5;color:var(--ink);margin:28px 0}
.ig h3{font-family:Manrope,'DM Sans',Arial,sans-serif;font-weight:800;color:var(--navy);text-wrap:balance;margin:0}
.ig-pair{align-items:start;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin:28px 0}
.ig-pair>.ig{margin:0}
.ig h3{font-size:1.12rem;line-height:1.25;letter-spacing:-.02em}
.ig{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:22px 20px 16px;display:grid;gap:14px;min-width:0;align-content:start}
.ig-src{font-size:.8rem;color:var(--muted);border-top:1px solid var(--line);padding-top:10px}
.ig-src b{color:var(--ink);font-weight:600}
.ig .flag{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:var(--accent-soft);color:var(--ink);padding:2px 7px;border-radius:4px;margin-left:4px}
.ig .num{font-variant-numeric:tabular-nums}
.ig .hero{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 28px;background:none;color:inherit;min-height:0;overflow:visible;position:static}/* the site's own .hero (navy, 550px) must not apply inside a graphic */
.ig .big{font-family:Manrope,sans-serif;font-weight:800;font-size:clamp(2.4rem,9vw,4.2rem);line-height:1;letter-spacing:-.04em;color:var(--navy)}
.ig .ranks{display:flex;gap:10px;flex-wrap:wrap}
.ig .rank{display:grid;gap:2px;padding:8px 14px;border:1px solid var(--line);border-radius:8px;min-width:96px}
.ig .rank strong{font-family:Manrope,sans-serif;font-size:1.6rem;font-weight:800;color:var(--accent);line-height:1}
.ig .rank small{font-size:.78rem;color:var(--muted)}
.ig .wave{display:flex;align-items:flex-end;gap:3px;height:22px}
.ig .wave i{display:block;width:4px;border-radius:2px;background:var(--accent);opacity:.75;height:30%}
.ig-motion .ig .wave i{animation:ig-eq 1.6s ease-in-out infinite}
.ig .wave i:nth-child(2){animation-delay:-.3s}
.ig .wave i:nth-child(3){animation-delay:-.7s}
.ig .wave i:nth-child(4){animation-delay:-1.1s}
.ig .wave i:nth-child(5){animation-delay:-.5s}
@keyframes ig-eq{0%,100%{height:30%}50%{height:100%}}
.ig .bars{display:grid;gap:12px}
.ig .row{display:grid;grid-template-columns:minmax(0,11.5rem) 1fr;gap:6px 12px;align-items:center}
.ig .row .lab{font-size:.9rem;color:var(--ink);min-width:0}
.ig .track{position:relative;height:22px;border-radius:0 4px 4px 0;cursor:default}
.ig .track .fill{position:absolute;inset:0 auto 0 0;width:var(--w);background:var(--c,var(--bar));border-radius:0 4px 4px 0;transform-origin:left center}
.ig .track .val{position:absolute;top:50%;transform:translateY(-50%);left:calc(var(--w) + 8px);font-size:.85rem;font-weight:700;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.ig .track .val.in{left:auto;right:calc(100% - var(--w) + 8px);color:#fff}
.ig.anim .fill{transform:scaleX(0)}
.ig.anim.go .fill{transform:scaleX(1);transition:transform 1.1s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
.ig.anim .val{opacity:0}
.ig.anim.go .val{opacity:1;transition:opacity .4s ease calc(var(--d,0s) + .8s)}
.ig .track:hover .fill{filter:brightness(1.08)}
.ig .axisnote{font-size:.78rem;color:var(--muted)}
.ig .cols{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:end;height:220px;border-bottom:1px solid var(--line);padding-top:24px}
.ig .col{display:grid;grid-template-rows:auto 1fr;justify-items:center;height:100%;align-items:end}
.ig .col .cv{font-weight:700;font-size:.95rem;font-variant-numeric:tabular-nums;margin-bottom:6px}
.ig .col .cb{width:min(64px,70%);height:var(--h);background:var(--bar2);border-radius:4px 4px 0 0;transform-origin:bottom}
.ig.anim .col .cb{transform:scaleY(0)}
.ig.anim.go .col .cb{transform:scaleY(1);transition:transform 1.1s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
.ig .collabs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;text-align:center;font-size:.85rem;color:var(--muted)}
.ig .stat{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;font-size:.92rem;color:var(--muted)}
.ig .stat b{font-family:Manrope,sans-serif;font-size:1.25rem;color:var(--navy)}
.ig.turn .track{height:30px}
.ig.turn .row{grid-template-columns:minmax(0,7rem) 1fr}
.ig .x3{font-family:Manrope,sans-serif;font-weight:800;font-size:2rem;color:var(--accent);line-height:1}
.ig .cities{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px}
.ig .cities li{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;padding:8px 10px;border:1px solid var(--line);border-radius:6px;font-size:.92rem}
.ig .cities .n{font-family:Manrope,sans-serif;font-weight:800;color:var(--muted);width:1.4em;font-variant-numeric:tabular-nums}
.ig .cities li.bk{border-color:var(--accent)}
.ig .tag{margin-left:auto;font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:var(--tag-bg);color:var(--tag-ink);padding:2px 6px;border-radius:4px;display:inline-flex;align-items:center;gap:5px}
.ig .tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}
.ig-motion .ig .tag::before{animation:ig-pulse 2.4s ease-in-out infinite}
@keyframes ig-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(1.5)}}
.ig.anim .cities li{opacity:0;transform:translateY(6px)}
.ig.anim.go .cities li{opacity:1;transform:none;transition:opacity .5s ease var(--d,0s),transform .5s ease var(--d,0s)}
.ig .items{display:flex;flex-wrap:wrap;gap:8px}
.ig .items span{padding:6px 12px;border-radius:999px;border:1px solid var(--line);font-size:.9rem}
.ig .items span b{color:var(--accent);margin-right:6px;font-variant-numeric:tabular-nums}
.ig .ev{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ig .ev li{display:grid;grid-template-columns:22px 1fr;gap:8px;font-size:.92rem}
.ig .ev .ok{color:var(--bar2);font-weight:700}
.ig .ev .no{color:var(--accent);font-weight:700}
#ig-tip{position:fixed;pointer-events:none;background:#101a32;color:#f5f5f1;font-size:.8rem;padding:6px 9px;border-radius:6px;max-width:240px;z-index:9;opacity:0;transition:opacity .12s}
@media (max-width:520px){
.ig .row{grid-template-columns:1fr}
.ig.turn .row{grid-template-columns:1fr}
.ig .cols{height:190px}
}
/* 1B line chart: the line draws left to right, the area fades in, each point and its number appear in turn (once, on scroll-in) */
.ig .lc{width:100%;height:auto;display:block}.ig .lc text{font-family:'DM Sans',Arial,sans-serif;fill:var(--ink)}.ig .lc .lc-area{opacity:.10}
.ig.anim .lc-line{stroke-dasharray:1;stroke-dashoffset:1}.ig.anim .lc-area{opacity:0}.ig.anim .lc-pt{opacity:0}
.ig.anim.go .lc-line{stroke-dashoffset:0;transition:stroke-dashoffset 1.5s cubic-bezier(.4,0,.2,1)}
.ig.anim.go .lc-area{opacity:.10;transition:opacity .8s ease 1.1s}
.ig.anim.go .lc-pt{opacity:1;transition:opacity .45s ease var(--d,0s)}
/* 2B map of India: markers appear in rank order, then each marker's ring and city name pulse gently (loop only when motion is allowed) */
.ig .im{width:100%;height:auto;display:block}
.ig .im-land{fill:var(--track);stroke:#cfd0cb;stroke-width:1;stroke-linejoin:round}
.ig .im text{font-family:'DM Sans',Arial,sans-serif;font-size:15px;font-weight:700;fill:var(--ink)}
.ig .im .nm{paint-order:stroke;stroke:#fff;stroke-width:3px;stroke-linejoin:round;transform-box:fill-box;transform-origin:center}
.ig .im .im-n{fill:#fff;font-size:10px}
.ig .im-dot{fill:var(--navy)}.ig .mk.bk .im-dot{fill:var(--accent)}.ig .mk.bk .nm{fill:var(--accent)}
.ig .im-ring{fill:none;stroke:var(--navy);stroke-width:1.5;opacity:0;transform-box:fill-box;transform-origin:center}.ig .mk.bk .im-ring{stroke:var(--accent)}
.ig .im-key{margin:0;font-family:'DM Sans',Arial,sans-serif;font-size:.82rem;line-height:1.4;color:var(--muted);display:flex;align-items:center;gap:8px}.ig .im-key i{width:10px;height:10px;border-radius:50%;background:var(--accent);flex:none}
.ig.anim .im-land{opacity:0}.ig.anim .mk{opacity:0}
.ig.anim.go .im-land{opacity:1;transition:opacity .7s ease}
.ig.anim.go .mk{opacity:1;transition:opacity .4s ease var(--d,0s)}
.ig-motion .ig.go .im-ring{animation:ig-ring 2.8s ease-out infinite;animation-delay:calc(var(--d,0s) + 1s)}
.ig-motion .ig.go .nm{animation:ig-name 2.8s ease-in-out infinite;animation-delay:calc(var(--d,0s) + 1s)}
@keyframes ig-ring{0%{opacity:.55;transform:scale(1)}70%,100%{opacity:0;transform:scale(2.6)}}
@keyframes ig-name{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.07)}}
/* 2C icon tiles: tiles rise in rank order and their icons draw in (once, on scroll-in) */
.ig .tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(66px,1fr));gap:8px}
.ig .tile{border:1px solid var(--line);border-radius:10px;padding:12px 4px 10px;text-align:center;background:#fff}
.ig .tile:first-child{border-color:var(--accent);background:#fdf1ed}
.ig .tile svg{width:40px;height:40px;fill:none;stroke:var(--navy);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;display:block;margin:0 auto}
.ig .tile:first-child svg{stroke:var(--accent)}
.ig .tile .r{display:block;font-weight:800;color:var(--accent);font-size:.95rem;margin-top:6px}.ig .tile .w{display:block;font-size:.8rem;font-weight:700}
.ig.anim .tile{opacity:0;transform:translateY(10px)}.ig.anim .tile path{stroke-dasharray:1;stroke-dashoffset:1}
.ig.anim.go .tile{opacity:1;transform:none;transition:opacity .45s ease var(--d,0s),transform .45s ease var(--d,0s)}
.ig.anim.go .tile path{stroke-dashoffset:0;transition:stroke-dashoffset 1s ease calc(var(--d,0s) + .2s)}
@media (prefers-reduced-motion: reduce){
.ig.anim .lc-line,.ig.anim.go .lc-line{stroke-dashoffset:0!important;transition:none!important}.ig.anim .lc-area{opacity:.10!important;transition:none!important}.ig.anim .lc-pt{opacity:1!important;transition:none!important}
.ig.anim .fill,.ig.anim .col .cb{transform:none!important;transition:none!important}
.ig.anim .val,.ig.anim .cities li{opacity:1!important;transform:none!important;transition:none!important}
.ig .wave i,.ig .tag::before,.ig .im-ring,.ig .nm{animation:none!important}.ig.anim .im-land,.ig.anim .mk,.ig.anim .tile{opacity:1!important;transform:none!important;transition:none!important}.ig.anim .tile path{stroke-dashoffset:0!important;transition:none!important}
}
/* the site's own motion toggle */
.motion-paused .ig.anim .fill,.motion-paused .ig.anim .col .cb{transform:none!important;transition:none!important}
.motion-paused .ig.anim .val,.motion-paused .ig.anim .cities li{opacity:1!important;transform:none!important;transition:none!important}
.motion-paused .ig .wave i,.motion-paused .ig .tag::before{animation:none!important}

.motion-paused .ig.anim .lc-line{stroke-dashoffset:0!important;transition:none!important}.motion-paused .ig.anim .lc-area{opacity:.10!important;transition:none!important}.motion-paused .ig.anim .lc-pt{opacity:1!important;transition:none!important}
.motion-paused .ig .im-ring,.motion-paused .ig .nm{animation:none!important}.motion-paused .ig.anim .im-land,.motion-paused .ig.anim .mk{opacity:1!important;transition:none!important}
.motion-paused .ig.anim .tile{opacity:1!important;transform:none!important;transition:none!important}.motion-paused .ig.anim .tile path{stroke-dashoffset:0!important;transition:none!important}
@media (max-width:480px){.ig .tiles{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}.ig .tile{padding:10px 2px 8px}.ig .tile svg{width:30px;height:30px}.ig .tile .w{font-size:.68rem}}
/* Idea Lab territory graphics (T1A to T4I): decimal counters, dot grids, range bands, soft-ended bars, two-column charts */
.ig .big.sm{font-size:clamp(2rem,7vw,3rem)}
.ig .hero>div{min-width:0}
.ig .fill.soft{background:linear-gradient(90deg,var(--c,var(--bar)) 0%,var(--c,var(--bar)) 55%,rgba(231,84,53,.18) 100%)}
.ig .dotrow{display:flex;gap:18px 24px;flex-wrap:wrap;align-items:center}
.ig .dots{display:grid;grid-template-columns:repeat(10,14px);gap:6px;flex:none}
.ig .dots i{display:block;width:14px;height:14px;border-radius:50%;background:var(--track)}
.ig .dots i.on{background:var(--accent)}
.ig.anim .dots i.on{opacity:.12;transform:scale(.4)}
.ig.anim.go .dots i.on{opacity:1;transform:none;transition:opacity .35s ease calc(var(--i)*14ms),transform .35s ease calc(var(--i)*14ms)}
.ig .dotrow>div:last-child{flex:1 1 180px;min-width:0}
.ig .rg{display:grid;gap:6px}
.ig .rg-track{position:relative;height:22px;background:var(--track);border-radius:4px}
.ig .rg-band{position:absolute;top:0;bottom:0;left:var(--l);width:var(--w);min-width:6px;background:var(--bar2);border-radius:4px;transform-origin:left center}
.ig .rg-ends{display:flex;justify-content:space-between;font-size:.76rem;color:var(--muted);font-variant-numeric:tabular-nums}
.ig .rg-lab{font-size:.9rem;font-weight:700}
.ig.anim .rg-band{transform:scaleX(0)}
.ig.anim.go .rg-band{transform:scaleX(1);transition:transform 1.1s cubic-bezier(.2,.7,.2,1) .2s}
.ig .cols.two{grid-template-columns:repeat(2,1fr)}
.ig .collabs.two{grid-template-columns:repeat(2,1fr)}
.ig .col .cb{background:var(--c,var(--bar2))}
@media (prefers-reduced-motion: reduce){.ig.anim .dots i.on{opacity:1!important;transform:none!important;transition:none!important}.ig.anim .rg-band{transform:none!important;transition:none!important}}
.motion-paused .ig.anim .dots i.on{opacity:1!important;transform:none!important;transition:none!important}.motion-paused .ig.anim .rg-band{transform:none!important;transition:none!important}
/* label placed at the left, inside the solid part of a bar that runs nearly the full width (T1C) */
.ig .track .val.il{left:10px;right:auto;color:#fff}
