/* Right-panel orbital-glass skin.
   Brings every right-hand tab (timing techniques, cycles, timelords, sidereal, directions, sphere panel …) to the
   DAILY / Direction Lab idiom: glass cards, pill controls that turn solid black when selected, glass fields,
   Title Case micro-headings, calm tables.

   The panes are built with inline styles and almost no shared classes, so this sheet skins by tag and by the
   rp-* classes that right-panel-glass.js adds (rp-btn / rp-on / rp-go / rp-sm, rp-h, rp-card, rp-note, rp-nav).
   Everything is token-derived, so it recolours with the chosen theme and its day/night twin. Anything that must
   beat an inline style uses !important; anything the panes size themselves (compact table controls) is left alone. */

:root {
  --td-ui: #8a94a8;   /* overwritten by applyTheme(): --td lifted to 4.5:1 on the theme's panel colour */
  --rp-card-bg: linear-gradient(155deg, color-mix(in srgb, #fff 8%, transparent), transparent 46%), var(--surf-modal, var(--pn));
  --rp-edge: inset 0 .5px 0 color-mix(in srgb, #fff 18%, transparent), inset 0 -.5px 0 color-mix(in srgb, #000 22%, transparent), 0 2px 12px rgba(0, 0, 0, .16);
  --rp-field: color-mix(in srgb, var(--tx) 5%, var(--sf));
  --rp-hair: color-mix(in srgb, var(--bd) 55%, transparent);
  --rp-sel-black: #000;
}

/* ── Panel chrome: the persistent stack above the tabs becomes calm glass cards ── */
#right-panel { font-family: var(--ui-font, system-ui, sans-serif); --td: var(--td-ui); }
#right-panel #settings-toggle-bar { background: transparent !important; border-bottom: none !important; padding: 8px 10px 2px !important; gap: 6px !important; }
#right-panel #angles-bar,
#right-panel #speculum-panel {
  margin: 5px 10px 0; border: 1px solid var(--bd-hi, var(--bd)) !important; border-radius: 14px;
  background: var(--rp-card-bg) !important; box-shadow: var(--rp-edge); overflow: hidden;
}
#right-panel #angles-bar { padding: 6px 12px !important; }
#right-panel #speculum-hdr { padding: 6px 12px !important; }
#right-panel #speculum-hdr > span:first-child { font: 750 var(--fs-caption) var(--ui-font, system-ui, sans-serif) !important; letter-spacing: .12em !important; color: var(--tb, var(--tx)) !important; }
#right-panel > hr { display: none; }

/* ── Main tab rows, sub-tab bars: rows of Direction Lab pills — styled by osiris-legacy-skin.css (one active state) ── */
#right-panel :is(#tab-content, #sphere-panel) .sub-tab-bar { border-bottom: none !important; background: transparent; }
#right-panel #sphere-tab-bar { background: transparent !important; border-bottom: none !important; padding: 6px 8px !important; gap: 3px !important; flex-wrap: wrap; }

/* ── The pane itself ── */
#right-panel .tab-content { font-family: var(--ui-font, system-ui, sans-serif); padding: 10px 10px 18px; }
#right-panel #sphere-tab-content { font-family: var(--ui-font, system-ui, sans-serif); }

/* Cards: each top-level block of a pane, tagged rp-card by the script. The panes give their blocks inline borders and
   radii of their own, so the card look wins with !important. */
:is(#tab-content, #sphere-tab-content) .rp-card {
  min-width: 0; box-sizing: border-box; margin: 0 0 9px !important; padding: 9px 11px 10px; border: 1px solid var(--bd-hi, var(--bd)) !important;
  border-radius: 14px; background: var(--rp-card-bg) !important; box-shadow: var(--rp-edge) !important;
}
/* drop targets keep their dashed affordance, in glass */
:is(#tab-content, #sphere-tab-content) .drop-zone {
  border: 1px dashed color-mix(in srgb, var(--ac) 40%, var(--bd)) !important; border-radius: 14px !important; background: var(--gl0) !important;
  padding: 10px 12px !important; margin: 0 0 9px !important; color: var(--td);
}
:is(#tab-content, #sphere-tab-content) .drop-zone:hover, :is(#tab-content, #sphere-tab-content) .drop-zone.drag-over { border-color: var(--ac) !important; background: var(--gl-ac) !important; }
:is(#tab-content, #sphere-tab-content) .rp-card > :first-child { margin-top: 0; }
:is(#tab-content, #sphere-tab-content) .rp-card > :last-child { margin-bottom: 0; }
/* a card that is only a table needs no inner gutter */
:is(#tab-content, #sphere-tab-content) .rp-card.rp-card-table { padding: 0 !important; overflow-x: auto; overflow-y: hidden; }
:is(#tab-content, #sphere-tab-content) .rp-note {
  margin: 0 0 9px; padding: 10px 12px; border: 1px dashed var(--bd); border-radius: 12px; color: var(--td) !important;
  background: var(--gl0); font-size: 11.5px; line-height: 1.45;
}

/* Micro-headings: the section titles the panes draw in the title font */
:is(#tab-content, #sphere-tab-content) .rp-h {
  display: flex; align-items: center; gap: 8px; font: 750 11px/1.25 var(--ui-font, system-ui, sans-serif) !important; letter-spacing: .1em !important;
  color: var(--tb, var(--tx)) !important; margin: 4px 2px 6px; text-shadow: none;
}
:is(#tab-content, #sphere-tab-content) .rp-h::before {
  content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--gl-ac);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ac) 45%, transparent), 0 0 8px color-mix(in srgb, var(--ac) 28%, transparent);
}

/* ── Buttons: glass pills; selected = solid black; primary = accent glass ── */
:is(#right-panel, body) .rp-btn {
  appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 5px; box-sizing: border-box; min-height: 26px;
  padding: 3px 10px !important; border: 1px solid var(--o-line, var(--bd)) !important; border-radius: var(--o-radius, 8px) !important;
  background: var(--o-surface, var(--pn)) !important; color: var(--o-ink, var(--tx)) !important;
  font: var(--o-fw, 600) var(--o-fs-sm, 11px)/1.2 var(--o-font, system-ui, sans-serif) !important; letter-spacing: .02em; text-transform: none; white-space: nowrap; cursor: pointer;
  box-shadow: none !important; background-image: none;
  transition: background-color .12s, border-color .12s, color .12s;
}
:is(#right-panel, body) .rp-btn:hover:not(:disabled) { border-color: var(--o-line-hover, var(--ac)) !important; color: var(--o-ink-strong, var(--tx)) !important; transform: none; }
:is(#right-panel, body) .rp-btn:focus-visible { outline: 2px solid var(--a2, var(--ac)); outline-offset: 2px; }
:is(#right-panel, body) .rp-btn:disabled { opacity: .42; cursor: not-allowed; }
:is(#right-panel, body) .rp-btn.rp-sm { min-height: 20px; padding: 1px 8px !important; font-size: var(--fs-caption) !important; }
:is(#right-panel, body) .rp-btn .gl { font-size: 14px; line-height: 1; }
:is(#right-panel, body) .rp-btn:is(.rp-on, .active, [aria-pressed="true"], [aria-selected="true"]) {
  background: var(--o-active-bg, #000) !important; color: var(--o-active-ink, #fff) !important; border-color: var(--o-active-bg, #000) !important; font-weight: 700 !important;
  box-shadow: var(--o-active-ring, inset 0 0 0 1px #ffffff4d), var(--o-active-lift, 0 1px 2px #0007) !important;
}
/* primary action: the same pill, emphasised by the accent border (black fill stays reserved for "selected") */
:is(#right-panel, body) .rp-btn.rp-go {
  min-height: 28px; padding: 4px 16px !important; border-color: var(--o-accent, var(--ac)) !important; color: var(--o-ink-strong, var(--tx)) !important;
  font-weight: 700 !important; letter-spacing: .06em;
}
:is(#right-panel, body) .rp-btn.rp-go.rp-sm { min-height: 22px; padding: 2px 12px !important; }

/* ── Fields: glass inputs / selects ── */
#right-panel :is(#tab-content, #sphere-tab-content) :is(select, textarea, input:not([type=checkbox], [type=radio], [type=range], [type=color], [type=file], [type=button], [type=submit], [type=hidden])) {
  box-sizing: border-box; min-height: 28px; padding: 4px 9px !important; border: 1px solid var(--bd) !important; border-radius: 10px !important;
  background-color: var(--rp-field) !important; color: var(--tx); font-size: 12px; font-weight: 500;
  box-shadow: inset 0 1px 2px color-mix(in srgb, #000 20%, transparent);
}
#right-panel :is(#tab-content, #sphere-tab-content) select { font-family: var(--ui-font, system-ui, sans-serif); padding-right: 24px !important; }
#right-panel :is(#tab-content, #sphere-tab-content) :is(select, textarea, input):focus-visible { outline: 2px solid var(--a2, var(--ac)); outline-offset: 1px; border-color: var(--ac) !important; }
/* compact controls that live inside dense rows stay compact */
#right-panel :is(#tab-content, #sphere-tab-content) :is(td, th, li, .rp-dense) :is(select, input:not([type=checkbox], [type=radio], [type=range])) { min-height: 22px; padding: 2px 6px !important; border-radius: 8px !important; font-size: 11px; }
#right-panel :is(#tab-content, #sphere-tab-content) input[type=checkbox],
#right-panel :is(#tab-content, #sphere-tab-content) input[type=radio] { accent-color: var(--ac); }
#right-panel :is(#tab-content, #sphere-tab-content) input::placeholder { color: color-mix(in srgb, var(--td) 70%, transparent); }
#right-panel :is(#tab-content, #sphere-tab-content) label { font-family: var(--ui-font, system-ui, sans-serif); }

/* ── Tables: calm, rounded, hairline rows ── */
#right-panel :is(#tab-content, #sphere-tab-content) table { border-collapse: separate; border-spacing: 0; }
#right-panel :is(#tab-content, #sphere-tab-content) th {
  padding: 6px 7px; font: 650 var(--fs-caption)/1.2 var(--ui-font, system-ui, sans-serif); letter-spacing: .07em; text-transform: uppercase; color: var(--td);
  background: color-mix(in srgb, var(--tx) 6%, var(--pn)); border-bottom: 1px solid var(--bd);
}
#right-panel :is(#tab-content, #sphere-tab-content) td { padding: 4px 7px; border-bottom: 1px solid var(--rp-hair); }
#right-panel :is(#tab-content, #sphere-tab-content) tbody tr:last-child > td { border-bottom: none; }
#right-panel :is(#tab-content, #sphere-tab-content) tbody tr:hover > td { background: color-mix(in srgb, var(--ac) 9%, transparent); }
#right-panel :is(#tab-content, #sphere-tab-content) .rp-card-table table { width: 100%; }
#right-panel :is(#tab-content, #sphere-tab-content) thead tr:first-child > th:first-child { border-top-left-radius: 10px; }
#right-panel :is(#tab-content, #sphere-tab-content) thead tr:first-child > th:last-child { border-top-right-radius: 10px; }
#right-panel :is(#tab-content, #sphere-tab-content) .rp-card-table thead tr:first-child > th:first-child { border-top-left-radius: 13px; }
#right-panel :is(#tab-content, #sphere-tab-content) .rp-card-table thead tr:first-child > th:last-child { border-top-right-radius: 13px; }

/* ── Disclosure sections ── */
#right-panel :is(#tab-content, #sphere-tab-content) details:not(.dmo-more):not(.dmo-ref):not(.set-sec) {
  margin: 0 0 9px; padding: 7px 11px; border: 1px solid var(--bd-hi, var(--bd)); border-radius: 14px; background: var(--rp-card-bg); box-shadow: var(--rp-edge);
}
#right-panel :is(#tab-content, #sphere-tab-content) details:not(.dmo-more):not(.dmo-ref):not(.set-sec) > summary {
  cursor: pointer; font: 750 11px var(--ui-font, system-ui, sans-serif); letter-spacing: .1em; color: var(--tb, var(--tx));
}
#right-panel :is(#tab-content, #sphere-tab-content) hr { border: none; border-top: 1px solid var(--rp-hair); margin: 8px 0; }

@media (prefers-reduced-transparency: reduce) { :root { --rp-card-bg: var(--pn); } }
@media (prefers-contrast: more) { :root { --rp-hair: var(--bd); } }