/* THE SAVINGS THERMOMETER (#355). Its own file: wallet.css is 710 lines against an 800 guard.
   Built for the 390px column the money screen lives in today — #343 is where the kid app stops
   being one column, and inventing a second layout system on the way past is what that issue asks
   nobody to do. */

/* The same white surface the balance and feed cards wear (--r-card / --sh-card, wallet.css).
   It has to be a CARD: the money screen paints a scene behind everything, and a thermometer
   drawn straight onto clouds reads as a rendering fault rather than as a component. `k-card` is
   not a class this app defines — that was the bug in the first pass. */
.k-th {
  display: flex; align-items: center; gap: 14px;
  background: var(--card); border-radius: var(--r-card); box-shadow: var(--sh-card);
  padding: 14px 16px; margin-top: var(--s5);
}

/* The drawn thermometer. Fixed height so the card's height does not move as the fill rises —
   a card that grows on a poll makes the feed under it jump. */
.k-th-svg { width: 30px; height: 94px; flex: none; overflow: visible; }
.k-th-track { fill: rgba(28, 27, 19, 0.09); }
.k-th-glass { fill: none; stroke: rgba(28, 27, 19, 0.12); stroke-width: 1.5; }
/* The bulb is ALWAYS full. An empty bulb reads as broken rather than as empty, and at 0% the kid
   still needs to see the shape of the thing they are filling. */
.k-th-bulb { fill: var(--paint-coral); }
.k-th-fill { fill: var(--paint-coral); transition: y 600ms cubic-bezier(0.25, 0, 0, 1), height 600ms cubic-bezier(0.25, 0, 0, 1); }
@media (prefers-reduced-motion: reduce) { .k-th-fill { transition: none; } }

.k-th-main { flex: 1; min-width: 0; }
.k-th-head { display: flex; align-items: center; gap: 8px; }
.k-th-emoji { font-size: var(--ic-m); line-height: 1; display: inline-flex; }
.k-th-face { width: var(--ic-l); height: var(--ic-l); object-fit: contain; flex: none; display: block; }
.k-th-title {
  font-weight: 800; font-size: 17px; color: var(--k-ink, var(--paint-line));
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* "40 NIM to go", never "62%". A six year old does not read a percentage — the FILL is the
   picture and this is the number, and they say the same thing two ways. */
.k-th-togo { margin-top: 2px; font-weight: 700; font-size: 15px; color: var(--paint-grass); }
.k-th.is-reached .k-th-togo { color: var(--paint-grass); }
.k-th.is-reached .k-th-fill, .k-th.is-reached .k-th-bulb { fill: var(--paint-grass); }

.k-th-edit {
  margin-top: 6px; border: 0; background: none; padding: 4px 0;
  font: 700 13px inherit; color: rgba(28, 27, 19, 0.5); cursor: pointer;
}

/* The empty state is a first-class screen, not a hidden component: an empty thermometer that
   says what it is for is how a kid finds out the feature exists. */
.k-th-empty { width: 100%; text-align: left; border: 0; cursor: pointer; }
.k-th-empty-ic { font-size: var(--ic-l); line-height: 1; color: var(--k-ink, var(--paint-line)); }
.k-th-empty-main { display: flex; flex-direction: column; min-width: 0; }
.k-th-empty-title { font-weight: 800; font-size: 16px; color: var(--k-ink, var(--paint-line)); }
.k-th-empty-sub { font-weight: 600; font-size: 13px; color: rgba(28, 27, 19, 0.5); }

/* ---- the picker ---- */
/* ⚠️ THE HONEST LINE, and it is why it sits ABOVE the choices rather than under them. Nothing is
   set aside: if the kid spends, the meter drops. Saying that after they have already picked
   would be springing it on them, which #355 calls out by name. */
.k-th-honest { margin: -4px 0 12px; font-weight: 600; font-size: 13.5px; color: rgba(28, 27, 19, 0.5); }
.k-th-picks { display: flex; flex-direction: column; gap: 8px; max-height: 40dvh; overflow-y: auto; }
.k-th-pick {
  display: flex; align-items: center; gap: 10px; width: 100%;
  border: 0; border-radius: 12px; background: rgba(28, 27, 19, 0.05);
  padding: 12px 14px; font: inherit; cursor: pointer; text-align: left;
}
.k-th-pick-t { flex: 1; min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-th-pick-p { font-weight: 800; color: var(--paint-grass); flex: none; }
.k-th-own { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.k-th-own-title { flex: 1 1 100%; }
.k-th-own-amt { flex: 1 1 90px; min-width: 0; }
.k-th-own input, .k-th-own-title, .k-th-own-amt {
  border: 0; border-radius: 12px; background: rgba(28, 27, 19, 0.05);
  padding: 12px 14px; font: 700 15px inherit; color: var(--k-ink, var(--paint-line));
}
.k-th-go {
  flex: 1 1 100px; border: 0; border-radius: 999px; padding: 12px 18px;
  font: 800 15px inherit; color: #fff; cursor: pointer;
  background-color: var(--paint-grass); background-image: none;
}
.k-th-clear {
  display: block; margin: 14px auto 0; border: 0; background: none;
  font: 700 14px inherit; color: rgba(28, 27, 19, 0.5); cursor: pointer; padding: 8px;
}