/* ==========================================================================
   COMPONENT: The Impact Thali — SIGNATURE ELEMENT
   --------------------------------------------------------------------------
   A thali is already a data visualisation: a whole divided into portions.
   Drag the amount and the girih rosette subdivides — each new cell is one
   more funded outcome. The geometry does the arithmetic.

   Degrades in three stages:
     full JS + motion → pinned, scrubbed, counting
     reduced motion   → unpinned, values set instantly
     no JS            → a static amount → outcome table (.c-thali__fallback)
   ========================================================================== */

.c-thali {
  position: relative;
  overflow: hidden;
}

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

@media (min-width: 1024px) {
  .c-thali__inner { grid-template-columns: 1fr 1fr; }
}

/* --------------------------------------------------------------------------
   THE PLATE
   -------------------------------------------------------------------------- */

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

.c-thali__svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Rim — the steel edge of the plate. */
.c-thali__rim {
  fill: none;
  stroke: var(--c-verdigris-lt);
  stroke-width: 1.5;
  opacity: 0.4;
}

.c-thali__rim--outer { opacity: 0.22; }

/* Rosette strapwork — drawn, not filled. */
.c-thali__geo path,
.c-thali__geo line,
.c-thali__geo polygon {
  fill: none;
  stroke: var(--c-verdigris-lt);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  opacity: 0.35;
}

/* Cells subdivide as the value rises; thali.js toggles data-on. */
.c-thali__cell {
  fill: var(--c-verdigris-lt);
  fill-opacity: 0;
  stroke: var(--c-verdigris-lt);
  stroke-width: 1;
  stroke-opacity: 0.3;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.82);
  transition:
    fill-opacity var(--d-base) var(--e-out),
    transform var(--d-base) var(--e-spring),
    stroke-opacity var(--d-base) var(--e-out);
  transition-delay: calc(var(--i, 0) * 24ms);
}

.c-thali__cell[data-on="true"] {
  fill-opacity: 0.16;
  stroke-opacity: 0.75;
  transform: scale(1);
}

.c-thali__cell[data-on="true"][data-emphasis="true"] { fill-opacity: 0.34; }

/* Centre figure — the amount, always legible against the plate. */
.c-thali__centre {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  pointer-events: none;
  isolation: isolate;
}

/* The two innermost rings (r 26–118 in the 512 viewBox) sit directly under the
   amount and its label, so at small gift values the type was rendering teal on
   teal and "Your gift" read as a smudge.
   A backing disc would fix the contrast but would hide the very wedges the
   component exists to show — the fill IS the payoff. So the contrast is
   carried by the type itself: a tight ink halo keeps both readable and leaves
   the plate completely unobscured. */
.c-thali__amount,
.c-thali__amount-label {
  text-shadow:
    0 0 6px var(--c-ink),
    0 0 14px var(--c-ink),
    0 1px 2px var(--c-ink);
}

.c-thali__amount {
  font-family: var(--ff-display);
  font-size: clamp(2.25rem, 1.4rem + 4.2vw, 4rem);
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: var(--tr-display);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  color: var(--c-text-inv);
}

.c-thali__amount-label {
  font-family: var(--ff-utility);
  font-size: var(--fs-3xs);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  /* Muted ink was fine against the empty plate but disappeared once the cells
     lit up behind it. The verdigris tint is the same accent the eyebrows use,
     and it holds against both the bare plate and a full one. */
  color: var(--c-verdigris-lt);
  margin-block-start: var(--sp-2);
}

/* --------------------------------------------------------------------------
   OUTCOMES
   -------------------------------------------------------------------------- */

.c-thali__content { display: grid; gap: var(--sp-5); align-content: center; }

.c-thali__outcomes {
  display: grid;
  gap: var(--sp-4);
  margin-block: var(--sp-2);
}

.c-thali__outcome {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: var(--sp-4);
  padding-block-end: var(--sp-4);
  border-block-end: 1px solid rgb(255 255 255 / 0.14);
}

.c-thali__outcome[data-empty="true"] { opacity: 0.35; }

.c-thali__outcome-value {
  font-family: var(--ff-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--c-verdigris-lt);
  min-width: 3ch;
  text-align: end;
}

.c-thali__outcome-label {
  font-size: var(--fs-sm);
  line-height: 1.4;
  color: var(--c-text-muted-inv);
}

/* --------------------------------------------------------------------------
   SLIDER — a real input[type=range]
   -------------------------------------------------------------------------- */

.c-thali__slider { display: grid; gap: var(--sp-3); }

.c-thali__range {
  width: 100%;
  height: 44px;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  cursor: grab;
}

.c-thali__range:active { cursor: grabbing; }

.c-thali__range::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: var(--r-full);
  background: linear-gradient(
    to right,
    var(--c-verdigris-lt) 0%,
    var(--c-verdigris-lt) var(--fill, 0%),
    rgb(255 255 255 / 0.18) var(--fill, 0%),
    rgb(255 255 255 / 0.18) 100%
  );
}

.c-thali__range::-moz-range-track {
  height: 4px;
  border-radius: var(--r-full);
  background: rgb(255 255 255 / 0.18);
}

.c-thali__range::-moz-range-progress {
  height: 4px;
  border-radius: var(--r-full);
  background: var(--c-verdigris-lt);
}

.c-thali__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 26px;
  height: 26px;
  margin-block-start: -11px;
  border-radius: var(--r-full);
  background: var(--c-marigold);
  border: 3px solid var(--c-ink);
  cursor: grab;
}

.c-thali__range::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border-radius: var(--r-full);
  background: var(--c-marigold);
  border: 3px solid var(--c-ink);
  cursor: grab;
}
/* ^ The thumb is the one non-button marigold surface. It is the donate
   control's handle — dragging it sets the donation amount — so it stays
   inside the reserved-colour rule. */

.c-thali__range:focus-visible { outline: var(--focus-width) solid var(--focus-color); outline-offset: 4px; }

.c-thali__scale {
  display: flex;
  justify-content: space-between;
  font-family: var(--ff-utility);
  font-size: var(--fs-2xs);
  font-variant-numeric: tabular-nums;
  color: var(--c-text-muted-inv);
}

/* --------------------------------------------------------------------------
   NO-JS FALLBACK — still genuinely useful
   -------------------------------------------------------------------------- */

.c-thali__fallback { display: none; }
.no-js .c-thali__fallback { display: block; }
.no-js .c-thali__plate,
.no-js .c-thali__slider { display: none; }

.c-thali__fallback table { font-size: var(--fs-sm); }
.c-thali__fallback th,
.c-thali__fallback td {
  padding: var(--sp-3);
  text-align: start;
  border-block-end: 1px solid rgb(255 255 255 / 0.14);
  font-variant-numeric: tabular-nums;
}
.c-thali__fallback th {
  font-family: var(--ff-utility);
  font-size: var(--fs-2xs);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--c-text-muted-inv);
}