/**
 * LifeOS — Topbar (mobile-specific)
 *
 * Loaded via `<link rel="stylesheet" href="css/topbar.mobile.css"
 * media="(max-width: 900px)">` in app.html. The browser only applies these
 * rules when the viewport matches; on resize/rotate to desktop, the browser
 * deactivates this sheet automatically.
 *
 * No outer @media wrapper — the `<link media>` attribute is the gate. An
 * inner @media here would be a redundant double-gate.
 *
 * Rules extracted from `css/app.css`'s former `@media (max-width: 900px)`
 * block (topbar-relevant slice). Brand tokens read from `css/app.css` :root.
 */

/* position: fixed locks the header to the visible viewport on iOS so the
   URL-bar collapse/expand doesn't drag the header up and down. The
   content-area gets a matching top padding (see below) so its first row
   isn't hidden under the fixed header. */
.app-header {
  padding-top: env(safe-area-inset-top, 0px);
  height: calc(var(--header-h) + env(safe-area-inset-top, 0px));
  padding-left: var(--sp-4);
  padding-right: var(--sp-4);
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
}

/* content-area must clear the fixed header at the top. (Bottom clearance for
   the tab bar lives in the non-topbar mobile section of css/app.css.) */
.content-area {
  padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px));
}

#mobile-sidebar-toggle { display: none !important; }
.header-right { gap: 4px; }
.header-right .btn-sm { padding: var(--sp-2) var(--sp-2); font-size: var(--fs-sm); }
#report-bug-btn, #feature-request-btn, #test-script-btn { font-size: 0; padding: var(--sp-2); }
#report-bug-btn::before { content: '🐛'; font-size: var(--fs-lg); }
#feature-request-btn::before { content: '💡'; font-size: var(--fs-lg); }
#test-script-btn::before { content: '🧪'; font-size: var(--fs-lg); }
.api-key-indicator span:last-child, .gcal-indicator span:last-child { display: none; }
.header-user-name { display: none; }