/* Final rail pass: normalize every left/right workspace surface while leaving
   position, sizing, collapse state, and scrolling with the rail controllers. */
:is(#left-panel-stack, #right-context-rail) > [data-panel-id] {
  color: var(--text-primary);
  --rail-card-surface: rgba(7, 20, 35, 0.82);
  --rail-card-raised: rgba(13, 34, 53, 0.9);
  --rail-card-edge: rgba(105, 167, 190, 0.24);
  --rail-card-edge-active: rgba(32, 213, 255, 0.58);
}

:is(#left-panel-stack, #right-context-rail) > [data-panel-id]
  :is(.data-panel-inner, .scene-panel-inner, .cctv-panel-inner, .global-context-panel-inner, .weather-panel-inner, .recent-imagery-panel-inner, .radio-panel-inner) {
  color: var(--text-primary);
  border-color: var(--interface-edge);
  background-color: var(--interface-surface);
}

:is(#left-panel-stack, #right-context-rail) > [data-panel-id]
  :is(.panel-header, .pp-header-row, .param-panel-header, .cctv-calibration-header) {
  color: var(--text-primary);
}

:is(#left-panel-stack, #right-context-rail) > [data-panel-id]
  :is(.panel-title, .pp-header-label, .param-panel-title, .cctv-summary-label, .rail-card-setting-label) {
  color: #a9c9d8;
}

:is(#left-panel-stack, #right-context-rail) > [data-panel-id]
  :is(.data-toggle-row, .scene-row, .pp-toggle-group, .pp-slider-row, .param-slider-row, .context-mode-standby, .weather-observed-group) {
  border-color: var(--rail-card-edge);
}

:is(#left-panel-stack, #right-context-rail) > [data-panel-id]
  :is(.data-toggle-row, .scene-row):is(:hover, :focus-within) {
  background-color: rgba(32, 213, 255, 0.065);
}

:is(#left-panel-stack, #right-context-rail) > [data-panel-id]
  :is(.data-toggle-btn, .scene-btn, .pp-toggle-btn, .pp-mode-btn, .panel-layer-toggle, .panel-collapse-btn, .pp-collapse-btn, .rail-card-setting .data-toggle-chip) {
  color: var(--text-secondary);
  border-color: var(--rail-card-edge);
  background-color: var(--rail-card-surface);
  transition: color var(--interface-transition), border-color var(--interface-transition), background-color var(--interface-transition), box-shadow var(--interface-transition);
}

:is(#left-panel-stack, #right-context-rail) > [data-panel-id]
  :is(.data-toggle-btn, .scene-btn, .pp-toggle-btn, .pp-mode-btn, .panel-layer-toggle, .panel-collapse-btn, .pp-collapse-btn, .rail-card-setting .data-toggle-chip):is(:hover, :focus-visible) {
  color: var(--text-primary);
  border-color: var(--rail-card-edge-active);
  background-color: var(--interface-surface-hover);
  box-shadow: 0 0 12px rgba(32, 213, 255, 0.09);
}

:is(#left-panel-stack, #right-context-rail) > [data-panel-id]
  :is(.data-toggle-btn.active, .pp-toggle-btn.active, .pp-mode-btn.active, .panel-layer-toggle[aria-pressed='true'], .rail-card-setting .data-toggle-chip[aria-pressed='true']) {
  color: var(--market-positive);
  border-color: rgba(182, 255, 59, 0.62);
  background: linear-gradient(135deg, rgba(182, 255, 59, 0.12), rgba(32, 213, 255, 0.08));
}

/* Rail cards are shared by weather, imagery, radio and contextual settings. */
:is(#left-panel-stack, #right-context-rail) .rail-card {
  color: var(--text-secondary);
  border-color: transparent;
  border-radius: 8px;
  background: transparent;
  transition: border-color var(--interface-transition), background-color var(--interface-transition), box-shadow var(--interface-transition);
}

:is(#left-panel-stack, #right-context-rail) .rail-card + .rail-card {
  border-top-color: rgba(105, 167, 190, 0.18);
}

:is(#left-panel-stack, #right-context-rail) .rail-card:is(:hover, :focus-within) {
  border-color: rgba(32, 213, 255, 0.3);
  background-color: rgba(32, 213, 255, 0.035);
}

:is(#left-panel-stack, #right-context-rail) .rail-card.is-open {
  border-color: var(--rail-card-edge-active);
  background: linear-gradient(145deg, rgba(11, 31, 49, 0.88), rgba(6, 19, 34, 0.82));
  box-shadow: inset 2px 0 rgba(32, 213, 255, 0.38), 0 8px 20px rgba(0, 0, 0, 0.16);
}

:is(#left-panel-stack, #right-context-rail) .rail-card-header {
  color: var(--text-primary);
  border: 0;
  border-radius: 7px;
  background: transparent;
  transition: color var(--interface-transition), background-color var(--interface-transition);
}

:is(#left-panel-stack, #right-context-rail) .rail-card-header:is(:hover, :focus-visible),
:is(#left-panel-stack, #right-context-rail) .rail-card[data-open='true'] > .rail-card-header {
  color: #f4fbff;
  background-color: rgba(32, 213, 255, 0.075);
}

:is(#left-panel-stack, #right-context-rail) :is(.rail-card-title, .rail-card-heading .data-icon) {
  color: var(--text-primary);
}

:is(#left-panel-stack, #right-context-rail) :is(.rail-card-badge, .rail-card-compact, .rail-card-line, .rail-card-scale, .rail-card-result-header .panel-title, .rail-card-setting-label) {
  color: var(--interface-text-muted);
}

:is(#left-panel-stack, #right-context-rail) .rail-card-compact.status {
  color: #70e4f6;
}

:is(#left-panel-stack, #right-context-rail) :is(.rail-card-settings, .rail-card-result, .weather-observed-group, .rail-card-list) {
  color: var(--text-secondary);
  border-color: var(--rail-card-edge);
  border-radius: 7px;
  background: rgba(4, 16, 29, 0.58);
}

:is(#left-panel-stack, #right-context-rail) .rail-card-setting {
  color: var(--text-secondary);
  border-top: 1px solid rgba(105, 167, 190, 0.14);
  padding-top: 6px;
}

:is(#left-panel-stack, #right-context-rail) .rail-card-setting:first-child {
  border-top: 0;
}

:is(#left-panel-stack, #right-context-rail) :is(.rail-card-result, .radio-station-card, .radio-tuner, .weather-observed-group) {
  border-color: var(--rail-card-edge);
  border-radius: 7px;
  background: var(--rail-card-surface);
  box-shadow: inset 0 1px rgba(220, 245, 255, 0.025);
}

:is(#left-panel-stack, #right-context-rail) :is(input:not([type='range']), select, textarea) {
  color: var(--text-primary);
  border-color: rgba(105, 167, 190, 0.38);
  background-color: rgba(4, 16, 29, 0.88);
}

:is(#left-panel-stack, #right-context-rail) :is(input:not([type='range']), select, textarea):is(:hover, :focus-visible) {
  border-color: var(--interface-edge-active);
  background-color: rgba(8, 28, 45, 0.96);
}

:is(#left-panel-stack, #right-context-rail) :is(.data-toggle-btn, .scene-btn, .pp-toggle-btn, .pp-mode-btn, .panel-layer-toggle, .rail-card-setting .data-toggle-chip):disabled {
  color: rgba(190, 218, 231, 0.48);
  border-color: rgba(105, 167, 190, 0.14);
  background: rgba(5, 16, 29, 0.5);
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  :is(#left-panel-stack, #right-context-rail) .rail-card,
  :is(#left-panel-stack, #right-context-rail) .rail-card-header,
  :is(#left-panel-stack, #right-context-rail) button {
    transition-duration: 0.01ms !important;
  }
}