/* ==============================================================
   Market Insight — unified top nav
   Shared across index.html, dashboard.html, landing.html, admin.html.
   Inherits tokens from style.css / dashboard.css where present;
   also defines safe fallbacks so it works on landing/admin pages.
   ============================================================== */

:root {
  --mi-nav-accent:       #4F98A3;
  --mi-nav-accent-2:     #6fbcc9;
  --mi-nav-text:         #e0e0e0;
  --mi-nav-text-muted:   #b0bec5;
  --mi-nav-text-faint:   #5A5957;
  /* Solid grey divider — mirrors .db-subtabs-nav --border (Watchlists sub-tab) */
  --mi-nav-border:       #2a2a30;
  --mi-nav-border-soft:  rgba(42,42,48,0.3);
  --mi-nav-surface:      #1c1c20;
  --mi-nav-surface-hov:  #222226;
  --mi-nav-bg:           #131316;
  --mi-nav-bg-elev:      #191920;
  --mi-nav-up:           #0EB35B;

  --mi-nav-ease-reveal: cubic-bezier(0.22, 1, 0.36, 1);
  --mi-nav-ease-exit:   cubic-bezier(0.4, 0, 0.2, 1);
  --mi-nav-dur-in:   220ms;
  --mi-nav-dur-out:  160ms;
  --mi-nav-stagger:  18ms;
}

/* ==============================================================
   TOP BAR — two-row
   ============================================================== */
/* NOTE: background is set solid below (no translucency). */
/* Fixed header: brand row (96px) + nav row (48px) + 1px grey divider = 145px.
   `position: fixed` so it never scrolls away even if an ancestor has overflow
   styling that would break `position: sticky`. Body gets matching top padding
   (see body.mi-nav-host rule below) so page content starts beneath the bar. */
:root {
  --mi-topbar-brand-h: 96px;
  --mi-topbar-nav-h: 48px;
  --mi-topbar-total-h: calc(var(--mi-topbar-brand-h) + var(--mi-topbar-nav-h) + 1px);
}
.mi-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  /* Solid, non-translucent nav background (user preference). */
  background: #131316;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  /* Full-width grey divider under nav row — matches Watchlists sub-tab treatment. */
  border-bottom: 1px solid var(--mi-nav-border);
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "SF Pro Text",
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  color: var(--mi-nav-text);
}
/* Push page content below the fixed bar on every page that uses mi-nav. */
body.mi-nav-host { padding-top: var(--mi-topbar-total-h); }
/* Anchor scroll offset so in-page anchors land below the fixed bar. */
body.mi-nav-host { scroll-padding-top: var(--mi-topbar-total-h); }

.mi-topbar *, .mi-topbar *::before, .mi-topbar *::after { box-sizing: border-box; }

.mi-topbar-inner {
  max-width: 1680px;
  margin: 0 auto;
  padding: 0 28px;
  display: flex;
  align-items: center;
}
.mi-topbar-inner--brand {
  height: 96px;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid var(--mi-nav-border-soft);
}
.mi-topbar-inner--nav {
  height: 48px;
  gap: 32px;
}

/* ------------- brand ------------- */
/* Brand logo upsized 40% across all pages: mark 40->56, name 24->34,
   live 11->15, gap 10->14. Header row lifted 80->96 to match. */
.mi-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: var(--mi-nav-text);
  flex: 0 0 auto;
}
.mi-brand-mark {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 1px 4px rgba(79,152,163,0.35));
}
.mi-brand-mark svg { display: block; width: 100%; height: 100%; }
.mi-brand-name {
  font-size: 34px;
  letter-spacing: -0.015em;
  display: flex;
  white-space: nowrap;
}
.mi-brand-name-strong { font-weight: 700; color: var(--mi-nav-text); }
.mi-brand-name-light  { font-weight: 400; color: var(--mi-nav-accent); margin-left: 1px; }

