/* HYDRON — India Water Map (v5 tokens, self-contained) */
:root{
  --ink:#213A52;--ink-soft:rgba(33,58,82,.68);
  --indigo:#3A3480;--violet:#6C63C7;--violet-soft:#EDEBFA;--lav:#C9C3EE;
  --paper:#FCFBF9;--mist:#F3F6FA;--sky:#EAF4FB;--sky-2:#D9EBF6;--sky-3:#C4DFF0;
  --ocean:#2E6E93;--aqua:#7FB8D9;--lime:#B8D96E;--gold:#C9A24B;
  --line:rgba(33,58,82,.12);--line-strong:rgba(33,58,82,.2);
  --glass-bg:rgba(255,255,255,.55);--glass-brd:rgba(255,255,255,.75);
  --serif:'IvyPresto Display','Playfair Display',Georgia,serif;
  --sans:'Manrope','Segoe UI',sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);--rad:22px;
  /* rating colors */
  --r-ideal:#5CBEA6;--r-verylow:#7FB8D9;--r-acceptable:#C9A24B;--r-high:#D0854E;--r-veryhigh:#C05B4A;
}

.map-grid{display:grid;grid-template-columns:minmax(360px,1fr) minmax(420px,1.08fr);gap:clamp(28px,4vw,64px);align-items:center;margin-top:22px}

/* ---- map stage ---- */
.map-stage{position:relative;margin:0}
#indiaMap{width:100%;max-height:min(82svh,570px);height:auto;display:block;margin:0 auto;overflow:visible}
.map-note{margin-top:10px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:rgba(33,58,82,.35);text-align:center}
.state{fill:#b9cfe8;stroke:rgba(255,255,255,.95);stroke-width:1.2;stroke-linejoin:round;transition:fill .25s var(--ease),stroke .25s var(--ease),filter .25s var(--ease);outline:none}
.state[data-i]:not([data-i="-1"]){cursor:pointer}
.state:hover,.state:focus-visible,.state.active{fill:#fff;stroke:var(--ink);stroke-width:1.45;filter:drop-shadow(0 9px 14px rgba(33,58,82,.22))}
.city-dot{cursor:pointer;outline:none}
.city-dot .core{fill:var(--indigo);transition:fill .25s var(--ease)}
.city-dot .ring{fill:none;stroke:#fff;stroke-width:2.4}
.city-dot .pulse{fill:none;stroke:var(--violet);stroke-width:1.5;opacity:0;transform-origin:center;transform-box:fill-box}
.city-dot .p1{animation:mapPulse 2.8s ease-out infinite}
.city-dot .p2{animation:mapPulse 2.8s ease-out 1.4s infinite}
.city-dot:hover .core,.city-dot:focus-visible .core,.city-dot.active .core{fill:var(--lime)}
@keyframes mapPulse{0%{opacity:.5;transform:scale(1)}100%{opacity:0;transform:scale(3.1)}}

/* ---- data panel ---- */
.map-card{background:var(--glass-bg);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid var(--glass-brd);border-radius:var(--rad);box-shadow:0 22px 54px rgba(46,110,147,.18);padding:clamp(18px,2.2vw,26px)}
.map-card.swap{animation:cardSwap .34s var(--ease)}
@keyframes cardSwap{0%{opacity:.72;transform:translateY(5px)}100%{opacity:1;transform:translateY(0)}}
.mc-top{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:12px}
.mc-city{font-family:var(--serif);font-size:clamp(22px,2.4vw,30px);line-height:1.05}
.mc-state{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ocean);font-weight:700;margin-top:4px}
.mc-badge{flex:none;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:#fff;border-radius:100px;padding:8px 15px;background:var(--r-acceptable);transition:background .5s var(--ease)}
.mc-badge.r-ideal{background:var(--r-ideal)}
.mc-badge.r-verylow{background:var(--r-verylow)}
.mc-badge.r-acceptable{background:var(--r-acceptable)}
.mc-badge.r-high{background:var(--r-high)}
.mc-badge.r-veryhigh{background:var(--r-veryhigh)}
.mc-rows{display:flex;flex-direction:column}
.mc-row{display:flex;justify-content:space-between;gap:16px;padding:7px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.mc-row .k{color:var(--ink-soft)}
.mc-row .v{font-weight:700;text-align:right}
.mc-row .v b{font-size:17px}
/* TDS meter */
.mc-meter{position:relative;height:7px;border-radius:8px;margin:14px 0 20px;background:linear-gradient(90deg,var(--r-verylow) 0 6%,var(--r-ideal) 6% 19%,var(--r-acceptable) 19% 37%,var(--r-high) 37% 62%,var(--r-veryhigh) 62% 100%)}
.mc-meter i{position:absolute;top:50%;width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid var(--ink);transform:translate(-50%,-50%);transition:left .42s var(--ease);left:30%}
.mm-ticks{position:absolute;top:12px;left:0;right:0;display:flex;justify-content:space-between;font-size:9.5px;color:rgba(33,58,82,.45);font-weight:700;letter-spacing:.04em}
.mc-block{margin-bottom:10px}
.mc-block .k{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--ink-soft);margin-bottom:4px}
.mc-block p{font-size:12.5px;color:var(--ink-soft);line-height:1.5}
/* fact / alert */
.mc-fact{display:flex;gap:10px;align-items:flex-start;background:var(--violet-soft);border:1px solid var(--lav);border-radius:12px;padding:10px 13px;margin:12px 0 14px}
.mc-fact svg{width:18px;height:18px;stroke:var(--violet);fill:none;stroke-width:1.7;flex:none;margin-top:2px}
.mc-fact p{font-size:12.5px;color:var(--ink);line-height:1.5}
.mc-fact.pop{animation:factPop .55s var(--ease)}
@keyframes factPop{0%{opacity:0;transform:translateY(8px)}100%{opacity:1;transform:none}}
.mc-cta{display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:700;color:var(--ocean);text-decoration:none}
.mc-cta .arr{transition:transform .35s var(--ease)}
.mc-cta:hover{color:var(--indigo)}
.mc-cta:hover .arr{transform:translateX(4px)}

/* ---- city chips (mobile + a11y) ---- */
.city-chips{display:flex;gap:8px;overflow-x:auto;padding:16px 0 4px;scrollbar-width:thin}
.chip{flex:none;font-size:12.5px;font-weight:700;border:1px solid var(--line-strong);border-radius:100px;padding:8px 15px;background:rgba(255,255,255,.6);cursor:pointer;transition:all .3s var(--ease);color:var(--ink);font-family:var(--sans)}
.chip:hover{border-color:var(--ocean);color:var(--ocean)}
.chip.active{background:var(--ocean);border-color:var(--ocean);color:#fff}
.map-legal{font-size:11px;color:rgba(33,58,82,.5);margin-top:10px;max-width:720px;line-height:1.5}

@media(max-width:900px){
  .mapsec{min-height:0;display:block}
  .map-grid{grid-template-columns:1fr;gap:20px}
  #indiaMap{max-height:52svh}
  .mc-city{font-size:22px}
}
@media (prefers-reduced-motion:reduce){
  .map-card.swap,.mc-fact.pop,.city-dot .pulse{animation:none}
  .mc-meter i{transition:none}
}