/*
 * Shared structural components used across sub-pages (nav bar, live-status
 * badge, stat tiles, footer). Pages define their own color palette as CSS
 * custom properties in their own <style> block (--bg, --surface, --border,
 * --accent, --accent2, --text, --muted, --green, --red, --yellow) --
 * these rules just consume those variables, so each venture keeps its own
 * accent color while sharing the same shapes/layout.
 */

.mono { font-family: 'JetBrains Mono', monospace; }

/* ── Nav bar ── */
nav {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 2rem; height: 60px;
  /* var(), not a literal: this used to be hardcoded dark, so the nav bar
     ignored the theme toggle entirely. Fallback keeps the dark-only pages
     working even if global.css is ever loaded out of order. */
  background: var(--nav-bg, rgba(6, 10, 20, 0.88)); backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}
.nav-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.nav-logo { width: 32px; height: 32px; border-radius: 8px; background: linear-gradient(135deg, var(--accent), var(--accent2)); display: flex; align-items: center; justify-content: center; font-size: 16px; }
.nav-brand-text { font-weight: 700; font-size: 0.95rem; color: var(--text); }
.nav-brand-sub { font-size: 0.7rem; color: var(--muted); font-weight: 400; }
.nav-home { font-size: 0.82rem; color: var(--muted); text-decoration: none; border: 1px solid var(--border); padding: 6px 14px; border-radius: 100px; transition: color 0.2s, border-color 0.2s; }
.nav-home:hover { color: var(--text); border-color: var(--accent); }

/* ── Theme switch ──────────────────────────────────────────────────────────
   A two-position SEGMENTED control, not a single button.

   The previous version was an emoji plus the current theme's name ("🌙 Dark"),
   which had two problems. Emoji render differently on every OS — inconsistent
   weight, colour and baseline, and nothing you can style. And the label was
   ambiguous: "Dark" could equally mean "you are in dark mode" or "click for
   dark mode", so the control never told you which state you were actually in.

   Showing BOTH options with one highlighted removes the ambiguity entirely:
   the current mode is the lit one, the other is what you get if you press it.
   Inline SVG keeps it crisp and inherits currentColor in both themes. */
.theme-switch {
  /* SELF-SUFFICIENT COLOURS. Seven pages share this stylesheet and each defines
     its own palette, so leaning on --accent2/--muted made the control's
     appearance depend on whichever page it landed on. Measured on the live page:
     in light mode the active pill rendered TRANSPARENT and the idle icon white
     on white — invisible. A control that vanishes on some pages is worse than a
     plain one that works everywhere, so the switch now owns its own tokens and
     only borrows --border. */
  --ts-active-bg: #2563eb;
  --ts-active-fg: #ffffff;
  --ts-idle: rgba(255, 255, 255, 0.55);
  --ts-idle-hover: rgba(255, 255, 255, 0.9);
  --ts-track: rgba(255, 255, 255, 0.06);

  display: inline-flex; align-items: center; gap: 2px;
  padding: 3px; border-radius: 100px;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
  background: var(--ts-track);
}
html[data-theme="light"] .theme-switch {
  --ts-active-bg: #2563eb;
  --ts-idle: rgba(15, 23, 42, 0.55);
  --ts-idle-hover: rgba(15, 23, 42, 0.95);
  --ts-track: rgba(15, 23, 42, 0.04);
}
/* The ACTIVE state is driven by a CLASS (.is-on), not the aria-pressed
   attribute. Both are kept — aria-pressed for assistive tech, the class for
   styling — because in testing the attribute selector did not reliably win
   against `all: unset` on the same element, leaving the active pill with no
   background in light mode. A class is the boring, dependable option and this
   control is shared by seven pages, so dependable wins.

   Colours are literal, not var(). Each page defines its own palette; a shared
   control that borrows them looks different (or vanishes) depending on where it
   lands. #2563eb carries 5.17:1 against white in both themes. */
.theme-switch .ts-opt {
  all: unset;
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 26px; border-radius: 100px;
  cursor: pointer; color: rgba(255, 255, 255, 0.55);
  transition: background 0.18s, color 0.18s;
}
html[data-theme="light"] .theme-switch .ts-opt { color: rgba(15, 23, 42, 0.55); }