/* Live indicator on brand row (index-only) */
.mi-brand-live {
  margin-left: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mi-nav-text-faint);
}
.mi-brand-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mi-nav-up);
  box-shadow: 0 0 0 4px rgba(14,179,91,0.15);
  animation: mi-live-pulse 2.2s ease-in-out infinite;
}
@keyframes mi-live-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}

/* ==============================================================
   MAIN NAV LINKS
   ============================================================== */
.mi-mainnav { flex: 1 1 auto; min-width: 0; }
.mi-mainnav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}

.mi-nav-item { position: static; }
.mi-nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  padding: 10px 14px;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.005em;
  /* Brighter default (was text-muted) so signed-in nav reads as active */
  color: var(--mi-nav-text);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: color 140ms var(--mi-nav-ease-exit);
}
.mi-nav-link:hover,
.mi-nav-link:focus-visible {
  color: var(--mi-nav-text);
  outline: none;
}

/* Active underline — animates width via scaleX */
.mi-nav-link::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--mi-nav-accent) 0%, var(--mi-nav-accent-2) 100%);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 220ms var(--mi-nav-ease-reveal);
  border-radius: 2px;
}
.mi-nav-item--active > .mi-nav-link::after,
.mi-nav-item--open   > .mi-nav-link::after { transform: scaleX(1); }
.mi-nav-item--active > .mi-nav-link { color: var(--mi-nav-text); }

/* Chevron */
.mi-chev {
  width: 10px;
  height: 10px;
  margin-top: 1px;
  color: var(--mi-nav-text-faint);
  transition: transform 260ms var(--mi-nav-ease-reveal),
              color 140ms var(--mi-nav-ease-exit);
  flex: 0 0 auto;
}
.mi-nav-item--open .mi-chev,
.mi-nav-item--has-menu:hover .mi-chev { transform: rotate(180deg); color: var(--mi-nav-accent); }

/* ==============================================================
   GATED (logged-out) STATE — dim only, no lock icon
   ============================================================== */
.mi-topbar[data-auth="out"] .mi-nav-item[data-members] > .mi-nav-link {
  color: rgba(176, 190, 197, 0.32);
  cursor: not-allowed;
}
.mi-topbar[data-auth="out"] .mi-nav-item[data-members] > .mi-nav-link:hover {
  color: rgba(176, 190, 197, 0.45);
}
.mi-topbar[data-auth="out"] .mi-nav-item[data-members] > .mi-nav-link::after {
  background: rgba(176, 190, 197, 0.3);
}
.mi-topbar[data-auth="out"] .mi-nav-item[data-members] .mi-chev {
  color: rgba(90, 89, 87, 0.6);
}

/* Gated children inside a mega-pane (Stock Insights when logged out) */
.mi-topbar[data-auth="out"] .mi-megapane[data-for="stock-insights"] .mi-megachild {
  opacity: 0.34;
  pointer-events: none;
}

/* Admin-only item — hidden by default; JS unhides when admin email matches */
.mi-nav-item[data-admin="1"] { display: none; }
.mi-topbar[data-admin="1"] .mi-nav-item[data-admin="1"] { display: list-item; }

/* AI Lab item — hidden by default; revealed when /api/me grants access */
.mi-nav-item[data-ailab="1"] { display: none; }
.mi-topbar[data-ailab="1"] .mi-nav-item[data-ailab="1"] { display: list-item; }

/* ==============================================================
   RIGHT-SIDE CONTROLS
   ============================================================== */
.mi-topbar-right { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }

.mi-auth-user {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--mi-nav-text-muted);
  font-size: 12px;
  letter-spacing: 0.02em;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mi-auth-user-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--mi-nav-up);
  box-shadow: 0 0 0 3px rgba(14,179,91,0.18);
  flex: 0 0 auto;
}
.mi-topbar[data-auth="out"] .mi-auth-user { display: none; }

