/* =========================================================
   UNITED MOVEMENT — UI V2 FOUNDATION
   Professional shell + responsive discipline.
   Scoped to body[data-um-ui-v2="1"] so separate brands stay untouched.
   ========================================================= */

body[data-um-ui-v2="1"] {
  --um-v2-bg: #000000;
  --um-v2-surface: #080b09;
  --um-v2-surface-raised: #0b0f0c;
  --um-v2-surface-soft: #0e1310;
  --um-v2-white: #f5f8f6;
  --um-v2-text: #d7ded9;
  --um-v2-muted: #89938d;
  --um-v2-faint: #606a64;
  --um-v2-line: rgba(255, 255, 255, 0.10);
  --um-v2-line-strong: rgba(255, 255, 255, 0.17);
  --um-v2-green: #00ff66;
  --um-v2-green-soft: rgba(0, 255, 102, 0.085);
  --um-v2-green-line: rgba(0, 255, 102, 0.42);
  --um-v2-danger: #ff6b6b;

  --um-v2-font-ui: var(--um-font, "Share Tech Mono", "Courier New", monospace);
  --um-v2-font-body: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --um-v2-page: 1280px;
  --um-v2-page-wide: 1560px;
  --um-v2-reading: 820px;
  --um-v2-form: 640px;
  --um-v2-edge: clamp(12px, 2.25vw, 28px);
  --um-v2-gap-1: 6px;
  --um-v2-gap-2: 10px;
  --um-v2-gap-3: 16px;
  --um-v2-gap-4: 24px;
  --um-v2-gap-5: 32px;
  --um-v2-gap-6: 48px;

  --um-v2-radius-control: 7px;
  --um-v2-radius-card: 10px;
  --um-v2-radius-panel: 12px;

  background:
    radial-gradient(800px 360px at 50% -180px, rgba(0, 255, 102, 0.028), transparent 72%),
    var(--um-v2-bg) !important;
  color: var(--um-v2-text);
  font-family: var(--um-v2-font-body);
  font-size: 14px;
  line-height: 1.62;
}

body[data-um-ui-v2="1"] :is(h1, h2, h3, h4, h5, h6),
body[data-um-ui-v2="1"] :is(.um-title, .um-page-title, .um-section-title, .um-panel-title),
body[data-um-ui-v2="1"] :is(.um-btn, .um-button, button, label, legend),
body[data-um-ui-v2="1"] :is(.um-kicker, .um-eyebrow, [class$="-kicker"], [class$="-eyebrow"]),
body[data-um-ui-v2="1"] :is(code, pre, kbd, samp, .um-mono) {
  font-family: var(--um-v2-font-ui) !important;
}

body[data-um-ui-v2="1"] :is(p, li, dd, blockquote) {
  color: var(--um-v2-text);
}

body[data-um-ui-v2="1"] :is(small, .um-muted, .meta, .metadata) {
  color: var(--um-v2-muted);
}

body[data-um-ui-v2="1"] a {
  text-underline-offset: 3px;
}

/* ---------- Main shell ---------- */

body[data-um-ui-v2="1"] .um-main {
  min-height: 100dvh;
  padding-top: max(14px, env(safe-area-inset-top)) !important;
}

body[data-um-ui-v2="1"] .um-content {
  width: min(calc(100% - clamp(24px, 4vw, 56px)), var(--um-v2-page)) !important;
  max-width: var(--um-v2-page) !important;
  margin-inline: auto !important;
  padding: 0 0 var(--um-v2-gap-6) !important;
}

body[data-um-ui-v2="1"] :is(.um-container, .um-block) {
  min-width: 0;
}

body[data-um-ui-v2="1"] .um-block {
  max-width: var(--um-v2-reading) !important;
}

/* Wide functional surfaces keep the room they need. */
body[data-um-ui-v2="1"]:is(
  .um-page-mycelium,
  .um-page-full_house,
  .um-page-investigation,
  .um-page-investigation-advanced,
  .um-page-industrial-um,
  .um-page-holy-market,
  .um-page-holy-market-item
) .um-content {
  width: min(calc(100% - clamp(24px, 3vw, 48px)), var(--um-v2-page-wide)) !important;
  max-width: var(--um-v2-page-wide) !important;
}

