/* Phone-first navigation. Shared brand values live in tokens.css. */
:root { --mobile-nav-height: 72px; }
.notification-link, .home-notifications, .mobile-nav a { position: relative; }
.notification-dot { position: absolute; inset-block-start: 8px; inset-inline-end: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--brand-red); outline: 2px solid var(--paper); }
.mobile-nav a > span { min-width: 0; max-width: 100%; overflow-wrap: anywhere; hyphens: auto; text-align: center; line-height: 1.35; }
html[lang="en"] .mobile-nav a > span:not(.notification-dot) { overflow-wrap: normal; hyphens: none; }
html { scroll-padding-top: 92px; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--primary); outline-offset: 4px; }
.notification-link, .account-chip, .header-actions .button { min-width: 44px; min-height: 44px; }

@media (max-width: 800px) {
  html { scroll-padding-top: calc(80px + env(safe-area-inset-top, 0px)); scroll-padding-bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom, 0px) + 20px); }
  body { padding-bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom, 0px)); }
  body.auth-page { padding-bottom: env(safe-area-inset-bottom, 0px); }
  .site-header { position: sticky; top: 0; z-index: 25; height: calc(68px + env(safe-area-inset-top, 0px)); padding-top: env(safe-area-inset-top, 0px); }
  .header-inner { padding-inline: max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-left, 0px)); gap: 12px; }
  .brand { min-height: 44px; gap: 8px; }
  .brand-logo { width: 57px; }
  .brand-copy { gap: 4px; max-width: 75px; flex-wrap: wrap; }
  .brand-copy strong { font-size: var(--text-xs); }
  .brand-plus { font-size: var(--text-xs); padding: 0 7px; }
  .header-actions { gap: 8px; }
  .header-actions .button { min-height: 44px; font-size: var(--text-xs); padding: 7px 12px; gap: 7px; }
  .header-actions .button > span { display: none; }
  .header-actions .account-chip { display: none; }
  .notification-link { width: 44px; height: 44px; border-radius: 14px; color: var(--primary); }
  .main-shell { padding: 20px max(16px, env(safe-area-inset-right, 0px)) 28px max(16px, env(safe-area-inset-left, 0px)); min-height: calc(100svh - 180px); }
  .mobile-nav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: fixed; bottom: 0; inset-inline: 0; min-height: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom, 0px)); padding: 6px max(8px, env(safe-area-inset-right, 0px)) calc(6px + env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px)); gap: 2px; background: var(--paper); border-top: 1px solid var(--line); box-shadow: 0 -4px 24px rgb(0 26 112 / 4%); z-index: 30; }
  .mobile-nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; min-height: 58px; padding: 4px 0; font-size: var(--text-xs); color: var(--muted); border-radius: 13px; line-height: 1.6; }
  .mobile-nav .icon { width: 23px; height: 23px; }
  .mobile-nav.operator-nav { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; }
  .mobile-nav a.active { background: var(--blue); color: var(--primary); font-weight: 700; }
  .mobile-nav a:focus-visible { outline-offset: -3px; }
  body.keyboard-open .mobile-nav { display: none; }
  .site-footer { font-size: var(--text-xs); margin: 0 16px; padding: 20px 0; }
  body:not(.auth-page) .site-footer { display: none; }
}