/* Direction Lab: native theme, stable controls, independently collapsible scales. */
/* The Lab panels deliberately extend into the canvas row.  Keep the complete
 * transport grid item above the canvas's stacking context, not merely its
 * child panel, so an open dropdown remains visible and clickable. */
#sphere-transport{grid-area:nv;position:relative;z-index:1100;isolation:isolate;display:flex;flex-wrap:wrap;gap:0;padding:6px 8px;background:var(--pn);color:var(--tx);border-bottom:1px solid var(--bd);font:13px/1.4 TopoGlyph,system-ui,sans-serif;min-width:0;overflow:visible;max-height:none;box-sizing:border-box}
#sphere-transport[hidden],#sphere-transport [hidden]{display:none!important}
#app.nav-enabled{grid-template-rows:auto auto auto auto minmax(0,1fr);grid-template-areas:'hd hd hd' 'dy dy dy' 'db db db' 'nv nv nv' 'sb cv rp'}
#sphere-transport *{box-sizing:border-box}
#sphere-transport :is(button,select,input,summary){font:inherit;color:var(--tx);accent-color:var(--ac)}
#sphere-transport :is(button,select,input:not([type=checkbox]):not([type=range])){min-height:32px;border:1px solid var(--bd);border-radius:6px;background:var(--bg,var(--pn));padding:5px 9px}
#sphere-transport button,#sphere-transport summary{cursor:pointer}
#sphere-transport button:hover,#sphere-transport summary:hover{background:color-mix(in srgb,var(--ac) 13%,var(--pn))}
#sphere-transport :is(button,input,select,summary):focus-visible,#wheel:focus-visible{outline:2px solid var(--ac);outline-offset:3px}
#sphere-transport button[aria-pressed=true]{background:var(--ac);color:var(--bg,#fff);border-color:var(--ac);font-weight:700}
#sphere-transport label{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
#sphere-transport input[type=checkbox]{width:16px;height:16px;margin:0;flex:none}
#sphere-transport input[type=number]{width:76px}
#sphere-transport select{max-width:100%}
#sphere-transport #sph-nav-panel-toggles{position:static;gap:6px;padding-bottom:4px;border-bottom:1px solid var(--bd);margin-bottom:5px;background:transparent}
#sph-nav-panel-toggles button{font-size:12px;min-height:26px;padding:3px 8px}
#sphere-transport #sph-nav-lab-body{display:flex;align-items:center;gap:10px 16px}
.sph-nav-presets{display:flex;flex-wrap:wrap;align-items:center;gap:12px;width:100%}
.sph-nav-presets [role=group]{display:flex;flex-wrap:wrap;gap:4px}
#sph-nav-direction-lab{font-weight:700;min-width:140px}
#sph-nav-action{display:block;width:100%;font-size:14px;font-weight:600;padding:9px 12px;background:color-mix(in srgb,var(--ac) 9%,var(--pn));border-left:3px solid var(--ac);border-radius:0 5px 5px 0}
.sph-nav-contact-row{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px 16px;width:100%}
#sphere-transport fieldset{display:flex!important;flex-wrap:wrap;gap:5px!important;border:0!important;margin:0!important;padding:0!important;min-width:0;border-radius:0!important}
#sphere-transport legend{font-size:11px;font-weight:700;color:var(--tx);letter-spacing:.06em;text-transform:uppercase;margin-bottom:5px;padding:0}
#sphere-transport fieldset label{padding:5px 7px;border:1px solid transparent;border-radius:5px;min-height:30px;background:color-mix(in srgb,var(--tx) 4%,var(--pn))}
#sphere-transport fieldset label:has(input:checked){background:color-mix(in srgb,var(--ac) 12%,var(--pn));border-color:color-mix(in srgb,var(--ac) 45%,var(--bd))}
#sphere-transport fieldset label:has(input:disabled){opacity:.55}
.sph-nav-contact-name{font-size:12px}
.sph-nav-context{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.sph-nav-transport-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;border-top:1px solid var(--bd);padding-top:10px;width:100%}
#sph-nav-time-controls{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
#sph-nav-play{min-width:64px;font-weight:700}
#sph-nav-unit{font-size:12px;margin-right:8px}
.sph-nav-tools{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px;width:100%}
#sphere-transport details{position:relative;flex:0 1 auto;min-width:0}
#sphere-transport summary{padding:6px 9px;border:1px solid var(--bd);border-radius:6px;list-style-position:inside;min-height:32px}
#sphere-transport details[open]>summary{background:color-mix(in srgb,var(--ac) 10%,var(--pn));font-weight:600}
.sph-nav-method-caption{font-size:12px;margin-left:8px;opacity:.85}
.sph-nav-tool-content{position:absolute;top:100%;left:0;z-index:120;width:max-content;max-width:min(560px,calc(100vw - 40px));padding:14px;margin-top:5px;background:var(--pn);border:1px solid var(--bd);border-radius:8px;box-shadow:0 8px 28px #0003}
#sphere-transport .sph-nav-tool-content p{font-size:13px!important;line-height:1.5;max-width:480px!important;margin:6px 0!important}
#sphere-transport .sph-nav-tool-content fieldset+fieldset{margin-top:12px!important}
#sph-nav-readout{width:100%;font:12px/1.4 TopoGlyph,ui-monospace,monospace;color:var(--td);overflow-wrap:anywhere}
#sph-nav-scales-body{margin-top:4px;min-width:0}
#sphere-transport #sph-nav-direction-ages{margin:0!important;padding:4px 6px!important}
.sph-scales-heading{display:flex;align-items:baseline;gap:6px;margin-bottom:3px;font-size:10px;color:#b7d4df}
.sph-scales-heading strong{font-size:10px;color:#b8efff}
.sph-scales-arc{font-size:12px;font-weight:800;color:#fff}
.sph-scales-grid{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px}
.sph-scales-grid [data-scale-cell]{min-width:0;position:relative}
.sph-scale-code{font-size:10px;font-weight:700;color:#9eeaff;line-height:1.3}
.sph-scale-age{font-size:12px;font-weight:700;color:#fff;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sph-scale-date{font-size:10px;color:#d7f3ff;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sph-scale-date:focus{position:absolute;top:100%;left:0;z-index:2;width:max-content;max-width:calc(100vw - 32px);white-space:normal;padding:2px 4px;background:var(--pn);outline:1px solid var(--ac)}
.sph-scales-grid [data-scale-cell]:nth-last-child(-n+4) .sph-scale-date:focus{left:auto;right:0}
#sphere-transport .sph-scales-grid button{display:block;min-height:24px;max-width:100%;margin:0 0 2px;padding:2px 4px;font-size:11px;line-height:1.2;white-space:nowrap;border-radius:4px}
.sph-scales-grid [data-scale-cell="SRLR"]{display:flex;flex-direction:column;align-items:flex-start}
.sph-scales-grid [data-scale-cell="SRLR"] .sph-scale-code{order:1}
@media(max-width:600px){.sph-scales-grid{grid-auto-columns:minmax(53px,1fr);gap:3px}}
@media(max-width:1100px){.sph-nav-contact-name{display:inline}.sph-nav-presets [data-lab-system]{padding:5px 7px}.sph-nav-tools{gap:5px}.sph-nav-method-caption{display:none}}
@media(max-width:650px){#sphere-transport{padding:8px}#sphere-transport #sph-nav-lab-body{gap:8px}.sph-nav-presets{gap:7px}.sph-nav-presets [role=group]{gap:4px}.sph-nav-presets [data-lab-system]{font-size:12px}.sph-nav-tool-content{position:static;width:100%;max-width:100%;box-shadow:none}.sph-nav-tools details[open]{flex-basis:100%}#sph-nav-time-controls{gap:5px}#sph-nav-unit{flex-basis:auto}#sphere-transport #sph-nav-panel-toggles{flex-wrap:wrap}#sph-nav-action{font-size:13px}#sph-nav-advance-date-value{max-width:100%}}

#sph-nav-contact-settings .sph-nav-tool-content{width:650px;max-width:min(720px,calc(100vw - 40px))}#sph-nav-contact-settings .sph-nav-context{margin-top:14px}#sph-nav-contact-settings .sph-nav-contact-row{gap:12px}#sph-nav-contact-settings .sph-nav-method-caption{display:inline}#sphere-transport #sph-nav-contacts{flex-basis:100%}

.sph-nav-title{font-size:17px;font-weight:600;letter-spacing:-.02em}#sphere-transport #sph-nav-direction-lab{min-width:76px}

.sph-scale-clock{margin-top:5px;font-variant-numeric:tabular-nums;line-height:1.3}
.sph-scale-clock>span:first-child{display:block;font-size:9px;font-weight:600;opacity:.8}
.sph-scale-offset{font-size:10px}

.sph-scale-clock .sph-scale-date{white-space:normal;overflow-wrap:anywhere;color:var(--tx);font-size:10px}
.sph-scale-clock .sph-scale-age{font-size:10px;color:var(--tx);white-space:nowrap}