/* NOMAD Live 3.41 · presentation-only recent match flow.
   Uses rolling deltas already present in /feed; detector and market logic stay untouched. */

.match-detail.is-flow-columns {
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:8px;
  align-items:start;
}

.detail-left-stack,
.detail-right-stack {
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:0;
}

.detail-left-stack {grid-column:1}
.detail-right-stack {grid-column:2}

.match-flow-card h3 {
  margin-bottom:7px;
}

.flow-legend {
  display:grid;
  grid-template-columns:62px 1fr 1fr;
  align-items:center;
  margin-bottom:4px;
  font-size:7px;
  font-weight:900;
  letter-spacing:.06em;
}

.flow-legend b {
  text-align:center;
}

.flow-home-label {color:var(--green)}
.flow-away-label {color:var(--muted)}

.flow-table {
  display:grid;
  gap:4px;
}

.flow-row {
  display:grid;
  grid-template-columns:62px 22px minmax(42px,1fr) 1px minmax(42px,1fr) 22px;
  gap:5px;
  align-items:center;
  min-height:17px;
}

.flow-label {
  color:var(--muted);
  font-size:7px;
  font-weight:900;
  letter-spacing:.02em;
}

.flow-value {
  color:#fff;
  font-size:8px;
  font-weight:900;
  text-align:center;
}

.flow-track {
  position:relative;
  display:block;
  height:5px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.04);
}

.flow-track i {
  position:absolute;
  top:0;
  bottom:0;
  display:block;
  border-radius:999px;
}

.flow-home-track i {
  right:0;
  background:var(--green);
}

.flow-away-track i {
  left:0;
  background:rgba(152,160,145,.58);
}

.flow-mid {
  width:1px;
  height:12px;
  background:rgba(255,255,255,.16);
}

@media(max-width:700px) {
  .match-detail.is-flow-columns {
    display:flex;
    flex-direction:column;
    gap:8px;
    align-items:stretch;
  }

  .detail-left-stack,
  .detail-right-stack {
    display:contents;
  }

  .detail-rolling-card {order:1}
  .detail-pressure-card {order:2}
  .detail-detector-card {order:3}
  .detail-flow-card {order:4}
  .detail-price-card {order:5}

  /* Balance the metric-label rail with an equal empty rail on the right.
     This keeps the HOME/AWAY midpoint on the true card center on mobile. */
  .flow-row {
    grid-template-columns:58px 21px minmax(36px,1fr) 1px minmax(36px,1fr) 21px 58px;
    gap:4px;
  }
  .flow-row::after {
    content:"";
    display:block;
    min-width:0;
  }

  .flow-legend {
    grid-template-columns:58px 1fr 1fr 58px;
  }
  .flow-legend::after {
    content:"";
    display:block;
    min-width:0;
  }
}

@media(max-width:420px) {
  .flow-row {
    grid-template-columns:52px 19px minmax(30px,1fr) 1px minmax(30px,1fr) 19px 52px;
    gap:3px;
  }
  .flow-legend {grid-template-columns:52px 1fr 1fr 52px}
  .flow-label {font-size:6.5px}
  .flow-value {font-size:7.5px}
}