/* HK Ads Desk - Results by state: the 3D map of India (geo3d.js). Every class here starts with g3-.
   --g3-floor = the stage (and the 3D floor) · --g3-land = a state with no delivery on the flat map · --g3-land3d = the same, as the 3D slab's own colour */
.g3{--g3-h:520px;--g3-side:430px;--g3-floor:#07090d;--g3-land:#1c222c;--g3-land3d:#272e3a;--g3-ease:var(--ease,cubic-bezier(.16,1,.3,1));
  position:relative;display:grid;gap:14px;min-width:0;color:var(--text);font-variant-numeric:tabular-nums}
.g3[data-size="m"]{--g3-h:440px;--g3-side:300px}
.g3[data-size="c"]{--g3-h:360px;--g3-side:284px;gap:12px}
.g3[data-size="s"]{--g3-h:300px;gap:12px}
/* cost per result, the Desk's own rule: one colour variable for chips, dots, keys, figures and the flat map */
.g3 [data-t="good"]{--c:var(--good)}.g3 [data-t="warn"]{--c:var(--warn)}.g3 [data-t="bad"]{--c:var(--bad)}
.g3 [data-t="nores"]{--c:color-mix(in srgb,var(--bad) 48%,var(--g3-floor))}
.g3 [data-t="boost"]{--c:color-mix(in srgb,var(--accent) 44%,var(--g3-floor))}
.g3 [data-t="none"]{--c:color-mix(in srgb,var(--idle) 62%,var(--g3-floor))}

/* a figure: small rupee sign + digits that roll (FX.setNum) */
.g3-f{display:inline-block;white-space:nowrap;line-height:1}
.g3-n{display:inline-block;font-weight:inherit;line-height:1}
.g3-cur{font-style:normal;font-family:"Segoe UI",system-ui,-apple-system,sans-serif;font-size:.76em;font-weight:400;opacity:.7;margin-right:.07em;vertical-align:.1em;letter-spacing:0}
.g3-f[data-cur="0"]>.g3-cur{display:none}

/* ---------- header: caption, summary line, metric switch ---------- */
.g3-head{display:flex;align-items:flex-end;justify-content:space-between;gap:10px 20px;flex-wrap:wrap}
.g3-ttl{min-width:0;flex:1 1 300px;display:grid;gap:5px;clip-path:inset(-14px -60px -14px 0)}      /* only the left edge cuts (see .g3-s) */
.g3-cap{font:500 12.5px/1.3 var(--sans);color:var(--soft);min-height:1.3em}
.g3-sum{margin:0 0 0 -1.25em;min-height:1.5em;display:flex;flex-wrap:wrap;font-size:13.5px;line-height:1.5;color:var(--muted);transition:opacity .3s}
/* every part carries its dot on the left; the first dot of each line falls outside the header and is cut off */
.g3-s{position:relative;padding-left:1.25em;white-space:nowrap}
.g3-s[hidden]{display:none}
.g3-s::before{content:"·";position:absolute;left:.5em;color:var(--dim)}
.g3-s>.g3-f{color:var(--text);font-weight:500}
.g3-s>.g3-f[data-t]{color:var(--c)}
.g3-s em{font-style:normal;color:var(--soft)}
.g3-seg{position:relative;flex:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:3px;border-radius:11px;background:rgba(255,255,255,.03);box-shadow:0 0 0 1px var(--hair)}
.g3-seg button{position:relative;z-index:1;border:0;background:transparent;color:var(--muted);font-weight:500;font-size:13px;line-height:1.3;padding:6px 13px;border-radius:8px;cursor:pointer;white-space:nowrap;transition:color .15s}
.g3-seg button:hover,.g3-seg button[aria-pressed="true"]{color:var(--text)}
.g3-seg button:focus-visible{outline:0;box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 60%,transparent)}
.g3-pill{position:absolute;left:3px;top:3px;bottom:3px;width:calc((100% - 6px) / 3);border-radius:8px;pointer-events:none;background:rgba(255,255,255,.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 0 1px rgba(255,255,255,.12),0 6px 18px -8px color-mix(in srgb,var(--accent2,var(--accent)) 60%,transparent);
  transform:translateX(calc(var(--g3-m,0) * 100%));transition:transform .42s cubic-bezier(.2,.9,.15,1.15)}
.g3[data-size="s"] .g3-seg{flex:1 1 100%}
.g3[data-size="s"] .g3-seg button{padding:7px 3px;font-size:12.5px;overflow:hidden;text-overflow:ellipsis}
.g3[data-size="s"] .g3-sum{font-size:13px}

/* ---------- map + list ---------- */
.g3-body{display:grid;gap:16px;min-width:0}
.g3[data-lay="row"]>.g3-body{grid-template-columns:minmax(0,1fr) var(--g3-side);align-items:stretch}
.g3-main{display:flex;flex-direction:column;gap:9px;min-width:0}
.g3-stage{position:relative;flex:1 1 auto;min-height:var(--g3-h);border-radius:var(--r,14px);overflow:hidden;isolation:isolate;outline:0;
  background:radial-gradient(ellipse at 50% 58%,color-mix(in srgb,var(--accent) 5%,transparent),transparent 62%),var(--g3-floor);
  box-shadow:0 0 0 1px var(--hair);touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.g3[data-mode="gl"] .g3-stage{cursor:grab}
/* soft dark corners + the hairline, above the picture */
.g3-stage::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;
  background:radial-gradient(ellipse at 50% 46%,transparent 56%,rgba(0,0,0,.36) 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.045)}
.g3-stage:focus-visible{box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 60%,transparent),0 0 0 4px color-mix(in srgb,var(--accent) 14%,transparent)}
.g3-gl,.g3-flat,.g3-svg{position:absolute;inset:0;width:100%;height:100%;display:block}

