/* Phone chrome shared by every page that has a phone lane.

   The tab bar started life inside transactions-mobile.css, where only
   /transactions could reach it. Client Access needs the same bar, and a second
   copy of these rules could drift from the original with nothing to catch the
   difference - so the bar lives here and both pages load this sheet first.

   Page sheets load after this one and may override it. Nothing here is
   transactions-specific. */

:root {
  --phone-cream: #e7d8bd;
  --phone-glass: rgba(18, 17, 15, 0.82);
  --phone-glass-line: rgba(255, 247, 230, 0.16);
  --phone-safe-top: env(safe-area-inset-top, 0px);
  --phone-safe-bottom: env(safe-area-inset-bottom, 0px);
  --phone-tab-h: 58px;
  --phone-ease: cubic-bezier(0.32, 0.72, 0, 1);
}

.phone-only { display: none; }

@media (max-width: 820px) {
  /* Four doors, which is inside the 2-5 the platform guidance allows. Sections
     only - an action like Call belongs on the page it acts on, not in here. */
  .phone-tabbar { position: fixed; z-index: 900; left: 0; right: 0; bottom: 0; height: calc(var(--phone-tab-h) + var(--phone-safe-bottom)); display: grid; grid-template-columns: repeat(4, 1fr); padding: 0 6px var(--phone-safe-bottom); border-top: 1px solid rgba(255, 247, 230, 0.12); background: rgba(12, 11, 10, 0.92); backdrop-filter: blur(18px) saturate(1.2); }
  /* The resting colour is stated here rather than taken from --text-dim: that
     variable is defined on some pages and not others, so the same bar rendered
     at two different weights depending on which door you came through. This
     sits clearly above the bar without reaching the cream the current tab uses,
     which is what keeps "where I am" readable at a glance. */
  .phone-tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: rgba(255, 247, 230, 0.72); font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em; }
  /* An SVG path with no fill of its own paints black. These icons carry no fill
     attribute, so every one of them was rgb(0,0,0) on a near-black bar - the
     labels were taking the link colour and the icons were not, which is why
     three of the four doors looked like they had no icon at all. Following
     currentColor also means the active tab's icon lights with its label. */
  .phone-tabbar a svg { width: 22px; height: 22px; fill: currentColor; }
  .phone-tabbar a[aria-current="page"] { color: var(--phone-cream); }

  /* A page that carries the bar has to reserve its height, or whatever ends the
     page sits underneath it. Pages opt in by loading this sheet, so the reserve
     keys off the bar actually being present rather than off a page name.
     /transactions is exempt: it is a fixed full-screen stage that never scrolls
     the body, and it already places its own sheet above the bar. */
  body:has(.phone-tabbar):not(:has(.transactions-page)) {
    padding-bottom: calc(var(--phone-tab-h) + var(--phone-safe-bottom));
  }
}