/*
 * AIOVEL interface theme
 *
 * The market colours remain semantic: green/red for direction, gold for
 * caution, and the prediction-market palette for categories. The interface
 * chrome itself is deliberately monochrome.
 */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0a0a0a;
  --bg-2: #0e0e0e;
  --bg2: #0e0e0e;
  --surface: #131313;
  --surface-2: #191919;
  --surface2: #191919;
  --panel: #131313;
  --panel2: #191919;
  --line: rgba(255, 255, 255, .08);
  --line-2: rgba(255, 255, 255, .15);
  --line2: rgba(255, 255, 255, .15);
  --ink: #f3f3f3;
  --ink-1: #ababab;
  --ink1: #ababab;
  --ink-2: #7c7c7c;
  --ink2: #7c7c7c;
  --mut: #ababab;
  --mut2: #7c7c7c;
  --faint: #525252;
  --cyan: #ffffff;
  --brand: #ffffff;
  --accent: #ffffff;
  --accent-dim: rgba(255, 255, 255, .08);
  --chrome: rgba(10, 10, 10, .90);
  --overlay: rgba(19, 19, 19, .98);
  --inverse: #0a0a0a;
  --control-bg: rgba(255, 255, 255, .025);
  --panel-shadow: none;
  --panel-shadow-hover: none;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #ffffff;
  --bg-2: #f5f7f9;
  --bg2: #f5f7f9;
  --surface: #ffffff;
  --surface-2: #f3f5f7;
  --surface2: #f3f5f7;
  --panel: #ffffff;
  --panel2: #f3f5f7;
  --line: #dde1e6;
  --line-2: #c7cdd5;
  --line2: #c7cdd5;
  --ink: #101317;
  --ink-1: #414750;
  --ink1: #414750;
  --ink-2: #626a75;
  --ink2: #626a75;
  --mut: #414750;
  --mut2: #626a75;
  --faint: #7b8490;
  --cyan: #111111;
  --brand: #111111;
  --accent: #111111;
  --accent-dim: rgba(16, 19, 23, .06);
  --chrome: rgba(255, 255, 255, .92);
  --overlay: rgba(255, 255, 255, .98);
  --inverse: #ffffff;
  --control-bg: #ffffff;
  --panel-shadow: 0 1px 2px rgba(16, 24, 40, .055), 0 7px 22px rgba(16, 24, 40, .035);
  --panel-shadow-hover: 0 2px 5px rgba(16, 24, 40, .07), 0 13px 32px rgba(16, 24, 40, .07);

  /* Deeper daylight accents: the dark palette glows; the light palette inks. */
  --up: #147a46;
  --down: #c8324b;
  --red: #c8324b;
  --caution: #8a6418;
  --gold: #8a6418;
  --neu: #56606d;
  --up-dim: rgba(20, 122, 70, .11);
  --down-dim: rgba(200, 50, 75, .10);
  --caution-dim: rgba(138, 100, 24, .11);
  --neu-dim: rgba(86, 96, 109, .10);
  --t-fin: #086c9f;
  --t-tech: #6745b8;
  --t-cry: #8b650e;
  --t-eco: #0a746b;
  --t-geo: #ad470e;
  --t-com: #9b359f;
}

/* Theme links use inline colour tokens in the generated markup. Re-ink those
   tokens for daylight without changing the richer luminous dark palette. */
