/* Phone layout. Everything here is inside a narrow-screen query, so computers and wide tablets
   look exactly as before. Used by every page, including the Order Tracker. */
@media (max-width:640px){
  html{-webkit-text-size-adjust:100%}
  body{font-size:16px}
  /* top bar: name + sign out on one line, the pages as a 3 x 2 grid of big buttons underneath */
  .topbar .in{padding:8px 12px 10px;gap:8px;min-height:0}
  .topbar .brand{font-size:17px;flex:1}
  .topbar .who{margin-left:0;font-size:14px}
  .topbar .who a{display:inline-block;padding:8px 0}
  .topbar nav,.topbar .nav{order:3;flex:1 0 100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:0;overflow:visible}
  .topbar nav a,.topbar .nav a{display:flex;align-items:center;justify-content:center;text-align:center;min-height:44px;padding:6px 4px;
    white-space:normal;line-height:1.15;font-size:14px;background:rgba(255,255,255,.55);border:1px solid var(--line);border-radius:8px;opacity:1}
  .topbar nav a[aria-current="page"],.topbar .nav a[aria-current="page"]{background:var(--surface);border-color:var(--brand);box-shadow:inset 0 -3px 0 var(--brand)}

  .wrap{padding:16px 12px 48px}
  .head,header{align-items:flex-start}
  h1{font-size:26px}
  h2{font-size:19px}

  /* bigger tap targets; 16px text stops iPhone zooming in on fields */
  .btn,.tab,.tick,.done-tag{min-height:44px;padding:10px 16px;font-size:15px;display:inline-flex;align-items:center;justify-content:center}
  .lt{min-height:38px;padding:6px 10px;font-size:13px}
  .linkbtn,.undo,.rm,.qedit,.due button,.due-add{padding:8px 4px;font-size:14px}
  input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea{font-size:16px!important;min-height:44px}
  input[type=file]{font-size:15px}
  .settings .switch input,input[type=checkbox]{width:22px;height:22px}
  .side a{padding:10px 8px}
  form.inline{display:inline-block}

  /* tables become stacked cards; each cell shows its column name (data-label) */
  table.list,table.list tbody,table.list tr,table.list td{display:block;width:100%}
  table.list{background:none;border:0;border-radius:0}
  table.list tr:has(> th){display:none}
  table.list tr{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:8px 12px;margin-bottom:10px}
  table.list td{border:0;padding:3px 0}
  table.list td[data-label]::before{content:attr(data-label);display:block;font:600 11px var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
  table.list td:empty{display:none}
  table.list td.hide-sm{display:none}
  table.list td a{display:inline-block;padding:4px 0}

  /* report pages: the report goes full width, the side panel below it */
  .layout{gap:14px}
  .frame{min-height:60vh}

  /* Order Tracker: each part line becomes two rows (what + qty, then SKU + buttons) */
  .lines{overflow:visible}
  .lines table,.lines tbody{display:block}
  .lines tr{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"desc q" "sku ls";gap:2px 10px;border-top:1px solid var(--line);padding:8px 0}
  .lines td{border:0;padding:0}
  .lines td.sku{grid-area:sku;align-self:center;white-space:normal;word-break:break-all}
  .lines td:nth-child(2){grid-area:desc}
  .lines td.q{grid-area:q}
  .lines td.ls{grid-area:ls;width:auto;white-space:normal}
  .up-row label{flex-basis:100%}
  .up-row .btn{width:100%}
  .tabs{width:100%}
  .tabs .tab{flex:1}
}