/* css/settings.css: header settings popover + glossy language switch ("Pink Aurora Glass").
   Light and dark both come from the tokens in styles.css / polish.css. */

.gp-settings {
  /* js/i18n.js sets top / right / width from the header button; these are the fallbacks. */
  position: fixed;
  inset: auto;
  margin: 0;
  width: min(320px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  overflow: auto;
  padding: 16px;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius, 20px);
  box-shadow: var(--shadow), 0 0 0 1px color-mix(in srgb, var(--accent) 8%, transparent);
  font-family: var(--font);
  transform-origin: top right;
  opacity: 0;
  transform: translateY(-6px) scale(.97);
  transition:
    opacity .18s ease-out,
    transform .38s var(--spring),
    overlay .2s allow-discrete,
    display .2s allow-discrete;
}
.gp-settings:not([popover]):not([hidden]),
.gp-settings:popover-open { opacity: 1; transform: none; }
.gp-settings[hidden] { display: none; }
@starting-style {
  .gp-settings:popover-open { opacity: 0; transform: translateY(-6px) scale(.97); }
}
.gp-settings::backdrop { background: transparent; }

.gp-set-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
.gp-set-title { margin: 0; font-size: 1.05rem; font-weight: 750; letter-spacing: -.01em; }
.gp-set-close {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin: -6px -6px -6px 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--mute);
  font-size: .9rem;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.gp-set-close:hover { background: var(--soft); color: var(--ink); }

.gp-set-row { display: grid; gap: 8px; }
.gp-set-label { font-size: .85rem; font-weight: 700; }
.gp-set-note { margin: 12px 0 0; font-size: .78rem; color: var(--mute); }

/* Segmented control: a glossy thumb slides between two options. */
.gp-seg {
  --pad: 4px;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: var(--pad);
  border-radius: 999px;
  background: var(--soft);
  border: 1px solid var(--line);
  box-shadow: inset 0 2px 5px rgba(42, 15, 44, .08), inset 0 -1px 0 rgba(255, 255, 255, .5);
  isolation: isolate;
}
.gp-seg-thumb {
  position: absolute;
  z-index: 0;
  top: var(--pad);
  bottom: var(--pad);
  left: var(--pad);
  width: calc(50% - var(--pad));
  border-radius: 999px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent-bg) 84%, #fff) 0%, var(--accent-bg) 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .45) inset,
    0 -6px 10px -6px rgba(0, 0, 0, .25) inset,
    0 6px 14px -6px color-mix(in srgb, var(--accent-bg) 70%, transparent);
  transition: transform .5s var(--spring);
}
.gp-seg-thumb::after {
  /* gloss sheen on the upper half */
  content: "";
  position: absolute;
  inset: 2px 10px auto;
  height: 42%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .38), rgba(255, 255, 255, 0));
  pointer-events: none;
}
.gp-seg[data-value="en"] .gp-seg-thumb,
.gp-seg[data-value="dark"] .gp-seg-thumb { transform: translateX(100%); }
.gp-set-theme { margin-top: 14px; }

.gp-seg-opt {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  min-height: 44px;
  border-radius: 999px;
  font-size: .95rem;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  user-select: none;
  transition: color .25s;
  -webkit-tap-highlight-color: transparent;
}
.gp-seg-opt input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.gp-seg-opt:has(input:checked) { color: #fff; }
.gp-seg-opt:has(input:focus-visible) { outline: 3px solid var(--accent-ink); outline-offset: 2px; }
.gp-seg-opt:not(:has(input:checked)):hover { color: var(--accent-ink); }

:root[data-theme="dark"] .gp-seg { box-shadow: inset 0 2px 5px rgba(0, 0, 0, .45); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .gp-seg { box-shadow: inset 0 2px 5px rgba(0, 0, 0, .45); }
}

@media (prefers-reduced-motion: reduce) {
  .gp-settings,
  .gp-seg-thumb,
  .gp-seg-opt,
  .gp-set-close { transition: none; transform: none; }
  .gp-settings { transition: none; }
  .gp-seg[data-value="en"] .gp-seg-thumb,
  .gp-seg[data-value="dark"] .gp-seg-thumb { transform: translateX(100%); }
}