/* Phone chrome: the one owner of the phone bottom bar (Kalvin, 2026-10-10).
   Every route gets the same bar and the same clearance above it; no other stylesheet styles .mobile-nav
   on phones (desktop only hides it, in layout.css). Motion lives in motion.css. */
:root{
  /* Bar height from its content, not a fixed number: padding, top line, then a button
     (its padding, the 20px icon, the gap and one label line). Grows with the rem size. */
  --sp-phone-nav-pad:7px;
  --sp-phone-nav-h:calc(2 * var(--sp-phone-nav-pad) + 1px + .75rem + 20px + .375rem + .75rem * 1.25);
  /* Space between the last content and the bar on every page. */
  --sp-phone-nav-gap:30px;
  --sp-phone-main-clear:calc(var(--sp-phone-nav-h) + var(--sp-phone-nav-gap) + env(safe-area-inset-bottom,0px));
}
@media(max-width:720px){
  /* Keep the bar a direct child of the page: a transformed or filtered parent breaks position:fixed. */
  .mobile-nav{
    display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
    position:fixed;left:0;right:0;bottom:0;z-index:30;
    padding:var(--sp-phone-nav-pad) max(12px,env(safe-area-inset-right)) calc(var(--sp-phone-nav-pad) + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));
    background:var(--brand-ink);
    border-top:1px solid var(--brand-ink);
    box-shadow:none;
    /* Invisible on a solid bar, but keeps iPhone Safari pinning it as production
       does; without it the bar drifted up the page while scrolling. Do not remove. */
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
  }
  .mobile-nav button{
    position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.375rem;
    min-width:0;min-height:48px;padding:.375rem .125rem;border:0;border-radius:0;background:transparent;
    color:rgba(242,238,229,.74);font-size:.75rem;line-height:1.25;font-weight:500;
    overflow-wrap:normal;white-space:nowrap;letter-spacing:-.005em;
  }
  .mobile-nav button .ui-icon{color:inherit}
  .mobile-nav button.active{color:var(--brand-gold);font-weight:650}
  .mobile-nav button.active .ui-icon{color:var(--brand-gold)}
  .mobile-nav button:focus-visible{outline:2px solid var(--brand-gold);outline-offset:-2px}
  .mobile-nav .nav-icon{display:block;position:relative}
  .mobile-nav .badge{position:absolute;left:14px;top:-6px}
}