/* V89 — values can use more vertical space; status + demand always stay readable. */

/* Give the right-side metrics a stable readable column. */
.vv-card-layout{
  grid-template-columns:minmax(0,1fr) 108px!important;
  align-items:center!important;
  gap:10px!important;
}

.vv-card-metrics{
  min-width:108px!important;
  width:108px!important;
  overflow:visible!important;
  align-items:flex-end!important;
  justify-content:center!important;
  gap:6px!important;
}

.vv-card-metrics .status,
.vv-card-metrics .item-tags,
.vv-card-metrics .demand-badge{
  max-width:100%!important;
  overflow:visible!important;
  white-space:nowrap!important;
}

/* The value section may become two clean rows instead of hiding status/demand. */
.vv-card-values{
  min-width:0!important;
  overflow:visible!important;
}

.vv-card-values .value-display,
.vv-card-values .value-display.dual-value{
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  gap:4px!important;
  min-width:0!important;
  max-width:100%!important;
  overflow:visible!important;
  white-space:normal!important;
  line-height:1.2!important;
  font-size:.98rem!important;
}

/* Keep each currency number together. */
.vv-card-values .value-display > span,
.vv-card-values .value-display.dual-value > span{
  display:inline-flex!important;
  align-items:center!important;
  gap:4px!important;
  white-space:nowrap!important;
  min-width:max-content!important;
}

/* Slash stays visible, but can move to the next line with the conversion if needed. */
.vv-card-values .value-display.dual-value > i{
  display:inline!important;
  flex:0 0 auto!important;
  white-space:nowrap!important;
  margin:0 1px!important;
}

/* Long conversions go below the raw value rather than underneath the metrics. */
.vv-card-values .value-display.dual-value > span:last-child{
  max-width:100%!important;
}

/* Make every card's data area tall enough for a wrapped conversion, not by clipping. */
.item-card-body.vv-card-ready,
.beequip-copy.vv-card-ready{
  min-height:88px!important;
}

@media(max-width:700px){
  .vv-card-layout{
    grid-template-columns:minmax(0,1fr) 102px!important;
    gap:8px!important;
  }
  .vv-card-metrics{
    min-width:102px!important;
    width:102px!important;
  }
}