/* ════════════════════════════════════════════════════════════
   Indian Jobs Map — Material 3 Expressive, saffron seed colour
   ════════════════════════════════════════════════════════════ */

:root {
  /* ── M3 tonal palette, seed #D4580A (saffron) ── */
  --md-primary:              #8F4C00;
  --md-on-primary:           #FFFFFF;
  --md-primary-container:    #FFDCC2;
  --md-on-primary-container: #2E1500;

  --md-secondary:            #745944;
  --md-secondary-container:  #FFDCC2;
  --md-on-secondary-container:#2B160A;

  --md-tertiary:             #5C6237;
  --md-tertiary-container:   #E1E7B1;

  --md-surface:              #FFF8F4;
  --md-surface-dim:          #E8D7CB;
  --md-surface-lowest:       #FFFFFF;
  --md-surface-low:          #FFF1E7;
  --md-surface-container:    #FCEBDF;
  --md-surface-high:         #F6E5D9;
  --md-surface-highest:      #F0DFD3;

  --md-on-surface:           #221A12;
  --md-on-surface-var:       #52443A;
  --md-outline:              #847468;
  --md-outline-var:          #D7C3B4;

  --md-error:                #BA1A1A;

  /* ── accent (vivid saffron, expressive pop) ── */
  --saffron:       #D4580A;
  --saffron-vivid: #FF8A3C;

  /* ── shape scale (M3 Expressive: big, varied) ── */
  --shape-xs:   8px;
  --shape-sm:   12px;
  --shape-md:   16px;
  --shape-lg:   24px;
  --shape-xl:   28px;
  --shape-full: 999px;

  /* ── motion (expressive spring) ── */
  --spring:   cubic-bezier(.34, 1.36, .64, 1);
  --standard: cubic-bezier(.2, 0, 0, 1);

  /* ── elevation ── */
  --elev-1: 0 1px 2px rgba(34,26,18,.08), 0 1px 3px 1px rgba(34,26,18,.06);
  --elev-2: 0 1px 2px rgba(34,26,18,.10), 0 2px 6px 2px rgba(34,26,18,.08);
  --elev-3: 0 4px 8px 3px rgba(34,26,18,.10), 0 1px 3px rgba(34,26,18,.12);
  --elev-4: 0 6px 10px 4px rgba(34,26,18,.12), 0 2px 3px rgba(34,26,18,.14);

  --font: 'Poppins', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  font-family: var(--font);
  font-size: 13px;
  color: var(--md-on-surface);
  background: var(--md-surface);
  overflow: hidden;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--md-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
strong { font-weight: 600; }
em { font-style: italic; color: var(--md-on-surface-var); }

body { display: flex; flex-direction: column; }

button { font-family: var(--font); }

/* ════════════════════════════════════════════════
   HEADER — M3 top app bar on surface-container
   ════════════════════════════════════════════════ */
#top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  background: var(--md-surface-low);
  flex-shrink: 0;
  gap: 12px;
  flex-wrap: wrap;
  z-index: 10;
}

#logo-wrap { display: flex; align-items: center; }

#logo {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1;
  color: var(--saffron);
}

#hdr-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
#hdr-stat {
  font-size: 11px; font-weight: 400;
  color: var(--md-on-surface-var);
  white-space: nowrap;
  background: var(--md-surface-container);
  border-radius: var(--shape-full);
  padding: 6px 14px;
}
#hdr-workers, #hdr-occ { font-weight: 700; color: var(--md-on-surface); }

/* M3 outlined button */
.hdr-link {
  font-size: 11.5px; font-weight: 600;
  color: var(--md-primary);
  border: 1px solid var(--md-outline-var);
  border-radius: var(--shape-full);
  padding: 7px 16px;
  text-decoration: none;
  transition: all .25s var(--spring);
  white-space: nowrap;
  background: transparent;
}
.hdr-link:hover {
  background: var(--md-primary-container);
  border-color: transparent;
  color: var(--md-on-primary-container);
  text-decoration: none;
  transform: scale(1.04);
}