/* ---------- Global header ---------- */

body[data-um-ui-v2="1"] .um-header-title {
  width: min(calc(100% - clamp(24px, 4vw, 56px)), var(--um-v2-page)) !important;
  max-width: var(--um-v2-page) !important;
  margin: 0 auto 8px !important;
  color: var(--um-v2-white) !important;
  font-family: var(--um-v2-font-ui) !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  letter-spacing: 0.20em !important;
  text-align: center !important;
}

body[data-um-ui-v2="1"] .um-live-bar {
  width: min(calc(100% - clamp(24px, 4vw, 56px)), var(--um-v2-page)) !important;
  max-width: var(--um-v2-page) !important;
  gap: 10px !important;
  margin: 0 auto 18px !important;
  color: var(--um-v2-muted) !important;
  font-family: var(--um-v2-font-ui) !important;
  font-size: 10px !important;
  letter-spacing: 0.10em !important;
}

body[data-um-ui-v2="1"] :is(#um-live-players, #um-live-members) {
  color: var(--um-v2-green) !important;
}

body[data-um-ui-v2="1"] .um-live-separator {
  color: var(--um-v2-line-strong) !important;
}

body[data-um-ui-v2="1"] .um-header-nav-container {
  width: min(calc(100% - clamp(24px, 4vw, 56px)), var(--um-v2-page)) !important;
  max-width: var(--um-v2-page) !important;
  margin: 0 auto !important;
  padding: 8px !important;
  border: 1px solid var(--um-v2-line) !important;
  border-radius: var(--um-v2-radius-panel) !important;
  background: rgba(8, 11, 9, 0.94) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.24) !important;
}

body[data-um-ui-v2="1"] #um-main-navigation.um-header-nav-grid {
  display: grid !important;
  grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
  gap: 7px !important;
}

body[data-um-ui-v2="1"] #um-main-navigation > .um-btn {
  min-width: 0 !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 8px !important;
  overflow: hidden !important;
  border: 1px solid var(--um-v2-line) !important;
  border-radius: var(--um-v2-radius-control) !important;
  background: rgba(255, 255, 255, 0.018) !important;
  color: var(--um-v2-muted) !important;
  box-shadow: none !important;
  font-family: var(--um-v2-font-ui) !important;
  font-size: 10.5px !important;
  font-weight: 400 !important;
  letter-spacing: 0.055em !important;
  white-space: nowrap !important;
}

body[data-um-ui-v2="1"] #um-main-navigation > .um-btn:hover,
body[data-um-ui-v2="1"] #um-main-navigation > .um-btn:focus-visible {
  border-color: var(--um-v2-green-line) !important;
  background: var(--um-v2-green-soft) !important;
  color: var(--um-v2-white) !important;
}

body[data-um-ui-v2="1"] #um-main-navigation > .um-btn:is(.um-nav-active, .um-nav-current) {
  border-color: var(--um-v2-green-line) !important;
  background: var(--um-v2-green-soft) !important;
  color: var(--um-v2-green) !important;
}

/* ---------- Local navigation ---------- */

body[data-um-ui-v2="1"] .um-page-navigation {
  max-width: var(--um-v2-page) !important;
  gap: 8px !important;
  margin: 16px auto 28px !important;
}

body[data-um-ui-v2="1"] .um-page-navigation > .um-btn {
  min-height: 40px !important;
  height: 40px !important;
  border-color: var(--um-v2-line) !important;
  border-radius: var(--um-v2-radius-control) !important;
  background: rgba(255, 255, 255, 0.018) !important;
  color: var(--um-v2-muted) !important;
  font-size: 10.5px !important;
}

body[data-um-ui-v2="1"] .um-page-navigation > .um-btn.um-nav-active {
  border-color: var(--um-v2-green-line) !important;
  background: var(--um-v2-green-soft) !important;
  color: var(--um-v2-green) !important;
}

/* ---------- Page symbol ---------- */

body[data-um-ui-v2="1"] .um-content > .um-page-symbol {
  height: 94px !important;
  min-height: 94px !important;
  max-height: 94px !important;
  margin: 20px auto 12px !important;
}

