/* Workspace shell — owned header + ONE time row + the Systems / View tray (plan Phase 1).
 * Loads AFTER osiris-controls.css (it reuses .o-pill / .o-seg / .o-menu, the Direction Lab pill idiom).
 * Every selector is prefixed `html:not(#o)` (= one ID) so it beats the legacy blanket rules
 * (#header button, #sphere-transport …) wherever the integrator mounts it. Colours: theme anchors only.
 * Type: sans-serif (--o-font), never the monospace --text-font. */

/* ── Header ─────────────────────────────────────────────────────────────────────────────── */
html:not(#o) .ws-header{box-sizing:border-box;display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;flex:1 1 100%;width:100%;min-width:0;
  font:500 12px/1.2 var(--o-font);color:var(--tx)}
html:not(#o) .ws-logo{flex:none;margin-right:4px;font:700 15px/1 var(--title-font,serif);letter-spacing:.2em;color:var(--tb,#eef0fb);white-space:nowrap}
html:not(#o) .ws-dates{display:inline-flex;align-items:center;gap:6px;min-width:0;flex:0 1 auto}
html:not(#o) .ws-dates:not(:has(>.ws-date:not([hidden]))){display:none}
html:not(#o) .o-pill.ws-date{gap:0;cursor:default;min-width:0;font-weight:600;color:var(--td,#aebbd2);font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;
  background:color-mix(in srgb,var(--tx,#d6d8ea) 4%,var(--pn,#13111f))}
html:not(#o) .o-pill.ws-date:not(:disabled):hover{border-color:var(--bd,#2a2348);color:var(--td,#aebbd2)}
html:not(#o) .o-pill.ws-date[hidden]{display:none}
html:not(#o) .ws-date-k{color:var(--td,#aebbd2);font-weight:600}
html:not(#o) .o-pill.ws-phour[data-stale=true]{opacity:.6}
html:not(#o) .ws-date-sep{white-space:pre;opacity:.7}
html:not(#o) .ws-date-v,html:not(#o) .ws-date-vs{color:var(--tx,#d6d8ea);min-width:0;overflow:hidden;text-overflow:ellipsis}
html:not(#o) .ws-date-vs{display:none}
html:not(#o) .ws-date-vs::before{content:attr(data-v)}
html:not(#o) .ws-logout-ico{display:none}
html:not(#o) .ws-actions{display:flex;align-items:center;gap:6px;margin-left:auto;flex:none;min-width:0}
html:not(#o) .ws-actions .o-pill[hidden]{display:none}
html:not(#o) .ws-iconlabel .ws-ico{display:block;flex:none}
html:not(#o) .ws-gear .ws-ico{font-size:15px;line-height:1}
html:not(#o) .o-pill.ws-bug{color:color-mix(in srgb,var(--mars,#e05242) 75%,var(--tx,#d6d8ea))}

/* ── Time row ───────────────────────────────────────────────────────────────────────────── */
html:not(#o) .ws-timebar{box-sizing:border-box;display:block;width:100%;min-width:0;max-width:100%;flex:1 1 100%;font:500 12px/1.2 var(--o-font);color:var(--tx)}
html:not(#o) .ws-time{box-sizing:border-box;display:flex;align-items:center;flex-wrap:wrap;gap:6px;width:100%;min-width:0;padding:6px 8px}
html:not(#o) .ws-cluster{display:inline-flex;align-items:center;gap:6px;min-width:0;flex-wrap:nowrap}
html:not(#o) .ws-tail{margin-left:auto}
html:not(#o) .ws-grow{display:none}
html:not(#o) .ws-transport{display:inline-flex;align-items:center;gap:4px}
html:not(#o) .ws-time .o-pill[hidden],html:not(#o) .ws-time .o-seg[hidden]{display:none}
html:not(#o) .ws-chips{display:inline-flex;align-items:center;gap:4px;min-width:0}
html:not(#o) .ws-chips[hidden],html:not(#o) .ws-chips:empty{display:none}
html:not(#o) .ws-lab .ws-short{display:none}
html:not(#o) .o-pill.ws-play{min-width:58px}
html:not(#o) .ws-datepill .ws-date-text{max-width:24ch;font-variant-numeric:tabular-nums}
html:not(#o) .ws-datepill .ws-date-text-s{display:none;font-variant-numeric:tabular-nums;white-space:nowrap}
html:not(#o) .ws-scale .ws-scale-short,html:not(#o) :is(#ws-radix,#ws-systems,#ws-controls) .ws-short{display:none}
html:not(#o) .ws-date-short{display:none}
html:not(#o) .ws-sweep .ws-val{color:var(--a2,#4fd8e8);font-weight:700}
html:not(#o) .ws-sweep .ws-val[hidden],html:not(#o) .ws-sweep .ws-val-tiny{display:none}
html:not(#o) .o-pill.ws-sweep:not(:disabled)[aria-expanded=true] .ws-val{color:var(--o-active-fg,#fff)}
html:not(#o) .o-pill.ws-live::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--td,#aebbd2);opacity:.55}
html:not(#o) .o-pill.ws-live[aria-pressed=true]::before{background:var(--a3,#74e0b4);opacity:1;box-shadow:0 0 0 2px color-mix(in srgb,var(--a3,#74e0b4) 30%,transparent)}
html:not(#o) .o-pill.ws-live[data-fixed=true]{opacity:.45}   /* ○ a fixed card is focused: Live does not move it */
html:not(#o) :is(.ws-timebar,.ws-header,.ws-tray) .o-pill .o-caret{display:inline-block;min-width:.8em;font-size:11px;text-align:center}
/* Panel toggles: the icon shows the state (filled = open); never the heavy black pressed pill. */
html:not(#o) .o-pill.ws-panel-tog[aria-pressed]:not(:disabled){background:var(--pn,#13111f);border-color:var(--bd,#2a2348);color:var(--td,#aebbd2);box-shadow:none;font-weight:600}
html:not(#o) .o-pill.ws-panel-tog[aria-pressed]:not(:disabled):hover{border-color:var(--ac,#9d8cff);color:var(--tb,#eef0fb);background:var(--pn,#13111f)}
html:not(#o) .ws-panel-ico{display:block}
html:not(#o) .ws-panel-tog .ws-panel-fill{opacity:.18;transition:opacity .15s var(--o-ease)}
html:not(#o) .ws-panel-tog[aria-pressed=true] .ws-panel-fill{opacity:1}

/* ── Tray: Systems | View — an overlay sheet beneath the row. It animates transform + opacity only, so opening it
 *    never changes the page layout (no canvas re-fit, clickable at once); wraps, scrolls inside, never overflows ── */
html:not(#o) .ws-timebar{position:relative}
html:not(#o) .ws-tray{position:absolute;left:0;right:0;top:100%;z-index:20;box-sizing:border-box;min-width:0;max-width:100%;
  background:var(--pn,#13111f);border-top:1px solid var(--bd,#2a2348);border-bottom:1px solid var(--bd,#2a2348);
  box-shadow:0 14px 28px -10px rgba(0,0,0,.55);
  opacity:0;transform:translateY(-6px);visibility:hidden;pointer-events:none;
  transition:opacity .14s var(--o-ease),transform .14s var(--o-ease),visibility 0s linear .14s}
html:not(#o) .ws-tray[data-open=true]{opacity:1;transform:none;visibility:visible;pointer-events:auto;
  transition:opacity .14s var(--o-ease),transform .14s var(--o-ease),visibility 0s}
html:not(#o) .ws-tray-inner{min-width:0;max-height:min(62vh,440px);overflow:auto;overscroll-behavior:contain}
html:not(#o) .ws-tray-content{box-sizing:border-box;display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;min-width:0;max-width:100%;padding:8px 10px 10px}
html:not(#o) .ws-group{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;min-width:0;max-width:100%}
html:not(#o) .ws-group-label{flex:none;font:700 var(--fs-caption)/1 var(--o-font);letter-spacing:.07em;text-transform:uppercase;color:var(--td,#aebbd2)}
html:not(#o) .ws-group-body{display:flex;align-items:center;flex-wrap:wrap;gap:5px;min-width:0;max-width:100%}
html:not(#o) .ws-group-body .o-seg{flex-wrap:wrap;max-width:100%}
html:not(#o) .ws-note{font:500 11px/1.3 var(--o-font);color:var(--td,#aebbd2);white-space:normal}
/* View items with a value: a labelled field pill (slider · number · drop-down) and read-only readouts */
html:not(#o) .o-pill.ws-field{gap:7px;cursor:default;padding-top:0;padding-bottom:0}
html:not(#o) .o-pill.ws-field:focus-within{border-color:var(--ac,#9d8cff)}
html:not(#o) .ws-field-label{color:var(--td,#aebbd2);font-weight:600}
html:not(#o) .ws-field-input{box-sizing:border-box;margin:0;font:600 12px/1.2 var(--o-font);color:var(--tx,#d6d8ea);font-variant-numeric:tabular-nums}
html:not(#o) .ws-field-input:focus-visible{outline:2px solid var(--a2,#4fd8e8);outline-offset:2px}
html:not(#o) .ws-field--range .ws-field-input{width:96px;height:16px;accent-color:var(--ac,#9d8cff);background:none;cursor:pointer}
html:not(#o) :is(.ws-field--number,.ws-field--select) .ws-field-input{height:calc(var(--o-h) - 8px);padding:0 6px;border:1px solid var(--bd,#2a2348);
  border-radius:calc(var(--o-radius) - 3px);background:color-mix(in srgb,var(--tx,#d6d8ea) 5%,var(--pn,#13111f))}
html:not(#o) .ws-field--number .ws-field-input{width:7ch}
html:not(#o) .ws-field--select .ws-field-input{max-width:200px;cursor:pointer}
html:not(#o) .ws-field-input[aria-invalid=true]{border-color:var(--mars,#e05242)}
html:not(#o) .ws-field-val{min-width:3.2ch;text-align:right;font-variant-numeric:tabular-nums}
html:not(#o) .ws-field-unit{color:var(--td,#aebbd2);margin-left:-3px}
html:not(#o) .o-pill.ws-readout{cursor:default;min-width:6ch;padding-left:4px;padding-right:4px;color:var(--a2,#4fd8e8);font-variant-numeric:tabular-nums;
  background:transparent;border-color:transparent}
html:not(#o) .o-pill.ws-readout:hover{border-color:transparent;color:var(--a2,#4fd8e8)}
/* Systems ▸ Directions: the active system's options pill, attached to its button (labels on/off · reading) */
html:not(#o) .ws-attach{display:inline-flex;align-items:stretch;min-width:0;max-width:100%}
html:not(#o) .ws-attach>.o-pill.has-options{border-top-right-radius:0;border-bottom-right-radius:0}
html:not(#o) .ws-sidepill{box-sizing:border-box;display:inline-flex;align-items:center;flex-wrap:wrap;gap:4px 8px;min-width:0;min-height:var(--o-h);
  padding:2px 6px 2px 8px;border:1px solid var(--bd,#2a2348);border-left:0;border-radius:0 var(--o-radius) var(--o-radius) 0;
  background:color-mix(in srgb,var(--ac,#9d8cff) 9%,var(--pn,#13111f))}
html:not(#o) .ws-sidepill .o-seg{align-items:center}
html:not(#o) .ws-side-label{padding:0 5px 0 4px;font:700 var(--fs-caption)/1 var(--o-font);letter-spacing:.07em;text-transform:uppercase;color:var(--td,#aebbd2)}
html:not(#o) .ws-side-note{color:var(--q3,#e0a05a)}
/* Phone: one Wheels pill (dot = the selected wheel's ring colour) stands in for the mini wheel chips */
html:not(#o) .o-pill.ws-wheels{display:none;gap:5px}
html:not(#o) .ws-wheels-label{max-width:6ch}
html:not(#o) .ws-wheel-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--ws-wc,var(--a2,#4fd8e8));box-shadow:0 0 0 2px color-mix(in srgb,var(--ws-wc,var(--a2,#4fd8e8)) 25%,transparent)}
html:not(#o) [data-ring="1"]>.ws-wheel-dot,html:not(#o) .ws-wheel-dot[data-ring="1"]{--ws-wc:var(--a2,#4fd8e8)}
html:not(#o) [data-ring="2"]>.ws-wheel-dot,html:not(#o) .ws-wheel-dot[data-ring="2"]{--ws-wc:var(--ac,#9d8cff)}
html:not(#o) [data-ring="3"]>.ws-wheel-dot,html:not(#o) .ws-wheel-dot[data-ring="3"]{--ws-wc:var(--a3,#74e0b4)}
html:not(#o) [data-ring="4"]>.ws-wheel-dot,html:not(#o) .ws-wheel-dot[data-ring="4"]{--ws-wc:var(--q3,#e0a05a)}
html:not(#o) [data-ring="5"]>.ws-wheel-dot,html:not(#o) .ws-wheel-dot[data-ring="5"]{--ws-wc:var(--q4,#c78cff)}
html:not(#o) .ws-ext{font-size:.9em;opacity:.75}
/* Bi-wheel hold (owner 2026-10-19): HOLD [Radix | Transit ASC] transits move — which wheel stays still while time plays */
html:not(#o) .o-seg.ws-hold{align-items:center;border-color:color-mix(in srgb,var(--a2,#4fd8e8) 45%,var(--bd,#2a2348))}
html:not(#o) .ws-hold-k{padding:0 4px 0 6px;font:700 var(--fs-caption,10px)/1 var(--o-font);letter-spacing:.07em;text-transform:uppercase;color:var(--a2,#4fd8e8)}
html:not(#o) .ws-hold-hint{padding:0 7px 0 4px;font:500 11px/1 var(--o-font);color:var(--td,#aebbd2);white-space:nowrap}
html:not(#o) .ws-hold-hint[hidden]{display:none}

/* ── Menus / date dialog ────────────────────────────────────────────────────────────────── */
html:not(#o) .o-menu.ws-menu{min-width:180px}
html:not(#o) .o-menu.ws-date-pop{min-width:250px;gap:6px}
html:not(#o) .ws-date-field{display:flex;flex-direction:column;gap:4px}
html:not(#o) .ws-date-field .o-menu-heading{padding:2px 2px 0}
html:not(#o) .ws-date-pop .o-menu-input{font-variant-numeric:tabular-nums}
html:not(#o) .ws-date-pop .o-menu-input[aria-invalid=true]{border-color:var(--mars,#e05242)}
html:not(#o) .ws-date-note{padding:0 2px}
html:not(#o) .ws-date-actions{display:flex;align-items:center;justify-content:space-between;gap:8px}
html:not(#o) .ws-date-actions .ws-date-note{flex:1;min-width:0}
html:not(#o) .ws-house-menu .o-hint{color:var(--q3,#e0a05a);opacity:1}

/* ── Narrower desktops: shorten labels before anything wraps ─────────────────────────────── */
@media (max-width:1240px){
  html:not(#o) .ws-sweep .ws-sweep-name{display:none}
  html:not(#o) .ws-datepill .ws-date-text{display:none}
  html:not(#o) .ws-datepill .ws-date-text-s{display:inline}
}
@media (max-width:1060px){
  html:not(#o) .ws-lab .ws-long{display:none}
  html:not(#o) .ws-lab .ws-short{display:inline}
}
/* Left panel closed → mini wheel chips sit at the row's left: compact labels earlier. */
@media (max-width:1440px){
  html:not(#o) .ws-time.ws-has-chips .ws-lab .ws-long,html:not(#o) .ws-time.ws-has-chips .ws-sweep .ws-sweep-name{display:none}
  html:not(#o) .ws-time.ws-has-chips .ws-lab .ws-short{display:inline}
}
@media (max-width:1240px){
  html:not(#o) .ws-hold-hint{display:none}
  html:not(#o) .ws-time.ws-has-chips .ws-datepill :is(.ws-date-text,.ws-date-text-s){display:none}
  html:not(#o) .ws-time.ws-has-chips .ws-datepill .ws-date-short{display:inline}
}

/* ── Phone: the row wraps to exactly two lines (clusters dissolve; the controls are ordered around a
 *    zero-height break), header to two lines ─────────────────────────────────────────────── */
html:not(#o) .ws-break{display:none}
@media (max-width:700px){
  html:not(#o) .ws-time{gap:6px 4px;padding:6px}
  html:not(#o) .ws-cluster{display:contents}
  html:not(#o) .ws-transport{gap:3px}
  html:not(#o) .ws-time .o-pill{padding-left:6px;padding-right:6px;gap:3px}
  html:not(#o) .ws-time .o-pill--icon{padding:0;width:30px}
  html:not(#o) .ws-time .o-seg>button{padding-left:8px;padding-right:8px}
  html:not(#o) .o-pill.ws-play{min-width:50px}
  html:not(#o) .ws-datepill :is(.ws-date-text,.ws-date-text-s){display:none}
  html:not(#o) .ws-datepill .ws-date-short{display:inline}
  html:not(#o) .ws-sweep .ws-sweep-name,html:not(#o) .ws-sweep .ws-val-long{display:none}
  html:not(#o) .ws-sweep .ws-val-tiny:not([hidden]){display:inline}
  html:not(#o) .ws-scale .ws-scale-name,html:not(#o) #ws-radix .ws-long{display:none}
  html:not(#o) .ws-scale .ws-scale-short,html:not(#o) :is(#ws-radix,#ws-systems,#ws-controls) .ws-short{display:inline}
  html:not(#o) :is(#ws-systems,#ws-controls) .ws-long{display:none}
  html:not(#o) .ws-transport{gap:2px}
  html:not(#o) .ws-transport .o-pill--icon{width:26px}
  /* line 1: ◀▮ | ●Wheels▾  ◀ Play ▶  D|C  Now  Live  ▮▶      line 2: Lab  Date▾  Sweep▾  Systems▸  View▸  Controls▾
     The mini wheel chips fold into the Wheels pill (its menu also opens the left panel, so it replaces ◀▮ while shown). */
  html:not(#o) #ws-toggle-sidebar{order:1}
  html:not(#o) .ws-time .ws-chips{display:none}
  /* basis = dot + caret, so it never pushes a control off line 1; it grows into the free room to show the name */
  html:not(#o) .o-pill.ws-wheels:not([hidden]){display:inline-flex;order:1;flex:1 1 38px;min-width:38px;max-width:max-content;justify-content:flex-start}
  html:not(#o) .ws-wheels .ws-wheels-label{min-width:0;flex:0 1 auto}
  html:not(#o) .ws-time:has(.ws-wheels:not([hidden])) #ws-toggle-sidebar{display:none}
  html:not(#o) .ws-transport{order:2}
  html:not(#o) .ws-dc{order:3}
  html:not(#o) #ws-now{order:4}
  html:not(#o) #ws-radix{order:4}
  html:not(#o) #ws-live{order:5}
  html:not(#o) #ws-toggle-right{order:6;margin-left:auto}
  html:not(#o) .ws-break{display:block;order:7;flex:1 0 100%;height:0}
  html:not(#o) .ws-lab{order:9}
  html:not(#o) .ws-datepill{order:10}
  html:not(#o) .ws-scale{order:11}
  html:not(#o) .ws-sweep{order:11}
  html:not(#o) #ws-systems{order:12}
  html:not(#o) #ws-controls{order:14}
  html:not(#o) .ws-hold{order:13}
  html:not(#o) .ws-header{gap:6px}
  html:not(#o) .ws-actions{gap:4px}
  html:not(#o) .ws-actions .o-pill{padding-left:7px;padding-right:7px}
  html:not(#o) .ws-logo{font-size:13px;letter-spacing:.14em;margin-right:0}
  html:not(#o) .ws-logout-ico{display:block}
  html:not(#o) .o-pill.ws-logout{padding:0;width:var(--o-h)}
  html:not(#o) .ws-actions .o-pill--icon{padding:0}
  html:not(#o) .ws-iconlabel .ws-txt{display:none}
  html:not(#o) .ws-dates{order:3;flex:1 1 100%}
  html:not(#o) .o-pill.ws-date{flex:1 1 0;flex-direction:column;align-items:flex-start;justify-content:center;gap:1px;padding:3px 9px;line-height:1.15}
  html:not(#o) .ws-date-k{font-size:var(--fs-caption);letter-spacing:.06em;text-transform:uppercase}
  html:not(#o) .ws-date-sep{display:none}
  html:not(#o) .ws-date-v{display:none}
  html:not(#o) .ws-date-vs{display:block;max-width:100%;font-size:11.5px;white-space:nowrap}
  html:not(#o) .ws-tray-content{gap:8px 12px;padding:8px}
}

@media (prefers-reduced-motion:reduce){
  html:not(#o) .ws-tray,html:not(#o) .ws-panel-tog .ws-panel-fill{transition:none!important}
  html:not(#o) .ws-tray{transform:none!important}
}

/* Systems tray tabs (Chart | Directions): the tab bar and the active panel each take the full row. */
html:not(#o) .ws-systems-tabs{flex:1 0 100%}
html:not(#o) .ws-tabpanel{flex:1 0 100%;display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;min-width:0;max-width:100%}
html:not(#o) .ws-tabpanel[hidden]{display:none}

/* Mac desktop app (electron/preload.js sets html.desktop-mac): the Osiris header is the window's title bar. It drags
   the window, leaves room for the red / yellow / green buttons, and every control in it stays clickable. */
/* The window buttons sit at about 20-72 px across and 12-28 px down, over the top of the rail (owner 2026-10-16: the rail
   icons hit them; the rail must be at least as wide as the buttons). On the Mac app the rail is 80 px wide, its icons start
   below the buttons, and its top strip drags the window like the header beside it. A labeled (wide) rail already clears them;
   full screen (no buttons) returns to the normal layout. */
html.desktop-mac body:not(.rail-labeled) #icon-sidebar{width:80px}
html.desktop-mac body:not(.rail-labeled) #app{padding-left:80px}
html.desktop-mac body:not(.rail-labeled) #globe-overlay{left:80px}
html.desktop-mac #icon-sidebar{padding-top:40px}
html.desktop-mac #icon-sidebar::before{content:"";position:absolute;top:0;left:0;right:0;height:36px;-webkit-app-region:drag}
html.desktop-mac #header{-webkit-app-region:drag}
html.desktop-mac.desktop-fullscreen body:not(.rail-labeled) #icon-sidebar{width:58px}
html.desktop-mac.desktop-fullscreen body:not(.rail-labeled) #app{padding-left:58px}
html.desktop-mac.desktop-fullscreen body:not(.rail-labeled) #globe-overlay{left:58px}
html.desktop-mac.desktop-fullscreen #icon-sidebar{padding-top:8px}
html.desktop-mac.desktop-fullscreen #icon-sidebar::before{content:none}
html.desktop-mac #header :is(button,input,select,textarea,a,label,summary,[role=button],[role=menu],[role=menu] *,[role=toolbar] *,[tabindex],.o-pill){-webkit-app-region:no-drag}

/* No emoji, ever (owner 2026-10-08; again 2026-10-16 on the Mac app): symbols such as the planet and sign glyphs, warning
   and check marks render as text, never as Apple Color Emoji, in every engine that supports font-variant-emoji. */
html{font-variant-emoji:text}