/* ════════════════════════════════════════════════
   DESCRIPTION — expressive hero card
   ════════════════════════════════════════════════ */
#desc {
  padding: 12px 24px 0;
  flex-shrink: 0;
  max-width: 1020px;
}
#desc-p1 {
  font-size: 13px; font-weight: 400;
  color: var(--md-on-surface);
  line-height: 1.7;
  margin-bottom: 5px;
}
#desc-p2 {
  font-size: 11.5px; font-weight: 400;
  color: var(--md-on-surface-var);
  line-height: 1.65;
  margin-bottom: 8px;
}
#desc-caveat {
  font-size: 11px; font-weight: 400;
  color: var(--md-on-secondary-container);
  line-height: 1.65;
  padding: 12px 16px;
  background: var(--md-primary-container);
  border-radius: var(--shape-md);
  margin-bottom: 0;
}
#desc-caveat strong { color: var(--md-primary); font-weight: 700; }

/* ════════════════════════════════════════════════
   CONTROLS — M3 connected segmented chips
   ════════════════════════════════════════════════ */
#controls {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 24px 4px;
  flex-shrink: 0;
  flex-wrap: wrap;
}
#ctrl-lbl {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.2px;
  color: var(--md-on-surface-var); flex-shrink: 0;
}
#layer-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* M3 filter chip → selected becomes filled tonal */
.lb {
  font-size: 11.5px; font-weight: 500;
  padding: 8px 16px;
  border-radius: var(--shape-full);
  border: 1px solid var(--md-outline-var);
  background: var(--md-surface-lowest);
  color: var(--md-on-surface-var);
  cursor: pointer;
  transition: all .3s var(--spring);
  white-space: nowrap;
}
.lb:hover {
  background: var(--md-surface-container);
  border-color: var(--md-outline);
  transform: translateY(-1px);
}
.lb:active { transform: scale(.96); }
.lb.active {
  background: var(--saffron);
  border-color: transparent;
  color: #FFFFFF;
  font-weight: 700;
  box-shadow: var(--elev-2);
  transform: scale(1.05);
}

/* ════════════════════════════════════════════════
   LEGEND — pill bar under chips
   ════════════════════════════════════════════════ */
#legend-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px 24px 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
}
#legend-inner {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
  background: var(--md-surface-container);
  border-radius: var(--shape-full);
  padding: 6px 14px;
}
#legend-grad  { width: 130px; height: 10px; border-radius: var(--shape-full); }
#legend-low, #legend-high {
  font-size: 9.5px; font-weight: 500;
  color: var(--md-on-surface-var); white-space: nowrap;
}

#legend-swatches { display: flex; gap: 6px; flex-wrap: wrap; }
.ls-item {
  display: flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 500;
  color: var(--md-on-surface-var);
  background: var(--md-surface-container);
  border-radius: var(--shape-full);
  padding: 5px 12px;
}
.ls-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }

#credits {
  margin-left: auto;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
#credits span {
  font-size: 10px; font-weight: 400;
  color: var(--md-on-surface-var);
  white-space: nowrap;
}
#credits .sep    { color: var(--md-outline-var); margin: 0 6px; }
#credits strong  { color: var(--md-on-surface); font-weight: 600; }
#credits a       { color: var(--md-primary); font-weight: 600; }
#credits a:hover { text-decoration: underline; }
#leg-workers     { font-weight: 700; color: var(--md-on-surface); }

/* ════════════════════════════════════════════════
   MAP — treemap in extra-large rounded container
   ════════════════════════════════════════════════ */
#map-wrap {
  flex: 1;
  min-height: 0;
  position: relative;
  padding: 4px 24px 16px;
}
#treemap {
  width: 100%; height: 100%;
  border-radius: var(--shape-xl);
  overflow: hidden;
  background: var(--md-surface-low);
  box-shadow: var(--elev-1);
}
#treemap svg { display: block; }

