/* SP GROUP CARGO v1 — sections.css: #pricing (.pr-*), #tracking (.tk-*), #desk (.dk-*).
   Loads after tokens.css and the shared base (.sp-sec / .sp-wrap / .sp-head come from the base sheet).
   Only tokens.css custom properties are used for colour, type, radii and motion; tints are color-mix() of tokens.
   Motion is crisp: short snaps and ticks, no drifting. prefers-reduced-motion = final states, no transitions. */

/* ── shared bits ─────────────────────────────────────────────────────────────── */
.sx-pricing,.sx-tracking,.sx-desk{
  --sx-tint-red:color-mix(in srgb,var(--sp-red) 12%,transparent);
  --sx-tint-red-2:color-mix(in srgb,var(--sp-red) 22%,transparent);
  --sx-tint-ok:color-mix(in srgb,var(--sp-ok) 14%,transparent);
  --sx-tint-info:color-mix(in srgb,var(--sp-info) 14%,transparent);
}
.sx-pricing svg,.sx-tracking svg,.sx-desk svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;display:block}
.sx-code{font-family:var(--sp-mono);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.sx-btn{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:7px 13px;border:1px solid var(--sp-line-2);
  border-radius:var(--sp-r-sm);background:var(--sp-deep);color:var(--sp-ink-2);font:600 .8125rem/1.1 var(--sp-sans);
  cursor:pointer;transition:border-color var(--sp-t-fast) var(--sp-ease),color var(--sp-t-fast) var(--sp-ease),background var(--sp-t-fast) var(--sp-ease);
  -webkit-tap-highlight-color:transparent;touch-action:manipulation}
.sx-btn svg{width:16px;height:16px;stroke-width:1.8}
.sx-btn:hover{border-color:var(--sp-ink-4);color:var(--sp-ink)}

/* ── #pricing ────────────────────────────────────────────────────────────────── */
.pr-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:"ctl board" "info board";grid-template-rows:auto 1fr;gap:26px clamp(28px,4.5vw,72px);align-items:start}
.pr-ctl{grid-area:ctl;display:flex;flex-direction:column;gap:18px;min-width:0}
.pr-info{grid-area:info;align-self:start;display:flex;flex-direction:column;gap:18px;min-width:0}
.pr-board{grid-area:board}

.pr-modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.pr-mode{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-height:64px;padding:12px 14px 11px;
  border:1px solid var(--sp-line-2);border-radius:var(--sp-r);background:var(--sp-deep);color:var(--sp-ink-2);text-align:left;
  cursor:pointer;overflow:hidden;-webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:border-color var(--sp-t-fast) var(--sp-ease),background var(--sp-t-fast) var(--sp-ease),color var(--sp-t-fast) var(--sp-ease)}
.pr-mode::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--sp-red);transform:scaleX(0);transform-origin:left;
  transition:transform var(--sp-t) var(--sp-ease-snap)}
.pr-mode:hover{border-color:var(--sp-ink-4);color:var(--sp-ink)}
.pr-mode[aria-checked="true"]{border-color:var(--sp-red);background:var(--sx-tint-red);color:var(--sp-ink)}
.pr-mode[aria-checked="true"]::before{transform:scaleX(1)}
.pr-mode-code{font-family:var(--sp-display);font-weight:600;font-size:1.3rem;line-height:1;letter-spacing:.01em}
.pr-mode-sub{font-size:.78rem;line-height:1.25;color:var(--sp-ink-3)}
.pr-mode[aria-checked="true"] .pr-mode-sub{color:var(--sp-ink-2)}

.pr-note{display:flex;align-items:center;gap:12px;margin:0;min-height:44px;color:var(--sp-ink-2);font-size:var(--sp-fs-small);line-height:1.45}
.pr-note-k{flex:none;display:inline-grid;place-items:center;width:40px;height:40px;border-radius:var(--sp-r-sm);background:var(--sp-red);color:var(--sp-ink);
  font-family:var(--sp-mono);font-weight:500;font-size:1.15rem;font-variant-numeric:tabular-nums}
.pr-note-k.is-tick{animation:sx-tick .32s var(--sp-ease-snap)}

