/*
 * Countdown block stylesheet (260807-countdown).
 *
 * The component emits ONLY data attributes; this sheet owns every visual
 * decision, including the one that makes the block tick without a script ever
 * touching text — see "THE LIVE SWITCH" below.
 *
 * Every rule is in the `noon` cascade layer, so operator `customCss`
 * (unlayered) beats it regardless of specificity and of hoist order — the FULL
 * rationale lives ONCE, in `noon-theme.css`.
 */

@layer noon {
  [data-block="Countdown"] {
    margin: calc(var(--noon-spacing-unit, 8px) * 4) 0;
  }

  /* ── STATE ──
 *
 * ONE attribute decides everything: `data-countdown-state`. The server sets it
 * at render time and the script flips it if the deadline passes while the page
 * is open, so there is a single representation of "done" and no second rule to
 * drift. Completed: the message alone — heading, description and clock all go.
 */
  [data-block="Countdown"][data-countdown-state="done"] [data-countdown-running] {
    display: none;
  }

  [data-block="Countdown"][data-countdown-state="running"] [data-countdown-message] {
    display: none;
  }

  [data-countdown-heading] {
    margin: 0 0 calc(var(--noon-spacing-unit, 8px) * 1);
  }

  [data-countdown-description] {
    margin: 0 0 calc(var(--noon-spacing-unit, 8px) * 3);
    color: var(--noon-muted, #666);
  }

  /* NO font-size. The completion message is body copy — it replaces the clock,
 * it does not inherit the clock's emphasis. Sizing it up made it the only
 * paragraph on the page that was not the page's own size. */
  /* biome-ignore lint/style/noDescendingSpecificity: the sheet is ordered by block narrative; specificity, not order, decides between these two */
  [data-countdown-message] {
    margin: 0;
  }

  /* ── THE CLOCK ──
 *
 * Four units that stay a readable group at any width. `tabular-nums` is not
 * decoration: without it the digits change width every second and the whole
 * row twitches.
 */
  /* GRID, NOT FLEX-WRAP. With `flex-wrap` the four units broke 3 + 1 on a phone:
 * flex fills each line greedily, so the last unit drops alone and the clock
 * reads as three-things-and-an-afterthought. A grid decides the COLUMN COUNT
 * instead of letting the line length decide it, so the fallback is a balanced
 * 2x2 rather than whatever happens to fit.
 *
 * `minmax(0, 1fr)` and not `1fr`: a grid track's automatic minimum is its
 * content's min-content width, so `1fr` alone lets a long label push the track
 * wider than its share and overflow the page. This is the fix for that, not a
 * stylistic preference. */
  [data-countdown-clock] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: calc(var(--noon-spacing-unit, 8px) * 1.5);
    /* The digit size, declared ONCE so the value span and its `attr()` twin
   * cannot disagree, and so the narrow-screen rule below moves both. */
    --noon-countdown-digit: 2em;
  }

  /* One breakpoint, and it is placed where the CONTENT breaks rather than at a
 * device width: below roughly 26rem four columns cannot hold two digits and a
 * label without the text shrinking to unreadable. */
  @media (max-width: 26rem) {
    [data-countdown-clock] {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      --noon-countdown-digit: 1.75em;
    }
  }

  [data-countdown-unit] {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* NO min-width: it would defeat `minmax(0, 1fr)` and reintroduce the
   * overflow the grid was chosen to prevent. */
    padding: calc(var(--noon-spacing-unit, 8px) * 1.5) calc(var(--noon-spacing-unit, 8px) * 0.5);
    border: 1px solid var(--noon-border, #ddd);
    border-radius: var(--noon-radius, 4px);
    background: var(--noon-surface, transparent);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
  }

  [data-countdown-value] {
    font-size: var(--noon-countdown-digit, 2em);
    line-height: 1.1;
    font-family: var(--noon-heading-font, inherit);
  }

  [data-countdown-label] {
    font-size: 0.75em;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--noon-muted, #666);
    /* The label is what overflows first on a narrow column — "minutes" and
   * "seconds" are the long ones. Allowed to shrink rather than widen its
   * track. */
    min-width: 0;
    overflow-wrap: anywhere;
  }

  /* ── THE LIVE SWITCH ──
 *
 * The script writes `data-live` on a unit; it NEVER writes text. React rendered
 * the value inside `[data-countdown-value]` and keeps owning that text node —
 * a script rewriting it was silently undone by concurrent hydration once
 * already (React #418), which is the whole reason for this arrangement.
 *
 * So the moment `data-live` exists, the server's span is hidden and the value
 * is painted from the attribute instead. Before the script runs — or with
 * scripting off entirely — the server's span is what shows. Late, never wrong.
 *
 * ::before rather than ::after so the value stays above its label in the
 * column, matching the order the server-rendered spans appear in.
 */
  [data-countdown-unit][data-live] [data-countdown-value] {
    display: none;
  }

  [data-countdown-unit][data-live]::before {
    content: attr(data-live);
    /* The SAME custom property the server-rendered span uses, so the swap from
   * text to attribute cannot change the size — and so the narrow-screen rule
   * moves both together. */
    font-size: var(--noon-countdown-digit, 2em);
    line-height: 1.1;
    font-family: var(--noon-heading-font, inherit);
  }

  /* Motion: the numbers change every second, so any transition on them would be
 * permanently mid-animation. Deliberately none. */

  /* ── close of @layer noon ── */
}