/* NAGARIM V16.2 — authoritative mobile layout */
@media(max-width:760px){
 html,body{width:100%!important;max-width:100%!important;overflow-x:hidden!important}
 body{margin:0!important}*,*:before,*:after{box-sizing:border-box!important}
 img,svg,video,canvas{max-width:100%!important}
 .wrap,.container,.shell,.content,.main{width:100%!important;max-width:100%!important;padding-left:14px!important;padding-right:14px!important}

 /* header */
 header .wrap.nav,.nav{width:100%!important;min-height:0!important;padding:12px 14px!important;display:flex!important;flex-direction:column!important;gap:10px!important}
 header .logo{order:1!important;margin:0!important;text-align:center!important;font-size:24px!important;line-height:1.1!important}
 header .navlinks{order:2!important;width:100%!important;display:flex!important;flex-wrap:wrap!important;justify-content:center!important;gap:7px!important}
 header .navlinks>a{font-size:13px!important;padding:8px!important;min-height:40px!important;display:flex!important;align-items:center!important}
 header .nagarimLangSlot{order:3!important;width:100%!important;display:flex!important;justify-content:center!important;margin:0!important;min-width:0!important}
 header .nagarimLangSlot .nagarimLang,.nagarimLang{position:static!important;inset:auto!important;transform:none!important;margin:0 auto!important;display:flex!important;width:max-content!important;max-width:100%!important}
 header .outline{order:4!important;width:100%!important;max-width:230px!important;margin:0 auto!important}

 /* hero */
 .hero,.heroWrap,.hero-section{height:auto!important;min-height:0!important;padding:34px 0!important;overflow:hidden!important}
 .hero .wrap,.hero .container{display:flex!important;flex-direction:column!important;gap:24px!important}
 .hero h1{font-size:clamp(38px,11vw,56px)!important;line-height:1.03!important;margin:8px 0 16px!important}
 .hero p{font-size:18px!important;line-height:1.55!important}
 .hero .actions,.heroActions,.hero .ctaRow{display:flex!important;flex-direction:column!important;gap:10px!important;width:100%!important}
 .hero .actions>a,.hero .actions>button,.heroActions>a,.heroActions>button,.hero .ctaRow>a,.hero .ctaRow>button{width:100%!important;max-width:100%!important;min-height:52px!important;margin:0!important;display:flex!important;align-items:center!important;justify-content:center!important;white-space:normal!important;text-align:center!important}
 .hero .search,.hero .searchBox,.searchbox,.search-box{width:100%!important;max-width:100%!important;margin:0!important;padding:18px!important;border-radius:18px!important}
 .hero .search form,.searchbox form,.search-box form{display:grid!important;grid-template-columns:1fr!important;gap:10px!important}

 /* generic screens */
 .grid,.cards,.projects,.leads,.matches,.quotes{display:grid!important;grid-template-columns:1fr!important;gap:12px!important}
 .card,.panel,.lead,.quoteBox,.project-card,.projectCard{width:100%!important;max-width:100%!important;margin-inline:0!important}
 .actions,.projectActions{display:flex!important;flex-direction:column!important;gap:8px!important;width:100%!important}
 .actions>a,.actions>button,.projectActions>a,.projectActions>button{width:100%!important;min-height:46px!important;text-align:center!important}
 input,select,textarea{width:100%!important;max-width:100%!important;font-size:16px!important}
 table{display:block!important;max-width:100%!important;overflow-x:auto!important}

 /* Studio */
 #wizard,.wizard,.wizardStep,.stage,.studioShell,.studio-layout,.workspace{width:100%!important;max-width:100%!important;min-width:0!important}
 #wizard{padding:12px!important}
 #wizard h1,.wizard h1{font-size:30px!important;line-height:1.08!important}
 #wizard h2,.wizard h2{font-size:24px!important}
 #wizard .choices,#wizard .choiceGrid,#wizard .cards,.wizard .choices,.wizard .choiceGrid,.wizard .cards{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;width:100%!important}
 #wizard .choice,#wizard .option,.wizard .choice,.wizard .option{width:100%!important;min-width:0!important;max-width:none!important;margin:0!important}
 #wizard .choice img,#wizard .option img,.wizard .choice img,.wizard .option img{width:100%!important;height:105px!important;object-fit:cover!important}
 .topbar,.studioTop,.toolbar{width:100%!important;height:auto!important;display:flex!important;flex-wrap:wrap!important;gap:6px!important;padding:8px!important}
 .studio-layout,.workspace{display:flex!important;flex-direction:column!important;height:auto!important}
 .sidePanel,.sidebar,.properties,.controls{position:static!important;width:100%!important;max-width:100%!important;height:auto!important;max-height:none!important;overflow:visible!important}
 .viewport,.canvasWrap,.scene,.viewer{width:100%!important;max-width:100%!important;min-width:0!important;height:52vh!important;min-height:330px!important}
 .readonlyProjectBadge{position:sticky!important;top:6px!important;left:auto!important;transform:none!important;max-width:calc(100% - 16px)!important;margin:6px auto!important;text-align:center!important}
}


