/* Color control: nav icon button + the hue/saturation panel. Uses only the semantic tokens from tokens.css. */
.color-btn, .cm-close, .cm-actions button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.color-btn:focus-visible, .cm-close:focus-visible, .cm-actions button:focus-visible, .cm-range:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }
.color-modal :where(h2, p) { margin: 0; }
.color-btn { display: inline-flex; align-items: center; justify-content: center; position: relative; width: 32px; height: 32px; padding: 0; border-radius: 50%; color: var(--color-text-medium); }
.color-btn::after { content: ''; position: absolute; inset: -6px; } /* keeps a 44px touch target */
.color-btn svg { width: 20px; height: 20px; }
.color-btn:hover { color: var(--color-text-primary); background: var(--color-accent-wash); }
.color-btn[aria-expanded="true"] { color: var(--color-accent); }

/* ─── Color modal ─── */
.color-modal { width: min(440px, calc(100% - 32px)); padding: 28px; border: 1px solid var(--color-border-hairline);
  border-radius: var(--radius-xl); background: var(--color-bg-page); color: var(--color-text-primary); box-shadow: 0 16px 48px rgb(0 0 0 / .25); overflow: visible; }
.color-modal::backdrop { background: transparent; } /* no dimming: the page stays visible so the recolor reads live */
.color-modal form { display: flex; flex-direction: column; gap: 22px; }
.cm-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.cm-title { font-size: 20px; font-weight: 600; line-height: 1.45; margin-bottom: 4px; }
.cm-help { font-size: 14px; line-height: 1.45; color: var(--color-text-medium); max-width: 320px; }
.cm-close { padding: 6px 10px; border: 1px solid var(--color-border-control); border-radius: 999px; font-size: 13px; line-height: 1.45; }
.cm-close:hover { background: var(--color-accent-wash); }
.cm-row { display: flex; flex-direction: column; gap: 10px; }
.cm-label { display: flex; justify-content: space-between; font-size: 14px; line-height: 1.45; }
.cm-label label { font-weight: 500; }
.cm-label output { color: var(--color-text-muted); }
.cm-range { -webkit-appearance: none; appearance: none; width: 100%; height: 24px; margin: 0; background: transparent; cursor: pointer; }
.cm-range::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: var(--track); }
.cm-range::-moz-range-track { height: 6px; border-radius: 999px; background: var(--track); }
.cm-range::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8px; border-radius: 50%; background: var(--color-bg-page); border: 2px solid var(--color-text-primary); }
.cm-range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--color-bg-page); border: 2px solid var(--color-text-primary); }
.cm-range:focus-visible { outline-offset: 4px; }
#cmHue { --track: linear-gradient(to right, oklch(.68 .14 29), oklch(.68 .14 110), oklch(.68 .14 142), oklch(.68 .14 195), oklch(.68 .14 264), oklch(.68 .14 328), oklch(.68 .14 389)); }
#cmSat { --track: linear-gradient(to right, oklch(.84 .004 var(--cm-hue, 150)), oklch(.6 .15 var(--cm-hue, 150))); }
.cm-preview { display: flex; align-items: center; gap: 12px; padding: 14px; background: var(--color-bg-surface); border: 1px solid var(--color-border-hairline); border-radius: var(--radius-md); }
.cm-sw { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11px; line-height: 1.45; color: var(--color-text-muted); }
.cm-sw i { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--color-border-hairline); }
.cm-note { font-size: 12px; line-height: 1.45; color: var(--color-text-medium); margin-left: 4px; }
.cm-actions { display: flex; gap: 12px; }
.cm-actions button { flex: 1; padding: 12px; border-radius: 999px; font-size: 14px; font-weight: 500; line-height: 1.45; text-align: center; }
.cm-reset { border: 1px solid var(--color-border-control); color: var(--color-text-primary); }
.cm-reset:hover { background: var(--color-accent-wash); }
.cm-done { background: var(--color-text-primary); color: var(--color-bg-page); }
.cm-done:hover { opacity: .88; }

/* cursor-glow switch */
[data-glow="off"] .cursor-glow { display: none !important; }
.cm-switch { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 2px; }
.cm-switch label { font-size: 14px; font-weight: 500; line-height: 1.45; }
.cm-switch p { font-size: 13px; line-height: 1.45; color: var(--color-text-medium); }
.cm-switch input { -webkit-appearance: none; appearance: none; flex: none; position: relative; width: 44px; height: 26px; margin: 0; border-radius: 999px; border: 1.5px solid var(--color-border-control); background: var(--color-bg-surface); cursor: pointer; transition: background .15s ease; }
.cm-switch input::before { content: ''; position: absolute; top: 2px; left: 2px; width: 19px; height: 19px; border-radius: 50%; background: var(--color-text-primary); transition: transform .15s ease; }
.cm-switch input:checked { background: var(--color-accent); border-color: var(--color-accent); }
.cm-switch input:checked::before { transform: translateX(18px); background: var(--color-text-on-accent); }
.cm-switch input:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 3px; }

/* first-visit hint: one soft ring pulse, no text */
.color-btn.is-hint::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--color-accent); animation: colorPulse 1.8s ease-out 1; pointer-events: none; }
@keyframes colorPulse { from { transform: scale(1); opacity: .7; } to { transform: scale(1.7); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .color-btn.is-hint::before { animation: none; opacity: 0; } }

/* cursor glow */
.cursor-glow { pointer-events: none; position: fixed; top: 0; left: 0; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, rgba(180,160,130,.38) 0%, transparent 70%); z-index: 9999; will-change: transform; }

/* panel: anchored under the button, centered on it (position set in color-control.js) */
.color-modal { position: fixed; margin: 0; }
@media (max-width: 640px) { .color-modal { padding: 22px 20px; max-height: calc(100dvh - 88px); overflow-y: auto; } .cm-help { max-width: none; } }