.mg-motion {
    --mg-packet-color: #004C99;
    color: var(--text-main, #1e293b);
    background: var(--bg-card, #fff);
    border-bottom: 1px solid var(--border-color, #d9dfe8);
    margin: 0;
    padding: 7px 12px 8px;
    font-size: 11px;
    min-width: 0;
}
.mg-motion-header,
.mg-motion-controls,
.mg-motion-controls label {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}
.mg-motion-header { justify-content: flex-end; }
.mg-motion button,
.mg-motion select {
    border: 1px solid var(--border-color, #d9dfe8);
    border-radius: 4px;
    color: var(--text-main, #1e293b);
    background: var(--bg-body, #fff);
    padding: 4px 7px;
    font: inherit;
    cursor: pointer;
    min-height: 25px;
}
.mg-motion button:disabled,
.mg-motion select:disabled { cursor: default; opacity: 0.6; }
.mg-motion button:focus-visible,
.mg-motion select:focus-visible,
.mg-motion input:focus-visible { outline: 2px solid var(--primary-color, #004C99); outline-offset: 2px; }
.mg-motion-phase { color: var(--text-muted, #64748b); text-align: right; }
.mg-motion-controls { flex-wrap: wrap; }
.mg-motion-controls > label:first-child { flex: 1 1 220px; }
#mgMotionSelect { min-width: 90px; width: 100%; flex: 1; text-overflow: ellipsis; }
.mg-motion-scrub-label { flex: 0 1 202px; white-space: nowrap; }
#mgMotionScrub { min-width: 70px; width: 112px; accent-color: var(--mg-packet-color); margin: 0; }
#mgMotionPercent { font-variant-numeric: tabular-nums; min-width: 30px; }
#mgMotionBody:not([hidden]) { margin-top: 5px; }
#mgMotionDiagram { display: block; width: 100%; height: 88px; overflow: visible; margin: 2px 0 0; }
.mg-motion-track { stroke: var(--border-color, #d9dfe8); stroke-width: 3; fill: none; }
.mg-motion-trail { stroke: var(--mg-packet-color); stroke-width: 4; fill: none; stroke-dasharray: 4 5; opacity: 0.65; }
.mg-motion-anchor-label { fill: var(--text-muted, #64748b); font: 9px system-ui, sans-serif; letter-spacing: 1px; }
.mg-motion-ghost-box { fill: var(--bg-body, #fff); stroke: var(--mg-packet-color); stroke-width: 1.5; stroke-dasharray: 4 3; opacity: 0.6; }
.mg-motion-ghost-tag,
.mg-motion-ghost-label { fill: var(--text-muted, #64748b); opacity: 0.7; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.mg-motion-ghost-tag { font-size: 10px; }
.mg-motion-ghost-label { font-size: 13px; }
.mg-motion-card-box { fill: var(--mg-packet-color); stroke: var(--bg-card, #fff); stroke-width: 2; }
.mg-motion-fingerprint { fill: #fff; stroke: #fff; stroke-width: 0.8; }
.mg-motion-card-tag { fill: #fff; font: 10px ui-monospace, SFMono-Regular, Consolas, monospace; }
.mg-motion-card-label { fill: #fff; font: 700 14px ui-monospace, SFMono-Regular, Consolas, monospace; }
.mg-motion-arrival { fill: var(--mg-packet-color); stroke: var(--mg-packet-color); stroke-width: 8; }
.mg-motion-destination-dot { fill: var(--mg-packet-color); }
#mgMotionBody[hidden] { display: none; }
@media (max-width: 700px) {
    .mg-motion { padding-left: 7px; padding-right: 7px; }
    .mg-motion-header { align-items: flex-start; }
    .mg-motion-phase { max-width: 46%; font-size: 10px; }
    .mg-motion-controls { gap: 5px; }
    /* Keep the moving element visible in a short expanded viewport. The
       shared controls remain directly below it in the scrollable detail pane. */
    #mgMotionBody { display: flex; flex-direction: column; }
    #mgMotionBody[hidden] { display: none; }
    #mgMotionDiagram { order: -1; flex-shrink: 0; }
    .mg-motion-controls > label:first-child { flex-basis: 100%; }
    .mg-motion-scrub-label { flex: 1 1 145px; }
    #mgMotionScrub { flex: 1; width: 80px; }
}
@media (prefers-reduced-motion: reduce) {
    .mg-motion * { animation: none !important; transition: none !important; }
}