.mi-signin-btn, .mi-signout-btn {
  background: var(--mi-nav-accent);
  color: #fff;
  border: 0;
  border-radius: 8px;
  padding: 7px 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 140ms, transform 140ms;
}
.mi-signin-btn:hover, .mi-signout-btn:hover { background: var(--mi-nav-accent-2); }
.mi-signin-btn:active, .mi-signout-btn:active { transform: translateY(1px); }
.mi-topbar[data-auth="in"]  .mi-signin-btn  { display: none !important; }
.mi-topbar[data-auth="out"] .mi-signout-btn { display: none !important; }
/* Fallback: if a VISIBLE avatar has been mounted into the topbar, the user
   is signed in — hide the Sign in button regardless of data-auth timing.
   Uses inline style check so hidden placeholder wrappers (dashboard/admin
   ship their avatar markup as style="display:none") do NOT trigger the hide.
   Avatar visibility is driven by the page's own auth handler. */
.mi-topbar-right:has(.pub-avatar-wrap:not([style*="display: none"]):not([style*="display:none"])) .mi-signin-btn,
.mi-topbar-right:has(.db-avatar-wrap:not([style*="display: none"]):not([style*="display:none"])) .mi-signin-btn { display: none !important; }
.mi-signout-btn {
  background: transparent;
  color: var(--mi-nav-text-muted);
  border: 1px solid var(--mi-nav-border);
}
.mi-signout-btn:hover {
  background: var(--mi-nav-surface-hov);
  color: var(--mi-nav-text);
  border-color: var(--mi-nav-accent);
}

/* ==============================================================
   RELOCATED MOUNTS (search, date, refresh, avatar)
   Page-native widgets are moved into these mounts at runtime.
   We reset their inherited page styling and give them a unified
   look inside the topbar.
   ============================================================== */
.mi-search-mount,
.mi-date-mount,
.mi-avatar-mount,
.mi-refresh-mount {
  display: inline-flex;
  align-items: center;
}
.mi-search-mount:empty,
.mi-date-mount:empty,
.mi-avatar-mount:empty,
.mi-refresh-mount:empty { display: none; }

