/* The gear button in the footer and the settings panel it opens. */

/* ------------------------------------------------------------------------
   Settings: gear button in the footer dock and the panel it opens
   ------------------------------------------------------------------------ */
.settings-button {
  background: none;
  border: 0;
  cursor: pointer;
  transition: transform 0.4s ease;
}

.settings-button[aria-expanded="true"] {
  transform: rotate(60deg);
}

/* "click me" speech bubble over the gear (showSettingsHint). It sits above
   the gear and extends to the left, with its tail pointing at the gear, so
   it stays on screen on phones too. */
.settings-button {
  position: relative;
}

.settings-hint {
  /* Sizes that position the tail: it sits --tail-inset from the bubble's
     right edge, and the bubble is offset so the tail points at the gear */
  --tail: 12px;
  --tail-inset: 22px;
  position: absolute;
  bottom: calc(100% + 18px);
  right: calc(50% - var(--tail-inset) - var(--tail));
  padding: 14px 22px;
  border-radius: 16px;
  /* A darker shade of the background shapes' lavender gray, dark enough
     for white text (5.9:1 contrast) */
  background: #6D5C89;
  color: #fff;
  font-family: monospace;
  font-size: 18px;
  font-weight: bold;
  line-height: 1.3;
  white-space: nowrap;
  box-shadow: 0 0 0 3px rgba(167, 155, 188, 0.35), 0 10px 30px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  opacity: 0;
  transform: translateY(10px) scale(0.9);
  transform-origin: calc(100% - var(--tail-inset) - var(--tail)) 100%;
  transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* The tail, centered over the gear */
.settings-hint::after {
  content: '';
  position: absolute;
  top: 100%;
  right: var(--tail-inset);
  border: var(--tail) solid transparent;
  border-top-color: #6D5C89;
}

.settings-hint.settings-hint-visible {
  opacity: 1;
  transform: none;
}

.settings-panel {
  position: fixed;
  left: 50%;
  bottom: 96px;
  transform: translateX(-50%);
  z-index: 200;
  min-width: 240px;
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  background: rgba(12, 10, 18, 0.82);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  color: #E0F2F1;
  font-family: monospace;
}

.settings-panel[hidden] {
  display: none;
}

.settings-panel h3 {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: bold;
  color: #fff;
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 14px;
}

/* The switch: a pill with a knob that slides right when on */
.settings-switch {
  position: relative;
  flex-shrink: 0;
  width: 46px;
  height: 26px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.settings-switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s ease;
}

.settings-switch[aria-checked="true"] {
  background: #A99BBF;
  border-color: #A99BBF;
}

.settings-switch[aria-checked="true"]::after {
  transform: translateX(20px);
}

.settings-switch:focus-visible,
.settings-button:focus-visible {
  outline: 2px solid #A99BBF;
  outline-offset: 3px;
}

@media only screen and (max-device-width: 768px) {
  .settings-panel {
    bottom: 120px;
  }

  /* Smaller on phones, so the bubble fits across the screen */
  .settings-hint {
    --tail: 10px;
    --tail-inset: 18px;
    padding: 12px 16px;
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .settings-hint {
    transform: none;
  }

  .settings-button,
  .settings-switch,
  .settings-switch::after {
    transition: none;
  }
}