/* layout.css — The layout and responsiveness of §5.6: one page, one breakpoint at 700px.
   
   Every media query in the panel is here, in the prototype's own order, so a breakpoint is
   found in one file rather than hunted across six. Loaded after components.css, which is
   what lets these rules override the desk layout.
   
   The viewport tag §5.6.1 calls mandatory is in base.html — without it none of this runs. */

@media (max-width:680px){.row{grid-template-columns:1fr 1fr}.row .val{grid-column:1/-1}}
/* §5.6.6 on the ported sentence row (phase 10): below 680px the sentence — the value cell — takes a
   line of its own, and the count, «؟» and «×» sit under it. Beside them it was ~140px wide and cut
   its own chips off. */
@media (max-width:680px){.srow{grid-template-columns:minmax(0,1fr) auto auto}.srow>.sent{grid-column:1/-1}}
.settings{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:24px;align-items:start}
@media (max-width:780px){.settings{grid-template-columns:1fr}}
.srcgrid{display:grid;grid-template-columns:240px minmax(0,1fr);gap:16px;align-items:start;margin-bottom:16px}
@media (max-width:780px){.srcgrid{grid-template-columns:1fr}}
.split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:20px}
@media (max-width:780px){.split{grid-template-columns:1fr}}
.split > div:first-child{display:grid;gap:10px;align-content:start}
.twocol{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;align-items:start}
@media (max-width:860px){.twocol{grid-template-columns:1fr}}
.stack{display:grid;gap:0}
.side{position:sticky;top:12px;display:grid;gap:12px}
@media (max-width:700px){.picker{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.acc2col{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start;margin-bottom:14px}
@media (max-width:820px){.acc2col{grid-template-columns:1fr}}
@media(max-width:720px){.qrow{grid-template-columns:1fr auto;row-gap:6px}}
/* ---- v8: the mobile round — the phone layout the locked design asks for ---- */
@media (max-width:700px){
  .app{padding:0 14px 40px}
  .bar{padding:12px 0;margin-bottom:16px;gap:8px 14px}
  .brand{font-size:15px}
  h1{font-size:20px}
  nav{width:100%;margin-inline-start:0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:6px}
  nav::-webkit-scrollbar{display:none}
  .navb{white-space:nowrap}

  /* a finger needs 44px */
  .btn,.navb,.tab,.seg button,.seg a,.mini,.chip,.stepc,.pitem,.pk-item,.emo,.sw,.icon,.menu-pop button,.fchip button,.frow .mv button,.frow .mv a,select,input[type=text],input[type=password],input[type=number],input[type=search]{min-height:44px}
  /* Phase 07's column-mapping grid is the first screen in the product with a tick box, and a
     browser's own is 13px — a third of what a finger needs, and the exact shape of the
     prototype's own measured failure. The box itself grows: a hit area larger than the thing
     it draws is a target people miss and then distrust. */
  input[type=checkbox],input[type=radio],input[type=file]{min-height:44px;min-width:44px}
  .btn,.navb,.tab,.seg button,.seg a,.mini,.chip,.stepc,.emo,.sw,.icon{display:inline-flex;align-items:center;justify-content:center}
  .link{min-height:44px;display:inline-flex;align-items:center}
  .frow .fn,.fopen,.srccard,.pitem{min-height:44px;align-items:center}
  .crumb{margin-bottom:0}
  .btn.small,.seg.small button,.warnbox .btn{font-size:14px;padding:0 14px}
  .icon{width:44px;height:44px;font-size:18px}
  .emo{width:44px;height:44px;font-size:20px}
  .sw{width:44px;height:44px;border-width:8px}
  select,input,textarea{font-size:16px}
  .seg{width:100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .seg::-webkit-scrollbar{display:none}
  .seg button{flex:1 0 auto;white-space:nowrap}
  .toolbar{display:grid;gap:10px}
  .toolbar input[type=search],.toolbar input[type=text],.toolbar select,.gsearch{width:100%;max-width:none}
  .toolbar .seg{margin-inline-start:0!important}
  .modebar{justify-content:stretch}

  /* a dense row becomes a card — the labels are the list's own header row */
  .atable,.sgrid,.mapgrid{background:transparent;border:0;border-radius:0;display:grid;gap:10px;overflow:visible}
  .arow,.srow2,.maprow{grid-template-columns:1fr 1fr!important;gap:10px 14px;border:1px solid var(--line);border-radius:12px;padding:14px}
  .arow.head,.srow2.head,.maprow.head{display:none}
  .arow>[data-l]::before,.srow2>[data-l]::before,.maprow>[data-l]::before,.tbl td[data-l]::before{content:attr(data-l);display:block;font-size:11px;color:var(--muted);font-weight:500;line-height:1.7}
  .arow>.nm,.arow>.btns,.srow2>:first-child,.maprow>:first-child{grid-column:1/-1}
  .arow>.btns .btn{width:100%}

  /* tables read as cards too */
  .tbl table,.tbl tbody,.tbl tr,.tbl td{display:block;width:auto}
  .tbl thead{display:none}
  .tbl tbody tr{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:10px}
  .tbl tbody tr.sel{border-color:var(--accent);background:var(--accent-tint)}
  .tbl tbody tr.sel td,.tbl tbody tr:hover td{background:transparent}
  .tbl td{border:0;padding:0}
  .tbl td:first-child{grid-column:1/-1;font-weight:700;font-size:15px}
  .tbl td[colspan]{grid-column:1/-1}

  /* the compact folder list keeps every column and scrolls inside its own box;
     on a phone the card view is what opens first */
  .flist{overflow-x:auto}
  .frow{min-width:620px}

  /* dialogs become sheets */
  .overlay{padding:0;align-items:flex-end}
  .dialog,.dialog.wide{width:100%;max-width:none;max-height:92vh;border-radius:16px 16px 0 0;padding:18px 16px}
  .plist{grid-template-columns:1fr}

  .nowbox,.tiles,.defgrid,.evlist li,.qrow,.srcchecks{grid-template-columns:1fr}
  .picker{min-height:0}
  .pk-list{max-height:44vh}
  .bandrow{grid-template-columns:1fr 1fr;gap:4px 10px}
  .impactbar{position:static;padding:14px}
  .crow{grid-template-columns:20px minmax(0,1fr)}
  .crow>:last-child{grid-column:2}
  .slotbar,.nameinput,.titleedit .nameinput,.progress{width:100%}
  .rowcount{text-align:start}
  pre{max-height:44vh}
}