/* ==========================================================================
   COMPONENT: Allocation chart, progress ring, India map
   All hand-built SVG. No chart library.
   Every chart is accompanied by an accessible table — the visual is the
   front door, the table is the record. Indian donor trust is documentary.
   ========================================================================== */

.c-chart {
  display: grid;
  gap: var(--sp-7);
  align-items: center;
}

@media (min-width: 900px) {
  .c-chart { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); }
}

.c-chart__figure {
  position: relative;
  width: min(100%, 22rem);
  aspect-ratio: 1;
  margin-inline: auto;
}

.c-chart__svg { width: 100%; height: 100%; transform: rotate(-90deg); }

/* Arcs draw on via stroke-dashoffset when the section enters. */
.c-chart__arc {
  fill: none;
  stroke-width: 18;
  stroke-linecap: butt;
  stroke-dasharray: var(--len, 0) var(--gap, 1000);
  stroke-dashoffset: var(--offset, 0);
  transition: stroke-dasharray var(--d-reveal) var(--e-out);
  transition-delay: calc(var(--i, 0) * 120ms);
}

.c-chart__arc--1 { stroke: var(--c-verdigris); }
.c-chart__arc--2 { stroke: var(--c-indigo); }
.c-chart__arc--3 { stroke: var(--c-line-strong); }

.c-chart__track { fill: none; stroke: var(--surface-sunken); stroke-width: 18; }

/* --------------------------------------------------------------------------
   EMPTY STATE — set by chart.js when every segment is zero
   --------------------------------------------------------------------------
   On /impact/ the allocation percentages are withheld until the first audit is
   complete, and chart.js correctly refuses to draw a plausible-looking slice
   from unverified data. But a 352px ring with nothing in it reads as a chart
   that failed to load, not as a deliberate omission — so the empty state has to
   look like a decision.

   Three moves: the track becomes a dashed outline (a pending convention rather
   than an empty measurement), the figure shrinks so it stops dominating a
   section it has no data to fill, and the centre value drops to a weight that
   does not imply a headline figure.
   -------------------------------------------------------------------------- */

.c-chart.is-empty .c-chart__track {
  stroke: var(--c-line-strong);
  stroke-width: 2;
  stroke-dasharray: 6 8;
  stroke-linecap: round;
}

.c-chart.is-empty .c-chart__figure { width: min(100%, 15rem); }

.c-chart.is-empty .c-chart__centre-value { font-size: var(--fs-2xl); }

/* A pending marker inside the ring, so the state is named rather than implied. */
.c-chart.is-empty .c-chart__centre::after {
  content: "Awaiting first audit";
  display: block;
  margin-block-start: var(--sp-3);
  font-family: var(--ff-utility);
  font-size: var(--fs-3xs);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--c-warning);
}

/* The figure is centred against a shorter legend, which left ~77px of dead
   space beneath it. Aligning both to the top removes the gap and lines the
   ring up with the table's first row. */
@media (min-width: 900px) {
  .c-chart { align-items: start; }
}

.c-chart__centre {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
}

.c-chart__centre-value {
  font-family: var(--ff-display);
  font-size: var(--fs-3xl);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--c-ink);
}

.c-chart__centre-label {
  font-family: var(--ff-utility);
  font-size: var(--fs-3xs);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin-block-start: var(--sp-2);
}

/* Legend doubles as the accessible table. */
.c-chart__legend { width: 100%; }

.c-chart__legend th,
.c-chart__legend td {
  padding: var(--sp-3) var(--sp-2);
  text-align: start;
  border-block-end: 1px solid var(--c-line);
  font-size: var(--fs-sm);
}

.c-chart__legend th {
  font-family: var(--ff-utility);
  font-size: var(--fs-3xs);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--c-text-muted);
  font-weight: var(--fw-medium);
}

.c-chart__legend td:last-child {
  text-align: end;
  font-family: var(--ff-utility);
  font-variant-numeric: tabular-nums;
}

.c-chart__swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  margin-inline-end: var(--sp-2);
  vertical-align: -1px;
}

.c-chart__swatch--1 { background-color: var(--c-verdigris); }
.c-chart__swatch--2 { background-color: var(--c-indigo); }
.c-chart__swatch--3 { background-color: var(--c-line-strong); }

/* --------------------------------------------------------------------------
   PROGRESS RING — fundraiser cards
   -------------------------------------------------------------------------- */

.c-ring { position: relative; width: 92px; height: 92px; flex: none; }

.c-ring__svg { width: 100%; height: 100%; transform: rotate(-90deg); }

.c-ring__track { fill: none; stroke: var(--surface-sunken); stroke-width: 8; }

.c-ring__fill {
  fill: none;
  stroke: var(--c-verdigris);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: var(--circ, 251);
  stroke-dashoffset: var(--circ, 251);
  transition: stroke-dashoffset var(--d-reveal) var(--e-out);
}

.c-ring.is-revealed .c-ring__fill { stroke-dashoffset: var(--dash, 251); }

.c-ring__value {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  font-family: var(--ff-utility);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
  color: var(--c-ink);
}

/* --------------------------------------------------------------------------
   INDIA MAP
   -------------------------------------------------------------------------- */

.c-map {
  display: grid;
  gap: var(--sp-6);
}

@media (min-width: 1024px) {
  .c-map { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; }
}

.c-map__figure {
  position: relative;
  width: 100%;
}

/* No map SVG available (see assets/icons/india-map.README.md — it is withheld
   on purpose until a Survey of India-compliant file is supplied). Collapse the
   empty column entirely rather than leaving a void beside the panel, and let
   the state list spread out across the full width instead. */
