/* ═══════════════════════════════════════════
   NAVIGATION — nav bar, sidebar, tab bars, page transitions
   ═══════════════════════════════════════════ */

/* ── Top nav ── */
nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 200;
  padding: 0 32px;
  height: 60px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(14,14,16,0.88);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--border);
}

[data-theme="light"] nav {
  background: rgba(245,245,247,0.88);
}

.nav-logo {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none;
}

.nav-logo-mark {
  width: 28px; height: 28px;
  background: var(--accent);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}

.nav-logo-mark::after {
  content: '';
  width: 10px; height: 10px;
  border: 2px solid var(--bg);
  border-radius: 50%;
  position: absolute;
}

.nav-logo-text {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: 0.04em;
}

.nav-links {
  display: flex; align-items: center; gap: 2px;
  list-style: none;
  flex: 1;
  justify-content: center;
}

.nav-links a {
  font-size: 13px;
  color: var(--text2);
  text-decoration: none;
  padding: 5px 12px;
  border-radius: var(--radius);
  transition: color 0.2s, background 0.2s;
  white-space: nowrap;
  position: relative;
}

.nav-links a:hover {
  color: var(--text);
  background: var(--bg3);
}

.nav-links a.active {
  color: var(--accent);
  background: var(--accent-glow);
  font-weight: 500;
}

.nav-links a.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 12px;
  right: 12px;
  height: 2px;
  background: var(--accent);
  border-radius: 1px;
}

/* ── Signed-out marketing links: Pricing / FAQ / About / Contact ────────────
   Scoped to .nav-out-link, NOT .nav-links a. The same <ul> also carries the
   signed-in app tabs (My Portfolio, Projections, Futures, …), and those want to
   stay quiet at 13px/normal — bolding all of them would make the app chrome
   shout over its own content.

   Spacing is li + li rather than a bigger `gap` on .nav-links, so it applies
   only BETWEEN the four links: no leading or trailing gap. That keeps the group
   sitting flush where the pill nav pushes it (nav.nav-pill .nav-links has
   margin-left:auto), instead of drifting away from the auth buttons. */
.nav-out-link a {
  font-weight: 700;
  letter-spacing: 0.03em;
}

.nav-out-link + .nav-out-link {
  margin-left: 22px;
}

/* .nav-links is hidden entirely below 880px (see the media query at the foot of
   this file), so this only has to cover the 880–1100px band, where 22px each
   would start crowding the logo. */
@media (max-width: 1100px) {
  .nav-out-link + .nav-out-link { margin-left: 12px; }
}

.nav-actions {
  display: flex; align-items: center; gap: 10px;
}

.theme-toggle {
  width: 34px; height: 34px;
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  transition: all 0.2s;
  color: var(--text2);
}

.theme-toggle:hover { border-color: var(--accent); color: var(--accent); }

/* ── Nav user state ── */
.nav-user {
  display: flex;
  align-items: center;
  gap: 12px;
}
.nav-user-name {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  color: var(--accent);
}
.btn-nav-ghost {
  background: none;
  border: none;
  color: var(--text2);
  font-size: 13px;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: var(--radius);
  font-family: var(--font-body);
  transition: color 0.2s;
}
.btn-nav-ghost:hover { color: var(--text); }

/* ── Global ticker bar ── */
#ticker-bar {
  position: fixed;
  top: 60px; left: 0; right: 0;
  height: 38px;
  z-index: 190;
  background: var(--surface);
  border-bottom: 1px solid var(--border2);
  display: flex;
  align-items: center;
  overflow: hidden;
}

.ticker-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--accent);
  background: var(--accent-glow);
  border-right: 1px solid var(--accent-border);
  padding: 0 14px;
  white-space: nowrap;
  flex-shrink: 0;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 7px;
}

.ticker-label::before {
  content: '';
  width: 5px; height: 5px;
  background: var(--accent);
  border-radius: 50%;
  flex-shrink: 0;
  animation: pulse 2s infinite;
}

.ticker-label[data-status="pre_market"],
.ticker-label[data-status="after_hours"] {
  color: var(--amber);
  background: rgba(244, 162, 97, 0.12);
  border-right-color: rgba(244, 162, 97, 0.25);
}
.ticker-label[data-status="pre_market"]::before,
.ticker-label[data-status="after_hours"]::before {
  background: var(--amber);
}

.ticker-label[data-status="closed"] {
  color: var(--text3);
  background: transparent;
  border-right-color: var(--border);
}
.ticker-label[data-status="closed"]::before {
  background: var(--text3);
  animation: none;
}

.ticker-track {
  flex: 1;
  overflow: hidden;
  height: 100%;
  display: flex;
  align-items: center;
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 32px, black calc(100% - 32px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, black 32px, black calc(100% - 32px), transparent 100%);
}

.ticker-scroll {
  display: flex;
  align-items: center;
  white-space: nowrap;
  animation: ticker-move 60s linear infinite;
  will-change: transform;
}

.ticker-scroll:hover { animation-play-state: paused; }

@keyframes ticker-move {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.ticker-item {
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-right: 1px solid var(--border);
  height: 38px;
  white-space: nowrap;
  transition: background 0.15s;
}

.ticker-item:hover { background: var(--surface2); }

.ticker-item-name  { color: var(--text2); font-size: 11px; letter-spacing: 0.04em; }
.ticker-item-price { color: var(--text); font-weight: 500; font-size: 12px; }
.ticker-item-chg   { font-size: 11px; }
.ticker-item-sep   {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  color: var(--text3);
  padding: 0 16px;
  border-right: 1px solid var(--border);
  height: 38px;
  display: inline-flex;
  align-items: center;
  background: var(--surface2);
}

/* ── Dashboard sidebar ── */
.dash-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  min-height: calc(100vh - 98px);
}

