/* Sphere display panel (legacy SETTINGS / OVERLAYS, rehosted in the workspace dock's Display section).
   Every selector is prefixed `html:not(#o) ` so it outranks the inline-sheet `#right-panel button` rules
   and the right-panel glass skin without !important wars. Presentation only. */

/* ── Planet on/off pills (planetary-circle pickers) ──
   State is aria-pressed; the planet colour arrives as --pill-c. ON = tinted fill + planet-coloured ring and
   glyph; OFF = hollow, dim glyph, dashed ring — the two must never look alike (owner bug: pills "won't stay on"). */
html:not(#o) #sphere-panel .sph-planet-pill {
  --pill-c: var(--ac);
  appearance: none; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; min-height: 22px; height: 22px; padding: 0 4px; margin: 0;
  border: 1px dashed color-mix(in srgb, var(--td) 45%, transparent); border-radius: 6px;
  background: transparent; color: color-mix(in srgb, var(--td) 70%, transparent);
  font: 600 12px/1 TopoGlyph, var(--o-font, system-ui), sans-serif; letter-spacing: 0; cursor: pointer;
  box-shadow: none; opacity: .72;
  transition: background-color .12s, border-color .12s, color .12s, opacity .12s;
}
html:not(#o) #sphere-panel .sph-planet-pill[aria-pressed="true"] {
  border: 1px solid var(--pill-c);
  background: color-mix(in srgb, var(--pill-c) 20%, transparent);
  color: var(--pill-c); opacity: 1;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pill-c) 25%, transparent);
}
html:not(#o) #sphere-panel .sph-planet-pill:hover {
  border-color: var(--pill-c); color: var(--pill-c); opacity: 1;
  background: color-mix(in srgb, var(--pill-c) 10%, transparent);
}
html:not(#o) #sphere-panel .sph-planet-pill[aria-pressed="true"]:hover { background: color-mix(in srgb, var(--pill-c) 30%, transparent); }
html:not(#o) #sphere-panel .sph-planet-pill:focus-visible { outline: 2px solid var(--a2, var(--ac)); outline-offset: 1px; }

/* ── Section cards (sphere-display-groups.js wraps each heading + its rows in <details class="sph-group">) ── */
html:not(#o) #sphere-panel #sphere-tab-content { padding: 8px 6px 10px !important; }
html:not(#o) #sphere-panel .sph-group {
  margin: 0 0 8px; border: 1px solid color-mix(in srgb, var(--bd) 80%, transparent); border-radius: 10px;
  background: color-mix(in srgb, var(--pn) 70%, transparent);
}
html:not(#o) #sphere-panel .sph-group-h {
  display: flex; align-items: center; gap: 8px; min-height: 30px; padding: 6px 10px; cursor: pointer; list-style: none;
  border-radius: 10px; user-select: none;
}
html:not(#o) #sphere-panel .sph-group-h::-webkit-details-marker { display: none; }
html:not(#o) #sphere-panel .sph-group-h::before {
  content: ''; flex: none; width: 6px; height: 6px; margin: 0 2px 0 1px; border: solid var(--td); border-width: 0 1.5px 1.5px 0;
  transform: rotate(-45deg); transition: transform .14s;
}
html:not(#o) #sphere-panel .sph-group[open] > .sph-group-h::before { transform: rotate(45deg) translate(-1px, -1px); }
html:not(#o) #sphere-panel .sph-group-h:hover { background: color-mix(in srgb, var(--ac) 7%, transparent); }
html:not(#o) #sphere-panel .sph-group-h:focus-visible { outline: 2px solid var(--a2, var(--ac)); outline-offset: -2px; }
html:not(#o) #sphere-panel .sph-group-title {
  flex: 1; min-width: 0; font: 700 11px/1.2 var(--o-font, system-ui), sans-serif; letter-spacing: .06em; color: var(--tx);
}
html:not(#o) #sphere-panel .sph-group-count {
  flex: none; padding: 1px 7px; border-radius: 999px; font: 600 var(--fs-caption)/1.5 var(--o-font, system-ui), sans-serif;
  color: var(--ac); background: color-mix(in srgb, var(--ac) 14%, transparent); font-variant-numeric: tabular-nums;
}
html:not(#o) #sphere-panel .sph-group-count[hidden] { display: none; }
html:not(#o) #sphere-panel .sph-group-body { padding: 2px 10px 9px; border-top: 1px solid color-mix(in srgb, var(--bd) 55%, transparent); }
/* A self-contained section box loses its own frame inside the card (the card is the frame now). */
html:not(#o) #sphere-panel .sph-group-main { margin: 4px 0 0 !important; padding: 0 !important; border: 0 !important; background: none !important; }

/* ── Layer rows: checkbox · name · colour · intensity · value on one aligned grid ── */
html:not(#o) #sphere-panel .sph-group .sph-color-row {
  display: grid; grid-template-columns: 16px minmax(0, 1fr) 26px minmax(56px, 92px) 40px; align-items: center; column-gap: 8px;
  min-height: 30px; padding: 3px 0; border-bottom: 1px solid color-mix(in srgb, var(--bd) 30%, transparent);
}
html:not(#o) #sphere-panel .sph-group .sph-color-row:last-child { border-bottom: 0; }
html:not(#o) #sphere-panel .sph-group .sph-color-row > input[type=checkbox] { width: 14px; height: 14px; min-height: 0; margin: 0; accent-color: var(--ac); }
html:not(#o) #sphere-panel .sph-group .sph-color-row > label { min-width: 0; font-size: 11.5px; line-height: 1.3; color: var(--tx); }
html:not(#o) #sphere-panel .sph-group .sph-color-row > input[type=color] {
  width: 24px !important; height: 18px !important; min-height: 0 !important; padding: 0 !important; border: 1px solid var(--bd); border-radius: 5px; background: none; cursor: pointer;
}
html:not(#o) #sphere-panel .sph-group .sph-color-row > input[type=color]::-webkit-color-swatch-wrapper { padding: 2px; }
html:not(#o) #sphere-panel .sph-group .sph-color-row > input[type=color]::-webkit-color-swatch { border: 0; border-radius: 3px; }
html:not(#o) #sphere-panel .sph-group .sph-color-row > input[type=range] { width: 100% !important; min-width: 0; min-height: 0 !important; margin: 0; accent-color: var(--ac); }
html:not(#o) #sphere-panel .sph-group .sph-color-row > output { min-width: 0; font-size: var(--fs-caption); color: var(--td); text-align: right; }
/* An unchecked layer reads quieter, so what is drawn stands out in a long list. */
html:not(#o) #sphere-panel .sph-group .sph-color-row:has(> input[type=checkbox]:not(:checked)) > :is(label, output) { color: color-mix(in srgb, var(--tx) 62%, transparent); }

/* ── Planetary circles: one row per circle type, NATAL | DYN checkbox columns, picker panels under it ── */
html:not(#o) #sphere-panel .sph-pc-cols { padding: 4px 0 !important; border-bottom: 1px solid color-mix(in srgb, var(--bd) 45%, transparent) !important; }
html:not(#o) #sphere-panel .sph-pc-row { min-height: 30px; padding: 3px 0 !important; border-bottom: 1px solid color-mix(in srgb, var(--bd) 30%, transparent) !important; }
html:not(#o) #sphere-panel .sph-pc-row > span:first-child { font-size: 11.5px !important; line-height: 1.3; color: var(--tx) !important; }
html:not(#o) #sphere-panel .sph-pc-bright > span:first-child { font-size: var(--fs-caption) !important; color: var(--td) !important; }
html:not(#o) #sphere-panel .sph-pc-row input[type=checkbox] { width: 14px !important; height: 14px !important; min-height: 0; margin: 0; }
html:not(#o) #sphere-panel .sph-pc-sub {
  margin: 0 0 6px 6px !important; padding: 6px 8px !important; border-radius: 0 8px 8px 0 !important;
  background: color-mix(in srgb, var(--ac) 5%, transparent) !important; border-left-width: 2px !important;
}
html:not(#o) #sphere-panel .sph-pc-sub label { font-size: var(--fs-caption) !important; gap: 4px !important; }
html:not(#o) #sphere-panel .sph-pc-sub input[type=checkbox] { min-height: 0; }

/* ── Workspace dock: Display groups (Bodies / Labels / Lines & surfaces / Interaction / Readouts / Sphere view…) ──
   One heading style for every group, each foldable from its heading (sphere-display-groups.js enhanceDock). */
html:not(#o) #srd-panel-display :is(.srd-display-group, .srd-group) {
  margin: 0 0 8px; padding: 0; border: 1px solid color-mix(in srgb, var(--bd) 80%, transparent); border-radius: 10px;
  background: color-mix(in srgb, var(--pn) 70%, transparent);
}
html:not(#o) #srd-panel-display .srd-display-settings { gap: 0; }
html:not(#o) #srd-panel-display :is(.srd-display-group > h3, .srd-group > .srd-group-title) { margin: 0; padding: 0; }
html:not(#o) #srd-panel-display .sph-dock-toggle {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 32px; margin: 0; padding: 6px 10px !important;
  border: 0 !important; border-radius: 10px !important; background: none !important; box-shadow: none !important; transform: none !important;
  color: var(--tx) !important; font: 700 11px/1.2 var(--o-font, system-ui), sans-serif !important; letter-spacing: .06em; text-align: left; cursor: pointer;
}
html:not(#o) #srd-panel-display .sph-dock-toggle::before {
  content: ''; flex: none; width: 6px; height: 6px; margin: 0 2px 0 1px; border: solid var(--td); border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg) translate(-1px, -1px); transition: transform .14s;
}
html:not(#o) #srd-panel-display [data-folded] > h3 > .sph-dock-toggle::before { transform: rotate(-45deg); }
html:not(#o) #srd-panel-display .sph-dock-toggle:hover { background: color-mix(in srgb, var(--ac) 7%, transparent) !important; }
html:not(#o) #srd-panel-display .sph-dock-toggle:focus-visible { outline: 2px solid var(--a2, var(--ac)); outline-offset: -2px; }
html:not(#o) #srd-panel-display .sph-dock-foldable[data-folded] > :not(h3) { display: none !important; }
html:not(#o) #srd-panel-display .srd-display-group > :not(h3) { margin-left: 10px; margin-right: 10px; }
html:not(#o) #srd-panel-display .srd-display-group > :last-child { margin-bottom: 9px; }
html:not(#o) #srd-panel-display .srd-display-help { margin-top: 0; }
html:not(#o) #srd-panel-display .srd-display-unavailable { font-style: italic; opacity: .8; }
html:not(#o) #srd-panel-display .srd-display-control { grid-template-columns: minmax(96px, 1fr) minmax(90px, 1.4fr) 44px; min-height: 28px; margin-top: 4px; }
html:not(#o) #srd-panel-display .srd-display-label { font-size: 11.5px; }
html:not(#o) #srd-panel-display .srd-group > .srd-group-body { padding: 2px 10px 9px; }
html:not(#o) #srd-panel-display .srd-group > .srd-group-body.srd-legacy-slot { padding: 0 2px 4px; }
html:not(#o) #srd-panel-display .srd-legacy-slot #sphere-tab-content { padding: 6px 4px 6px !important; }