.pr-facts{list-style:none;margin:0;padding:0;border-top:1px solid var(--sp-line)}
.pr-fact{display:grid;grid-template-columns:36px minmax(0,1fr);gap:14px;padding:15px 0;border-bottom:1px solid var(--sp-line)}
.pr-fact-ico{display:grid;place-items:center;width:36px;height:36px;border:1px solid var(--sp-line-2);border-radius:var(--sp-r-sm);color:var(--sp-red)}
.pr-fact-ico svg{width:20px;height:20px}
.pr-fact-t{display:flex;flex-direction:column;gap:3px;min-width:0}
.pr-fact-t b{font-weight:600;color:var(--sp-ink);font-size:1rem;line-height:1.35}
.pr-fact-t b,.dk-fact b,.tk-pt,.tk-nt b,.tk-rt b,.pr-lt b{text-wrap:balance}
.pr-fact-t span{color:var(--sp-ink-3);font-size:var(--sp-fs-small);line-height:1.45}
.pr-foot{margin:0;color:var(--sp-ink-4);font-size:.8125rem;line-height:1.5}

.pr-board{position:relative;min-width:0;padding:clamp(16px,2vw,26px);border:1px solid var(--sp-line-2);border-radius:var(--sp-r-lg);background:var(--sp-panel)}
.pr-bhead{display:flex;align-items:center;justify-content:space-between;gap:12px}
.pr-btitle{font-family:var(--sp-display);font-weight:600;font-size:1.15rem;letter-spacing:.01em;color:var(--sp-ink)}
.pr-lane{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:8px 0 14px;color:var(--sp-ink-2);font-size:.875rem}
.pr-lane-arrow{color:var(--sp-red);font-weight:600}
.pr-lane-sep{color:var(--sp-ink-4)}

.pr-legs{list-style:none;margin:0;padding:0;border-top:1px solid var(--sp-line)}
.pr-leg{display:grid;grid-template-columns:24px 38px minmax(0,1fr) auto;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--sp-line);
  transition:opacity var(--sp-t) var(--sp-ease)}
.pr-n{font-family:var(--sp-mono);font-size:.75rem;color:var(--sp-ink-4);font-variant-numeric:tabular-nums}
.pr-ico{position:relative;display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--sp-line);border-radius:var(--sp-r-sm);background:var(--sp-deep);color:var(--sp-ink-2)}
.pr-ico svg{width:21px;height:21px}
.pr-ico-air{display:none!important}
.pr-board[data-mode="air"] .pr-ico-sea{display:none!important}
.pr-board[data-mode="air"] .pr-ico-air{display:block!important}
.pr-lt{display:flex;flex-direction:column;gap:2px;min-width:0}
.pr-lt b{font-weight:600;font-size:.98rem;line-height:1.3;color:var(--sp-ink)}
.pr-lt small{font-size:.8125rem;line-height:1.35;color:var(--sp-ink-3)}
.pr-st{display:inline-flex;align-items:center;gap:7px;justify-self:end;color:var(--sp-ok);font-size:.8125rem;font-weight:600;white-space:nowrap}
.pr-tick{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--sx-tint-ok);color:var(--sp-ok)}
.pr-tick svg{width:13px;height:13px;stroke-width:2.4}
.pr-leg--main .pr-ico{border-color:var(--sx-tint-red-2);color:var(--sp-red)}

/* a leg that is not used on this mode */
.pr-leg.is-out{opacity:.5}
.pr-leg.is-out .pr-st{color:var(--sp-ink-4)}
.pr-leg.is-out .pr-tick{background:transparent;border:1px dashed var(--sp-line-2);color:transparent}
.pr-leg.is-out .pr-lt b{color:var(--sp-ink-3);text-decoration:line-through;text-decoration-color:var(--sp-ink-4)}

/* the one bar */
.pr-total{margin-top:18px}
.pr-bar{display:flex;gap:4px;height:46px;padding:4px;border:1px solid var(--sp-line-2);border-radius:var(--sp-r);background:var(--sp-deep);
  transition:gap var(--sp-t) var(--sp-ease-snap),border-color var(--sp-t) var(--sp-ease)}
.pr-seg{position:relative;flex:1 1 0;min-width:0;display:grid;place-items:center;border-radius:4px;background:var(--sp-panel-2);border:1px solid var(--sp-line-2);
  overflow:hidden;transition:flex-grow var(--sp-t) var(--sp-ease-snap),background var(--sp-t) var(--sp-ease),border-color var(--sp-t) var(--sp-ease),border-radius var(--sp-t) var(--sp-ease),opacity var(--sp-t-fast) var(--sp-ease)}