/* the flat map (no WebGL): same outlines, same colours; the metric shows as how strong the colour is */
.g3-flat{background:
  linear-gradient(color-mix(in srgb,var(--accent) 3.5%,transparent) 1px,transparent 1px) 50% 50%/30px 30px,
  linear-gradient(90deg,color-mix(in srgb,var(--accent) 3.5%,transparent) 1px,transparent 1px) 50% 50%/30px 30px}
.g3-st{fill:color-mix(in srgb,var(--c) var(--g3-a,100%),var(--g3-land));stroke:color-mix(in srgb,var(--c) 55%,var(--g3-floor));stroke-width:1;vector-effect:non-scaling-stroke;stroke-linejoin:round;cursor:pointer;
  transition:fill .7s var(--g3-ease),opacity .25s,stroke .2s}
.g3-st[data-t="none"]{fill:var(--g3-land);stroke:color-mix(in srgb,var(--idle) 55%,var(--g3-floor))}
.g3-pin{stroke:var(--g3-floor);stroke-width:1.5;fill:var(--c)}
.g3-pin[data-t="none"]{fill:color-mix(in srgb,var(--idle) 70%,var(--g3-floor));stroke:var(--g3-floor)}
.g3-flat[data-pick="1"] .g3-st:not([data-sel="1"]){opacity:.4}
.g3-st[data-hov="1"]{stroke:var(--text);stroke-width:1.5}
.g3-st[data-sel="1"]{stroke:var(--accent);stroke-width:2}

