/* Build layer over Betsy's app.css: makes the 412px mockup shell fluid on real phones and
   adds the desktop left rail at >=1024px. Utility classes replace mockup inline styles (CSP: no inline styles).
   Visual tokens all come from tokens.css; no redesign here. */
body { min-height: 100vh; }
.app { min-height: 100vh; }
.tabbar, .sticky-save, .sheet { width: 100%; max-width: 100%; left: 0; transform: none; }
.fab { right: 16px; }
.fab-menu { right: 16px; }
.rail { display: none; }
.hidden { display: none !important; }
.pad-0 { padding: 0 !important; } .pt-0 { padding-top: 0 !important; } .pb-0 { padding-bottom: 0 !important; }
.no-border { border: 0 !important; }
.card-tight { padding: 4px 16px; }
.card-toggle { padding: 8px 16px; }
.text-danger { color: var(--color-danger); } .text-warning { color: var(--color-warning); } .text-success { color: var(--color-success); }
.lbl-caps { font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.amt-lg { font-family: var(--font-display); font-weight: 800; font-size: 22px; }
.strong-display { font-family: var(--font-display); font-weight: 700; }
.avatar-lg { width: 48px; height: 48px; font-size: 16px; }
.wrap { flex-wrap: wrap; }
.hero-balance { padding-top: 12px; border-top: 1px solid var(--color-border); }
.form-error { margin-bottom: 12px; }
.login-wrap { max-width: 420px; margin: 0 auto; padding-top: 32px; }
.login-logo { width: 56px; height: 56px; margin: 0 auto 16px; display: block; }
.center { text-align: center; }
.empty { padding: 16px 0; color: var(--color-ink-muted); text-align: center; }
.list-link { display: flex; color: inherit; text-decoration: none; }
.tl-card { cursor: pointer; }
.tl-card .body { white-space: pre-wrap; }
.switch { cursor: pointer; }
.seg, .chip, .subtab { cursor: pointer; }
.toolbar { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 15px; }
.mono { font-family: ui-monospace, monospace; word-break: break-all; }
.line-card .tax-choice { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.sheet { overflow-y: auto; }
.badge-on-navy { background: rgba(255,255,255,0.15); color: #fff; }
.small-note { font-size: 12px; color: var(--color-ink-muted); margin-top: 4px; }

/* ---- Betsy's S24 Ultra findings (pwa-brand/s24-check/FINDINGS.md), Nov 10 ---- */
body, .app { min-height: 100vh; min-height: 100dvh; }
/* 1) safe-area insets */
.app-header { padding-top: var(--safe-top); height: calc(var(--header-h) + var(--safe-top));
  padding-left: calc(var(--space-4) + var(--safe-left)); padding-right: calc(var(--space-4) + var(--safe-right)); }
.tabbar { height: calc(var(--tabbar-h) + var(--safe-bottom)); padding-bottom: var(--safe-bottom);
  padding-left: calc(4px + var(--safe-left)); padding-right: calc(4px + var(--safe-right)); }
.fab { bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 12px); right: calc(16px + var(--safe-right)); }
.fab-menu { bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 76px); right: calc(16px + var(--safe-right)); }
.sticky-save { bottom: calc(var(--tabbar-h) + var(--safe-bottom)); padding-left: calc(16px + var(--safe-left)); padding-right: calc(16px + var(--safe-right)); }
.sheet { padding: 12px calc(16px + var(--safe-right)) calc(24px + var(--safe-bottom)) calc(16px + var(--safe-left)); }
.app-body { padding-left: calc(var(--space-4) + var(--safe-left)); padding-right: calc(var(--space-4) + var(--safe-right)); }
/* 4) tap targets >= 48px */
.app-header .icon-btn { width: var(--tap-min); height: var(--tap-min); min-width: var(--tap-min); }
.btn-sm { min-height: var(--tap-min); }
.chip, .subtab { min-height: var(--tap-min); }
.segmented .seg, .contact-chip { min-height: var(--tap-min); }
.section-head a { min-height: var(--tap-min); display: inline-flex; align-items: center; padding: 0 8px; margin-right: -8px; }
.btn.btn-ghost.btn-sm[aria-label="Remove line"] { width: var(--tap-min); min-width: var(--tap-min); }
a.list-item.list-link { min-height: var(--tap-min); }
/* 5) customer subtabs: right-edge fade so off-screen tabs are discoverable; end padding so the last tab clears the fade */
.subtabs { -webkit-mask-image: linear-gradient(to right, #000 86%, transparent); mask-image: linear-gradient(to right, #000 86%, transparent); padding-right: 40px; }
/* 2) + 3) landscape phone (915x412): compact chrome, FAB kept but content padded clear of it, sheet Save sticky */
@media (max-height: 500px) and (orientation: landscape) {
  .tabbar { height: calc(52px + var(--safe-bottom, 0px)); padding-top: 2px; }
  .tab { min-height: var(--tap-min); gap: 0; }
  .tab .ico { font-size: 18px; }
  .app-body { padding-bottom: calc(52px + var(--space-8) + var(--safe-bottom, 0px));
    padding-right: calc(88px + var(--safe-right)); }     /* FAB (56px + 16px + gap) never sits over cards, badges or Call chips */
  .app-body.with-sticky-save { padding-bottom: calc(52px + 72px + var(--safe-bottom, 0px)); }
  .sticky-save { bottom: calc(52px + var(--safe-bottom, 0px)); padding-top: 8px; padding-bottom: 8px; padding-right: calc(88px + var(--safe-right)); }
  .fab { bottom: calc(52px + var(--safe-bottom, 0px) + 8px); }
  .fab-menu { bottom: calc(52px + var(--safe-bottom, 0px) + 72px); }
}
@media (max-height: 500px) {
  .sheet { max-height: 100vh; max-height: 100dvh; display: flex; flex-direction: column; }
  .sheet > .btn-primary:last-child, .sheet .sheet-save { position: sticky; bottom: 0; margin-top: auto; flex-shrink: 0;
    box-shadow: 0 -8px 16px #fff; }
}

@media (min-width: 1024px) {
  .shell { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
  .rail { display: flex; position: sticky; top: 0; height: 100vh; }
  .tabbar { display: none; }
  .app-header { position: sticky; }
  .app-body { max-width: calc(var(--content-max) + 32px); width: 100%; padding: 28px 32px 120px; }
  .app-body.with-sticky-save { padding-bottom: 120px; }
  .sticky-save { left: 240px; width: calc(100% - 240px); bottom: 0; padding: 12px 32px; }
  .sticky-save .btn { max-width: 420px; }
  .fab { bottom: 24px; right: 32px; }
  .fab-menu { bottom: 92px; right: 32px; }
  .sheet { left: auto; right: 0; width: 460px; border-radius: 20px 0 0 0; }
  .today-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 20px; align-items: start; }
  .today-grid .section { margin-top: 0; }
}