/* =============================================================================
   metrics — секція 02. Вузька заглиблена смуга з чотирьох вікон показника,
   врізана в низ hero на --space-xl.

   Нижче згину на всіх трьох ширинах (критерій 003-14.11), тому файл
   під'єднаний відкладено. Висоту вікна тримає --metric-window-min, заданий
   тут, а не інлайном: до onload смуга вже має правильну висоту → CLS = 0.
   ============================================================================= */

.metrics {
  position: relative;
  z-index: var(--z-raised);
  margin-block-start: calc(-1 * var(--space-xl));
  padding-block: var(--section-pad-tight);
  background: var(--surface-sunken);
  border-block: var(--border-hairline);
  box-shadow: var(--shadow-inset-panel);
}

.metrics__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gutter);
}

/* ---- вікно показника --------------------------------------------------------- */

.metric {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  overflow: hidden;
  min-block-size: var(--metric-window-min);
  padding: var(--readout-window-pad);
  border: var(--readout-window-border);
  border-radius: var(--radius-readout);
  /* Вікно показника — накладка НА панелі смуги, а не та сама поверхня:
     --readout-window-bg збігався з тлом самої смуги, і вікна читалися
     плоскими контурами. Верхню кромку дає --edge-light усередині
     --shadow-card. */
  background: var(--surface-raised);
  box-shadow: var(--shadow-card);
}

/* Блік скла над вікном. */
.metric::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 100%;
  background: var(--specular);
  pointer-events: none;
}

.metric__value {
  font-family: var(--font-readout);
  font-size: var(--fs-metric);
  font-weight: var(--fw-readout);
  font-stretch: var(--stretch-readout);
  line-height: var(--lh-readout);
  letter-spacing: var(--tracking-numeric);
  /* Показник — це те, що світиться. art-direction §4 віддає бурштин фігурам
     смуги; сірим лишається тільки заблокований стан нижче. */
  color: var(--accent);
  /* Защіпка масштабується від лівої кромки числа, щоб рядок не «дихав». */
  transform-origin: left center;
}

/* Довге значення. --fs-metric розрахований на два-три знаки («40+», «1.4s»);
   «3,900+» на чотирьох колонках вилазить за кромку вікна й обрізається
   overflow: hidden. Кегль знижується щаблями за фактичною довжиною рядка, а
   не підганяється під одне конкретне число: завтра клієнт напише в адмінці
   «12,500» і воно має вміститися само.

   Модифікатор ставить шаблон картки, порахувавши довжину значення разом із
   суфіксом, — це властивість даних, а не рішення дизайнера. */
.metric--long .metric__value { font-size: var(--fs-h2); }
.metric--longer .metric__value { font-size: var(--fs-index); }

/* Прилад, який ще нічого не показує: значення сіре, поки числа заблоковані. */
.metrics__list[data-state="blocked"] .metric__value {
  color: var(--text-muted);
}

.metric__label {
  max-inline-size: var(--measure-narrow);
  font-size: var(--fs-small);
  color: var(--text-muted);
}

/* ---- пілюля-джерело -----------------------------------------------------------
   Раніше тут стояла порожня заглушка, і саме тому вікно читалося недобудованим:
   під числом було відведене місце ні під що. Тепер це джерело показника —
   звідки він узятий. Підпис короткий, тому пілюля лишається компактною. */

.metric__tag {
  display: inline-flex;
  align-items: center;
  align-self: start;
  margin-block-start: auto;
  min-block-size: var(--pill-height);
  padding: var(--pill-pad);
  border-radius: var(--radius-chip);
  /* Вікно тепер --surface-raised, тож пілюля йде на крок углиб, інакше вона
     зникає у власному тлі (motion-spec §6: пілюля в спокої — --surface-sunken). */
  background: var(--surface-sunken);
  font-family: var(--font-readout);
  font-size: var(--fs-micro);
  font-weight: var(--fw-readout);
  letter-spacing: var(--tracking-wide);
  color: var(--text-secondary);
}

/* Джерело ще не підтверджене — пілюля стоїть незасвіченою. */
.metric__tag[data-provisional="true"] {
  color: var(--text-muted);
}

/* ---- наведення: канал знімає повторне показання ---------------------------------
   Число перевимірюється (метрику веде metrics.js), а вікно на цей час світить
   на крок яскравіше — та сама мова лампи, що в приладі й на рейці. Нічого не
   рухається, тому на дотику стан просто не виникає й нічого не ламає. */

.metric__value,
.metric__tag {
  transition:
    color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}

.metric:hover .metric__value { color: var(--accent-hover); }

.metric:hover .metric__tag {
  background: var(--surface-page);
  color: var(--text-secondary);
}

@media (min-width: 64rem) {
  .metrics__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .metric__value,
  .metric__tag { transition: none; }
}