/* ================================================================
   WAREX EXCHANGE TERMINAL — TOOL-PAGE BRIDGE  (exchange-bridge.css)
   ================================================================
   V3 layer for pages that KEEP their inline widget styles (wizards,
   calculators, boards: get-quote, register-warehouse, roi-calculator,
   storage-cost-estimator, warehouse-finder, load-board, contact,
   docklink, login, dashboard-preview, order-detail, developer-portal,
   api-integration, 404). Their interactive internals render as light
   panels — deliberate: a white form card on the terminal ground reads
   as a focused work surface, and the lead-capture markup stays
   functionally byte-identical.

   This sheet re-themes only the PAGE CHROME around those widgets.
   It loads LAST so its body-level rules win ties against inline
   styles. Documented exception to full tokenisation: widget interiors
   keep legacy neutrals (V5 candidate), every colour HERE is a token.
   ================================================================ */

/* ---- V3 shell additions (every V3 page: content AND tool) ------- */
.wx-burger--always { display: flex; }

.wx-menu-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--wx-s6);
}
.wx-menu-grid ul { margin-bottom: var(--wx-s5); }

@media (max-width: 1023px) {
  .wx-menu-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 639px) {
  .wx-menu-grid { grid-template-columns: 1fr; }
}

/* legacy skip link + scroll progress (markup preserved on subpages) */
body.wx-page .skip-link {
  position: absolute;
  left: -9999px; top: 0;
  background: var(--wx-amber);
  color: var(--wx-ink);
  padding: 10px 18px;
  z-index: 200;
  font-family: var(--wx-font-mono);
  font-size: var(--wx-text-sm);
  font-weight: 700;
  text-decoration: none;
}
body.wx-page .skip-link:focus { left: 16px; top: 12px; }

body.wx-page .scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0;
  background: var(--wx-amber);
  z-index: 150;
}

body.wx-page .back-to-top {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 44px;
  height: 44px;
  background: var(--wx-panel);
  border: 1px solid var(--wx-line);
  color: var(--wx-amber);
  font-size: 18px;
  cursor: pointer;
  z-index: 90;
  transition: border-color var(--wx-dur-fast);
}
body.wx-page .back-to-top:hover { border-color: var(--wx-amber); }

/* page ground — beats inline body rules by load order + specificity */
body.wx-page.wx-page {
  background: var(--wx-ink);
  background-image:
    linear-gradient(var(--wx-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--wx-grid) 1px, transparent 1px);
  background-size: 72px 72px;
  color: var(--wx-paper);
  font-family: var(--wx-font-body);
}

body.wx-page ::selection { background: var(--wx-amber); color: var(--wx-ink); }

body.wx-page :focus-visible {
  outline: 2px solid var(--wx-amber);
  outline-offset: 2px;
}

/* old fixed-nav offsets: the new shell nav is sticky and in-flow, so
   neutralise body padding/margin hacks pages used for the fixed navbar */
body.wx-page { padding-top: 0 !important; }
body.wx-page main { margin-top: 0 !important; }

/* warex-forms.js injected states — needed wherever lead forms live */
.wx-form-success {
  font-family: var(--wx-font-mono);
  color: var(--wx-green);
  border: 1px solid var(--wx-green);
  background: transparent;
  padding: 14px 18px;
  font-size: var(--wx-text-sm);
  letter-spacing: 0.04em;
}
.wx-form-error {
  font-family: var(--wx-font-mono);
  color: var(--wx-red);
  border: 1px solid var(--wx-red);
  background: transparent;
  padding: 10px 14px;
  margin-top: 10px;
  font-size: var(--wx-text-sm);
}

/* tool pages: hero bands above the widget keep the terminal voice even
   though widget internals stay light */
body.wx-page--tool .hero,
body.wx-page--tool .inner-hero,
body.wx-page--tool .page-hero {
  background: linear-gradient(180deg, var(--wx-ink-2), transparent);
  border-bottom: 1px solid var(--wx-line);
}
body.wx-page--tool .hero h1,
body.wx-page--tool .inner-hero h1,
body.wx-page--tool .page-hero h1 {
  font-family: var(--wx-font-display);
  font-weight: 800;
  text-transform: uppercase;
  color: var(--wx-paper);
  -webkit-text-fill-color: var(--wx-paper);
  background: none;
}
body.wx-page--tool .hero p,
body.wx-page--tool .inner-hero p { color: var(--wx-dim); }