/*
 * AXIS Pro UI system
 * A final, intentionally scoped override layer for the production site.
 * Keep page-specific geometry in its native stylesheet; this file owns
 * shared tokens, hierarchy, interaction feedback, motion and accessibility.
 */

:root {
  color-scheme: dark;
  --axis-bg-0: #05070a;
  --axis-bg-1: #080b10;
  --axis-surface-1: rgba(12, 16, 22, 0.96);
  --axis-surface-2: rgba(16, 21, 29, 0.96);
  --axis-surface-3: rgba(22, 29, 39, 0.98);
  --axis-surface-hover: rgba(25, 32, 43, 0.98);
  --axis-border-subtle: rgba(148, 163, 184, 0.13);
  --axis-border: rgba(148, 163, 184, 0.2);
  --axis-border-strong: rgba(148, 163, 184, 0.34);
  --axis-gold: #d9ad45;
  --axis-gold-bright: #efc760;
  --axis-gold-soft: rgba(217, 173, 69, 0.13);
  --axis-text-1: #f2f5f9;
  --axis-text-2: #c3ccd8;
  --axis-text-3: #8f9aaa;
  --axis-positive: #43c59e;
  --axis-negative: #ed6a5a;
  --axis-warning: #e6b95c;
  --axis-info: #67b7dc;
  --axis-font-ui:
    -apple-system, BlinkMacSystemFont, "Segoe UI Variable", "Segoe UI", Inter,
    system-ui, sans-serif;
  --axis-font-data:
    "SFMono-Regular", "Cascadia Mono", "Roboto Mono", Consolas, ui-monospace,
    monospace;
  --axis-radius-xs: 4px;
  --axis-radius-sm: 7px;
  --axis-radius-md: 10px;
  --axis-radius-lg: 14px;
  --axis-space-1: 4px;
  --axis-space-2: 8px;
  --axis-space-3: 12px;
  --axis-space-4: 16px;
  --axis-space-5: 24px;
  --axis-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --axis-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --axis-motion-fast: 110ms;
  --axis-motion-standard: 180ms;
  --axis-motion-panel: 240ms;
  --axis-shadow-panel: 0 16px 44px rgba(0, 0, 0, 0.3);
  --axis-shadow-float: 0 24px 80px rgba(0, 0, 0, 0.58);
  --axis-focus-ring: 0 0 0 2px var(--axis-bg-0), 0 0 0 4px rgba(239, 199, 96, 0.78);
  --axis-z-base: 0;
  --axis-z-chart: 10;
  --axis-z-toolbar: 120;
  --axis-z-menu: 520;
  --axis-z-header: 1000;
  --axis-z-modal: 1300;
}

