/* =====================================================================
   OSE · Countdown · styles/components/countdown.css
   ---------------------------------------------------------------------
   Days, hours, minutes and seconds to the opening (khai giảng), as big
   tabular figures between hairlines, over a progress rule and a note
   that says exactly what is counted. Answers: how long until it opens?
   Component tokens only: --countdown-*.

   Markup
     <div class="countdown" data-js="countdown" data-countdown-to="2026-11-03T00:00:00+07:00"
          data-countdown-title="launch-title" data-countdown-done-title="Đang nhận học viên">
       <p class="countdown__date">Khai giảng ngày <time datetime="2026-11-03">03.11.2026</time></p>
       <ul class="countdown__units" role="list" aria-label="Thời gian còn lại đến ngày khai giảng" hidden>
         <li class="countdown__unit">
           <span class="countdown__value" data-unit="days">–</span>
           <span class="countdown__label">ngày</span>
         </li>
         … data-unit="hours" giờ · "minutes" phút · "seconds" giây
       </ul>
       <div class="countdown__track" aria-hidden="true"><span class="countdown__line"></span></div>
       <p class="countdown__note" hidden>…</p>
     </div>
   Values   js/components/countdown.js (data-js="countdown") writes the
            figures from data-countdown-to (an ISO date with its UTC offset),
            ticks once a second while the block is on screen, and marks the
            root data-countdown-state="running" | "done". It runs on every
            motion path (reduced motion included): the figures are
            information, not motion. Scenes animate the figures' transform /
            opacity only and never write their text.
   Date     .countdown__date is the static state: without JS (or if the
            script never runs) the sentence shows and the figures and note
            stay hidden (hidden attribute). While counting, the script shows
            the figures and note and hides the sentence; once the opening has
            passed it swaps them back and retitles the heading named by
            data-countdown-title with data-countdown-done-title. Optional:
            without it the block shows "–" until the script runs and stays
            at 00 when done.
   Line     .countdown__track is a hairline; .countdown__line lies on it at
            full width. Without a running scene it looks like the track
            (same colour and width). Inside a running scene (an ancestor with
            data-scene-state="running") it becomes the ink bar, thicker,
            scaled from the inline start: js/motion/scenes/countdown.js
            scrubs its scaleX 0 → 1 over --countdown-fill-length × the
            viewport height (--countdown-fill-ease), from when the track
            enters the screen; full and unscrubbed once the opening passed.
   Layout   four equal columns at every width, a hairline between them;
            figures --countdown-value-font (stat size) on phones,
            --countdown-value-font-lg (display size) from 48em.
   Static, no interactive states.
   ===================================================================== */

@layer components {
  .countdown {
    display: grid;
    gap: var(--countdown-gap);
    min-inline-size: 0;
  }

  .countdown__date {
    color: var(--countdown-date-color);
    font: var(--countdown-date-font);
    letter-spacing: var(--countdown-date-tracking);
  }

  .countdown__units {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    padding: 0;
    list-style: none;
  }

  .countdown__unit {
    display: grid;
    align-content: start;
    gap: var(--countdown-unit-gap);
    min-inline-size: 0;
    padding-inline: var(--countdown-unit-padding-inline);
    border-inline-start: var(--countdown-rule-width) solid var(--countdown-rule);
  }

  .countdown__unit:first-child {
    padding-inline-start: 0;
    border-inline-start: 0;
  }

  .countdown__value {
    color: var(--countdown-value-color);
    font: var(--countdown-value-font);
    letter-spacing: var(--countdown-value-tracking);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  @media (min-width: 48em) {
    .countdown__value {
      font: var(--countdown-value-font-lg);
      letter-spacing: var(--countdown-value-tracking-lg);
    }
  }

  .countdown__label {
    color: var(--countdown-label-color);
    font: var(--countdown-label-font);
    letter-spacing: var(--countdown-label-tracking);
  }

  /* Track + line: one hairline until a scene runs. */
  .countdown__track {
    position: relative;
    display: block;
    block-size: var(--countdown-line-width);
  }

  .countdown__track::before,
  .countdown__line {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    block-size: var(--countdown-track-width);
    background-color: var(--countdown-track);
  }

  .countdown__track::before {
    content: "";
  }

  .countdown__line {
    transform-origin: left center;
    forced-color-adjust: none;
  }

  [data-scene-state="running"] .countdown__line {
    block-size: var(--countdown-line-width);
    background-color: var(--countdown-line);
  }

  .countdown__note {
    max-inline-size: var(--countdown-note-max-width);
    color: var(--countdown-note-color);
    font-size: var(--countdown-note-font-size);
  }
}