/* ══════════════════════════════════════════════════════════════
   THE HOME-SCREEN APP — iPhone and iPad
   Opened from the Home Screen, the app runs full screen: the page
   goes up under the clock, down to the home bar, and — on an iPhone
   on its side — under the notch. env(safe-area-inset-*) says how far;
   everything that touches an edge keeps clear of it. In a browser
   tab, and on a Mac, every inset is 0, so nothing here moves.

   html.standalone is set in <head> when the app was opened from the
   Home Screen (index.html, login.html).
   ══════════════════════════════════════════════════════════════ */

:root {
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
}

/* ── 1. The clock's strip ──
   iOS draws the time and battery in white straight onto the page, so
   whatever sits under them has to be dark or they disappear (on the
   light page, the iPad's right-hand side, the counter form). A dark
   strip the height of the status bar stays over everything. */
body::before {
  content: ''; position: fixed; top: 0; left: 0; right: 0; height: var(--sat);
  background: var(--ink-rail); z-index: 10000; pointer-events: none;
}

/* ── 2. The top ──
   Phones and iPad portrait: the dark header starts under the clock
   (.rail's top padding). iPad landscape and the Mac: the rail runs down
   the left, so the page on the right starts below the strip, and its
   title bar sticks below the strip rather than under it. */
@media (min-width: 941px) {
  .main   { padding-top: var(--sat); }
  .topbar { top: var(--sat); }
}

/* ── 3. The sides ──
   An iPhone on its side has the notch at one edge and a rounded corner
   at the other: the header, the tabs and the page keep clear of both. */
@media (max-width: 940px) {
  .rail-head { padding-left: max(18px, var(--sal)); padding-right: max(18px, var(--sar)); }
  .rail-nav  { padding-left: max(12px, var(--sal)); padding-right: max(12px, var(--sar)); }
  .topbar, .pane { padding-left: max(var(--gutter), var(--sal)); padding-right: max(var(--gutter), var(--sar)); }
  html.role-restricted .pane { padding-left: max(26px, var(--sal)); padding-right: max(26px, var(--sar)); }
}
@media (max-width: 700px) {
  .rail-head { padding-left: max(16px, var(--sal)); padding-right: max(16px, var(--sar)); }
  html.role-restricted .pane { padding-left: max(12px, var(--sal)); padding-right: max(12px, var(--sar)); }
}
.tabbar        { padding-left: var(--sal); padding-right: var(--sar); }
.sheet-over-bar { padding-left: max(14px, var(--sal)); padding-right: max(14px, var(--sar)); }

/* ── 4. Windows over the page ──
   A form in the middle of an iPad never reaches under the clock or the
   home bar; on a phone the sheet that rises from the bottom stops short
   of the clock. (The counter's full-screen form pads itself.) */
.modal-wrap { padding-top: max(16px, calc(var(--sat) + 10px)); padding-bottom: max(16px, calc(var(--sab) + 10px)); }
.modal { max-height: min(90vh, calc(100vh - var(--sat) - var(--sab) - 36px)); }
@supports (height: 100dvh) {
  .modal { max-height: min(90dvh, calc(100dvh - var(--sat) - var(--sab) - 36px)); }
}
@media (max-width: 700px) {
  .modal-wrap { padding: var(--sat) 0 0; }
  .modal, .modal.narrow { max-height: min(92vh, calc(100vh - var(--sat) - 10px)); }
  @supports (height: 100dvh) {
    .modal, .modal.narrow { max-height: min(92dvh, calc(100dvh - var(--sat) - 10px)); }
  }
}
@media (orientation: landscape) and (max-height: 500px) {
  .modal, .modal.narrow { max-height: calc(100vh - var(--sat) - var(--sab) - 12px); }
  @supports (height: 100dvh) {
    .modal, .modal.narrow { max-height: calc(100dvh - var(--sat) - var(--sab) - 12px); }
  }
}
/* the counter form with the keyboard up hides its title bar — so its
   first box starts below the clock, not under it */
html.role-counter #invoice-modal.kb .modal-body { padding-top: max(8px, var(--sat)); }

/* ── 5. The Assistant ──
   fitChat() (12-assistant.js) sizes the page to the room left between
   the header and the tab bar; the conversation fills it. */
.chat-pane.fit { flex: none; min-height: 0; }
.chat-pane.fit .chat-wrap { height: auto !important; flex: 1 1 auto; min-height: 0; }

/* ── 6. Feels like an app ──
   A long press on a button selects its label or pops up a menu in
   Safari; on a touch screen buttons just get pressed. Text — names,
   numbers, emails — can still be selected and copied. */
@media (hover: none), (any-pointer: coarse) {
  button, .btn, .pill, .chip, .tab-btn, .nav-item, .yn, .more-row, .pcell, .link-btn, .alt-toggle {
    -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  }
}
/* no rubber-band past the top or bottom of the app */
html.standalone, html.standalone body { overscroll-behavior-y: none; }
/* already installed: no "Install app" button */
html.standalone [onclick$="openInstall()"] { display: none !important; }