/* ── Rally progress band ───────────────────────────────────────────────
 *
 * Operator, 2026-09-16: "get rid of the fucking white background on
 * shit... make it fucking readable. highlight with a good color. also do
 * not make everything so transparent." and "show a large progress bar
 * about how close the deal is to being done."
 *
 * Two rules this sheet exists to obey, both already paid for in this
 * repo:
 *
 * 1. EVERY selector names the block root. A brand sheet styles bare
 *    elements inside its own scope — `.peprally p { color: …;
 *    font-size: 16px }` is (0,1,1), so a lone class at (0,1,0) loses
 *    the colour AND the typography. Four brands shipped a CTA at 1:1
 *    contrast learning this.
 *
 * 2. NO hardcoded colour. Every value is a brand token, so the same
 *    band is Ember on PepRally and champagne on Glam. A bare `var()`
 *    with no definition evaluates to nothing rather than complaining,
 *    which is why `brand_css_token_definition_guard_test` exists — the
 *    tokens used here (--color-surface, --color-border, --color-text,
 *    --color-subtle, --color-accent, --color-muted) are declared by
 *    every brand sheet.
 *
 * Surfaces are SOLID. No rgba-white panels, no faded body text: the
 * complaint was legibility, and transparency over an unknown backdrop
 * is exactly how contrast becomes unmeasurable.
 */

.rally-progress {
  margin: 28px 0;
  padding: 24px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
}

.rally-progress .rally-progress__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.rally-progress .rally-progress__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.rally-progress .rally-progress__headline {
  margin-top: 6px;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 700;
  color: var(--color-text);
}

/* The number is the loudest thing in the band on purpose — it is the
 * one fact the operator asked to be unmissable. */
.rally-progress .rally-progress__pct {
  flex: 0 0 auto;
  font-size: 42px;
  line-height: 1;
  font-weight: 800;
  color: var(--color-accent);
  font-variant-numeric: tabular-nums;
}

/* ── The bar, and the caption it went four revisions without ─────────
 * Operator, 2026-09-17: "Name the bar something like opportunity left."
 * It shipped with no caption at all — a 30%-filled track under a "7
 * days left" headline, next to a "20% off" discount, with nothing
 * saying what the fill counted.
 *
 * Every selector names the block root. `.peprally p` and `.peprally
 * span` are (0,1,1) and a lone class is (0,1,0), so a bare
 * `.rally-progress__meter-sub` loses its SIZE as well as its colour —
 * the defect that rendered a 1.9rem headline at 16px on the auth page.
 *
 * `--color-subtle` for the caption, never `--color-muted`: measured on
 * this palette the latter is a 3.63:1 hairline token whose name invites
 * being used for copy. */
.rally-progress .rally-progress__meter {
  margin-top: 18px;
}

.rally-progress .rally-progress__meter-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
  margin-bottom: 8px;
}

.rally-progress .rally-progress__meter-label {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text);
}

/* Large by instruction. The track is a solid tinted surface rather than
 * a transparent white wash, so it reads on both a light and a dark
 * brand. */
.rally-progress .rally-progress__track {
  position: relative;
  height: 22px;
  border-radius: 999px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  overflow: hidden;
}

.rally-progress .rally-progress__fill {
  /* ── `display` is LOAD-BEARING and its absence is why this bar was
   *    empty on production from the day it shipped ────────────────────
   *
   * Operator, repeatedly: "There is still no visible progress on the
   * rally bar." Measured in Chrome on the live page: the fill carried
   * `style="width: 68%"`, resolved `background: rgb(232,85,15)`, and
   * rendered at **0 x 0 with `display: none`**.
   *
   * The cause is Nutreko base.css, which PepRally's theme ships:
   *
   *     div:empty { display: none }
   *
   * The fill is an EMPTY `<div>` — it has no content by design, it is a
   * painted rectangle — so that rule hid it outright. Our rule is
   * (0,2,0) and beats Nutreko's (0,1,1), but specificity only decides a
   * property BOTH rules declare. This rule never mentioned `display`,
   * so there was nothing to win with and `display: none` applied
   * unopposed.
   *
   * THIS IS THE THIRD INSTANCE IN THIS REPO. The age-gate scrim
   * (operator-reported 2026-05-07, "the 21 age gate doesn't dim the
   * rest of the page") and the hero overlay were both this exact rule,
   * both fixed in place, and both left a comment rather than a guard —
   * so the next empty div walked into it again. `empty_div_display_guard_test`
   * now covers the category.
   *
   * Everything below was correct the whole time, which is what made it
   * so hard to see: a grep found the rule, the markup carried the right
   * width, `aria-valuenow` reported the right number, and the bar was
   * still blank. Only a browser knows. */
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--color-accent);
  /* The width is set inline from the row, so raising the cap mid-rally
   * moves the bar on the next render with no deploy. */
  transition: width 400ms ease;
}

