/*
 * TJ-219 final visual authority overlay.
 * Additive-only: preserves every existing module while resolving the header,
 * continuous ticker, and SiteOS flow-stage composition.
 */

/* ---------- Header: one clear brand row + one centered navigation rail ---------- */
body.tj-os-page .tj-os-nav {
  grid-template-areas:
    "brand spacer actions"
    "nav nav nav" !important;
  grid-template-columns: max-content minmax(24px, 1fr) max-content !important;
  grid-template-rows: 44px 42px !important;
  align-items: center !important;
  gap: 8px 18px !important;
  width: min(1440px, calc(100% - 40px)) !important;
  min-height: 112px !important;
  padding: 12px 16px 10px !important;
  overflow: visible !important;
  border-color: rgba(72, 112, 145, .16) !important;
  border-radius: 26px !important;
  background:
    linear-gradient(120deg, rgba(255,255,255,.96), rgba(246,251,253,.92)) !important;
  box-shadow:
    0 18px 52px rgba(52, 86, 116, .10),
    inset 0 1px 0 rgba(255,255,255,.96) !important;
}

/* The commerce hub is taller than a viewport, so the legacy observer's
   intersection ratio can never reach its reveal threshold on mobile. Critical
   order, account, support, and checkout controls must never remain translucent. */
body.tj-os-page .commerce-hub {
  opacity: 1 !important;
  transform: none !important;
}

body.tj-os-page .tj-os-brand {
  grid-area: brand !important;
  justify-self: start !important;
  align-self: center !important;
  gap: 11px !important;
  min-width: 0 !important;
  min-height: 44px !important;
  padding: 5px 12px 5px 6px !important;
  border: 1px solid rgba(72, 112, 145, .10) !important;
  border-radius: 15px !important;
  background: rgba(255,255,255,.72) !important;
  color: #12253a !important;
  font-size: 18px !important;
  letter-spacing: -.025em !important;
  box-shadow: 0 8px 22px rgba(63, 94, 120, .06) !important;
}

body.tj-os-page .tj-os-brand img {
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  object-fit: contain !important;
}

body.tj-os-page .tj-os-actions-right {
  grid-area: actions !important;
  justify-self: end !important;
  align-self: center !important;
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  min-width: 0 !important;
}

body.tj-os-page .tj-os-primary-nav {
  grid-area: nav !important;
  position: static !important;
  justify-self: stretch !important;
  align-self: stretch !important;
  display: grid !important;
  grid-template-columns: repeat(8, minmax(76px, 1fr)) !important;
  align-items: center !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 4px !important;
  gap: 4px !important;
  border-top: 1px solid rgba(72, 112, 145, .12) !important;
  border-radius: 13px !important;
  background:
    linear-gradient(180deg, rgba(240,247,250,.72), rgba(248,251,253,.58)) !important;
  transform: none !important;
}

body.tj-os-page .tj-os-primary-nav a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  min-height: 34px !important;
  padding: 0 8px !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  color: #587086 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-align: center !important;
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease, transform 180ms ease !important;
}

body.tj-os-page .tj-os-primary-nav a:hover,
body.tj-os-page .tj-os-primary-nav a:focus-visible {
  border-color: rgba(50, 146, 166, .17) !important;
  background: rgba(255,255,255,.92) !important;
  color: #0c7c91 !important;
  transform: translateY(-1px) !important;
}

body.tj-os-page .tj-lang-switch,
body.tj-os-page .tj-os-tools > summary,
body.tj-os-page .tj-os-support,
body.tj-os-page #systemPill {
  min-height: 36px !important;
}

body.tj-os-page #systemPill {
  max-width: none !important;
  padding-inline: 10px !important;
  font-size: 10.5px !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

body.tj-os-page .tj-os-buy {
  min-height: 38px !important;
  padding-inline: 15px !important;
}

/* ---------- Continuous left-to-right ticker with no empty half ---------- */
body.tj-os-page .marquee {
  overflow: hidden !important;
  padding-block: 17px !important;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent) !important;
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent) !important;
}

body.tj-os-page .marquee-track {
  --tj219-marquee-gap: 56px;
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: var(--tj219-marquee-gap) !important;
  width: max-content !important;
  min-width: 200vw !important;
  animation: tj219-marquee-ltr 34s linear infinite !important;
  will-change: transform !important;
}

body.tj-os-page .marquee-sequence {
  display: flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: space-around !important;
  gap: 56px !important;
  min-width: 100vw !important;
  white-space: nowrap !important;
}

