/* BBXNEXUS R14P / desktop final-polish candidate
   Restrained maritime Web3 palette; crisp text; no changes to scene physics.
   R14 remains the base visual system. Mobile acceptance is explicitly pending. */
:root {
  --bbxp-night: #071922;
  --bbxp-surface: #102d37;
  --bbxp-cream: #f4f4ed;
  --bbxp-copy: #d7e6e7;
  --bbxp-muted: #afc8cd;
  --bbxp-copper: #efb482;
  --bbxp-teal: #78d3cb;
  --bbxp-stroke: #789aa2;
}
body { font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif; }
body[data-hero="true"] #experience {
  background: radial-gradient(ellipse 41% 49% at 50% 49%, #143846 0%, #0b2630 43%, transparent 84%),
    linear-gradient(115deg, #071821 0%, #071e29 48%, #06141e 100%);
}
body[data-hero="true"] header,
body[data-hero="false"] header {
  background: linear-gradient(180deg,#061720f7,#091f29e9);
  border-bottom-color: #8db5bb48;
}
header .brand { color: #fbfaf4; letter-spacing: -.075em; }
header .brand-icon { color: var(--bbxp-copper); }
header .brand-line { color: #b7d0d2; }
header .preview-tag { color: #d1dedc; }
header #incoterms-open,
body[data-scene-tone="light"] header #incoterms-open,
body[data-scene-tone="ocean"] header #incoterms-open {
  color: #11232b; background: #f0d1ad; border-color: #f0d1ad;
  box-shadow: 0 2px 14px #00000018;
}
header #incoterms-open:hover { background: #ffe3c3; border-color: #ffe3c3; }

/* Opening: preserve the unobstructed, real WebGL Earth and two side rails. */
body[data-hero="true"] .hero-kicker,
body[data-hero="true"] .atlas-overline { color: var(--bbxp-copper); }
body[data-hero="true"] .brand-index { color: #aecad0; }
body[data-hero="true"] #hero-title { color: var(--bbxp-cream); }
body[data-hero="true"] #hero-title .hero-subtitle { color: var(--bbxp-copper); }
body[data-hero="true"] .hero-copy {
  color: var(--bbxp-copy); font-size: clamp(14px,1.05vw,16px);
  line-height: 1.58; max-width: 31ch;
}
body[data-hero="true"] .hero-note,
body[data-hero="true"] .atlas-disclaimer {
  color: var(--bbxp-muted); font-size: clamp(11px,.78vw,12px);
  line-height: 1.58;
}
body[data-hero="true"] .hero-note { max-width: 34ch; }
body[data-hero="true"] #hero-enter { background: #f0cba6; border-color: #f0cba6; }
body[data-hero="true"] #hero-pause { border-color: #86b2bb; color: #e6f2f1; }
body[data-hero="true"] #hero-enter:hover { background: #ffe3c4; }
body[data-hero="true"] #atlas-heading em { color: #c8dedf; }
body[data-hero="true"] .atlas-picker label { color: #dbebeb; font-size: 11px; }
body[data-hero="true"] .atlas-picker select {
  background: #153741; border-color: #8fbbc1; color: #f5fbf9;
  font-size: 13px;
}
body[data-hero="true"] .atlas-quick button {
  color: #e1eff0; border-color: #719aa4b0;
  background: #102e39e8; min-height: 40px; font-size: 12px;
}
body[data-hero="true"] .atlas-quick button:is(:hover,[aria-pressed="true"]) {
  color: #06262d; background: var(--bbxp-teal); border-color: #baf7ea;
}
body[data-hero="true"] .atlas-selected {
  color: #92e8dd; font-size: 11px; letter-spacing: .08em;
}
body[data-hero="true"] .hero-bottomline {
  color: #b6cbd0; font-size: clamp(9px,.69vw,11px); letter-spacing: .11em;
}

/* Trust-panel: copper for the invitation, teal for a selected hypothetical proof. */
body[data-hero="true"] .chain-panel,
body[data-hero="false"] .chain-panel {
  background: #10313a; border-color: #7da5aaa8;
  box-shadow: 0 10px 28px #03131e62;
}
body[data-hero="true"] .chain-panel:hover { background: #163b43; }
body[data-hero="true"] #chain-toggle,
body[data-hero="false"] #chain-toggle {
  font-size: 12px; letter-spacing: .07em; color: #f4f8f5;
}
body[data-hero="true"] #chain-toggle small,
body[data-hero="false"] #chain-toggle small {
  font-size: 11px; color: #c6dcdf; line-height: 1.4;
}
.chain-panel .chain-heading { color: #f5f5ed; font-size: 14px; }
.chain-panel .chain-current strong { color: #f8f4eb; font-size: 14px; }
.chain-panel .chain-current p { color: #d2e4e5; }
.chain-panel .chain-meta dt { color: #bcd8dc; }
.chain-panel .chain-meta dd { color: #f0f4f0; }
.chain-panel .chain-disclosure { color: #c6dcde; }
.chain-panel .chain-events button:is(:hover,[aria-pressed="true"]) {
  background: #174f55; color: #e8fcf8; border-color: #7de0d4;
}
.chain-panel .chain-blocks rect.chain-visited { fill: #32676b; stroke: #92e5db; }
.chain-panel .chain-pulse-path { stroke: var(--bbxp-teal); }

/* Freight: one quiet editorial card, visibly separate from 3D machinery. */
@media (min-width: 901px) {
  body[data-hero="false"] #experience .narrative,
  body[data-hero="false"][data-first-freight="true"] #experience .narrative,
  body[data-hero="false"]:has(#stage-8[aria-current="step"]) #experience .narrative {
    background: #0b2632f5; border-color: #82a7b1;
    border-left: 3px solid var(--bbxp-copper);
    box-shadow: 0 10px 27px #05192257;
  }
  body[data-hero="false"] #experience .narrative .eyebrow { font-size: 11px; color: #f0c397; }
  body[data-hero="false"] #experience .narrative #stage-title,
  body[data-hero="false"][data-scene-tone="light"] #experience .narrative #stage-title {
    color: #fbf7ef; line-height: 1.10;
  }
  body[data-hero="false"] #experience .narrative #stage-caption,
  body[data-hero="false"][data-scene-tone="light"] #experience .narrative #stage-caption {
    color: #e3edec; font-size: 13px; line-height: 1.53;
    border: 0; outline: 0; box-shadow: none; padding: 0;
  }
  body[data-hero="false"] #experience .narrative-actions button {
    font-size: 11px; min-height: 42px;
  }
  body[data-hero="false"][data-scene-tone="ocean"] #experience .narrative {
    width: 296px; max-width: min(24vw,296px);
  }
  body[data-hero="false"] #experience .record,
  body[data-hero="false"] #experience .record:has(details[open]) {
    background: #0a2b35f2; border: 1px solid #85a9aa;
    border-radius: 7px; box-shadow: 0 12px 24px #09202a4a;
  }
  body[data-hero="false"] #experience .record summary {
    color: #f5f9f5; font-size: 12px; letter-spacing: .015em;
  }
  body[data-hero="false"] #experience #customs-status { gap: 7px; padding-top: 10px; }
  body[data-hero="false"] #experience #customs-status>span {
    color: #c0e2e3; font-size: 10px; letter-spacing: .095em;
  }
  body[data-hero="false"] #experience #customs-decision {
    color: #f1bd91; font-size: 12px; line-height: 1.4;
  }
  body[data-hero="false"] #experience #customs-progress { accent-color: var(--bbxp-teal); }
  body[data-hero="false"] #experience .record .record-body {
    color: #e3eeed; font-size: 12px; line-height: 1.55;
  }
  body[data-hero="false"] #experience footer#journey-dock {
    background: #0b2a34f3 !important; border-color: #80a4aaa9 !important;
    box-shadow: 0 14px 27px #03131b72;
  }
  body[data-hero="false"] #experience footer#journey-dock .control-heading,
  body[data-hero="false"] #experience footer#journey-dock .transport>span,
  body[data-hero="false"] #experience footer#journey-dock .transport label {
    color: #c7dbdd; font-size: 11px;
  }
  body[data-hero="false"] #experience footer#journey-dock #stages .stage .label {
    font-size: clamp(10px,.8vw,12px); color: #d6e7e8;
  }
  body[data-hero="false"] #experience footer#journey-dock #stages .stage .number {
    border-color: #8cb6ba; color: #e5f0f0; background: #153c48; font-size: 11px;
  }
  body[data-hero="false"] #experience footer#journey-dock #stages .stage[aria-current="step"] .number {
    color: #082431; background: var(--bbxp-copper); border-color: #ffe0bd;
  }
  #incoterms-panel { background: #0c2933; border-color: #87aeb3; border-top-color: var(--bbxp-copper); }
  #incoterms-panel .incoterms-heading { background: #183c45; }
  #incoterms-panel .incoterms-content { color: #e4eded; font-size: 13px; }
  #incoterms-panel .incoterms-help,
  #incoterms-panel .incoterms-notices,
  #incoterms-panel .incoterms-summary { color: #c8dfe0; font-size: 12px; }
  #incoterms-panel #incoterm-stages li { font-size: 11px; color: #cde1e2; }
  #incoterms-panel .incoterms-risk-band {
    background: linear-gradient(90deg,#efb482 0%,#efb482 var(--risk-split,0%),#78d3cb var(--risk-split,0%),#78d3cb 100%);
  }
  #incoterms-panel .incoterms-risk-legend { font-size: 11px; }
  #incoterms-panel a { color: #9ce7de; }
}