.pr-seg i{font-style:normal;font-family:var(--sp-mono);font-size:.6875rem;color:var(--sp-ink-3);font-variant-numeric:tabular-nums;transition:color var(--sp-t) var(--sp-ease)}
.pr-seg.is-out{flex-grow:0;border-width:0;opacity:0}
.pr-board[data-state="done"] .pr-bar{gap:0;border-color:var(--sp-red)}
.pr-board[data-state="done"] .pr-seg{background:var(--sp-red);border-color:var(--sp-red);border-radius:0}
.pr-board[data-state="done"] .pr-seg i{color:color-mix(in srgb,var(--sp-ink) 55%,transparent)}
.pr-board[data-state="done"] .pr-seg:first-child{border-radius:4px 0 0 4px}
.pr-board[data-state="done"] .pr-seg:last-child{border-radius:0 4px 4px 0}
/* hairline seams stay visible inside the merged bar so it still reads as six legs */
.pr-board[data-state="done"] .pr-seg + .pr-seg:not(.is-out)::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:1px;background:color-mix(in srgb,var(--sp-ink) 26%,transparent)}

.pr-trow{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 16px;margin-top:14px}
.pr-tk{color:var(--sp-ink-3);font-size:.875rem}
.pr-tv{display:inline-flex;align-items:center;gap:10px;font-family:var(--sp-display);font-weight:600;font-size:clamp(1.35rem,2.1vw,1.85rem);line-height:1.1;
  letter-spacing:var(--sp-track-display);color:var(--sp-ink)}
.pr-tv-tick{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--sp-ok);color:var(--sp-ground);
  transition:transform var(--sp-t) var(--sp-ease-snap),opacity var(--sp-t-fast) var(--sp-ease)}
.pr-tv-tick svg{width:15px;height:15px;stroke-width:2.6}
.pr-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:16px 0 0;padding-top:14px;border-top:1px dashed var(--sp-line-2)}
.pr-meta div{min-width:0}
.pr-meta dt{font-size:.75rem;color:var(--sp-ink-4);margin:0 0 3px}
.pr-meta dd{margin:0;font-size:.875rem;color:var(--sp-ink-2);line-height:1.35}

/* assembly states (set by sections.js only when motion is allowed) */
.pr-board[data-state="idle"] .pr-leg{opacity:.38}
.pr-board[data-state="idle"] .pr-leg .pr-st,.pr-board[data-state="run"] .pr-leg:not(.is-on) .pr-st{opacity:0;transform:scale(.6)}
.pr-board[data-state="run"] .pr-leg:not(.is-on){opacity:.38}
.pr-leg .pr-st{transition:opacity var(--sp-t-fast) var(--sp-ease),transform var(--sp-t) var(--sp-ease-snap)}
.pr-board[data-state="idle"] .pr-seg,.pr-board[data-state="run"] .pr-seg:not(.is-on){opacity:0}
.pr-board[data-state="idle"] .pr-tv-tick,.pr-board[data-state="run"] .pr-tv-tick{opacity:0;transform:scale(.4)}
.pr-board[data-state="idle"] .pr-tv,.pr-board[data-state="run"] .pr-tv{color:var(--sp-ink-3)}
.pr-leg.is-flash{animation:sx-row-flash .5s var(--sp-ease)}

@keyframes sx-tick{0%{transform:translateY(-35%);opacity:0}100%{transform:none;opacity:1}}
@keyframes sx-row-flash{0%{background:var(--sx-tint-red)}100%{background:transparent}}
@keyframes sx-pop{0%{transform:scale(.6);opacity:0}100%{transform:none;opacity:1}}

/* ── #tracking ───────────────────────────────────────────────────────────────── */
.tk-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-areas:"card ladder" "notices notices";gap:clamp(14px,1.8vw,22px);align-items:stretch}
.tk-card{grid-area:card;position:relative;display:flex;flex-direction:column;gap:clamp(16px,2vw,22px);min-width:0;padding:clamp(18px,2.2vw,28px);border:1px solid var(--sp-line-2);border-radius:var(--sp-r-lg);background:var(--sp-panel)}
.tk-chead{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px}
.tk-cico{display:grid;place-items:center;width:34px;height:34px;border-radius:var(--sp-r-sm);background:var(--sp-red);color:var(--sp-ink)}
.tk-cico svg{width:20px;height:20px}
.tk-id{font-size:1.125rem;font-weight:500;color:var(--sp-ink);letter-spacing:.06em}
.tk-eq{padding:3px 8px;border:1px solid var(--sp-line-2);border-radius:var(--sp-r-sm);font-size:.75rem;color:var(--sp-ink-2)}
.tk-chead .sp-illus{margin-left:auto}

