/* The settings gear and its popover, shared by every page.
 * Markup is generated by src/settings-panel.js. */

.settings-wrap {
  position: relative;
  flex-shrink: 0;
  /* This -- not the gear -- is the flex child of .header-nav, so the stretch
     has to happen here. Making it a flex container too lets the gear inside
     fill the height the nav links set. */
  align-self: stretch;
  display: flex;
}

.settings-gear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Match the nav links rather than guessing a height. They size from padding
     and line-height (41.7px at default), so a hardcoded 2.25rem left the gear
     5.7px short. Stretching keeps them aligned if the links ever change. */
  align-self: stretch;
  padding: 0 0.7rem;
  border-radius: 6px;
  border: 1.5px solid var(--band-control-border);
  background: var(--band-control-bg);
  color: white;
  font-size: 1.1rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.settings-gear:hover {
  background: var(--band-control-hover-bg);
  border-color: var(--band-control-border);
}

.settings-gear:focus-visible {
  outline: 2px solid white;
  outline-offset: 2px;
}

.settings-panel {
  position: absolute;
  top: calc(100% + 0.5rem);
  /* Anchored to the gear's right edge at every width, so it opens leftward
     into the page. The gear sits at the end of the nav, near the right edge of
     the viewport, so anchoring left instead pushed the panel off-screen. */
  right: 0;
  left: auto;
  z-index: 200;
  min-width: 15rem;
  /* Never wider than the viewport allows, or opening leftward runs off the
     other side on a narrow screen. */
  max-width: calc(100vw - 1.5rem);
  padding: 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

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

.settings-row {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.settings-row-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
}

.settings-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.settings-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0.6rem;
  border-radius: 6px;
  /* --border-strong, not --border: this is the visible boundary of a control,
     which WCAG 1.4.11 wants at 3:1. */
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.settings-chip:hover {
  border-color: var(--primary);
  color: var(--text);
}

.settings-chip.active {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--on-primary);
}

.settings-chip:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

/* On narrow screens the header wraps, so let the panel track the viewport
   rather than overflow it. */
/* Narrow screens: drop the minimum so the panel can shrink to fit, but keep it
   anchored right. An earlier version flipped to left: 0 here, which anchored it
   to the gear's left edge and sent it off the right of the screen. */
@media (max-width: 480px) {
  .settings-panel {
    min-width: 0;
    width: min(17rem, calc(100vw - 1.5rem));
  }
}

/* The accent swatch on a Colors chip. Decorative -- the palette name sits
   beside it, so the dot is never the only thing identifying an option. The
   ring keeps a pale swatch from disappearing into the chip. */
.settings-swatch {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.25);
}

/* Explains the eye marker on color-blind-friendly themes. */
.settings-note {
  margin: 0.4rem 0 0;
  font-size: 0.7rem;
  line-height: 1.4;
  color: var(--text-secondary);
  max-width: 22rem;
}

/* Eight palettes do not fit on one line. */
.settings-chips {
  flex-wrap: wrap;
}