/* Predict2U v211 — mobile release polish
   Keeps overview metrics and board-card actions readable on phones, tablets and foldables. */

/* Engine activity summary: stable markup at every width. */
#s-engines-sub{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:7px;
  min-width:0;
}
.p2u-engine-avatar-stack{
  display:inline-flex;
  align-items:center;
  flex:0 0 auto;
  min-width:0;
}
.p2u-engine-avatar{
  width:24px;
  height:24px;
  flex:0 0 24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--panel);
  color:var(--muted);
  font-size:9px;
  font-weight:800;
  line-height:1;
}
.p2u-engine-avatar + .p2u-engine-avatar{margin-left:-6px}
.p2u-engine-avatar.is-primary{background:var(--em);color:#062e20}
.p2u-engine-avatar-more{font-size:8px}
.p2u-engine-activity-copy{margin:0!important;line-height:1.25;overflow-wrap:normal}

/* Keep card market and price from fighting for the same line. */
.p2u-standard-card .p2u-card-market{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
}
.p2u-standard-card .p2u-card-market .odds{float:none!important;justify-self:end}

@media (max-width:639px){
  /* The compact 2-column overview remains useful, but each card must lay out vertically. */
  #top>.grid.grid-cols-2{align-items:stretch}
  #top>.grid.grid-cols-2>.card{padding:18px!important;overflow:hidden}
  #top .t-num{font-size:clamp(46px,13vw,58px)!important;line-height:1!important}
  #s-engines-sub{
    flex-direction:column;
    align-items:flex-start;
    gap:7px;
    min-height:52px;
  }
  .p2u-engine-activity-copy{display:block;white-space:normal}

  /* Four actions become a predictable 2 × 2 grid instead of four squeezed flex items. */
  .p2u-standard-card .p2u-card-actions{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    align-items:stretch!important;
    gap:9px!important;
    width:100%;
  }
  .p2u-standard-card .p2u-card-actions>*{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    min-height:46px!important;
    margin:0!important;
    padding:10px 8px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    flex:none!important;
    border-radius:12px!important;
    white-space:nowrap!important;
    overflow:hidden;
    text-overflow:ellipsis;
    text-align:center!important;
    font-size:12px!important;
    line-height:1.15!important;
    letter-spacing:0!important;
  }
  .p2u-standard-card .p2u-card-actions .p2u-share-card-btn svg,
  .p2u-standard-card .p2u-card-actions .p2u-proof-button svg{
    flex:0 0 auto;
  }

  /* Prevent long fixture metadata and result labels from forcing the card wider. */
  .p2u-standard-card .p2u-card-meta{flex-wrap:wrap;row-gap:5px}
  .p2u-standard-card .p2u-card-status{margin-left:auto}
  .p2u-standard-card .p2u-card-teams{font-size:clamp(17px,5.2vw,20px)}

  /* Today's results heading reads as one mobile block instead of split columns. */
  #carousel-wrap>.flex:first-child{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:4px!important;
    align-items:start!important;
  }
  #carousel-count{line-height:1.45}
}

/* Fold-cover and very narrow phones still keep 2 × 2 actions; labels fit at 280px. */
@media (max-width:340px){
  #top>.grid.grid-cols-2{grid-template-columns:minmax(0,1fr)!important}
  #top>.grid.grid-cols-2>.card{padding:16px!important}
  #s-engines-sub{min-height:0}
  .p2u-standard-card .p2u-card-actions{gap:7px!important}
  .p2u-standard-card .p2u-card-actions>*{font-size:11px!important;padding-inline:6px!important}
}

/* Unfolded Fold and tablets: two cards per row, with action controls still comfortably sized. */
@media (min-width:640px) and (max-width:1180px){
  #s-engines-sub{align-content:flex-start}
  .p2u-standard-card .p2u-card-actions>*{min-height:42px}
}