.tk-status{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px}
.tk-status-l{display:flex;align-items:baseline;gap:14px;min-width:0;margin:0}
.tk-status-k{flex:none;font-size:.8125rem;color:var(--sp-ink-3)}
.tk-status-v{display:inline-block;font-family:var(--sp-display);font-weight:600;font-size:clamp(1.75rem,3vw,2.6rem);line-height:1.05;letter-spacing:var(--sp-track-display);color:var(--sp-ink)}
.tk-status-v.is-tick{animation:sx-tick .26s var(--sp-ease-snap)}

/* the route strip: SGN — ocean — LAX — road — door, tokens snap along it */
.tk-route{--sea:1;--road:1;display:grid;grid-template-columns:auto minmax(0,3fr) auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:16px;border:1px solid var(--sp-line);border-radius:var(--sp-r);background:var(--sp-deep)}
.tk-node{display:grid;place-items:center;min-width:44px;height:28px;padding:0 8px;border:1px solid var(--sp-line-2);border-radius:var(--sp-r-sm);font-size:.8125rem;color:var(--sp-ink-2);
  transition:border-color var(--sp-t-fast) var(--sp-ease),background var(--sp-t-fast) var(--sp-ease),color var(--sp-t-fast) var(--sp-ease)}
.tk-node--door{min-width:34px;padding:0 6px}
.tk-node--door svg{width:17px;height:17px}
.tk-leg{position:relative;height:2px;border-top:2px dashed var(--sp-line-2)}
.tk-leg--sea{border-top-color:color-mix(in srgb,var(--sp-ocean) 42%,transparent)}
.tk-leg--road{border-top-color:color-mix(in srgb,var(--sp-road) 38%,transparent)}
.tk-leg-fill{position:absolute;left:0;top:-2px;height:2px;width:calc(var(--sea) * 100%);background:var(--sp-ocean);transition:width .5s var(--sp-ease-snap)}
.tk-leg--road .tk-leg-fill{width:calc(var(--road) * 100%);background:var(--sp-road)}
.tk-tok{position:absolute;top:-1px;left:calc(15px + var(--sea) * (100% - 30px));display:grid;place-items:center;width:30px;height:30px;border-radius:50%;transform:translate(-50%,-50%);
  background:var(--sp-red);color:var(--sp-ink);box-shadow:0 0 0 4px var(--sp-deep);transition:left .5s var(--sp-ease-snap),opacity var(--sp-t-fast) var(--sp-ease),transform var(--sp-t) var(--sp-ease-snap)}
.tk-tok svg{width:17px;height:17px}
.tk-tok--truck{left:calc(15px + var(--road) * (100% - 30px));background:var(--sp-road);color:var(--sp-ground)}
.tk-route[data-at="origin"] .tk-tok--truck,.tk-route[data-at="sea"] .tk-tok--truck,.tk-route[data-at="port"] .tk-tok--truck{opacity:0;transform:translate(-50%,-50%) scale(.4)}
.tk-route[data-at="customs"] .tk-tok--ship,.tk-route[data-at="road"] .tk-tok--ship,.tk-route[data-at="door"] .tk-tok--ship{opacity:0;transform:translate(-50%,-50%) scale(.4)}
.tk-route[data-at="origin"] [data-node="o"]{border-color:var(--sp-red);color:var(--sp-ink)}
.tk-route[data-at="port"] [data-node="p"]{border-color:var(--sp-red);color:var(--sp-ink)}
.tk-route[data-at="customs"] [data-node="p"]{border-color:var(--sp-warn);color:var(--sp-warn);background:color-mix(in srgb,var(--sp-warn) 12%,transparent)}
.tk-route[data-at="door"] [data-node="d"]{border-color:var(--sp-ok);color:var(--sp-ok);background:var(--sx-tint-ok)}

/* the stage rail — horizontal from 641px, vertical below */
.tk-track{position:relative;--tk-p:1}
.tk-rail{position:absolute;left:calc(100% / 14);right:calc(100% / 14);top:8px;height:2px;background:var(--sp-line-2);border-radius:2px}
.tk-rail-fill{position:absolute;left:0;top:0;bottom:0;width:calc(var(--tk-p) * 100%);background:var(--sp-red);border-radius:2px;
  transition:width .42s var(--sp-ease-snap),height .42s var(--sp-ease-snap)}
