/* ================= Responsive layer =================
   phone  (< 640)    : one column, bottom tab bar, bottom sheets            (the original design)
   tablet (640-1023) : wider single column + 2-column card lists, bottom tab bar, centred dialogs
   laptop (>= 1024)  : full-width top navigation bar, content up to 1180px, 3-column card lists
   Rules here only OVERRIDE app.css; nothing is hidden or removed on small screens. */
:root{--content:430px}
.tabbar .brand{display:none}
.tabbar.desk-only{display:none}
img,svg,video{max-width:100%}
.screen > *{min-width:0}
.card,.li,.row .grow{min-width:0}
.card .grow b,.li .grow b{overflow-wrap:anywhere}
h1,h2,h3,p{overflow-wrap:anywhere}
.phone{max-width:var(--content)}
.tabbar{max-width:var(--content)}

/* very small phones (320-359) */
@media(max-width:359px){
  .screen{--px:12px}
  .slots{grid-template-columns:repeat(3,1fr)}.dates{grid-template-columns:repeat(4,1fr)}
  .grid3{grid-template-columns:repeat(2,1fr)}.grid4{grid-template-columns:repeat(3,1fr)}
  .otp input{width:40px;height:50px}.otp{gap:6px}
  .btns{flex-wrap:wrap}.btns .btn{min-width:120px}
  .tabbar a{font-size:10px}
}

/* ---------- tablet ---------- */
@media(min-width:640px){
  :root{--content:700px}
  .screen{--px:24px;padding-top:22px}
  .screen.has-tabs{padding-bottom:104px}
  .grid3{grid-template-columns:repeat(3,1fr)}
  .slots{grid-template-columns:repeat(6,1fr)}.dates{grid-template-columns:repeat(8,1fr)}
  /* sheets become centred dialogs */
  .sheet-bg{align-items:center;padding:20px}
  .sheet{max-width:560px;border-radius:26px;padding:22px 24px 26px}
  .sheet .grab{display:none}
  /* card lists flow into columns on screens marked .wide */
  .screen.wide{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-content:start;align-items:start}
  .screen.wide > *{grid-column:1/-1}
  .screen.wide > .card:not(.tint):not(.warn):not(.green):not(.navy):not(.hero):not(.full),.screen.wide > .cell{grid-column:auto}
  .screen.wide > .sticky-cta{grid-column:1/-1}
}

/* ---------- laptop / desktop ---------- */
@media(min-width:1024px){
  :root{--content:1180px}
  body{background:var(--sky)}
  #root{display:block}
  .phone{max-width:none;width:100%;box-shadow:none}
  /* tab bar -> sticky top navigation */
  .tabbar,.tabbar.desk-only{display:flex;order:-1;position:sticky;top:0;bottom:auto;left:auto;transform:none;width:100%;max-width:none;border-radius:0;padding:10px max(28px,calc((100vw - var(--content))/2 + 32px));gap:6px;justify-content:flex-start;align-items:center;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);box-shadow:0 2px 16px rgba(19,35,63,.08)}
  .tabbar .brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px;margin-right:22px;color:var(--navy)}
  .tabbar .brand .mk{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#FF8A5B,#FD5E53);color:#fff}.tabbar .brand .mk svg{width:18px;height:18px}
  .tabbar a{flex:none;flex-direction:row;gap:8px;padding:9px 16px;font-size:14px;border-radius:12px}
  .tabbar a svg{width:18px;height:18px}
  .tabbar a.on{background:var(--soft)}.tabbar a.on::before{display:none}
  .tabbar .cnt{position:static;margin-left:2px}
  /* content: forms/detail pages stay a readable column, list pages use the full width */
  .screen{--px:32px;max-width:820px;margin:0 auto;width:100%;padding:30px var(--px) 56px}
  .screen.has-tabs{padding-bottom:56px}
  .screen.wide{max-width:var(--content);grid-template-columns:repeat(3,minmax(0,1fr))}
  .screen.pad0{max-width:820px}
  .sticky-cta{position:sticky;bottom:0}
  .map.tall{height:calc(100vh - 150px)}
  .toast{font-size:14px}
}
@media(min-width:1024px) and (max-width:1279px){.screen.wide{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1600px){:root{--content:1280px}}

/* ---------- login / OTP: a centred card on tablet+ ---------- */
@media(min-width:640px){
  .screen.auth{max-width:480px;margin:0 auto;justify-content:center;padding:40px 24px}
  .screen.auth .sheetpanel{border-radius:26px;margin:0;flex:none;box-shadow:var(--shadow)}
}

/* ---------- admin console ---------- */
.adm main{max-width:1560px;margin-left:auto;margin-right:auto;width:100%}
.adm main table.t{display:block;overflow-x:auto}
@media(max-width:1100px){.adm{grid-template-columns:200px 1fr}.adm main{padding:18px 20px}.cols.c4{grid-template-columns:repeat(2,1fr)}.cols.c2{grid-template-columns:1fr}}
@media(max-width:860px){.adm{grid-template-columns:1fr}.adm aside{padding:10px 12px;gap:6px;position:static;height:auto;flex-direction:row;overflow-x:auto;align-items:center}.adm aside a{white-space:nowrap;flex:none}.cols.c3{grid-template-columns:1fr}}

/* ---------- misc safety nets ---------- */
.qr img{max-width:100%;height:auto;aspect-ratio:1}
.copy .v{min-width:0}
table.t{max-width:100%}
.toast{max-width:min(92vw,420px)}

/* ---------- admin console: never wider than the screen ---------- */
.adm main{min-width:0;overflow-x:clip}
.adm main *{min-width:0}
.adm main .top{flex-wrap:wrap}
.adm main .row{flex-wrap:wrap}
.adm main .row.sb{flex-wrap:nowrap}
.adm main .seg{max-width:100%;overflow-x:auto;scrollbar-width:none}.adm main .seg::-webkit-scrollbar{display:none}
.adm main .seg button{white-space:nowrap}
.adm main .search.grow{flex:1 1 220px}
.adm main .chips{max-width:100%}
.adm main .card,.adm main .stack,.adm main .stack-lg{max-width:100%}
.adm main .li{flex-wrap:wrap}
.adm main .li .grow{flex:1 1 160px}
@media(max-width:860px){
  .adm main .seg{width:100%!important}
  .adm main .stat b{font-size:22px}
  .adm main .cols,.adm main .cols[style]{grid-template-columns:1fr!important}
  .adm main .top .grow{flex:1 1 200px}
  .adm aside .grow{display:none}
  .adm aside > .card{flex:none;padding:6px 10px}
  .adm aside > .row{flex:none;padding:0 8px 0 0!important}
  .adm aside .tiny{display:none}
}

/* ---------- compact rows (schedules, breaks): time/date inputs may shrink on phones ---------- */
@media(max-width:639px){
  input[type="time"].input,input[type="date"].input{width:auto!important;flex:1 1 64px;min-width:0;padding-left:6px!important;padding-right:4px!important;font-size:13px}
  .li > .input{min-width:0}
}