/* names on the stage: they follow the map, in whole pixels */
.g3-labels{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.g3-chip{position:absolute;left:0;top:0;display:flex;align-items:center;gap:6px;padding:4px 8px 4px 7px;border-radius:7px;white-space:nowrap;font:500 11px/1 var(--sans);color:var(--text);
  background:color-mix(in srgb,var(--g3-floor) 82%,transparent);box-shadow:inset 0 0 0 1px var(--hair2),0 6px 14px -8px #000;transition:opacity .25s;will-change:transform}
.g3-chip::before{content:"";flex:none;width:5px;height:5px;border-radius:50%;background:var(--c)}
.g3-chip::after{content:"";position:absolute;left:50%;top:100%;width:1px;height:8px;background:linear-gradient(var(--hair3),transparent)}
.g3-chip b{font-weight:500}
.g3-chip .g3-f{font-family:var(--mono);font-size:10.5px;color:var(--soft)}
.g3-chip[data-sel="1"]{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 65%,transparent),0 0 18px -6px var(--accent)}

/* quiet states: reading / nothing yet */
.g3-note{position:absolute;left:50%;bottom:14px;z-index:3;transform:translateX(-50%);display:none;align-items:center;gap:8px;width:max-content;max-width:calc(100% - 24px);padding:7px 12px;border-radius:9px;
  font-size:12.5px;line-height:1.35;color:var(--soft);background:color-mix(in srgb,var(--bg) 86%,transparent);box-shadow:inset 0 0 0 1px var(--hair2),0 10px 24px -12px #000;pointer-events:none}
.g3[data-state="wait"] .g3-note,.g3[data-state="load"] .g3-note,.g3[data-state="empty"] .g3-note,.g3[data-state="error"] .g3-note{display:flex}
.g3-note i{display:none;flex:none;width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent);animation:g3-pulse 1.3s ease-in-out infinite}
.g3[data-state="wait"] .g3-note i,.g3[data-state="load"] .g3-note i{display:block}
.g3-scan{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;display:none}
/* the 3D map has its own band of light; this one is for the flat map and for the moment before either exists */
.g3[data-mode="wait"] .g3-scan,.g3[data-mode="flat"][data-state="wait"] .g3-scan,.g3[data-mode="flat"][data-state="load"] .g3-scan{display:block}
.g3-scan::before{content:"";position:absolute;top:-10%;bottom:-10%;left:-45%;width:45%;transform:skewX(-12deg);
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 9%,transparent) 50%,transparent);animation:g3-scan 2s var(--g3-ease) infinite}
.g3-hint{position:absolute;right:12px;bottom:11px;z-index:2;font:400 10.5px/1 var(--mono);letter-spacing:.03em;color:var(--dim);pointer-events:none;opacity:0;transition:opacity .5s}
.g3[data-mode="gl"][data-state="ok"]:not([data-turned]) .g3-hint{opacity:1}
@keyframes g3-pulse{50%{opacity:.3}}
@keyframes g3-scan{to{transform:translateX(330%) skewX(-12deg)}}
@keyframes g3-shim{to{background-position:-200% 0}}
@keyframes g3-in{from{opacity:0}}