.tk-stages{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.tk-stages li{min-width:0;display:flex}
.tk-stage{flex:1;display:flex;flex-direction:column;align-items:center;gap:10px;min-width:0;min-height:44px;padding:0 2px 4px;border:0;border-radius:var(--sp-r-sm);
  background:none;color:var(--sp-ink-3);font:500 .78rem/1.25 var(--sp-sans);text-align:center;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.tk-dot{position:relative;flex:none;width:18px;height:18px;border-radius:50%;border:2px solid var(--sp-line-2);background:var(--sp-panel);
  transition:background var(--sp-t-fast) var(--sp-ease),border-color var(--sp-t-fast) var(--sp-ease),box-shadow var(--sp-t) var(--sp-ease-snap),transform var(--sp-t) var(--sp-ease-snap)}
.tk-sl{overflow-wrap:anywhere;hyphens:auto}
.tk-stage:hover{color:var(--sp-ink)}
.tk-stage:hover .tk-dot{border-color:var(--sp-ink-4)}
.tk-stage.is-past .tk-dot{background:var(--sp-red);border-color:var(--sp-red)}
.tk-stage.is-past{color:var(--sp-ink-2)}
.tk-stage[aria-pressed="true"]{color:var(--sp-ink);font-weight:600}
.tk-stage[aria-pressed="true"] .tk-dot{background:var(--sp-red);border-color:var(--sp-ink);box-shadow:0 0 0 5px var(--sp-red-glow);transform:scale(1.12)}
.tk-stage[aria-pressed="true"] .tk-dot::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--sp-ink)}

.tk-readout{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:0;border:1px solid var(--sp-line);border-radius:var(--sp-r);background:var(--sp-deep)}
.tk-readout > div{min-width:0;padding:12px 14px}
.tk-readout > div + div{border-left:1px solid var(--sp-line)}
.tk-readout dt{font-size:.75rem;color:var(--sp-ink-3);margin:0 0 3px}
.tk-readout dd{margin:0;font-weight:600;font-size:.95rem;line-height:1.3;color:var(--sp-ink)}
.tk-readout dd.is-tick{animation:sx-tick .26s var(--sp-ease-snap)}
.tk-hint{margin:auto 0 0;font-size:.8125rem;color:var(--sp-ink-4)}
.tk-play{flex:none}
.tk-play .tk-i-play{display:none}
.tk-play[data-mode="play"] .tk-i-play,.tk-play[data-mode="replay"] .tk-i-play{display:block}
.tk-play[data-mode="play"] .tk-i-pause,.tk-play[data-mode="replay"] .tk-i-pause{display:none}
.tk-play .tk-i-play{fill:currentColor;stroke:none}

.tk-panel{min-width:0;padding:clamp(16px,1.8vw,22px);border:1px solid var(--sp-line-2);border-radius:var(--sp-r-lg);background:var(--sp-panel)}
.tk-ph{margin-bottom:14px}
.tk-pt{margin:0;font-family:var(--sp-display);font-weight:600;font-size:var(--sp-fs-h3);line-height:1.2;color:var(--sp-ink)}
.tk-pp{margin:4px 0 0;font-size:.8125rem;line-height:1.45;color:var(--sp-ink-3)}

.tk-ladder{grid-area:ladder;display:flex;flex-direction:column}
.tk-rungs{flex:1;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.tk-rung{flex:1 1 auto;display:grid;grid-template-columns:26px minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--sp-line);border-radius:var(--sp-r-sm);
  color:var(--sp-ink-3);transition:border-color var(--sp-t-fast) var(--sp-ease),background var(--sp-t-fast) var(--sp-ease),color var(--sp-t-fast) var(--sp-ease)}
.tk-rn{display:grid;place-items:center;width:26px;height:26px;border-radius:4px;border:1px solid var(--sp-line-2);font-size:.75rem;color:var(--sp-ink-3)}
.tk-rt{display:flex;flex-direction:column;gap:2px;min-width:0}
.tk-rt b{font-weight:600;font-size:.95rem;color:var(--sp-ink-2)}
.tk-rt small{font-size:.78rem;line-height:1.35;color:var(--sp-ink-4)}
.tk-rbadge{justify-self:end;max-width:9.5rem;padding:3px 8px;border-radius:999px;background:var(--sp-red);font-size:.6875rem;font-weight:600;line-height:1.25;text-align:center;color:var(--sp-ink)}
.tk-rbadge:empty{display:none}
.tk-rung.is-on{border-color:var(--sp-red);background:var(--sx-tint-red)}
.tk-rung.is-on .tk-rn{background:var(--sp-red);border-color:var(--sp-red);color:var(--sp-ink)}
.tk-rung.is-on .tk-rt b{color:var(--sp-ink)}
.tk-rung.is-on .tk-rt small{color:var(--sp-ink-3)}
.tk-rung.is-on .tk-rbadge{animation:sx-pop .28s var(--sp-ease-snap)}

