/* The colour theme control (templates/_theme_pick.html): a dot of the current theme's colours with a small
   burger opens a menu of the four themes. Self-contained: it needs only the theme tokens (--grad, --panel,
   --border, --text, --muted, --focus). Targets are at least 44x44 px (U10). */
.theme-pick { position: relative; margin-left: auto; flex: none; }
.who + .theme-pick { margin-left: 0; }
.theme-pick > summary { list-style: none; display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; min-width: 44px; min-height: 44px; padding: 0 8px; border-radius: 999px; cursor: pointer;
  border: 1px solid transparent; }
.theme-pick > summary::-webkit-details-marker { display: none; }
.theme-pick > summary:hover, .theme-pick[open] > summary { border-color: var(--border-strong); background: var(--panel-2); }
.theme-pick > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.theme-dot { width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--grad);
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--border-strong); }
.theme-burger { display: inline-flex; flex-direction: column; gap: 3px; }
.theme-burger i { display: block; width: 12px; height: 2px; border-radius: 1px; background: var(--muted); }
.theme-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; display: grid; gap: 2px;
  min-width: 11rem; padding: 6px; border-radius: var(--radius, 10px); background: var(--panel);
  border: 1px solid var(--border-strong); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45); }
.theme-menu button.swatch { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px;
  padding: 0 10px; border-radius: 8px; border: 1px solid transparent; background: transparent;
  color: var(--text); font-weight: 600; text-align: left; box-shadow: none; }
.theme-menu button.swatch:hover { background: var(--panel-2); }
.theme-menu button.swatch[aria-pressed="true"] { border-color: var(--border-strong); background: var(--panel-2); }
.theme-menu button.swatch:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.swatch-dot { width: 1.1rem; height: 1.1rem; border-radius: 50%; flex: none; }
.swatch[aria-pressed="true"] .swatch-dot { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--text); }
.swatch[data-theme-set="cyan"] .swatch-dot { background: linear-gradient(135deg, #2ef2e0, #38bdf8); }
.swatch[data-theme-set="yellow"] .swatch-dot { background: linear-gradient(135deg, #ffe14d, #b6f35c); }
.swatch[data-theme-set="green"] .swatch-dot { background: linear-gradient(135deg, #3df5a0, #c6f55a); }
.swatch[data-theme-set="violet"] .swatch-dot { background: linear-gradient(135deg, #b794ff, #f08cff); }