/* --- Search box (index & dashboard) --- */
.mi-search-mount .stock-search-wrap,
.mi-search-mount .db-search-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0;
  width: 240px;
  max-width: 28vw;
}
.mi-search-mount .stock-search-input,
.mi-search-mount .db-search-input {
  width: 100%;
  height: 40px;
  padding: 8px 62px 8px 14px;
  border-radius: 10px;
  border: 1px solid var(--mi-nav-border);
  background: rgba(255,255,255,0.04);
  color: var(--mi-nav-text);
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: border-color 140ms, background 140ms;
  box-sizing: border-box;
}
.mi-search-mount .stock-search-input:focus,
.mi-search-mount .db-search-input:focus {
  border-color: var(--mi-nav-accent);
  background: rgba(255,255,255,0.07);
}
.mi-search-mount .stock-search-input::placeholder,
.mi-search-mount .db-search-input::placeholder {
  color: var(--mi-nav-text-faint);
}
.mi-search-mount .stock-search-btn,
.mi-search-mount .db-search-btn {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 7px;
  border: 0;
  background: transparent;
  color: var(--mi-nav-text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Upsize the magnifier SVGs (hard-coded to 15x15 in page markup). */
.mi-search-mount .stock-search-btn svg,
.mi-search-mount .db-search-btn svg {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px;
  min-height: 20px;
  flex-shrink: 0;
  display: block;
}
.mi-search-mount .stock-search-btn:hover,
.mi-search-mount .db-search-btn:hover {
  color: var(--mi-nav-text);
  background: var(--mi-nav-surface-hov);
}
.mi-search-mount .stock-search-clear,
.mi-search-mount .db-search-clear {
  position: absolute;
  right: 38px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: var(--mi-nav-text-faint);
  cursor: pointer;
  font-size: 17px;
  line-height: 1;
}
.mi-search-mount .stock-search-clear:hover,
.mi-search-mount .db-search-clear:hover {
  background: var(--mi-nav-surface-hov);
  color: var(--mi-nav-text);
}
/* Dropdown suggestions anchor to the search wrap */
.mi-search-mount .sd-search-suggestions,
.mi-search-mount .db-search-suggestions {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--surface, #1e1e2a);
  border: 1px solid var(--border, rgba(255,255,255,0.1));
  border-radius: 0 0 6px 6px;
  max-height: 260px;
  overflow-y: auto;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.mi-search-mount .sd-search-suggestions:empty,
.mi-search-mount .db-search-suggestions:empty { display: none; }

/* Individual suggestion rows */
.mi-search-mount .db-search-suggestion,
.mi-search-mount .sd-search-suggestion {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  cursor: pointer;
  border-bottom: 1px solid var(--border2, rgba(255,255,255,0.06));
  transition: background 0.15s;
}
.mi-search-mount .db-search-suggestion:last-child,
.mi-search-mount .sd-search-suggestion:last-child { border-bottom: none; }
.mi-search-mount .db-search-suggestion:hover,
.mi-search-mount .db-search-suggestion.active,
.mi-search-mount .sd-search-suggestion:hover,
.mi-search-mount .sd-search-suggestion.active {
  background: rgba(79,152,163,0.08);
}

/* Ticker symbol column */
.mi-search-mount .db-search-suggestion-sym,
.mi-search-mount .sd-search-suggestion-sym {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent, #4f98a3);
  min-width: 55px;
  flex-shrink: 0;
}

/* Company name column */
.mi-search-mount .db-search-suggestion-name,
.mi-search-mount .sd-search-suggestion-name {
  font-size: 12px;
  color: var(--text-muted, #9090a8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

/* Exchange tag */
.mi-search-mount .db-search-suggestion-exchange,
.mi-search-mount .sd-search-suggestion-exchange {
  font-size: 10px;
  color: var(--text-faint, #606078);
  white-space: nowrap;
}

/* "No results" fallback message */
.mi-search-mount .db-search-suggestions > div,
.mi-search-mount .sd-search-suggestions > div {
  padding: 10px;
  color: var(--text-faint, #606078);
  font-size: 12px;
}

/* --- Date / time (self-rendered by mi-nav.js, unified across all pages) --- */
.mi-date-mount .mi-date-text,
.mi-date-mount #weekLabel,
.mi-date-mount #dbDateTime,
.mi-date-mount .week-label,
.mi-date-mount .db-datetime-sub {
  display: inline-block;
  color: var(--mi-nav-text-muted);
  font-size: 12px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  margin: 0;
  padding: 0;
}

/* --- Avatar (index .pub-avatar-wrap, dashboard #dbAvatarWrap) --- */
.mi-avatar-mount .pub-avatar-wrap,
.mi-avatar-mount .db-avatar-wrap {
  position: relative;
  display: inline-block;
  margin: 0;
}
/* Iter 12DN4 — Avatar styling now mirrors dashboard.css's canonical
   .db-avatar-btn (36px solid teal, no border, white 15px initial) so every
   page that mounts the avatar into the unified topbar looks identical. The
   previous 32px gradient with dark text was visibly inconsistent on /portfolio
   where dashboard.css is not loaded. */
.mi-avatar-mount .pub-avatar-btn,
.mi-avatar-mount .db-avatar-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: #4F98A3;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: box-shadow 0.2s, transform 0.15s;
}
.mi-avatar-mount .pub-avatar-btn:hover,
.mi-avatar-mount .db-avatar-btn:hover {
  box-shadow: 0 0 0 3px rgba(79, 152, 163, 0.3);
  transform: scale(1.05);
}
/* Ensure the initial inherits the button's white color even when the
   page doesn't load dashboard.css (e.g. /portfolio). */
.mi-avatar-mount .db-avatar-btn #dbAvatarInitial,
.mi-avatar-mount .pub-avatar-btn #pubAvatarInitial {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: 1;
  user-select: none;
}
/* Dropdowns anchor to the avatar wrap */
.mi-avatar-mount .pub-avatar-dropdown,
.mi-avatar-mount .db-avatar-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 1001;
  background: #1c1c20;
  border: 1px solid #2a2a30;
  border-radius: 10px;
  padding: 6px 0;
  min-width: 220px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}

/* Dropdown items — must style <a> AND <button> consistently, and must
   override any page-level link styles (e.g. admin.css gives <a> a purple
   underlined look by default). */
.mi-avatar-mount .pub-avatar-dropdown-item,
.mi-avatar-mount .db-avatar-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 16px;
  background: none;
  border: none;
  color: #e0e0e0;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
  text-align: left;
  text-decoration: none;
  box-sizing: border-box;
}
.mi-avatar-mount .pub-avatar-dropdown-item:hover,
.mi-avatar-mount .db-avatar-dropdown-item:hover {
  background: rgba(79, 152, 163, 0.12);
  color: #e0e0e0;
  text-decoration: none;
}
.mi-avatar-mount .pub-avatar-dropdown-item:visited,
.mi-avatar-mount .db-avatar-dropdown-item:visited {
  color: #e0e0e0;
}
.mi-avatar-mount .pub-avatar-dropdown-item svg,
.mi-avatar-mount .db-avatar-dropdown-item svg {
  flex-shrink: 0;
  opacity: 0.6;
}
.mi-avatar-mount .pub-avatar-dropdown-item.pub-avatar-dropdown-donate,
.mi-avatar-mount .db-avatar-dropdown-item.db-avatar-dropdown-donate {
  color: #60a5fa;
}
.mi-avatar-mount .pub-avatar-dropdown-item.pub-avatar-dropdown-donate:visited,
.mi-avatar-mount .db-avatar-dropdown-item.db-avatar-dropdown-donate:visited {
  color: #60a5fa;
}
.mi-avatar-mount .pub-avatar-dropdown-item.pub-avatar-dropdown-donate svg,
.mi-avatar-mount .db-avatar-dropdown-item.db-avatar-dropdown-donate svg {
  stroke: #60a5fa;
  opacity: 1;
}
.mi-avatar-mount .pub-avatar-dropdown-item.pub-avatar-dropdown-donate:hover,
.mi-avatar-mount .db-avatar-dropdown-item.db-avatar-dropdown-donate:hover {
  background: rgba(96, 165, 250, 0.12);
  color: #60a5fa;
}

/* --- Refresh button (far right of nav row) --- */
.mi-refresh-mount {
  margin-left: auto;
  flex: 0 0 auto;
}
.mi-refresh-mount #refreshBtn,
.mi-refresh-mount .refresh-btn {
  background: transparent;
  border: 1px solid var(--mi-nav-border);
  color: var(--mi-nav-text-muted);
  padding: 6px 10px;
  border-radius: 8px;
  height: 32px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 140ms, border-color 140ms, background 140ms;
}
.mi-refresh-mount #refreshBtn:hover,
.mi-refresh-mount .refresh-btn:hover {
  color: var(--mi-nav-text);
  border-color: var(--mi-nav-accent);
  background: var(--mi-nav-surface-hov);
}
.mi-refresh-mount #refreshBtn .refresh-icon,
.mi-refresh-mount .refresh-btn svg { stroke: currentColor; }

/* --- Hide legacy / orphaned controls on pages that host the topbar --- */
body .mi-topbar + * #authBtn,
body #authBtn[style*="margin-left"] { /* no-op placeholder */ }
.mi-topbar[data-auth="in"] ~ * #authBtn { display: none !important; }
/* Orphaned dashboard back-link (HTML removed, CSS selector kept in dashboard.css) */
.db-back-link { display: none !important; }
/* Orphaned dashboard Admin button (standalone, replaced by nav item) */
#dbAdminBtn { display: none !important; }

/* Hide the original header-right refresh-group / header-meta now that items are in topbar */
body.has-mi-topbar .header-right,
body.has-mi-topbar .header-meta { /* optional: page CSS handles this */ }

/* ==============================================================
   MEGA-PANES
   ============================================================== */
/* Mega-pane reveal: animated via GPU-accelerated transform + opacity
   (not clip-path / max-height — those trigger layout and repaint every frame,
   especially on iPad Safari where backdrop-filter makes the jank worse). */
.mi-megapane {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  pointer-events: none;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(19,19,22,0.97), rgba(19,19,22,0.94));
  border-bottom: 1px solid var(--mi-nav-border);
  /* Start above the bar, faded out */
  opacity: 0;
  transform: translate3d(0, -8px, 0);
  transform-origin: top center;
  transition:
    opacity var(--mi-nav-dur-in) var(--mi-nav-ease-reveal),
    transform var(--mi-nav-dur-in) var(--mi-nav-ease-reveal),
    visibility 0s linear var(--mi-nav-dur-in);
  visibility: hidden;
  will-change: transform, opacity;
  /* Promote to own compositor layer */
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
.mi-megapane.is-open {
  pointer-events: auto;
  opacity: 1;
  transform: translate3d(0, 0, 0);
  visibility: visible;
  transition:
    opacity var(--mi-nav-dur-in) var(--mi-nav-ease-reveal),
    transform var(--mi-nav-dur-in) var(--mi-nav-ease-reveal);
}
.mi-megapane.is-closing {
  transition:
    opacity var(--mi-nav-dur-out) var(--mi-nav-ease-exit),
    transform var(--mi-nav-dur-out) var(--mi-nav-ease-exit),
    visibility 0s linear var(--mi-nav-dur-out);
}
/* Instant collapse when the user picks a submenu item or a leaf link —
   no fade-out, the pane is gone on the next paint. */
.mi-megapane.is-closing-instant {
  transition: none !important;
  opacity: 0 !important;
  transform: translate3d(0, -8px, 0) !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.mi-megapane.is-closing-instant .mi-megachild {
  transition: none !important;
  opacity: 0 !important;
}

/* Backdrop blur only on hardware that can handle it well — guarded behind @supports
   and applied as a static filter, NOT transitioned (transitioning backdrop-filter
   causes per-frame rasterization). */
@media (min-width: 900px) {
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .mi-megapane {
      background: linear-gradient(180deg, rgba(19,19,22,0.82), rgba(19,19,22,0.74));
      -webkit-backdrop-filter: blur(18px) saturate(1.3);
              backdrop-filter: blur(18px) saturate(1.3);
    }
  }
}
/* Respect users who prefer no motion */
@media (prefers-reduced-motion: reduce) {
  .mi-megapane,
  .mi-megapane.is-open,
  .mi-megapane.is-closing,
  .mi-megachild { transition-duration: 0ms !important; transform: none !important; }
}

.mi-megapane-inner {
  position: relative;
  max-width: 1680px;
  margin: 0 auto;
  padding: 18px 28px 22px;
  min-height: 88px;
  display: flex;
  align-items: center;
  gap: 28px;
}

/* Pane eyebrow/title label was redundant (menu item already names the pane) — hidden site-wide */
.mi-megapane-eyebrow { display: none !important; }

.mi-megapane-children {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.mi-megachild {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 18px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--mi-nav-text);
  min-width: 180px;
  cursor: pointer;

  opacity: 0;
  transform: translate3d(0, 6px, 0);
  transition:
    opacity 200ms var(--mi-nav-ease-reveal),
    transform 200ms var(--mi-nav-ease-reveal),
    background 140ms var(--mi-nav-ease-exit),
    color 140ms var(--mi-nav-ease-exit);
  transition-delay: calc(var(--mi-nav-stagger) * var(--i, 0) + 40ms);
  will-change: transform, opacity;
}
.mi-megapane.is-open .mi-megachild {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.mi-megapane.is-closing .mi-megachild {
  transition-delay: 0ms;
  transition-duration: 90ms;
  opacity: 0;
  transform: translate3d(0, 3px, 0);
}
.mi-megachild:hover { background: var(--mi-nav-surface-hov); }

.mi-megachild-label {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--mi-nav-text);
  line-height: 1.2;
}
.mi-megachild-meta {
  font-size: 11.5px;
  color: var(--mi-nav-text-faint);
  letter-spacing: 0.01em;
}

/* Tape-sweep luminance line */
.mi-megapane-sweep {
  position: absolute;
  left: -20%;
  top: 0;
  height: 1px;
  width: 40%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(111, 188, 201, 0.0)   8%,
    rgba(111, 188, 201, 0.85) 50%,
    rgba(111, 188, 201, 0.0)  92%,
    transparent 100%);
  opacity: 0;
  transform: translateX(0);
}
.mi-megapane.is-open .mi-megapane-sweep {
  animation: mi-tape-sweep 780ms cubic-bezier(0.25, 0.1, 0.25, 1) 60ms 1 forwards;
}
@keyframes mi-tape-sweep {
  0%   { opacity: 0; transform: translateX(0); }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(350%); }
}

/* Subtle glow under the bar when a pane is open */
.mi-topbar-underline {
  position: absolute;
  left: 0; right: 0; top: 100%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%, rgba(79,152,163,0) 15%,
    rgba(79,152,163,0.35) 50%,
    rgba(79,152,163,0) 85%, transparent 100%);
  opacity: 0;
  transition: opacity 220ms var(--mi-nav-ease-reveal);
  pointer-events: none;
}
.mi-topbar.has-open .mi-topbar-underline { opacity: 1; }

