/* The app shell (js/main.js): one responsive app over the two designs. Tokens only.
   ≤ 767px  phone: the Merchant App screens fill the screen, with their own tab bar and dock.
   ≥ 768px  web:  the Merchant web screens beside the side nav; under 1100px the nav is a drawer behind a top bar. */

html, body { height: 100%; }
body { background: var(--page); color: var(--ink); overflow: hidden; -webkit-text-size-adjust: 100%; }
::selection { background: var(--action-tint); color: var(--ink-heading); }
#app { height: 100vh; height: 100dvh; }
.app-loading { height: 100%; display: grid; place-items: center; }

:where(.app-iconbtn, .app-textbtn, .app-topbar-brand, .app-phonepage-bar .jp-back):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* Focus moved by the shell on navigation lands on the page, not a control: no ring there. */
#app-main:focus, #app [tabindex="-1"]:focus:not(:focus-visible), #app h1:focus { outline: none; }

/* ---------- phone ---------- */
.app-phone { height: 100%; display: flex; flex-direction: column; background: var(--page); }
.app-phone > .jp-nscreen { flex: 1; min-height: 0; height: auto; }
/* Safe areas: the notch above the header, the home bar under the tab bar or dock. */
.app-phone .jp-nhead, .app-phone .jp-flowhead, .app-phonepage-bar { padding-top: env(safe-area-inset-top); }
.app-phone .jx-tabbar { padding-bottom: calc(var(--space-2) + env(safe-area-inset-bottom)); }
.app-phone .jp-nscreen > .jx-dock:last-child { padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom)); }

/* A web page on a phone: back bar, the page reflowed in one column, the tab bar. */
.app-phonepage-bar { flex: none; display: flex; align-items: center; gap: var(--space-1); min-height: var(--control-native); padding-right: var(--space-4); background: var(--bar); border-bottom: 1px solid var(--line); }
.app-phonepage-bar h1 { flex: 1; min-width: 0; margin: 0; font: var(--type-title); letter-spacing: var(--track-title); color: var(--ink-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:lang(km) .app-phonepage-bar h1 { font: var(--type-km-body); font-weight: 700; }
.app-phonepage-bar .jp-back { text-decoration: none; }
.app-phonepage-bar .jp-langbtn { margin-right: calc(var(--space-2) * -1); }
.app-phonepage-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; box-sizing: border-box; padding: var(--space-4) var(--space-4) var(--space-8); display: flex; flex-direction: column; gap: var(--space-4); }
.app-phonepage-body > * { flex: none; min-width: 0; }
/* The page's own h1 repeats the bar's title on a phone, so the bar keeps it and the page drops it. */
.app-phonepage-body .jp-phead h1 { display: none; }
.app-phonepage-body .jp-phead p { margin-top: 0; }
.app-phonepage > .jx-tabbar { flex: none; }

/* ---------- web ---------- */
.app-web { height: 100%; display: flex; background: var(--page); }
.app-navwrap { flex: none; height: 100%; }
.app-navwrap > .jx-nav { height: 100%; overflow-y: auto; }
.app-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.app-main { flex: 1; min-height: 0; overflow-y: auto; box-sizing: border-box; padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-6); }
.app-main > * { flex: none; width: 100%; box-sizing: border-box; }
.app-w-table > * { max-width: var(--width-table); }
.app-w-form > * { max-width: var(--width-form); }
.app-w-full > * { max-width: none; }

