/* Final visual layer for standalone research surfaces. Data and routes are untouched. */
:root {
  --aqe-rp-ink: var(--aqe-panel-ink);
  --aqe-rp-copy: var(--aqe-panel-copy);
  --aqe-rp-blue: var(--aqe-blue-600);
  --aqe-rp-blue-soft: var(--aqe-blue-50);
  --aqe-rp-border: var(--aqe-panel-border-soft);
  --aqe-rp-bg: var(--aqe-n-50);
}

html body:has(.intro), html body:has(.sphere-main) {
  padding: 0;
  background: var(--aqe-rp-bg);
  color: var(--aqe-rp-ink);
  font-family: "Avenir Next", "Trebuchet MS", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html body:has(.intro) > header, html body:has(.sphere-main) > header {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: 14px clamp(16px, 4vw, 64px);
  border-bottom: 1px solid var(--aqe-rp-border);
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 4px 18px rgba(18, 38, 60, .06);
  backdrop-filter: blur(16px) saturate(1.12);
}

html body:has(.intro) > header strong, html body:has(.sphere-main) > header strong { color: var(--aqe-rp-ink); }
html body:has(.intro) > header nav, html body:has(.sphere-main) > header nav { gap: 6px; }
html body:has(.intro) > header nav a, html body:has(.sphere-main) > header nav a {
  padding: 10px 13px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--aqe-rp-copy);
  font-size: 13px;
  font-weight: 650;
}
html body:has(.intro) > header nav a:hover,
html body:has(.intro) > header nav a[aria-current="page"],
html body:has(.sphere-main) > header nav a:hover,
html body:has(.sphere-main) > header nav a[aria-current="page"] {
  border-color: var(--aqe-blue-300);
  background: var(--aqe-rp-blue-soft);
  color: var(--aqe-rp-blue);
}