/* SVG text */
.cell-name {
  font-family: 'Poppins', sans-serif;
  font-weight: 600; font-size: 9.5px;
  pointer-events: none;
}
.cell-sub {
  font-family: 'Poppins', sans-serif;
  font-weight: 400; font-size: 8.5px;
  pointer-events: none;
}
.grp-lbl {
  font-family: 'Poppins', sans-serif;
  font-weight: 700; font-size: 8.5px;
  text-transform: uppercase; letter-spacing: .6px;
  pointer-events: none;
}

/* ════════════════════════════════════════════════
   FLOATING CARD — M3 elevated card, springy entry
   ════════════════════════════════════════════════ */
#float-card {
  position: absolute;
  top: 16px; right: 36px;
  width: 272px;
  max-height: calc(100% - 44px);
  overflow-y: auto;
  background: var(--md-surface-lowest);
  border-radius: var(--shape-xl);
  padding: 18px;
  box-shadow: var(--elev-4);
  z-index: 50;
  animation: card-in .4s var(--spring);
}
#float-card.hidden { display: none; }
@keyframes card-in {
  from { opacity: 0; transform: translateY(14px) scale(.92); }
  to   { opacity: 1; transform: none; }
}

#fc-close {
  position: absolute; top: 12px; right: 12px;
  width: 28px; height: 28px;
  background: var(--md-surface-high);
  border: none;
  border-radius: var(--shape-full);
  font-size: 11px; color: var(--md-on-surface-var);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .25s var(--spring);
}
#fc-close:hover {
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
  transform: rotate(90deg);
}

#fc-vintage {
  display: inline-block;
  font-size: 8px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .9px;
  color: var(--md-primary);
  background: var(--md-primary-container);
  border-radius: var(--shape-full);
  padding: 3px 10px;
  margin-bottom: 7px;
}
#fc-name {
  font-size: 15px; font-weight: 700;
  color: var(--md-on-surface);
  padding-right: 26px; line-height: 1.25;
  margin-bottom: 2px;
}
#fc-meta {
  font-size: 9.5px; font-weight: 400;
  color: var(--md-on-surface-var);
  margin-bottom: 8px;
}
#fc-growth { margin-bottom: 10px; }

.g-pill {
  display: inline-block; padding: 4px 12px;
  border-radius: var(--shape-full);
  font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px;
}

#fc-stats {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 6px; margin-bottom: 10px;
}
.fc-cell {
  background: var(--md-surface-low);
  border-radius: var(--shape-md);
  padding: 9px 11px;
}
.fc-val { font-size: 13.5px; font-weight: 700; color: var(--md-on-surface); line-height: 1.2; }
.fc-lbl {
  font-size: 8px; font-weight: 600;
  color: var(--md-on-surface-var);
  text-transform: uppercase; letter-spacing: .5px; margin-top: 2px;
}

#fc-radar {
  display: flex; justify-content: center;
  padding: 8px 0 10px;
  background: var(--md-surface-low);
  border-radius: var(--shape-md);
  margin: 4px 0 10px;
}
#fc-radar-svg { overflow: visible; }

.sc-row { margin-bottom: 7px; }
.sc-head {
  display: flex; justify-content: space-between;
  font-size: 10px; font-weight: 500;
  color: var(--md-on-surface-var); margin-bottom: 3px;
}
.sc-head span:last-child { font-weight: 700; color: var(--md-on-surface); }
.sc-track {
  height: 6px;
  background: var(--md-surface-high);
  border-radius: var(--shape-full);
  overflow: hidden;
}
.sc-fill { height: 100%; border-radius: var(--shape-full); transition: width .5s var(--spring); }

