/* CoffeeSpecs — Data Point: la riga di registro (design guide v2.0 §4.8)
   Etichetta ······ valore. Il puntinato guida l'occhio come in un listino
   stampato e regge a qualsiasi larghezza: è la nostra risposta al mobile. */

.data-point {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 0;
  font-size: var(--text-sm);
}

.data-point__label {
  display: flex;
  align-items: baseline;
  flex: 1;
  min-width: 0;
  color: var(--color-text-secondary);
  font-weight: 400;
}

/* Il puntinato: vive nell'etichetta così i template non cambiano */
.data-point__label::after {
  content: "";
  flex: 1;
  min-width: 16px;
  margin: 0 0 0.3em 8px;
  border-bottom: 1px dotted var(--color-border-strong);
}

.data-point__value {
  flex-shrink: 0;
  color: var(--color-text-primary);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.data-point__unit {
  color: var(--color-text-tertiary);
  margin-left: 3px;
}

.data-point__imperial {
  color: var(--color-text-tertiary);
}