/* The whole prototype on a phone (added in round 16, read only by index.html). The prototype is responsive: its menu becomes a drawer below 960px.
   One place was left that does not fit a phone: the Data Quality card keeps four columns that need about 340px, so its Review buttons were cut off by the card.
   Below 520px the rows use the same layout the case study's slices use: the name and the Review button together, the status and the count beneath. */
@media (max-width:520px){
  .dq-head-row{display:none;}
  .dq-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;}
  .dq-row::after{content:'';flex-basis:100%;height:0;order:2;}
  .dq-row>:nth-child(1){order:1;flex:1 1 100px;min-width:100px;}
  .dq-row>:nth-child(4){order:2;flex:0 0 auto;}
  .dq-row>:nth-child(2){order:3;flex:0 0 auto;}
  .dq-row>:nth-child(3){order:4;flex:0 0 auto;}
  .dq-row>:nth-child(4) .btn{width:auto!important;min-width:72px;padding:0 14px;}
  .dq-flag-val::after{content:' flagged';font-size:12px;font-weight:600;color:var(--n800);}
}

/* iOS zooms the page when a field under 16px takes focus, and a visitor on a phone would find the whole page enlarged: fields are 16px on a phone (round 16) */
@media (max-width:640px){
   input, select, textarea{font-size:16px!important;}
}

/* Round 23: review rows on a phone. The flyout rows are desktop tables (up to six columns, set inline), so the Action column of Update Year Built and Schools and Childcare sat
   past the edge of the screen. Below 760px each row becomes a card, as it already does in the case study's slices (slice.css): the details wrap, and the actions stack in the same
   order in every check: the main action first (Accept or Approve), then Edit or Ignore, then Delete. */
@media (max-width:760px){
  .chk-row,.dr-item-row{display:flex!important;flex-wrap:wrap;align-items:flex-start;gap:8px 14px;}
  .chk-col-head,.dr-col-head{display:none!important;}
  .chk-actions,.dr-actions-cell{flex-direction:column;align-items:stretch;gap:6px;min-width:112px;}
  .chk-actions .btn-primary,.dr-actions-cell .btn-primary{order:-1;}
  .chk-actions .chk-undo,.dr-actions-cell .chk-undo{order:2;align-self:flex-start;}
}
/* the 78-line cluster on a phone: the list is the point, so it takes the full width and the map steps aside, as it does in the case study's slices (the prototype lays the panel over the right 60% of the screen) */
@media (max-width:640px){
  #geoFlyoutBg .split-map,#geoFlyoutBg #geoContext{display:none!important;}
  #geoFlyoutBg .geo-cluster-panel{width:100%;}
  #geoFlyoutBg .slide-foot,#geoClusterFoot,#geoClusterFoot>div{flex-wrap:wrap;}
  #geoFlyoutBg .slide-foot>.tbl-count-txt{flex:1 1 100%;}
}