/* =====================================================================
   OSE · Stat · styles/components/stat.css
   ---------------------------------------------------------------------
   One fact as data: a big figure in the heading family over a short mono
   label, under a hairline. No box, no icon. Component tokens only:
   --stat-*.

   Markup
     <li class="stat">
       <span class="stat__value" data-count="15">15</span>
       <span class="stat__label">học viên mỗi lớp, tối đa</span>
     </li>
   Any element works as the root (li inside a role="list" list, div…).
   The value comes first in the DOM, so it reads as one phrase
   ("15 học viên mỗi lớp, tối đa"). Write the real figure as the text:
   it is what shows without JS. data-count (optional) is the number a
   scene may count up to; a value such as "1 + 1" simply has none.
   Figures use tabular numerals, so a counting value never changes width.
   Static, no states. No JS.
   ===================================================================== */

@layer components {
  .stat {
    display: grid;
    align-content: start;
    gap: var(--stat-gap);
    min-inline-size: 0;
    padding-block-start: var(--stat-padding-block);
    border-block-start: var(--stat-rule-width) solid var(--stat-rule);
  }

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

  .stat__label {
    color: var(--stat-label-color);
    font: var(--stat-label-font);
    letter-spacing: var(--stat-label-tracking);
  }
}