/**
 * Layout configuration
 */

/**
 * The app renders inside a phone-width frame at **every** viewport — there is no desktop
 * layout, and deliberately so: Balinyaar's users (families arranging care, nurses between
 * visits) are on phones, and one layout means one set of states to design and verify.
 * A wider window gets more canvas around the frame, never a wider app.
 *
 * `components/config.ts`'s `CONTENT_MAX_WIDTH` mirrors this number — a page column can
 * never be wider than the frame it lives in.
 */
export const APP_FRAME_MAX_WIDTH = 480;

/**
 * TopBar configuration — one height at every viewport (the frame never changes width, so the
 * old mobile/desktop split had nothing left to switch on).
 */
export const TOP_BAR_HEIGHT = 56;

/**
 * Total vertical space the floating header occupies: the bar is `TOP_BAR_HEIGHT` (56) + a 1px border
 * each side = 58, plus a 10px gap above it and a 4px gap below. Deliberately the same total as
 * `BOTTOM_NAV_HEIGHT` — the two bars are the same object mirrored, so they must be the same size.
 */
export const TOP_CHROME_HEIGHT = 72;

/**
 * Total vertical space the floating bottom nav occupies, measured rather than guessed: the pill is
 * `TAB_SIZE` (44) + its own 6px padding top and bottom + a 1px border each side = 58, plus the 4px
 * gap above it and the 10px gap below. `AppFrame` reserves exactly this much padding under the
 * scrolling content, so nothing is ever hidden behind the bar. Keep in sync with `BottomBar`.
 */
export const BOTTOM_NAV_HEIGHT = 72;

/** Shared geometry of the two floating chrome bars — one definition, so they cannot drift apart. */
export const FLOATING_BAR_SX = {
  bgcolor: 'background.paper',
  border: '1px solid',
  borderColor: 'divider',
  borderRadius: 'var(--bal-radius-pill)',
  boxShadow: 'var(--bal-shadow-2)',
} as const;
