/* FreightDeck mobile layer — additive, loaded LAST so it wins at phone widths.
   8/28 redesign pass (v6): match the approved mockup — flat single surface,
   clean fields, camera-first hero, hamburger nav, fixed Get-Quote.
   No engine/logic touched; @media(max-width:640px) only. */
@media (max-width:640px){
  html,body{max-width:100%;overflow-x:hidden}
  #fdLookBanner{display:none !important}                 /* top look/dark banner off on phone */
  #fdUpdOverlay{display:none !important}                 /* one-time feature modal off on phone */
  #permits img,#permits canvas,.leaflet-container{max-width:100%}

  /* ---------- FULL WIDTH + NATURAL DOCUMENT SCROLL (was an internal fixed-height scroller) ---------- */
  html{height:auto !important;overflow-y:auto !important;overflow-x:hidden !important;-webkit-overflow-scrolling:touch}
  body{height:auto !important;min-height:100% !important;overflow-x:hidden !important;overflow-y:visible !important}
  .sidebar-layout,.container,#container,.main-content,#main-content,.main-scroll,#main-scroll,.content-area,#content-area,.app-main{
    width:100% !important;max-width:100% !important;margin:0 !important;
    height:auto !important;min-height:0 !important;overflow:visible !important;
    display:block !important;flex:none !important}
  .main-content,#main-content{padding:65px 0 0 !important}   /* clear the fixed 57px topbar; no side gutters */
  .sidebar,.sidebar-nav,#sidebar,.app-sidebar{display:none !important}
  #permits.tab-content,.tab-content{width:100% !important;max-width:100% !important;margin:0 !important;left:auto !important;overflow:visible !important}

  /* ---------- top bar: hamburger + brand · account ---------- */
  .tn-topbar{padding:8px 12px !important}
  .tn-left{gap:10px !important;min-width:0}
  .tn-brand-text{font-size:16px !important}
  .tn-brand-tag{display:none !important}
  [class*="tn-viewas"]{display:none !important}
  .tn-right{gap:8px !important;flex:0 0 auto;max-width:56%}
  .tn-nav{display:none !important}
  .tn-topbar.tn-open .tn-nav{
    display:flex !important;flex-direction:column;position:absolute;top:100%;left:0;right:0;
    background:var(--fd-panel,#fffdf8);border-top:1px solid var(--fd-border,#d8d2c4);
    border-bottom:1px solid var(--fd-border,#d8d2c4);box-shadow:0 10px 24px rgba(28,39,51,.16);
    padding:6px;gap:2px;z-index:1200;max-height:74vh;overflow-y:auto}
  .tn-topbar.tn-open .tn-nav .tn-link,.tn-topbar.tn-open .tn-nav .tn-item{
    width:100%;padding:12px 14px;min-height:46px;border-radius:8px}
  .tn-hamburger{display:inline-flex;flex-direction:column;justify-content:center;gap:4px;
    width:38px;height:38px;padding:0 8px;border:0;background:transparent;cursor:pointer;flex:0 0 auto}
  .tn-hamburger i{display:block;height:2.5px;width:22px;background:var(--fd-ink,#16202b);border-radius:2px}

  /* ---------- FLATTEN the nested card chrome into one clean surface ---------- */
  #permits.tab-content{background:transparent !important;border:0 !important;border-radius:0 !important;
    box-shadow:none !important;padding:16px 16px 128px !important}
  .permit-main-layout{display:block !important}
  .permit-form-panel,.permit-map-panel,.permit-results-section{
    width:100% !important;max-width:100% !important;float:none !important;
    background:transparent !important;border:0 !important;border-radius:0 !important;box-shadow:none !important;padding:0 !important;margin:0 !important}
  .permit-form-panel .form-section{
    background:transparent !important;border:0 !important;border-radius:0 !important;box-shadow:none !important;
    padding:0 !important;margin:0 0 18px !important}

  /* ---------- mode toggle: clean segmented control ---------- */
  .tn-seg{background:var(--fd-panel,#fffdf8) !important;border:1px solid var(--fd-border,#d8d2c4) !important;
    border-radius:14px !important;padding:4px !important;margin:0 0 18px !important;box-shadow:0 1px 2px rgba(28,39,51,.05) !important}
  .tn-seg-btn{border-radius:10px !important;min-height:46px !important;font-size:15px !important}

  /* ---------- fields: clean, tappable, no iOS zoom ---------- */
  .lane-row{display:flex !important;flex-direction:column !important;gap:16px !important}
  .lane-field{width:100% !important;display:flex;flex-direction:column;gap:7px}
  .lane-field label,#permits .form-section > label{
    font-size:11.5px !important;font-weight:600 !important;letter-spacing:.05em !important;text-transform:uppercase !important;
    color:var(--fd-muted,#47525d) !important}
  #permits input[type=text],#permits input[type=number],#permits select,
  .permit-form-panel input,.permit-form-panel select{
    width:100% !important;min-height:52px !important;font-size:16px !important;
    padding:14px 15px !important;border-radius:12px !important;box-sizing:border-box !important;
    background:var(--fd-panel,#fffdf8) !important;border:1px solid var(--fd-border,#d8d2c4) !important;
    box-shadow:0 1px 2px rgba(28,39,51,.04) !important;color:var(--fd-ink,#16202b) !important;-webkit-appearance:none;appearance:none}
  #permits input:focus,.permit-form-panel input:focus,#permits select:focus{
    border-color:var(--fd-accent,#2f5d8f) !important;outline:none !important;box-shadow:0 0 0 3px rgba(47,93,143,.14) !important}
  #permitOriginZip,#permitDestZip{font-size:16px !important}

  /* ---------- CAMERA HERO (injected by mobile.js) — the mockup's star ---------- */
  .fd-mcam{display:block !important;width:100%;text-align:left;cursor:pointer;
    border:0;border-radius:18px;padding:20px;margin:0 0 20px;color:#fff;position:relative;overflow:hidden;
    background:linear-gradient(150deg,#356aa3,#264b74);box-shadow:0 10px 22px rgba(38,75,116,.30)}
  .fd-mcam .fd-mcam-ic{display:block;font-size:28px;line-height:1;margin-bottom:10px}
  .fd-mcam .fd-mcam-t{display:block;font-family:inherit;font-weight:700;font-size:19px;letter-spacing:-.01em;margin-bottom:5px}
  .fd-mcam .fd-mcam-s{display:block;font-size:13px;color:rgba(255,255,255,.85);line-height:1.4;max-width:34ch}
  .fd-mcam .fd-mcam-lens{position:absolute;right:-24px;top:-24px;width:120px;height:120px;border-radius:50%;border:14px solid rgba(255,255,255,.10)}
  .fd-mdivider{display:flex;align-items:center;gap:12px;color:var(--fd-dim,#5a626c);font-size:11.5px;font-weight:600;
    letter-spacing:.05em;text-transform:uppercase;margin:0 0 18px}
  .fd-mdivider::before,.fd-mdivider::after{content:"";flex:1;height:1px;background:var(--fd-border,#d8d2c4)}

  /* demote the old dashed paste box (hero replaces it) */
  #permitPasteZone{border:1px dashed var(--fd-border2,#c9c2b2) !important;background:transparent !important;
    padding:12px !important;border-radius:12px !important;margin:0 0 16px !important}
  #permitPasteContent{font-size:12.5px !important}

  /* ---------- fixed Get-Quote bar: full-width primary + quiet Clear link ---------- */
  .permit-btn-row{position:fixed !important;left:0;right:0;bottom:0;z-index:1100;display:flex !important;
    flex-direction:column !important;align-items:stretch !important;gap:4px !important;box-sizing:border-box !important;
    background:var(--fd-panel,#fffdf8);border-top:1px solid var(--fd-border,#d8d2c4);box-shadow:0 -6px 18px rgba(28,39,51,.10);
    padding:10px 14px calc(8px + env(safe-area-inset-bottom)) !important;margin:0 !important}
  .permit-btn-row .btn{box-sizing:border-box !important;width:100% !important}
  #calcRouteBtn{width:100% !important;min-height:54px !important;font-size:16px !important;border-radius:14px !important}
  #permitClearBtn{width:auto !important;align-self:center !important;min-height:30px !important;padding:2px 12px !important;
    background:transparent !important;border:0 !important;box-shadow:none !important;color:var(--fd-muted,#47525d) !important;
    font-size:13px !important;font-weight:600 !important;text-decoration:underline;text-underline-offset:2px}
}
@media(min-width:641px){.tn-hamburger,.fd-mcam,.fd-mdivider{display:none !important}}