/* Under 20% LEFT it stops being information and starts being a prompt.
 * The bar drains rather than fills, so the hot state is a low number
 * now — inverting the fill without inverting this would have lit the
 * bar up on the opening morning and left it plain at the end. */
.rally-progress .rally-progress__fill.is-hot {
  background: linear-gradient(90deg, var(--color-accent), var(--checkout-accent-hover, var(--color-accent)));
}

/* ── The two clocks ──────────────────────────────────────────────────
 * Side by side, because one combined number cannot say WHICH of them is
 * about to end the Rally — and those two facts ask the reader for
 * different things. */
/* One leg now, not two. The "Spots" leg was removed on 2026-09-17 —
 * its STATE was a disclosure even though it never printed a number.
 * A `1fr 1fr` grid would leave a dead half-width cell, so this
 * auto-fits whatever remains. */
.rally-progress .rally-progress__legs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.rally-progress .rally-progress__leg {
  padding: 12px 14px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 8px;
}

/* --color-subtle, NOT --color-muted, and it was Chrome that said so.
 *
 * Every static check in this repo was green while this rule painted
 * #64748B at 10px:
 *
 *   rgb(100,116,139) on rgb(17,17,22)   10px   3.96:1   FAIL
 *
 * 3.96:1 clears AA only for LARGE text — 18.66px bold or 24px. This is
 * ten pixels, uppercase, letterspaced: the hardest thing on the band to
 * read, wearing the lowest contrast on it.
 *
 * Neither file could see the defect alone. This sheet names a token; the
 * BRAND declares its value; so a shared component's legibility is a
 * property of the brand it lands on, and the pair only exists in a
 * browser. Same shape as the CTA that shipped at 1:1 on four brands with
 * a correct `color:#fff` in the sheet.
 *
 * The hierarchy does not need the colour: 10px, 700, 0.14em uppercase is
 * already emphatically a label. It now takes its rank from size and
 * weight — exactly what the homepage band's own flag was changed to do
 * when its `opacity: .85` came out. */
.rally-progress .rally-progress__leg-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-subtle);
}

.rally-progress .rally-progress__leg-value {
  margin-top: 4px;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text);
}

.rally-progress .rally-progress__note {
  margin: 16px 0 0;
  font-size: 14px;
  line-height: 1.55;
  /* --color-subtle, not a faded --color-text. The instruction was
   * legibility; a muted tone at 40% opacity is how the auth page shipped
   * a 9.93:1 tone that measured as unreadable. */
  color: var(--color-subtle);
}

.rally-progress .rally-progress__note strong {
  color: var(--color-text);
}

/* Single column below the fold-in point. Declared with min-width only —
 * a max-width-only breakpoint leaves the base state undefined, which is
 * how the auth page stacked three children into row 1 at 390px. */
@media (max-width: 560px) {
  .rally-progress .rally-progress__legs {
    grid-template-columns: 1fr;
  }

  .rally-progress .rally-progress__pct {
    font-size: 32px;
  }

  .rally-progress .rally-progress__headline {
    font-size: 18px;
  }
}

/* ── The discount is lowering, at a glance ───────────────────────────
 *
 * Operator, 2026-09-17: "i want it clear at first glance that the
 * discount is lowering and also clear that time and inventory is
 * running out without saying exactly where we are."
 *
 * So: the rate, and a running clock to the moment it changes. No count
 * and no stock number anywhere — the state, never the number.
 *
 * Block-root selectors and brand tokens only, no opacity: this same
 * band is Ember on PepRally and champagne on Glam, and a colour painted
 * with alpha takes its value from whatever sits behind it. */
.rally-progress .rally-progress__urgency {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  margin-bottom: 16px;
  padding: 12px 16px;
  border-radius: 8px;
  background: var(--color-surface);
  border-left: 3px solid var(--color-accent);
}

.rally-progress .rally-progress__rate {
  font-size: 20px;
  line-height: 1.2;
  color: var(--color-text);
}

.rally-progress .rally-progress__drop {
  font-size: 14px;
  color: var(--color-subtle);
}

/* Tabular figures so a ticking clock does not jitter the line it sits
 * on — a countdown that makes the text jump reads as broken. */
.rally-progress .rally-progress__clock {
  font-family: Menlo, Consolas, "Liberation Mono", monospace;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--color-text);
}