/* Site-wide header, mobile bottom nav, and account menu. Loaded on every
   non-capture page (capture pages hide chrome to maximize camera space --
   see capture.css). Responsive behavior is CSS-media-query-driven; shell.js
   never branches on breakpoints in JS. */

#shell-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(26,21,18,0.92); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--hair);
  padding-top: env(safe-area-inset-top);
}
.shell-header-inner {
  max-width: var(--content-max); margin: 0 auto;
  display: flex; align-items: center; gap: 16px;
  padding: 12px 20px; min-height: 44px;
}
.shell-logo { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; text-decoration: none; color: var(--text); flex: 0 0 auto; }
.shell-nav-desktop { display: none; gap: 6px; margin-right: auto; margin-left: 24px; }
.shell-nav-link {
  padding: 10px 14px; border-radius: var(--radius-pill); text-decoration: none;
  color: var(--muted); font-weight: 600; font-size: 14.5px; min-height: 44px; display: flex; align-items: center;
}
.shell-nav-link:hover { color: var(--text); }
.shell-nav-link.active { color: var(--text); background: rgba(251,243,233,0.08); }

/* Settings only renders (signed-out) via shell.js -- guest sound/vibrate/
   API-base prefs work without an account, but once signed in it lives in
   the account menu instead, so it never competes with Photo/Live as a
   second labelled pill. Icon-only at every width, on purpose. */
.shell-settings-btn { width: 44px; height: 44px; padding: 0; border-radius: 50%; flex: 0 0 auto; }
/* Always the right-aligned group, whether or not the desktop nav (hidden
   below 900px) or the settings button (hidden signed-in) are present. */
.shell-header-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.shell-account-area { display: flex; align-items: center; gap: 10px; position: relative; }

/* Below 900px the settings pill + account chip/sign-in button get cramped
   next to the logo with no desktop nav to give them room -- hide both and
   show only the hamburger, which opens the full sidebar drawer instead. */
.shell-hamburger-btn { display: flex; }
@media (max-width: 899px) {
  .shell-settings-btn, .shell-account-area { display: none; }
}

.shell-account-chip {
  display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 12px 4px 4px;
  border-radius: var(--radius-pill); border: 1px solid var(--hair); background: rgba(251,243,233,0.06);
  color: var(--text); cursor: pointer; font-family: var(--font); font-size: 14px; font-weight: 600;
}
.shell-avatar {
  width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: #2a1810;
  display: flex; align-items: center; justify-content: center; font-weight: 700; flex: 0 0 auto;
}
.shell-account-label { display: none; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shell-account-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 50; min-width: 220px;
  background: var(--surface-strong); border: 1px solid var(--hair); border-radius: 16px;
  padding: 8px; display: flex; flex-direction: column; gap: 2px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.4); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
}
.shell-account-menu a, .shell-account-menu button {
  display: block; width: 100%; text-align: left; min-height: 44px; padding: 0 12px;
  border-radius: 10px; border: 0; background: transparent; color: var(--text);
  font-family: var(--font); font-size: 14.5px; font-weight: 600; text-decoration: none;
  cursor: pointer; display: flex; align-items: center;
}
.shell-account-menu a:hover, .shell-account-menu button:hover { background: rgba(251,243,233,0.08); }
.shell-account-menu button#shellSignOutBtn { color: var(--danger); }

/* Bottom nav was superseded by the hamburger + sidebar drawer -- shell.js
   now removes #shell-bottom-nav from the DOM entirely, so no fixed-bar
   space needs to be reserved at the bottom of any page anymore. */
.sheet-inner { padding-bottom: calc(env(safe-area-inset-bottom) + 32px); }

footer#shell-footer { color: var(--muted); font-size: 14.5px; text-align: center; padding: 40px 20px calc(env(safe-area-inset-bottom) + 40px); }
.shell-footer-inner { max-width: var(--content-max); margin: 0 auto; }
.shell-footer-inner a { color: var(--muted); text-decoration: none; padding: 0 4px; transition: color 0.15s ease; }
.shell-footer-inner a:hover { color: var(--accent); }

@media (min-width: 900px) {
  .shell-nav-desktop { display: flex; }
  .shell-account-label { display: inline; }
  /* Desktop has room for the settings pill + account chip/sign-in inline --
     no need for the hamburger/sidebar at all. */
  .shell-hamburger-btn { display: none; }
}

/* ---- mobile sidebar drawer (hamburger menu) ---- */
.shell-sidebar-backdrop {
  position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,0.55);
  opacity: 0; pointer-events: none; transition: opacity 0.2s ease;
}
.shell-sidebar-backdrop.show { opacity: 1; pointer-events: auto; }

.shell-sidebar {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 61; width: min(320px, 84vw);
  /* Solid, near-opaque -- this sits over live page content, so it needs to
     read clearly rather than let text/images behind it show through. */
  background: #1e1712; border-left: 1px solid var(--hair);
  padding: calc(env(safe-area-inset-top) + 16px) 16px calc(env(safe-area-inset-bottom) + 16px);
  display: flex; flex-direction: column; gap: 4px; overflow-y: auto;
  transform: translateX(100%); transition: transform 0.22s ease;
  box-shadow: -12px 0 32px rgba(0,0,0,0.4);
}
.shell-sidebar.open { transform: translateX(0); }

.shell-sidebar-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.shell-sidebar-nav { display: flex; flex-direction: column; gap: 2px; }
.shell-sidebar-link {
  display: flex; align-items: center; min-height: 48px; padding: 0 12px; border-radius: 12px;
  border: 0; background: transparent; width: 100%; text-align: left; cursor: pointer;
  color: var(--text); font-family: var(--font); font-size: 15.5px; font-weight: 600; text-decoration: none;
}
.shell-sidebar-link:hover { background: rgba(251,243,233,0.08); }
.shell-sidebar-link.active { color: var(--accent); background: rgba(240,153,107,0.1); }
.shell-sidebar-danger { color: var(--danger); }
/* Pinned to the bottom of the drawer, separated from the nav links above
   only by this spacing -- no divider line. */
.shell-sidebar-bottom { margin-top: auto; display: flex; flex-direction: column; gap: 2px; padding-top: 16px; }
.shell-sidebar-account { display: flex; align-items: center; gap: 10px; padding: 8px 12px 14px; }
.shell-sidebar-email { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shell-sidebar-signin { width: 100%; }

/* Prevent background scroll while the drawer is open. */
body.shell-sidebar-open { overflow: hidden; }