html {
  background: var(--axis-bg-0);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

body:not([data-route="sentinel"]) {
  --bg: var(--axis-bg-0);
  --bg-elevated: var(--axis-surface-2);
  --bg-soft: var(--axis-surface-1);
  --panel: var(--axis-surface-1);
  --line: var(--axis-border-subtle);
  --line-strong: var(--axis-border);
  --text: var(--axis-text-1);
  --muted: var(--axis-text-3);
  --accent: var(--axis-gold);
  --accent-strong: var(--axis-gold-bright);
  --success: var(--axis-positive);
  --danger: var(--axis-negative);
  color: var(--axis-text-1);
  background:
    radial-gradient(circle at 50% -20%, rgba(64, 83, 108, 0.09), transparent 42%),
    var(--axis-bg-0) !important;
  font-family: var(--axis-font-ui);
  -webkit-font-smoothing: antialiased;
}

body:not([data-route="sentinel"]) button,
body:not([data-route="sentinel"]) input,
body:not([data-route="sentinel"]) textarea,
body:not([data-route="sentinel"]) select {
  font-family: inherit;
}

body:not([data-route="sentinel"]) :where(
  .tile-value,
  .tile-badge,
  .dashboard-manager-eyebrow,
  .panel-kicker,
  .section-label,
  .terminal-kicker,
  .axis-terminal-crosshair-label,
  .axis-terminal-crosshair-ohlc,
  .axis-terminal-live-price-label,
  code,
  kbd
) {
  font-family: var(--axis-font-data);
  font-variant-numeric: tabular-nums lining-nums;
}

body:not([data-route="sentinel"]) :where(button, a, input, select, textarea):focus-visible {
  outline: 0;
  box-shadow: var(--axis-focus-ring) !important;
}

body:not([data-route="sentinel"]) :where(button, a, [role="button"]) {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Header and primary navigation */
body:not([data-route="sentinel"]) .site-header {
  border-bottom-color: var(--axis-border-subtle) !important;
  background: rgba(7, 9, 13, 0.94) !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.24) !important;
  backdrop-filter: blur(18px) saturate(1.08);
}

body:not([data-route="sentinel"]) .brand-mark {
  border-color: var(--axis-border) !important;
  background: var(--axis-surface-2) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
}

body:not([data-route="sentinel"]) .brand-title {
  color: var(--axis-text-1) !important;
  font-weight: 680;
  letter-spacing: -0.01em;
}

body:not([data-route="sentinel"]) .brand-subtitle {
  color: var(--axis-gold) !important;
  letter-spacing: 0.13em;
}

body:not([data-route="sentinel"]) :where(
  .market-hub-trigger,
  .market-hub-link,
  .selector-trigger,
  .header-auth-login,
  .header-auth-name
) {
  border-color: var(--axis-border-subtle) !important;
  background: rgba(10, 13, 18, 0.8) !important;
  color: var(--axis-text-2) !important;
  box-shadow: none !important;
  transition:
    color var(--axis-motion-fast) ease-out,
    border-color var(--axis-motion-fast) ease-out,
    background-color var(--axis-motion-fast) ease-out !important;
}

body:not([data-route="sentinel"]) :where(
  .market-hub-trigger,
  .market-hub-link,
  .selector-trigger,
  .header-auth-login,
  .header-auth-name
):hover,
body:not([data-route="sentinel"]) :where(
  .market-hub-trigger,
  .market-hub-link,
  .selector-trigger,
  .header-auth-login,
  .header-auth-name
)[aria-expanded="true"],
body:not([data-route="sentinel"]) .market-hub-link[aria-current="page"] {
  border-color: rgba(217, 173, 69, 0.46) !important;
  background: rgba(217, 173, 69, 0.09) !important;
  color: var(--axis-text-1) !important;
  box-shadow: inset 0 -1px 0 rgba(239, 199, 96, 0.24) !important;
}

body:not([data-route="sentinel"]) :where(.selector-menu, .header-auth-menu) {
  border-color: var(--axis-border) !important;
  border-radius: var(--axis-radius-md) !important;
  background: rgba(12, 16, 22, 0.985) !important;
  box-shadow: var(--axis-shadow-float) !important;
  backdrop-filter: blur(20px) saturate(1.1);
}

body:not([data-route="sentinel"]) .selector-item {
  border-radius: var(--axis-radius-sm) !important;
  color: var(--axis-text-2) !important;
}

body:not([data-route="sentinel"]) .selector-item:hover,
body:not([data-route="sentinel"]) .selector-item.is-active {
  border-color: rgba(217, 173, 69, 0.28) !important;
  background: rgba(217, 173, 69, 0.09) !important;
  color: var(--axis-text-1) !important;
  box-shadow: none !important;
}

/* Toolbars */
body:not([data-route="sentinel"]) :where(
  .chart-toolbar-row,
  .orderbook-toolbar,
  .orderbook-terminal-toolbar,
  .profile-terminal-toolbar,
  .footprint-toolbar,
  .spot-depth-toolbar,
  .flow-terminal-toolbar
) {
  border-color: var(--axis-border-subtle) !important;
  background: rgba(8, 11, 15, 0.94) !important;
  box-shadow: none !important;
}

body:not([data-route="sentinel"]) :where(
  .axis-drawing-tool,
  .axis-drawing-action,
  .axis-drawing-color,
  .icon-button,
  .chart-toolbar-button
) {
  border-color: var(--axis-border-subtle) !important;
  background: rgba(17, 22, 29, 0.82) !important;
  color: var(--axis-text-2) !important;
  transition:
    color var(--axis-motion-fast) ease-out,
    border-color var(--axis-motion-fast) ease-out,
    background-color var(--axis-motion-fast) ease-out,
    opacity var(--axis-motion-fast) ease-out !important;
}

body:not([data-route="sentinel"]) :where(
  .axis-drawing-tool,
  .axis-drawing-action,
  .axis-drawing-color,
  .icon-button,
  .chart-toolbar-button
):hover {
  border-color: var(--axis-border-strong) !important;
  background: var(--axis-surface-hover) !important;
  color: var(--axis-text-1) !important;
}

body:not([data-route="sentinel"]) :where(
  .axis-drawing-tool.is-active,
  .axis-drawing-color.is-active
) {
  border-color: rgba(239, 199, 96, 0.62) !important;
  background: var(--axis-gold-soft) !important;
  color: var(--axis-gold-bright) !important;
  box-shadow: inset 0 0 0 1px rgba(239, 199, 96, 0.08) !important;
}

/* Charts */
body:not([data-route="sentinel"]) :where(
  .chart-shell,
  .chart-surface,
  .orderbook-chart-shell,
  .orderbook-chart-frame,
  .orderbook-terminal-shell,
  .orderbook-terminal-chart-frame,
  .profile-shell,
  .footprint-chart-frame,
  .spot-depth-shell,
  .spot-depth-chart-frame,
  .flow-terminal-chart-frame,
  .market-metric-terminal-chart-frame
) {
  border-color: var(--axis-border-subtle) !important;
  border-radius: var(--axis-radius-md) !important;
  background: var(--axis-bg-0) !important;
  box-shadow: none !important;
}

body:not([data-route="sentinel"]) :where(
  .chart-canvas,
  .orderbook-canvas,
  .orderbook-terminal-canvas,
  .market-profile-canvas,
  .footprint-canvas,
  .spot-depth-canvas
) {
  image-rendering: auto;
}

.axis-chart-series-layer,
.market-profile-series-layer,
.axis-drawing-canvas,
.axis-terminal-crosshair,
.axis-terminal-live-price {
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

.axis-terminal-crosshair-line {
  will-change: transform;
}

.axis-terminal-crosshair-label,
.axis-terminal-live-price-label {
  border-color: rgba(255, 255, 255, 0.2) !important;
  border-radius: var(--axis-radius-xs) !important;
  font-family: var(--axis-font-data) !important;
  font-variant-numeric: tabular-nums;
}

.axis-terminal-crosshair-line.is-vertical,
.axis-terminal-crosshair-line.is-horizontal {
  opacity: 0.72;
}

/* Dashboard hierarchy */
body[data-route="dashboard"] .site-main {
  background: var(--axis-bg-0);
}

body[data-route="dashboard"] .dashboard-manager-bar {
  margin-bottom: var(--axis-space-2);
  border-color: var(--axis-border-subtle);
  border-radius: var(--axis-radius-md);
  background: var(--axis-surface-1);
  box-shadow: none;
}

body[data-route="dashboard"] .dashboard-grid {
  gap: var(--axis-space-2) !important;
  align-items: stretch;
  grid-auto-flow: row dense;
}

body[data-route="dashboard"] .dashboard-tile {
  min-width: 0;
  overflow: hidden;
  border-color: var(--axis-border-subtle) !important;
  border-radius: var(--axis-radius-md) !important;
  background:
    linear-gradient(180deg, rgba(16, 21, 29, 0.9), rgba(8, 11, 15, 0.96)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.025),
    0 8px 24px rgba(0, 0, 0, 0.14) !important;
  transition:
    border-color var(--axis-motion-standard) ease-out,
    background-color var(--axis-motion-standard) ease-out !important;
}

body[data-route="dashboard"] .dashboard-tile:hover {
  border-color: var(--axis-border) !important;
  background:
    linear-gradient(180deg, rgba(19, 25, 34, 0.94), rgba(9, 12, 17, 0.98)) !important;
}

body[data-route="dashboard"] .dashboard-tile::before {
  display: none !important;
}

body[data-route="dashboard"] :where(
  .dashboard-tile-head,
  .tile-title-group,
  .market-metric-tile-meta,
  .market-metric-tile-meta > div
) {
  min-width: 0;
}

body[data-route="dashboard"] :where(
  .dashboard-tile-head h3,
  .market-metric-kicker,
  .market-metric-tile-value,
  .market-metric-tile-side,
  .tile-value,
  .tile-subtitle,
  .tile-note
) {
  max-width: 100%;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
}

body[data-route="dashboard"] .dashboard-tile-head h3 {
  white-space: normal;
  line-height: 1.24;
}

body[data-route="dashboard"] :where(
  .market-metric-tile-value,
  .market-metric-tile-side,
  .tile-value
) {
  font-variant-numeric: tabular-nums lining-nums;
}

body:not([data-route="sentinel"]) :where(
  .market-metric-terminal-toolbar,
  .market-metric-terminal-heading,
  .market-metric-summary-block,
  .selector,
  .selector-trigger
) {
  min-width: 0;
}

body:not([data-route="sentinel"]) :where(
  .market-metric-terminal-title,
  .market-metric-terminal-kicker,
  .market-metric-summary-label,
  .market-metric-summary-value
) {
  overflow-wrap: anywhere;
}

body[data-route="sentinel"] :where(
  .sentinel-card,
  .sentinel-panel,
  .sentinel-kpi,
  .sentinel-section-head,
  .sentinel-rail,
  td,
  th
) {
  min-width: 0;
}

body[data-route="sentinel"] :where(
  h1,
  h2,
  h3,
  p,
  small,
  strong,
  td,
  th,
  button,
  label
) {
  overflow-wrap: anywhere;
}

body[data-route="dashboard"] .dashboard-tile-head {
  min-height: 54px;
  padding: 10px 12px 8px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.08);
}

body[data-route="dashboard"] .tile-kicker,
body[data-route="dashboard"] .panel-kicker,
body[data-route="dashboard"] .dashboard-manager-eyebrow {
  color: var(--axis-text-3) !important;
  font-size: max(10px, 0.64rem) !important;
  letter-spacing: 0.12em !important;
}

body[data-route="dashboard"] .tile-title,
body[data-route="dashboard"] .panel-title {
  color: var(--axis-text-1) !important;
  font-weight: 660;
}

body[data-route="dashboard"] .tile-badge {
  border-color: var(--axis-border-subtle) !important;
  background: rgba(148, 163, 184, 0.06) !important;
  color: var(--axis-text-2) !important;
}

body[data-route="dashboard"] .dashboard-tile-remove {
  border-color: rgba(237, 106, 90, 0.42);
  background: rgba(41, 15, 16, 0.94);
}

body[data-route="dashboard"] .axis-deferred-tile {
  content-visibility: auto;
  contain-intrinsic-size: auto 300px;
}

body[data-route="dashboard"] :where(
  .tile-placeholder,
  .market-metric-chart-frame,
  .open-interest-tile-chart-frame,
  .flow-tile-chart
) {
  border-color: rgba(148, 163, 184, 0.1) !important;
  background: rgba(5, 7, 10, 0.72) !important;
  box-shadow: none !important;
}

/* Macro is the internal benchmark; polish it without changing its information architecture. */
body[data-route="macro"] :where(.macro-card, .macro-panel, .macro-event) {
  border-color: var(--axis-border-subtle) !important;
  background:
    linear-gradient(180deg, rgba(16, 21, 29, 0.96), rgba(9, 12, 17, 0.98)) !important;
  box-shadow: var(--axis-shadow-panel) !important;
}

body[data-route="macro"] .macro-nav {
  border-color: var(--axis-border-subtle) !important;
  background: rgba(10, 13, 18, 0.96) !important;
}

/* Journal readability */
body[data-route="journal"] {
  --bg-0: var(--axis-bg-0);
  --bg-1: var(--axis-surface-0);
  --bg-2: var(--axis-surface-1);
  --bg-3: var(--axis-surface-2);
  --border-0: var(--axis-border-subtle);
  --text-0: var(--axis-text-1);
  --text-1: var(--axis-text-1);
  --text-2: var(--axis-text-2);
  --text-3: var(--axis-text-3);
  --cyan: var(--axis-accent);
  --blue: var(--axis-accent);
  color: var(--axis-text-1) !important;
  background: var(--axis-bg-0) !important;
}

body[data-route="journal"] :where(
  .cd,
  .cd-h,
  .cd-b,
  .panel,
  .card,
  .trade-card,
  .journal-card,
  .calendar-shell,
  .edge-lab-shell,
  .chart-embed
) {
  border-color: var(--axis-border-subtle) !important;
  background: var(--axis-surface-1) !important;
  box-shadow: none !important;
}

body[data-route="journal"] :where(.hdr, .nav) {
  border-color: var(--axis-border-subtle) !important;
  background: rgba(7, 10, 14, 0.94) !important;
}

body[data-route="journal"] :where(.nav-t.on, .cd-t, .hdr-m-v) {
  color: var(--axis-accent) !important;
}

body[data-route="journal"] .nav-t.on::after {
  background: var(--axis-accent) !important;
  box-shadow: none !important;
}

body[data-route="journal"] :where(input, select, textarea) {
  border-color: var(--axis-border) !important;
  background: rgba(7, 10, 14, 0.96) !important;
  color: var(--axis-text-1) !important;
}

body[data-route="journal"] :where(label, .muted, small) {
  color: var(--axis-text-3);
}

/* Landing */
body[data-route="home"] .landing-hero {
  border-color: var(--axis-border-subtle) !important;
  background:
    linear-gradient(90deg, rgba(5, 7, 10, 0.99) 0%, rgba(5, 7, 10, 0.9) 52%, rgba(5, 7, 10, 0.42) 100%),
    var(--axis-bg-0) !important;
  box-shadow: var(--axis-shadow-panel) !important;
}

body[data-route="home"] .landing-hero h1 {
  color: var(--axis-text-1) !important;
  letter-spacing: -0.045em !important;
}

body[data-route="home"] :where(
  .landing-command-strip a,
  .landing-modules article,
  .landing-gallery article,
  .landing-access-band
) {
  border-color: var(--axis-border-subtle) !important;
  background: var(--axis-surface-1) !important;
  box-shadow: none !important;
}

/* Loading, empty and failure states */
.axis-terminal-loader {
  background: rgba(5, 7, 10, 0.84) !important;
  backdrop-filter: blur(5px);
}

.axis-terminal-loader-ring,
.axis-terminal-loader-scanner,
.axis-terminal-loader-particle {
  animation-duration: 1.8s !important;
}

:where(
  .chart-loading,
  .tile-loading,
  .market-metric-tile-loading,
  .dashboard-loading,
  .empty-state,
  .error-state
) {
  color: var(--axis-text-3) !important;
}

@keyframes axis-pro-skeleton {
  0% {
    background-position: 180% 0;
  }
  100% {
    background-position: -80% 0;
  }
}

.axis-skeleton {
  color: transparent !important;
  border-color: transparent !important;
  background:
    linear-gradient(
      100deg,
      rgba(148, 163, 184, 0.055) 18%,
      rgba(148, 163, 184, 0.13) 42%,
      rgba(148, 163, 184, 0.055) 68%
    ) !important;
  background-size: 240% 100% !important;
  animation: axis-pro-skeleton 1.35s ease-in-out infinite;
}

/* Dense but readable desktop scaling */
@media (min-width: 901px) {
  body[data-route="dashboard"] .dashboard-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(286px, 100%), 1fr)) !important;
  }

  body:not([data-route="sentinel"]) :where(
    .selector-trigger,
    .market-hub-trigger,
    .market-hub-link
  ) {
    min-height: 34px;
  }
}

