/* v631 - LIST on phones (< 700px): ONE fixed column template, identical in every sheet / building / area (nothing is measured any more).
   Fixes: Unit no. and Rate squeezed or drawn over each other, View column far wider than its words, Status column wide + pill cut at the screen edge,
   columns sitting at a different x in different sheets.
   Row:  [chevron] | Unit (fr) | Rate 58px | View (fr) | medal 14px (icon may overhang) | Status 80px
   Line 2 = Beds + FF | Offer chip | Size.   Line 3 = building name (hidden on one-building sheets).
   Loaded AFTER css/302. Tablets (700-1024px) and desktop are untouched. Roll back: remove this <link>. */
@media (max-width:699px){
  /* the chevron column gives a little room back to the data */
  table.avl-table th.avl-col-expand,table.avl-table td.avl-col-expand{width:28px;min-width:28px;padding:0 0 0 3px!important}
  .avl-mc{padding:0 7px 0 0}

  .avl-m,.avl-m-head{
    column-gap:5px;
    grid-template-columns:minmax(74px,1.15fr) 58px minmax(0,1fr) 14px 80px;
  }
  /* header words sit exactly over their columns */
  .avl-m-head{padding:8px 0}
  .avl-m-head .h-status{justify-self:center;padding:0}
  .avl-m-head .h-view{padding-left:0}

  /* Unit + Rate: always whole, never over a neighbour (long ids end with an ellipsis instead) */
  .m-unit-no{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--l-val)}
  .m-rate{white-space:nowrap;font-size:var(--l-val);letter-spacing:-.1px}
  .m-offer{min-width:0}
  .m-offer-chip{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  /* View: icon + word(s) use exactly the width of their column; size sits right under the words */
  .m-view{min-width:0;gap:3px}
  .m-view .m-vp{min-width:0;flex:0 1 auto;max-width:100%;overflow:hidden;text-overflow:ellipsis}
  .m-size{padding-left:calc(var(--l-mid)*1.15 + 3px)}   /* = icon width + gap: size lines up under the view word */
  .avl-m-head .h-view{padding-left:0}

  /* Status: every pill fills the same 80px column and is centred -> a clean, even column */
  .m-status{justify-self:stretch;align-items:center;min-width:0}
  .m-status .avl-status-badge,.m-status .avl-status-badge.m-st-long{
    box-sizing:border-box;width:100%;max-width:100%;justify-content:center;text-align:center;white-space:nowrap}
  .m-status .avl-status-badge.m-st-long{letter-spacing:0}
  /* admin pills carry a caret: long single words (CONTRACTED) drop the round icon so word + caret never touch */
  .m-status .avl-status-badge.is-editable.m-st-long:not([class*="out-of-market"]) > i:not(.avl-status-caret){display:none}
  .m-status .avl-status-badge.is-editable{padding-left:6px}
  /* "OUT OF MARKET" is the only label with spaces and > 9 letters: two short lines */
  .m-status .avl-status-badge[class*="out-of-market"]{white-space:normal;line-height:1.1}
  .m-flag{min-width:0;overflow:visible}
}
@media (max-width:399px){.m-bal{display:none}}            /* balcony tag only where there is room - same rule in every sheet */
@media (max-width:379px){
  .avl-m,.avl-m-head{column-gap:4px;grid-template-columns:minmax(64px,1.15fr) 54px minmax(0,1fr) 14px 74px}
}
@media (max-width:340px){
  .avl-m,.avl-m-head{grid-template-columns:minmax(58px,1.15fr) 50px minmax(0,1fr) 12px 68px}
  .m-view .m-vp > i,.m-view > .m-ic0{display:none}         /* 320px: the view word is more useful than its icon */
  .m-size{padding-left:0}
  .m-status .avl-status-badge.is-editable.m-st-long{font-size:7.2px;letter-spacing:-.15px;padding-right:13px}
}