/* Loki tracking map — scoped to .ltm. No external fonts or assets besides the host-supplied map SVG. */
.ltm-host { container-type: inline-size; container-name: ltm; min-width: 0; }
.ltm {
  --ltm-ink: #141a2b;
  --ltm-muted: #5d6680;
  --ltm-accent: #4353c7;
  --ltm-accent-2: #7c5cf0;
  --ltm-accent-soft: rgba(67, 83, 199, 0.16);
  --ltm-dest: #e0567a;
  --ltm-dest-soft: rgba(224, 86, 122, 0.18);
  --ltm-ship: #2f8f83;
  --ltm-border: #e1e4f3;
  --ltm-bg: #f6f7ff;
  --ltm-surface: #ffffff;
  --ltm-sea: radial-gradient(130% 100% at 50% 35%, #ffffff 0%, #eef0fb 100%);
  --ltm-land: #e9ecf6;
  --ltm-land-line: #d3d8e8;
  --ltm-land-text: #8993ab;
  --ltm-visited: #dfe2fb;
  --ltm-dest-land: #fbe4ea;
  --ltm-label-halo: rgba(255, 255, 255, 0.94);
  --ltm-marker-ring: #ffffff;
  --ltm-row: 54px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  width: 100%;
  min-width: 0;
  padding: 14px;
  color: var(--ltm-ink);
  background: linear-gradient(180deg, var(--k-bg-fbfbff,#fbfbff) 0%, var(--ltm-bg) 100%);
  border: 1px solid var(--ltm-border);
  border-radius: 18px;
  font: inherit;
  line-height: 1.35;
}
.ltm *, .ltm *::before, .ltm *::after { box-sizing: border-box; }
@media (prefers-color-scheme: dark) {
  .ltm {
    --ltm-ink: #eef0fb;
    --ltm-muted: #a3abc6;
    --ltm-accent: #8d9bff;
    --ltm-accent-2: #b59cff;
    --ltm-accent-soft: rgba(141, 155, 255, 0.2);
    --ltm-dest: #ff7d9c;
    --ltm-dest-soft: rgba(255, 125, 156, 0.2);
    --ltm-ship: #5fd0c0;
    --ltm-border: #2c3350;
    --ltm-bg: #141829;
    --ltm-surface: #1b2036;
    --ltm-sea: radial-gradient(130% 100% at 50% 35%, #1a1f37 0%, #0f1222 100%);
    --ltm-land: #242a45;
    --ltm-land-line: #39416a;
    --ltm-land-text: #6c7598;
    --ltm-visited: #2e3566;
    --ltm-dest-land: #47263a;
    --ltm-label-halo: rgba(15, 18, 34, 0.92);
    --ltm-marker-ring: #0f1222;
    --ltm-remaining-opacity: 0.85;
    background: linear-gradient(180deg, #171b2e 0%, var(--ltm-bg) 100%);
  }
}

/* Status */
.ltm-status { min-width: 0; }
.ltm-eyebrow { margin: 0 0 2px; font-size: 0.72rem; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ltm-accent); }
.ltm-title { margin: 0; font-size: clamp(1.05rem, 0.92rem + 1cqi, 1.4rem); font-weight: 680; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.ltm-sub { margin: 2px 0 0; font-size: 0.88rem; color: var(--ltm-muted); overflow-wrap: anywhere; }
.ltm-delivered .ltm-eyebrow { color: var(--ltm-ship); }

/* Map */
.ltm-figure { position: relative; margin: 0; min-width: 0; min-height: 0; aspect-ratio: 960 / 600; width: 100%; background: var(--ltm-sea); border: 1px solid var(--ltm-border); border-radius: 14px; overflow: hidden; }
.ltm-svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.ltm-land { opacity: 0; transition: opacity 420ms ease; }
.ltm-ready .ltm-land { opacity: 1; }
.ltm-land g[fill-rule] { fill: var(--ltm-land); stroke: var(--ltm-land-line); }
.ltm-land path { vector-effect: non-scaling-stroke; transition: fill 600ms ease; }
.ltm-land path.is-visited { fill: var(--ltm-visited); }
.ltm-land path.is-dest { fill: var(--ltm-dest-land); }
.ltm-land text { fill: var(--ltm-land-text); }
.ltm-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; text-align: center; color: var(--ltm-muted); font-size: 0.9rem; }
.ltm-fallback[hidden] { display: none; }

/* Route */
.ltm-mask-path { fill: none; stroke: var(--k-text-ffffff,#ffffff); stroke-width: 44; stroke-linecap: butt; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.ltm-settled .ltm-mask-path { stroke-dashoffset: 0; }
.ltm-travel-under { fill: none; stroke: var(--ltm-accent); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; opacity: 0.12; }
.ltm-travel { fill: none; stroke: var(--ltm-accent); stroke-width: 4.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 0.1 8.5; }
.ltm-remaining { fill: none; stroke: var(--ltm-dest); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 7 7; opacity: var(--ltm-remaining-opacity, 0.55); }
.ltm-settled .ltm-remaining { animation: ltm-march 1.6s linear infinite; }
.ltm-focus-estimate .ltm-route .ltm-remaining { opacity: 0.95; stroke-width: 3; }
.ltm-remaining-key { animation: none !important; opacity: 0.8; }
@keyframes ltm-march { to { stroke-dashoffset: -14; } }
.ltm-comet { fill: var(--k-text-ffffff,#ffffff); stroke: var(--ltm-accent); stroke-width: 2.5; opacity: 0; pointer-events: none; }
.ltm-comet-trail { fill: var(--ltm-accent); opacity: 0; pointer-events: none; }

/* Markers */
.ltm-marker { cursor: pointer; outline: none; }
.ltm-preview .ltm-marker { cursor: default; }
.ltm-marker-art { transition: filter 200ms ease; }
.ltm-hit { fill: transparent; }
.ltm-halo { fill: var(--ltm-accent-soft); opacity: 0; transform: scale(0.6); transform-box: fill-box; transform-origin: center; transition: opacity 180ms ease, transform 220ms cubic-bezier(0.3, 1.4, 0.5, 1); }
.ltm-marker.is-hot .ltm-halo, .ltm-marker:focus-visible .ltm-halo { opacity: 1; transform: scale(1.25); }
.ltm-marker:focus-visible .ltm-halo { stroke: var(--ltm-accent); stroke-width: 2; }
.ltm-solid { fill: var(--ltm-accent); stroke: var(--ltm-marker-ring); stroke-width: 2.4; }
.ltm-latest { fill: var(--ltm-accent); stroke-width: 3; }
.ltm-badge { fill: var(--k-text-ffffff,#ffffff); font-size: 8.5px; font-weight: 750; pointer-events: none; }
.ltm-marker:not(.is-latest) .ltm-badge { display: none; }
.ltm-ship-shape { fill: var(--ltm-surface); stroke: var(--ltm-ship); stroke-width: 3; }
.ltm-pin { fill: var(--ltm-dest); stroke: var(--ltm-marker-ring); stroke-width: 2; }
.ltm-pin-hole { fill: var(--ltm-marker-ring); }
.ltm-dest-ring { fill: var(--ltm-dest-soft); stroke: var(--ltm-dest); stroke-width: 1.5; }
.ltm-hollow { fill: var(--ltm-surface); stroke: var(--ltm-muted); stroke-width: 2; stroke-dasharray: 2.4 2.2; }
.ltm-has-focus .ltm-marker:not(.is-hot) .ltm-marker-art { filter: saturate(0.55) opacity(0.7); }

/* Latest scan glow: two staggered rings, then a stronger ping when the travelling pulse arrives. */
.ltm-ping { fill: none; stroke: var(--ltm-accent); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.ltm-settled .ltm-ping { animation: ltm-ping 2.8s cubic-bezier(0.2, 0.6, 0.3, 1) infinite; }
.ltm-settled .ltm-ping-late { animation-delay: 1.4s; }
.ltm-arrive .ltm-ping { animation: ltm-ping 1.4s cubic-bezier(0.2, 0.6, 0.3, 1) 1, ltm-ping 2.8s cubic-bezier(0.2, 0.6, 0.3, 1) 1.4s infinite; }
@keyframes ltm-ping { 0% { transform: scale(0.9); opacity: 0.75; } 85%, 100% { transform: scale(3); opacity: 0; } }

.ltm-label { font-size: 13px; font-weight: 650; fill: var(--ltm-ink); paint-order: stroke; stroke: var(--ltm-label-halo); stroke-width: 4px; stroke-linejoin: round; pointer-events: none; animation: ltm-fade 260ms ease both; }
.ltm-label-dest { fill: var(--ltm-dest); }
.ltm-label.is-hot { font-weight: 750; }
@keyframes ltm-fade { from { opacity: 0; } }

/* Panel: journey list, stepper, legend */
.ltm-panel { display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 0; }
.ltm-list { flex: 1 1 auto; min-height: 0; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; overflow: hidden; }
.ltm-row { flex: none; height: var(--ltm-row); position: relative; }
.ltm-row[hidden] { display: none; }
.ltm-row-button { display: flex; align-items: center; gap: 10px; width: 100%; height: 100%; padding: 6px 10px; border: 1px solid transparent; border-radius: 12px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background 160ms ease, border-color 160ms ease; }
.ltm-row-button:hover, .ltm-row.is-hot .ltm-row-button { background: var(--ltm-accent-soft); }
.ltm-row.is-selected .ltm-row-button { background: var(--ltm-surface); border-color: var(--ltm-border); box-shadow: 0 1px 6px rgba(40, 50, 110, 0.08); }
.ltm-row-button:focus-visible { outline: 3px solid var(--ltm-accent); outline-offset: -3px; }
.ltm-row + .ltm-row::before { content: ""; position: absolute; left: 21px; top: -9px; height: 18px; border-left: 2px dotted var(--ltm-accent); opacity: 0.45; }
.ltm-row-estimate::before, .ltm-row-dest::before, .ltm-row-unmapped::before { border-left-style: dashed !important; border-color: var(--ltm-dest) !important; }
.ltm-icon { flex: none; width: 24px; height: 24px; overflow: visible; }
.ltm-row.is-latest .ltm-solid { animation: ltm-breathe 2.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes ltm-breathe { 50% { transform: scale(1.18); } }
.ltm-row-body { display: grid; min-width: 0; }
.ltm-row-name { font-weight: 650; font-size: 0.92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ltm-row-meta { font-size: 0.78rem; color: var(--ltm-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ltm-row-estimate .ltm-row-name, .ltm-row-unmapped .ltm-row-name { font-weight: 560; color: var(--ltm-muted); }
.ltm-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex: none; }
.ltm-nav[hidden] { display: none; }
.ltm-count { font-size: 0.84rem; color: var(--ltm-muted); font-variant-numeric: tabular-nums; }
.ltm-step { min-height: 44px; min-width: 92px; padding: 8px 14px; border: 1px solid var(--ltm-border); border-radius: 12px; background: var(--ltm-surface); color: var(--ltm-accent); font: inherit; font-weight: 620; cursor: pointer; }
.ltm-step:disabled { opacity: 0.45; cursor: default; }
.ltm-step:focus-visible { outline: 3px solid var(--ltm-accent); outline-offset: 2px; }
.ltm-legend { flex: none; display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; padding: 0; list-style: none; font-size: 0.76rem; color: var(--ltm-muted); }
.ltm-legend li { display: flex; align-items: center; gap: 4px; }
.ltm-legend li[hidden] { display: none; }
.ltm-legend .ltm-icon { width: 16px; height: 16px; }
.ltm-fine { flex: none; margin: 0; font-size: 0.72rem; color: var(--ltm-muted); }

/* Fit mode fills the host height without scrolling. */
.ltm-fit { height: 100%; min-height: 0; grid-template-rows: auto minmax(140px, 1fr) auto; grid-template-areas: "status" "map" "panel"; }
.ltm-fit > .ltm-status { grid-area: status; }
.ltm-fit > .ltm-figure { grid-area: map; aspect-ratio: auto; height: 100%; }
.ltm-fit > .ltm-panel { grid-area: panel; }
.ltm-fit:not(.ltm-wide) .ltm-list { flex: none; height: calc(var(--ltm-row) * var(--ltm-rows, 3)); }
.ltm-fit:not(.ltm-wide) .ltm-fine { display: none; }
.ltm-wide { grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "map status" "map panel"; gap: 10px 16px; }
.ltm-short { padding: 10px; gap: 6px 12px; }
.ltm-short .ltm-legend, .ltm-short .ltm-fine { display: none; }
.ltm-short .ltm-title { font-size: 1rem; }
.ltm-map-failed .ltm-route, .ltm-map-failed .ltm-markers, .ltm-map-failed .ltm-labels { display: none; }

/* Preview artwork has one accessible parent action. Full marker controls stay in the dialog. */
.ltm.ltm-preview { display: block; height: 100%; padding: 0; border: 0; border-radius: 0; background: none; }
.ltm-preview > .ltm-status, .ltm-preview > .ltm-panel { display: none !important; }
.ltm-preview > .ltm-figure { height: 100%; width: 100%; aspect-ratio: auto; border: 0; border-radius: 0; margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .ltm-settled .ltm-remaining, .ltm-settled .ltm-ping, .ltm-arrive .ltm-ping, .ltm-row.is-latest .ltm-solid, .ltm-label { animation: none; }
  .ltm-ping { display: none; }
  .ltm-land, .ltm-halo, .ltm-land path { transition: none; }
}
@media (forced-colors: active) {
  .ltm-travel, .ltm-remaining, .ltm-ship-shape, .ltm-hollow { stroke: CanvasText; }
  .ltm-solid, .ltm-pin { fill: CanvasText; }
}
.ltm-est { stroke: var(--ltm-dest); }
.ltm-row-estimate .ltm-hollow { stroke: var(--ltm-dest); }