/* Specificity note: every rule is prefixed `html:not(#o)` (= one ID) so these shared controls beat the
 * app's legacy blanket rules (#header button, #sidebar button, …) wherever they are placed. */
/* Osiris controls — the Direction Lab pill idiom, extracted and unscoped.
 *
 * Source looks (owner, 2026-10-02: "Direction Lab pills everywhere"; round 3: active = black on light themes, a lighter
 *   fill on dark themes, via the --o-active-* tokens; hover = border highlight only):
 *   .o-pill  = direction-lab.css .dlab-button / .dlab-pillset .dlab-pill, incl. the black
 *              is-active / aria-pressed / aria-expanded state;
 *   .o-seg   = .dlab-segmented: a joined pair/group of pills (D|C, Fix|Follow);
 *   .o-menu  = sphere-navigation.css #sph-nav-scale-menu / .sph-nav-scale-option
 *              (the `Transits ▾` list): a floating panel of full-width pill rows;
 *   .o-menu-group = a submenu panel (flyout, or inline under its header when there is no room).
 *
 * Colours come only from the theme anchors (--tx --tb --td --bd --pn --sf --bg --ac --a2) so every
 * theme, day and night, recolours these live. Type is sans-serif: never the monospace --text-font.
 * One active convention: aria-pressed / aria-selected / aria-checked / aria-expanded (+ .is-active).
 */
