/* MV_ColorPicker — preset swatch grid + a full custom picker (#360), embedded
   in the person form's *Node colour* field and in the tree's Paint colours bar
   (#199). Heritage-toned preset swatches; the Default chip sits first and is
   rendered as a diagonal "no colour" line over the canvas linen so users can
   tell it apart from the coloured tiles. Below the presets, a "Custom colour"
   disclosure opens a 2D spectrum + hue slider + hex field for any colour. */

.color-picker {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.color-picker__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
  gap: var(--space-xs);
}

.color-picker__swatch {
  width: 100%;
  aspect-ratio: 1;
  min-height: 40px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--color-border);
  background: var(--color-surface-alt);
  cursor: pointer;
  transition:
    transform var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.color-picker__swatch:hover {
  transform: translateY(-1px);
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-sm);
}

.color-picker__swatch:focus-visible {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: var(--shadow-glow);
}

/* "Default" chip — render as a diagonal slash so users know "no override".
   The background carries the calm sage default fill so the choice still
   previews what nodes will look like. */
.color-picker__swatch--default {
  background:
    linear-gradient(
      to top right,
      transparent calc(50% - 1.5px),
      var(--color-border-strong) calc(50% - 1.5px),
      var(--color-border-strong) calc(50% + 1.5px),
      transparent calc(50% + 1.5px)
    ),
    var(--color-node-fill-personal);
}

.color-picker__swatch--selected {
  border-color: var(--color-accent);
  border-width: 2.5px;
  box-shadow: var(--shadow-glow);
}

.color-picker__swatch--selected:hover {
  transform: none;
}

@media (hover: none) and (pointer: coarse) {
  .color-picker__swatch {
    min-height: var(--touch-target-min);
  }
}

/* ---- Custom picker (disclosure) ---------------------------------------- */

.color-picker__custom {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

/* The disclosure toggle — a quiet text button with a rotating chevron, matching
   the collapsible-section pattern used elsewhere (e.g. the panel Stories list). */
.color-picker__disclosure {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xxs);
  align-self: flex-start;
  min-height: var(--touch-target-min);
  padding: var(--space-xxs) var(--space-xs);
  margin-left: calc(var(--space-xs) * -1);
  border: none;
  background: transparent;
  border-radius: var(--radius-md);
  color: var(--color-accent);
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: 600;
  cursor: pointer;
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.color-picker__disclosure:hover {
  color: var(--color-accent-hover);
  background-color: var(--color-accent-soft);
}

.color-picker__disclosure:focus-visible {
  outline: none;
  box-shadow: var(--shadow-glow);
}

.color-picker__disclosure-icon {
  width: 1em;
  height: 1em;
}

/* A small chip echoing the active brush when it's a freeform colour, so a
   collapsed picker still shows what you're painting with (#360). */
.color-picker__disclosure-swatch {
  display: none;
  width: 14px;
  height: 14px;
  border-radius: var(--radius-pill);
  border: 1.5px solid rgba(28, 25, 23, 0.25);
}

.color-picker__disclosure-swatch--shown {
  display: inline-block;
}

.color-picker__disclosure[aria-expanded="true"] .color-picker__disclosure-icon {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: no-preference) {
  .color-picker__disclosure-icon {
    transition: transform var(--transition-base);
  }
}

.color-picker__panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.color-picker__panel[hidden] {
  display: none;
}

/* 2D saturation/brightness area. The hue base + gradient overlays are set
   inline by JS; here we own the box, the thumb, and pointer/keyboard feel.
   touch-action:none keeps a touch-drag painting instead of scrolling. */
.color-picker__spectrum {
  position: relative;
  width: 100%;
  height: 140px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--color-border);
  cursor: crosshair;
  touch-action: none;
}

.color-picker__spectrum:focus-visible {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: var(--shadow-glow);
}

.color-picker__spectrum-thumb {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-pill);
  border: 2.5px solid #fff;
  box-shadow: 0 0 0 1px rgba(28, 25, 23, 0.35), var(--shadow-sm);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* Hue slider — a native range input dressed as a rainbow track. Vendor
   pseudo-elements are needed to style the track + thumb consistently. */
.color-picker__hue {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 14px;
  margin: var(--space-xxs) 0;
  border-radius: var(--radius-pill);
  background: linear-gradient(
    to right,
    #ff0000 0%, #ffff00 17%, #00ff00 33%,
    #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%
  );
  cursor: pointer;
}

.color-picker__hue:focus-visible {
  outline: none;
  box-shadow: var(--shadow-glow);
}

.color-picker__hue::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-pill);
  border: 2.5px solid #fff;
  box-shadow: 0 0 0 1px rgba(28, 25, 23, 0.35), var(--shadow-sm);
  background: transparent;
  cursor: pointer;
}

.color-picker__hue::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: var(--radius-pill);
  border: 2.5px solid #fff;
  box-shadow: 0 0 0 1px rgba(28, 25, 23, 0.35), var(--shadow-sm);
  background: transparent;
  cursor: pointer;
}

.color-picker__custom-row {
  display: flex;
  align-items: flex-end;
  gap: var(--space-sm);
}

.color-picker__hex-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs);
  flex: 1 1 auto;
}

.color-picker__hex-caption {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.color-picker__hex {
  width: 100%;
  min-height: var(--touch-target-min);
  padding: var(--space-xs) var(--space-sm);
  /* ≥16px keeps iOS from focus-zooming the field (MOBILE/TOUCH PARITY RULE). */
  font-size: 1rem;
  font-family: var(--font-mono);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  text-transform: lowercase;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.color-picker__hex:hover {
  border-color: var(--color-border-strong);
}

.color-picker__hex:focus-visible {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: var(--shadow-glow);
}

.color-picker__hex--invalid {
  border-color: var(--color-error);
}

.color-picker__hex--invalid:focus-visible {
  border-color: var(--color-error);
  box-shadow: 0 0 0 4px var(--color-error-soft);
}

/* Explicit "Use this colour" — collapses the custom panel once the user is
   happy, freeing the canvas in the Paint colours bar (#360). Tonal, full-width,
   ≥44px so it's an easy mobile target. */
.color-picker__use {
  width: 100%;
  min-height: var(--touch-target-min);
  padding: var(--space-xs) var(--space-sm);
  border: 1.5px solid var(--color-accent);
  border-radius: var(--radius-md);
  background: var(--color-accent-soft);
  color: var(--color-accent-deep);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.color-picker__use:hover {
  background: var(--color-accent);
  color: var(--color-surface);
}

.color-picker__use:focus-visible {
  outline: none;
  box-shadow: var(--shadow-glow);
}

/* Live preview of the committed colour; the empty state shows the same
   diagonal "no colour" slash as the Default chip. */
.color-picker__preview {
  flex: 0 0 auto;
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  border-radius: var(--radius-md);
  border: 1.5px solid var(--color-border);
}

.color-picker__preview--empty {
  background:
    linear-gradient(
      to top right,
      transparent calc(50% - 1.5px),
      var(--color-border-strong) calc(50% - 1.5px),
      var(--color-border-strong) calc(50% + 1.5px),
      transparent calc(50% + 1.5px)
    ),
    var(--color-node-fill-personal);
}