/* Vexro editorial redesign layer. Visual-only: keep page hooks and behavior intact. */
:root {
  color-scheme: dark;
  --vx-bg: #0d1110;
  --vx-surface: #141918;
  --vx-surface-raised: #1a201e;
  --vx-ink: #f3f2e9;
  --vx-muted: #a4aaa1;
  --vx-line: rgba(243, 242, 233, .14);
  --vx-line-strong: rgba(243, 242, 233, .28);
  --vx-lime: #d5fc70;
  --vx-lime-ink: #18200f;
  --vx-danger: #ff786e;
  --vx-width: 1240px;
  --vx-gutter: 32px;
  --vx-space-1: 4px;
  --vx-space-2: 8px;
  --vx-space-3: 12px;
  --vx-space-4: 16px;
  --vx-space-6: 24px;
  --vx-space-8: 32px;
  --vx-space-12: 48px;
  --vx-space-16: 64px;
  --vx-radius-control: 8px;
  --vx-radius-panel: 12px;
  --vx-ease: cubic-bezier(.2, .7, .2, 1);
}

html { background: var(--vx-bg); scroll-behavior: smooth; }
body {
  color: var(--vx-ink);
  background-color: var(--vx-bg);
  background-image: linear-gradient(90deg, transparent calc(50% - .5px), rgba(243,242,233,.018) 50%, transparent calc(50% + .5px));
  font-family: Inter, Arial, sans-serif;
  text-rendering: optimizeLegibility;
}
::selection { color: var(--vx-lime-ink); background: var(--vx-lime); }
:where(.shell, .vx-shell) { width: min(var(--vx-width), calc(100% - var(--vx-gutter) * 2)); margin-inline: auto; }
:where(h1, h2, h3, .brand, .vx-title, .section-title, .page-title) {
  color: var(--vx-ink);
  font-family: "Space Grotesk", Inter, Arial, sans-serif;
  font-weight: 700;
  text-wrap: balance;
}
:where(p, .section-sub, .subtitle, .vx-subtitle) { color: var(--vx-muted); }