:root{
  --o-font:var(--ui-font);
  --o-radius:8px;
  --o-h:26px;
  --o-ease:cubic-bezier(.2,.7,.2,1);
}
/* Neutralise the legacy glass sheen/glow the blanket #header/#sidebar button rules add (they load later). */
html:not(#o) :is(.o-pill,.o-seg>button,.o-menu-item,.o-tab){background-image:none;background-blend-mode:normal;box-shadow:none;text-shadow:none}
/* Hover = border highlight only (owner, round 3): no 1px lift (the app-wide button:hover translateY), no glow, no filter. */
html:not(#o) :is(.o-pill,.o-seg>button,.o-menu-item,.o-tab):hover{transform:none;filter:none}
html:not(#o) .o-pill:is(:hover,:focus):not(.is-active):not([aria-pressed=true]):not([aria-expanded=true]):not([aria-selected=true]){box-shadow:none;background-color:var(--pn,#13111f)}
html:not(#o) :is(.o-seg>button,.o-menu-item):is(:hover,:focus):not(.is-active):not([aria-pressed=true]):not([aria-expanded=true]):not([aria-selected=true]):not([aria-checked=true]){box-shadow:none}

/* ── Pill ─────────────────────────────────────────────────────────── */
html:not(#o) .o-pill{appearance:none;-webkit-appearance:none;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:5px;flex:none;
  min-width:0;min-height:var(--o-h);margin:0;padding:4px 10px;border:1px solid var(--bd,#2a2348);border-radius:var(--o-radius);
  background:var(--pn,#13111f);color:var(--tx,#d6d8ea);font:600 12px/1.2 var(--o-font);letter-spacing:0;text-transform:none;
  white-space:nowrap;cursor:pointer;touch-action:manipulation;user-select:none;-webkit-user-select:none;
  transition:border-color .12s var(--o-ease),background-color .12s var(--o-ease),color .12s var(--o-ease)}
html:not(#o) .o-pill:hover:not(:disabled){border-color:var(--ac,#9d8cff);color:var(--tb,#eef0fb)}
html:not(#o) .o-pill:focus-visible{outline:2px solid var(--a2,#4fd8e8);outline-offset:2px}
html:not(#o) .o-pill:disabled,html:not(#o) .o-pill[aria-disabled=true]{opacity:.45;cursor:default}
html:not(#o) .o-pill:not(:disabled):is(.is-active,[aria-pressed=true],[aria-expanded=true],[aria-selected=true]){
  border-color:var(--o-active-bg,#000);background:var(--o-active-bg,#000);color:var(--o-active-fg,#fff);text-shadow:none;font-weight:700;
  box-shadow:var(--o-active-ring,inset 0 0 0 1px rgba(255,255,255,.3))}
html:not(#o) .o-pill:not(:disabled):is(.is-active,[aria-pressed=true],[aria-expanded=true],[aria-selected=true]):hover{background:var(--o-active-bg,#000);color:var(--o-active-fg,#fff);border-color:var(--o-active-bg,#000)}
html:not(#o) .o-pill .o-caret{font-size:.9em;line-height:1;opacity:.8}
html:not(#o) .o-pill .o-label{min-width:0;overflow:hidden;text-overflow:ellipsis}
html:not(#o) .o-pill--sm{--o-h:22px;padding:2px 8px;font-size:11px}
html:not(#o) .o-pill--icon{padding:0;width:var(--o-h);justify-content:center}
html:not(#o) .o-pill--ghost{background:transparent;border-color:transparent;color:var(--td,var(--tx,#aebbd2))}
html:not(#o) .o-pill--ghost:hover:not(:disabled){background:color-mix(in srgb,var(--tx,#d6d8ea) 8%,transparent);border-color:var(--bd,#2a2348)}

/* ── Segmented pair (D|C, Fix|Follow) ────────────────────────────── */
html:not(#o) .o-seg{display:inline-flex;align-items:stretch;flex:none;box-sizing:border-box;min-width:0;padding:2px;gap:2px;
  border:1px solid var(--bd,#2a2348);border-radius:calc(var(--o-radius) + 2px);background:var(--pn,#13111f)}
html:not(#o) .o-seg>button{appearance:none;-webkit-appearance:none;box-sizing:border-box;min-width:0;min-height:calc(var(--o-h) - 6px);margin:0;padding:2px 9px;
  border:1px solid transparent;border-radius:calc(var(--o-radius) - 2px);background:transparent;color:var(--td,var(--tx,#aebbd2));
  font:600 11px/1.2 var(--o-font);white-space:nowrap;cursor:pointer;touch-action:manipulation;
  transition:background-color .12s var(--o-ease),color .12s var(--o-ease)}
html:not(#o) .o-seg>button:hover:not(:disabled){color:var(--tb,#eef0fb);background:color-mix(in srgb,var(--tx,#d6d8ea) 8%,transparent)}
html:not(#o) .o-seg>button:focus-visible{outline:2px solid var(--a2,#4fd8e8);outline-offset:1px}
html:not(#o) .o-seg>button:disabled{opacity:.45;cursor:default}
html:not(#o) .o-seg>button:not(:disabled):is(.is-active,[aria-pressed=true],[aria-checked=true],[aria-selected=true]){
  border-color:var(--o-active-bg,#000);background:var(--o-active-bg,#000);color:var(--o-active-fg,#fff);font-weight:700;box-shadow:var(--o-active-ring,inset 0 0 0 1px rgba(255,255,255,.3))}

/* ── Menu (the `Transits ▾` list idiom) ──────────────────────────── */
html:not(#o) .o-menu{position:fixed;z-index:10000;box-sizing:border-box;display:flex;flex-direction:column;gap:4px;min-width:200px;max-width:calc(100vw - 16px);
  max-height:calc(100vh - 16px);overflow:visible;padding:6px;border:1px solid var(--bd,#2a2348);border-radius:12px;
  background:var(--pn,#13111f);color:var(--tx,#d6d8ea);font:600 12px/1.25 var(--o-font);box-shadow:0 10px 28px rgba(0,0,0,.45);
  opacity:0;transform:translateY(-4px) scale(.985);transform-origin:top left;pointer-events:none;
  transition:opacity .14s var(--o-ease),transform .14s var(--o-ease)}
html:not(#o) .o-menu[data-state=open]{opacity:1;transform:none;pointer-events:auto}
html:not(#o) .o-menu[data-placement=above]{transform-origin:bottom left}
html:not(#o) .o-menu[hidden]{display:none}
html:not(#o) .o-menu.is-scroll{overflow-y:auto;overscroll-behavior:contain}
/* Items keep their height when the menu is capped (some engines shrink flex items in a capped column, so their text spilled
 * past the menu background; owner 2026-10-08, house-system menu). */
html:not(#o) .o-menu > *{flex-shrink:0}
html:not(#o) .o-menu-item{appearance:none;-webkit-appearance:none;box-sizing:border-box;display:flex;align-items:center;gap:8px;width:100%;min-width:0;min-height:30px;margin:0;
  padding:5px 11px;border:1px solid var(--bd,#2a2348);border-radius:var(--o-radius);background:var(--pn,#13111f);color:var(--tx,#d6d8ea);
  font:inherit;text-align:left;white-space:nowrap;cursor:pointer;touch-action:manipulation}
html:not(#o) .o-menu-item>.o-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
html:not(#o) .o-menu-item>.o-hint{flex:none;font-size:var(--fs-caption);font-weight:500;color:var(--td,#aebbd2);opacity:.85}
html:not(#o) .o-menu-item>.o-caret{flex:none;opacity:.7}
html:not(#o) .o-menu-item:hover:not(:disabled),html:not(#o) .o-menu-item:focus-visible{border-color:var(--ac,#9d8cff);color:var(--tb,#eef0fb)}
html:not(#o) .o-menu-item:focus-visible{outline:2px solid var(--a2,#4fd8e8);outline-offset:1px}
html:not(#o) .o-menu-item:disabled{opacity:.42;cursor:default}
html:not(#o) .o-menu-item:not(:disabled):is([aria-checked=true],[aria-selected=true],.is-active){background:var(--o-active-bg,#000);border-color:var(--o-active-bg,#000);color:var(--o-active-fg,#fff);box-shadow:var(--o-active-ring,inset 0 0 0 1px rgba(255,255,255,.3))}
html:not(#o) .o-menu-item:not(:disabled):is([aria-checked=true],[aria-selected=true],.is-active)>.o-hint{color:var(--o-active-fg,#fff);opacity:.7}
html:not(#o) .o-menu-item[aria-haspopup][aria-expanded=true]{border-color:var(--ac,#9d8cff);color:var(--tb,#eef0fb);background:color-mix(in srgb,var(--ac,#9d8cff) 14%,var(--pn,#13111f))}
html:not(#o) .o-menu-item.has-current>.o-hint{color:var(--a2,#4fd8e8);opacity:1}
html:not(#o) .o-menu-sep{height:1px;margin:2px 4px;background:var(--bd,#2a2348)}
html:not(#o) .o-menu-heading{padding:4px 6px 2px;font-size:var(--fs-caption);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--td,#aebbd2)}
html:not(#o) .o-menu-note{padding:4px 6px;font-size:11px;font-weight:500;color:var(--td,#aebbd2);white-space:normal}
html:not(#o) .o-menu-input{box-sizing:border-box;width:100%;min-height:30px;padding:5px 10px;border:1px solid var(--bd,#2a2348);border-radius:var(--o-radius);
  background:var(--sf,#0e0c1c);color:var(--tb,#eef0fb);font:500 12px/1.2 var(--o-font)}
html:not(#o) .o-menu-input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
html:not(#o) .o-menu-input:focus-visible{outline:2px solid var(--a2,#4fd8e8);outline-offset:1px}

/* A branch = header item + its submenu panel. Flyout by default; inline when the menu has no room. */
html:not(#o) .o-menu-branch{position:relative;display:flex;flex-direction:column;gap:4px}
html:not(#o) .o-menu-group{position:absolute;left:100%;top:-7px;margin-left:6px;box-sizing:border-box;display:flex;flex-direction:column;gap:4px;min-width:190px;padding:6px;
  border:1px solid var(--bd,#2a2348);border-radius:12px;background:var(--pn,#13111f);box-shadow:0 10px 28px rgba(0,0,0,.45);
  opacity:0;transform:translateX(-4px);visibility:hidden;pointer-events:none;
  transition:opacity .12s var(--o-ease),transform .12s var(--o-ease),visibility 0s linear .12s}
html:not(#o) .o-menu-group[data-state=open]{opacity:1;transform:none;visibility:visible;pointer-events:auto;transition:opacity .12s var(--o-ease),transform .12s var(--o-ease),visibility 0s}
html:not(#o) .o-menu.is-flip .o-menu-group{left:auto;right:100%;margin-left:0;margin-right:6px;transform:translateX(4px)}
html:not(#o) .o-menu.is-flip .o-menu-group[data-state=open]{transform:none}
html:not(#o) .o-menu.is-inline .o-menu-group{position:static;display:none;margin:0 0 2px 10px;min-width:0;padding:0 0 0 8px;border:0;border-left:2px solid var(--bd,#2a2348);
  border-radius:0;background:none;box-shadow:none;transform:none;visibility:visible}
html:not(#o) .o-menu.is-inline .o-menu-group[data-state=open]{display:flex;opacity:1}

@media (max-width:700px){
  :root{--o-h:34px}
  html:not(#o) .o-menu-item{min-height:36px}
}
@media (prefers-reduced-motion:reduce){
  html:not(#o) .o-pill,html:not(#o) .o-seg>button,html:not(#o) .o-menu,html:not(#o) .o-menu-group{transition:none!important}
  html:not(#o) .o-menu,html:not(#o) .o-menu-group{transform:none!important}
}

/* ── Tabs (the Direction Lab House | Arc | Significators row) — lane R ─────────────────────────
 * .o-tabs = a wrapping row of pills; .o-tab = one pill, selected with aria-selected (or .is-active).
 * Tokens: osiris-tokens.css. Legacy .tab-btn / .sub-tab-btn / .settings-tab / .srd-tab rows are mapped onto the
 * same look by osiris-legacy-skin.css. */
html:not(#o) .o-tabs{display:flex;flex-wrap:wrap;align-items:center;gap:var(--o-space-2,4px);min-width:0}
html:not(#o) .o-tab{appearance:none;-webkit-appearance:none;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:5px;
  min-width:0;min-height:var(--o-h-sm,24px);margin:0;padding:3px 11px;border:1px solid var(--o-line,var(--bd,#2a2348));border-radius:var(--o-radius,8px);
  background:var(--o-surface,var(--pn,#13111f));background-image:none;color:var(--o-ink,var(--tx,#d6d8ea));
  font:var(--o-fw,600) var(--o-fs-sm,11px)/1.2 var(--o-font);letter-spacing:var(--o-tracking,.02em);white-space:nowrap;cursor:pointer;
  box-shadow:none;text-shadow:none;touch-action:manipulation;
  transition:border-color .12s var(--o-ease),background-color .12s var(--o-ease),color .12s var(--o-ease)}
html:not(#o) .o-tab:hover:not(:disabled){border-color:var(--o-line-hover,var(--ac,#9d8cff));color:var(--o-ink-strong,var(--tb,#eef0fb));box-shadow:none}
html:not(#o) .o-tab:focus-visible{outline:2px solid var(--o-focus,var(--a2,#4fd8e8));outline-offset:2px}
html:not(#o) .o-tab:disabled{opacity:.45;cursor:default}
html:not(#o) .o-tab:not(:disabled):is([aria-selected=true],[aria-pressed=true],.is-active){
  border-color:var(--o-active-bg,#000);background:var(--o-active-bg,#000);color:var(--o-active-fg,#fff);font-weight:var(--o-fw-active,700);
  box-shadow:var(--o-active-ring,inset 0 0 0 1px rgba(255,255,255,.3))}

/* ── Panel: a calm card that holds a group of controls ─────────────────────────────────────── */
html:not(#o) .o-panel{box-sizing:border-box;min-width:0;padding:var(--o-space-4,8px) var(--o-space-5,12px);border:1px solid var(--o-line,var(--bd,#2a2348));
  border-radius:var(--o-radius-lg,12px);background:var(--o-surface,var(--pn,#13111f));color:var(--o-ink,var(--tx,#d6d8ea));font:500 var(--o-fs,12px)/1.4 var(--o-font)}
html:not(#o) .o-panel-title{margin:0 0 var(--o-space-3,6px);font:var(--o-fw-active,700) var(--o-fs-sm,11px)/1.2 var(--o-font);letter-spacing:.06em;
  text-transform:uppercase;color:var(--o-ink-muted,var(--td,#aebbd2))}
@media (max-width:700px){html:not(#o) .o-tab{min-height:30px}}
@media (prefers-reduced-motion:reduce){html:not(#o) .o-tab{transition:none}}

/* ── Vertical number stepper: ▲ above the box, ▼ below it ──────────────────────────────────
 * <div class="o-stepper"><span class="o-stepper-label">Hour</span>
 *   <button class="o-stepper-btn o-stepper-up">…</button><input class="o-stepper-input" type="number">
 *   <button class="o-stepper-btn o-stepper-down">…</button></div>
 * One joined capsule: a soft chevron cap, the number well, a soft chevron foot. The native spin buttons are hidden;
 * keyboard arrows and the wheel on the focused box still step natively. Width: --o-stepper-w. */
html:not(#o) .o-stepper{display:inline-grid;grid-template-columns:minmax(0,1fr);justify-items:stretch;align-content:start;flex:none;min-width:0;
  inline-size:var(--o-stepper-w,3.2rem);font:500 var(--o-fs,12px)/1.2 var(--o-font)}
html:not(#o) .o-stepper .o-stepper-label{margin:0 0 4px;font:600 var(--o-fs-xs,10.5px)/1.2 var(--o-font);letter-spacing:.03em;color:var(--o-ink-muted,var(--td,#aebbd2));
  text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html:not(#o) .o-stepper .o-stepper-btn{appearance:none;-webkit-appearance:none;box-sizing:border-box;position:relative;display:flex;align-items:center;justify-content:center;
  inline-size:100%;min-inline-size:0;block-size:18px;min-block-size:0;min-width:0;min-height:0;margin:0;padding:0;border:1px solid var(--o-line,var(--bd,#2a2348));
  background:color-mix(in srgb,var(--tx,#d6d8ea) 4%,var(--pn,#13111f));background-image:none;color:var(--o-ink-muted,var(--td,#aebbd2));
  box-shadow:none;text-shadow:none;font:inherit;line-height:1;cursor:pointer;touch-action:manipulation;user-select:none;-webkit-user-select:none;
  transition:background-color var(--o-dur,.12s) var(--o-ease),color var(--o-dur,.12s) var(--o-ease),border-color var(--o-dur,.12s) var(--o-ease)}
html:not(#o) .o-stepper .o-stepper-up{border-radius:var(--o-radius,8px) var(--o-radius,8px) 0 0;border-bottom-width:0}
html:not(#o) .o-stepper .o-stepper-down{border-radius:0 0 var(--o-radius,8px) var(--o-radius,8px);border-top-width:0}
html:not(#o) .o-stepper .o-stepper-btn:hover:not(:disabled){transform:none;filter:none;box-shadow:none;color:var(--o-accent,var(--ac,#9d8cff));
  background:color-mix(in srgb,var(--ac,#9d8cff) 13%,var(--pn,#13111f))}
html:not(#o) .o-stepper .o-stepper-btn:active:not(:disabled){transform:none;color:var(--tb,#eef0fb);background:color-mix(in srgb,var(--ac,#9d8cff) 24%,var(--pn,#13111f))}
html:not(#o) .o-stepper .o-stepper-btn:focus-visible{outline:2px solid var(--o-focus,var(--a2,#4fd8e8));outline-offset:-2px;z-index:1}
html:not(#o) .o-stepper .o-stepper-btn:disabled{opacity:.45;cursor:default}
html:not(#o) .o-stepper .o-stepper-chevron{inline-size:10px;block-size:7px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
html:not(#o) .o-stepper .o-stepper-input{appearance:textfield;-webkit-appearance:none;-moz-appearance:textfield;box-sizing:border-box;inline-size:100%;min-inline-size:0;
  block-size:var(--o-h,28px);margin:0;padding:0 3px;border:1px solid var(--o-line,var(--bd,#2a2348));border-radius:0;
  background:var(--o-surface-sunk,var(--sf,#0e0c1c));background-image:none;box-shadow:none;color:var(--o-ink-strong,var(--tb,#eef0fb));
  font:600 var(--o-fs-lg,13px)/1 var(--o-font);font-variant-numeric:tabular-nums;letter-spacing:0;text-align:center;
  transition:border-color var(--o-dur,.12s) var(--o-ease),box-shadow var(--o-dur,.12s) var(--o-ease)}
html:not(#o) .o-stepper .o-stepper-input::-webkit-inner-spin-button,html:not(#o) .o-stepper .o-stepper-input::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0}
html:not(#o) .o-stepper .o-stepper-input:hover{border-color:color-mix(in srgb,var(--ac,#9d8cff) 55%,var(--bd,#2a2348))}
html:not(#o) .o-stepper .o-stepper-input:focus{outline:none;border-color:var(--o-accent,var(--ac,#9d8cff));box-shadow:inset 0 0 0 1px var(--o-accent,var(--ac,#9d8cff))}
html:not(#o) .o-stepper .o-stepper-input[aria-invalid=true]{border-color:var(--o-danger,#e05242);box-shadow:inset 0 0 0 1px var(--o-danger,#e05242)}
@media (max-width:700px){html:not(#o) .o-stepper .o-stepper-btn{block-size:24px}}
@media (prefers-reduced-motion:reduce){html:not(#o) .o-stepper :is(.o-stepper-btn,.o-stepper-input){transition:none}}

/* ── One shared pill / segment layout (owner 2026-10-10 pill audit; tests/browser/pill_audit.js) ─────────────────
 * Heights: --o-h-sm (24) for dense boxes (side panels, dialogs), --o-h (28) elsewhere; a segmented group follows the same
 * scale as the pills next to it. Labels never wrap and never spill out of the box: they end in an ellipsis (the full text is
 * in the title). Wrapped groups of pills are laid out by panel-min-width.js as a grid of equal columns with balanced rows
 * (4 = 2+2, 5 = 3+2); the gap token is --o-gap. */
:root{--o-gap:4px}
html:not(#o) :is(#right-panel,#sidebar,#settings-window) .o-seg{--o-h:var(--o-h-sm,24px)}
html:not(#o) .o-seg{max-width:100%}
html:not(#o) .o-seg>button{overflow:hidden;text-overflow:ellipsis;min-width:0}
html:not(#o) .o-seg,html:not(#o) .o-tabs,html:not(#o) .dmo-row{gap:var(--o-gap,4px)}
html:not(#o) [data-pw-cols]{display:grid!important;grid-template-columns:repeat(var(--pw-cols),minmax(0,1fr));gap:var(--o-gap,4px);align-items:stretch;width:100%;box-sizing:border-box}
html:not(#o) [data-pw-cols]>*{min-width:0;justify-content:center;text-align:center;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}
html:not(#o) [data-pw-cols]>:not(button,[role=tab],.o-tab,.chip){grid-column:1/-1}
html:not(#o) .rp-pillgrp{display:flex;flex-wrap:wrap;align-items:center;gap:var(--o-gap,4px);min-width:0}
/* Optical centring of every control label: control-centring.css (one shared rule set, loaded last). */