#fc-india {
  font-size: 10.5px; font-weight: 400;
  color: var(--md-on-secondary-container);
  line-height: 1.65;
  background: var(--md-tertiary-container);
  padding: 10px 13px;
  border-radius: var(--shape-md);
  margin: 8px 0;
}
#fc-rationale {
  font-size: 9.5px; font-weight: 400; font-style: italic;
  color: var(--md-on-surface-var); line-height: 1.6;
  border-top: 1px solid var(--md-outline-var);
  padding-top: 8px;
}

/* ════════════════════════════════════════════════
   TOOLTIP — M3 rich tooltip
   ════════════════════════════════════════════════ */
#tt {
  position: fixed;
  background: var(--md-surface-lowest);
  border-radius: var(--shape-md);
  padding: 11px 14px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .12s var(--standard);
  z-index: 400;
  max-width: 230px;
  box-shadow: var(--elev-3);
}
#tt.vis { opacity: 1; }
.tt-name { font-weight: 700; font-size: 12.5px; color: var(--md-on-surface); margin-bottom: 2px; }
.tt-val  { font-size: 12px; font-weight: 700; color: var(--saffron); margin-bottom: 2px; }
.tt-row  {
  font-size: 10px; color: var(--md-on-surface-var);
  margin-top: 3px; display: flex; gap: 5px; align-items: center;
}
.tt-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* ════════════════════════════════════════════════
   MOBILE SHEET — M3 bottom sheet
   ════════════════════════════════════════════════ */
#mob-sheet {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--md-surface-lowest);
  border-radius: var(--shape-xl) var(--shape-xl) 0 0;
  max-height: 78vh; overflow-y: auto;
  z-index: 300;
  padding: 12px 20px 40px;
  box-shadow: var(--elev-4);
  transition: transform .45s var(--spring);
}
#mob-sheet.mob-hidden { transform: translateY(110%); }
#mob-handle {
  width: 36px; height: 4px;
  background: var(--md-outline-var);
  border-radius: var(--shape-full);
  margin: 0 auto 14px;
}
#mob-close {
  position: absolute; top: 14px; right: 16px;
  background: var(--md-surface-high);
  border: none;
  border-radius: var(--shape-full);
  width: 30px; height: 30px;
  font-size: 12px; cursor: pointer;
  color: var(--md-on-surface-var);
  display: flex; align-items: center; justify-content: center;
}
#mob-veil {
  position: fixed; inset: 0;
  background: rgba(34,26,18,.4);
  z-index: 200;
  transition: opacity .3s var(--standard);
}
#mob-veil.mob-hidden { display: none; }

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--md-outline-var); border-radius: var(--shape-full); }

/* ════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════ */
@media (max-width: 820px) {
  #top-bar  { padding: 10px 16px; }
  #logo     { font-size: 18px; }
  #hdr-stat { display: none; }
  .hdr-link { padding: 6px 13px; font-size: 11px; }
  #desc     { padding: 8px 16px 0; }
  #desc-p2  { display: none; }
  #desc-caveat { font-size: 10px; padding: 10px 13px; }
  #controls { padding: 10px 16px 4px; gap: 8px; }
  #ctrl-lbl { display: none; }
  #layer-row {
    flex-wrap: nowrap; overflow-x: auto;
    padding-bottom: 4px; width: 100%;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  #layer-row::-webkit-scrollbar { display: none; }
  .lb { flex-shrink: 0; padding: 7px 14px; }
  #legend-bar { padding: 4px 16px 6px; gap: 8px; }
  #credits  { display: none; }
  #map-wrap { padding: 2px 12px 12px; }
  #treemap  { border-radius: var(--shape-lg); }
  #float-card { display: none !important; }
}
@media (max-width: 480px) {
  #logo { font-size: 16px; }
  #desc-p1 { font-size: 11.5px; }
  #desc-caveat { display: none; }
  .lb { font-size: 10.5px; padding: 6px 12px; }
  #legend-grad { width: 90px; }
}