/* /shipping-journey – factory → Cat Lai → Thai port simulation (journey.js) and the sections around it */

/* ---------- simulation ---------- */
.jr-sim .shead{max-width:860px}
.jm{--k:1;position:relative}

/* controls */
.jm__ctl{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:flex-end;justify-content:space-between;margin-bottom:16px}
.jm__group{display:flex;flex-direction:column;gap:8px;min-width:0}
.jm__lbl{display:inline-flex;align-items:center;gap:7px;font:600 .74rem/1 var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-l)}
.jm__lbl svg{width:15px;height:15px}
.jm__tabs{display:flex;flex-wrap:wrap;gap:8px}
.jm__tab{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:9px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);color:#fff;cursor:pointer;text-align:left;transition:background .25s,border-color .25s,transform .25s var(--ease)}
.jm__tab b{font:600 1rem/1.1 var(--f-head);letter-spacing:.02em}
.jm__tab small{font-size:.76rem;color:#A9C7EE;line-height:1.2}
.jm__tab:hover{background:rgba(255,255,255,.1);transform:translateY(-2px)}
.jm__tab.is-on{background:var(--red);border-color:var(--red);box-shadow:0 12px 26px -12px rgba(196,29,48,.9)}
.jm__tab.is-on small{color:#FFE1E5}
.jm__seg{display:inline-flex;flex-wrap:wrap;padding:4px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14)}
.jm__seg button{padding:9px 13px;border:0;border-radius:9px;background:none;color:#DCE6F2;font:700 .95rem/1 var(--f-head);letter-spacing:.06em;cursor:pointer;transition:background .25s,color .25s}
.jm__seg button:hover{color:#fff;background:rgba(255,255,255,.08)}
.jm__seg button.is-on{background:var(--gold);color:#00172F}

/* stage */
.jm__stage{position:relative;aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden;background:#001326;box-shadow:0 40px 80px -30px rgba(0,0,0,.7),inset 0 0 0 1px rgba(255,255,255,.08)}
.jm__stage::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 120px 24px rgba(0,10,25,.6)}
.jm-svg{position:absolute;inset:0;width:100%;height:100%;display:block;font-family:var(--f-body)}
.jm__night{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 70% 30%,rgba(0,8,24,.55),rgba(0,4,14,.85));opacity:0}

.jm-coastglow path{fill:#3D8BD8;opacity:.28}
.jm-land path{stroke:#7FA6D6;stroke-opacity:.7;stroke-width:1;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.jm-land .jm-land--th{fill:url(#jm-land-th);stroke:#E7C46A;stroke-opacity:.75}
.jm-land .jm-land--thx{stroke:none}
.jm-land .jm-land--vn,.jm-land .jm-land--kh,.jm-land .jm-land--la,.jm-land .jm-land--my,.jm-land .jm-land--mm,.jm-land .jm-land--other{fill:url(#jm-land)}
.jm-land .jm-land--vn{fill:#22507F}
.jm-rivers{fill:none;stroke:#3D8BD8;stroke-opacity:.55;stroke-width:1.2;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.jm-rivers--sg{stroke-width:2.2}

.jm-place{font:700 calc(15px * var(--k))/1 var(--f-head);letter-spacing:.3em;fill:#A9C7EE;fill-opacity:.38}
.jm-place--th{fill:#E7C46A;fill-opacity:.55;font-size:calc(19px * var(--k))}
.jm-place--sea{font-style:italic;font-weight:600;letter-spacing:.38em;fill:#7FC4FF;fill-opacity:.42}
.jm-city circle{fill:#A9C7EE;fill-opacity:.7;r:calc(2.2px * var(--k))}
.jm-city text{font:500 calc(11.5px * var(--k))/1 var(--f-body);fill:#C8D8EA;fill-opacity:.62;paint-order:stroke;stroke:#03203F;stroke-width:calc(3px * var(--k));stroke-linejoin:round}

.jm-lanes path{fill:none;stroke:#7FC4FF;stroke-opacity:.16;stroke-width:1.2;vector-effect:non-scaling-stroke;stroke-dasharray:4 7;animation:jm-march 3s linear infinite}
@keyframes jm-march{to{stroke-dashoffset:-44}}

/* legs: base track, the drawn progress (coloured by who arranges it under the chosen Incoterm) */
.jm-leg{fill:none;stroke-linecap:round;stroke-linejoin:round}
.jm-leg--base{stroke:#fff;stroke-opacity:.14;stroke-width:calc(5px * var(--k))}
.jm-leg--draw{stroke-width:calc(4.2px * var(--k));stroke-dasharray:1000;stroke-dashoffset:1000;transition:stroke .5s}
.jm-leg--draw.is-s{stroke:#FF5468;filter:drop-shadow(0 0 calc(5px * var(--k)) rgba(255,84,104,.75))}
.jm-leg--draw.is-b{stroke:#9CC0EA;stroke-opacity:.9}
.jm-leg--draw.is-tbc{stroke-dasharray:6 6}
.jm-route{display:none}
.jm-route.is-on{display:inline}
.jm-fglow{opacity:.9}

/* pins (screen-size; journey.js scales them by the camera zoom) */
.jm-pin__dot{fill:var(--navy);stroke:var(--gold-l);stroke-width:2.5}
.jm-pin__ic{color:#fff;stroke:#fff;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.jm-pin--factory .jm-pin__dot{fill:var(--red);stroke:#fff}
.jm-pin--catlai .jm-pin__dot{fill:#0B4C8C;stroke:#7FC4FF}
.jm-pin--other{opacity:.5}
.jm-pin--other .jm-pin__dot{stroke:#7FA6D6;stroke-width:2}
.jm-pin--port{opacity:.55;transition:opacity .4s}
.jm-pin--port.is-dest{opacity:1}
.jm-pin--port.is-dest .jm-pin__dot{fill:var(--red);stroke:#fff}
.jm-pin__ring{fill:none;stroke:var(--gold-l);stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center}
.jm-pin--factory .jm-pin__ring,.jm-pin--port .jm-pin__ring{stroke:#FF5468}
.jm-pin.is-on .jm-pin__ring{animation:jm-ring 2.4s ease-out infinite}
.jm-pin.is-on .jm-pin__ring--2{animation-delay:1.2s}
@keyframes jm-ring{0%{opacity:.9;transform:scale(.6)}100%{opacity:0;transform:scale(2.4)}}
.jm-pin__t{font:700 17px/1 var(--f-head);fill:#fff;letter-spacing:.02em;paint-order:stroke;stroke:#00172F;stroke-width:4px;stroke-linejoin:round}
.jm-pin__s{font:600 12px/1 var(--f-body);fill:var(--gold-l);paint-order:stroke;stroke:#00172F;stroke-width:4px;stroke-linejoin:round}
.jm-pin--other .jm-pin__t{font-size:14px}
.jm-pin--port:not(.is-dest) .jm-pin__lbl,.jm-pin--other .jm-pin__lbl{display:none}
.jm-pin.is-pop .jm-pin__dot{animation:jm-pop .7s var(--ease)}
.jm-pin__dot,.jm-pin__ic{transform-box:fill-box;transform-origin:center}
@keyframes jm-pop{0%{transform:scale(1)}40%{transform:scale(1.7)}100%{transform:scale(1)}}

/* risk marker */
.jm-risk{transition:opacity .4s}
.jm-risk__in{animation:jm-bob 2.2s ease-in-out infinite}
.jm-risk__in path{fill:var(--gold);stroke:#00172F;stroke-width:2;stroke-linejoin:round}
.jm-risk__in .jm-risk__chk{fill:none;stroke:#00172F;stroke-width:2.6;stroke-linecap:round}
@keyframes jm-bob{50%{transform:translateY(-4px)}}

/* vehicles */
.jm-truck,.jm-ship{opacity:0;transition:opacity .4s}
.jm[data-stage="1"] .jm-truck,.jm[data-stage="5"] .jm-truck{opacity:1}
.jm[data-stage="2"] .jm-ship,.jm[data-stage="3"] .jm-ship,.jm[data-stage="4"] .jm-ship{opacity:1}
.jm-halo{fill:url(#jm-redglow);opacity:.9}
.jm-truck__box{fill:var(--red);stroke:#fff;stroke-width:.8}
.jm-truck__cab{fill:#fff}
.jm-truck__beam{stroke:#FFE7A3;stroke-width:1.4;stroke-linecap:round;opacity:.8}
.jm-ship__hull{fill:#0A2A4F;stroke:#fff;stroke-width:1}
.jm-ship__wake{fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;opacity:.0;transition:opacity .4s}
.jm[data-stage="3"] .jm-ship__wake{opacity:.55;animation:jm-wake 1s ease-in-out infinite}
@keyframes jm-wake{50%{opacity:.25}}

/* HUD */
.jm__hud{position:absolute;left:18px;bottom:18px;z-index:2;min-width:230px;max-width:min(340px,calc(100% - 36px));padding:14px 18px;border-radius:16px;background:rgba(0,23,47,.74);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.12);color:#fff}
.jm__leg{display:block;font:600 .72rem/1.3 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-l)}
.jm__clock{display:flex;align-items:baseline;gap:8px;margin:6px 0 8px}
.jm__clock b{font:700 3.1rem/1 var(--f-head);font-variant-numeric:tabular-nums;color:#fff;white-space:nowrap}
.jm__clock.is-text b{font-size:1.9rem;white-space:normal;line-height:1.1}
.jm__clock small{font:600 1rem var(--f-head);color:#B7C3D3;text-transform:uppercase;letter-spacing:.08em}
.jm__sun{align-self:center;margin-left:auto;width:22px;height:22px;border-radius:50%;background:#FFD266;box-shadow:0 0 14px 3px rgba(255,210,102,.6);opacity:0;transition:opacity .4s,background .6s,box-shadow .6s}
.jm[data-stage="3"] .jm__sun{opacity:1}
.jm__sun.is-moon{background:#DCE6F2;box-shadow:inset -6px -3px 0 0 #8FA6C2,0 0 10px 2px rgba(220,230,242,.35)}
.jm__bar{height:4px;border-radius:4px;background:rgba(255,255,255,.12);overflow:hidden}
.jm__bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),#FF5468);border-radius:inherit}
.jm__total{display:block;margin-top:8px;font-size:.84rem;color:#B7C3D3;line-height:1.35}
.jm__total b{color:#fff}

.jm__card{position:absolute;right:18px;top:18px;z-index:2;max-width:300px;padding:12px 16px;border-radius:14px;background:rgba(0,23,47,.74);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(231,196,106,.35);color:#fff;display:flex;flex-direction:column;gap:4px}
.jm__card-k{font:600 .66rem/1 var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:#A9C7EE}
.jm__card b{font:700 1.08rem/1.2 var(--f-head);letter-spacing:.02em}
.jm__card-r{display:flex;gap:6px;align-items:flex-start;font-size:.82rem;color:#DCE6F2;line-height:1.35}
.jm__card-r svg{flex:0 0 16px;width:16px;height:16px;color:var(--gold-l);margin-top:1px}
.jm__compass{position:absolute;left:18px;top:18px;z-index:2;width:48px;height:48px;opacity:.75}
.jm__compass svg{width:100%;height:100%;overflow:visible}
.jm__compass circle{fill:rgba(0,23,47,.6);stroke:rgba(231,196,106,.6);stroke-width:1}
.jm__compass path{fill:#7FA6D6}
.jm__compass path.n{fill:var(--gold-l)}
.jm__compass text{font:700 8px var(--f-head);fill:var(--gold-l);text-anchor:middle}
.jm__toast{position:absolute;left:50%;top:22px;z-index:3;transform:translate(-50%,-10px);opacity:0;padding:10px 18px;border-radius:999px;background:var(--red);color:#fff;font:600 .95rem/1.2 var(--f-body);box-shadow:0 12px 30px -10px rgba(196,29,48,.9);transition:opacity .4s,transform .4s var(--ease);white-space:nowrap;max-width:calc(100% - 140px);overflow:hidden;text-overflow:ellipsis}
.jm__toast.is-on{opacity:1;transform:translate(-50%,0)}
.jm__replay{position:absolute;right:18px;bottom:18px;z-index:2;display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.35);background:rgba(0,23,47,.6);color:#fff;font:600 .9rem var(--f-body);cursor:pointer;opacity:0;pointer-events:none;transition:opacity .4s,background .3s}
.jm__replay svg{width:16px;height:16px}
.jm.is-done .jm__replay{opacity:1;pointer-events:auto}
.jm__replay:hover{background:#fff;color:var(--navy)}

/* legs strip */
.jm__legs{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.jm__lg{position:relative}
.jm__lg button{width:100%;height:100%;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;gap:6px 10px;align-items:center;text-align:left;padding:12px;border-radius:14px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:#fff;cursor:pointer;transition:background .3s,border-color .3s,transform .3s var(--ease)}
.jm__lg button:hover{background:rgba(255,255,255,.09);transform:translateY(-2px)}
.jm__lg.is-on button{border-color:var(--gold-l);background:rgba(204,153,43,.16)}
.jm__lg-ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--navy-2);color:var(--gold-l)}
.jm__lg-ic svg{width:18px;height:18px}
.jm__lg-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.jm__lg-t b{font:600 .98rem/1.15 var(--f-head);letter-spacing:.01em}
.jm__lg-t small{font-size:.78rem;color:#A9C7EE;line-height:1.25}
.jm__who{grid-column:1/-1;justify-self:start;padding:4px 10px;border-radius:999px;font:700 .72rem/1 var(--f-body);letter-spacing:.08em;text-transform:uppercase;background:rgba(156,192,234,.16);color:#CFE0F4}
.jm__lg.is-s .jm__who{background:var(--red);color:#fff}
.jm__lg.is-p .jm__who{background:linear-gradient(90deg,var(--red) 50%,rgba(156,192,234,.3) 50%);color:#fff}
.jm__lg.is-s button{border-color:rgba(255,84,104,.45)}
.jm__rk{position:absolute;right:-13px;top:50%;z-index:2;width:26px;height:26px;margin-top:-13px;border-radius:50%;display:none;place-items:center;background:var(--gold);color:#00172F;box-shadow:0 0 0 3px rgba(0,23,47,.9),0 0 16px rgba(231,196,106,.7)}
.jm__rk svg{width:15px;height:15px}
.jm__lg.has-risk .jm__rk{display:grid}
.jm__lg:last-child .jm__rk{right:10px;top:12px;margin-top:0}
.jm__lg.has-risk-start .jm__rk{display:grid;right:auto;left:-13px}

.jm__more{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;justify-content:space-between;margin-top:18px}
.jm__lines{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;color:#DCE6F2;font-size:.92rem}
.jm__lines>svg{width:18px;height:18px;color:var(--gold-l)}
.jm__lines em{color:#A9C7EE}
.jm__chips{display:inline-flex;flex-wrap:wrap;gap:6px}
.jm__chips[hidden],.jm__links a[hidden]{display:none}
.jr-sim .ln-chip{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:#fff}
.jr-sim .ln-chip:hover{background:var(--red);border-color:var(--red)}
.jm__links{display:flex;flex-wrap:wrap;gap:8px 20px;margin:0}
.jm__links a{display:inline-flex;align-items:center;gap:6px;color:var(--gold-l);font-weight:600;font-size:.94rem}
.jm__links a svg{width:16px;height:16px;transition:transform .25s}
.jm__links a:hover svg{transform:translateX(3px)}
.jm__note{display:flex;gap:8px;align-items:flex-start;margin:22px 0 0;font-size:.84rem;color:#9FB2C8;line-height:1.5}
.jm__note svg{flex:0 0 16px;width:16px;height:16px;margin-top:2px;color:var(--gold-l)}
.jm__nojs{margin-top:16px;color:#fff;font-weight:600}

/* ---------- stages ---------- */
.jr-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;counter-reset:s}
.jr-step{position:relative;display:flex;flex-direction:column;gap:10px;padding:26px 24px 24px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh);overflow:hidden;transition:transform .4s var(--ease),box-shadow .4s}
.jr-step:hover{transform:translateY(-5px);box-shadow:var(--sh-lg)}
.jr-step::before{content:"";position:absolute;left:0;top:0;right:0;height:3px;background:linear-gradient(90deg,var(--red),var(--gold))}
.jr-step__n{position:absolute;right:18px;top:12px;font:800 2.6rem/1 var(--f-head);color:var(--navy);opacity:.08}
.jr-step__ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--navy);color:var(--gold-l)}
.jr-step__ic svg{width:24px;height:24px}
.jr-step h3{margin:4px 0 0;font:600 1.3rem/1.2 var(--f-head);color:var(--navy)}
.jr-step p{margin:0}
.jr-step .more{margin-top:auto}

/* ---------- route cards ---------- */
.jr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.jr-card{display:flex;flex-direction:column;gap:14px;padding:22px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh)}
.jr-card__top{display:flex;gap:12px;align-items:center}
.jr-card__ic{flex:0 0 44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--red);color:#fff}
.jr-card__ic svg{width:22px;height:22px}
.jr-card h3{margin:0;font:600 1.3rem/1.15 var(--f-head)}
.jr-card h3 a{color:var(--navy)}
.jr-card h3 a:hover{color:var(--red)}
.jr-card__top small{color:var(--mute);font-size:.86rem}
.jr-card__legs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.jr-card__legs li{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;padding:9px 12px;border-radius:10px;background:var(--tint);font-size:.92rem}
.jr-card__legs span{display:flex;gap:8px;align-items:center;color:var(--ink)}
.jr-card__legs span svg{flex:0 0 16px;width:16px;height:16px;color:var(--red)}
.jr-card__legs b{color:var(--navy);text-align:right;flex:0 1 auto;max-width:50%}
.jr-card__legs span{flex:1 1 auto;min-width:0}
.jr-card__legs b.jr-card__road{font-weight:600}
.jr-card__lines{display:flex;flex-wrap:wrap;gap:6px}
.jr-card .more{margin-top:auto}

/* ---------- Incoterm table ---------- */
.jr-tbl td{text-align:center;font-weight:600;font-size:.9rem}
.jr-tbl td.is-s,.jr-tbl td.is-f{color:var(--red)}
.jr-tbl td.is-b{color:var(--mute);font-weight:500}
.jr-tbl td.is-p{color:var(--navy)}
.jr-tbl th a{color:inherit}
.jr-tbl .hl{background:rgba(204,153,43,.12)}
.jr-tbl thead th.hl{background:var(--gold);color:#00172F}
.jr-tbl thead th.hl a{color:#00172F}
.jr-tbl__risk th{display:flex;gap:6px;align-items:center}
.jr-tbl__risk th svg{width:16px;height:16px;color:var(--gold)}
.jr-tbl__risk td{color:var(--navy)}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .jm__legs{grid-template-columns:repeat(3,minmax(0,1fr))}
  .jm__rk{display:none!important}
}
@media (max-width:900px){
  .jr-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .jm__stage{aspect-ratio:3/4}
  .jm__ctl{flex-direction:column;align-items:stretch}
  .jm__tab{padding:8px 11px}
  .jm__tab small{display:none}
  .jm__seg{display:grid;grid-template-columns:repeat(6,1fr)}
  .jm__seg button{padding:9px 4px;font-size:.88rem}
  .jm__hud{left:10px;right:10px;bottom:10px;min-width:0;max-width:none;padding:10px 14px}
  .jm__clock{margin:4px 0 6px}
  .jm__clock b{font-size:2rem}
  .jm__clock.is-text b{font-size:1.25rem}
  .jm__card{display:none}
  .jm-pin--port:not(.is-dest) .jm-pin__lbl,.jm-pin--other .jm-pin__lbl{display:none}
  .jm__total{display:none}
  .jm__bar{height:3px}
  .jm__compass{display:none}
  .jm__toast{top:auto;bottom:96px;max-width:calc(100% - 20px);font-size:.84rem;padding:8px 14px;white-space:normal;text-align:center}
  .jm__replay{right:10px;top:10px;bottom:auto;padding:7px 12px}
  .jm__legs{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .jm__lg:last-child{grid-column:1/-1}
  .jm__lg button{padding:10px}
  .jm__lg-ic{width:32px;height:32px}
  .jm__more{flex-direction:column;align-items:flex-start}
  .jr-steps{grid-template-columns:1fr}
  .jr-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .jm-pin.is-on .jm-pin__ring,.jm-risk__in,.jm[data-stage="3"] .jm-ship__wake{animation:none}
}