/* Theme picker component — lives in its own sheet because app.css is the
 * template's and tokens.css is values only. Tokens only; same visual language
 * as .transport / .preset-panel. */

.theme-panel { margin-top: 0.5rem; }

.theme-summary {
  display: flex; align-items: center;
  min-height: var(--tap);
  padding: 0 0.85rem;
  background: color-mix(in srgb, var(--color-surface) 78%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--color-border); border-radius: var(--radius);
  color: var(--color-text);
  font-family: var(--font-prose); font-size: 0.95rem;
  cursor: pointer; list-style: none; user-select: none;
}
.theme-summary::-webkit-details-marker { display: none; }
/* Same caret language as the section titles. */
.theme-summary::after {
  content: '▸'; margin-left: auto; font-size: 0.9rem;
  transition: transform .12s;
}
.theme-panel[open] > .theme-summary::after { transform: rotate(90deg); }
.theme-panel[open] .theme-swatches {
  outline: 800px solid rgb(0 0 0 / 0.18);
  outline-offset: 0;
}

.theme-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(4.2rem, 1fr));
  gap: 0.55rem;
  margin-top: 0.5rem; padding: 0.75rem 0.9rem 0.9rem;
  background: color-mix(in srgb, var(--color-surface) 78%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--color-border); border-radius: var(--radius);
  box-shadow: 0 10px 30px rgb(0 0 0 / 28%);
}

/* The 44px target is the whole button; the visible dot is 28px of it, and the
 * theme name sits under the dot, so the grid reads as a catalogue rather than
 * a row of anonymous circles. The dot itself previews the theme: its own
 * background to accent hues, because that is what the page will look like. */
.theme-swatch {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.15rem;
  width: var(--tap); min-width: var(--tap); min-height: var(--tap);
  padding: 0; border: 0; background: transparent; cursor: pointer;
}
.theme-swatch::before {
  content: ''; position: relative;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--swatch, var(--color-accent-blue));
  border: 1.5px solid var(--color-border);
  box-shadow: 0 2px 10px rgb(0 0 0 / 22%);
  transition: transform .16s cubic-bezier(.2,.8,.2,1), box-shadow .16s, filter .16s;
}
.theme-swatch-name {
  max-width: 100%;
  font-size: 0.6rem; line-height: 1.1;
  color: var(--color-text-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (prefers-reduced-motion: no-preference) {
  .theme-swatch:hover::before { transform: scale(1.1); }
}
.theme-swatch:hover .theme-swatch-name { color: var(--color-text); }
.theme-swatch[aria-pressed="true"]::before,
.theme-swatch[aria-checked="true"]::before {
  border-color: var(--color-accent-green);
  box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-accent-green);
}