/* ===== Mobile fixes from 20-Sep screenshots ===== */
@media(max-width:760px){
  /* Home: no floating carpenter button / no CTA collision */
  header .outline{
    position:static!important;inset:auto!important;transform:none!important;
    display:flex!important;align-items:center!important;justify-content:center!important;
    background:#fff!important;color:#13281d!important;opacity:1!important;
    z-index:auto!important
  }
  .hero .actions,.heroActions,.hero .ctaRow{
    display:grid!important;grid-template-columns:1fr!important;gap:12px!important
  }
  .hero .actions>* ,.heroActions>* ,.hero .ctaRow>*{
    position:static!important;inset:auto!important;transform:none!important;
    width:100%!important;min-width:0!important;max-width:none!important
  }

  /* Wizard fills the real phone viewport and respects Safari safe areas */
  #wizard{
    position:fixed!important;inset:0!important;width:100%!important;
    height:100dvh!important;min-height:100svh!important;
    padding:0!important;overflow:hidden!important;background:#fff!important;
    align-items:stretch!important;justify-content:stretch!important
  }
  #wizard .wizCard{
    width:100%!important;height:100dvh!important;max-width:none!important;
    border-radius:0!important;margin:0!important;
    display:grid!important;
    grid-template-rows:auto 5px minmax(0,1fr) auto!important;
    overflow:hidden!important
  }
  #wizard .wizHead{
    min-height:68px!important;padding:10px 14px!important;
    display:grid!important;grid-template-columns:1fr auto!important;
    gap:10px!important;align-items:center!important;background:#fff!important
  }
  #wizard .wizLogo{font-size:18px!important;line-height:1.1!important;white-space:normal!important}
  #wizard .wizLogo .badge{font-size:10px!important;padding:5px 8px!important}
  #wizard #stepLabel{font-size:14px!important;white-space:nowrap!important}
  #wizard .small{font-size:11px!important;line-height:1.25!important}

  #wizard .wizBody{
    min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    padding:22px 16px 130px!important
  }
  #wizard .wizBody h1{
    font-size:clamp(30px,9vw,42px)!important;line-height:1.05!important;
    margin:0 0 12px!important;text-align:center!important
  }
  #wizard .wizBody>p{
    font-size:16px!important;line-height:1.5!important;margin:0 auto 22px!important;
    text-align:center!important;max-width:95%!important
  }

  /* All wizard card grids: predictable 2xN, never overflow */
  #wizard .choices,#wizard .needGrid,#wizard .styleGrid{
    width:100%!important;max-width:100%!important;margin:0!important;
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important
  }
  #wizard .choice,#wizard .need,#wizard .styleCard{
    width:100%!important;min-width:0!important;max-width:none!important;
    margin:0!important;overflow:hidden!important
  }
  #wizard .choice{min-height:150px!important;padding:14px 10px!important}
  #wizard .choice::before{height:100px!important;margin:-14px -10px 10px!important}
  #wizard .need{min-height:112px!important;padding:12px 8px!important;font-size:16px!important}
  #wizard .styleCard{height:120px!important;min-height:120px!important;font-size:16px!important}

  /* Dimensions: one compact column; removes huge cards seen in screenshot */
  #wizard .wizFields{
    display:grid!important;grid-template-columns:1fr!important;gap:10px!important;
    width:100%!important;max-width:100%!important
  }
  #wizard .wizField{
    width:100%!important;min-height:0!important;padding:12px!important;margin:0!important
  }
  #wizard .wizField input{height:54px!important;min-height:54px!important;font-size:24px!important}

  /* Budget has 3 choices: stack evenly instead of orphan third card */
  #wizard .wizBody .choices:has([data-budget]){
    grid-template-columns:1fr!important
  }
  #wizard .wizBody .choices:has([data-budget]) .choice{
    min-height:104px!important
  }

  /* Summary: 2 columns compact */
  #wizard .summaryBox{
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;width:100%!important
  }
  #wizard .summaryBox>div{min-width:0!important;padding:14px 10px!important}

  /* Critical: Back/Next always above Safari bottom bar */
  #wizard .wizFoot{
    position:relative!important;z-index:50!important;
    width:100%!important;min-height:76px!important;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom))!important;
    display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important;
    background:rgba(255,255,255,.98)!important;
    box-shadow:0 -8px 25px rgba(0,0,0,.08)!important
  }
  #wizard .wizBtn{
    width:100%!important;min-width:0!important;min-height:50px!important;
    margin:0!important;border-radius:14px!important;font-size:16px!important
  }

  /* Pro Studio editor: no desktop header clipping, canvas first, controls below */
  body:not(:has(#wizard[style*="display: none"])) header{
    max-width:100%!important
  }
  body:has(.app) header{
    height:auto!important;min-height:64px!important;padding:8px 12px!important;
    display:flex!important;flex-wrap:wrap!important;gap:8px!important;
    overflow:visible!important
  }
  body:has(.app) header .brand,body:has(.app) header .logo{
    max-width:100%!important;font-size:20px!important;white-space:normal!important
  }
  .app{
    width:100%!important;max-width:100%!important;height:auto!important;
    display:flex!important;flex-direction:column!important;overflow:visible!important
  }
  .stage{order:1!important;width:100%!important;height:auto!important;min-height:58vh!important}
  .stageTop{height:auto!important;min-height:52px!important;flex-wrap:wrap!important;gap:6px!important}
  #canvasWrap{height:52vh!important;min-height:360px!important;width:100%!important}
  .left,.right{order:2!important;width:100%!important;max-width:100%!important;display:block!important}
  .panel{width:100%!important;max-width:100%!important;margin:8px 0!important}
  .health,.hud,.status{
    max-width:calc(100% - 20px)!important;font-size:11px!important
  }
  .health{right:10px!important;bottom:10px!important}
  .hud{left:10px!important;bottom:10px!important}
}

/* Very narrow phones */
@media(max-width:380px){
  #wizard .choices,#wizard .needGrid,#wizard .styleGrid{gap:8px!important}
  #wizard .choice{min-height:138px!important}
  #wizard .need{min-height:100px!important}
  #wizard .wizBody{padding-left:12px!important;padding-right:12px!important}
}