/* under the map: what the colours and the height mean */
.g3-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:5px 16px;font:400 11px/1.4 var(--mono);letter-spacing:-.01em;color:var(--muted)}
.g3-keys{display:flex;flex-wrap:wrap;gap:4px 13px}
.g3-key{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.g3-key i{flex:none;width:7px;height:7px;border-radius:2px;background:var(--c)}
.g3-hnote{color:var(--dim);white-space:nowrap}
.g3-src{margin:0;font-size:10.5px;line-height:1.4;color:var(--dim)}
.g3-live{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------- the ranked list ---------- */
.g3-side{min-width:0;display:flex;flex-direction:column}
.g3-lh,.g3-row{display:grid;grid-template-columns:18px minmax(0,1fr) 54px 80px 66px;column-gap:10px;align-items:center}
.g3-lh{padding:0 12px 9px;font:600 10.5px/1.25 var(--sans);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.g3-lt{grid-column:1/3;white-space:nowrap}
.g3-lh .g3-c1,.g3-lh .g3-c2,.g3-lh .g3-c3{text-align:right;white-space:nowrap;color:var(--dim)}
.g3-list{list-style:none;margin:0;padding:0;display:grid;gap:3px}
.g3-list li{min-width:0;transition:transform .5s var(--g3-ease)}
.g3-list li[data-in="1"]{animation:g3-in .4s var(--g3-ease) both}
/* the selected state, from further down the ranking: a dashed line above it, drawn in the gap so no row moves */
.g3-list li[data-far="1"]{position:relative}
.g3-list li[data-far="1"]::before{content:"";position:absolute;left:10px;right:10px;top:-2px;border-top:1px dashed var(--hair3)}
.g3-list li[data-far="1"] .g3-rk{color:var(--muted)}
.g3-row{position:relative;width:100%;height:36px;padding:0 12px;border:0;border-radius:9px;background:transparent;color:var(--text);font-size:13px;text-align:left;cursor:pointer;overflow:hidden;
  box-shadow:inset 0 0 0 1px transparent;transition:box-shadow .15s,background .15s}
/* the bar: this state's share of the metric, behind the row */
.g3-row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--g3-p,0%);border-radius:inherit;pointer-events:none;
  background:color-mix(in srgb,var(--accent) 7.5%,transparent);transition:width .7s var(--g3-ease)}
.g3-row>*{position:relative;min-width:0}
.g3-row:hover,.g3-row[data-hov="1"]{background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px var(--hair2)}
.g3-row:focus-visible{outline:0;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 60%,transparent)}
.g3-row[aria-pressed="true"]{background:color-mix(in srgb,var(--accent) 7%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 48%,transparent)}
.g3-rk{font:400 11px/1 var(--mono);color:var(--dim)}
.g3-nm{display:flex;align-items:center;gap:8px;white-space:nowrap;overflow:hidden}
.g3-nm>span{overflow:hidden;text-overflow:ellipsis}
.g3-dot{flex:none;width:6px;height:6px;border-radius:50%;background:var(--c)}
.g3-row .g3-f{justify-self:end;font-size:12.5px;color:var(--muted)}
.g3-row .g3-c3{color:var(--c)}
.g3-row .g3-c3[data-cur="0"]{color:var(--dim)}
.g3-row[data-few="1"] .g3-c3{opacity:.55}      /* a cost made of too few results to judge */
/* the column the height shows is the bright one */
.g3[data-metric="results"] .g3-row .g3-c1,.g3[data-metric="spend"] .g3-row .g3-c2{color:var(--text);font-size:13.5px}
.g3[data-metric="cpr"] .g3-row .g3-c3{font-size:13.5px}
.g3[data-metric="results"] .g3-lh .g3-c1,.g3[data-metric="spend"] .g3-lh .g3-c2,.g3[data-metric="cpr"] .g3-lh .g3-c3{color:var(--soft)}
/* narrow column (side panel, tablet): rank · state · the metric · cost per result */
.g3[data-list="slim"] .g3-lh,.g3[data-list="slim"] .g3-row{grid-template-columns:15px minmax(0,1fr) auto 58px;column-gap:8px}
.g3[data-list="slim"][data-metric="spend"] .g3-c1,.g3[data-list="slim"]:not([data-metric="spend"]) .g3-c2{display:none}
.g3[data-list="slim"] .g3-row{height:32px;padding:0 9px;font-size:12.5px}
.g3[data-list="slim"] .g3-lh{padding:0 9px 8px}
.g3[data-list="slim"] .g3-list{gap:2px}
.g3[data-size="s"][data-list="full"] .g3-lh,.g3[data-size="s"][data-list="full"] .g3-row{grid-template-columns:15px minmax(0,1fr) 46px 70px 60px;column-gap:8px}
.g3[data-size="s"] .g3-row,.g3[data-size="s"] .g3-lh{padding-left:10px;padding-right:10px}
.g3-other{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:7px;padding:10px 12px 0;border-top:1px solid var(--hair);font-size:12.5px;color:var(--muted);outline:0}
.g3-other[hidden],.g3-none[hidden]{display:none}
.g3-other:focus-visible .g3-on{color:var(--text)}
.g3-on{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.g3-ov{flex:none;white-space:nowrap;color:var(--soft)}
.g3-sep{font-style:normal;margin:0 .45em;color:var(--dim)}
.g3[data-list="slim"] .g3-other,.g3[data-size="s"] .g3-other{padding-left:9px;padding-right:9px}
.g3-none{margin:0;padding:8px 12px;font-size:12.5px;line-height:1.5;color:var(--dim)}
.g3-skel{height:32px;border-radius:9px;opacity:.7;background:linear-gradient(90deg,var(--s1) 0%,var(--s3) 50%,var(--s1) 100%) 0 0/200% 100%;animation:g3-shim 1.4s linear infinite}
/* reading again: the last numbers stay, a step back */
.g3[data-state="load"] .g3-list,.g3[data-state="load"] .g3-sum,.g3[data-state="load"] .g3-other{opacity:.5}
.g3-list,.g3-other{transition:opacity .3s}

/* the shared tooltip (UI.tip) carries these lines */
#tip .g3-tl{display:block}
#tip .g3-tl em{color:var(--text)}
#tip .g3-c[data-t="good"]{color:var(--good)}#tip .g3-c[data-t="warn"]{color:var(--warn)}#tip .g3-c[data-t="bad"]{color:var(--bad)}

@media (prefers-reduced-motion:reduce){.g3 *,.g3 *::before,.g3 *::after{animation:none!important;transition:none!important}}