/* scanner-v2 header stats style: no boxed metric cells, only inline separators */
.metric-strip-stats{
  margin-left:auto!important;
  flex:0 0 auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  align-self:stretch!important;
  gap:20px!important;
  padding:0!important;
}
.metric-strip-stats .metric-strip-item{
  min-width:auto!important;
  width:auto!important;
  height:auto!important;
  align-self:center!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-end!important;
  justify-content:center!important;
  gap:4px!important;
  padding:0!important;
  border-left:0!important;
  border-right:0!important;
  text-align:right!important;
  position:relative;
}
.metric-strip-stats .metric-strip-item + .metric-strip-item{
  margin-left:0!important;
  padding-left:20px!important;
}
.metric-strip-stats .metric-strip-item + .metric-strip-item::before{
  content:'';
  position:absolute;
  left:0;
  top:50%;
  width:1px;
  height:18px;
  transform:translateY(-50%);
  background:var(--line-strong);
}
.metric-strip-label{
  text-align:right!important;
}
.metric-strip-value{
  text-align:right!important;
}

/* ── Tablet (700–1100px): compact single row — one key metric on right ── */
.metric-mob-key { display: none; }

@media(min-width:701px) and (max-width:1100px){
  .metric-strip-stats { display: none !important; }
  .metric-mob-key {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 3px;
    flex-shrink: 0;
    padding-right: 16px;
  }
  .metric-mob-key .metric-strip-label { text-align: right !important; }
  .metric-mob-key .metric-strip-value { text-align: right !important; }
  .metric-strip-title {
    position: static !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
    background: transparent !important;
    padding-right: 0 !important;
  }
  .section-metrics-bar {
    overflow-x: hidden !important;
    justify-content: flex-start !important;
  }
}

/* ── Phone (≤700px): two-row subbar — title row + metrics row ── */
@media(max-width:700px){
  /* First row: title fills width */
  .metric-strip-title {
    position: static !important;
    flex: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 52px !important;
    min-height: 52px !important;
    padding: 0 16px !important;
    background: transparent !important;
    border-bottom: 1px solid var(--line) !important;
    box-sizing: border-box !important;
  }
  /* Second row: all metrics, scrollable, left-aligned */
  .metric-strip-stats {
    display: flex !important;
    flex: none !important;
    width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;
    margin-left: 0 !important;
    justify-content: flex-start !important;
    align-items: center !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 0 16px !important;
    gap: 0 !important;
    border-top: none !important;
  }
  .metric-strip-stats .metric-strip-item {
    align-items: flex-start !important;
    text-align: left !important;
    flex-shrink: 0 !important;
    padding: 0 16px 0 0 !important;
  }
  .metric-strip-stats .metric-strip-item + .metric-strip-item {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .metric-strip-stats .metric-strip-item + .metric-strip-item::before {
    top: 50% !important;
    height: 16px !important;
  }
  .metric-strip-label { text-align: left !important; }
  .metric-strip-value { text-align: left !important; }
  /* Hide single key metric (not needed at phone, full strip shown) */
  .metric-mob-key { display: none !important; }
}