@media (min-width: 1800px) {
  body[data-route="dashboard"] .dashboard-grid {
    grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)) !important;
  }
}

@media (max-width: 1100px) {
  body:not([data-route="sentinel"]) .site-header {
    backdrop-filter: none;
  }

  body[data-route="dashboard"] .dashboard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 720px) {
  body[data-route="dashboard"] .dashboard-grid {
    grid-template-columns: 1fr !important;
  }

  body:not([data-route="sentinel"]) :where(
    button,
    .selector-trigger,
    .market-hub-trigger,
    .market-hub-link,
    [role="button"]
  ) {
    min-height: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Metric detail education: the chart remains the primary surface while every
   dashboard module explains what it measures and how to interpret it. */
body[data-route="market-metric"] .site-main {
  height: auto;
  min-height: calc(100svh - var(--header-height));
  overflow: visible;
}

body[data-route="market-metric"] .market-metric-terminal-main {
  display: block;
  height: auto;
  min-height: 0;
}

body[data-route="market-metric"] .market-metric-terminal-shell {
  flex: none;
  width: 100%;
  height: clamp(560px, calc(100svh - var(--header-height) - 8px), 820px);
  min-height: 0;
}

body[data-route="market-metric"] .market-metric-terminal-chart-frame {
  flex: 1 1 auto;
  min-height: 0;
}

.market-metric-guide {
  width: 100%;
  margin-top: 10px;
  padding: clamp(16px, 2vw, 26px);
  border: 1px solid rgba(255, 215, 0, 0.18);
  border-radius: 16px;
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 215, 0, 0.055), transparent 34%),
    rgba(5, 5, 5, 0.97);
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.28);
}

