/* Mobile request screen: stable navigation, one independently scrolling form. */
.app-wizard-top,.app-wizard-scroll{display:contents}
.wizard:not([data-step="0"]) .approved-category-info{display:none}

@media(max-width:1000px){
  html.app-screen-locked{height:100%;overflow:hidden;overscroll-behavior:none;scroll-behavior:auto}
  body.app-home-page{height:100dvh;overflow:hidden;padding-top:0;overscroll-behavior:none}
  body.app-home-page .shell{height:calc(100dvh - var(--app-home-banner-height,0px));min-height:0;display:block;overflow:hidden;padding-top:env(safe-area-inset-top)}
  body.app-home-page .main{height:100%;min-height:0;display:flex;flex-direction:column;padding-bottom:0}
  body.app-home-page .topbar{position:relative;top:auto;flex:0 0 auto}
  body.app-home-page .content{flex:1 1 0%;min-height:0;width:100%;margin:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;padding-bottom:calc(100px + env(safe-area-inset-bottom))!important}

  body.wizard-page{height:100%;overflow:hidden;padding-top:0;overscroll-behavior:none}
  body.wizard-page #dutify-pwa-tools{display:none!important}
  body.wizard-page .shell{min-height:0;height:100dvh;overflow:hidden}
  body.wizard-page .main{min-height:0;padding:0}
  body.wizard-page .content{padding:0!important;margin:0;max-width:none;height:100%}
  body.wizard-page .topbar{display:none}
  body.wizard-page .wizard{
    position:fixed;left:0;top:var(--app-viewport-top,0px);width:100%;
    height:var(--app-viewport-height,100dvh);min-height:0;max-width:none!important;
    margin:0;padding:0;display:flex;flex-direction:column;overflow:hidden;
    background:var(--approved-bg);isolation:isolate;
  }
  .wizard .app-wizard-top{
    display:block;flex:0 0 auto;min-width:0;z-index:2;background:var(--approved-bg);
    padding:max(10px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 12px max(16px,env(safe-area-inset-left));
    border-bottom:1px solid var(--approved-line);
  }
  .app-wizard-top .wizard-heading{margin:0 0 8px;min-height:44px}
  .app-wizard-top .wizard-exit{width:44px;flex-shrink:0}
  .app-wizard-top .step-track{margin-bottom:8px}
  .app-wizard-top #stepLabel{display:block}
  .app-wizard-top #stepTitle{font-size:23px;line-height:1.2;margin:6px 0 0;overflow-wrap:anywhere}
  .wizard .app-wizard-scroll{
    display:block;flex:1 1 0%;min-height:0;min-width:0;width:100%;max-width:100%;overflow-x:hidden;overflow-y:auto;
    overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
    padding:16px max(16px,env(safe-area-inset-right)) 24px max(16px,env(safe-area-inset-left));
    scroll-padding-block:16px;overflow-wrap:anywhere;contain:inline-size;
  }
  /* Intrinsic select/date widths must not widen the inner scroll surface on iOS. */
  .app-wizard-scroll :is(form,.form-card,.wizard-data,.form-grid,.field,.vehicle-search,.sub-tabs){min-width:0;max-width:100%;box-sizing:border-box}
  .app-wizard-scroll :is(form,.form-card,.wizard-data,.form-grid){width:100%}
  .wizard .app-wizard-scroll .form-grid{grid-template-columns:minmax(0,1fr)}
  .wizard .app-wizard-scroll :is(input:not([type=checkbox]):not([type=radio]),select,textarea){max-width:100%;box-sizing:border-box}
  .wizard .app-wizard-scroll input[type=date]{width:0;min-width:100%;max-width:100%;display:block;appearance:none;-webkit-appearance:none;overflow:hidden}
  .wizard .app-wizard-scroll input[type=date]::-webkit-date-and-time-value{min-width:0;text-align:left}
  .wizard .sub-tabs{width:100%}
  .wizard .sub-tabs button{flex:1 1 0;min-width:0;overflow-wrap:anywhere}
  .wizard .app-wizard-scroll :is(.category-list,#requestForm,.form-card,.wizard-data){margin-top:0}
  .wizard[data-step="0"] .category-list{grid-template-columns:1fr}
  .wizard .wizard-footer{
    position:static;flex:0 0 auto;left:auto;bottom:auto;transform:none;width:100%;z-index:2;
    padding:10px max(16px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
    background:var(--approved-card);border-top:1px solid var(--approved-line);
  }
  .wizard .wizard-footer .btn{min-height:48px}
  .wizard :is(input,select,textarea,.vehicle-search input){font-size:16px;min-width:0}
  .wizard .vehicle-search [role=listbox]{max-height:min(220px,35dvh)}
  .wizard .app-wizard-scroll:focus-visible{outline:2px solid var(--approved-accent);outline-offset:-2px}
  body.wizard-page .toast{bottom:max(90px,env(safe-area-inset-bottom));max-width:calc(100% - 32px)}
  body.app-keyboard-open .app-wizard-top{padding-top:8px;padding-bottom:8px}
  body.app-keyboard-open .app-wizard-top #stepTitle{font-size:18px;margin-top:4px}
  body.app-keyboard-open .wizard-footer{padding-bottom:10px}
}
@media(max-width:1000px) and (max-height:450px){
  .app-wizard-top .wizard-heading{margin-bottom:4px}
  .app-wizard-top #stepTitle{font-size:18px;margin-top:4px}
  .app-wizard-top .step-track{margin-bottom:4px}
  .wizard .app-wizard-scroll{padding-top:10px}
}