/* TriFront Web Stage1068: readable value bands for vertically stacked cards. */

:root{
  --trf-stage1068-card-w:62px;
  --trf-stage1068-card-h:93px;
  --trf-stage1068-columns:1;
  --trf-stage1068-column-gap:6px;
  --trf-stage1068-value-band:18px;
  --trf-stage1068-stack-step:28px;
}

/*
 * The row owns a fixed number of equal-width columns. Cards first fill those
 * columns from left to right. Further cards enter the next 28px grid track.
 * The first 18px is reserved for the value badge and the following 10px is
 * clearance, so a later card never enters an earlier card's number area.
 */
#main .rowTop,
#main .rowBottom{
  display:grid !important;
  grid-template-columns:repeat(var(--trf-stage1068-columns), var(--trf-stage1068-card-w)) !important;
  grid-auto-flow:row !important;
  grid-auto-rows:var(--trf-stage1068-stack-step) !important;
  column-gap:var(--trf-stage1068-column-gap) !important;
  row-gap:0 !important;
  justify-content:center !important;
  justify-items:center !important;
  align-content:start !important;
  align-items:start !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  overflow-anchor:none !important;
  scrollbar-gutter:stable both-edges !important;
}

/* A lone card is centered and never gets a redundant vertical scrollbar. */
#main .rowTop.trf-stage1068-empty,
#main .rowBottom.trf-stage1068-empty,
#main .rowTop.trf-stage1068-single,
#main .rowBottom.trf-stage1068-single{
  overflow-y:hidden !important;
  scrollbar-gutter:auto !important;
}

@supports selector(.rowTop:has(> .card:only-child)){
  #main .rowTop:has(> .card:only-child),
  #main .rowBottom:has(> .card:only-child){
    overflow-y:hidden !important;
    scrollbar-gutter:auto !important;
  }
}

/*
 * Normal, highlighted and only-card states share the same outer geometry.
 * Stage1065's negative vertical margin is explicitly removed.
 */
#main .rowTop > .card,
#main .rowBottom > .card,
#main .rowTop > .card.recentCard,
#main .rowBottom > .card.recentCard,
#main .rowTop > .card:only-child,
#main .rowBottom > .card:only-child,
#main .rowTop > .card + .card,
#main .rowBottom > .card + .card{
  flex:0 0 var(--trf-stage1068-card-h) !important;
  width:var(--trf-stage1068-card-w) !important;
  min-width:var(--trf-stage1068-card-w) !important;
  max-width:var(--trf-stage1068-card-w) !important;
  height:var(--trf-stage1068-card-h) !important;
  min-height:var(--trf-stage1068-card-h) !important;
  max-height:var(--trf-stage1068-card-h) !important;
  aspect-ratio:auto !important;
  box-sizing:border-box !important;
  padding:0 !important;
  margin-top:2px !important;
  margin-right:0 !important;
  margin-bottom:2px !important;
  margin-left:0 !important;
  justify-self:center !important;
  align-self:start !important;
  border-width:3px !important;
  border-style:solid !important;
  position:relative !important;
  z-index:var(--trf-stage1068-layer, 1) !important;
}

/* Lock the battlefield number badge to the 18px band used by the stack math. */
#main .rowTop > .card .cardTop,
#main .rowBottom > .card .cardTop{
  min-height:var(--trf-stage1068-value-band) !important;
  max-height:var(--trf-stage1068-value-band) !important;
  line-height:14px !important;
  white-space:nowrap !important;
  z-index:4 !important;
}

#main .rowTop > .card .cardValue,
#main .rowBottom > .card .cardValue{
  box-sizing:border-box !important;
  min-height:var(--trf-stage1068-value-band) !important;
  max-height:var(--trf-stage1068-value-band) !important;
  line-height:14px !important;
  white-space:nowrap !important;
  position:relative !important;
  z-index:1 !important;
}

/* Preserve Stage1065's compact desktop clipping protection. */
@media (min-width:600px) and (max-height:780px) and (max-aspect-ratio:4/3){
  :root{
    --trf-stage1062-field-height:220px;
  }
}