/* One safe-area contract for Safari, Home Screen mode and rotated displays.
   Insets come from the browser, never from a hardcoded iPhone model. */
:root {
  --app-safe-top: env(safe-area-inset-top, 0px);
  --app-safe-right: env(safe-area-inset-right, 0px);
  --app-safe-bottom: env(safe-area-inset-bottom, 0px);
  --app-safe-left: env(safe-area-inset-left, 0px);
  --app-page-gutter: 20px;
  --app-side-left: max(var(--app-page-gutter), calc(var(--app-safe-left) + 12px));
  --app-side-right: max(var(--app-page-gutter), calc(var(--app-safe-right) + 12px));
  --app-header-height: calc(var(--topbar-height, 60px) + var(--app-safe-top));
  --app-nav-height: 0px;
  --app-bottom-clearance: max(var(--app-nav-height), var(--app-safe-bottom));
  --app-keyboard-safe-bottom: var(--app-safe-bottom);
  --app-keyboard-inset: 0px;
  --app-tracker-height: 0px;
  --app-save-height: 0px;
  --app-visual-height: 100vh;
  --app-visual-top: 0px;
  --app-scroll-top: calc(var(--app-header-height) + var(--app-tracker-height) + 12px);
  --app-scroll-bottom: calc(var(--app-bottom-clearance) + var(--app-save-height) + 16px);
}
@supports (height: 100dvh) {
  :root { --app-visual-height: 100dvh; }
}
html { scroll-padding-top: var(--app-scroll-top); scroll-padding-bottom: var(--app-scroll-bottom); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { min-height: 100svh; }
.topbar {
  box-sizing: border-box;
  height: var(--app-header-height);
  min-height: var(--app-header-height);
  padding-top: var(--app-safe-top);
  padding-bottom: 0;
  padding-left: max(var(--app-side-left), calc((100% - 1320px) / 2));
  padding-right: max(var(--app-side-right), calc((100% - 1320px) / 2));
}
.topbar .brand, .topbar .brand-copy { min-width: 0; }
.topbar-actions { flex-shrink: 0; }
.page-shell {
  width: auto;
  max-width: 1320px;
  min-width: 0;
  margin-left: max(var(--app-side-left), calc((100% - 1320px) / 2));
  margin-right: max(var(--app-side-right), calc((100% - 1320px) / 2));
  padding-bottom: calc(var(--app-scroll-bottom) + 16px);
}
.tracker-toolbar { top: calc(var(--app-header-height) + 4px); }
.sticky-save, .sticky-autosave { bottom: calc(var(--app-bottom-clearance) + 8px); }
.tracking-set-row, .settings-grid > section, .plan-settings { scroll-margin-top: 8px; scroll-margin-bottom: 8px; }
input, select, textarea, [contenteditable="true"] { scroll-margin-block: 8px; }
.page-shell input[type="date"], .page-shell input[type="datetime-local"] { box-sizing: border-box; min-width: 0; max-width: 100%; min-inline-size: 0; }

/* Native dialogs are centered inside the usable, not the physical, screen. */
.focus-dialog {
  --dialog-max-width: 680px;
  position: fixed;
  left: var(--app-safe-left);
  right: var(--app-safe-right);
  top: calc(var(--app-visual-top) + var(--app-safe-top) + (var(--app-visual-height) - var(--app-safe-top) - var(--app-keyboard-safe-bottom)) / 2);
  bottom: auto;
  width: min(var(--dialog-max-width), calc(100% - var(--app-safe-left) - var(--app-safe-right) - 24px));
  max-height: max(120px, calc(var(--app-visual-height) - var(--app-safe-top) - var(--app-keyboard-safe-bottom) - 24px));
  margin: 0 auto;
  transform: translateY(-50%);
  overscroll-behavior: contain;
  scroll-padding-block: 12px;
}
.weight-review-dialog { --dialog-max-width: 720px; }
/* On a short landscape screen, scroll the whole review rather than squeezing
   its fixed introduction and footer until the apply buttons are clipped. */
@media (max-height: 600px) {
  .weight-review-dialog[open] { display: block; overflow-y: auto; }
  .weight-review-dialog .weight-source-options { margin-block: 12px; }
  .weight-review-dialog .weight-review-list { overflow: visible; min-height: 0; margin-top: 10px; }
  .weight-review-dialog .weight-review-footer { position: sticky; bottom: 0; z-index: 2; margin-top: 12px; }
}
.dialog-close { width: 44px; height: 44px; flex-basis: 44px; }
.auth-shell {
  min-height: var(--app-visual-height);
  padding: calc(var(--app-safe-top) + 76px) var(--app-side-right) calc(var(--app-keyboard-safe-bottom) + 24px) var(--app-side-left);
}
.auth-theme-toggle { top: calc(var(--app-safe-top) + 12px); right: var(--app-side-right); }
.auth-card { min-width: 0; }
.auth-form input { min-width: 0; font-size: max(16px, 1em); }
.timer-toast, .install-nudge {
  right: var(--app-side-right);
  left: auto;
  width: min(360px, calc(100% - var(--app-side-left) - var(--app-side-right)));
  min-width: 0;
  bottom: calc(var(--app-bottom-clearance) + var(--app-save-height) + 12px);
  max-height: calc(var(--app-visual-height) - var(--app-header-height) - var(--app-bottom-clearance) - var(--app-save-height) - 24px);
  overflow: auto;
}
.timer-toast { color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); }
.timer-toast button { color: var(--ink); border-color: var(--line-strong); }
body:has([data-workout-form]) .install-nudge,
body:has(dialog[open]) .install-nudge { display: none; }

@media (max-width: 820px) {
  :root { --app-nav-height: calc(64px + var(--app-safe-bottom)); }
  .mobile-nav {
    box-sizing: border-box;
    height: var(--app-nav-height);
    min-height: var(--app-nav-height);
    padding: 6px max(8px, var(--app-safe-right)) calc(9px + var(--app-safe-bottom)) max(8px, var(--app-safe-left));
  }
}
@media (max-width: 620px) {
  :root { --app-page-gutter: 12px; }
}

/* While typing, the keyboard gets the space occupied by secondary chrome.
   Save remains in the document and automatic saving continues unchanged. */
.app-keyboard-open {
  --app-nav-height: 0px;
  --app-bottom-clearance: 0px;
  --app-keyboard-safe-bottom: 0px;
  --app-scroll-top: calc(var(--app-safe-top) + 8px);
  --app-scroll-bottom: 16px;
}
.app-keyboard-open .mobile-nav, .app-keyboard-open .install-nudge { display: none; }
.app-keyboard-open .topbar, .app-keyboard-open .tracker-toolbar, .app-keyboard-open .sticky-save { position: static; }
.app-keyboard-open .page-shell { padding-bottom: calc(var(--app-keyboard-inset) + var(--app-scroll-bottom) + 16px); }
.app-keyboard-open .auth-shell { padding-bottom: calc(var(--app-keyboard-inset) + 24px); }
.app-keyboard-open .auth-theme-toggle { position: absolute; }
.app-keyboard-open .timer-toast { position: static; margin: 12px var(--app-side-right) 12px auto; }