body[data-um-ui-v2="1"] .um-content > .um-page-symbol > img {
  width: 74px !important;
  max-width: 74px !important;
  height: 74px !important;
  max-height: 74px !important;
  filter: drop-shadow(0 0 10px rgba(0, 255, 102, 0.10)) !important;
}

/* ---------- Typography hierarchy ---------- */

body[data-um-ui-v2="1"] .um-content :is(h1, .um-title, .um-page-title) {
  color: var(--um-v2-white) !important;
  font-size: clamp(25px, 2vw, 32px) !important;
  line-height: 1.16 !important;
  letter-spacing: 0.075em !important;
}

body[data-um-ui-v2="1"] .um-content h2 {
  color: var(--um-v2-white) !important;
  font-size: clamp(18px, 1.35vw, 22px) !important;
  line-height: 1.25 !important;
  letter-spacing: 0.055em !important;
}

body[data-um-ui-v2="1"] .um-content h3 {
  color: var(--um-v2-white) !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
  letter-spacing: 0.045em !important;
}

body[data-um-ui-v2="1"] .um-content :is(p, li, dd, blockquote) {
  font-family: var(--um-v2-font-body) !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
}

body[data-um-ui-v2="1"] .um-content :is(
  small,
  .um-muted,
  .meta,
  .metadata,
  [class$="-meta"],
  [class$="-kicker"],
  [class$="-eyebrow"]
) {
  font-size: 10.5px !important;
  line-height: 1.45 !important;
}

/* ---------- Shared controls ---------- */

body[data-um-ui-v2="1"] .um-content :is(.um-btn, .um-button, input[type="submit"], input[type="button"]) {
  min-height: 42px !important;
  border-color: var(--um-v2-line-strong) !important;
  border-radius: var(--um-v2-radius-control) !important;
  background: rgba(255, 255, 255, 0.022) !important;
  color: var(--um-v2-white) !important;
  box-shadow: none !important;
  font-family: var(--um-v2-font-ui) !important;
  font-size: 11px !important;
  letter-spacing: 0.055em !important;
}

body[data-um-ui-v2="1"] .um-content :is(.um-btn, .um-button, input[type="submit"], input[type="button"]):hover {
  border-color: var(--um-v2-green-line) !important;
  background: var(--um-v2-green-soft) !important;
}

body[data-um-ui-v2="1"] .um-content :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
  select,
  textarea
) {
  border-color: var(--um-v2-line-strong) !important;
  border-radius: var(--um-v2-radius-control) !important;
  background: var(--um-v2-surface-raised) !important;
  color: var(--um-v2-white) !important;
  box-shadow: none !important;
  font-family: var(--um-v2-font-body) !important;
  font-size: 14px !important;
}

body[data-um-ui-v2="1"] .um-content :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
  select
) {
  min-height: 44px !important;
  height: 44px !important;
}

body[data-um-ui-v2="1"] .um-content textarea {
  line-height: 1.55 !important;
}

body[data-um-ui-v2="1"] .um-content :is(input, select, textarea):focus {
  border-color: var(--um-v2-green-line) !important;
  box-shadow: 0 0 0 2px rgba(0, 255, 102, 0.055) !important;
}

/* ---------- Shared surfaces ---------- */

body[data-um-ui-v2="1"] .um-content :is(.um-panel, .um-card, .um-box) {
  border-color: var(--um-v2-line) !important;
  border-radius: var(--um-v2-radius-card) !important;
  background-color: var(--um-v2-surface) !important;
  box-shadow: none !important;
}

body[data-um-ui-v2="1"] .um-content fieldset,
body[data-um-ui-v2="1"] .um-content details {
  border-color: var(--um-v2-line) !important;
  border-radius: var(--um-v2-radius-card) !important;
}

/* ---------- Footer ---------- */

body[data-um-ui-v2="1"] .um-watermark {
  width: min(calc(100% - clamp(24px, 4vw, 56px)), var(--um-v2-page));
  margin: 0 auto;
  padding: 22px 0 max(22px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--um-v2-line);
  color: var(--um-v2-faint);
  font-family: var(--um-v2-font-ui);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-align: center;
}

/* ---------- Public home ---------- */

