/* ============ RESPONSIVE — mobile / tablet / small screens ============
   Loaded last: wins the cascade over app.css / hub.css / v0-landing-app.css. */

/* ---------- shared: prevent stray horizontal scroll on touch ---------- */
@media(max-width:920px){
  html,body{overflow-x:hidden}
}

/* ---------- shared: comfortable tap targets & no iOS focus-zoom ---------- */
@media(max-width:640px), (pointer:coarse) and (max-width:920px){
  #stageApp input[type=text],#stageApp input[type=email],#stageApp input,
  #stageApp select,#stageApp textarea,
  #stageHub input,#stageHub select,#stageHub textarea{font-size:16px !important}
  #stageApp .dd .dd-btn{min-height:42px}
  #stageApp .dd .dd-opt{padding:11px 14px}
}

/* ============================ LANDING ============================ */
@media(max-width:820px){
  #stageLanding .lnav .inner{padding:12px 18px;gap:10px}
}
@media(max-width:640px){
  /* nav: keep brand + CTAs on one line */
  #stageLanding .lbrand{font-size:14px;white-space:nowrap;gap:7px}
  #stageLanding .lnav .lcta{gap:8px}
  #stageLanding .lnav .lcta .lbtn{white-space:nowrap;padding:8px 13px !important;font-size:13px}

}

@media(max-width:920px){
  /* .lband zeroes horizontal padding when combined with .lc on the same node */
  #stageLanding .lband.lc{padding-left:20px;padding-right:20px}
  #stageLanding section[id]{scroll-margin-top:76px}
}
@media(max-width:640px){
  #stageLanding .lc{padding:0 20px}

  #stageLanding .lband{padding:64px 0}

  /* globe hub labels clutter a phone screen */

}

/* ============================ PRELOADER ============================ */
@media(max-width:640px){

  #stagePre #skip{right:14px;bottom:14px}
  #stagePre #boot{width:calc(100% - 40px)}

}

/* ============================ HUB (desk) ============================ */
@media(max-width:680px){
  /* the desk is a fixed full-screen flex center — let it scroll instead */
  #stageHub .hub{overflow-y:auto;justify-content:flex-start;padding:96px 18px 44px}
  #stageHub .hub h1{font-size:clamp(21px,6vw,28px)}
  #stageHub .modules{margin-top:24px;gap:14px}
  #stageHub #hubBrandTL{left:14px;top:14px}

  /* decorative status collides with the brand card on a phone */
  #stageHub #status{display:none}
  /* side tabs: slimmer, and give the desk extra side padding so cards clear them */
  #stageHub .hub{padding-left:34px;padding-right:34px}
  #stageHub #svcTab,#stageHub #statsTab{padding:11px 7px;font-size:9.5px;letter-spacing:.14em}
  #stageHub #statsPanel{width:min(278px,88vw)}

}

/* auth / onboarding cards */
@media(max-width:640px){
  #stageHub #auth{padding:14px}
  #stageHub .authpad{padding:22px 18px 24px}
  #stageHub .authpad .li-auth{min-height:48px}
  #stageHub #onb{padding:14px}
  #stageHub .onbpad{padding:18px 16px 18px}
  #stageHub .onb-grid2{grid-template-columns:1fr}
}
@media(max-height:720px){
  /* short viewports (landscape phones, small laptops, soft keyboard open) */
  #stageHub #auth,#stageHub #onb{align-items:flex-start;overflow-y:auto}
  #stageHub .authbox,#stageHub .onbbox{margin:18px auto}
}

/* services overview: fixed 100svh 2x2 grid can't fit a phone — single column, page scrolls */
@media(max-width:760px){
  #stageHub #servicesView{overflow-y:auto}
  #stageHub .sv-wrap{height:auto;min-height:100svh;overflow:visible;padding-top:64px}
  #stageHub #servicesView .sv-cards{grid-template-columns:1fr !important;grid-template-rows:none !important;gap:14px !important;
    flex:0 0 auto !important;height:auto !important}
  #stageHub #servicesView .svc-big{height:auto !important;min-height:auto !important}
  #stageHub #servicesView .svc-big .bpad{height:auto !important}
  #stageHub #servicesView .sv-top{position:static !important;left:auto !important;top:auto !important;margin-bottom:14px}
}
@media(max-width:640px){
  #stageHub .svc-pwrap{padding:22px 16px 48px}
}

/* ============================ APP: chrome ============================ */
@media(max-width:640px){

  #appBack{left:12px;top:12px}
  #appBack button{padding:7px 12px !important;font-size:11px}
  #stageApp nav .inner{padding-left:96px;padding-right:16px}
}

/* ============================ APP: tracker dashboard ============================ */
@media(max-width:980px){
  /* undo the desktop "cockpit" (fixed KPI bar + internal-scroll panels):
     on small screens the page itself scrolls */
  #stageApp #trk-dashboard{height:auto !important;overflow:visible !important}
  #stageApp #trk-dashboard > .kpi-row{
    position:static !important;left:auto !important;transform:none !important;
    width:100% !important;margin:0 0 14px !important;pointer-events:auto;
    justify-content:flex-start !important;
  }
  #stageApp #trk-dashboard > .kpi-row .kpis{margin:0 !important;width:100%}
  #stageApp #trk-dashboard .trk-split{overflow:visible !important;height:auto !important}
  #stageApp #trk-dashboard .track-panel{display:block !important;height:auto !important;overflow:visible !important}
  #stageApp #trk-dashboard .trktable{height:auto !important;overflow:visible !important;display:block !important}
  #stageApp #trk-dashboard #trkRows{overflow:visible !important;max-height:none !important}
  #stageApp #trk-dashboard .inbox-panel{height:auto !important;overflow:visible !important}
  /* inbox keeps its own internal scroll, but bounded */
  #stageApp #trk-dashboard .inbox-list{max-height:340px !important}
}
@media(max-width:640px){
  #stageApp .kpis{grid-template-columns:repeat(2,1fr);width:100%}
  #stageApp .kpi{padding:10px 12px}
  #stageApp .kpi .v{font-size:20px}
  #stageApp .kpi .l{font-size:8.5px;letter-spacing:.08em}
  #stageApp .trkbar{gap:8px}
  #stageApp .trkbar > *{flex:1 1 100% !important}
  #stageApp .trk-row{grid-template-columns:20px 1fr 108px;gap:8px;padding-right:8px}
  #stageApp .inbox-h{flex-wrap:wrap;row-gap:8px}

  #stageApp .inbox-h .ib-tg{padding:7px 12px;min-height:34px}
  #stageApp .ib-actions{gap:6px}
  #stageApp .ib-apply,#stageApp .ib-discard{min-height:34px}
}

/* ============================ APP: checkout / config / modals ============================ */
@media(max-width:640px){
  #stageApp .pg-wrap{padding:16px 18px 22px}
  #stageApp .pg-head p{white-space:normal}
  #stageApp .dbc-block,#stageApp .cfg-block{padding:12px}
  #stageApp .chip{min-height:36px}
  #stageApp .intel{padding:10px}
  #stageApp .intel-card{max-height:94vh}
  #stageApp .ntf-modal{padding:10px}
  #stageApp .ntf-modal-card{max-height:94vh;overflow-y:auto}
  #stageApp .tlk-term{border-radius:0 0 24px 24px !important}

}