/* WorkOps v160 — responsive device comfort geometry.
   Intentionally NOT a global zoom: preserves readable type + 44px tap targets while
   making the interface feel ~90–92% as dense on small screens. */
:root{
  --wo-edge-x:clamp(12px,2.7vw,34px);
  --wo-safe-top:env(safe-area-inset-top,0px);
  --wo-safe-bottom:env(safe-area-inset-bottom,0px);
  --wo-tap:44px;
}

/* Controls must remain comfortably tappable even as visual padding tightens. */
button,.primary,.secondary,.icon-btn,.text-btn,.workspace-action,.mini-action,
.mobile-nav button,.settings-nav button,.cert-filter-tabs button,.quick-chip,
.quick-type,.choice-chips button,.timer-choice button,.meter-choice button{
  min-height:var(--wo-tap);
}

@media(max-width:900px){
  :root{--wo-edge-x:clamp(13px,3.6vw,20px)}

  html,body{max-width:100%;overflow-x:hidden;overflow-y:visible;height:auto}

  /* The app header clears notches/browser chrome instead of living under them. */
  .topbar{
    box-sizing:border-box!important;
    height:calc(58px + var(--wo-safe-top))!important;
    min-height:calc(58px + var(--wo-safe-top))!important;
    padding:var(--wo-safe-top) var(--wo-edge-x) 0!important;
  }

  /* More breathing room from phone edges, while reducing oversized internal spacing. */
  .content{
    box-sizing:border-box!important;
    width:100%!important;
    padding:clamp(14px,2.4vh,20px) var(--wo-edge-x)
      calc(102px + var(--wo-safe-bottom))!important;
  }
  .page-head{margin:2px 0 14px!important;gap:10px!important}
  .page-head h1{font-size:clamp(25px,7vw,29px)!important;line-height:1.08!important}
  .page-head p{line-height:1.45!important}
  .panel{padding:clamp(14px,3.5vw,17px)!important}
  .hero{padding:clamp(19px,4.7vw,23px)!important;min-height:0!important}
  .hero h1{font-size:clamp(28px,8vw,32px)!important;line-height:1.05!important}
  .stats article{padding:14px!important}
  .list-row{padding:12px 13px!important}
  .quick-book-section{padding:13px!important}
  .quick-book-section-head{margin-bottom:9px!important}
  .action-grid button,.workflow-steps button{padding:13px!important}

  /* Floating nav sits ABOVE the unsafe bottom area, not inside it. */
  .mobile-nav{
    box-sizing:border-box!important;
    left:var(--wo-edge-x)!important;
    right:var(--wo-edge-x)!important;
    bottom:calc(8px + var(--wo-safe-bottom))!important;
    padding:6px 5px!important;
    min-height:62px!important;
  }
  .mobile-nav button{padding:3px 2px!important}
  .mobile-nav .create-tab b{margin-top:-19px!important}

  /* Toasts, bottom actions and drawers must never collide with system controls. */
  .toast{bottom:calc(82px + var(--wo-safe-bottom))!important;max-width:calc(100vw - (var(--wo-edge-x) * 2))}
  .sticky-actions,.cert-wizard-controls,.edit-job-actions{
    padding-bottom:max(12px,var(--wo-safe-bottom))!important;
  }
  .tool-drawer-panel{
    padding-left:var(--wo-edge-x)!important;
    padding-right:var(--wo-edge-x)!important;
    padding-bottom:calc(18px + var(--wo-safe-bottom))!important;
  }
  .more-overlay-panel{
    padding-bottom:calc(14px + var(--wo-safe-bottom))!important;
  }

  /* v159 modal geometry: give header/content readable inset without shrinking controls. */
  #modal>.sheet{
    padding-left:var(--wo-edge-x)!important;
    padding-right:var(--wo-edge-x)!important;
  }
  #modal .sheet-head{
    min-height:54px!important;
    padding-bottom:8px!important;
  }
  #modalBody{
    padding-bottom:max(16px,var(--wo-safe-bottom))!important;
  }
  #modalBody>.quick-book-form{
    padding-top:8px!important;
    padding-bottom:calc(18px + var(--wo-safe-bottom))!important;
  }

  /* Generic full-screen/field surfaces also clear device edges. */
  .engineer-mode-shell,.engineer-mode,.em-shell{
    padding-bottom:var(--wo-safe-bottom);
  }
}

/* Small phones: compact the furniture, never the legibility/tap area. */
@media(max-width:430px){
  :root{--wo-edge-x:14px}
  .content{padding-top:13px!important}
  .hero{border-radius:19px!important}
  .panel{border-radius:16px!important}
  .stats{gap:8px!important}
  .stats strong{font-size:25px!important}
  .action-grid,.workflow-steps{gap:8px!important}
  .quick-type-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .quick-date-row,.quick-time-row{gap:6px!important}
  .diary-date-strip{gap:5px!important}
  .diary-date-strip button{min-height:67px!important;padding:8px 5px!important}
}

/* Short/landscape phone viewports: reduce vertical furniture so controls stay clear. */
@media(max-width:900px) and (max-height:700px){
  .topbar{height:calc(52px + var(--wo-safe-top))!important;min-height:calc(52px + var(--wo-safe-top))!important}
  .content{padding-top:10px!important;padding-bottom:calc(88px + var(--wo-safe-bottom))!important}
  .page-head{margin-bottom:10px!important}
  .hero{padding:16px 18px!important}
  .panel{padding:13px!important}
  .mobile-nav{min-height:56px!important;padding:4px!important}
  #modal .sheet-head{min-height:50px!important}
}

/* Tablet: preserve richer layout but keep device-edge clearance. */
@media(min-width:901px) and (max-width:1180px){
  .content{padding:24px clamp(22px,3vw,30px) 96px!important}
  .topbar{padding-left:clamp(22px,3vw,30px)!important;padding-right:clamp(22px,3vw,30px)!important}
}