.c-map.is-mapless { grid-template-columns: minmax(0, 1fr); }
.c-map.is-mapless .c-map__figure { display: none; }
.c-map.is-mapless .c-map__panel { max-width: none; }

@media (min-width: 1024px) {
  .c-map.is-mapless .c-map__stats { max-width: 34rem; }
}

.c-map__svg { width: 100%; height: auto; }

.c-map__state {
  fill: var(--surface-sunken);
  stroke: var(--c-plaster);
  stroke-width: 0.8;
  transition: fill var(--d-fast) var(--e-out);
  cursor: default;
}

.c-map__state[data-active="true"] {
  fill: var(--c-indigo);
  cursor: pointer;
}

.c-map__state[data-active="true"]:hover,
.c-map__state[data-active="true"]:focus-visible,
.c-map__state[data-selected="true"] { fill: var(--c-verdigris); }

.c-map__hotspot {
  fill: var(--c-marigold);
  stroke: var(--c-plaster);
  stroke-width: 1.5;
  pointer-events: none;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
  transition: opacity var(--d-fast) var(--e-out), transform var(--d-base) var(--e-spring);
  transition-delay: calc(var(--i, 0) * 70ms);
}
/* ^ Hotspots are the map's donate-adjacent affordance and the only marigold
   on the map. Reviewed against the reserved-colour rule and kept because
   the whole panel is a donate entry point. If that reads wrong in review,
   switch to --c-verdigris; nothing else depends on it. */

.c-map.is-revealed .c-map__hotspot { opacity: 1; transform: scale(1); }

.c-map__panel {
  display: grid;
  gap: var(--sp-4);
  align-content: start;
  padding: var(--sp-5);
  background-color: var(--surface-raised);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  min-height: 16rem;
}

.c-map__panel-title {
  font-family: var(--ff-display);
  font-size: var(--fs-2xl);
}

.c-map__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
}

.c-map__stat-value {
  font-family: var(--ff-display);
  font-size: var(--fs-xl);
  font-variant-numeric: tabular-nums;
  color: var(--c-verdigris-ink);
}

.c-map__stat-label {
  font-family: var(--ff-utility);
  font-size: var(--fs-3xs);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--c-text-muted);
}

/* The state list is the keyboard and screen-reader path into the map. */
.c-map__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.c-map__list-btn {
  padding: var(--sp-2) var(--sp-3);
  min-height: 38px;
  font-family: var(--ff-utility);
  font-size: var(--fs-2xs);
  border: 1px solid var(--c-line);
  border-radius: var(--r-full);
  color: var(--c-ink);
  transition: background-color var(--d-fast) var(--e-out), color var(--d-fast) var(--e-out);
}

.c-map__list-btn:hover,
.c-map__list-btn[aria-pressed="true"] {
  background-color: var(--c-ink);
  border-color: var(--c-ink);
  color: var(--c-text-inv);
}

/* ==========================================================================
   DATA TABLE — records, not chart legends
   --------------------------------------------------------------------------
   /where-we-work/ was rendering its district table with .c-chart__legend, which
   is sized for a two-column allocation key. On a three-column record the auto
   layout gave "Districts" 671px and pushed "Since" 400px clear of the content it
   belongs to, leaving a corridor of empty space down the middle of the page.

   Fixed column proportions solve that, and a horizontal scroll container keeps
   the table honest on a phone rather than letting it force the page wide — the
   defect that used to be masked site-wide by `overflow-x: hidden` on the body.
   ========================================================================== */

.c-datatable__scroll {
  overflow-x: auto;
  /* Momentum scrolling on iOS, and a visible edge so it is clear there is more. */
  -webkit-overflow-scrolling: touch;
}

.c-datatable {
  width: 100%;
  border-collapse: collapse;
  /* Fixed, so the proportions below are honoured rather than negotiated by the
     longest cell of text. */
  table-layout: fixed;
  min-width: 34rem;
}

.c-datatable th,
.c-datatable td {
  padding: var(--sp-4) var(--sp-3);
  text-align: start;
  vertical-align: baseline;
  border-block-end: 1px solid var(--c-line);
  font-size: var(--fs-sm);
  line-height: 1.5;
}

.c-datatable th {
  font-family: var(--ff-utility);
  font-size: var(--fs-3xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--c-text-muted);
  border-block-end-color: var(--c-line-strong);
  white-space: nowrap;
}

/* State · Districts · Since. The middle column takes the slack because it is the
   only one whose length varies. */
.c-datatable th:nth-child(1), .c-datatable td:nth-child(1) { width: 22%; }
.c-datatable th:nth-child(2), .c-datatable td:nth-child(2) { width: 62%; }
.c-datatable th:nth-child(3), .c-datatable td:nth-child(3) { width: 16%; }

/* The first cell is the row's subject, so it carries the weight. */
.c-datatable__key {
  font-weight: var(--fw-medium);
  color: var(--c-ink);
}

/* Years align on their digits. The selector must qualify the element, because
   `.c-datatable th` (0,1,1) outranks a bare `.c-datatable__num` (0,1,0) and the
   right-alignment silently lost to it — measured still reporting text-align:
   start after the class was added. */
.c-datatable th.c-datatable__num,
.c-datatable td.c-datatable__num {
  text-align: end;
  font-variant-numeric: tabular-nums;
}

.c-datatable td.c-datatable__num { color: var(--c-text-muted); }

.c-datatable tbody tr {
  transition: background-color var(--d-fast) var(--e-out);
}

@media (hover: hover) {
  .c-datatable tbody tr:hover { background-color: var(--surface-raised); }
}

@media (prefers-reduced-motion: reduce) {
  .c-datatable tbody tr { transition: none; }
}