/* A Merchant App screen with no web page (remind, extend, check-in) opens in a phone-width column. */
.app-main-native { overflow: hidden; align-items: center; padding: var(--space-6); }
.app-nativecol { width: 100%; max-width: 440px; height: 100%; display: flex; flex-direction: column; background: var(--page); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.app-nativecol > .jp-nscreen { flex: 1; min-height: 0; height: auto; }
.app-nativecol .jx-tabbar { display: none; }
/* The web shell has its own language switch (nav footer, top bar), so the phone header's one would be a second. */
.app-nativecol .jp-langbtn { display: none; }
.app-bare { height: 100%; display: flex; justify-content: center; background: var(--mat); padding: var(--space-8) var(--space-4); box-sizing: border-box; }
.app-bare .app-nativecol { max-width: 420px; }

/* Nav footer: who is signed in, the language, sign out. */
.app-navwrap > .jx-nav { display: flex; flex-direction: column; }
.app-navfoot { margin-top: auto; padding: var(--space-3) var(--space-2) 0; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); }
.app-navfoot-me { flex: 1 1 100%; display: flex; flex-direction: column; padding-bottom: var(--space-1); }
.app-navfoot-me b { font: var(--type-body-strong); color: var(--ink); }
.app-navfoot-me span { font: var(--type-meta); color: var(--ink-muted); }
:lang(km) .app-navfoot-me span { font: var(--type-km-meta); }
.app-textbtn { display: inline-flex; align-items: center; min-height: var(--control-web); padding: 0 var(--space-2); border: 0; border-radius: var(--radius-md); background: none; color: var(--action-ink); font: var(--type-body-strong); text-decoration: none; cursor: pointer; white-space: nowrap; }
.app-textbtn:hover { background: var(--hover); }
.app-navfoot .app-textbtn:first-of-type { margin-left: calc(var(--space-2) * -1); }

/* Top bar: only while the nav is a drawer. */
.app-topbar { display: none; flex: none; align-items: center; gap: var(--space-2); min-height: calc(var(--control-web) + var(--space-4)); padding: 0 var(--space-4) 0 var(--space-2); background: var(--bar); border-bottom: 1px solid var(--line); }
.app-topbar-brand { flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: var(--space-2); color: var(--ink); text-decoration: none; border-radius: var(--radius-md); }
.app-topbar-brand b { font: var(--type-body-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-iconbtn { width: var(--control-native); height: var(--control-native); display: grid; place-items: center; border: 0; border-radius: var(--radius-md); background: none; color: var(--ink); cursor: pointer; flex: none; }
.app-iconbtn:hover { background: var(--hover); }
.app-scrim { display: none; }

@media (max-width: 1099px) {
  .app-topbar { display: flex; }
  .app-main { padding: var(--space-6); }
  .app-navwrap { position: fixed; inset: 0 auto 0 0; z-index: 30; transform: translateX(-100%); visibility: hidden; transition: transform .2s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .2s; }
  .app-navwrap > .jx-nav { box-shadow: var(--shadow-float); }
  .is-nav-open .app-navwrap { transform: none; visibility: visible; transition: transform .2s cubic-bezier(.2, .8, .2, 1), visibility 0s; }
  .is-nav-open .app-scrim { display: block; position: fixed; inset: 0; z-index: 20; background: var(--ink-heading); opacity: .32; }
}
@media (prefers-reduced-motion: reduce) { .app-navwrap, .is-nav-open .app-navwrap { transition: none; } }

/* ---------- overlays ----------
   bundle.css draws a sheet or dialog in place (for a board). In the app they float over the page.
   Override of bundle.css, logged in docs/GAPS.md. */
#app .jx-sheet-scrim, #app .jx-dialog-scrim { position: fixed; inset: 0; z-index: 40; min-height: 0; border-radius: 0; max-width: none; }
#app .jx-sheet { max-height: 92dvh; overflow-y: auto; }
#app .jx-sheet > .jx-dock { padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom)); }
#app .jx-dialog { max-height: calc(100dvh - var(--space-12)); overflow-y: auto; }

.app-toast { position: fixed; z-index: 50; left: 0; right: 0; bottom: calc(var(--space-6) + env(safe-area-inset-bottom)); display: flex; justify-content: center; pointer-events: none; padding: 0 var(--space-4); }
.app-toast[hidden] { display: none; }
/* On a phone the toast sits above the dock and tab bar. */
@media (max-width: 767px) { .app-toast { bottom: calc(var(--row-native) * 2 + env(safe-area-inset-bottom)); } }

/* ---------- not built ---------- */
.app-notbuilt { margin: var(--space-12) auto; max-width: 48ch; padding: 0 var(--space-4); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.app-notbuilt h1 { margin: 0; font: var(--type-title-lg); letter-spacing: var(--track-title-lg); color: var(--ink-heading); }
.app-notbuilt p { margin: 0; color: var(--ink-secondary); }
.app-notbuilt .jx-btn { text-decoration: none; }
.app-notbuilt-id { font: var(--type-ref); color: var(--ink-muted); }
.app-phone > .app-notbuilt { flex: 1; }