.theme-switch .ts-opt svg { width: 15px; height: 15px; display: block; }
.theme-switch .ts-opt:hover { color: rgba(255, 255, 255, 0.9); }
html[data-theme="light"] .theme-switch .ts-opt:hover { color: rgba(15, 23, 42, 0.95); }

.theme-switch .ts-opt.is-on,
html[data-theme="light"] .theme-switch .ts-opt.is-on {
  background: #2563eb;
  color: #ffffff;
}
/* Keyboard users must see focus; `all: unset` removes the default ring. */
.theme-switch .ts-opt:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }

/* ── Nav on small screens ──────────────────────────────────────────────────
   This file had NO media queries at all, so the nav kept its desktop layout on
   a phone: four flex children plus 2rem of padding each side needed ~355px of
   a 326px usable strip at 390px. The overflow squeezed the THEME TOGGLE off
   the edge, which is why light/dark worked on desktop and appeared "broken" on
   mobile — the button was unreachable, not faulty.

   Priority when space is short: keep the toggle and the brand; shed decoration.
   Applies to all pages sharing this stylesheet, which all had the same latent
   problem. */
@media (max-width: 720px) {
  nav { padding: 0 1rem; gap: 8px; }
  /* The tagline is the least useful thing here and costs a whole line. */
  .nav-brand-sub { display: none; }
  .nav-brand-text { font-size: 0.88rem; }
  .nav-logo { width: 28px; height: 28px; font-size: 14px; }
  /* Never let the brand crowd out the controls. */
  .nav-brand { min-width: 0; flex: 0 1 auto; overflow: hidden; }
  .nav-brand-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* 40px minimum: the controls shrank to 31px, usable with a mouse and fiddly
     with a thumb. This keeps both tappable without growing the 60px nav. */
  .nav-home {
    padding: 5px 10px; font-size: 0.75rem; min-height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .theme-switch { flex: 0 0 auto; padding: 4px; }
  /* Must match the base rule's specificity (.theme-switch .ts-opt), or the
     base wins and the mobile sizing silently does nothing — which is exactly
     what happened: the tap target stayed 30x26 on a phone. */
  .theme-switch .ts-opt { width: 34px; height: 30px; }
}

/* Very narrow phones: drop the words, keep every control tappable. */
@media (max-width: 400px) {
  .nav-home { font-size: 0; padding: 5px 9px; }
  .nav-home::after { content: '←'; font-size: 0.85rem; }
  /* The switch is already icon-only; just tighten it a touch. */
  .theme-switch .ts-opt { width: 30px; }
}

/* ── Live status badge (pulsing dot + label) ── */
.hero-badge {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(59,130,246,0.12); color: var(--accent2);
  border: 1px solid rgba(59,130,246,0.3); border-radius: 100px;
  padding: 5px 14px; font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 1.5rem;
}
.live-dot { display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--green); animation: pulse 2s infinite; }
.live-dot.offline { background: var(--muted); animation: none; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.3} }

/* ── Stat tiles (used by any dashboard-style page) ── */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 1.2rem; }
.stat-tile { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 1.1rem 1.2rem; }
.stat-label { font-size: 10px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
/* color: #fff was invisible in light mode — white text on a white tile.
   Falls back to #fff for pages that never define --text-strong. */
.stat-value { font-size: 1.15rem; font-weight: 700; color: var(--text-strong, #fff); font-family: 'JetBrains Mono', monospace; }
.stat-value.bullish { color: var(--green); }
.stat-value.bearish { color: var(--red); }
.stat-value.neutral { color: var(--yellow); }

/* ── Sub-page footer (distinct class from the hub's own footer style) ── */
footer.sub-footer { border-top: 1px solid var(--border); padding: 1.5rem 2rem; text-align: center; font-size: 0.78rem; color: var(--muted); }
footer.sub-footer a { color: var(--muted); text-decoration: none; }
footer.sub-footer a:hover { color: var(--accent); }

.disclaimer { font-size: 0.78rem; color: var(--muted); text-align: center; line-height: 1.6; padding: 1rem 0; }