/* Load after home.css and BEFORE traxium-app.css. Important declarations in
   this earlier, homepage-only layer beat the app's generic minimum type/card
   rules. Geometry stays unlayered so legacy positioning cannot override it. */
@layer home-network {
  .home-connect.tx-network {
    --network-surface: var(--tx-card) !important;
    --network-ink: var(--tx-text) !important;
    --network-muted: var(--tx-text) !important;
    --network-accent: var(--tx-numbers) !important;
    --network-line: var(--tx-numbers) !important;
    --network-flow: var(--tx-numbers);
    --network-glow: color-mix(in srgb, var(--tx-brand-mint) 38%, transparent);
    --network-glass: color-mix(in srgb, var(--tx-card) 88%, transparent);
    background: radial-gradient(ellipse at 50% 45%, color-mix(in srgb, var(--tx-brand-mint) 16%, transparent), transparent 65%), var(--tx-canvas) !important;
    border: 1px solid color-mix(in srgb, var(--network-line) 28%, var(--tx-line)) !important;
    border-radius: 28px !important;
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--tx-on-primary) 35%, transparent), 0 20px 60px color-mix(in srgb, var(--tx-brand-teal) 12%, transparent) !important;
    text-shadow: none !important;
    font-family: var(--tx-font) !important;
    font-size: 18px !important;
  }
  .home-connect.tx-network[data-phase="fulfillment"] { --network-flow: var(--tx-apricot); }
  .home-connect.tx-network[data-phase="sync"] { --network-flow: var(--tx-good-text); }
  .home-connect.tx-network :where(span, p, button) {
    color: inherit !important;
    font-family: inherit !important;
    font-size: inherit !important;
    -webkit-text-fill-color: currentColor !important;
  }
  .home-connect.tx-network .tx-node-card {
    background: linear-gradient(135deg, color-mix(in srgb, var(--integration-primary) 10%, transparent), transparent 65%), var(--network-glass) !important;
    border: 1px solid color-mix(in srgb, var(--network-line) 30%, var(--tx-line)) !important;
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--tx-on-primary) 25%, transparent), 0 8px 22px color-mix(in srgb, var(--tx-brand-teal) 10%, transparent), 0 0 calc(6px + var(--network-energy, 0) * 26px) var(--network-glow) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    color: var(--network-ink) !important;
    text-shadow: none !important;
    /* Keep text/icon contrast intact even while the surrounding glows pulse. */
    opacity: 1 !important;
  }
  /* Provider colors are local identity accents, never theme text overrides.
     Fixed icon ink pairs are contrast-tested independently of the active theme. */
  .home-connect.tx-network [data-network-node="shopify"] {
    --integration-primary: #95BF47;
    --integration-secondary: #95BF47;
    --integration-ink: var(--tx-on-apricot);
  }
  .home-connect.tx-network [data-network-node="amazon"] {
    --integration-primary: #FF9900;
    --integration-secondary: #FF9900;
    --integration-ink: var(--tx-on-apricot);
  }
  .home-connect.tx-network [data-network-node="tiktok"] {
    --integration-primary: #FE2C55;
    --integration-secondary: #25F4EE;
    --integration-ink: var(--tx-on-apricot);
  }
  .home-connect.tx-network [data-network-node="etsy"] {
    --integration-primary: #F1641E;
    --integration-secondary: #F1641E;
    --integration-ink: var(--tx-on-apricot);
  }
  .home-connect.tx-network [data-network-node="preptrax"] {
    --integration-primary: #6353A5;
    --integration-secondary: var(--tx-brand-teal-mid);
    --integration-ink: var(--tx-on-primary);
  }
  .home-connect.tx-network [data-network-node="usps"] {
    --integration-primary: #004B87;
    --integration-secondary: #004B87;
    --integration-ink: var(--tx-on-primary);
  }
  .home-connect.tx-network [data-network-node="ups"] {
    --integration-primary: #351C15;
    --integration-secondary: #FFB500;
    --integration-ink: var(--integration-secondary);
  }
  .home-connect.tx-network [data-network-node="fedex"] {
    --integration-primary: #4D148C;
    --integration-secondary: #FF6600;
    --integration-ink: var(--tx-on-primary);
  }
  .home-connect.tx-network .tx-node:not(.tx-node--center) {
    --network-glow: color-mix(in srgb, var(--integration-primary) 38%, transparent);
  }
  .home-connect.tx-network .tx-node:not(.tx-node--center) .tx-node-card {
    border-inline-start: 3px solid var(--integration-secondary) !important;
  }
  .home-connect.tx-network .tx-node-card--center {
    background: linear-gradient(135deg, var(--tx-brand-teal), var(--tx-mid)) !important;
    border: 1px solid var(--tx-brand-mint) !important;
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--tx-on-primary) 40%, transparent), inset 0 -1px 0 var(--tx-brand-mint) !important;
    color: var(--tx-on-primary) !important;
  }
  .home-connect.tx-network .tx-node-title { font-size: 24px !important; }
  .home-connect.tx-network .tx-node-symbol { font-size: 24px !important; }
  .home-connect.tx-network .tx-network-heading { font-size: 22px !important; }
  .home-connect.tx-network .tx-node-orb {
    background: var(--integration-primary) !important;
    color: var(--integration-ink) !important;
    border: 1px solid var(--integration-secondary) !important;
    border-bottom-width: 4px !important;
    box-shadow: 0 0 calc(8px + var(--network-energy, 0) * 16px) var(--network-glow) !important;
  }
  /* Remove legacy stripes/auroras; purpose-built grid and hub frame live below. */
  .home-connect.tx-network::after,
  .home-connect.tx-network .tx-network-stage::before,
  .home-connect.tx-network .tx-network-stage::after,
  .home-connect.tx-network .tx-node-card::before,
  .home-connect.tx-network .tx-node-card::after {
    content: none !important;
    display: none !important;
  }
  /* Energy comes from the existing shared clock, so pause/reduced motion also
     control the glows. No independent looping animation or extra timer. */
  .home-connect.tx-network::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: radial-gradient(circle, color-mix(in srgb, var(--network-line) 14%, transparent) 1px, transparent 1px);
    background-size: 24px 24px;
  }
  .home-connect.tx-network .tx-node--center::before,
  .home-connect.tx-network .tx-node--center::after {
    content: "";
    position: absolute;
    pointer-events: none;
  }
  .home-connect.tx-network .tx-node--center::before {
    inset: -6px;
    border-radius: 30px 14px 30px 14px;
    border: 1px solid color-mix(in srgb, var(--network-accent) 45%, transparent);
    box-shadow: 0 0 0 8px color-mix(in srgb, var(--tx-brand-mint) 8%, transparent), 0 0 calc(24px + var(--network-energy, 0) * 36px) var(--network-glow);
  }
  .home-connect.tx-network .tx-node--center::after {
    inset: 8px;
    border-radius: 18px 4px 18px 4px;
    border: 1px solid color-mix(in srgb, var(--tx-brand-mint) 50%, transparent);
    opacity: calc(.45 + var(--network-energy, 0) * .55);
  }
}