/* Shared navigation: a ruled editorial bar, not a floating glass capsule. */
:where(.topbar, .navbar, .site-nav, .vx-topbar) {
  color: var(--vx-ink);
  border: 0;
  border-bottom: 1px solid var(--vx-line);
  border-radius: 0;
  background: var(--vx-bg);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
:where(.brand-link, .brand, .vx-brandmark) { color: var(--vx-ink); text-shadow: none; letter-spacing: .08em; }
:where(.tabs, .nav-links) { gap: clamp(12px, 2vw, 28px); }
:where(.tab, .nav-link) {
  color: var(--vx-muted);
  border-radius: 0;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  transition: color .16s var(--vx-ease), border-color .16s var(--vx-ease);
}
:where(.tab.active, .tab[aria-current="page"], .nav-link.active) { color: var(--vx-lime); }

/* Editorial hero and page headings. */
:where(.hero, .page-hero) { gap: clamp(24px, 4vw, 56px); }
:where(.hero h1, .hero .brand, .page-hero h1, body[data-page="tour"] h1) {
  max-width: 12ch;
  font-size: clamp(2.6rem, 7vw, 6.8rem);
  line-height: .94;
  letter-spacing: -.055em;
  background: none;
  -webkit-text-fill-color: currentColor;
}
:where(.section, .section-panel) { margin-block: clamp(48px, 8vw, 96px); }
:where(.section-head) { gap: 12px 24px; }
:where(.section-eyebrow, .hero-eyebrow, .eyebrow, .section-label) {
  color: var(--vx-lime);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
:where(.section-title) { font-size: clamp(1.8rem, 3.4vw, 3.2rem); line-height: 1.02; letter-spacing: -.04em; }

/* Controls and links. */
:where(.btn, .button, .vx-btn, .action-btn, .social-btn, .mini, .vx-toplink) {
  min-height: 44px;
  border: 1px solid var(--vx-line-strong);
  border-radius: var(--vx-radius-control);
  background: var(--vx-surface);
  color: var(--vx-ink);
  box-shadow: none;
  font-weight: 650;
  text-decoration: none;
  transition: color .16s var(--vx-ease), background-color .16s var(--vx-ease), border-color .16s var(--vx-ease), transform .16s var(--vx-ease);
}
:where(.btn-primary, .button-primary, .vx-btn-primary) { color: var(--vx-lime-ink); border-color: var(--vx-lime); background: var(--vx-lime); }
:where(.btn-ghost, .button-secondary, .vx-btn-secondary) { color: var(--vx-ink); border-color: var(--vx-line-strong); background: transparent; }
:where(input, select, textarea, .searchbar) { color: var(--vx-ink); border-color: var(--vx-line-strong); border-radius: var(--vx-radius-control); background: var(--vx-surface); }
:where(input, select, textarea)::placeholder { color: var(--vx-muted); }

/* Cards and panels use consistent dimensions and visible rules. */
:where(.panel, .card, .script-card, .executor-card, .feature-card, .summary-card, .executor-preview, .vx-panel, .vx-glow-card, .executors-teaser, .description-box, .sitemap-group) {
  color: var(--vx-ink);
  border: 1px solid var(--vx-line);
  border-radius: var(--vx-radius-panel);
  background: var(--vx-surface);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
:where(.card-grid, .scripts-grid, .executor-preview-grid, .feature-grid, .executor-grid) {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--vx-line);
  background: var(--vx-line);
}
:where(.card-grid, .scripts-grid, .executor-preview-grid, .feature-grid, .executor-grid) > * { min-width: 0; border-radius: 0; }
:where(.script-card, .feature-card, .executor-preview, .card) { display: flex; flex-direction: column; min-height: 100%; padding: clamp(18px, 2vw, 28px); }
:where(.script-card > :last-child, .feature-card > :last-child, .executor-preview > :last-child) { margin-top: auto; }
:where(.executor-card.current, .executor-card.outdated, .executor-card.unknown) { border-inline-start: 3px solid var(--rail, var(--vx-line-strong)); }
:where(.executor-button, [data-sunc-open]) { color: var(--vx-ink); border-color: var(--vx-line); border-radius: var(--vx-radius-control); background: var(--vx-surface); }
:where(.summary-strip, .summary-grid, .stats-grid) { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; border: 1px solid var(--vx-line); background: var(--vx-line); }
:where(.summary-card) { border: 0; border-radius: 0; padding: 18px; text-align: left; }
:where(.summary-card strong, .metric-value) { color: var(--vx-lime); font-variant-numeric: tabular-nums; }
:where(.footer, footer) { color: var(--vx-muted); border-top: 1px solid var(--vx-line); background: transparent; box-shadow: none; }

/* Preserve all settings behavior while restyling the floating control. */
.vx-float-settings { color: var(--vx-ink); }
.vx-settings-trigger { min-height: 44px; color: var(--vx-ink); border: 1px solid var(--vx-line-strong); border-radius: var(--vx-radius-control); background: var(--vx-surface); box-shadow: none; }
.vx-settings-panel { color: var(--vx-ink); border: 1px solid var(--vx-line-strong); border-radius: var(--vx-radius-panel); background: var(--vx-surface-raised); box-shadow: 0 18px 48px rgba(0,0,0,.3); backdrop-filter: none; -webkit-backdrop-filter: none; }
.vx-choice { color: var(--vx-ink); border-color: var(--vx-line); border-radius: var(--vx-radius-control); background: var(--vx-surface); }
.vx-choice.is-selected { color: var(--vx-lime-ink); border-color: var(--vx-lime); background: var(--vx-lime); }

/* Existing 3D particle canvas remains interactive; only ambient wash is removed. */
:where(.vx-aurora, .vx-topglow) { display: none; }
:where(button, a, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--vx-lime); outline-offset: 3px; }

html.vx-light {
  color-scheme: light;
  --vx-bg: #f1f1e9;
  --vx-surface: #fffef7;
  --vx-surface-raised: #e8e9df;
  --vx-ink: #171b18;
  --vx-muted: #535b54;
  --vx-line: rgba(23, 27, 24, .16);
  --vx-line-strong: rgba(23, 27, 24, .32);
  --vx-lime-ink: #18200f;
}
html.vx-light body { color: var(--vx-ink); background-color: var(--vx-bg); }
html.vx-light :where(.brand-link, .brand, .vx-brandmark, .tab, .nav-link, .btn, .button, .vx-btn, .action-btn, .social-btn, .mini, .vx-toplink, .panel, .card, .script-card, .executor-card, .feature-card, .summary-card, .executor-preview, .vx-panel, .description-box, .sitemap-group, .vx-settings-trigger, .vx-settings-panel, .vx-choice, input, select, textarea, .searchbar) { color: var(--vx-ink); }
html.vx-light :where(.btn-primary, .button-primary, .vx-btn-primary, .vx-choice.is-selected) { color: var(--vx-lime-ink); }
html.vx-light :where(.vx-settings-panel) { background: var(--vx-surface-raised); }
html.vx-light :where(.hero h1, .hero .brand, .page-hero h1, .section-title, .vx-title) { background: none; -webkit-text-fill-color: currentColor; }

@media (hover: hover) and (pointer: fine) {
  :where(a.tab, .btn, .button, .vx-btn, .action-btn, .social-btn, .mini, .vx-toplink):hover { color: var(--vx-lime); border-color: var(--vx-lime); transform: translateY(-1px); }
  :where(.btn-primary, .button-primary, .vx-btn-primary):hover { color: var(--vx-lime-ink); background: #e0ff91; }
  :where(.panel, .card, .script-card, .executor-preview, .feature-card, .executor-card):hover { border-color: var(--vx-line-strong); }
  .vx-settings-trigger:hover { color: var(--vx-lime); border-color: var(--vx-lime); }
}

@media (max-width: 900px) {
  :root { --vx-gutter: 24px; }
  :where(.card-grid, .scripts-grid, .executor-preview-grid, .feature-grid, .executor-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :where(.summary-strip, .summary-grid, .stats-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  :root { --vx-gutter: 18px; }
  :where(.shell, .vx-shell) { width: calc(100% - var(--vx-gutter) * 2); }
  :where(.card-grid, .scripts-grid, .executor-preview-grid, .feature-grid, .executor-grid, .summary-strip, .summary-grid, .stats-grid) { grid-template-columns: minmax(0, 1fr); }
  :where(.hero-actions, .about-actions, .footer-links) { grid-template-columns: minmax(0, 1fr); }
  :where(.hero-actions > *, .about-actions > *, .footer-links > *) { width: 100%; }
  :where(.section, .section-panel) { margin-block: 52px; }
  :where(.panel, .vx-panel) { padding: 18px; }
  :where(.topbar, .navbar, .site-nav, .vx-topbar) { top: 0; }
}
@media (max-width: 374px) {
  :root { --vx-gutter: 14px; }
  :where(.shell, .vx-shell) { width: calc(100% - 28px); }
  :where(.tabs, .nav-links) { gap: 8px; }
  :where(.tab, .nav-link) { font-size: .78rem; }
  :where(.panel, .vx-panel) { padding: 14px; }
  :where(.modal-card, .modal-content) { width: calc(100vw - 28px); max-width: calc(100vw - 28px); }
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-reduced-motion="false"]) { scroll-behavior: auto; }
  html:not([data-reduced-motion="false"]) *, html:not([data-reduced-motion="false"]) *::before, html:not([data-reduced-motion="false"]) *::after { animation-duration: .01ms; animation-iteration-count: 1; scroll-behavior: auto; transition-duration: .01ms; }
}

/* Keep the primary navigation consistent across the four catalogue pages. */
body:is([data-page="tour"], [data-page="scripts"], [data-page="executors"], [data-page="about"]) :is(.topbar, .navbar, .site-nav) {
  position: relative;
  inset: auto;
  transform: none;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 76px;
  margin: 0;
  padding: 0;
  gap: clamp(14px, 2.6vw, 32px);
  overflow: visible;
  border: 0;
  border-bottom: 1px solid var(--vx-line);
  border-radius: 0;
  background: var(--vx-bg);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body:is([data-page="tour"], [data-page="scripts"], [data-page="executors"], [data-page="about"]) :is(.tabs, .nav-links) {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: min(760px, 100%);
  margin-left: auto;
  gap: clamp(8px, 1.5vw, 20px);
}
body:is([data-page="tour"], [data-page="scripts"], [data-page="executors"], [data-page="about"]) :is(.tab, .nav-link) {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 44px;
  padding: 10px 8px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--vx-muted);
  font-size: .82rem;
  font-weight: 650;
  text-decoration: none;
}
body:is([data-page="tour"], [data-page="scripts"], [data-page="executors"], [data-page="about"]) :is(.tab.active, .tab[aria-current="page"], .nav-link.active) {
  border-bottom-color: var(--vx-lime);
  background: transparent;
  color: var(--vx-lime);
  box-shadow: none;
}
body[data-page="scripts"] .card-actions .mini-btn {
  box-sizing: border-box;
  height: 46px;
  min-height: 46px;
}
@media (max-width: 600px) {
  body:is([data-page="tour"], [data-page="scripts"], [data-page="executors"], [data-page="about"]) :is(.topbar, .navbar, .site-nav) {
    min-height: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px 0;
  }
  body:is([data-page="tour"], [data-page="scripts"], [data-page="executors"], [data-page="about"]) :is(.tabs, .nav-links) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    margin: 0;
    gap: 4px 10px;
  }
  body:is([data-page="tour"], [data-page="scripts"], [data-page="executors"], [data-page="about"]) :is(.tab, .nav-link) {
    justify-content: flex-start;
    min-height: 44px;
    padding: 8px 4px;
    text-align: left;
  }
  body[data-page="scripts"] .vx-float-settings {
    top: calc(112px + env(safe-area-inset-top));
    right: 14px;
    bottom: auto;
    left: auto;
    width: 52px;
  }
  body[data-page="scripts"] .vx-float-settings.is-open {
    width: min(336px, calc(100vw - 28px));
  }
  body[data-page="scripts"] .vx-settings-trigger {
    position: relative;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    min-height: 52px;
    padding: 0;
    border-radius: 10px;
  }
  body[data-page="scripts"] .vx-settings-trigger [data-vx="settings"],
  body[data-page="scripts"] .vx-settings-trigger small {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}