/* ==============================================================
   Integration: on /markets (index.html), hide duplicated elements
   in the legacy .header so we don't double up brand / auth / tabs.
   ============================================================== */
body.mi-nav-host .header .header-left .header-home-link,
body.mi-nav-host .header .header-left .live-indicator {
  display: none !important;
}
/* Empty header-left after hiding brand: collapse to zero width so search sits flush left */
body.mi-nav-host .header .header-left { flex: 0 0 auto; min-width: 0; gap: 0; }
/* Keep stock search visible in legacy header (explicit for clarity) */
body.mi-nav-host .header .stock-search-wrap { display: flex !important; }
body.mi-nav-host .header {
  padding-top: 12px;
  padding-bottom: 12px;
  min-height: auto;
  border-top: 0;
}
body.mi-nav-host .tab-nav { display: none !important; }
body.mi-nav-host #authBtn { display: none !important; }
body.mi-nav-host .auth-user-email { display: none !important; }

/* Dashboard page — the legacy .db-header-bg wrapper used to host brand,
   search, avatar and sign-out controls. Under the unified nav, search and
   avatar are relocated into the topbar (#miSearchMount / #miAvatarMount) by
   mi-nav.js, so the wrapper becomes an empty grey band taking ~80px of
   vertical space under the nav. Hide it outright. moveInto() happens on
   DOMContentLoaded and still finds the children via document.querySelector
   even if their ancestor is display:none, so relocation is unaffected. */