.home-connect.tx-network {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: auto;
  min-height: 0;
  isolation: isolate;
  container-type: inline-size;
  padding: clamp(12px, 3vw, 28px);
  overflow: hidden;
  opacity: 1;
  transform: none;
  color: var(--network-ink);
  font-weight: 400;
  transition: background-color 300ms ease, border-color 300ms ease,
    color 300ms ease, box-shadow 300ms ease;
}

.home-connect.tx-network .tx-network-header {
  position: relative;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 0 0 20px;
  border-bottom: 1px solid color-mix(in srgb, var(--network-line) 20%, transparent);
}

.home-connect.tx-network .tx-network-label {
  display: block;
  margin: 0;
  font-weight: 500;
  line-height: 1.4;
  transition: color 300ms ease;
}

.home-connect.tx-network .tx-network-heading {
  margin: 0;
  min-width: 0;
  font-weight: 600 !important;
  line-height: 1.3;
  letter-spacing: -0.025em;
  text-wrap: balance;
  overflow-wrap: anywhere;
  transition: color 300ms ease;
}

.home-connect.tx-network .tx-network-pause {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 48px;
  min-height: 48px;
  padding: 8px 16px;
  border: 1px solid var(--network-accent);
  border-radius: 999px;
  background: var(--network-glass);
  color: var(--network-ink);
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color 300ms ease, border-color 300ms ease,
    color 300ms ease, box-shadow 300ms ease;
}

.home-connect.tx-network .tx-network-pause :where(span) {
  font-size: inherit !important;
}

.home-connect.tx-network .tx-network-pause svg {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
}

.home-connect.tx-network .tx-network-pause[hidden],
.home-connect.tx-network:not(.is-ready) [data-network-pause] {
  display: none !important;
}

.home-connect.tx-network .tx-network-pause:hover {
  background: color-mix(in srgb, var(--tx-brand-mint) 20%, var(--network-surface));
  text-decoration: underline;
  text-underline-offset: 4px;
}

.home-connect.tx-network .tx-network-pause:focus-visible {
  outline: 2px solid var(--network-accent) !important;
  outline-offset: 3px;
}

