/* Colour picker, standalone stylesheet. Pairs with color-picker.js. See README.md.

   Theming: set any of these custom properties (on :root or any ancestor). Each one falls back to
   the usual token names (--raised, --border-strong, --text, --muted, --code, --accent-ink, --shadow)
   and then to a built-in dark palette, so it works with no setup at all.

     --cp-size        swatch size (default 40px, or set data-size on the input)
     --cp-radius      swatch corner radius
     --cp-bg          popover background
     --cp-border      popover border
     --cp-text        text colour
     --cp-muted       secondary text
     --cp-field-bg    hex field background
     --cp-ring        focus ring colour
     --cp-shadow      popover shadow

   This file sets no cursor, so a custom cursor stylesheet applies everywhere. The hover rules at the
   bottom use the "animate" keyframes of that stylesheet and do nothing if it is absent. */

.cp { display: inline-block; vertical-align: middle; --cp-color: #f5b03e; }
.cp[hidden] { display: none !important; }
.cp-native { display: none !important; }

/* The swatch: a plain rounded square filled with the colour, no visible border. */
.cp-swatch {
  box-sizing: border-box; display: block; margin: 0; padding: 0; border: 0;
  width: var(--cp-size, 40px); height: var(--cp-size, 40px);
  border-radius: var(--cp-radius, 11px); background: var(--cp-color);
}
.cp-swatch:focus-visible { outline: 2px solid var(--cp-ring, var(--accent-ink, #f5b03e)); outline-offset: 3px; }
.cp-swatch:disabled { opacity: 0.5; }

.cp-pop {
  position: fixed; z-index: 400; box-sizing: border-box; width: 240px; padding: 16px;
  color: var(--cp-text, var(--text, #eceff4)); font-size: 14px; line-height: 1.4; font-family: inherit;
  background: var(--cp-bg, var(--raised, #1b212c));
  border: 1px solid var(--cp-border, var(--border-strong, #323b4c));
  border-radius: 16px;
  box-shadow: var(--cp-shadow, var(--shadow, 0 10px 34px rgba(0, 0, 0, 0.45)));
  -webkit-user-select: none; user-select: none;
}

/* The wheel: hue around the circle, saturation from the centre out. The brightness slider dims it. */
.cp-wheel {
  position: relative; width: 208px; height: 208px; margin: 0 auto; border-radius: 50%; touch-action: none;
  background:
    radial-gradient(circle closest-side, #fff, rgba(255, 255, 255, 0)),
    conic-gradient(#f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
}
.cp-wheel::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: #000;
  opacity: var(--cp-dim, 0); pointer-events: none;
}
.cp-wheel-thumb, .cp-bright-thumb {
  position: absolute; z-index: 1; box-sizing: border-box; width: 22px; height: 22px; margin: -11px 0 0 -11px;
  border: 3px solid #fff; border-radius: 50%; background: var(--cp-current, #fff);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.4); pointer-events: none;
}
.cp-bright-thumb { top: 50%; }

.cp-bright {
  position: relative; height: 14px; margin: 18px 6px 16px; border-radius: 7px; touch-action: none;
  background: linear-gradient(to right, #000, var(--cp-full, #fff));
}
.cp-wheel:focus-visible, .cp-bright:focus-visible { outline: 2px solid var(--cp-ring, var(--accent-ink, #f5b03e)); outline-offset: 4px; }

.cp-row { display: flex; align-items: center; gap: 10px; }
.cp-chip { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px; background: var(--cp-current, #fff); }
.cp-hex {
  box-sizing: border-box; flex: 1 1 auto; min-width: 0; width: 100%; padding: 8px 10px; margin: 0;
  font: 13px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-transform: lowercase;
  color: var(--cp-text, var(--text, #eceff4));
  background: var(--cp-field-bg, var(--code, #0e1117));
  border: 1px solid var(--cp-border, var(--border-strong, #323b4c)); border-radius: 9px;
}
.cp-hex:focus { outline: none; border-color: var(--cp-ring, var(--accent-ink, #f5b03e)); }
.cp-hex.cp-invalid { border-color: #ff6e6e; }

.cp-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.cp-preset {
  box-sizing: border-box; width: 26px; height: 26px; padding: 0; margin: 0; border: 2px solid transparent;
  border-radius: 50%; background: var(--cp-p);
}
.cp-preset:hover { border-color: var(--cp-text, var(--text, #eceff4)); }
.cp-preset:focus-visible { outline: 2px solid var(--cp-ring, var(--accent-ink, #f5b03e)); outline-offset: 2px; }

/* Hover animation for the parts that are not links or buttons (keyframes come from the cursor stylesheet). */
.cp-wheel:hover, .cp-bright:hover { animation: animate 0.4s infinite !important; }