/* =============================================================================
   Hambone — Settings panel
   A slide-in drawer (absolute View pattern, not a native modal) with theme
   selection + display preferences. Token-driven.
   ========================================================================== */

.settings-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--touch); min-height: var(--touch);
  border-radius: var(--radius-pill);
  border: var(--border-hair) solid var(--line);
  background: transparent; color: var(--ink);
  cursor: pointer; padding: 0 var(--space-4);
  font-family: var(--font-body); font-size: var(--fs-sm);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.settings-toggle:hover { border-color: var(--accent); color: var(--accent); }

/* Scrim */
.settings-scrim {
  position: fixed; inset: 0; z-index: var(--z-modal);
  background: color-mix(in srgb, #000 60%, transparent);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-out), visibility var(--dur-base);
}
.settings-scrim[data-open="true"] { opacity: 1; visibility: visible; }

/* Drawer (absolute View, animated — not <dialog>/Modal) */
.settings-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: calc(var(--z-modal) + 1);
  width: min(420px, 92vw);
  background: var(--bg-elev);
  border-left: var(--border-hair) solid var(--line);
  box-shadow: var(--shadow-lg);
  transform: translateX(100%);
  transition: transform var(--dur-base) var(--ease-out);
  display: flex; flex-direction: column;
  overflow-y: auto;
}
.settings-scrim[data-open="true"] .settings-drawer { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) { .settings-drawer { transition: none; } }

.settings-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-5) var(--space-6);
  border-bottom: var(--border-hair) solid var(--line);
  position: sticky; top: 0; background: var(--bg-elev); z-index: 1;
}
.settings-header h2 { font-size: var(--fs-lg); }
.settings-close {
  min-width: var(--touch); min-height: var(--touch);
  background: transparent; border: none; color: var(--ink-dim);
  font-size: var(--fs-xl); cursor: pointer; line-height: 1;
  border-radius: var(--radius-md);
}
.settings-close:hover { color: var(--ink); }

.settings-body { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-8); }
.settings-group__label {
  font-size: var(--fs-xs); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest); text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: var(--space-4);
}

/* --- Theme swatches ----------------------------------------------------- */
.theme-list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.theme-option {
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-3); cursor: pointer;
  border: var(--border-thin) solid var(--line);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface) 40%, transparent);
  transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.theme-option:hover { transform: translateY(-2px); }
.theme-option:has(input:checked) { border-color: var(--accent); }
.theme-option:has(input:focus-visible) { outline: var(--border-thin) solid var(--focus); outline-offset: 2px; }
.theme-option input { position: absolute; opacity: 0; pointer-events: none; }
.theme-swatch { height: 44px; border-radius: var(--radius-sm); display: flex; overflow: hidden; border: var(--border-hair) solid rgba(255,255,255,0.08); }
.theme-swatch span { flex: 1; }
.theme-option__name { font-size: var(--fs-sm); font-weight: var(--weight-medium); }
.theme-option__desc { font-size: var(--fs-xs); color: var(--ink-faint); }

/* Swatch previews (raw values — this IS the palette preview, not themed UI) */
.sw-neon   span:nth-child(1){background:#14102b} .sw-neon   span:nth-child(2){background:#2d1f52} .sw-neon   span:nth-child(3){background:#f5c542}
.sw-golden span:nth-child(1){background:#0b0a08} .sw-golden span:nth-child(2){background:#1c1813} .sw-golden span:nth-child(3){background:#d4af37}
.sw-a24    span:nth-child(1){background:#0f0f0f} .sw-a24    span:nth-child(2){background:#1a1a1a} .sw-a24    span:nth-child(3){background:#ff5c39}
.sw-noir   span:nth-child(1){background:#050505} .sw-noir   span:nth-child(2){background:#121212} .sw-noir   span:nth-child(3){background:#e6a437}

/* --- Toggle switches ---------------------------------------------------- */
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-2); }
.setting-row__text { display: flex; flex-direction: column; gap: 2px; }
.setting-row__name { font-size: var(--fs-sm); }
.setting-row__desc { font-size: var(--fs-xs); color: var(--ink-faint); }

.switch { position: relative; display: inline-block; width: 48px; height: 28px; flex: none; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch__track {
  position: absolute; inset: 0; border-radius: var(--radius-pill);
  background: var(--surface-2); border: var(--border-hair) solid var(--line);
  transition: background var(--dur-fast) var(--ease-out);
}
.switch__thumb {
  position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  border-radius: var(--radius-pill); background: var(--ink-dim);
  transition: transform var(--dur-fast) var(--ease-spring), background var(--dur-fast) var(--ease-out);
}
.switch input:checked ~ .switch__track { background: color-mix(in srgb, var(--accent) 40%, var(--surface-2)); }
.switch input:checked ~ .switch__thumb { transform: translateX(20px); background: var(--accent); }
.switch input:focus-visible ~ .switch__track { outline: var(--border-thin) solid var(--focus); outline-offset: 2px; }

/* --- Select (font size etc.) -------------------------------------------- */
.setting-select {
  min-height: var(--touch); padding: var(--space-2) var(--space-4);
  background: var(--surface); color: var(--ink);
  border: var(--border-hair) solid var(--line); border-radius: var(--radius-md);
  font-family: var(--font-body); font-size: var(--fs-sm); cursor: pointer;
}

/* Density + reduced-motion effects applied at :root via data-* (see main scaling) */
:root[data-density="cozy"]  { --space-16: 6rem; --space-20: 9rem; }
:root[data-motion="off"] * { animation: none !important; transition: none !important; }
:root[data-grain="off"] body::after { display: none; }