/* Theme-coloured light interference belongs to selected controls, never the page. */
:root,
html[data-social-theme][data-social-mode],
.social-theme-preview[data-social-theme][data-social-mode] {
  --cd-ink: var(--gst-primary-ink, #171719);
  --cd-start: color-mix(in srgb, var(--gst-primary-start, #608bff) var(--gst-optical-start-weight,91%), var(--gst-optical-polish,white));
  --cd-end: color-mix(in srgb, var(--gst-primary-end, #bf9aef) var(--gst-optical-end-weight,90%), var(--gst-optical-polish,white));
  --cd-secondary: color-mix(in srgb, var(--gst-secondary, #7ebdfa) var(--gst-optical-secondary-weight,86%), var(--gst-optical-polish,white));
  --cd-pearl: color-mix(in srgb, var(--gst-primary-end, #bf9aef) var(--gst-optical-pearl-weight,26%), var(--gst-optical-polish,white));
  --cd-sheen: var(--gst-optical-sheen,rgb(255 255 255 / .52));
  --cd-fill:
    linear-gradient(112deg, transparent 14%, var(--cd-sheen) 30%, transparent 43%, transparent 70%, var(--cd-sheen) 92%),
    radial-gradient(ellipse 100% 150% at 5% 118%, var(--cd-end) 5%, transparent 72%),
    radial-gradient(ellipse 90% 130% at 92% -25%, var(--cd-pearl) 8%, transparent 72%),
    linear-gradient(118deg, var(--cd-start) 4%, var(--cd-secondary) 39%, var(--cd-end) 66%, var(--cd-start) 96%);
  --cd-selected-base:var(--cd-start);
  --cd-selected-fill:var(--cd-fill);
  --cd-size: 240% 180%, 160% 160%, 180% 170%, 220% 130%;
  --cd-position: 100% 50%, 0% 80%, 100% 0%, 0% 50%;
  --cd-rim-shadow:none;
  --cd-animation-name: ghost-accent-flow;
  --cd-animation-state: paused;
}

/* Colour identifies selection; ordinary action buttons keep the opaque charcoal. */
html[data-social-theme][data-social-mode] body.ethereal-app :is(
  .sidebar .nav-item.active,
  .source-explore:has(.source-choice[aria-current='page'])>.source-explore-summary,
  .sidebar .source-choice.active,
  .sidebar .source-choice[aria-current='page'],
  .source-choice.active,
  .source-choice[aria-current='page'],
  .mobile-nav-button.active,
  .mobile-nav-button[aria-expanded='true'],
  .mobile-more-link.active,
  .mini-profile.selected,
  .layout-toggle button[aria-checked='true'],
  .layout-toggle button.is-active,
  .reader-mode-toggle>button[aria-checked='true'],
  .reader-page-navigation button[aria-current='page'],
  .profile-tabs>[role='tab'][aria-selected='true'],
  .pawchive-tabs>[aria-selected='true'],
  .tabs>.tab.active,
  .like-button[aria-pressed='true'],
  .like-button.liked,
  .save-button.is-saved,
  .list-navigation-button[aria-pressed='true'],
  .ghost-select-option[aria-selected='true'],
  .ghost-calendar-day.is-selected,
  .interest-option:has(input:checked)>span,
  .nc-tabs>button[aria-pressed='true'],
  .social-theme-mode>button[aria-pressed='true'],
  .social-rail-button.active,
  .social-rail-button[aria-current='page'],
  .social-thread.active,
  .social-channel.active,
  .social-channel[aria-current='page'],
  .social-button[aria-pressed='true'],
  .social-icon-button[aria-pressed='true'],
  .social-status-option[aria-pressed='true'],
  .social-emoji-category[aria-pressed='true'],
  .social-gif-tabs>[aria-selected='true'],
  .social-gif-favorite[aria-pressed='true'],
  .social-gif-favorite.is-saved,
  .cinema-tabs>button[aria-selected='true'],
  .sc-dock-save.is-saved,
  .sc-save[aria-pressed='true'],
  .ghost-player-menu-option[aria-pressed='true'],
  .ghost-player-menu-option[aria-checked='true'],
  .ghost-player-menu-option.is-selected,
  .vertical-mode button[aria-pressed='true'],
  .vertical-navigation :is([data-vertical-action='like'],[data-vertical-action='save'])[aria-pressed='true'],
  .vertical-settings-popover button[aria-pressed='true']
):not(:where(.danger, .is-danger, .danger-button, [data-danger], [data-destructive], [data-social-action*='delete'], [data-social-action*='block'], [data-social-action*='remove'], [data-social-action*='hangup'], [data-cinema-action='stop'], [data-privacy-action^='confirm-'], #confirm-clear-history)) {
  --opaque-tint:var(--cd-selected-base);
  --opaque-image:var(--cd-selected-fill);
  --opaque-ink:var(--cd-ink);
  color: var(--cd-ink);
  background-color: var(--cd-selected-base);
  background-image: var(--cd-selected-fill);
  background-size: var(--cd-size);
  background-position: var(--cd-position);
  background-repeat: no-repeat;
  box-shadow: var(--cd-rim-shadow);
  text-shadow: none;
  animation-name: var(--cd-animation-name);
  animation-duration: var(--ghost-liquid-duration, 12s);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-play-state: var(--cd-animation-state);
}

/* Compact text stays on the same tested ink as its active parent. */
html[data-social-theme][data-social-mode] body.ethereal-app .social-status-option[aria-pressed='true']>svg {color:var(--cd-ink)}
html[data-social-theme][data-social-mode] body.ethereal-app :is(
  .sidebar .nav-item.active,
  .source-choice.active,
  .source-choice[aria-current='page'],
  .social-thread.active,
  .social-channel.active,
  .social-channel[aria-current='page']
) :is(.count, .source-label, .source-badge, strong, small, svg, .social-badge, .social-unread) {
  color: var(--cd-ink);
}
html[data-social-theme][data-social-mode] body.ethereal-app :is(.source-choice.active, .source-choice[aria-current='page']) .source-badge {
  background: transparent;
}
html[data-social-theme][data-social-mode] body.ethereal-app .tabs>.tab.active {
  padding-inline: 15px;
  border-radius: 999px;
}
html[data-social-theme][data-social-mode] body.ethereal-app .tabs>.tab.active::after {
  background: transparent;
}

/* A selected theme retains its own preview; only the chosen marker is liquid. */
html[data-social-theme][data-social-mode] body.ethereal-app #social-themes-dialog .social-theme-card[aria-pressed='true'] {
  border-color: transparent;
  outline-color: var(--gst-accent);
  box-shadow:none;
}
html[data-social-theme][data-social-mode] body.ethereal-app #social-themes-dialog .social-theme-selected {
  color: var(--cd-ink);
  background-color: var(--cd-selected-base);
  background-image: var(--cd-selected-fill);
  background-size: var(--cd-size);
  background-position: var(--cd-position);
  box-shadow: var(--cd-rim-shadow);
  animation: var(--cd-animation-name) var(--ghost-liquid-duration, 12s) ease-in-out infinite;
  animation-play-state: var(--cd-animation-state);
}

/* Switch rails share the pigment while their existing mark remains legible. */
html[data-social-theme][data-social-mode] body.ethereal-app :is(
  .ai-filter input:checked+.switch-track,
  input[role='switch']:checked,
  button[role='switch'][aria-checked='true']
):not(:where(.ai-filter input)) {
  border-color: transparent;
  background-color: var(--cd-selected-base);
  background-image: var(--cd-selected-fill);
  background-size: var(--cd-size);
  background-position: var(--cd-position);
  box-shadow: var(--cd-rim-shadow);
}
html[data-social-theme][data-social-mode] body.ethereal-app :is(
  .ai-filter input:checked+.switch-track,
  input[role='switch']:checked,
  button[role='switch'][aria-checked='true']
):not(:where(.ai-filter input))::after,
html[data-social-theme][data-social-mode] body.ethereal-app :is(
  .ai-filter input:checked+.switch-track,
  input[role='switch']:checked,
  button[role='switch'][aria-checked='true']
):not(:where(.ai-filter input))::before {
  background: var(--cd-ink);
}

@keyframes ghost-accent-flow {
  0%, 100% { background-position: 100% 50%, 0% 80%, 100% 0%, 0% 50%; }
  50% { background-position: 0% 50%, 100% 30%, 0% 75%, 100% 50%; }
}

/* The bounded owner opts each observed visible control into motion. Controls
   beyond its observation budget remain static instead of inheriting running. */
html[data-liquid-animation-owner='bounded'] body:is(.ethereal-app,.ethereal-home){
  --cd-animation-state:paused;
}
html[data-liquid-animation-owner='bounded'] body:is(.ethereal-app,.ethereal-home) :where([data-liquid-visible='true']){
  --cd-animation-state:running;
}
/* Lifecycle flags are supplied by the shared glass owner. */
html[data-liquid-page-hidden] body:is(.ethereal-app, .ethereal-home),
html[data-liquid-page-hidden] body:is(.ethereal-app,.ethereal-home) :where([data-liquid-visible='true']),
html body:is(.ethereal-app, .ethereal-home) :where([data-liquid-visible='false'], [hidden], [inert], dialog:not([open])),
html body:is(.ethereal-app,.ethereal-home) :where([hidden],[inert],dialog:not([open])) :where([data-liquid-visible='true']) {
  --cd-animation-state: paused!important;
}
html body:is(.ethereal-app, .ethereal-home) :where(:disabled, [aria-disabled='true']) {
  --cd-animation-state: paused!important;
}
@media (prefers-reduced-motion: reduce) {
  html body:is(.ethereal-app, .ethereal-home) { --cd-animation-name: none; --cd-animation-state: paused; }
}
@media (forced-colors: active) {
  :root,
  html[data-social-theme][data-social-mode],
  .social-theme-preview[data-social-theme][data-social-mode] {
    --cd-ink: HighlightText;
    --cd-start: Highlight;
    --cd-fill: none;
    --cd-selected-base:Highlight;
    --cd-selected-fill:none;
    --cd-rim-shadow: none;
    --cd-animation-name: none;
  }
}