/* =====================================================================
   LINTAS — sea-freight.html only. Shared components live in site.css;
   this file holds page-unique pieces: the framed sea-lane map, the FCL/LCL
   re-pack figure, the isometric container guide, LCL fill bars, the
   sailing schedule + next cut-off chip, transit bars, Incoterms strips.
   Motion: transform / opacity only (plus colour on state changes).
   ===================================================================== */

/* ── Hero: framed sea-lane map ───────────────────────────────────────── */
.sf-hero .phero-grid { align-items: center; }
.sf-fig { position: relative; display: grid; gap: 12px; padding: 14px 16px 12px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); }
.sf-fig::before, .sf-fig::after { content: ""; position: absolute; width: 14px; height: 14px; border: 0 solid var(--steel); opacity: .55; pointer-events: none; }
.sf-fig::before { left: 7px; top: 7px; border-left-width: 1.5px; border-top-width: 1.5px; }
.sf-fig::after { right: 7px; bottom: 7px; border-right-width: 1.5px; border-bottom-width: 1.5px; }
.sf-fig-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 16px; padding: 0 4px; }
.sf-map { margin: 0 -6px; }
.sf-map svg { border-radius: 4px; }
.rmap.sf-map { --mv: .8; }
.rmap.sf-map .rmap-node text { font-size: 13px; stroke: var(--card); stroke-width: 4px; }
.rmap.sf-map .rmap-node .rmap-sub { font-size: 10.5px; }
.rmap.sf-map .rmap-node.is-hub .rmap-ring { stroke-width: 1.2; }
.rmap.sf-map .rmap-node circle { stroke-width: 2; }
.rmap.sf-map .sf-edge circle { stroke-width: 1.6; }
.rmap.sf-map .rmap-glabel { font-size: 10px; }
.sf-kpis { padding: 8px 4px 0; border-top: 1px dashed var(--line-2); gap: 4px 16px; font-size: 11.5px; }
@media (max-width: 991.98px) { .sf-hero .phero-grid { align-items: end; } }
@media (max-width: 767.98px) {
  .sf-fig { padding: 12px 12px 10px; }
  .sf-map { margin: 0 -4px; }
  .rmap.sf-map { --mv: .95; }
  .sf-map .rmap-dots circle { r: 1.15px; }
  .rmap.sf-map .rmap-node text { font-size: 19px; stroke-width: 5px; }
  .rmap.sf-map .rmap-lane { stroke-width: 3; }
  .rmap.sf-map .rmap-node circle { stroke-width: 2.4; }
}

/* ── FCL vs LCL: one container, re-packed by the toggle ──────────────── */
.ff { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 22px clamp(32px, 5vw, 72px); align-items: start; }
.ff-top { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; }
.ff-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font: 500 11.5px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--steel); }
.ff-legend span { display: inline-flex; align-items: center; gap: 8px; }
.ff-legend i { width: 12px; height: 12px; border-radius: 2px; background: var(--line-2); box-shadow: inset 0 0 0 1px var(--ink-2); }
.ff-legend i.is-mine { background: var(--signal); box-shadow: none; }
.ff-fig { margin: 0; padding: clamp(14px, 2vw, 24px); background: var(--card); border: 1px solid var(--line); border-radius: var(--r); }
.ff-fig svg { width: 100%; height: auto; overflow: visible; }
.ff-wall { fill: var(--paper-2); }
.ff-ribs { fill: none; stroke: var(--line-2); stroke-width: 1; opacity: .75; }
.ff-b { fill: var(--line-2); stroke: var(--ink-2); stroke-width: 1.2; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: 0 0; transition: transform .62s var(--ease-io), fill .3s ease, stroke .3s ease; transition-delay: calc(var(--k, 0) * 24ms); }
.ff-b[data-o="C"], .ff-b[data-o="E"], .ff-b[data-o="F"] { fill: var(--card); }
.ff-b.is-mine { fill: var(--signal); stroke: var(--signal-press); }
.ff-frame { fill: none; stroke: var(--ink); stroke-width: 2; }
.ff-floor, .ff-cast { fill: var(--ink); }
.ff-seal circle, .ff-seal path { fill: none; stroke: var(--signal); stroke-width: 1.8; }
.ff-seal circle { fill: var(--card); }
.ff-seal { transition: opacity .3s ease; }
.ff[data-mode="lcl"] .ff-seal { opacity: 0; }
.ff-cap { min-height: 3em; margin-top: 14px; font: 500 12px/1.55 var(--mono); letter-spacing: .02em; color: var(--steel); }
.ff-cap span { display: block; animation: tabin .26s var(--ease-out); }
.ff-panel { display: grid; gap: 16px; animation: tabin .3s var(--ease-out); }
.ff-panel h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); letter-spacing: -.025em; line-height: 1.15; }
.ff-panel > p { color: var(--ink-2); }
.ff-dl { display: grid; border-top: 1px solid var(--line); }
.ff-dl div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; padding: 11px 0; border-bottom: 1px dashed var(--line-2); font-size: 14.5px; line-height: 1.45; }
.ff-dl dt { font: 500 11px/1.7 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--steel); }
.ff-dl dd { font-weight: 600; }
.ff-panel .btn { justify-self: start; margin-top: 4px; }
@media (max-width: 899.98px) { .ff { grid-template-columns: minmax(0, 1fr); } }

