/* Quick Track 22: iOS standalone viewport, Dynamic Island and Home Indicator safety. */
:root{
  --qt-safe-top:env(safe-area-inset-top,0px);
  --qt-safe-right:env(safe-area-inset-right,0px);
  --qt-safe-bottom:env(safe-area-inset-bottom,0px);
  --qt-safe-left:env(safe-area-inset-left,0px)
}
html{width:100%;min-height:100%;overflow-x:hidden;background:var(--qt-canvas,#151617);-webkit-text-size-adjust:100%}
body{width:100%;min-height:100vh;min-height:100svh;min-height:100dvh;overflow-x:hidden;overscroll-behavior-y:none;background:var(--qt-canvas,#151617)}
.app{
  min-height:100vh;min-height:100svh;min-height:100dvh;
  padding-left:max(12px,var(--qt-safe-left));
  padding-right:max(12px,var(--qt-safe-right));
  padding-bottom:max(14px,var(--qt-safe-bottom));
  scroll-padding-top:calc(var(--qt-safe-top) + 58px);
  scroll-padding-bottom:calc(var(--qt-safe-bottom) + 70px)
}
.login{
  width:100%;height:100vh;height:100svh;height:100dvh;overflow:auto;
  padding:calc(var(--qt-safe-top) + 18px) max(20px,var(--qt-safe-right)) calc(var(--qt-safe-bottom) + 18px) max(20px,var(--qt-safe-left))
}
button,summary,a{-webkit-touch-callout:none;touch-action:manipulation}
.sticky-book{bottom:0;padding-bottom:max(10px,var(--qt-safe-bottom))}
.toast{bottom:calc(var(--qt-safe-bottom) + 70px)}
.account-menu nav{
  right:max(12px,var(--qt-safe-right));
  max-height:calc(100dvh - var(--qt-safe-top) - var(--qt-safe-bottom) - 64px);
  overflow:auto;overscroll-behavior:contain
}
dialog{max-height:calc(100dvh - var(--qt-safe-top) - var(--qt-safe-bottom) - 12px)}

html.pwa-standalone .app{padding-top:max(7px,calc(var(--qt-safe-top) + 5px))}
html.pwa-standalone .account-menu nav{top:calc(var(--qt-safe-top) + 50px)}
html.pwa-standalone body[data-view=track] .app{display:flex;flex-direction:column}
html.pwa-standalone body[data-view=track] #trackingView{flex:1;min-height:0}

/* iPhone 17 Pro: 1206 x 2622 physical pixels, typically 402 x 874 CSS pixels. */
@media(max-width:430px) and (min-height:761px) and (max-height:900px){
  html.pwa-standalone body[data-view=track] .app{
    padding-left:max(10px,var(--qt-safe-left));
    padding-right:max(10px,var(--qt-safe-right));
    padding-bottom:0
  }
  html.pwa-standalone body[data-view=track] .app>header{min-height:40px;padding:0 1px 1px}
  html.pwa-standalone body[data-view=track] .app>header .eyebrow{display:none}
  html.pwa-standalone body[data-view=track] .app h1{font-size:20px}
  html.pwa-standalone body[data-view=track] .category-section>.section-heading{height:30px}
  html.pwa-standalone body[data-view=track] .category,
  html.pwa-standalone body[data-view=track] .category.tone-green{min-height:46px!important;padding-top:5px!important;padding-bottom:5px!important}
  html.pwa-standalone body[data-view=track] .mode-switch{margin:0}
  html.pwa-standalone body[data-view=track] .mode-switch button{height:35px}
  html.pwa-standalone body[data-view=track] .dial-toolbar{height:31px!important}
  html.pwa-standalone body[data-view=track] .dial-toolbar>button{min-height:31px!important}
  html.pwa-standalone body[data-view=track] .dial-shell{--dial-size:min(68vw,274px);--minute-inset:38px}
  html.pwa-standalone body[data-view=track] .dial-center{inset:85px}
  html.pwa-standalone body[data-view=track] .dial-center strong{font-size:30px}
  html.pwa-standalone body[data-view=track] .ring-help{margin:1px 0 4px;font-size:11px}
  html.pwa-standalone body[data-view=track] .duration-chips{margin-top:3px}
  html.pwa-standalone body[data-view=track] .duration-chips button{height:39px}
  html.pwa-standalone body[data-view=track] .duration-header{min-height:34px;margin:0}
  html.pwa-standalone body[data-view=track] .duration-header button{min-width:34px;min-height:34px}
  html.pwa-standalone body[data-view=track] .note-capture{margin:4px 0 3px}
  html.pwa-standalone body[data-view=track] .note-actions .speech-button,
  html.pwa-standalone body[data-view=track] .note-edit-button{min-height:44px}
  html.pwa-standalone body[data-view=track] .note-preview{display:none}
  html.pwa-standalone body[data-view=track] .additional-panel{margin:3px 0!important}
  html.pwa-standalone body[data-view=track] .additional-panel>summary{min-height:42px!important}
  html.pwa-standalone body[data-view=track] .sticky-book{padding-top:3px}
  html.pwa-standalone body[data-view=track] .book-button{min-height:48px}
}

@media(max-height:500px) and (orientation:landscape){
  .app{padding-top:max(7px,var(--qt-safe-top));padding-left:max(16px,var(--qt-safe-left));padding-right:max(16px,var(--qt-safe-right))}
  .account-menu nav{top:calc(var(--qt-safe-top) + 45px)}
  dialog{max-height:calc(100dvh - var(--qt-safe-top) - var(--qt-safe-bottom) - 8px)}
}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}