.tk-notices{grid-area:notices}
.tk-nlist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.tk-n{display:grid;grid-template-columns:30px minmax(0,1fr);grid-template-areas:"ico ns" "txt txt";align-items:center;align-content:start;gap:12px 10px;padding:14px;border:1px solid var(--sp-line);border-radius:var(--sp-r);background:var(--sp-deep);
  transition:border-color var(--sp-t-fast) var(--sp-ease)}
.tk-nico{grid-area:ico;display:grid;place-items:center;width:30px;height:30px;border-radius:var(--sp-r-sm);background:var(--sp-panel-2);color:var(--sp-ink-3)}
.tk-nico svg{width:17px;height:17px}
.tk-nt{grid-area:txt;display:flex;flex-direction:column;gap:2px;min-width:0}
.tk-nt b{font-weight:600;font-size:.95rem;color:var(--sp-ink)}
.tk-nt small{font-size:.8rem;line-height:1.4;color:var(--sp-ink-3)}
.tk-ns{grid-area:ns;justify-self:end;padding:3px 9px;border-radius:999px;font-size:.6875rem;font-weight:600;line-height:1.3;white-space:nowrap;border:1px solid var(--sp-line-2);color:var(--sp-ink-4)}
.tk-ns[data-ns="sent"]{border-color:transparent;background:var(--sx-tint-ok);color:var(--sp-ok)}
.tk-ns[data-ns="due"]{border-color:var(--sp-info);color:var(--sp-info)}
.tk-ns[data-ns="wait"]{border-style:dashed}
.tk-ns[data-ns="hold"]{border-style:dashed;color:var(--sp-ink-3)}
.tk-n[data-live="sent"] .tk-nico{color:var(--sp-ok)}
.tk-n[data-live="due"]{border-color:color-mix(in srgb,var(--sp-info) 45%,transparent)}
.tk-n[data-live="due"] .tk-nico{color:var(--sp-info)}
.tk-n.is-flash{animation:sx-row-flash .6s var(--sp-ease)}
.tk-n.is-flash .tk-ns{animation:sx-pop .28s var(--sp-ease-snap)}

/* ── #desk ───────────────────────────────────────────────────────────────────── */
.dk-stage{position:relative;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(18px,2.4vw,32px);align-items:start}
.dk-inbox{min-width:0;padding:clamp(14px,1.6vw,20px);border:1px dashed var(--sp-line-2);border-radius:var(--sp-r-lg);background:var(--sp-deep)}
.dk-col-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 12px;font-family:var(--sp-display);font-weight:600;font-size:1.05rem;color:var(--sp-ink)}
.dk-docs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.dk-doc{display:grid;grid-template-columns:30px minmax(0,1fr) 20px;align-items:center;gap:10px;padding:10px 11px;border:1px solid var(--sp-line-2);border-radius:var(--sp-r);
  background:var(--sp-panel);transition:opacity var(--sp-t) var(--sp-ease),border-color var(--sp-t) var(--sp-ease)}
.dk-doc-ico{display:grid;place-items:center;width:30px;height:30px;border-radius:var(--sp-r-sm);background:var(--sp-panel-2);color:var(--sp-ink-2)}
.dk-doc-ico svg{width:18px;height:18px}
.dk-doc-t{display:flex;flex-direction:column;gap:1px;min-width:0}
.dk-doc-t b{font-weight:600;font-size:.875rem;line-height:1.3;color:var(--sp-ink)}
.dk-doc-t small{font-size:.6875rem;color:var(--sp-ink-4)}
.dk-doc-ok{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--sx-tint-ok);color:var(--sp-ok);opacity:0;transform:scale(.5);
  transition:opacity var(--sp-t-fast) var(--sp-ease),transform var(--sp-t) var(--sp-ease-snap)}
.dk-doc-ok svg{width:12px;height:12px;stroke-width:2.6}
.dk-doc.is-filed{opacity:.5;border-style:dashed}
.dk-doc.is-filed .dk-doc-ok{opacity:1;transform:none}
.dk-doc.is-lift{opacity:.25}
.dk-inbox-foot{display:flex;align-items:center;gap:8px;margin:12px 0 0;font-size:.8125rem;color:var(--sp-ink-3)}
.dk-inbox-dot{width:8px;height:8px;border-radius:50%;background:var(--sp-ok)}
.dk-stage[data-state="run"] .dk-inbox-dot{background:var(--sp-warn)}

