/* R12 concept: earth / sea glass UI over the existing physical Three.js world.
   This file does not touch freight mechanics, cameras, GPU resources or Incoterm rules. */
:root{
 --cinema-orange:#ca7343;
 --cinema-black:#0a1b1d;
 --cinema-dark:#132d31;
 --cinema-deep-blue:#183b49;
 --cinema-blue:#377a81;
 --bbx-copper:#df9360;
 --bbx-sand:#e9d9b9;
 --bbx-sea:#75bab2;
 --bbx-cloud:#eaf3ed;
 --bbx-shade:#10282e;
 --dock-alpha:.20;
 --gold:#ca7343;
}
body[data-hero=true] #experience{
 background:radial-gradient(ellipse at 75% 80%,#1d4659 0,transparent 55%),
 radial-gradient(ellipse at 5% 6%,#173c3d 0,transparent 56%),#08171b;
}
body[data-scene-tone=light] #experience{background:#eff2ec}
header{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
header .brand-icon{color:var(--bbx-copper)}
header .brand-line{font-weight:700;letter-spacing:.16em}
header .preview-tag{border-radius:5px;border-color:currentColor;letter-spacing:.12em}
body[data-hero=true] header{background:linear-gradient(180deg,#0a1c2280,transparent)}
.hero-kicker{color:var(--bbx-sand)}
.hero-kicker:before{background:var(--bbx-copper)}
#hero-title{color:#f5f3e9;font-weight:800;text-shadow:0 4px 28px #03171d99}
.hero-copy{color:#e0e6df;text-shadow:0 1px 12px #04181bc7}
.hero-actions #hero-enter{background:var(--bbx-sand);color:#123338;border-color:var(--bbx-sand)}
.hero-actions #hero-enter:hover{background:var(--bbx-copper);color:#10272b;border-color:var(--bbx-copper)}
.hero-actions #hero-pause{background:rgba(8,34,39,.32);backdrop-filter:blur(8px)}
.hero-note{color:#d1dcd8;line-height:1.5;max-width:36rem}
.atlas-picker{color:var(--bbx-cloud)}
.atlas-picker select{background:#0f343abd;border-color:#dce7df65;color:#f7f8f4;border-radius:9px}
.narrative .eyebrow>span:first-child{color:#b65c32}
.narrative-actions #play{background:#c97546;color:#fff;border-color:#c97546}
.narrative-actions #pause{background:#14363ac9;border-color:#b1c9c978;color:#fff;backdrop-filter:blur(10px)}
.record{border-radius:13px;background:rgba(16,42,47,.25);border:1px solid #e4ece348;backdrop-filter:blur(12px) saturate(112%);-webkit-backdrop-filter:blur(12px) saturate(112%);box-shadow:0 15px 48px #061b2340,inset 0 1px 0 #ffffff22}
body #experience .record{border-top:1px solid #dfad7caa;border-radius:13px;background:rgba(12,34,40,.36);backdrop-filter:blur(12px) saturate(112%);-webkit-backdrop-filter:blur(12px) saturate(112%)}
.record-top,.record summary{color:#fff}
.record summary{background:rgba(11,35,38,.13)}
.record:before{background:linear-gradient(90deg,transparent,#d8a97a9f,transparent)}
.record-body{background:rgba(10,29,33,.25)}
.record .fictional,.record-body>p:first-child{color:#efb58d}
body[data-scene-tone=light] .narrative h1,
body[data-scene-tone=light] .narrative .eyebrow{color:#1a3035}
body[data-scene-tone=light] #stage-caption{color:#29434a;text-shadow:0 1px 10px #ffffffa5}
body[data-scene-tone=light] #scene:after{background:linear-gradient(#f1f2ed 0,rgba(241,242,237,.91) 6rem,rgba(241,242,237,.45) 12rem,transparent 17rem)}
body[data-scene-tone=light] .scene-caption{background:rgba(232,238,232,.77);box-shadow:0 0 0 .3rem rgba(232,238,232,.77);color:#243f44}
body[data-scene-tone=light] .scene-caption strong{color:#1c3f45}
/* R12 journey navigation: the full red-box rail becomes movable tinted glass. */
body:not([data-hero=true]) #experience footer.journey-controls{
 position:absolute;left:5.5%;right:5.5%;bottom:14px;top:auto;width:auto;
 z-index:7;min-width:0;margin:0;padding:9px 15px 10px;
 color:#f7f9f6;background:rgba(9,33,38,var(--dock-alpha));
 backdrop-filter:blur(14px) saturate(120%);-webkit-backdrop-filter:blur(14px) saturate(120%);
 border:1px solid rgba(235,245,236,.37);border-radius:18px;
 box-shadow:0 13px 52px #09252a26,inset 0 1px 0 #fff5;
}
body:not([data-hero=true]) #experience footer.journey-controls[data-floating=true]{
 position:fixed;inset:0 auto auto 0;bottom:auto;right:auto;
 width:min(88vw,1100px);max-width:calc(100vw - 20px);
 transform:translate3d(var(--dock-x,0px),var(--dock-y,0px),0);
}
body:not([data-hero=true]) #experience footer.journey-controls[data-compact=true]{
 width:min(640px,88vw);right:auto;
}
.dock-toolbar{display:flex;align-items:center;gap:9px;min-height:22px;margin:0 0 4px;font:600 9px/1.2 Arial,sans-serif;letter-spacing:.09em}
.dock-toolbar button{
 border:1px solid #e2eee545;border-radius:7px;padding:6px 10px;min-height:30px;
 background:rgba(9,35,38,.32);color:#f9f7ec;
}
#dock-drag{touch-action:none;cursor:grab;letter-spacing:.02em}
#dock-drag:active{cursor:grabbing}
#dock-drag span{color:#efc79d;margin-right:6px}
.dock-toolbar button:hover,.dock-settings button:hover{background:rgba(201,127,77,.44)}
.dock-active-label{margin-left:auto;color:#d3e8e1;font:9px/1.3 'Courier New',monospace;letter-spacing:.04em}
.dock-settings{
 display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;
 background:rgba(6,25,30,.56);border:1px solid #def3e135;border-radius:9px;
 padding:8px 10px;margin:5px 0 9px;
 font:11px Arial,sans-serif;color:#f0f7ef;
}
#dock-settings[hidden]{display:none}
.dock-settings select,.dock-settings button{
 border:1px solid #e0f1e15a;background:#0f3035;color:#fff;
 border-radius:6px;padding:6px 9px;min-height:36px;font:inherit;
}
.dock-settings select{max-width:130px}
.dock-settings input[type=range]{width:110px;min-width:70px;accent-color:#db9a68}
.dock-settings output{min-width:36px;font:11px 'Courier New',monospace}
.dock-settings label{font-weight:600}
.journey-controls .control-heading{margin-bottom:5px;color:#dceae3}
.journey-controls .control-heading>span:first-child{color:#edc9a9}
body:not([data-hero=true]) #experience footer.journey-controls .stage,
body:not([data-hero=true]) #experience footer.journey-controls .transport button{color:#f9fcf8}
body:not([data-hero=true]) #experience footer.journey-controls .stage .number{
 border-color:#deeee352;background:rgba(17,52,56,.44);color:#f5f8f1;
}
body:not([data-hero=true]) #experience footer.journey-controls .stage[aria-current=step] .number{
 background:#bd7048;color:#fff;border-color:#e8b48c;box-shadow:0 0 0 4px #c77c4c30;
}
body:not([data-hero=true]) #experience footer.journey-controls .stage[aria-current=step] .label{color:#fbe0c7}
body:not([data-hero=true]) #experience footer.journey-controls .transport{margin-top:4px}
body:not([data-hero=true]) #experience footer.journey-controls .transport button{border-color:#deeee353;background:rgba(15,48,51,.35);border-radius:7px}
body:not([data-hero=true]) #experience footer.journey-controls .transport>span,
body:not([data-hero=true]) #experience footer.journey-controls .transport label{color:#dbe8e0}
body:not([data-hero=true]) #experience footer.journey-controls input[type=range]{accent-color:#de9260}
body:not([data-hero=true]) #experience footer.journey-controls[data-compact=true] #stages{
 display:flex;overflow-x:auto;scrollbar-width:thin;scroll-padding:10px;gap:5px;
}
body:not([data-hero=true]) #experience footer.journey-controls[data-compact=true] .stage{flex:0 0 42px;justify-content:center}
body:not([data-hero=true]) #experience footer.journey-controls[data-compact=true] .stage .label{display:none}
body:not([data-hero=true]) #experience footer.journey-controls[data-compact=true] .transport>span{display:none}
/* Spatial EXIM proof storyboard: lightweight SVG, not additional WebGL. */
.chain-panel{
 position:absolute;z-index:4;right:5.5%;top:24%;width:305px;max-width:34%;
 color:#edf5ed;background:rgba(11,43,48,.20);
 backdrop-filter:blur(12px) saturate(110%);-webkit-backdrop-filter:blur(12px) saturate(110%);
 border:1px solid #dbefe45c;border-radius:17px;
 box-shadow:inset 0 1px #ffffff30,0 22px 70px #0e32382e;
 overflow:hidden;transition:background-color .2s;
}
.chain-panel:hover{background:rgba(11,43,48,.36)}
#chain-toggle{
 display:flex;align-items:center;width:100%;gap:10px;text-align:left;
 background:transparent;color:inherit;padding:13px 15px;min-height:48px;
 font:700 10px/1.25 Arial,sans-serif;letter-spacing:.10em;
}
#chain-toggle small{display:block;font:400 10px/1.4 Arial,sans-serif;letter-spacing:0;color:#d9e9dc;margin-top:2px}
.chain-signal{width:8px;height:8px;border-radius:50%;background:#90d7b7;box-shadow:0 0 0 4px #90d7b720;flex:none}
.chain-chevron{margin-left:auto;font-size:20px;transition:transform .2s}
#chain-toggle[aria-expanded=false] .chain-chevron{transform:rotate(-90deg)}
#chain-content{padding:0 15px 14px}
#chain-content[hidden]{display:none}
.chain-heading{font:600 14px/1.25 Arial,sans-serif;letter-spacing:-.01em;margin:2px 0 7px;color:#fff9eb}
.chain-linkage{width:100%;height:auto;display:block;overflow:visible}
.chain-path{fill:none;stroke:#adc7bc70;stroke-width:2}
.chain-pulse-path{fill:none;stroke:#e8b178;stroke-width:3;stroke-dasharray:12 248;stroke-linecap:round;animation:proof-flow 4s linear infinite}
@keyframes proof-flow{to{stroke-dashoffset:-260}}
.chain-blocks rect{fill:rgba(17,66,66,.68);stroke:#bde7ce8a;stroke-width:1.2}
.chain-blocks rect.chain-visited{fill:#3a7976;stroke:#f1c391;stroke-width:1.8}
.chain-nums{text-anchor:middle;fill:#eef3e7;font:700 17px/1 'Courier New',monospace;letter-spacing:-.07em}
.chain-events{margin:-3px 0 13px;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:3px;list-style:none;font:8px/1.2 Arial,sans-serif;text-align:center;color:#d4e7d9}
.chain-current{border-left:2px solid #dd9b69;padding-left:10px;margin:0 0 10px}
.chain-current>span{font:700 8px/1.3 'Courier New',monospace;letter-spacing:.12em;color:#daaf88}
.chain-current strong{display:block;font:600 12px/1.35 Arial,sans-serif;color:#fff;margin-top:3px}
.chain-current p{font:11px/1.45 Arial,sans-serif;margin:5px 0 0;color:#dbe9e0}
.chain-disclosure{display:block;border-top:1px solid #d5e7d030;padding-top:9px;color:#d8e6de;font:9px/1.45 Arial,sans-serif}
body[data-hero=true] .chain-panel{top:21%}
body[data-hero=true] .chain-panel .chain-heading{font-size:13px}
body[data-scene-tone=light] .chain-panel{background:rgba(15,51,57,.45)}
/* Never let an overlay take over the scene at narrow sizes. */
@media(max-width:1100px){.chain-panel{right:3.5%;width:250px;max-width:32%;top:29%}}
@media(max-width:900px){
 .chain-panel{right:5%;top:80px;width:min(70vw,270px);max-width:none;background:rgba(9,32,37,.4);backdrop-filter:blur(8px)}
 .chain-panel #chain-content{max-height:min(36dvh,250px);overflow-y:auto;overscroll-behavior:contain}
 body[data-hero=true] .chain-panel{top:83px}
 body:not([data-hero=true]) #experience footer.journey-controls{
  position:relative;grid-row:3;left:auto;right:auto;top:auto;bottom:auto;
  margin:0 3% max(8px,env(safe-area-inset-bottom,0px));width:94%;
  padding:6px 9px 8px;border-radius:13px;backdrop-filter:blur(9px);
 }
 body:not([data-hero=true]) #experience footer.journey-controls[data-floating=true]{
  position:fixed;inset:0 auto auto 0;grid-row:auto;margin:0;
  width:min(94vw,600px);max-width:calc(100vw - 12px);
 }
 .dock-toolbar{margin-bottom:3px;gap:5px}.dock-toolbar button{min-height:30px;padding:5px 9px}
 .dock-active-label{font-size:8px}
 .journey-controls .control-heading{margin:2px 0}
 body:not([data-hero=true]) #experience footer.journey-controls #stages{display:flex;gap:3px;overflow-x:auto}
 body:not([data-hero=true]) #experience footer.journey-controls .stage{flex:0 0 44px;min-height:44px;justify-content:center}
 body:not([data-hero=true]) #experience footer.journey-controls .stage .label{display:none}
 body:not([data-hero=true]) #experience footer.journey-controls .transport{margin-top:1px}
 body:not([data-hero=true]) #experience footer.journey-controls .transport button{min-height:38px}
 .dock-settings{font-size:10px;padding:7px;margin:3px 0 5px}
}
@media(max-width:600px){
 header .preview-tag{display:none}
 .chain-panel{right:5%;top:72px;width:min(72vw,258px);border-radius:12px}
 #chain-toggle{padding:6px 11px;min-height:44px;font-size:9px}
 .chain-heading{font-size:12px}
 #chain-content{padding:0 11px 11px}
 .chain-events{font-size:7px}
 body #experience #journey-panel .record,
 body #experience #journey-panel .record:has(details[open]){
  background:rgba(11,37,40,.22);border-color:#d4e7d559;
  backdrop-filter:blur(6px);
 }
 body #experience #journey-panel .record-body{background:rgba(9,32,34,.45)}
 body[data-hero=false] #experience #journey-panel{
  max-height:min(36dvh,18rem);
  background:linear-gradient(180deg,transparent,#09272c45 13%,#08262bcc);
 }
 .dock-active-label{display:none}
}
@media(max-width:900px) and (orientation:landscape){
 .chain-panel{top:70px;right:3%;width:210px;max-width:25vw}
 .chain-panel #chain-content{max-height:42dvh}
 body[data-hero=false] #experience #journey-panel{width:min(44vw,23rem)}
}
@media(prefers-reduced-motion:reduce){.chain-pulse-path{animation:none;stroke-dasharray:none;opacity:.65}.chain-chevron{transition:none}}
@media(forced-colors:active){
 .journey-controls,.chain-panel{border:2px solid CanvasText!important;background:Canvas!important;color:CanvasText!important;backdrop-filter:none!important}
 .dock-toolbar button,.dock-settings button{border:1px solid ButtonText}
}

/* R12A Founder screenshot correction (26 Oct 2026): REMOVE the two
   red-marked overlay layouts, including their content, in the freight view.
   Keep their DOM, source logic and data intact for an easy rollback;
   the actual 3D, chapter/actions, Incoterms and EXIM chain are untouched. */
body:not([data-hero="true"]) #experience #journey-panel .record,
body:not([data-hero="true"]) #experience #journey-panel .record:has(details[open]){
 display:none!important;
}

/* R12B: remove the highlighted footer/backplate, NOT the nine stage controls.
   A very thin cargo-custody thread joins individually sculpted metal markers;
   the industrial scene remains visible through every gap.  The existing
   keyboard, click, scroll, drag, position presets and saved settings survive. */
body #experience footer#journey-dock{
 display:block!important;
 background:transparent!important;
 background-image:none!important;
 border:0!important;
 border-radius:0!important;
 box-shadow:none!important;
 backdrop-filter:none!important;
 -webkit-backdrop-filter:none!important;
 isolation:isolate;
}
body #experience footer#journey-dock::before,
body #experience footer#journey-dock::after{display:none!important}
body #experience footer#journey-dock .dock-toolbar,
body #experience footer#journey-dock .control-heading,
body #experience footer#journey-dock .transport{
 color:#fff9ee;
 text-shadow:0 1px 3px #04161be8,0 2px 10px #04161bcc;
}
body #experience footer#journey-dock .dock-toolbar button{
 background:transparent!important;
 border:0!important;
 border-radius:2px;
 box-shadow:none!important;
 padding:5px 8px;
 color:#f7f4e9;
 text-shadow:0 2px 5px #05141df5;
 transition:color .18s ease,transform .18s ease;
}
body #experience footer#journey-dock .dock-toolbar button:hover{
 color:#ffd1a5;transform:translateY(-1px);
}
body #experience footer#journey-dock .dock-toolbar button:focus-visible,
body #experience footer#journey-dock .stage:focus-visible,
body #experience footer#journey-dock .transport button:focus-visible{
 outline:2px solid #f5ba83;outline-offset:3px;
}
body #experience footer#journey-dock .dock-active-label,
body #experience footer#journey-dock .control-heading>span,
body #experience footer#journey-dock .transport>span,
body #experience footer#journey-dock .transport label{
 color:#f4f0e6;
 text-shadow:0 1px 3px #06171cf2,0 2px 8px #06171ce0;
}
body #experience footer#journey-dock .control-heading>span:first-child{
 color:#f4cba8;
}
body #experience footer#journey-dock #stages{
 position:relative;
 background:transparent!important;
 border:0!important;
 box-shadow:none!important;
 overflow:visible;
 isolation:isolate;
}
body #experience footer#journey-dock #stages::before,
body #experience footer#journey-dock #stages::after{
 content:"";
 display:block!important;
 position:absolute;
 top:24px;
 height:1px;
 pointer-events:none;
 z-index:0;
 border:0;
 box-shadow:none;
}
body #experience footer#journey-dock #stages::before{
 left:4%;right:4%;width:auto;
 background:linear-gradient(90deg,transparent,#d9ebe1b0 7%,#c5d8cfb0 93%,transparent);
}
body #experience footer#journey-dock #stages::after{
 left:4%;right:auto;
 width:calc(92% * var(--progress,0));
 background:linear-gradient(90deg,#dc9467,#f3d1a0);
}
body #experience footer#journey-dock .stage{
 position:relative;z-index:1;
 display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
 gap:6px;min-width:0;min-height:54px;padding:3px 1px 4px;
 background:transparent!important;
 border:0!important;
 color:#f3f3ed;
 text-align:center;
 transition:transform .2s ease,color .2s ease;
}
body #experience footer#journey-dock .stage .number{
 position:relative;isolation:isolate;
 display:grid;place-items:center;
 flex:0 0 42px;width:42px;height:42px;
 border:1px solid #bfcac5e6;
 border-radius:50%;
 background:radial-gradient(circle at 30% 19%,#c9dad1ac 0%,#6f8684a6 17%,
   #30454ce8 48%,rgba(10,27,33,var(--dock-alpha,.20)) 83%,#091b22fa 100%)!important;
 color:#fffdf7!important;
 box-shadow:0 5px 10px #03121cc2,inset 0 2px 2px #f5faf0af,
   inset 0 -3px 4px #010d13c9,0 0 0 1px #102b31ad;
 font:700 12px/1 'Courier New',monospace;
 letter-spacing:-.02em;
 text-shadow:0 1px 2px #020c12f5;
 transform:perspective(220px) rotateX(9deg);
 transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
body #experience footer#journey-dock .stage .number::after{
 content:"";position:absolute;top:4px;left:20%;width:60%;height:24%;
 border-top:1px solid #f8fffbb3;border-radius:50%;
 opacity:.86;pointer-events:none;
}
body #experience footer#journey-dock .stage .label{
 display:block;max-width:100%;
 color:#fbfaf3;font:600 10px/1.2 Arial,sans-serif;
 letter-spacing:.01em;text-align:center;
 text-shadow:0 1px 3px #03161df7,0 2px 8px #03161ded;
}
body #experience footer#journey-dock .stage:hover .number,
body #experience footer#journey-dock .stage:focus-visible .number{
 transform:translateY(-3px) perspective(220px) rotateX(0deg);
 border-color:#ffd5a6;
 box-shadow:0 8px 13px #03121cdf,inset 0 2px 2px #fff9ddc2,
   inset 0 -3px 4px #020d15ad,0 0 0 1px #df995d;
}
body #experience footer#journey-dock .stage[aria-current=step] .number{
 border-color:#f7c18c;
 background:radial-gradient(circle at 28% 18%,#ffdfac 0%,#ca8653 20%,
   #744c38 58%,#182930 100%)!important;
 color:#fffaf1!important;
 box-shadow:0 6px 12px #041620dc,inset 0 2px 2px #fff2d3b5,
   inset 0 -3px 4px #261309c9,0 0 0 2px #f0b077;
}
body #experience footer#journey-dock .stage[aria-current=step] .label{
 color:#ffe0ba;
}
body #experience footer#journey-dock .transport button{
 background:radial-gradient(circle at 30% 20%,#789390a8,#102a30d9 78%)!important;
 border:1px solid #d0ddd7a8!important;
 border-radius:50%!important;
 box-shadow:0 3px 7px #071820a8,inset 0 1px 1px #faffff80;
 color:#fff!important;
 min-height:36px;min-width:36px;width:36px;
}
body #experience footer#journey-dock .transport button:hover:not(:disabled){
 border-color:#f9c796!important;transform:translateY(-1px);
}
@media(max-width:900px){
 body #experience footer#journey-dock #stages{
  display:grid!important;
  grid-template-columns:repeat(9,minmax(0,1fr));
  gap:0!important;overflow:visible!important;
  width:100%;height:auto;padding:0;
 }
 body #experience footer#journey-dock .stage{
  flex:none;min-height:48px;width:auto;padding:3px 0;justify-content:flex-start;
 }
 body #experience footer#journey-dock .stage .number{
  flex-basis:36px;width:36px;height:36px;font-size:10px;
 }
 body #experience footer#journey-dock .stage .label{display:none}
 body #experience footer#journey-dock #stages::before,
 body #experience footer#journey-dock #stages::after{top:21px}
 body #experience footer#journey-dock .dock-toolbar{gap:5px;margin-bottom:1px}
 body #experience footer#journey-dock .control-heading{margin-bottom:1px}
}
@media(max-width:380px){
 body #experience footer#journey-dock .stage .number{
  flex-basis:30px;width:30px;height:30px;font-size:9px;
 }
 body #experience footer#journey-dock #stages::before,
 body #experience footer#journey-dock #stages::after{top:18px}
}
@media(prefers-reduced-motion:reduce){
 body #experience footer#journey-dock .stage,
 body #experience footer#journey-dock .stage .number,
 body #experience footer#journey-dock .dock-toolbar button{transition:none}
}
@media(forced-colors:active){
 body #experience footer#journey-dock .stage .number,
 body #experience footer#journey-dock .stage[aria-current=step] .number{
  color:ButtonText!important;background:ButtonFace!important;
  border:2px solid ButtonText!important;box-shadow:none!important;
 }
 body #experience footer#journey-dock .stage[aria-current=step]{outline:2px solid Highlight}
}

/* R12C visual acceptance correction: on compact portrait screens, keep the
   Incoterms trigger and the collapsed EXIM-trail label in separate hit areas.
   R12B 360px screenshots exposed a text occlusion missed by box-only tests. */
@media(max-width:400px){
 .chain-panel{left:calc(5% + 128px);right:5%;width:auto;max-width:none}
 #chain-toggle{gap:6px;padding:6px 8px;font-size:8px;letter-spacing:.045em}
 #chain-toggle small{font-size:9px}
 .chain-chevron{font-size:16px}
}
@media(max-width:340px){
 .chain-panel{top:124px;left:5%;right:5%;width:auto}
}