html body:has(.intro) main, html body:has(.sphere-main) main {
  max-width: 1480px;
  padding: clamp(30px, 5vw, 74px) clamp(16px, 4vw, 64px) calc(48px + env(safe-area-inset-bottom, 0px));
}
html body:has(.intro) h1, html body:has(.sphere-main) h1 { color: var(--aqe-rp-ink); font-weight: 700; letter-spacing: -.05em; }
html body:has(.intro) h2, html body:has(.sphere-main) h2 { color: var(--aqe-rp-ink); letter-spacing: -.025em; }
html body:has(.intro) p, html body:has(.intro) .muted, html body:has(.sphere-main) p, html body:has(.sphere-main) li { color: var(--aqe-rp-copy); }
html body:has(.intro) .eyebrow, html body:has(.sphere-main) .eyebrow { color: var(--aqe-rp-blue); font-weight: 700; }
html body:has(.intro) .grid, html body:has(.sphere-main) .grid { gap: 16px; margin-top: 34px; }
html body:has(.intro) .card, html body:has(.sphere-main) .panel {
  border: 1px solid var(--aqe-rp-border);
  border-radius: 18px;
  background: var(--aqe-n-0);
  box-shadow: 0 8px 26px rgba(25, 53, 85, .055);
}
html body:has(.intro) .card { padding: clamp(20px, 3vw, 30px); }
html body:has(.sphere-main) .panel { padding: clamp(18px, 3vw, 28px); }
html body:has(.intro) button, html body:has(.sphere-main) button, html body:has(.sphere-main) #connect {
  min-height: 48px;
  border: 1px solid var(--aqe-rp-blue);
  border-radius: 12px;
  background: var(--aqe-rp-blue);
  color: var(--aqe-n-0);
  box-shadow: 0 6px 14px rgba(27, 79, 156, .14);
}
html body:has(.intro) button:hover, html body:has(.sphere-main) button:hover, html body:has(.sphere-main) #connect:hover { background: var(--aqe-blue-700); }
html body:has(.intro) button:active, html body:has(.sphere-main) button:active, html body:has(.sphere-main) #connect:active { transform: translateY(1px); }
html body:has(.intro) .status { border: 1px solid var(--aqe-blue-300); border-radius: 999px; background: var(--aqe-rp-blue-soft); color: var(--aqe-rp-blue); }
html body:has(.sphere-main) .notice { border-color: var(--aqe-rp-border); border-radius: 14px; background: #fff; box-shadow: 0 5px 18px rgba(25, 53, 85, .04); }
html body:has(.sphere-main) .metric { border-color: var(--aqe-rp-border); border-radius: 14px; background: #F8FAFD; }
html body:has(.sphere-main) .globe-panel { background: radial-gradient(circle at 35% 25%, #24516C, #102338 76%); border-color: #1E4864; }

/* Geometry pass: research pages share the same readable frame and panel
   rhythm as the main AQE workspace. */
html body:has(.intro), html body:has(.sphere-main) {
  --aqe-rp-frame: min(1440px, calc(100vw - 32px));
  --aqe-rp-edge: var(--aqe-panel-border);
}
html body:has(.intro) main, html body:has(.sphere-main) main {
  width: var(--aqe-rp-frame);
  margin-inline: auto;
  padding-inline: 0;
}
html body:has(.intro) .grid, html body:has(.sphere-main) .grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}
html body:has(.intro) .card, html body:has(.sphere-main) .panel {
  border-color: var(--aqe-rp-edge);
  box-shadow: 0 7px 22px rgb(16 35 56 / 8%);
}
html body:has(.intro) :is(h1, h2, h3, strong), html body:has(.sphere-main) :is(h1, h2, h3, strong) {
  color: var(--aqe-panel-ink);
}
html body:has(.intro) :is(p, li, .muted), html body:has(.sphere-main) :is(p, li, .muted) {
  color: var(--aqe-panel-copy);
}

@media (max-width: 750px) {
  html body:has(.intro) > header, html body:has(.sphere-main) > header { padding: 12px 16px; }
  html body:has(.intro) > header nav, html body:has(.sphere-main) > header nav { gap: 8px; }
  html body:has(.intro) > header nav a, html body:has(.sphere-main) > header nav a { min-height: 46px; }
  html body:has(.intro) .card, html body:has(.sphere-main) .panel { border-radius: 16px; padding: 18px; }
  html body:has(.sphere-main) .heading { align-items: flex-start; }
  html body:has(.intro) main, html body:has(.sphere-main) main {
    width: auto;
    margin-inline: 16px;
    padding-inline: 0;
  }
  html body:has(.intro) .grid, html body:has(.sphere-main) .grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* Observatory is a standalone page, not a sidebar workspace. Scope this
   shell to its market selector so unrelated research pages are unchanged. */
html body:has(#market) {
  padding: 0;
  background: var(--aqe-n-50);
}
html body:has(#market) > header {
  position: sticky;
  inset: 0 0 auto;
  width: 100%;
  height: auto;
  min-height: 68px;
  margin: 0;
  padding: 12px max(24px, calc((100vw - 1360px) / 2));
  gap: 24px;
  background: var(--aqe-navy-900);
  border-color: var(--aqe-navy-700);
  box-shadow: none;
}
html body:has(#market) > header strong,
html body:has(#market) > header nav a { color: var(--aqe-n-0); }
html body:has(#market) > header nav a:hover {
  background: var(--aqe-navy-700);
  border-color: transparent;
}
html body:has(#market) > header :is(select, button) {
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--aqe-navy-500);
  border-radius: 8px;
  background: var(--aqe-navy-800);
  color: white;
  box-shadow: none;
}
html body:has(#market) main {
  width: min(1360px, calc(100% - 48px));
  margin: 0 auto;
  padding: 32px 0 48px;
}
html body:has(#market) .heading { gap: 16px; align-items: center; }
html body:has(#market) .heading h1 {
  margin: 8px 0 10px;
  font-size: clamp(26px, 2.8vw, 36px);
  letter-spacing: -.035em;
}
html body:has(#market) .heading p { margin: 0; }
html body:has(#market) .heading .eyebrow { font-size: 11px; letter-spacing: .12em; }
html body:has(#market) button {
  min-height: 42px;
  padding: 9px 16px;
  border-radius: 9px;
  box-shadow: none;
}
html body:has(#market) .notice {
  margin: 24px 0 18px;
  padding: 10px 14px;
  gap: 12px;
  border-radius: 10px;
  background: var(--aqe-blue-50);
  border-color: var(--aqe-blue-100);
  box-shadow: none;
}
html body:has(#market) #pause {
  background: white;
  color: var(--aqe-blue-700);
  border-color: var(--aqe-panel-border);
}
html body:has(#market) #pause:hover {
  background: var(--aqe-blue-100);
  border-color: var(--aqe-blue-300);
}
html body:has(#market) button:disabled {
  cursor: not-allowed;
  opacity: .6;
  transform: none;
}
html body:has(#market) .toolbar select:focus-visible {
  outline-color: var(--aqe-blue-600);
  border-color: var(--aqe-blue-600);
}
html body:has(#market) .toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(190px, .25fr);
  gap: 16px;
  margin-bottom: 18px;
}
html body:has(#market) .toolbar label > span { font-size: 12px; font-weight: 600; }
html body:has(#market) .toolbar select { min-height: 44px; border-radius: 9px; padding: 10px 12px; }
html body:has(#market) #observatory-summary { gap: 12px; margin-bottom: 20px; }
html body:has(#market) #observatory-summary > div {
  padding: 16px 20px;
  border: 1px solid var(--aqe-panel-border-soft);
  border-radius: 12px;
  background: white;
}
html body:has(#market) #observatory-summary strong { font-size: 26px; color: var(--aqe-blue-700); }
html body:has(#market) .grid { margin-top: 0; gap: 16px; }
html body:has(#market) .panel { border-radius: 14px; padding: 20px; box-shadow: 0 3px 12px rgb(16 35 56 / 4%); }
html body:has(#market) :is(button, select, a):focus-visible { outline: 2px solid var(--aqe-blue-300); outline-offset: 3px; }
@media (max-width: 1149px) {
  html body:has(#market) main {
    padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px));
  }
}
@media (max-width: 750px) {
  html body:has(#market) > header { padding: 12px 16px; gap: 12px; }
  html body:has(#market) > header :is(select, button) { min-height: 44px; font-size: 12px; padding-inline: 10px; white-space: nowrap; }
  html body:has(#market) > header select,
  html body:has(#market) .toolbar select { font-size: 16px; }
  html body:has(#market) :is(button, select) { min-height: 44px; }
  html body:has(#market) > header nav { overflow-x: auto; }
  html body:has(#market) > header nav a { background: var(--aqe-navy-800); border-color: var(--aqe-navy-600); }
  html body:has(#market) main { width: calc(100% - 32px); padding-top: 24px; }
  html body:has(#market) .toolbar { grid-template-columns: minmax(0, 1fr); }
  html body:has(#market) .notice button { width: auto; margin-left: auto; }
  html body:has(#market) #observatory-summary { gap: 8px; }
  html body:has(#market) #observatory-summary > div { padding: 12px; }
  html body:has(#market) .panel { padding: 16px; }
}