body.tj-os-page .marquee-sequence > span {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  gap: 56px !important;
  margin: 0 !important;
  color: #597087 !important;
  font-family: var(--tj-font) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: .01em !important;
}

body.tj-os-page .marquee:hover .marquee-track {
  animation-play-state: running !important;
}

@keyframes tj219-marquee-ltr {
  from { transform: translate3d(calc(-50% - 28px), 0, 0); }
  to { transform: translate3d(0, 0, 0); }
}

/* ---------- SiteOS stage: balanced abstract network, no competing UI screenshots ---------- */
body.tj-os-page #siteosStage.siteos-holocards {
  min-height: clamp(700px, 58vw, 820px) !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 16% 16%, rgba(114, 200, 204, .12), transparent 30%),
    radial-gradient(circle at 84% 78%, rgba(185, 173, 223, .12), transparent 30%),
    linear-gradient(145deg, rgba(252,254,255,.98), rgba(242,249,250,.96) 52%, rgba(248,246,251,.96)) !important;
  box-shadow:
    0 28px 80px rgba(56, 88, 116, .10),
    inset 0 1px 0 #fff !important;
}

body.tj-os-page #siteosStage.siteos-holocards::before {
  display: block !important;
  z-index: 0 !important;
  inset: 0 !important;
  background:
    radial-gradient(circle at 10% 20%, rgba(114,200,204,.42) 0 3px, transparent 4px),
    radial-gradient(circle at 76% 18%, rgba(139,170,218,.34) 0 3px, transparent 4px),
    radial-gradient(circle at 62% 72%, rgba(140,202,182,.36) 0 3px, transparent 4px),
    radial-gradient(circle at 88% 62%, rgba(185,173,223,.30) 0 3px, transparent 4px) !important;
  background-size: 220px 220px, 280px 280px, 320px 320px, 360px 360px !important;
  opacity: .42 !important;
  animation: tj219-stage-dots 9s linear infinite, tj219-stage-pulse 2.8s ease-in-out infinite alternate !important;
  pointer-events: none !important;
}

body.tj-os-page #siteosStage.siteos-holocards::after {
  display: block !important;
  z-index: 2 !important;
  inset: 0 !important;
  height: auto !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.28), transparent 18%, transparent 82%, rgba(255,255,255,.38)),
    linear-gradient(90deg, rgba(255,255,255,.22), transparent 16%, transparent 84%, rgba(255,255,255,.24)) !important;
  transform: none !important;
  pointer-events: none !important;
}

body.tj-os-page #siteosStage .siteos-stage-visual {
  position: absolute !important;
  z-index: 1 !important;
  inset: 70px 22px 22px !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 24px !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: .9 !important;
  transform: none !important;
  animation: tj219-network-breathe 10s ease-in-out infinite !important;
  pointer-events: none !important;
}

body.tj-os-page #siteosStage .siteos-stage-network {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: inherit !important;
  filter: saturate(.92) contrast(.98) !important;
}

body.tj-os-page #siteosStage .siteos-stage-reel,
body.tj-os-page #siteosStage .siteos-stage-signal {
  display: none !important;
}

body.tj-os-page #siteosStage .siteos-holo-card {
  background:
    linear-gradient(155deg, color-mix(in srgb, var(--card-accent) 18%, transparent), rgba(255,255,255,.86) 54%),
    rgba(255,255,255,.78) !important;
  box-shadow:
    0 16px 40px color-mix(in srgb, var(--card-accent) 12%, transparent),
    inset 0 1px 0 rgba(255,255,255,.92) !important;
  backdrop-filter: blur(18px) saturate(1.06) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.06) !important;
}

