/* View Options + Settings accessibility (view-settings lane). Every selector is prefixed html:not(#o) (LANE_RULES). */

/* ── High contrast (View Options ▸ Colour & contrast, Settings ▸ Display ▸ Chart look) ──
   Secondary text and borders move toward the primary ink in every theme. The canvas wheel, Sky Map and Polar read these tokens. */
/* The High variant of the theme tokens (theme-tokens.js, applied by applyTheme) already carries the brighter --td / --bd. */
html.osiris-hc:not(#o){ --o-hc: 1; }

/* ── Display ▸ View Options panel ── */
html:not(#o) #right-panel.rb-on .rb-display-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
html:not(#o) #right-panel.rb-on .rb-display-reset{margin-left:auto;flex:none;font-size:var(--fs-caption);opacity:.9}
html:not(#o) #right-panel.rb-on .rb-display-field input[type=range]{min-width:90px;max-width:100%;flex:1 1 90px}
html:not(#o) #right-panel.rb-on .rb-display-field{flex-wrap:wrap}
html:not(#o) #right-panel.rb-on .rb-display-label{min-width:0}
html:not(#o) #right-panel.rb-on .rb-display-view :is(button,input,select):focus-visible{outline:2px solid var(--a2,#4fd8e8);outline-offset:2px}
html:not(#o) #right-panel.rb-on .rb-display-view .o-seg{flex-wrap:wrap;max-width:100%}

/* ── Settings window ── */
html:not(#o) #settings-window :is(button,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--a2,#4fd8e8);outline-offset:2px}
html:not(#o) #settings-window .settings-tab:focus-visible{outline-offset:-2px}
html:not(#o) #settings-window details.set-sec>summary:focus-visible{outline-offset:-2px}
html:not(#o) #settings-window .set-help{margin:0 0 8px;font-size:11px;line-height:1.45;color:var(--td)}
html:not(#o) #settings-window .scale-row>label{font-size:11px;color:var(--tx)}
html:not(#o) #settings-window .scale-row .scale-val{font-size:var(--fs-caption)}
html:not(#o) #settings-window .startup-note,html:not(#o) #settings-window .wd-note{font-size:11px;opacity:1}
html:not(#o) #settings-window details.set-sec>summary .sec-sub{font-size:var(--fs-caption);opacity:1}
html:not(#o) #settings-window .set-sec-actions{display:flex;justify-content:flex-end;margin-top:8px}
html:not(#o) #settings-window .set-sec-reset{font:inherit;font-size:11px;padding:4px 10px;border:1px solid var(--bd);border-radius:6px;background:transparent;color:var(--tx);cursor:pointer;min-height:28px}
html:not(#o) #settings-window .set-sec-reset:hover{border-color:var(--ac);color:var(--ac)}
html:not(#o) #settings-window .scale-row .scale-rst{min-width:26px;min-height:26px}
html:not(#o) #settings-window .scale-row .wd-select{grid-column:2 / span 3}
html:not(#o) #settings-window #wd-open-view-options{font:inherit;font-size:11px;padding:5px 12px;border:1px solid var(--bd);border-radius:6px;background:transparent;color:var(--tx);cursor:pointer;min-height:30px;margin-top:6px}
html:not(#o) #settings-window #wd-open-view-options:hover{border-color:var(--ac);color:var(--ac)}

/* ── Phones: adequate hit targets, no sideways scroll ── */
@media (max-width:700px){
  html:not(#o) #settings-window{width:100vw;max-width:100vw;max-height:100dvh;height:100dvh;border-radius:0;padding:12px 12px 0;box-sizing:border-box}
  html:not(#o) #settings-window .settings-tab{min-height:40px;padding:6px 12px}
  html:not(#o) #settings-window .rail-fly-close{min-width:40px;min-height:40px}
  html:not(#o) #settings-window details.set-sec>summary{min-height:40px}
  html:not(#o) #settings-window .scale-row{grid-template-columns:1fr auto 44px;row-gap:2px;margin-bottom:10px}
  html:not(#o) #settings-window .scale-row>label{grid-column:1 / -1;white-space:normal}
  html:not(#o) #settings-window .scale-row input[type=range]{height:28px}
  html:not(#o) #settings-window .scale-row .scale-rst{min-width:40px;min-height:40px}
  html:not(#o) #settings-window .scale-row .wd-select{grid-column:1 / -1;min-height:40px}
  html:not(#o) #settings-window :is(.set-sec-reset,#wd-open-view-options,#settings-tools button,.wd-chip,.wd-io button){min-height:40px}
  html:not(#o) #settings-window #settings-tools input{min-height:40px}
  html:not(#o) #settings-window .set-seg button{min-height:40px}
  html:not(#o) #settings-window .wd-check,html:not(#o) #settings-window .set-check{min-height:36px}
  html:not(#o) #settings-window input[type=checkbox],html:not(#o) #settings-window input[type=radio]{width:22px!important;height:22px!important;min-width:22px}
  html:not(#o) #settings-window input[type=range]{height:28px!important;min-height:28px}
  html:not(#o) #settings-window input[type=color]{height:32px!important;min-width:56px}
  html:not(#o) #right-panel.rb-on .rb-display-view :is(button,select,input:not([type=range])){min-height:40px}
  html:not(#o) #right-panel.rb-on .rb-display-view input[type=range]{min-height:32px}
  html:not(#o) #right-panel.rb-on .rb-display-field input[type=range]{width:100%;flex:1 1 100%}
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion:reduce){
  html:not(#o) #settings-window,html:not(#o) #settings-window *{transition:none!important;animation:none!important}
  html:not(#o) #right-panel.rb-on .rb-display-view *{transition:none!important;animation:none!important}
}
@media (forced-colors:active){
  html:not(#o) #settings-window :is(button,input,select,textarea,summary,[tabindex]):focus-visible,
  html:not(#o) #right-panel.rb-on .rb-display-view :is(button,input,select):focus-visible{outline-color:Highlight}
}

/* ── Display boxes (display-boxes lane): ONE Universal box + one "This view" box per visible view. Plain sub-headings inside; no boxes in boxes. ── */
html:not(#o) #right-panel.rb-on .rb-box{display:flex;flex-direction:column;border:1px solid var(--bd,#2a2348);border-radius:10px;min-width:0}
html:not(#o) #right-panel.rb-on .rb-box[data-rb-box=view]{border-color:var(--ac,#b9a4fb)}
html:not(#o) #right-panel.rb-on .rb-box-head{display:flex;align-items:center;gap:8px;padding:4px 8px 4px 4px}
html:not(#o) #right-panel.rb-on .rb-box-title{margin:0;flex:1 1 auto;min-width:0;font:700 12px/1.3 var(--o-font,system-ui,sans-serif);color:var(--tx,#e6e1f5)}
html:not(#o) #right-panel.rb-on .rb-box-toggle{display:flex;align-items:center;gap:6px;width:100%;min-height:30px;padding:4px 6px;border:0!important;background:transparent!important;box-shadow:none!important;color:inherit;font:inherit;text-align:left;cursor:pointer;border-radius:8px}
html:not(#o) #right-panel.rb-on .rb-box-chev{display:inline-block;transition:transform .12s}
html:not(#o) #right-panel.rb-on .rb-box--collapsed .rb-box-chev{transform:rotate(-90deg)}
html:not(#o) #right-panel.rb-on .rb-box-sub{font:400 var(--fs-caption)/1.3 var(--o-font,system-ui,sans-serif);color:var(--td,#aebbd2)}
html:not(#o) #right-panel.rb-on .rb-box-toggle:focus-visible{outline:2px solid var(--a2,#4fd8e8);outline-offset:-2px}
html:not(#o) #right-panel.rb-on .rb-box-body{display:flex;flex-direction:column;gap:8px;padding:2px 10px 10px}
html:not(#o) #right-panel.rb-on .rb-box-body[hidden]{display:none}
html:not(#o) #right-panel.rb-on .rb-box-group{display:flex;flex-direction:column;gap:4px}
html:not(#o) #right-panel.rb-on .rb-box-subhead{margin:0;font:600 var(--fs-caption)/1.3 var(--o-font,system-ui,sans-serif);letter-spacing:.05em;text-transform:uppercase;color:var(--td,#aebbd2)}
html:not(#o) #right-panel.rb-on .rb-uni-host{flex:none;max-height:45%;overflow:auto;padding:0 0 8px}
html:not(#o) #right-panel.rb-on .rb-uni-host[hidden]{display:none}
@media (max-width:700px){
  html:not(#o) #right-panel.rb-on .rb-box-toggle{min-height:44px}
}
/* Astrolabe's collapsed "More" row (view-options-ui.js): the summary reads like the other sub-headings. */
html:not(#o) #right-panel.rb-on .rb-more>summary{cursor:pointer;list-style:none;padding:2px 0!important;min-height:0!important;border:0!important;background:transparent!important;box-shadow:none!important;border-radius:0!important;margin:0}
html:not(#o) #right-panel.rb-on .rb-more>summary::-webkit-details-marker{display:none}
html:not(#o) #right-panel.rb-on .rb-more>summary::before{content:"\25B8  ";display:inline}
html:not(#o) #right-panel.rb-on .rb-more[open]>summary::before{content:"\25BE  "}
html:not(#o) #right-panel.rb-on .rb-more>.rb-display-row{margin-top:4px}
html:not(#o) #right-panel.rb-on details.rb-more{border:0!important;background:transparent!important;box-shadow:none!important;padding:0!important;margin:0!important}

/* ── View Options v2 (view-options overhaul, 2026-10-12): one layout for every view ─────────────────────────────────────────
   Display ▸ View / All views: a header (view name, ↺ Reset view settings), then the sections in the fixed order. One surface per
   section (a hairline between sections), no box in box. Pills in a fixed 3-column grid; segmented rows labelled on the left;
   sliders with an editable value; actions as outline buttons, last in their section. */
html:not(#o) #right-panel.rb-on .vo-view{display:flex;flex-direction:column;min-width:0;border:1px solid var(--bd,#2a2348);border-radius:10px;margin:0 0 10px;overflow:hidden}
html:not(#o) #right-panel.rb-on .vo-head{display:flex;align-items:center;gap:8px;padding:10px 12px 8px}
html:not(#o) #right-panel.rb-on .vo-title-wrap{display:flex;flex-direction:column;min-width:0;flex:1 1 auto}
html:not(#o) #right-panel.rb-on .vo-title{font:600 14px/1.25 var(--o-font,system-ui,sans-serif);color:var(--tx,#e6e1f5)}
html:not(#o) #right-panel.rb-on .vo-sub{font:400 11px/1.3 var(--o-font,system-ui,sans-serif);color:var(--td,#aebbd2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html:not(#o) #right-panel.rb-on .vo-view-toggle{display:flex;align-items:center;justify-content:flex-start!important;gap:6px;border:0!important;background:transparent!important;box-shadow:none!important;padding:0;color:inherit;font:inherit;cursor:pointer;text-align:left}
html:not(#o) #right-panel.rb-on .vo-reset-all{flex:none;border:0!important;background:transparent!important;box-shadow:none!important;color:var(--td,#aebbd2);font:400 11px/1 var(--o-font,system-ui,sans-serif);padding:6px 6px;border-radius:6px;cursor:pointer;min-height:26px}
html:not(#o) #right-panel.rb-on .vo-reset-all:hover{color:var(--tx);background:color-mix(in srgb,var(--ac,#9d8cff) 14%,transparent)!important}
html:not(#o) #right-panel.rb-on .vo-view-body[hidden],html:not(#o) #right-panel.rb-on .vo-sec-body[hidden]{display:none}
html:not(#o) #right-panel.rb-on .vo-sec{border-top:1px solid color-mix(in srgb,var(--bd,#2a2348) 80%,transparent);padding:0 12px 10px}
html:not(#o) #right-panel.rb-on .vo-sec.vo-closed{padding-bottom:0}
html:not(#o) #right-panel.rb-on .vo-sh{display:flex;align-items:center;gap:4px;min-height:34px}
html:not(#o) #right-panel.rb-on .vo-sh-toggle{display:flex;align-items:center;justify-content:flex-start!important;gap:6px;flex:1 1 auto;min-height:30px;border:0!important;background:transparent!important;box-shadow:none!important;padding:0;color:inherit;cursor:pointer;text-align:left}
html:not(#o) #right-panel.rb-on .vo-sh-n{font:600 var(--fs-caption)/1.2 var(--o-font,system-ui,sans-serif);letter-spacing:.08em;text-transform:uppercase;color:var(--td,#aebbd2)}
html:not(#o) #right-panel.rb-on .vo-chev{display:inline-block;font-size:var(--fs-caption);color:var(--td,#aebbd2);transition:transform .12s}
html:not(#o) #right-panel.rb-on .vo-closed>.vo-sh .vo-chev,html:not(#o) #right-panel.rb-on .vo-view.vo-closed>.vo-head .vo-chev{transform:rotate(-90deg)}
html:not(#o) #right-panel.rb-on .vo-info{color:var(--td,#aebbd2);font-size:12px;cursor:help;padding:0 4px}
html:not(#o) #right-panel.rb-on .vo-rst{flex:none;width:26px;height:26px;border:0!important;background:transparent!important;box-shadow:none!important;color:var(--td,#aebbd2);font-size:13px;border-radius:6px;cursor:pointer;padding:0}
html:not(#o) #right-panel.rb-on .vo-rst:hover{color:var(--tx);background:color-mix(in srgb,var(--ac,#9d8cff) 14%,transparent)!important}
html:not(#o) #right-panel.rb-on .vo-sec-body{display:flex;flex-direction:column;gap:8px}
html:not(#o) #right-panel.rb-on .vo-pills{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
html:not(#o) #right-panel.rb-on .vo-pill{height:26px;min-width:0;border-radius:13px;border:1px solid var(--bd,#2f2950);background:transparent;color:var(--td,#aebbd2);font:400 12px/1 var(--o-font,system-ui,sans-serif);padding:0 8px;white-space:nowrap;overflow:hidden;cursor:pointer}
html:not(#o) #right-panel.rb-on .vo-pill.vo-wide{grid-column:span 2}
html:not(#o) #right-panel.rb-on .vo-pill:hover:not(:disabled):not([aria-pressed=true]){border-color:var(--ac,#9d8cff);color:var(--tx)}
html:not(#o) #right-panel.rb-on .vo-pill[aria-pressed=true]{background:var(--tx,#e9e6ff);color:var(--bg,#14112a);border-color:var(--tx,#fff);font-weight:600}
html:not(#o) #right-panel.rb-on :is(.vo-pill,.vo-seg>button,.vo-act):disabled{opacity:.42;cursor:not-allowed}
html:not(#o) #right-panel.rb-on .vo-row{display:grid;grid-template-columns:104px minmax(0,1fr);align-items:center;gap:8px;min-height:28px}
html:not(#o) #right-panel.rb-on .vo-k{font:400 12px/1.2 var(--o-font,system-ui,sans-serif);color:var(--td,#aebbd2);min-width:0;overflow:hidden;text-overflow:ellipsis}
html:not(#o) #right-panel.rb-on .vo-dep{position:relative;padding-left:14px}
html:not(#o) #right-panel.rb-on .vo-row.vo-dep{grid-template-columns:90px minmax(0,1fr)}
html:not(#o) #right-panel.rb-on .vo-dep::before{content:'';position:absolute;left:4px;top:-4px;bottom:50%;width:7px;border-left:1px solid var(--bd,#3a3366);border-bottom:1px solid var(--bd,#3a3366);border-bottom-left-radius:4px}
html:not(#o) #right-panel.rb-on .vo-dis{opacity:.5}
/* five options (Canvas colours, Quadrant): the label sits above a full-width segmented row */
html:not(#o) #right-panel.rb-on .vo-row.vo-stack{grid-template-columns:1fr;gap:4px}
html:not(#o) #right-panel.rb-on .vo-row.vo-stack .vo-seg>button{font-size:11px;padding:0 2px}
html:not(#o) #right-panel.rb-on .vo-seg{display:grid!important;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);border:1px solid var(--bd,#2f2950);border-radius:8px;overflow:hidden;gap:0!important;flex-wrap:nowrap!important;min-width:0;background:transparent}
html:not(#o) #right-panel.rb-on .vo-seg>button{height:26px;min-width:0;border:0!important;border-left:1px solid var(--bd,#2a2448)!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;color:var(--td,#aebbd2);font:400 12px/1 var(--o-font,system-ui,sans-serif);padding:0 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;margin:0!important}
html:not(#o) #right-panel.rb-on .vo-seg>button:first-child{border-left:0!important}
html:not(#o) #right-panel.rb-on .vo-seg>button[aria-pressed=true]{background:var(--tx,#e9e6ff)!important;color:var(--bg,#14112a);font-weight:600}
html:not(#o) #right-panel.rb-on .vo-row select{height:28px;min-width:0;width:100%;border-radius:8px;border:1px solid var(--bd,#2f2950);background:var(--bg,#0f0d1f);color:var(--tx);font:400 12px/1 var(--o-font,system-ui,sans-serif);padding:0 8px}
html:not(#o) #right-panel.rb-on .vo-sl{display:grid;grid-template-columns:minmax(0,1fr) 62px;align-items:center;gap:8px;min-width:0}
html:not(#o) #right-panel.rb-on .vo-sl input[type=range]{width:100%;min-width:0;margin:0;accent-color:var(--ac,#9d8cff)}
html:not(#o) #right-panel.rb-on .vo-val{font:400 12px/1.2 var(--o-font,system-ui,sans-serif);color:var(--tx);text-align:right;border:1px solid transparent;border-radius:6px;padding:2px 4px;cursor:text;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden}
html:not(#o) #right-panel.rb-on .vo-val:hover,html:not(#o) #right-panel.rb-on .vo-val:focus{border-color:var(--bd,#2f2950);outline:none}
html:not(#o) #right-panel.rb-on .vo-row input[type=number]{width:80px;height:26px;border-radius:6px;border:1px solid var(--bd);background:var(--bg);color:var(--tx);padding:0 6px}
html:not(#o) #right-panel.rb-on .vo-actions{display:flex;gap:6px;flex-wrap:wrap;padding-top:2px}
html:not(#o) #right-panel.rb-on .vo-act{height:26px;border-radius:7px;border:1px dashed color-mix(in srgb,var(--ac,#9d8cff) 60%,var(--bd,#2a2348))!important;background:transparent!important;box-shadow:none!important;color:var(--td,#aebbd2);font:400 12px/1 var(--o-font,system-ui,sans-serif);padding:0 10px;cursor:pointer;white-space:nowrap}
html:not(#o) #right-panel.rb-on .vo-act:hover:not(:disabled){color:var(--tx);border-style:solid!important}
html:not(#o) #right-panel.rb-on .vo-act[aria-pressed=true]{border-style:solid!important;color:var(--tx);background:color-mix(in srgb,var(--ac,#9d8cff) 18%,transparent)!important}
html:not(#o) #right-panel.rb-on .vo-view :is(button,input,select,[role=textbox],.vo-info):focus-visible{outline:2px solid var(--a2,#4fd8e8);outline-offset:1px}
html:not(#o) #right-panel.rb-on .rb-instrument-reading{display:flex;flex-direction:column;gap:4px;padding:4px 2px}
html:not(#o) #right-panel.rb-on .rb-instrument-line{margin:0;font:400 12px/1.4 var(--o-font,system-ui,sans-serif);color:var(--tx)}
@media (max-width:700px){
  html:not(#o) #right-panel.rb-on .vo-row{grid-template-columns:1fr}
  html:not(#o) #right-panel.rb-on :is(.vo-pill,.vo-seg>button,.vo-act){height:40px}
  html:not(#o) #right-panel.rb-on .vo-pills{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Left column groups (CHARTS · SKY · INSTRUMENTS · TOOLS): the heading shows with labels on; otherwise a thin divider. */
html:not(#o) #icon-sidebar .icon-sb-group{display:flex;flex-direction:column;align-items:stretch;flex-shrink:0}
html:not(#o) #icon-sidebar .icon-sb-group-label{display:none;font:600 var(--fs-caption)/1 var(--o-font,system-ui,sans-serif);letter-spacing:.09em;text-transform:uppercase;color:var(--td,#aebbd2);padding:10px 10px 4px;opacity:.85}
html:not(#o) body.rail-labeled #icon-sidebar .icon-sb-group-label{display:block}
html:not(#o) body.rail-labeled #icon-sidebar .icon-sb-group .icon-sb-divider{display:none}
html:not(#o) #icon-sidebar .icon-sb-group:first-child .icon-sb-divider{display:none}

/* ── Right-panel dock for the view's readouts and tool panels (owner 2026-10-12: nothing floats over the canvas) ── */
html:not(#o) #rp-canvas-dock{display:flex;flex-direction:column;gap:6px;padding:0 8px;flex:none;max-height:50vh;overflow:auto}
html:not(#o) #rp-canvas-dock:not(:has(> :not([hidden]):not([style*="display: none"]))){display:none}
html:not(#o) #rp-canvas-dock :is(.helio-info,.helio-geo){position:static!important;inset:auto!important;top:auto!important;left:auto!important;right:auto!important;bottom:auto!important;width:auto!important;max-width:none!important;min-width:0!important;max-height:none!important;box-shadow:none!important;z-index:auto!important;margin:4px 0}
html:not(#o) #rp-canvas-dock #astrb-ghost-bar{position:static!important;margin:4px 0;justify-content:flex-end}
html:not(#o) #rp-canvas-dock .astrb-live{border:1px solid var(--bd,#2a2348);border-radius:8px;padding:6px 10px;margin:4px 0;font:400 11.5px/1.4 var(--text-font,system-ui,sans-serif);color:var(--tx)}
html:not(#o) #rp-canvas-dock .astrb-live[hidden]{display:none}
html:not(#o) #rp-canvas-dock .astrb-live-line{margin:0}
html:not(#o) #rp-canvas-dock .astrb-live-bold{font-weight:700}