.market-metric-guide-head {
  display: grid;
  gap: 4px;
  margin-bottom: 14px;
}

.market-metric-guide-eyebrow {
  color: rgba(255, 215, 0, 0.78);
  font: 800 10px/1.2 var(--font-mono, ui-monospace, monospace);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.market-metric-guide h2,
.market-metric-guide h3,
.market-metric-guide p {
  margin: 0;
}

.market-metric-guide h2 {
  color: rgba(255, 255, 255, 0.96);
  font-size: clamp(18px, 1.7vw, 25px);
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.market-metric-guide-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.market-metric-guide article {
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.018);
}

.market-metric-guide h3 {
  margin-bottom: 7px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 13px;
  line-height: 1.3;
}

.market-metric-guide p {
  color: rgba(216, 220, 228, 0.76);
  font-size: 12px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

@media (max-width: 820px) {
  .market-metric-guide-grid {
    grid-template-columns: 1fr;
  }

  body[data-route="market-metric"] .market-metric-terminal-shell {
    height: max(520px, calc(100svh - var(--header-height) - 8px));
  }

  body[data-route="market-metric"] .market-metric-terminal-chart-frame {
    min-height: 0;
  }
}

@media (forced-colors: active) {
  :where(button, a, input, select, textarea):focus-visible {
    outline: 2px solid CanvasText !important;
    outline-offset: 2px;
  }
}