/* Optional inspection uses actual frames and leaves the original play loop simple. */
.route-watch-controls{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0}
.route-watch-controls button{min-width:44px;min-height:44px;font-size:11px;padding:8px 11px;border-color:#6c93a6;background:#253e52;color:#e1f4fc}
.route-watch-controls button[aria-pressed=true]{background:#426176;border-color:#9dd7e4}
#observe-next{border-color:#d9aa7d;background:#594331;color:#ffe1bc}
#observe-note{flex-basis:100%;color:#afc9db;font-size:10px;line-height:1.5;margin:0}
.motion:has(.route-watch-controls:not([hidden])){flex-wrap:wrap}
.motion:has(.route-watch-controls:not([hidden])) .motion-copy{flex-basis:100%}
.motion:has(.route-watch-controls:not([hidden])) #sound{margin-left:auto}
.route-watch-layer{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.route-watch-layer svg{position:absolute;inset:0;width:100%;height:100%;stroke:#9cdce7;stroke-width:1.5;fill:#9cdce7;opacity:.7}
.route-action-card{position:absolute;left:0;top:0;width:max-content;max-width:min(225px,calc(100% - 16px));display:grid;gap:3px;padding:8px 10px;background:#132a39f2;border:1px solid #6ba5b6;border-radius:11px;box-shadow:0 5px 15px #0004;line-height:1.4}
.route-action-card small{font-size:9px;color:#a8c5d4}.route-action-card b{font-size:12px;color:#d4f5ff}.route-action-card span{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#ffd0a0;max-width:100%;min-width:0}
.route-action-card[data-mode=paused]{background:#263c4cef;border-color:#e8bf92}.route-action-card[data-mode=paused] small{color:#ffe0ba}
@media(max-width:800px) and (min-height:601px){.field:has(.route-watch-controls:not([hidden])){height:clamp(425px,59dvh,540px)}.motion:has(.route-watch-controls:not([hidden])){min-height:110px;padding:7px 10px}.route-action-card{max-width:min(200px,calc(100% - 16px))}}
@media(max-height:600px) and (min-width:600px){.motion:has(.route-watch-controls:not([hidden])){min-height:105px}.route-action-card{max-width:195px;padding:6px 8px}.route-action-card b{font-size:10px}.route-action-card span{font-size:9px}.route-action-card small{font-size:8px}}