@media (min-width: 1440px) {
  /* Four calm tiers: every node is readable and no glass card collides with another. */
  body.tj-os-page #siteosStage .card-visit { top: 13% !important; left: 1% !important; right: auto !important; bottom: auto !important; }
  body.tj-os-page #siteosStage .card-language { top: 13% !important; left: calc(25% + 3px) !important; right: auto !important; bottom: auto !important; }
  body.tj-os-page #siteosStage .card-register { top: 13% !important; left: calc(50% + 2px) !important; right: auto !important; bottom: auto !important; }
  body.tj-os-page #siteosStage .card-verify { top: 13% !important; left: auto !important; right: 1% !important; bottom: auto !important; }

  body.tj-os-page #siteosStage .card-center { top: 36% !important; left: 1% !important; right: auto !important; bottom: auto !important; }
  body.tj-os-page #siteosStage .card-support { top: 36% !important; left: calc(25% + 3px) !important; right: auto !important; bottom: auto !important; }
  body.tj-os-page #siteosStage .card-product { top: 36% !important; left: calc(50% + 2px) !important; right: auto !important; bottom: auto !important; }
  body.tj-os-page #siteosStage .card-order { top: 36% !important; left: auto !important; right: 1% !important; bottom: auto !important; }

  body.tj-os-page #siteosStage .card-pay { top: 60% !important; left: 10% !important; right: auto !important; bottom: auto !important; }
  body.tj-os-page #siteosStage .card-return { top: 60% !important; left: calc(50% - 88px) !important; right: auto !important; bottom: auto !important; }
  body.tj-os-page #siteosStage .card-audit { top: 60% !important; left: auto !important; right: 10% !important; bottom: auto !important; }

  body.tj-os-page #siteosStage .card-geo { top: auto !important; left: 24% !important; right: auto !important; bottom: 5% !important; }
  body.tj-os-page #siteosStage .card-traffic { top: auto !important; left: auto !important; right: 24% !important; bottom: 5% !important; }
}

@media (min-width: 781px) and (max-width: 1439px) {
  /* When the stage shares the row with long copy, use a true grid instead of collisions. */
  body.tj-os-page #siteosStage.siteos-holocards {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-rows: minmax(106px, auto) !important;
    align-content: center !important;
    gap: 12px !important;
    padding: 88px 18px 24px !important;
  }

  body.tj-os-page #siteosStage .siteos-holo-card {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    min-height: 106px !important;
    transform: none !important;
  }

  body.tj-os-page #siteosStage .siteos-holo-card:hover,
  body.tj-os-page #siteosStage .siteos-holo-card.is-active {
    transform: translateY(-2px) scale(1.01) !important;
  }

  body.tj-os-page #siteosStage .card-traffic {
    grid-column: 2 !important;
  }
}

@keyframes tj219-stage-dots {
  from { background-position: 0 0, 0 0, 0 0, 0 0; }
  to { background-position: 220px -110px, -140px 280px, 160px -320px, -180px -180px; }
}

@keyframes tj219-stage-pulse {
  from { opacity: .28; }
  to { opacity: .56; }
}

@keyframes tj219-network-breathe {
  0%, 100% { transform: scale(1); opacity: .88; }
  50% { transform: scale(1.012); opacity: .96; }
}

@media (max-width: 1080px) {
  body.tj-os-page .tj-os-nav {
    grid-template-areas:
      "brand actions"
      "nav nav" !important;
    grid-template-columns: max-content minmax(0, 1fr) !important;
    grid-template-rows: 44px 42px !important;
  }

  body.tj-os-page .tj-os-actions-right {
    max-width: 100% !important;
  }

  body.tj-os-page #systemPill {
    display: none !important;
  }
}

@media (max-width: 760px) {
  body.tj-os-page .tj-os-nav {
    grid-template-areas:
      "brand"
      "actions"
      "nav" !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 44px 42px auto !important;
    gap: 5px !important;
    width: calc(100% - 20px) !important;
    min-height: 0 !important;
    padding: 9px 10px 10px !important;
    border-radius: 20px !important;
  }

  body.tj-os-page .tj-os-brand {
    justify-self: start !important;
  }

  body.tj-os-page .tj-os-tools,
  body.tj-os-page .tj-os-support,
  body.tj-os-page #systemPill {
    display: none !important;
  }

  body.tj-os-page .tj-os-primary-nav {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  body.tj-os-page .tj-os-actions-right {
    justify-self: stretch !important;
    justify-content: space-between !important;
    width: 100% !important;
  }

  body.tj-os-page .tj-os-buy {
    flex: 1 1 auto !important;
  }

  body.tj-os-page .marquee-sequence {
    gap: 34px !important;
  }

  body.tj-os-page .marquee-sequence > span {
    gap: 34px !important;
    font-size: 12px !important;
  }

  body.tj-os-page #siteosStage.siteos-holocards {
    background:
      radial-gradient(circle at 18% 18%, rgba(114,200,204,.12), transparent 34%),
      linear-gradient(160deg, #fbfdff, #f2f9fa 55%, #f8f6fb) !important;
  }

  body.tj-os-page #siteosStage .siteos-stage-visual {
    inset: 70px 10px auto !important;
    height: 300px !important;
    opacity: .34 !important;
    animation: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.tj-os-page .marquee-track,
  body.tj-os-page #siteosStage.siteos-holocards::before,
  body.tj-os-page #siteosStage .siteos-stage-visual {
    animation: none !important;
  }
}