.sidebar {
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 24px 0;
  position: sticky;
  top: 98px;
  height: calc(100vh - 98px);
  overflow-y: auto;
}

.sidebar-section {
  padding: 0 16px;
  margin-bottom: 24px;
}

.sidebar-label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text3);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0 8px;
  margin-bottom: 6px;
}

.sidebar-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.15s;
  color: var(--text2);
  font-size: 13px;
  margin-bottom: 2px;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}

.sidebar-item:hover { background: var(--border); color: var(--text); }
.sidebar-item.active { background: var(--accent-glow); color: var(--accent); border: 1px solid var(--accent-border); }

.sidebar-icon {
  width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}

.dash-main {
  padding: 32px;
  background: var(--bg);
}

.dash-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 28px;
}

.dash-greeting {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 300;
  color: var(--text);
  letter-spacing: -0.01em;
}

.dash-greeting em { font-style: italic; color: var(--accent); }
.dash-date { font-size: 13px; color: var(--text3); margin-top: 2px; }

/* ── Hamburger button ── */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.nav-hamburger span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--text2);
  border-radius: 1px;
  transition: all 0.25s;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Mobile menu overlay ── */
.mobile-menu {
  display: none;
  position: fixed;
  top: 98px;
  left: 0; right: 0;
  z-index: 195;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  max-height: calc(100vh - 98px);
  overflow-y: auto;
  transform: translateY(-8px);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.2s, opacity 0.2s;
}
.mobile-menu.open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.mobile-menu-inner {
  padding: 12px 0 20px;
}
.mobile-menu-item {
  display: block;
  padding: 14px 24px;
  font-size: 15px;
  color: var(--text2);
  text-decoration: none;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-body);
  transition: color 0.15s, background 0.15s;
}
.mobile-menu-item:hover { color: var(--text); background: var(--border); }
.mobile-menu-item.active {
  color: var(--accent);
  background: var(--accent-glow);
  border-left: 2px solid var(--accent);
  padding-left: 22px;
}
.mobile-menu-cta {
  display: block;
  color: var(--accent);
  font-weight: 500;
  margin: 8px 16px 4px;
  padding: 13px 20px;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  text-align: center;
}
.mobile-menu-cta:hover { background: var(--accent-glow); }
.mobile-menu-divider {
  height: 1px;
  background: var(--border);
  margin: 8px 24px;
}

/* ── Dashboard mobile tab bar ── */
.dash-mobile-tabs {
  display: none;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0 16px;
  gap: 4px;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
}
.dash-mobile-tabs::-webkit-scrollbar { display: none; }
.dash-mobile-tab {
  flex-shrink: 0;
  padding: 10px 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text3);
  cursor: pointer;
  white-space: nowrap;
  margin-bottom: -1px;
  transition: color 0.2s, border-color 0.2s;
}
.dash-mobile-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

@media (max-width: 900px) {
  nav { padding: 0 16px; gap: 0; }
  /* Hide desktop links — all page nav moves into hamburger overlay */
  .nav-links { display: none; }
  /* Push actions + hamburger to the right edge */
  .nav-actions { margin-left: auto; gap: 6px; }
  .nav-user { gap: 6px; }
  /* Hide sign-in/trial/sign-out buttons — accessible via mobile menu */
  .nav-actions .btn-nav,
  .nav-actions .btn-nav-ghost { display: none; }
  .nav-hamburger { display: flex; }
  .mobile-menu { display: block; }
  .dash-mobile-tabs { display: flex; }
}

@media (max-width: 480px) {
  nav { padding: 0 12px; }
  .nav-user-name { display: none; }
  .theme-toggle { width: 30px; height: 30px; font-size: 13px; }
}

/* ── Offline banner ──────────────────────────────────── */
.offline-banner {
  position: fixed;
  top: 60px;
  left: 0;
  right: 0;
  z-index: 850;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 16px;
  background: rgba(255, 180, 0, 0.12);
  border-bottom: 1px solid rgba(255, 180, 0, 0.3);
  color: #ffb400;
  font-family: var(--font-mono);
  font-size: 12px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ── Mobile bottom tab bar ───────────────────────────── */
.bottom-tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 900;
  background: rgba(14,14,16,0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--border);
  display: flex; /* hidden by inline style until logged in; desktop media query always hides */
  align-items: stretch;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.bottom-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: none;
  border: none;
  color: var(--text3);
  cursor: pointer;
  padding: 8px 4px;
  min-height: 56px;
  transition: color 0.15s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.bottom-tab svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.bottom-tab span {
  font-size: 10px;
  font-family: var(--font-mono);
  letter-spacing: 0.03em;
  line-height: 1;
}
.bottom-tab.active {
  color: var(--accent);
}
.bottom-tab.active svg {
  stroke-width: 2;
}

/* Only show bottom tab bar on mobile viewports */
@media (min-width: 769px) {
  .bottom-tab-bar { display: none !important; }
  .offline-banner { top: 60px; }
}

/* Add bottom padding to page content when tab bar is visible */
@media (max-width: 768px) {
  .page { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* PWA safe area — must be last in this file to win the cascade over all nav rules above */
@supports (padding: env(safe-area-inset-top)) {
  nav {
    padding-top: env(safe-area-inset-top);
    height: calc(60px + env(safe-area-inset-top));
  }
  .offline-banner {
    top: calc(60px + env(safe-area-inset-top));
  }
}