/* Desktop small-screen typography without stealing the central globe. */
@media (min-width: 901px) and (max-width: 1200px) {
  body[data-hero="true"] .hero-kicker,
  body[data-hero="true"] .atlas-overline { font-size: 10px; letter-spacing: .1em; }
  body[data-hero="true"] .hero-copy { font-size: 13px; line-height: 1.52; max-width: 28ch; }
  body[data-hero="true"] .hero-note,
  body[data-hero="true"] .atlas-disclaimer { font-size: 11px; line-height: 1.44; }
  body[data-hero="true"] .hero-atlas { padding-left: 13px; }
  body[data-hero="true"] .atlas-picker select { font-size: 12px; }
  body[data-hero="true"] .hero-bottomline { font-size: 9px; letter-spacing: .05em; }
  body[data-hero="false"] #experience .narrative #stage-caption { font-size: 12px; }
  body[data-hero="false"][data-scene-tone="ocean"] #experience .narrative {
    width: 246px; max-width: 246px;
  }
  body[data-hero="false"] #experience footer#journey-dock #stages .stage .label { font-size: 10px; }
}
@media (min-width:901px) and (max-height:780px) {
  body[data-hero="true"] .hero-copy { line-height: 1.47; margin-bottom: .85rem; }
  body[data-hero="true"] .hero-note { margin-top: .7rem; }
  body[data-hero="true"] .hero-bottomline { bottom: 3%; }
}
/* Accessible focus without persistent decorative outlines. */
body[data-hero="true"] #hero :is(button,select):focus-visible,
body[data-hero="true"] #chain-panel button:focus-visible,
body[data-hero="false"] #journey-panel button:focus-visible {
  outline: 3px solid #9ce7de; outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  body[data-hero="true"] #hero-enter { transition: none; }
}