body.db-page.mi-nav-host .db-header-bg { display: none !important; }
body.db-page.mi-nav-host .db-tabs-nav { display: none !important; }

/* Landing page — hide its own nav in favour of the unified one */
body.lp-page.mi-nav-host .lp-nav { display: none !important; }

/* Admin page — hide legacy header brand cluster */
body.admin-page.mi-nav-host .adm-header-left { display: none !important; }

/* ==============================================================
   Responsive
   ============================================================== */
/* Compact variant for iPad and smaller laptops — prevents the
   right-most nav items (Trending) from clipping when the search
   field + date + auth controls eat the main row. */
@media (max-width: 1024px) {
  .mi-topbar-inner--nav { gap: 20px; }
  .mi-mainnav-list { gap: 0; flex-wrap: nowrap; }
  .mi-nav-link { padding: 10px 8px; font-size: 13px; white-space: nowrap; }
  .mi-nav-link .mi-nav-caret { margin-left: 4px; }
  /* Hide the live timestamp below 1024 — informational noise at this width */
  .mi-topbar .mi-date-mount { display: none; }
  /* Hide the nav-row refresh icon below 1024 — per-panel refreshes remain */
  .mi-topbar-inner--nav .mi-refresh-mount { display: none; }
  /* If content still overflows, scroll horizontally (no scrollbar) */
  .mi-mainnav { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .mi-mainnav::-webkit-scrollbar { display: none; }
  /* Compact search: 32px tall, 220px wide */
  .mi-search-mount .stock-search-wrap,
  .mi-search-mount .db-search-wrap { width: 220px; max-width: 32vw; }
  .mi-search-mount .stock-search-input,
  .mi-search-mount .db-search-input {
    height: 32px;
    padding: 6px 52px 6px 12px;
    font-size: 12px;
  }
  .mi-search-mount .stock-search-btn,
  .mi-search-mount .db-search-btn {
    width: 26px; height: 26px; right: 3px;
  }
  .mi-search-mount .stock-search-btn svg,
  .mi-search-mount .db-search-btn svg {
    width: 16px !important; height: 16px !important;
    min-width: 16px; min-height: 16px;
  }
  .mi-search-mount .stock-search-clear,
  .mi-search-mount .db-search-clear {
    width: 22px; height: 22px; right: 32px;
  }
}
@media (max-width: 980px) {
  .mi-mainnav-list { gap: 0; }
  .mi-nav-link { padding: 10px 10px; font-size: 13px; }
  .mi-megapane-eyebrow { display: none; }
  .mi-megapane-inner { padding: 14px 20px; }
  .mi-megachild { min-width: 150px; padding: 8px 12px; }
  .mi-megachild-label { font-size: 14px; }
  .mi-topbar-inner { padding: 0 18px; }
}
@media (max-width: 720px) {
  .mi-brand-name { font-size: 20px; }
  .mi-brand-live { display: none; }
  .mi-topbar-inner--nav {
    overflow-x: auto;
    scrollbar-width: none;
  }
  .mi-topbar-inner--nav::-webkit-scrollbar { display: none; }
}
@media (max-width: 380px) {
  .mi-brand-name { font-size: 17px; }
}

/* ==============================================================
   TYPOGRAPHY REFRESH — applied globally when mi-nav.css is loaded
   Uses the prototype's font stack + feature-settings across the app.
   Scoped minimally so existing layouts stay intact.
   ============================================================== */
html, body {
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "SF Pro Text",
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Slightly tighter, more readable defaults for headings — matches demo-title */
h1, h2, h3 {
  letter-spacing: -0.015em;
  text-wrap: balance;
}
h1 { line-height: 1.08; }
h2 { line-height: 1.15; }
h3 { line-height: 1.25; }

/* Body paragraphs: prettier wrap where supported, never forced */
p { text-wrap: pretty; }

/* Small-caps eyebrows across the app pick up the same letterspacing */
.eyebrow, .section-eyebrow, .card-eyebrow {
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--mi-nav-text-faint);
}

/* ==============================================================
   Legacy header row (index.html) — HIDE
   All useful controls (search, week label, refresh, auth/avatar)
   have been relocated into the unified topbar mounts. The original
   <header class="header"> and "#lastUpdated" status banner are
   leftover shells that still render an empty row with a ghost
   avatar (dynamically injected next to #authBtn by updateAuthUI)
   and the "Updated at …" timestamp. Hide them.
   ============================================================== */
body.mi-nav-host .dashboard > header.header { display: none !important; }
body.mi-nav-host #lastUpdated { display: none !important; }

/* ==============================================================
   Admin page label (row 1, right side, before avatar)
   Replaces the legacy admin-header row.
   ============================================================== */
.mi-topbar .mi-admin-label {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  letter-spacing: 0.5px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--mi-nav-accent);
  padding: 4px 10px;
  border: 1px solid rgba(79,152,163,0.35);
  border-radius: 999px;
  background: rgba(79,152,163,0.08);
  white-space: nowrap;
}
/* Only show on admin pages */
body:not(.admin-page) .mi-admin-label { display: none !important; }

/* ==============================================================
   SIGNED-OUT: never show an avatar, anywhere.
   Belt-and-braces rule that covers index/landing/markets/dashboard/admin
   regardless of page-specific JS timing. The Sign in button is the only
   auth-related control visible when data-auth="out".
   ============================================================== */
.mi-topbar[data-auth="out"] .mi-avatar-mount,
.mi-topbar[data-auth="out"] .pub-avatar-wrap,
.mi-topbar[data-auth="out"] .db-avatar-wrap { display: none !important; }