:root[data-theme="light"] [style*="--tc:#3fc9f6"] { --tc: #086c9f !important; }
:root[data-theme="light"] [style*="--tc:#a78bfa"] { --tc: #6745b8 !important; }
:root[data-theme="light"] [style*="--tc:#e0a955"] { --tc: #8b650e !important; }
:root[data-theme="light"] [style*="--tc:#5eead4"] { --tc: #0a746b !important; }
:root[data-theme="light"] [style*="--tc:#f0883e"] { --tc: #ad470e !important; }
:root[data-theme="light"] [style*="--tc:#e879f9"] { --tc: #9b359f !important; }

html { background: var(--bg); }

body {
  background: var(--bg) !important;
  color: var(--ink);
  transition: background-color .18s ease, color .18s ease;
}

body::before { display: none !important; }

.shell,
.wrap,
main,
.top,
.top > *,
.layout,
.layout > *,
.watchlist,
.quote,
.stats,
.stat {
  min-width: 0;
}

/* Trading-workspace typography: compact, neutral, and information-first. */
:root { --disp: var(--sans); }

h1, h2, h3,
.hero h1, .s-head h2, .sec-title,
.stat .v, .c-prob .pct, .auth-gate-title {
  font-family: var(--sans) !important;
  letter-spacing: -.03em !important;
}

.hero h1 {
  font-size: clamp(2.15rem, 4.6vw, 3.35rem) !important;
  line-height: 1.09 !important;
  max-width: 23ch;
}

.eyebrow,
.hero .date,
.ctx-pill,
.pill,
.livemark,
.s-head .note {
  letter-spacing: .1em !important;
}

.hero h1, .hero h1 .hl, .hero h1 .em {
  font-style: normal !important;
}

.wordmark .aio,
.wordmark .vel {
  color: var(--ink) !important;
}

.wordmark {
  letter-spacing: .27em !important;
}

a { color: var(--accent); }

:focus-visible { outline-color: var(--accent) !important; }

/* Flat surfaces and tighter radii replace the previous neon/glass treatment. */
.topbar {
  background: var(--chrome) !important;
  border-color: var(--line) !important;
  backdrop-filter: blur(14px) saturate(115%);
  gap: 10px !important;
}

.topbar-left,
.topbar-right {
  gap: 10px !important;
  flex-wrap: nowrap !important;
}

.mobile-menu nav,
.tip {
  background: var(--overlay) !important;
  box-shadow: none !important;
}

.ticker-bar,
.brief-card,
.watchlist,
.latest,
.sectors,
.story,
.pred,
.stats,
.stat,
.radar-card,
.card,
.panel,
.table-wrap,
.instrument-card,
.tcard,
.auth-gate {
  background: var(--surface) !important;
  border-color: var(--line) !important;
  box-shadow: none !important;
}

.brief-card,
.watchlist,
.latest,
.sectors,
.story,
.pred,
.stats,
.radar-card,
.card,
.panel,
.table-wrap,
.instrument-card,
.tcard,
.auth-gate {
  border-radius: 11px !important;
  box-shadow: var(--panel-shadow) !important;
}

.brief-card:hover,
.quote:hover,
.acc summary:hover,
.story:hover,
.pred:hover,
.card:hover,
.tcard:hover {
  background: var(--surface-2) !important;
  box-shadow: var(--panel-shadow-hover) !important;
}

.card.sel {
  border-color: var(--ink) !important;
  box-shadow: inset 0 0 0 1px var(--ink) !important;
}

.dot:hover circle.body,
.dot.sel circle.body {
  stroke: var(--ink) !important;
}

.feature-pill,
.nav-back,
.png-btn,
.auth-nav-btn.primary,
.mobile-menu[open] summary {
  color: var(--ink) !important;
  border-color: var(--line-2) !important;
  background: var(--control-bg) !important;
}

.feature-pill:hover,
.nav-back:hover,
.png-btn:hover,
.auth-nav-btn:hover,
.auth-nav-btn.primary:hover,
.mobile-menu[open] summary:hover {
  color: var(--ink) !important;
  border-color: var(--ink) !important;
  background: var(--accent-dim) !important;
}

.hero .date,
.hero h1 .hl,
.hero h1 .em,
.s-head .more,
.eyebrow,
.acc[open] .acc-title,
.auth-gate-kicker {
  color: var(--ink) !important;
}

.watch-card::before { background: var(--ink) !important; }
.watch-card .when { color: var(--ink) !important; }

.auth-gate-fade {
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--bg) 90%, transparent) 34%, var(--bg) 72%) !important;
}

.auth-gate-preview span {
  background: var(--surface-2) !important;
}

.auth-gate-btn.primary {
  color: var(--inverse) !important;
  background: var(--ink) !important;
  box-shadow: none !important;
}

.auth-gate-btn.secondary {
  color: var(--ink) !important;
  background: transparent !important;
  border-color: var(--line-2) !important;
}

.auth-locked::after {
  color: var(--ink) !important;
  background: color-mix(in srgb, var(--bg) 88%, transparent) !important;
}

/* Compact, keyboard-accessible appearance switch installed by theme.js. */
.theme-toggle {
  appearance: none;
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  padding: 0;
  color: var(--ink-1);
  background: var(--control-bg);
  border: 1px solid var(--line-2);
  border-radius: 50%;
  cursor: pointer;
  transition: color .16s ease, border-color .16s ease, background-color .16s ease;
}

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

.theme-toggle svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.theme-toggle .theme-icon-light,
:root[data-theme="light"] .theme-toggle .theme-icon-dark { display: none; }

:root[data-theme="light"] .theme-toggle .theme-icon-light { display: block; }

.theme-mobile-menu { display: none; position: relative; }

.theme-mobile-menu summary {
  list-style: none;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-1);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: 6px 10px;
  white-space: nowrap;
}

.theme-mobile-menu summary::-webkit-details-marker { display: none; }

.theme-mobile-menu[open] summary {
  color: var(--ink);
  border-color: var(--ink);
}

.theme-mobile-menu nav {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  width: 218px;
  padding: 6px;
  background: var(--overlay);
  border: 1px solid var(--line-2);
  border-radius: 11px;
  box-shadow: var(--panel-shadow-hover);
}

.theme-mobile-menu nav a {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px;
  color: var(--ink-1);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .04em;
  text-decoration: none;
}

.theme-mobile-menu nav a:hover {
  color: var(--ink);
  background: var(--surface-2);
}

/* The Wiki has many categories; keep discovery easy without a wall of pills. */
.toolbar {
  display: grid !important;
  grid-template-columns: minmax(230px, .72fr) minmax(0, 1.8fr);
  align-items: start !important;
  gap: 14px !important;
}

.toolbar .chips {
  width: 100%;
  max-width: none !important;
  flex-wrap: nowrap !important;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
  padding: 1px 2px 7px;
}

.toolbar .chip { flex: 0 0 auto; }

@media (max-width: 1180px) {
  .topbar .clock { display: none !important; }
}

@media (max-width: 1050px) {
  .topbar-left > .ctx-pill,
  .topbar-left > .live-pill,
  .topbar-left > .preview-pill,
  .topbar > .pill:not(.live) { display: none !important; }
}

@media (max-width: 720px) {
  .shell,
  .wrap { width: 100%; max-width: 100%; }
  .theme-toggle { width: 30px; height: 30px; flex-basis: 30px; }
  .theme-mobile-menu { display: block; }
  .topbar > .pill,
  .topbar > .nav-back,
  .topbar > .back,
  .topbar > .clock,
  .topbar-left > :not(.wordmark),
  .topbar-right > a,
  .topbar-right > .clock { display: none !important; }
  .topbar > .spacer { display: block; }
  .toolbar { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  body, .theme-toggle { transition: none !important; }
}