/* R14P DGX: keep ocean vessel clear without changing its camera or rig. */
@media (min-width: 901px) {
 body[data-hero="false"][data-scene-tone="ocean"] #experience .narrative {
  top:100px;width:88.4%;max-width:none;display:grid;grid-template-columns:minmax(0,1fr) 260px;
  align-items:center;gap:24px;padding:12px 18px;
 }
 body[data-hero="false"][data-scene-tone="ocean"] #experience .narrative .stage-copy {
  display:grid;grid-template-columns:minmax(210px,1fr) minmax(180px,1fr);gap:6px 24px;
 }
 body[data-hero="false"][data-scene-tone="ocean"] #experience .narrative .eyebrow {grid-column:1;grid-row:1;font-size:10px;margin:0;}
 body[data-hero="false"][data-scene-tone="ocean"] #experience .narrative .eyebrow>span:first-child {padding:0;border-top:0;}
 body[data-hero="false"][data-scene-tone="ocean"] #experience .narrative #stage-title {grid-column:1;grid-row:2;margin:0;font-size:clamp(24px,1.65vw,30px);}
 body[data-hero="false"][data-scene-tone="ocean"] #experience .narrative #stage-caption {grid-column:2;grid-row:1 / span 2;align-self:center;font-size:13px;}
 body[data-hero="false"][data-scene-tone="ocean"] #experience .narrative-actions {margin:0;flex-wrap:nowrap;gap:8px;}
 body[data-hero="false"][data-scene-tone="ocean"] #experience .narrative-actions button {font-size:12px;padding:10px 8px;white-space:nowrap;}
 body[data-hero="false"][data-scene-tone="ocean"] #experience .narrative-actions #play span {display:none;}
 body[data-hero="true"] .hero-note,body[data-hero="true"] .atlas-disclaimer {font-size:12px;}
 body[data-hero="true"] .chain-panel .chain-current p,body[data-hero="true"] .chain-panel .chain-disclosure {font-size:12px;line-height:1.5;}
}
@media (min-width:901px) and (max-width:1200px) {
 body[data-hero="false"][data-scene-tone="ocean"] #experience .narrative {width:90.6%;gap:16px;padding:10px 14px;}
 body[data-hero="false"][data-scene-tone="ocean"] #experience .narrative .stage-copy {gap:5px 16px;}
}