/* ==========================================================================
   COMPONENTS · MEDALLION — the LETTERPRESS IMPRIMATUR. The overall assessment
   as the faintest debossed, keyline circular seal — "OVERALL ASSESSMENT ·
   MODERATE" — never a glossy bevel. Reads its band three ways: numeral, word,
   ink. Requires data-band on the element.
   ========================================================================== */

.op-medallion {
  --size: 8.5rem;
  inline-size: var(--size);
  block-size: var(--size);
  display: grid;
  place-content: center;
  text-align: center;
  gap: 0.1em;
  border-radius: var(--radius-seal);
  background: var(--surface-raised);
  color: var(--bk-ink, var(--text));
  /* a debossed disc inside a faint double keyline ring */
  border: 1px solid var(--rule-strong);
  box-shadow:
    var(--shadow-deboss),
    inset 0 0 0 0.5rem var(--surface-raised),
    inset 0 0 0 calc(0.5rem + 1px) color-mix(in oklab, var(--bk-line, var(--rule)) 70%, transparent);
}

.op-medallion__label {
  font-family: var(--font-furniture);
  font-size: var(--text-3xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps-wide);
  text-transform: uppercase;
  color: var(--text-secondary);
}

.op-medallion__value {
  font-family: var(--font-data);
  font-size: 2.4rem;
  font-weight: var(--weight-semibold);
  line-height: 1;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--bk-ink, var(--text));
}
.op-medallion__value-max {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.op-medallion__band {
  font-family: var(--font-furniture);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--bk-ink, var(--text));
}

/* No-data imprimatur: the disc carries the hatch, the seal still stands */
.op-medallion[data-band="none"] { background: transparent; }
.op-medallion[data-band="none"]::before {
  content: "";
  position: absolute;
  inset: 0.5rem;
  border-radius: var(--radius-seal);
  background-color: var(--surface);
  background-image: var(--hatch-image);
  z-index: -1;
}
.op-medallion[data-band="none"] { position: relative; }

.op-medallion--sm { --size: 6rem; }
.op-medallion--sm .op-medallion__value { font-size: 1.7rem; }
.op-medallion--lg { --size: 11rem; }
.op-medallion--lg .op-medallion__value { font-size: 3.2rem; }