/* ───────────────────────────────────────────────────────────────
 * Metric Block — shared component (TASK-119)
 *
 * Single source of truth for every .metric style. Used by the
 * channel page's performance grid, the catalog card's body, and any
 * other component that reuses metrics.
 *
 * Dependencies (must be loaded before this file):
 * - tokens.css (CSS custom properties)
 * - sora.css + rubik.css (fonts)
 * - phosphor.css (icons)
 *
 * Local overrides (catalog-card__body .metric) apply on top of this
 * base in the consuming file.
 * ─────────────────────────────────────────────────────────────── */

.metric {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 4px;
  padding: 16px;
  background: var(--color-page);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-divider);
  min-width: 0;
}

/* In dark — the metric lightens slightly against the section so it does not blend in */
:root[data-theme="dark"] .metric {
  background: var(--color-card-on-surface);
  border-color: var(--color-divider-dark);
}

/* Header: label on the left, info icon on the right */
.metric__header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

.metric__label {
  font: 500 13px/1.3 var(--font-ui);
  color: var(--color-ink-2);
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Specifier — the label's modifier (median, organic, ads).
   Thinner and lighter than the base; separates visually without a "·" glyph. */
.metric__specifier {
  font-weight: 400;
  color: var(--color-ink-3);
  margin-left: 4px;
}

/* TASK-164 / D13 — the channel offer's price block carries its label ABOVE the line rather
   than beside it (`b3-channel.html:2881`). The one declaration of the block that names a
   `.metric*` selector, so it belongs here — the ported sheet — and never in a page stylesheet
   under `src/`, where the one-authorship sweep refuses the token outright. */
.channel-offer__price .metric__label {
  display: block;
}

.metric__info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: var(--color-ink-3);
  cursor: help;
  border-radius: 50%;
  transition: color var(--duration-fast) var(--ease-out);
}

.metric__info:hover { color: var(--color-ink-2); }
.metric__info i { font-size: 14px; }

/* Value: the main figure in Sora tnum */
.metric__value {
  font-family: var(--font-num);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-feature-settings: "tnum" 1, "ss01" 1;
  color: var(--color-ink);
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-height: 26px;
}

.metric__unit {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 13px;
  line-height: 1;
  color: var(--color-ink-2);
  letter-spacing: -0.005em;
}

/* Sizes */
.metric--md .metric__value {
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: -0.02em;
  font-weight: 500;
}
.metric--sm .metric__value {
  font-size: 13px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  font-weight: 500;
  min-height: 17px;
}
.metric--sm .metric__label,
.metric--sm .metric__specifier { font-size: 12px; }
.metric--sm .metric__unit { font-size: 12px; }

/* Insufficient state */
.metric--insufficient .metric__value {
  color: var(--color-ink-3);
  font-family: var(--font-ui);
  font-size: 15px;          /* smaller than value, so it reads as a data state, not a number */
  font-weight: 500;
  letter-spacing: -0.005em;
  align-items: center;
}
.metric--insufficient .metric__value .ph {
  color: var(--color-ink-3);
  font-size: 14px;
  margin-right: 6px;
  vertical-align: -1px;
}

/* Absent state — the slot's placeholder (metric not yet applicable)
   keeps its place in the grid, does not collapse. */
.metric--absent {
  background: var(--color-muted-bg);
  border-color: var(--color-muted-bg);
}
.metric--absent .metric__value {
  color: var(--color-ink-3);
  font-family: var(--font-ui);
  font-size: 15px;          /* R2-8: one pattern with --insufficient — icon + text, only the bg differs */
  font-weight: 500;
  font-style: normal;       /* R2-8: italic removed — both states (insufficient/absent) look uniform */
  letter-spacing: -0.005em;
  align-items: center;
}
.metric--absent .metric__value .ph {
  color: var(--color-ink-3);
  font-size: 14px;
  margin-right: 6px;
  vertical-align: -1px;
}

/* Footer: sample + source */
.metric__footer {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  margin-top: 2px;
}

.metric__sample {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.3;
  color: var(--color-ink-3);
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.metric__source {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 11px;
  line-height: 1.3;
  color: var(--color-ink-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* TASK-120 — the reach metric's footer companion (a2-catalog.html's `metric__mid`): the
   sample and the CPM figure share one inline wrapper so the «·» separator never dangles at
   the edge of a flex line. The compact density rules switch it to a block. */
.metric__mid {
  display: inline;
}
.metric__mid .metric__cpm {
  margin-left: 5px;
}
.metric__cpm {
  font: inherit;
  color: var(--color-ink-3);
}

/* Trend indicator (optional) */
.metric__trend {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: var(--font-num);
  font-weight: 500;
  font-size: 13px;
  font-feature-settings: "tnum" 1;
  margin-left: 4px;
}
.metric__trend i { font-size: 12px; line-height: 1; }
.metric__trend.up { color: var(--color-success); }
.metric__trend.down { color: var(--color-danger); }
.metric__trend i { font-size: 11px; }

/* Numbers (Sora tnum) — applies to any [data-num] span */
[data-num] {
  font-family: var(--font-num);
  font-feature-settings: "tnum" 1;
}