/* ============================================================
   Perch — RESPONSIVE
   Every @media this screen adds lives here, and this file always
   loads last. (tokens.css, base.css and data.css keep the small
   breakpoint rules that already shipped inside them in hdw-ui —
   moving proven, unrelated rules out of the files they were tested
   in is its own way of breaking something. Everything below is new,
   written for Perch, and belongs here from the start.)
   ============================================================ */

/* the confirm dialog becomes a bottom sheet on a phone too — full width,
   rounded top, a grab handle, the same shape the row/settings sheet in
   data.css already uses */
@media(max-width:640px){
  .modal-overlay{padding:0;align-items:flex-end;}
  .modal{max-width:100%;width:100%;max-height:95dvh;border-radius:var(--r-box) var(--r-box) 0 0;border-bottom:none;}
  .modal-overlay.open .modal{animation:hdwSheetIn .42s var(--spring);}
  .modal::before{content:'';display:block;width:36px;height:4px;background:var(--border2);border-radius:2px;margin:8px auto 0;flex:0 0 auto;}
  .modal-header{padding:16px 18px;}
  .modal-body{padding:18px;}
  .modal-footer{padding:12px 18px;padding-bottom:max(12px,env(safe-area-inset-bottom));}

  /* 16px stops iOS zooming the whole page when a smaller input takes focus —
     the sign-in gate and the settings add-rule fields are the only inputs
     on this screen, and both matter on the phone he actually uses this on */
  .field input{font-size:16px;}
}

/* Done / Snooze: no hover on a phone, so the actions stay on screen. On a
   desk with a mouse they wait for a hover or a keyboard focus, so a resting
   list of ten rows does not print twenty buttons nobody is pointing at. */
@media(hover:hover) and (min-width:769px){
  .row-acts{max-height:0;overflow:hidden;opacity:0;margin-top:0;transition:max-height var(--dur) var(--ease),opacity var(--dur) var(--ease),margin-top var(--dur) var(--ease);}
  .list-row:hover .row-acts,.list-row:focus-within .row-acts{max-height:60px;opacity:1;margin-top:var(--s-2);}
}

/* A phone reads Robots through the log in exactly one column, top to bottom,
   in the order the spec gives. A wide desk is told it "may" use two columns,
   so here — and only here — the middle sections flow into two native CSS
   columns. Reading order in the HTML, and therefore for a phone, a keyboard
   and a screen reader, never changes: this is paint only. */
@media(min-width:1080px){
  /* display:block, not flex: CSS multi-column has no effect on a flex container */
  .wall-cols{display:block;column-count:2;column-gap:var(--s-5);}
  .wall-cols > *{break-inside:avoid;margin-bottom:var(--s-5);}
}