/* ============================================================
   The Tee Family House — css/thermo.css
   «ميزان الحرارة» — the site-wide fundraising thermometer.

   Pairs with js/thermo.js, which renders into any page that
   provides a <div id="tfh-thermo"></div> mount. The widget has to
   look right in BOTH zones (it sits in the donate band on the
   landing page, and on the cream thanks/report pages), so nothing
   here hard-codes an ink colour: text inherits from whatever
   section hosts it and only the pink accents are absolute. The
   card's own translucent surface reads as a lighter panel on
   night and a softer one on cream.

   Reads base.css's tokens; adds none of its own to :root, so it
   can be dropped onto a page without touching the design contract.
   ============================================================ */

.thermo {
  max-width: 560px;
  margin-inline: auto;
  padding: clamp(20px, 3vw, 28px);
  border-radius: var(--radius);
  background: rgba(244, 143, 177, 0.08);
  border: 1px solid rgba(244, 143, 177, 0.24);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  text-align: center;
}

/* js/thermo.js keeps the mount hidden until it has real numbers, so a
   missing or unreadable report.json leaves no empty box behind. */
.thermo[hidden] { display: none; }

.thermo-line {
  font-size: clamp(1.05rem, 2.4vw, 1.35rem);
  font-weight: 500;
  line-height: 1.6;
  margin-block-end: 14px;
}

/* Amounts stay Western digits in both languages (site-wide rule), so
   the number itself is forced LTR inside an RTL sentence — otherwise a
   4-digit total can reorder against its neighbouring words. */
.thermo-amount,
.thermo-goal {
  direction: ltr;
  unicode-bidi: isolate;
  font-weight: 700;
  color: var(--pink);
  font-variant-numeric: tabular-nums;
}

.thermo-track {
  position: relative;
  block-size: 12px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(244, 143, 177, 0.16);
  border: 1px solid rgba(244, 143, 177, 0.2);
}

/* A plain block box, so it grows from the inline-start edge on its own
   in RTL and LTR alike — no physical left/right anywhere, and `width`
   on a block box means "along the inline axis" in both directions.

   Deliberately `width`, not the logical `inline-size`: Chrome accepts
   `transition: inline-size` but never actually runs it, which pins the
   bar at its 0% start value forever. css/pages.css's funding bar
   transitions `width` for the same reason — this matches it. */
.thermo-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--pink-deep), var(--pink));
  transition: width 1.1s var(--ease-out);
}

.thermo-goal-line {
  margin-block-start: 14px;
  font-size: 0.92rem;
  opacity: 0.85;
}

.thermo-pct {
  display: inline-flex;
  align-items: center;
  margin-inline-start: 6px;
  padding: 3px 11px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--pink);
  background: rgba(244, 143, 177, 0.14);
  border: 1px solid rgba(244, 143, 177, 0.24);
  direction: ltr;
  unicode-bidi: isolate;
}

.thermo-stamp {
  margin-block-start: 12px;
  font-size: 0.76rem;
  opacity: 0.6;
}

/* The thermometer's own entrance. Dynamically inserted nodes can never
   carry data-reveal (motion.js batches those once, at DOMContentLoaded,
   and anything added later would stay stuck at opacity 0), so the
   widget brings its own — switched off entirely under reduce-motion. */
.thermo-in { animation: thermo-rise 0.7s var(--ease-out) both; }

@keyframes thermo-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

html.reduce-motion .thermo-in { animation: none; }
html.reduce-motion .thermo-fill { transition: none; }