/* Shared glue for the Navo tracking apps. DS tokens only; per-app mode colour from the Navo transport palette
   (same as rate-hierarchy / Distance mode colours). Callum 29.10.2026. */
body.nv-apps[data-app=parcel] { --mode: #F17B34; --mode-dk: #B4590A; --mode-wash: #FFF3E4; }
body.nv-apps[data-app=vessel] { --mode: #113EC9; --mode-dk: #0B2A45; --mode-wash: #F0F5FF; }
body.nv-apps[data-app=road]   { --mode: #18B6B8; --mode-dk: #0E969B; --mode-wash: #E6F7F7; }
body.nv-apps[data-app=rail]   { --mode: #86D31C; --mode-dk: #385618; --mode-wash: #F8FEE7; }
.xa-ic-truck { --i: url(/example-site/icons/truck.svg); }
.xa-ic-train { --i: url(/example-site/icons/train-front.svg); }
.xa-ic-package { --i: url(/example-site/icons/package.svg); }
.xa-ic-ship { --i: url(/example-site/icons/ship.svg); }
body.nv-apps .xa-line { background: var(--mode-dk); }
body.nv-apps .xa-line-dash { background: repeating-linear-gradient(90deg, var(--mode) 0 4px, transparent 4px 7px); }
body.nv-apps .xa-mk { border-color: var(--mode-dk); }
body.nv-apps .xa-dot-pol { border-color: var(--mode-dk); }
.xa-lane, .xa-mk span { font-family: var(--font-sans); }
body.nv-apps .xa-mk-pod { border-color: #e2462b; }
body.nv-apps .xa-mk-now { width: 16px; height: 16px; background: var(--mode); border: 3px solid #fff; box-shadow: 0 0 0 6px var(--mode-wash), var(--shadow-1); }
body.nv-apps .xa-dot-now { background: var(--mode); border: 0; box-shadow: 0 0 0 3px var(--mode-wash); }
body.nv-apps .tl-item.completed .tl-dot, body.nv-apps .tl-item.current .tl-dot { background: var(--mode-dk); }
body.nv-apps .tl-item.completed .tl-line { background: var(--mode-dk); }
body.nv-apps .tl-item.current .tl-dot { box-shadow: 0 0 0 4px var(--mode-wash); }
.xa-mk-ves { width: 22px; height: 22px; border: 0; background: none; }
.xa-mk-ves svg { width: 22px; height: 22px; display: block; filter: drop-shadow(0 1px 2px rgba(11,13,16,.35)); }
.ac-hint { margin: 0; padding: var(--sp-7); font-size: var(--fs-2); color: var(--text-secondary); }
.ac-hint.err { color: var(--badge-error-text); }
.ac-pad { padding: var(--sp-6) var(--sp-7); display: flex; flex-direction: column; gap: var(--sp-4); }
.ac-recent { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); padding: 0 var(--sp-7) var(--sp-6); }
.ac-recent button, .nx-try button { cursor: pointer; }
.nx-try { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); padding: 0 var(--sp-7) var(--sp-6); }
.nx-src { display: flex; flex-direction: column; gap: var(--sp-3); padding: 0 var(--sp-7) var(--sp-7); }
.nx-src h3 { margin: 0; }
.nx-src ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.nx-list { display: flex; flex-direction: column; }
.nx-list button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: var(--sp-5) var(--sp-7); border: 0; border-bottom: 1px solid var(--divider); background: none; font: inherit; text-align: left; cursor: pointer; }
.nx-list button:hover { background: var(--accent-wash); }
.nx-list .t { font-size: var(--fs-2); font-weight: var(--fw-medium); color: var(--text-primary); }
.nx-list .m { font-size: var(--fs-1); color: var(--text-tertiary); }
.nx-note { font-size: var(--fs-1); color: var(--text-tertiary); padding: 0 var(--sp-7) var(--sp-6); margin: 0; }
.nx-extra { display: none; }
.ac-ovl { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: rgba(11, 13, 16, .45); padding: 16px; }
.ac-ovl[hidden] { display: none; }
.ac-ovl-card { max-width: 420px; padding: var(--sp-8); display: flex; flex-direction: column; gap: var(--sp-5); }
.ac-ovl-card p { margin: 0; color: var(--text-secondary); }
[hidden] { display: none !important; }
.nx-dev { position: absolute; top: var(--sp-7); right: var(--sp-7); z-index: 4; }
@media (width <= 980px) { .nx-dev { display: none; } }

/* port-call flags on the vessel path + operator logo before the vessel name (Stefan 30.10) */
.xa-mk-flag { width: auto; height: auto; border: 0 !important; border-radius: 3px; background: #fff; padding: 2px; box-shadow: var(--shadow-1); line-height: 0; }
.xa-mk-flag .xa-flag { width: 20px; height: 15px; box-shadow: none; }
.xa-trk-head .xa-vn { gap: var(--sp-4); }
.xa-trk-head .xa-vn .xa-logo { width: 32px; height: 32px; }
.xa-trk-head .xa-vn .xa-logo img { max-width: 26px; max-height: 26px; }
.tl-content .t .xa-flag { width: 16px; height: 12px; vertical-align: -1px; margin-right: 2px; }
.mini-tag .xa-flag { width: 16px; height: 12px; vertical-align: -1px; }