/* v858: LIST on phones + iPad (<=1024px) - admin-friendly rows.
   1) Status column: pill on top, then ONE tidy line "eye N | people N | clock Nd" (was 3 stacked lines -> rows ~25% shorter, nothing cut off).
   2) Row dividers: soft gold hairline that fades in at the chevron and out at the right edge (instead of a hard full-width line); gentle press feedback.
   3) Rows breathe: more even top/bottom padding; empty "-" placeholders in the Offer column are hidden (less noise).
   Markup / JS untouched (CSS only). Loaded LAST. Roll back: remove this <link>. */
@media (max-width:1024px){
  /* ---------- 1. status column ---------- */
  html body .avl-m .m-status{
    display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;align-content:center;
    gap:6px 0;width:100%;
  }
  html body .avl-m .m-status .avl-status-badge{order:0;flex:0 0 100%;margin:0}
  html body .avl-m .m-status :is(.avl-viewings-badge,.bhuc-badge,.m-vd){
    height:auto!important;min-height:0!important;margin:0!important;padding:0!important;
    border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;transform:none!important;
    display:inline-flex;align-items:center;gap:2.5px;
    font:700 10.5px/1.1 var(--font-sans,inherit)!important;letter-spacing:-.1px;
    font-variant-numeric:tabular-nums;white-space:nowrap;
  }
  /* fixed slots: eye | people | days (pushed to the right edge) -> icons and numbers line up in every row */
  html body .avl-m .m-status .avl-viewings-badge{order:1;flex:0 0 24px;justify-content:flex-start;padding-left:3px!important;color:var(--navy-800,#16294a)}
  html body .avl-m .m-status .bhuc-s{order:2;flex:0 0 24px;margin:0;min-width:0;min-height:0}
  html body .avl-m .m-status .bhuc-badge{color:var(--navy-800,#16294a)}
  html body .avl-m .m-status .m-vd{order:3;flex:0 0 auto;margin-left:auto!important;padding-right:3px!important;justify-content:flex-end}
  html body .avl-m .m-status :is(.avl-viewings-badge,.bhuc-badge) i{font-size:9px!important;color:var(--gold-600,#a8842f)!important;opacity:.95}
  html body .avl-m .m-status .m-vd i{font-size:8.5px;opacity:.85}
  /* ---------- 3. rhythm ---------- */
  html body .avl-m{padding:11px 0;row-gap:5px}
  html body .avl-m .m-offer .m-none{visibility:hidden}

  /* ---------- 2. dividers ---------- */
  html body table.avl-table tbody tr.avl-row > td{border-bottom:0!important;border-top:0!important}
  html body table.avl-table tbody tr.avl-row > td.avl-col-expand{
    background-image:linear-gradient(90deg,rgba(199,164,91,0),rgba(199,164,91,.42));
    background-size:100% 1px;background-position:left bottom;background-repeat:no-repeat}
  html body .avl-mc::after{
    content:"";position:absolute;left:0;right:0;bottom:0;height:1px;pointer-events:none;
    background:linear-gradient(90deg,rgba(199,164,91,.42) 0,rgba(199,164,91,.42) calc(100% - 36px),rgba(199,164,91,0) 100%)}
  /* open row: its detail panel follows directly, so no divider on the row itself */
  html body table.avl-table tbody tr.avl-row.is-open > td.avl-col-expand{background-image:none}
  html body table.avl-table tbody tr.avl-row.is-open .avl-mc::after{display:none}
  /* press feedback */
  html body table.avl-table tbody tr.avl-row:active > td{background-color:rgba(199,164,91,.10)}
  html[data-theme="dark"] body table.avl-table tbody tr.avl-row > td.avl-col-expand{
    background-image:linear-gradient(90deg,rgba(230,200,119,0),rgba(230,200,119,.30))}
  html[data-theme="dark"] body .avl-mc::after{
    background:linear-gradient(90deg,rgba(230,200,119,.30) 0,rgba(230,200,119,.30) calc(100% - 36px),rgba(230,200,119,0) 100%)}
  html[data-theme="dark"] body .avl-m .m-status :is(.avl-viewings-badge,.bhuc-badge){color:#eaeef3}
  html[data-theme="dark"] body .avl-m .m-status :is(.avl-viewings-badge,.bhuc-badge) i{color:#e6c877!important}
}
/* phones: the status column is a little wider so the pill + the three facts (eye / people / days) fit on two clean lines.
   Header uses the same template, so its words stay over their columns. */
@media (max-width:699px){
  html body .avl-m,html body .avl-m-head{grid-template-columns:minmax(74px,1.1fr) 56px minmax(0,1fr) 14px 90px}
}
@media (max-width:379px){
  html body .avl-m,html body .avl-m-head{grid-template-columns:minmax(64px,1.1fr) 52px minmax(0,1fr) 12px 84px}
  html body .avl-m .m-status :is(.avl-viewings-badge,.bhuc-badge,.m-vd){font-size:9.6px!important;letter-spacing:-.2px}
  html body .avl-m .m-status .avl-viewings-badge,html body .avl-m .m-status .bhuc-s{flex-basis:20px}
  html body .avl-m .m-status .avl-viewings-badge{padding-left:1px!important}
  html body .avl-m .m-status .m-vd{padding-right:1px!important}
}
@media (max-width:340px){
  html body .avl-m,html body .avl-m-head{grid-template-columns:minmax(58px,1.1fr) 50px minmax(0,1fr) 12px 76px}
}