body[data-um-ui-v2="1"].um-page-public-home .um-public-home {
  min-height: clamp(420px, 62vh, 680px) !important;
  display: grid !important;
  place-items: center !important;
  padding: clamp(48px, 9vh, 110px) 0 !important;
}

body[data-um-ui-v2="1"].um-page-public-home .um-public-home-hero {
  width: min(100%, 900px) !important;
  padding: clamp(26px, 4.2vw, 52px) !important;
  border: 1px solid var(--um-v2-line) !important;
  border-radius: 14px !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.018), transparent 40%),
    var(--um-v2-surface) !important;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.28) !important;
}

body[data-um-ui-v2="1"].um-page-public-home .um-public-home-copy {
  max-width: 720px !important;
}

/* ---------- Age gate ---------- */

body.um-age-gate[data-um-ui-v2="1"] {
  margin: 0;
  min-height: 100dvh;
  background:
    radial-gradient(700px 320px at 50% -140px, rgba(0, 255, 102, 0.03), transparent 72%),
    #000;
  color: var(--um-v2-text);
  font-family: var(--um-v2-font-body);
}

body.um-age-gate[data-um-ui-v2="1"] .um-age-gate-card {
  border-color: var(--um-v2-line) !important;
  border-radius: 14px !important;
  background: var(--um-v2-surface) !important;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.28) !important;
}

/* ---------- Responsive ---------- */

@media (max-width: 1279px) {
  body[data-um-ui-v2="1"] #um-main-navigation.um-header-nav-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 699px) {
  body[data-um-ui-v2="1"] {
    font-size: 14px;
  }

  body[data-um-ui-v2="1"] .um-main {
    padding-top: max(10px, env(safe-area-inset-top)) !important;
  }

  body[data-um-ui-v2="1"] .um-header-title {
    font-size: 10.5px !important;
    letter-spacing: 0.14em !important;
  }

  body[data-um-ui-v2="1"] .um-live-bar {
    margin-bottom: 13px !important;
    gap: 7px !important;
    font-size: 9px !important;
    letter-spacing: 0.06em !important;
  }

  body[data-um-ui-v2="1"] .um-header-nav-container {
    padding: 7px !important;
    border-radius: 10px !important;
  }

  body[data-um-ui-v2="1"] #um-main-navigation.um-header-nav-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  body[data-um-ui-v2="1"] #um-main-navigation > .um-btn {
    height: 40px !important;
    min-height: 40px !important;
    font-size: 10px !important;
  }

  body[data-um-ui-v2="1"] .um-content > .um-page-symbol {
    height: 78px !important;
    min-height: 78px !important;
    max-height: 78px !important;
    margin: 14px auto 8px !important;
  }

  body[data-um-ui-v2="1"] .um-content > .um-page-symbol > img {
    width: 62px !important;
    max-width: 62px !important;
    height: 62px !important;
    max-height: 62px !important;
  }

  body[data-um-ui-v2="1"] .um-content :is(h1, .um-title, .um-page-title) {
    font-size: clamp(22px, 7vw, 28px) !important;
    letter-spacing: 0.055em !important;
  }

  body[data-um-ui-v2="1"] .um-content :is(p, li, dd, blockquote) {
    font-size: 14px !important;
  }

  body[data-um-ui-v2="1"] .um-page-navigation {
    margin-top: 12px !important;
    margin-bottom: 22px !important;
  }

  body[data-um-ui-v2="1"].um-page-public-home .um-public-home {
    min-height: auto !important;
    padding: 38px 0 54px !important;
  }

  body[data-um-ui-v2="1"].um-page-public-home .um-public-home-hero {
    padding: 24px 18px !important;
    border-radius: 11px !important;
  }
}

@media (max-width: 389px) {
  body[data-um-ui-v2="1"] .um-header-title {
    white-space: normal !important;
  }

  body[data-um-ui-v2="1"] .um-live-bar {
    flex-wrap: wrap !important;
  }

  body[data-um-ui-v2="1"] .um-page-navigation {
    grid-template-columns: 1fr !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-um-ui-v2="1"] *,
  body[data-um-ui-v2="1"] *::before,
  body[data-um-ui-v2="1"] *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}