.home-connect.tx-network .tx-network-description {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Content-sized rows grow with wrapped text; the controller measures the grid. */
.home-connect.tx-network .tx-constellation.tx-network-stage {
  position: relative;
  inset: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas: "shopify amazon" "tiktok etsy" "center center" "preptrax usps" "fedex ups";
  align-items: center;
  justify-items: center;
  row-gap: 28px;
  column-gap: 32px;
  width: 100%;
  height: auto;
  min-width: 0;
  margin: 0;
  padding: 32px 0;
  overflow: visible;
  isolation: isolate;
  pointer-events: auto;
}

.home-connect.tx-network .tx-constellation-svg {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

/* The controller owns all motion; disable legacy float and CSS path loops. */
.home-connect.tx-network .tx-node,
.home-connect.tx-network .tx-node-card,
.home-connect.tx-network .tx-line,
.home-connect.tx-network .tx-dot,
.home-connect.tx-network .tx-node-card--center::before,
.home-connect.tx-network .tx-network-route,
.home-connect.tx-network .tx-network-signal,
.home-connect.tx-network .tx-network-trail,
.home-connect.tx-network .tx-network-particle,
.home-connect.tx-network .tx-network-particle-halo {
  animation: none !important;
}

.home-connect.tx-network .tx-line,
.home-connect.tx-network .tx-network-route {
  fill: none;
  stroke: var(--network-line);
  stroke-width: 1.5;
  stroke-opacity: calc(0.24 + var(--network-energy, 0) * 0.6);
  stroke-dasharray: none;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  transition: stroke 300ms ease, stroke-opacity 240ms ease;
}

.home-connect.tx-network .tx-network-trail {
  fill: none;
  stroke: var(--network-flow);
  stroke-width: 2.5;
  filter: drop-shadow(0 0 3px var(--network-flow));
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transition: stroke 300ms ease;
}

.home-connect.tx-network .tx-network-particle,
.home-connect.tx-network .tx-network-particle-halo {
  fill: var(--network-flow);
  stroke: none;
  filter: drop-shadow(0 0 3px var(--network-flow));
  transition: fill 300ms ease;
}

.home-connect.tx-network .tx-network-particle-halo { fill-opacity: 0.2; }

.home-connect.tx-network .tx-node {
  position: relative;
  display: block;
  inset: auto;
  width: min(240px, 100%);
  min-width: 0;
  z-index: 2;
  border-radius: 18px;
  transform: none;
  transition: none !important;
}

.home-connect.tx-network .tx-node--center {
  grid-area: center;
  width: min(320px, 100%);
  max-width: 100%;
  min-height: 156px;
  z-index: 3;
  border-radius: 24px 8px 24px 8px;
}
.home-connect.tx-network .tx-node--tl { grid-area: shopify; }
.home-connect.tx-network .tx-node--t1 { grid-area: amazon; }
.home-connect.tx-network .tx-node--t2 { grid-area: tiktok; }
.home-connect.tx-network .tx-node--tr { grid-area: etsy; }
.home-connect.tx-network .tx-node--bl { grid-area: preptrax; }
.home-connect.tx-network .tx-node--r1 { grid-area: usps; }
.home-connect.tx-network .tx-node--r2 { grid-area: ups; }
.home-connect.tx-network .tx-node--r3 { grid-area: fedex; }

.home-connect.tx-network .tx-node-card {
  position: relative;
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 76px;
  padding: 14px;
  gap: 12px;
  border-radius: inherit;
  white-space: normal;
  transition: background-color 300ms ease, border-color 300ms ease,
    color 300ms ease, box-shadow 300ms ease;
}

.home-connect.tx-network .tx-node-card:hover { transform: none !important; }

.home-connect.tx-network .tx-node-card--center {
  min-width: 0;
  min-height: 156px;
  height: auto;
  padding: 24px 20px;
  border-radius: inherit;
  overflow: hidden;
  clip-path: none;
  justify-content: center;
  align-items: center;
}

/* Content-sized glass core; the title remains the only text inside the hub. */
.home-connect.tx-network .tx-node-core {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
  gap: 18px;
  text-align: center;
  position: relative;
  z-index: 1;
}
.home-connect.tx-network .tx-node-core > * { flex-shrink: 0; max-width: 100%; }

/* Decorative activity lamps mirror the labeled phases below the diagram.
   They represent the illustration, not actual integration health/telemetry. */
.home-connect.tx-network .tx-hub-status { display: flex; gap: 12px; }
.home-connect.tx-network .tx-hub-light {
  --hub-light: var(--tx-brand-mint);
  display: block;
  width: 24px;
  height: 6px;
  border-radius: 999px;
  background: var(--hub-light);
  opacity: .35;
}
.home-connect.tx-network .tx-hub-light--fulfillment { --hub-light: var(--tx-brand-apricot); }
.home-connect.tx-network[data-phase="orders"] .tx-hub-light--orders,
.home-connect.tx-network[data-phase="fulfillment"] .tx-hub-light--fulfillment,
.home-connect.tx-network[data-phase="sync"] .tx-hub-light--sync {
  opacity: 1;
  box-shadow: 0 0 calc(8px + var(--network-energy, 0) * 12px) var(--hub-light);
}

.home-connect.tx-network .tx-node-meta {
  min-width: 0;
  gap: 4px;
  flex: 1 1 0;
}

.home-connect.tx-network .tx-node-name,
.home-connect.tx-network .tx-node-title {
  line-height: 1.3;
  overflow-wrap: anywhere;
  transition: color 300ms ease;
}

.home-connect.tx-network .tx-node-status,
.home-connect.tx-network .tx-node-sub {
  line-height: 1.35;
  overflow-wrap: anywhere;
  transition: color 300ms ease;
}

.home-connect.tx-network .tx-node-title { white-space: nowrap; }
.home-connect.tx-network .tx-node-name,
.home-connect.tx-network .tx-node-title { font-weight: 700; }
.home-connect.tx-network .tx-node-sub {
  min-width: 0;
  justify-content: center;
  gap: 6px;
}

.home-connect.tx-network .tx-node-orb {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--network-line) 30%, transparent);
  border-radius: 50%;
  overflow: hidden;
  font-weight: 700;
  box-shadow: none;
  transition: background-color 300ms ease, border-color 300ms ease;
}
.home-connect.tx-network .tx-node-orb svg { width: 24px; height: 24px; }
/* Local marks cannot fail to load; provider identity lives in scoped CSS tokens. */
.home-connect.tx-network .tx-node-symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  line-height: 1;
}

