/**
 * Galaxy Star component styles (components.css).
 * T4 scope: language switcher polish (design-spec 4.3).
 * Base segmented-control layout lives in layout.css.
 * Later tasks append here per architecture.md section 7 ownership table:
 * toast (T5), degrade banner (T7), control panel extras (T9), cards (T11).
 */

/* ---- Language switcher polish (design-spec 4.3) ---- */

.lang-option:hover {
  color: var(--gs-color-text-primary);
}

.lang-option[aria-pressed="true"]:hover {
  color: var(--gs-color-bg);
}

/* Focus ring stays visible inside the overflow-hidden segmented control. */
.lang-option:focus-visible {
  z-index: 1;
  outline: 2px solid var(--gs-color-focus);
  outline-offset: -2px;
}

@media (prefers-reduced-motion: no-preference) {
  .lang-option {
    transition:
      background-color var(--gs-duration-fast) var(--gs-ease-standard),
      color var(--gs-duration-fast) var(--gs-ease-standard);
  }
}

/* ---- Degrade banner (design-spec 4.2 / 4.5, T7) ----
   Injected by loader.js only on actual degradation; not in the initial DOM. */

.degrade-banner {
  position: fixed;
  top: calc(var(--gs-header-height) + var(--gs-space-3));
  right: 0;
  left: 0;
  z-index: 11;
  display: flex;
  align-items: center;
  gap: var(--gs-space-2);
  width: fit-content;
  max-width: calc(100% - var(--gs-space-6));
  margin-inline: auto;
  padding: var(--gs-space-2) var(--gs-space-3);
  color: var(--gs-color-text-secondary);
  font-size: 0.875rem;
  background-color: rgb(106 184 255 / 12%);
  border-left: 3px solid var(--gs-color-accent-blue);
  border-radius: 4px;
}

.degrade-banner-text {
  margin-inline-end: var(--gs-space-2);
}

/* 44px hit area kept via oversized button + negative margins (design-spec 6) */
.degrade-banner-close {
  width: 44px;
  height: 44px;
  margin-block: calc(var(--gs-space-2) * -1);
  margin-inline-end: calc(var(--gs-space-3) * -1);
  color: var(--gs-color-text-secondary);
  font-size: 1.25rem;
  line-height: 1;
  background-color: transparent;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}

.degrade-banner-close:hover {
  color: var(--gs-color-text-primary);
  background-color: var(--gs-color-surface-hover);
}

/* Entrance fade only under no-preference; instant otherwise (base.css guard) */
@media (prefers-reduced-motion: no-preference) {
  .degrade-banner {
    transition: opacity var(--gs-duration-base) var(--gs-ease-standard);
  }

  .degrade-banner:not(.gs-banner-visible) {
    opacity: 0;
  }
}

/* ---- Control panel states (design-spec 4.2, T9) ----
   Base panel layout (position, glass surface, 44px button) lives in
   layout.css; this block adds the state visuals wired by control-panel.js. */

.control-btn:disabled {
  color: var(--gs-color-text-tertiary);
  cursor: default;
}

.control-btn:disabled:hover {
  background-color: transparent;
}

/* Static-state hint (reduced-motion / degraded): why nothing moves and how
   to opt in. Sits left of the play button inside the glass panel. */
.panel-status {
  max-width: 240px;
  margin: 0;
  color: var(--gs-color-text-secondary);
  font-size: 0.875rem;
}

/* ---- First-visit language toast (flows.md flow 3, T5) ----
   Injected by lang-toast.js only for zh-browser first visits; not in the
   initial DOM. Bottom-center placement keeps it clear of the degrade banner
   (top) and the control panel (Hero bottom-right). */

.lang-toast {
  position: fixed;
  right: 0;
  bottom: var(--gs-space-5);
  left: 0;
  z-index: 11;
  display: flex;
  align-items: center;
  gap: var(--gs-space-2);
  width: fit-content;
  max-width: calc(100% - var(--gs-space-6));
  margin-inline: auto;
  padding: var(--gs-space-2) var(--gs-space-3);
  color: var(--gs-color-text-secondary);
  font-size: 0.875rem;
  background-color: var(--gs-glass-bg);
  backdrop-filter: blur(var(--gs-glass-blur));
  border: 1px solid var(--gs-color-border);
  border-radius: 12px;
}

.lang-toast-text {
  margin-inline-end: var(--gs-space-2);
}

.lang-toast-switch {
  padding: var(--gs-space-3) var(--gs-space-4);
  margin-block: calc(var(--gs-space-2) * -1); /* 44px hit area (design-spec 6) */
  color: var(--gs-color-bg);
  font-size: 0.875rem;
  background-color: var(--gs-color-accent-blue);
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}

.lang-toast-switch:hover {
  background-color: var(--gs-color-focus);
}

/* 44px hit area kept via oversized button + negative margins (design-spec 6) */
.lang-toast-close {
  width: 44px;
  height: 44px;
  margin-block: calc(var(--gs-space-2) * -1);
  margin-inline-end: calc(var(--gs-space-3) * -1);
  color: var(--gs-color-text-secondary);
  font-size: 1.25rem;
  line-height: 1;
  background-color: transparent;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}

.lang-toast-close:hover {
  color: var(--gs-color-text-primary);
  background-color: var(--gs-color-surface-hover);
}

/* Entrance fade + rise only under no-preference; instant under reduced
   motion (no rules outside the media query, per design-spec 5.3) */
@media (prefers-reduced-motion: no-preference) {
  .lang-toast {
    transition:
      opacity var(--gs-duration-base) var(--gs-ease-standard),
      transform var(--gs-duration-base) var(--gs-ease-standard);
  }

  .lang-toast:not(.gs-toast-visible) {
    opacity: 0;
    transform: translateY(var(--gs-space-2));
  }
}