.dk-box{position:relative;min-width:0;padding:clamp(16px,2vw,24px);border:2px solid var(--sp-line-2);border-radius:var(--sp-r-sm);background:var(--sp-panel)}
/* corner castings: four small squares, so the panel reads as a container */
.dk-box::before,.dk-box::after{content:"";position:absolute;top:-2px;bottom:-2px;width:12px;border-top:12px solid var(--sp-line-2);border-bottom:12px solid var(--sp-line-2);pointer-events:none}
.dk-box::before{left:-2px;border-radius:var(--sp-r-sm) 0 0 var(--sp-r-sm)}
.dk-box::after{right:-2px;border-radius:0 var(--sp-r-sm) var(--sp-r-sm) 0}
.sx-desk .dk-ribs{display:block;width:calc(100% - 12px);height:12px;margin:0 6px 14px;color:var(--sp-line-2);stroke:currentColor;stroke-width:1.5;fill:none}
.sx-desk .dk-ribs rect{stroke:none}
.dk-box-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin:0 6px 14px}
.dk-box-id{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:1rem;color:var(--sp-ink);letter-spacing:.05em}
.dk-box-sep{color:var(--sp-ink-4)}

.dk-slots{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.dk-slots li{display:flex;min-width:0}
.dk-slot{flex:1;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"mark code st" "name name name" "file file file";align-items:center;gap:6px 8px;
  min-width:0;min-height:44px;padding:12px;border:1px solid var(--sp-line-2);border-radius:var(--sp-r);background:var(--sp-deep);color:var(--sp-ink-2);
  text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:border-color var(--sp-t-fast) var(--sp-ease),background var(--sp-t-fast) var(--sp-ease)}
.dk-slot .dk-mark{grid-area:mark}
.dk-code{grid-area:code;font-size:.8125rem;font-weight:500;color:var(--sp-ink)}
.dk-sst{grid-area:st;justify-self:end;font-size:.6875rem;font-weight:600;letter-spacing:.02em;white-space:nowrap}
.dk-name{grid-area:name;font-size:.875rem;font-weight:600;line-height:1.3;color:var(--sp-ink);overflow-wrap:anywhere}
.dk-file{grid-area:file;font-size:.6875rem;color:var(--sp-ink-4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dk-slot:hover{border-color:var(--sp-ink-4)}
.dk-slot[aria-pressed="true"]{border-color:var(--sp-ink-3);background:var(--sp-panel-2)}

/* the three provenance marks (platform: components/provenance.tsx) */
.dk-mark{display:inline-block;flex:none;width:11px;height:11px;border-radius:2px}
[data-state="sourced"] > .dk-mark,.dk-detail[data-state="sourced"] .dk-mark{background:var(--sp-ink)}
[data-state="awaited"] > .dk-mark,.dk-detail[data-state="awaited"] .dk-mark{border:1.5px solid var(--sp-ink-4)}
[data-state="owed"] > .dk-mark,.dk-detail[data-state="owed"] .dk-mark{border:1.5px dashed var(--sp-red)}
.dk-slot[data-state="sourced"] .dk-sst{color:var(--sp-ink-2)}
.dk-slot[data-state="awaited"] .dk-sst{color:var(--sp-ink-4)}
.dk-slot[data-state="awaited"]{border-style:dashed}
.dk-slot[data-state="awaited"] .dk-name{color:var(--sp-ink-3)}
.dk-slot[data-state="owed"]{border-style:dashed;border-color:var(--sp-red);background:var(--sx-tint-red)}
.dk-slot[data-state="owed"] .dk-sst{color:var(--sp-red)}
.dk-slot.is-land{animation:dk-land .42s var(--sp-ease-snap)}
.dk-slot.is-land .dk-file{animation:sx-tick .26s var(--sp-ease-snap)}
@keyframes dk-land{0%{transform:scale(.95);border-color:var(--sp-ok)}60%{border-color:var(--sp-ok)}100%{transform:none}}

.dk-detail{display:flex;align-items:flex-start;gap:10px;min-height:3.1em;margin:14px 6px 0;padding:11px 12px;border-radius:var(--sp-r-sm);background:var(--sp-deep);font-size:.875rem;line-height:1.45;color:var(--sp-ink-2)}
.dk-detail .dk-mark{margin-top:5px}
.dk-detail-t{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;min-width:0}
.dk-detail-t b{color:var(--sp-ink);font-weight:600}
.dk-detail-t .sx-code{font-size:.75rem;color:var(--sp-ink-3)}
.dk-detail-t span:last-child{flex-basis:100%}
.dk-legend{list-style:none;display:flex;flex-wrap:wrap;gap:8px 20px;margin:14px 6px 0;padding:0;font-size:.75rem;color:var(--sp-ink-3)}
.dk-legend li{display:inline-flex;align-items:center;gap:7px;min-width:0}
.dk-legend b{font-weight:600;color:var(--sp-ink-2);white-space:nowrap}

.dk-facts{list-style:none;margin:clamp(22px,3vw,36px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,20px)}
.dk-fact{display:flex;flex-direction:column;gap:6px;min-width:0;padding:clamp(16px,1.8vw,22px);border:1px solid var(--sp-line);border-radius:var(--sp-r-lg);background:var(--sp-deep)}
.dk-fact-ico{display:grid;place-items:center;width:36px;height:36px;margin-bottom:6px;border:1px solid var(--sp-line-2);border-radius:var(--sp-r-sm);color:var(--sp-red)}
.dk-fact-ico svg{width:20px;height:20px}
.dk-fact b{font-weight:600;font-size:1rem;line-height:1.35;color:var(--sp-ink)}
.dk-fact > span:not(.dk-fact-ico):not(.dk-fact-code){font-size:var(--sp-fs-small);line-height:1.45;color:var(--sp-ink-3)}
.dk-fact-code{align-self:flex-start;margin-top:4px;padding:3px 8px;border:1px solid var(--sp-line-2);border-radius:4px;font-size:.75rem;color:var(--sp-ink-2)}

/* the flying document (FLIP ghost, created by sections.js) */
.dk-ghost{position:absolute;z-index:5;margin:0;pointer-events:none;box-shadow:0 10px 24px color-mix(in srgb,var(--sp-void) 70%,transparent);border-color:var(--sp-ink-4)}

/* ── responsive ─────────────────────────────────────────────────────────────── */
@media (max-width:1100px){
  .tk-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"card" "ladder" "notices"}
  .tk-rungs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:960px){
  .pr-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"ctl" "board" "info";grid-template-rows:auto}
  .dk-stage{grid-template-columns:minmax(0,1fr)}
  .dk-docs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .dk-facts{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .tk-rungs{grid-template-columns:minmax(0,1fr)}
  .tk-nlist{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  /* vertical stepper */
  .tk-rail{left:8px;right:auto;top:9px;bottom:9px;width:2px;height:auto}
  .tk-rail-fill{right:0;bottom:auto;width:auto;height:calc(var(--tk-p) * 100%)}
  .tk-stages{grid-template-columns:minmax(0,1fr);gap:2px}
  .tk-stage{flex-direction:row;align-items:center;gap:14px;min-height:40px;padding:2px 4px 2px 0;text-align:left;font-size:.9rem}
  .tk-route{gap:8px;padding:12px 10px}
  .tk-node{min-width:0;height:26px;padding:0 6px;font-size:.75rem}
  .tk-tok{width:26px;height:26px}
  .tk-tok svg{width:15px;height:15px}
  .tk-readout{grid-template-columns:minmax(0,1fr)}
  .tk-readout > div + div{border-left:0;border-top:1px solid var(--sp-line)}
  .tk-nlist{grid-template-columns:minmax(0,1fr);gap:8px}
  .tk-n{grid-template-columns:30px minmax(0,1fr) auto;grid-template-areas:"ico txt ns";padding:12px}
  .pr-leg{grid-template-columns:34px minmax(0,1fr) auto;gap:10px}
  .pr-n{display:none}
  .pr-ico{width:34px;height:34px}
  .pr-ico svg{width:19px;height:19px}
  .pr-stx{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .pr-mode{padding:10px 10px 9px;min-height:58px}
  .pr-mode-code{font-size:1.15rem}
  .pr-mode-sub{font-size:.72rem}
  .pr-bar{height:40px}
  .dk-doc{grid-template-columns:minmax(0,1fr) 20px;padding:9px 10px}
  .dk-doc-ico{display:none}
}
@media (max-width:560px){
  .dk-slots{grid-template-columns:minmax(0,1fr)}
  .dk-slot{grid-template-columns:auto 3.2em minmax(0,1fr) auto;grid-template-areas:"mark code name st" ". . file file";gap:4px 10px;padding:10px 12px}
  .dk-box{padding:14px 12px}
  .dk-box-head{margin:0 4px 12px}
  .dk-detail,.dk-legend{margin-left:2px;margin-right:2px}
}

/* ── reduced motion: final states, no movement ─────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .sx-pricing *,.sx-tracking *,.sx-desk *{animation:none!important;transition:none!important}
}