.home-connect.tx-network .tx-dot {
  width: 6px;
  height: 6px;
  background: currentColor;
  box-shadow: 0 0 10px var(--network-flow);
  transition: background-color 300ms ease;
}

.home-connect.tx-network:not([data-motion="running"]) .tx-node-card {
  opacity: 1 !important;
  transform: none !important;
}

.home-connect.tx-network .tx-network-footer {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 16px;
  min-height: 68px;
  padding: 20px 0 0;
  border-top: 1px solid color-mix(in srgb, var(--network-line) 20%, transparent);
}

.home-connect.tx-network .tx-network-activity {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 30px;
  flex: 1 1 160px;
  color: var(--network-ink);
  line-height: 1.4;
  transition: color 300ms ease;
}

.home-connect.tx-network [data-network-status] {
  min-width: 0;
  font-size: inherit !important;
  overflow-wrap: anywhere;
}

.home-connect.tx-network .tx-network-caption {
  margin: 0;
  flex-basis: 100%;
  font-weight: 400;
  line-height: 1.5;
  transition: color 300ms ease;
}

.home-connect.tx-network .tx-network-phases {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.home-connect.tx-network .tx-phase {
  padding: 6px 12px;
  border: 1px solid color-mix(in srgb, var(--network-line) 20%, transparent);
  border-radius: 999px;
  background: var(--network-glass);
  transition: background-color 240ms ease, box-shadow 240ms ease;
}
.home-connect.tx-network[data-phase="orders"] .tx-phase--orders,
.home-connect.tx-network[data-phase="fulfillment"] .tx-phase--fulfillment,
.home-connect.tx-network[data-phase="sync"] .tx-phase--sync {
  background: color-mix(in srgb, var(--network-flow) 16%, var(--network-surface));
  border-color: var(--network-flow);
  box-shadow: inset 0 -2px 0 var(--network-flow);
}

/* Container sizing also handles a narrow desktop grid track, not just phones. */
@container (max-width: 560px) {
  .home-connect.tx-network .tx-node-card:not(.tx-node-card--center) {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
  .home-connect.tx-network .tx-node-meta { flex: 0 1 auto; width: 100%; }
}

/* The explicit state and OS preference both win over global motion rules. */
.home-connect.tx-network[data-motion="reduced"],
.home-connect.tx-network[data-motion="reduced"]::before,
.home-connect.tx-network[data-motion="reduced"]::after,
.home-connect.tx-network[data-motion="reduced"] *,
.home-connect.tx-network[data-motion="reduced"] *::before,
.home-connect.tx-network[data-motion="reduced"] *::after {
  animation: none !important;
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .home-connect.tx-network,
  .home-connect.tx-network::before,
  .home-connect.tx-network::after,
  .home-connect.tx-network *,
  .home-connect.tx-network *::before,
  .home-connect.tx-network *::after {
    animation: none !important;
    transition: none !important;
  }
}