/* The timeline sits in #center, which Text Size does not zoom (ui-scale.css zooms only the chrome containers): its controls' optical
   centring (control-centring.css --ctl-z) must see the UI Scale only, not UI Scale x Text Size. */
#sphere-workspace-timeline,.sphere-workspace-timeline{--osiris-chrome-zoom:var(--osiris-ui-zoom,1)}
/* Bottom Directions timeline: sits BENEATH the sphere canvas (never over it).
   Heights are fixed per size so the canvas reservation is stable. */
.sphere-workspace-timeline{--swt-ac:var(--ac,#74d9ff);--swt-label:172px;box-sizing:border-box;display:flex;flex-direction:column;gap:4px;height:150px;overflow:hidden;color:var(--tx,#eaf5ff);background:var(--sf,#101b29);border:1px solid var(--bd,#41566f);border-radius:12px;padding:6px 10px;font:12px/1.35 var(--ui-font)}
.sphere-workspace-timeline[data-size=collapsed]{height:40px}
.sphere-workspace-timeline[data-size=expanded]{height:228px}
.sphere-workspace-timeline[data-size=collapsed] .swt-body{display:none}
.swt-header{display:flex;align-items:center;gap:8px;min-height:26px;flex:none;overflow:hidden}
.swt-title{white-space:nowrap}
.swt-range{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--td,#b9cadb);font-size:11px}
.swt-segment{display:inline-flex;gap:2px;flex:none}

.swt-btn[aria-pressed=true]{border-color:var(--swt-ac);background:color-mix(in srgb,var(--swt-ac) 16%,transparent);font-weight:650}


.swt-body{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:3px}
.swt-axis-label{font-size:var(--fs-caption);color:var(--td,#b9cadb)}
.sphere-workspace-timeline[data-size=compact] .swt-axis-label{display:none}
.swt-ruler{position:relative;height:13px;margin-left:calc(var(--swt-label) + 8px);flex:none;font-size:var(--fs-caption);color:var(--td,#b9cadb);}
.swt-tick{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap;font-variant-numeric:tabular-nums}
.swt-tick::before{content:"";position:absolute;left:50%;top:11px;width:1px;height:3px;background:currentColor}
.sphere-workspace-timeline-track{height:12px;margin:0 0 2px calc(var(--swt-label) + 8px);flex:none;position:relative;border-radius:999px;background:color-mix(in srgb,var(--swt-ac) 14%,var(--bg,#07111c));outline:none;cursor:ew-resize;touch-action:none}
.sphere-workspace-timeline-track:focus-visible{outline:2px solid var(--swt-ac);outline-offset:2px}
.sphere-workspace-timeline-track[aria-disabled]{cursor:default;opacity:.6}
.sphere-workspace-timeline-cursor{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--swt-ac);transform:translateX(-50%);pointer-events:none}
.sphere-workspace-timeline-lanes{display:grid;gap:3px;touch-action:none;cursor:grab}
.sphere-workspace-timeline-lane{display:grid;grid-template-columns:var(--swt-label) 1fr;align-items:center;gap:8px}
.sphere-workspace-timeline-lane>span{font-size:11px;color:var(--td,#b9cadb);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sphere-workspace-timeline-marks{height:14px;position:relative;overflow:hidden;border-top:1px solid color-mix(in srgb,var(--bd,#41566f) 70%,transparent)}
.sphere-workspace-timeline-mark{position:absolute;top:-4px;width:9px;height:9px;border:1px solid var(--swt-ac);border-radius:50%;padding:0;transform:translateX(-50%);background:var(--sf,#101b29);cursor:pointer}
.sphere-workspace-timeline-lane[data-lane$=":converse"] .sphere-workspace-timeline-mark{border-radius:2px;border-color:var(--a2,#f2c078)}
.sphere-workspace-timeline-mark[aria-current=true]{background:var(--swt-ac);box-shadow:0 0 0 3px color-mix(in srgb,var(--swt-ac) 35%,transparent);z-index:1}
.swt-detail{margin:0;font-size:11px;color:var(--td,#b9cadb);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:1300px){.swt-title{display:none}}
/* The real direction list docked in the right-panel Directions tab. These
   override the floating tool-window geometry (position:fixed!important) only
   while [data-docked] is set; the popup keeps its own styling. */
#sphere-direction-list[data-docked]{position:relative!important;inset:auto!important;left:auto!important;top:auto!important;width:auto!important;min-width:0!important;max-width:none!important;height:clamp(380px,calc(100vh - 290px),960px)!important;min-height:0!important;max-height:none!important;z-index:auto!important;box-shadow:none!important;border-radius:10px!important;margin:0;container-type:inline-size;font-size:12px!important}
#sphere-direction-list[data-docked]>header,#sphere-direction-list[data-docked] #sphere-list-resize{display:none!important}
#sphere-direction-list[data-docked]>:not(header):not(#sphere-list-resize){margin:0 6px 6px!important}
#sphere-direction-list[data-docked]>.sphere-list-tools{margin-top:6px;padding:4px 2px!important;gap:4px 10px!important}
#sphere-direction-list[data-docked] #sphere-list-status{margin:2px 4px 4px;min-height:1.4em;font-size:11px}
#sphere-direction-list[data-docked] #sphere-list-viewport{margin-bottom:6px}
#sphere-direction-list[data-docked] :is(button,select,input:not([type=checkbox])){min-height:26px!important;padding:3px 7px!important;font-size:11px!important}
#sphere-direction-list .sphere-list-filters{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
#sphere-direction-list .sphere-list-filters input[type=search]{flex:1 1 140px;min-width:0}
#sphere-direction-list[data-docked] .sphere-list-tabs{display:flex;gap:4px}
#sphere-direction-list[data-state=failed] #sphere-list-status{color:var(--er,#ff9d8a)}
#sphere-direction-list[data-state=unavailable] #sphere-list-status,#sphere-direction-list[data-state=empty] #sphere-list-status{color:var(--td,#b9cadb);font-style:italic}
#sphere-direction-list table:not(.sphere-list-compact) th.col-date{width:17%}#sphere-direction-list table:not(.sphere-list-compact) th.col-promissor{width:13%}#sphere-direction-list table:not(.sphere-list-compact) th.col-aspect{width:11%}#sphere-direction-list table:not(.sphere-list-compact) th.col-target{width:15%}#sphere-direction-list table:not(.sphere-list-compact) th.col-sense{width:5%}#sphere-direction-list table:not(.sphere-list-compact) th.col-method{width:11%}#sphere-direction-list table:not(.sphere-list-compact) th.col-arc{width:11%}#sphere-direction-list table:not(.sphere-list-compact) th.col-age{width:8%}#sphere-direction-list table:not(.sphere-list-compact) th.col-orb{width:9%}
#sphere-direction-list table:not(.sphere-list-compact) :is(th,td){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#sphere-direction-list[data-docked] table :is(th,td){padding:3px 4px;font-size:11px}
#sphere-direction-list table:not(.sphere-list-compact) td.col-date button{width:100%;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-height:0!important;padding:3px 4px!important}
#sphere-direction-list tr[data-index]{cursor:pointer}
#sphere-direction-list tr[data-sense=C] td.col-sense{color:var(--a2,#f2c078);font-weight:650}
#sphere-direction-list td.sphere-list-filtered{white-space:normal;font-style:italic;color:var(--td,#b9cadb)}
@container (max-width:560px){#sphere-direction-list table:not(.sphere-list-compact) :is(th,td):is(.col-arc,.col-age){display:none}#sphere-direction-list table:not(.sphere-list-compact) th.col-date{width:23%}#sphere-direction-list table:not(.sphere-list-compact) th.col-promissor{width:16%}#sphere-direction-list table:not(.sphere-list-compact) th.col-aspect{width:14%}#sphere-direction-list table:not(.sphere-list-compact) th.col-target{width:18%}#sphere-direction-list table:not(.sphere-list-compact) th.col-sense{width:7%}#sphere-direction-list table:not(.sphere-list-compact) th.col-method{width:12%}#sphere-direction-list table:not(.sphere-list-compact) th.col-orb{width:10%}}
/* Constellation tree (plan E3). */
#sphere-direction-list .sphere-passage-tree details{border-bottom:1px solid var(--bd,#41566f);padding:5px 0}
#sphere-direction-list .sphere-passage-tree summary{cursor:pointer;display:flex;flex-wrap:wrap;gap:2px 8px;align-items:baseline}
#sphere-direction-list .sphere-passage-band{font-variant-numeric:tabular-nums;font-weight:650}
#sphere-direction-list .sphere-passage-method,#sphere-direction-list .sphere-passage-sense{font-size:11px;padding:0 5px;border:1px solid var(--bd,#41566f);border-radius:5px}
#sphere-direction-list .sphere-passage-coverage{flex-basis:100%;color:var(--td,#b9cadb)}
#sphere-direction-list .sphere-passage-stars button{display:grid;gap:1px;width:100%;text-align:left;margin:4px 0 0;padding:4px 7px!important;min-height:0!important}
#sphere-direction-list .sphere-passage-stars button span{font-size:11px;color:var(--td,#b9cadb)}
#sphere-direction-list .sphere-passage-stars button.selected{outline:2px solid var(--ac,#74d9ff);outline-offset:-2px}
.sphere-workspace-directions-dock{display:grid;gap:8px;color:var(--tx,#eaf5ff)}.sphere-workspace-dock-toolbar{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.sphere-workspace-dock-toolbar button,.sphere-workspace-direction-row,.sphere-workspace-constellation-event{font:inherit;color:inherit;background:var(--sf,#101b29);border:1px solid var(--bd,#41566f);border-radius:7px;padding:6px 8px;cursor:pointer}.sphere-workspace-dock-toolbar button[aria-pressed=true]{border-color:var(--ac,#74d9ff);font-weight:650}.sphere-workspace-dock-status{margin:0;color:var(--td,#b9cadb)}.sphere-workspace-dock-body{max-block-size:min(52vh,620px);overflow:auto}.sphere-workspace-direction-rows{margin:0;padding:0;list-style:none;display:grid;gap:4px}.sphere-workspace-direction-row,.sphere-workspace-constellation-event{display:block;width:100%;text-align:left}.sphere-workspace-direction-row[aria-current=true],.sphere-workspace-constellation-event[aria-current=true]{outline:2px solid var(--ac,#74d9ff);outline-offset:-2px}.sphere-workspace-constellation-tree details{border-bottom:1px solid var(--bd,#41566f);padding:7px 0}.sphere-workspace-constellation-tree summary{cursor:pointer}.sphere-workspace-constellation-event{margin:5px 0 0 14px;width:calc(100% - 14px)}

/* Direct / converse lanes, natal ghosts, candidate note and the hover readout. */
.swt-lane-wrap{position:relative}
.sphere-workspace-timeline-lane[data-sense=direct] .sphere-workspace-timeline-mark{border-color:var(--swt-ac)}
.sphere-workspace-timeline-lane[data-sense=converse] .sphere-workspace-timeline-mark{border-radius:2px;border-color:var(--a2,#f2c078)}
.sphere-workspace-timeline-lane[data-sense=converse] .sphere-workspace-timeline-mark[aria-current=true]{background:var(--a2,#f2c078);box-shadow:0 0 0 3px color-mix(in srgb,var(--a2,#f2c078) 35%,transparent)}
.sphere-workspace-timeline-ghost{position:absolute;top:-2px;width:5px;height:5px;border-radius:50%;transform:translateX(-50%);background:color-mix(in srgb,var(--td,#b9cadb) 55%,transparent);pointer-events:none}
.sphere-workspace-timeline[data-candidate=true] .sphere-workspace-timeline-lane[data-sense=direct] .sphere-workspace-timeline-mark{background:color-mix(in srgb,var(--swt-ac) 35%,var(--sf,#101b29))}
.sphere-workspace-timeline[data-candidate=true] .sphere-workspace-timeline-lane[data-sense=converse] .sphere-workspace-timeline-mark{background:color-mix(in srgb,var(--a2,#f2c078) 35%,var(--sf,#101b29))}
.swt-candidate{font-size:var(--fs-caption);color:var(--a2,#f2c078);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.swt-hover-line{position:absolute;top:0;bottom:0;width:1px;background:color-mix(in srgb,var(--tx,#eaf5ff) 55%,transparent);pointer-events:none;transform:translateX(-50%)}
.swt-hover{position:absolute;z-index:3;bottom:calc(100% - 4px);max-width:min(520px,70%);padding:5px 8px;border:1px solid var(--bd,#41566f);border-radius:8px;background:color-mix(in srgb,var(--sf,#101b29) 94%,transparent);box-shadow:0 6px 18px color-mix(in srgb,#000 35%,transparent);font-size:11px;line-height:1.35;pointer-events:none}
.swt-hover-at{font-variant-numeric:tabular-nums;color:var(--td,#b9cadb);margin-bottom:2px}
.swt-hover-row{display:grid;grid-template-columns:1.2em 1fr;gap:6px;align-items:baseline}
.swt-hover-row b{font-weight:750}
.swt-hover-row[data-sense=direct] b{color:var(--swt-ac)}
.swt-hover-row[data-sense=converse] b{color:var(--a2,#f2c078)}
.swt-hover-none{color:var(--td,#b9cadb);font-style:italic}
.swt-body{position:relative}
.sphere-workspace-timeline[data-size=expanded] .sphere-workspace-timeline-marks{height:18px}
.swt-scan[aria-pressed=true]{border-color:var(--swt-ac);background:color-mix(in srgb,var(--swt-ac) 16%,transparent);font-weight:650}
.swt-detail[data-hover=true]{display:flex;flex-wrap:wrap;gap:2px 14px;align-items:baseline;white-space:normal;color:var(--tx,#eaf5ff)}
.swt-detail[data-hover=true] .swt-hover-row{display:inline-flex;gap:6px;min-width:0;max-width:100%}
.swt-detail[data-hover=true] .swt-hover-list{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:min(560px,100%)}
.sphere-workspace-timeline[data-size=compact] .swt-detail[data-hover=true]{max-height:2.8em;overflow:hidden}
.swt-ruler{overflow:visible}
@media (max-width:1300px){.sphere-workspace-timeline{--swt-label:132px}}
/* Butterfly wings: per method, the Direct lane (ticks rise) sits on the Converse lane (ticks hang) across one
   shared age axis; both read left to right in age, so equal ages line up vertically. */
.sphere-workspace-timeline-lanes{gap:7px}
.swt-wing{display:grid;gap:0;position:relative}
.sphere-workspace-timeline-lane[data-wing] .sphere-workspace-timeline-marks{height:15px;border:0;overflow:visible}
.sphere-workspace-timeline[data-size=expanded] .sphere-workspace-timeline-lane[data-wing] .sphere-workspace-timeline-marks{height:22px}
.sphere-workspace-timeline-lane[data-wing=up] .sphere-workspace-timeline-marks{box-shadow:inset 0 -1px 0 color-mix(in srgb,var(--tx,#eaf5ff) 45%,transparent)}
.swt-wing>.sphere-workspace-timeline-lane[data-wing=down]:first-child .sphere-workspace-timeline-marks{box-shadow:inset 0 1px 0 color-mix(in srgb,var(--tx,#eaf5ff) 45%,transparent)}
.sphere-workspace-timeline-lane[data-wing] .sphere-workspace-timeline-mark{top:auto;bottom:auto;width:11px;height:calc(100% - 1px);border:0;border-radius:0;background:transparent;box-shadow:none;padding:0}
.sphere-workspace-timeline-lane[data-wing=up] .sphere-workspace-timeline-mark{bottom:1px;color:var(--swt-ac)}
.sphere-workspace-timeline-lane[data-wing=down] .sphere-workspace-timeline-mark{top:0;color:var(--a2,#f2c078)}
.sphere-workspace-timeline-lane[data-wing] .sphere-workspace-timeline-mark::before{content:"";position:absolute;left:5px;width:1px;background:currentColor;opacity:.75}
.sphere-workspace-timeline-lane[data-wing] .sphere-workspace-timeline-mark::after{content:"";position:absolute;left:2px;width:7px;height:7px;box-sizing:border-box;border:1.5px solid currentColor;background:var(--sf,#101b29)}
.sphere-workspace-timeline-lane[data-wing=up] .sphere-workspace-timeline-mark::before{bottom:0;top:5px}
.sphere-workspace-timeline-lane[data-wing=up] .sphere-workspace-timeline-mark::after{top:0;border-radius:50%}
.sphere-workspace-timeline-lane[data-wing=down] .sphere-workspace-timeline-mark::before{top:0;bottom:5px}
.sphere-workspace-timeline-lane[data-wing=down] .sphere-workspace-timeline-mark::after{bottom:0;border-radius:1px}
.sphere-workspace-timeline-lane[data-wing] .sphere-workspace-timeline-mark[aria-current=true]{z-index:1;background:transparent;box-shadow:none}
.sphere-workspace-timeline-lane[data-wing] .sphere-workspace-timeline-mark[aria-current=true]::after{background:currentColor;box-shadow:0 0 0 3px color-mix(in srgb,currentColor 35%,transparent)}
.sphere-workspace-timeline-lane[data-wing] .sphere-workspace-timeline-mark[aria-current=true]::before{opacity:1;width:2px;left:4.5px}
.sphere-workspace-timeline[data-candidate=true] .sphere-workspace-timeline-lane[data-wing] .sphere-workspace-timeline-mark{background:transparent}
.sphere-workspace-timeline[data-candidate=true] .sphere-workspace-timeline-lane[data-wing] .sphere-workspace-timeline-mark:not([aria-current=true])::after{background:color-mix(in srgb,currentColor 35%,var(--sf,#101b29))}
/* Natal ghosts sit on the shared axis, so the slide away from them reads as the candidate's displacement. */
.sphere-workspace-timeline-lane[data-wing] .sphere-workspace-timeline-ghost{top:auto;width:5px;height:5px}
.sphere-workspace-timeline-lane[data-wing=up] .sphere-workspace-timeline-ghost{bottom:-2px}
.sphere-workspace-timeline-lane[data-wing=down] .sphere-workspace-timeline-ghost{top:-2px;border-radius:1px}
.sphere-workspace-timeline[data-sliding=true] .sphere-workspace-timeline-mark{transition:left .36s cubic-bezier(.2,.7,.2,1)}
@media (prefers-reduced-motion:reduce){.sphere-workspace-timeline[data-sliding=true] .sphere-workspace-timeline-mark{transition:none}}