/* Shared theme-toggle + profile-icon/dropdown, used on every page. Relies on
   each page's own --ink/--paper/--rule/--rule-strong/--label/--muted/--mono
   custom properties (already defined identically on every page's :root),
   now mapped to the Nocturne token values. */

.site-header-controls { display: flex; align-items: center; gap: 10px; }

.profile-menu { position: relative; }
.profile-icon-btn {
  width: 32px; height: 32px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.02em;
  color: var(--label); background: transparent; border: 1px solid var(--rule);
  cursor: pointer; padding: 0;
}
.profile-icon-btn:hover { border-color: var(--rule-strong); color: var(--ink); }
.profile-icon-btn:focus-visible { outline: 2px solid #9184d9; outline-offset: 2px; }
.profile-icon-btn.signed-in { color: #d2cefd; border-color: #9184d9; background: rgba(145,132,217,0.14); }
.profile-icon-btn svg { width: 16px; height: 16px; }

.profile-dropdown {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 90;
  width: 280px; max-width: calc(100vw - 32px); background: var(--paper); border: 1px solid var(--rule);
  border-radius: 8px; box-shadow: 0 0 0 1px var(--rule), 0 16px 40px rgba(0,0,0,0.4);
  padding: 16px; display: flex; flex-direction: column; gap: 12px;
}
.profile-dropdown[hidden] { display: none !important; }
.pd-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pd-label { font-size: 13px; color: var(--ink); font-weight: 500; }
.pd-desc { font-size: 11.5px; color: var(--muted); line-height: 1.45; }
.pd-email { font-family: var(--mono); font-size: 11px; color: var(--label); word-break: break-all; }
.pd-signin-btn { display: flex; justify-content: center; min-height: 40px; align-items: center; }
.pd-signout-btn {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); background: none; border: none; cursor: pointer; text-align: left; padding: 0;
}
.pd-signout-btn:hover { color: var(--ink); }
.pd-divider { height: 1px; background: var(--rule); }
.pd-status { font-family: var(--mono); font-size: 10px; color: var(--muted); min-height: 12px; }
.pd-status.err { color: #9397ab; }

.pd-switch { position: relative; width: 36px; height: 20px; flex: none; }
.pd-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.pd-switch .track { position: absolute; inset: 0; background: transparent; border: 1px solid var(--rule); border-radius: 10px; }
.pd-switch .thumb {
  position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--rule-strong);
  transition: left .12s linear, background .12s linear, box-shadow .12s linear;
}
.pd-switch input:checked + .track { border-color: #9184d9; background: rgba(145,132,217,0.12); }
.pd-switch input:checked + .track + .thumb { left: 18px; background: #9184d9; box-shadow: 0 0 6px #9184d9; }
.pd-switch input:focus-visible + .track { outline: 2px solid #9184d9; outline-offset: 2px; }

/* ── Sitewide Nocturne polish ──────────────────────────────
   8px radius on interactive controls (buttons, inputs, pills), applied
   broadly by element/class so every page picks it up from this one shared
   stylesheet without needing a per-page component rewrite. */
button, input, select, textarea,
.buy-btn, .feed-more-btn, .feed-nav-btn, .floating-buy-btn, .modal-signin-btn,
.mode-btn, .nav-item, .place-trade-btn, .pos-action-btn, .refresh-btn,
.reset-btn, .scan-btn, .show-more-btn, .tag, .seg-opt {
  border-radius: 8px;
}
.pulse-dot { border-radius: 50%; }

/* ── Mobile nav drawer ──────────────────────────────────────
   The desktop <nav> is hidden below 640px on every page; on pages that
   have this drawer, the profile icon opens it instead of the small
   account-only dropdown — one icon for nav + theme + account rather than a
   separate hamburger, theme toggle and profile icon crowding a narrow
   header. Pages with no drawer (e.g. trade.html) keep the profile icon
   opening the plain dropdown at every width, which now carries its own
   Dark mode row too (see site-header.js renderDropdown). */
.mobile-nav-drawer {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 90;
  background: var(--paper); border-bottom: 1px solid var(--rule);
  box-shadow: 0 20px 40px rgba(0,0,0,0.45);
  display: flex; flex-direction: column; padding: 4px 16px 8px;
}
.mobile-nav-drawer[hidden] { display: none !important; }

/* Dims the page behind the open drawer (and doubles as a tap-to-close
   target) so the drawer reads as a menu overlay rather than page content —
   created on demand by site-header.js, not per-page markup. Every page's
   <header> is its own stacking context at z-index 50 (sticky header), and
   the drawer lives inside it — so this must stay BELOW 50, not above it,
   or it paints over the (opaque, higher-stacked) header/drawer instead of
   just the page content behind it, dimming the menu itself and eating
   clicks meant for its links.  */
.mobile-nav-backdrop {
  position: fixed; inset: 0; z-index: 45; background: rgba(0,0,0,0.55);
}
.mobile-nav-backdrop[hidden] { display: none !important; }
.mobile-nav-drawer a {
  padding: 13px 2px; font-size: 14.5px; font-weight: 500; color: var(--muted);
  border-bottom: 1px solid var(--rule); text-decoration: none;
}
.mobile-nav-drawer a.active { color: var(--green); }
.mobile-drawer-divider { height: 1px; background: var(--rule); margin: 4px 0; }
.mobile-drawer-row { display: flex; align-items: center; justify-content: space-between; padding: 13px 2px; }
#mobile-drawer-account .pd-signout-btn { margin-top: 18px; }
.mobile-drawer-row .pd-label { font-size: 14.5px; }