/* ── Container guide: isometric box re-proportions by scale ──────────── */
.cg-pick { display: flex; gap: 8px; margin: -2px; padding: 2px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.cg-pick::-webkit-scrollbar { display: none; }
.cg-opt { position: relative; flex: 1 0 auto; cursor: pointer; scroll-snap-align: start; }
.cg-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cg-opt span { display: grid; gap: 5px; min-height: 58px; padding: 10px 14px; border: 1px solid var(--navy-line); border-radius: 4px; background: var(--navy-2); transition: background-color .2s ease, border-color .2s ease, scale .14s var(--ease-out); }
.cg-opt b { font: 600 15px/1 var(--mono); letter-spacing: .04em; color: var(--on-navy); }
.cg-opt small { font-size: 12.5px; line-height: 1.2; white-space: nowrap; color: var(--on-navy-2); transition: color .2s ease; }
.cg-opt input:checked + span { background: var(--signal); border-color: var(--signal); }
.cg-opt input:checked + span small { color: #e3e9ff; }
.cg-opt input:focus-visible + span { outline: 2px solid var(--signal-hi); outline-offset: 2px; }
.cg-opt:active span { scale: .97; }
@media (hover: hover) and (pointer: fine) { .cg-opt:hover input:not(:checked) + span { border-color: var(--on-navy-2); } }
.cg-body { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 24px clamp(28px, 4vw, 56px); align-items: center; margin-top: 22px; }
.cg-fig { position: relative; margin: 0; padding: 22px 18px 14px; border: 1px solid var(--navy-line); border-radius: var(--r); background: rgba(232, 236, 243, .025); }
.cg-tag { position: absolute; left: 18px; top: 16px; display: flex; align-items: baseline; gap: 10px; font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--on-navy-2); }
.cg-tag b { font-weight: 600; color: var(--signal-hi); }
.cg-svg { width: 100%; height: auto; overflow: visible; }
.cg-ghost { fill: none; stroke: var(--on-navy-2); stroke-width: 1; stroke-dasharray: 3 4; opacity: .45; }
.cg-ghost-t { font: 500 5.5px var(--mono); letter-spacing: .08em; fill: var(--on-navy-2); opacity: .75; }
.cg-f { stroke: var(--on-navy); stroke-width: 1.3; stroke-linejoin: round; vector-effect: non-scaling-stroke; transition: fill .35s ease, stroke .35s ease; }
.cg-f-top, .cg-f-floor { fill: #2a3d62; }
.cg-f-side { fill: #1c2c49; }
.cg-f-end { fill: #142039; }
.cg-rib, .cg-rail, .cg-roof, .cg-tarp, .cg-doors, .cg-reefer, .cg-endwall, .cg-far path { fill: none; stroke: var(--on-navy-2); stroke-width: 1; vector-effect: non-scaling-stroke; transition: opacity .35s ease, stroke .35s ease; }
.cg-rib { opacity: .6; }
.cg-rail, .cg-doors, .cg-endwall, .cg-far path { stroke: var(--on-navy); }
.cg-tarp { stroke-dasharray: 3 3; }
.cg-mark text { font: 600 6px var(--mono); letter-spacing: .12em; fill: var(--on-navy); transition: fill .35s ease; }
.cg-mark .cg-mark-s { font-size: 5.2px; fill: var(--on-navy-2); }
/* geometry: sea-freight.js sets each transform; one curve and duration keeps the faces joined mid-morph */
.cg-sc { transform-box: fill-box; }
.cg-side, .cg-floor, .cg-end, .cg-far { transform-origin: 0 100%; }
.cg-top, .cg-deck { transform-origin: 0 0; }
.cg-sc, .cg-endpos, .cg-toppos, .cg-mark { transition: transform .7s var(--ease-io), opacity .3s ease; }
/* layers that crossfade with the type */
.cg .r20, .cg-floor, .cg-deck, .cg-reefer, .cg-tarp, .cg-endwall, .cg-far { opacity: 0; }
.cg[data-len="20"] .r20 { opacity: .6; }
.cg[data-len="20"] .r40 { opacity: 0; }
.cg[data-kind="rf"] .cg-doors { opacity: 0; }
.cg[data-kind="rf"] .cg-reefer { opacity: 1; }
.cg[data-kind="rf"] .cg-f-top { fill: #e3e7ee; }
.cg[data-kind="rf"] .cg-f-side { fill: #c9d0dc; }
.cg[data-kind="rf"] .cg-f-end { fill: #b2bccb; }
.cg[data-kind="rf"] .cg-f, .cg[data-kind="rf"] .cg-rail, .cg[data-kind="rf"] .cg-reefer { stroke: var(--navy); }
.cg[data-kind="rf"] .cg-rib, .cg[data-kind="rf"] .cg-roof { stroke: #5a6577; }
.cg[data-kind="rf"] .cg-mark text { fill: var(--navy); }
.cg[data-kind="ot"] .cg-roof { opacity: 0; }
.cg[data-kind="ot"] .cg-tarp { opacity: 1; }
.cg[data-kind="ot"] .cg-f-top { fill: #0e1829; }
.cg[data-kind="fr"] .cg-side, .cg[data-kind="fr"] .cg-top, .cg[data-kind="fr"] .cg-mark, .cg[data-kind="fr"] .cg-doors { opacity: 0; }
.cg[data-kind="fr"] .cg-floor, .cg[data-kind="fr"] .cg-deck, .cg[data-kind="fr"] .cg-endwall, .cg[data-kind="fr"] .cg-far { opacity: 1; }
.cg[data-kind="fr"] .cg-f-end { fill: rgba(28, 44, 73, .7); }
.cg-dl { display: grid; border-top: 1px solid var(--navy-line); }
.cg-dl div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--navy-line); }
.cg-dl dt { font-size: 14px; color: var(--on-navy-2); }
.cg-dl dd { font: 600 15px/1.3 var(--mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.cg-uses { margin: 18px 0 22px; }
.cg-uses p + p { margin-top: 8px; font-size: 15px; line-height: 1.55; color: var(--on-navy-2); }
.cg-uses .is-swap { animation: tabin .26s var(--ease-out); }
.cg-note { margin-top: 22px; }
@media (max-width: 991.98px) { .cg-body { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767.98px) {
  .cg-pick { margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); scroll-padding-inline: var(--gut); }
  .cg-opt { flex: 0 0 auto; }
  .cg-fig { padding: 34px 10px 10px; }
  .cg-tag { left: 12px; top: 12px; }
}

/* ── LCL calculator: W/M + container fill bars ───────────────────────── */
.sf-presets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.sf-pre { display: grid; gap: 3px; min-height: 48px; padding: 8px 12px; text-align: left; border: 1px dashed var(--line-2); border-radius: 4px; background: transparent; transition: border-color .15s ease, background-color .15s ease, scale .14s var(--ease-out); }
.sf-pre b { font-size: 14px; font-weight: 600; line-height: 1.2; }
.sf-pre span { font: 500 11.5px/1.2 var(--mono); color: var(--steel); }
.sf-pre:active { scale: .97; }
.sf-pre[aria-pressed="true"] { border-style: solid; border-color: var(--signal); background: var(--signal-soft); }
@media (hover: hover) and (pointer: fine) { .sf-pre:hover { border-color: var(--ink); } }
@media (max-width: 599.98px) { .sf-presets { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sf-calc .note { background: var(--paper); }
.sf-basis { margin-top: -8px; font-size: 14px; color: var(--on-navy-2); }
.sf-basis b { font-weight: 600; color: var(--signal-hi); }
.calc-rows [data-side] dt, .calc-rows [data-side] dd { transition: color .25s ease; }
.calc-rows [data-side].is-key dt { color: var(--on-navy); }
.calc-rows [data-side].is-key dd { color: var(--signal-hi); }
.sf-fills { display: grid; gap: 14px; }
.sf-fill p { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 7px; font: 500 11.5px/1.3 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--on-navy-2); }
.sf-fill p b { font-weight: 600; color: var(--on-navy); }
.sf-fill svg { display: block; width: 100%; height: auto; }
.sf-fill-box { fill: none; stroke: var(--on-navy-2); stroke-width: 1.2; transition: stroke .2s ease; }
.sf-fill-rib { fill: none; stroke: rgba(232, 236, 243, .14); stroke-width: 1; }
.sf-fill-in { fill: var(--signal); transform-box: fill-box; transform-origin: 0 50%; transform: scaleX(0); transition: transform .7s var(--ease-out); }
.sf-fill.is-over .sf-fill-box { stroke: var(--signal-hi); stroke-dasharray: 5 3; }

/* ── Sailing schedule + next cut-off chip ────────────────────────────── */
.sch-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px 24px; margin-bottom: 22px; }
.sch-next { display: inline-flex; align-items: baseline; gap: 10px; min-height: 44px; padding: 9px 14px; border: 1px solid var(--line-2); border-radius: 4px; background: var(--card); font: 500 13px/1.45 var(--mono); color: var(--ink-2); }
.sch-next i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--signal); translate: 0 -1px; }
.sch-next b { font-weight: 600; color: var(--ink); }
.sch-next .sch-in { font-weight: 600; color: var(--signal); white-space: nowrap; }
.sch-table td small { font-size: 12px; color: var(--steel); }
.sch-table tbody tr.is-next th, .sch-table tbody tr.is-next td { background: var(--signal-soft); }
.sch-table tbody tr.is-next th::after { content: "Next"; display: inline-block; margin-left: 10px; padding: 3px 6px; border-radius: 3px; background: var(--signal); color: #fff; font: 600 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; vertical-align: 2px; }
.sch-table tbody tr.is-in { animation: tabin .26s var(--ease-out); }
.sch-foot { justify-content: space-between; margin-top: 24px; }
@media (max-width: 719.98px) {
  .sch-table tbody tr.is-next { border-color: var(--signal); }
  .sch-table tbody tr.is-next th, .sch-table tbody tr.is-next td { background: transparent; }
}
@media (max-width: 599.98px) {
  .sch-bar { align-items: stretch; }
  .sch-seg { width: 100%; }
  .sch-seg span[data-short] { font-size: 0; gap: 0; }
  .sch-seg span[data-short]::after { content: attr(data-short); font-size: 14px; }
  .sch-next { width: 100%; }
}

/* ── Transit times: range bars on a 30-day scale ─────────────────────── */
.tt-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px clamp(32px, 5vw, 64px); }
.tt-g h3 { padding-bottom: 10px; border-bottom: 1px solid var(--line-2); font: 500 12px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--steel); }
.tt-g .tt-h3b { margin-top: 30px; }
.tt li { display: grid; grid-template-columns: minmax(120px, 190px) minmax(0, 1fr) 66px; align-items: center; gap: 14px; min-height: 38px; border-bottom: 1px solid var(--line); }
.tt li.tt-ax { min-height: 26px; border-bottom: 0; }
.tt-ticks { position: relative; height: 14px; }
.tt-ticks i { position: absolute; top: 0; font: 500 10px/1 var(--mono); font-style: normal; color: var(--steel); translate: -50% 0; white-space: nowrap; }
.tt-ticks i:nth-child(1) { left: 0; translate: 0 0; } .tt-ticks i:nth-child(2) { left: 33.333%; } .tt-ticks i:nth-child(3) { left: 66.666%; } .tt-ticks i:nth-child(4) { left: 100%; translate: -100% 0; }
.tt-n { font-size: 14.5px; font-weight: 500; }
.tt-n small { margin-left: 6px; font: 500 10.5px/1 var(--mono); letter-spacing: .06em; color: var(--steel); }
.tt-bar { position: relative; height: 10px; border-radius: 2px; background: linear-gradient(90deg, transparent calc(33.333% - 1px), var(--line-2) calc(33.333% - 1px) 33.333%, transparent 33.333% calc(66.666% - 1px), var(--line-2) calc(66.666% - 1px) 66.666%, transparent 66.666%), rgba(11, 21, 38, .05); }
.tt-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; border-radius: 2px; transform-origin: 0 50%; }
.tt-max { background: rgba(26, 75, 255, .3); scale: calc(var(--b) / 30) 1; }
.tt-min { background: var(--signal); scale: calc(var(--a) / 30) 1; }
.js .tt .tt-bar i { scale: 0 1; transition: scale .9s var(--ease-out) calc(.15s + var(--k, 0) * 40ms); }
.js .tt.is-in .tt-max { scale: calc(var(--b) / 30) 1; }
.js .tt.is-in .tt-min { scale: calc(var(--a) / 30) 1; }
.tt-v { font: 500 12.5px/1 var(--mono); color: var(--ink-2); text-align: right; white-space: nowrap; }
.tt-key { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 22px; font: 500 11.5px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--steel); }
.tt-key span { display: inline-flex; align-items: center; gap: 8px; }
.tt-key i { width: 18px; height: 8px; border-radius: 2px; background: var(--signal); }
.tt-key i.is-range { background: rgba(26, 75, 255, .3); }
@media (max-width: 899.98px) { .tt-groups { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 479.98px) {
  .tt li { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 9px 0 10px; }
  .tt li .tt-bar { grid-column: 1 / -1; grid-row: 2; }
  .tt li.tt-ax { padding: 0; } .tt li.tt-ax > span:first-child, .tt li.tt-ax > span:last-child { display: none; }
  .tt li.tt-ax .tt-ticks { grid-column: 1 / -1; }
}

/* ── Incoterms: seller-cost rail + risk marker per rule ──────────────── */
.ic { align-items: start; }
.ic-side { position: sticky; top: calc(var(--hdr) + 24px); transition: translate .34s var(--ease-out); }
.hdr-off .ic-side { translate: 0 calc(var(--hdr) * -1); }
.ic-photo { display: grid; gap: 10px; margin: 30px 0 0; }
.ic-photo .photo { aspect-ratio: 1000 / 760; background: var(--line); }
.ic-acc .acc-btn > span { display: inline-flex; align-items: baseline; gap: 14px; }
.ic-acc .acc-btn code { flex: none; min-width: 40px; font: 600 13px/1 var(--mono); letter-spacing: .06em; color: var(--signal); }
.ic-strip { position: relative; max-width: none; padding-top: 30px; }
.ic-rail { position: absolute; left: calc(100% / 12); right: calc(100% / 12); top: 35px; height: 2px; background: var(--line-2); }
.ic-rail i { position: absolute; inset: 0; background: var(--ink); transform-origin: 0 50%; scale: 0 1; transition: scale .6s var(--ease-out) .14s; }
.acc-item.is-open .ic-rail i { scale: calc((var(--cost) - 1) / 5) 1; }
.ic-strip ol { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.ic-strip li { display: grid; justify-items: center; gap: 8px; font: 500 10.5px/1.25 var(--mono); letter-spacing: .03em; text-transform: uppercase; text-align: center; color: var(--steel); }
.ic-strip li::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--paper-2); box-shadow: inset 0 0 0 2px var(--line-2); transition: background-color .25s ease, box-shadow .25s ease; }
.ic-strip li.is-paid { color: var(--ink); }
.ic-strip li.is-paid::before { background: var(--ink); box-shadow: none; }
.ic-strip li.is-risk::before { background: var(--signal); box-shadow: 0 0 0 4px rgba(26, 75, 255, .2); }
.ic-risk { position: absolute; top: 0; left: calc(100% / 12 + (var(--risk) - 1) * 100% / 6); translate: calc((var(--risk) - 1) / 5 * -100%) 0; padding: 4px 7px; border-radius: 3px; background: var(--signal); color: #fff; font: 600 10px/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; }
.ic-who { display: flex; flex-wrap: wrap; gap: 6px 16px; font: 500 11.5px/1.4 var(--mono); letter-spacing: .02em; color: var(--steel); }
.ic-who b { margin-left: 4px; font-weight: 600; color: var(--ink); }
.ic-key { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 18px; font: 500 11.5px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--steel); }
.ic-key span { display: inline-flex; align-items: center; gap: 8px; }
.ic-key i { width: 18px; height: 2px; background: var(--ink); }
.ic-key i.is-risk { width: 10px; height: 10px; border-radius: 50%; background: var(--signal); }
@media (max-width: 899.98px) { .ic-side { position: static; } }
@media (max-width: 479.98px) { .ic-strip li { font-size: 9px; letter-spacing: 0; } }

/* ── Reduced motion: final states at once ────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ff-b, .cg-sc, .cg-endpos, .cg-toppos, .cg-mark, .sf-fill-in, .ic-rail i, .ic-side { transition: none; }
  .js .tt .tt-bar i { transition: none; }
  .js .tt .tt-bar .tt-max { scale: calc(var(--b) / 30) 1; }
  .js .tt .tt-bar .tt-min { scale: calc(var(--a) / 30) 1; }
}