/* THE OKLCH COLOUR PICKER — its own sheet (2026-08-24).
 *
 * It lived in `apps/editor/style.css`, which is the right home for the editor
 * and the wrong one for a component TWO apps now mount: the Studio embeds this
 * picker inline in the pairing draft (`pairing-audition.js`), and loading the
 * editor's whole 4,600-line stylesheet to get these rules would drag every
 * editor rule into the Studio's cascade with them.
 *
 * Same move, and the same reason, as `apps/studio/lib/slideshow.css`: a
 * component more than one door wears gets a sheet of its own, and both doors
 * link it.
 *
 * ⚠ EVERY RULE HERE IS NESTED UNDER `.oklch-picker`, and that is what makes the
 * split safe — nothing in this file can reach anything outside the picker's own
 * root, whichever app's cascade it lands in. It is also the rule the extraction
 * selected ON, so keep it true: a rule that needs to escape the root belongs in
 * the app's own sheet, not here.
 *
 * Linked by `apps/editor/index.html` and `apps/studio/index.html`.
 */

/* ---------- OKLCH colour picker popover ---------- */
.oklch-picker {
  position: fixed;
  z-index: 10000;
  background: #1d1f24;
  border: 1px solid #3a3d44;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  font-family: inherit;
  font-size: 11px;
  color: #d8d8d8;
  user-select: none;
}
.oklch-picker .ok-head {
  padding: 6px 10px;
  border-bottom: 1px solid #2c2f35;
  background: #16181c;
  border-radius: 7px 7px 0 0;
}
.oklch-picker .ok-title {
  font-weight: 600;
  color: #d8d8d8;
  letter-spacing: 0.3px;
}
.oklch-picker .ok-desc {
  margin-left: 8px;
  font-size: 11px;
  color: #8b9097;
  letter-spacing: 0.2px;
}
/* CU6 — reproducibility gamut chip in the picker header. */
.oklch-picker .ok-gamut {
  margin-left: 8px;
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid #3a3d44;
  color: #8b9097;
}
.oklch-picker .ok-gamut.gamut-beyond-paint { color: #c9772a; border-color: #c9772a; }
.oklch-picker .ok-body { padding: 10px; }
.oklch-picker .ok-2d {
  display: block;
  cursor: crosshair;
  border-radius: 3px;
  flex: none;
}
.oklch-picker .ok-axis-c {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 10px;
  color: #888;
  text-align: center;
  font-weight: 400 !important;
}
.oklch-picker .ok-axis-row { margin-top: 2px; margin-bottom: 4px; }
.oklch-picker .ok-axis-h {
  flex: 1;
  font-size: 10px;
  color: #888;
  text-align: center;
}
.oklch-picker .ok-eyedrop {
  background: #2a2d33;
  color: #d8d8d8;
  border: 1px solid #3a3d44;
  border-radius: 3px;
  padding: 2px 8px;
  cursor: pointer;
  font-size: 12px;
  line-height: 1.2;
}
.oklch-picker .ok-eyedrop:hover { background: #34373e; }
.oklch-picker .ok-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}
.oklch-picker .ok-row[hidden] { display: none; }
/* The picker's two checkbox rows — "Snap to standard" and the caller-supplied
   extra (today the band popover's "Variable colour"). NEITHER had a rule, so
   both rendered as bare inline labels: `cursor: default` on a control that
   toggles when you click it, and the checkbox's browser-default left margin
   pushing the text ~4px out of the column every other row lines up in. One rule
   for both, so the pair reads as a pair. Deliberately no `accent-color`: the
   checked state stays the browser blue it already was — recolouring a control
   is a separate decision from aligning it. */
.oklch-picker .ok-variable-label,
.oklch-picker .ok-snap-label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
}
.oklch-picker .ok-variable-label input,
.oklch-picker .ok-snap-label input {
  margin: 0;
  cursor: pointer;
}
.oklch-picker .ok-lab {
  width: 22px;
  margin-right: 4px;
  text-align: center;
  font-weight: 600;
  color: #b8b8b8;
}
.oklch-picker .ok-bar {
  display: block;
  cursor: ew-resize;
  border-radius: 3px;
  width: 390px;
  flex: none;
}
.oklch-picker .ok-num {
  width: 54px;
  background: #14161a;
  color: #d8d8d8;
  border: 1px solid #3a3d44;
  border-radius: 3px;
  padding: 2px 4px;
  font-size: 11px;
  font-family: inherit;
}
.oklch-picker .ok-rgb-row { margin-top: 10px; }
.oklch-picker .ok-swatch {
  width: 22px;
  height: 22px;
  border: 1px solid #3a3d44;
  border-radius: 3px;
}
.oklch-picker .ok-hex {
  flex: 1;
  background: #14161a;
  color: #d8d8d8;
  border: 1px solid #3a3d44;
  border-radius: 3px;
  padding: 3px 6px;
  font-size: 11px;
  font-family: ui-monospace, Menlo, monospace;
}
.oklch-picker .ok-copy,
.oklch-picker .ok-cancel,
.oklch-picker .ok-ok {
  background: #2a2d33;
  color: #d8d8d8;
  border: 1px solid #3a3d44;
  border-radius: 3px;
  padding: 4px 14px;
  cursor: pointer;
  font-size: 11px;
}
.oklch-picker .ok-copy:hover,
.oklch-picker .ok-cancel:hover,
.oklch-picker .ok-ok:hover { background: #34373e; }
.oklch-picker .ok-ok {
  background: #3a6b3a;
  border-color: #4e8a4e;
  color: #fff;
  font-weight: 600;
}
.oklch-picker .ok-ok:hover { background: #468146; }
.oklch-picker .ok-actions-row {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #2c2f35;
}
.oklch-picker .ok-actions-spacer { flex: 1; }
.oklch-picker .ok-swatches-row {
  margin-top: 10px;
}
.oklch-picker .ok-swatches {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  flex: 1;
  padding-bottom: 4px;
  scrollbar-width: thin;
}
.oklch-picker .ok-swatches::-webkit-scrollbar { height: 6px; }
.oklch-picker .ok-swatches::-webkit-scrollbar-thumb {
  background: #3a3d44; border-radius: 3px;
}
.oklch-picker .ok-swatch-chip {
  width: 22px;
  height: 22px;
  flex: none;
  border: 1px solid #3a3d44;
  border-radius: 3px;
  padding: 0;
  cursor: pointer;
}
.oklch-picker .ok-swatch-chip:hover { border-color: #d8d8d8; }
.oklch-picker .ok-swatches.is-blend-target {
  outline: 2px dashed #e8c96a;
  outline-offset: 2px;
  border-radius: 3px;
}
.oklch-picker .ok-saved-row { margin-top: 6px; }
.oklch-picker .ok-saved {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  flex: 1;
  min-height: 22px;
  padding-bottom: 4px;
  scrollbar-width: thin;
}
.oklch-picker .ok-saved::-webkit-scrollbar { height: 6px; }
.oklch-picker .ok-saved::-webkit-scrollbar-thumb {
  background: #3a3d44; border-radius: 3px;
}
.oklch-picker .ok-saved.is-blend-target {
  outline: 2px dashed #e8c96a;
  outline-offset: 2px;
  border-radius: 3px;
}
.oklch-picker .ok-saved-add {
  width: 22px; height: 22px; flex: none;
  border: 1px solid #3a3d44;
  border-radius: 3px;
  background: #2a2d33;
  color: #d8d8d8;
  font-size: 15px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
}
.oklch-picker .ok-saved-add:hover { background: #34373e; }
.oklch-picker .ok-saved-input-row { margin-top: 6px; }
.oklch-picker .ok-saved-input {
  flex: 1;
  background: #1c1e22;
  border: 1px solid #3a3d44;
  border-radius: 3px;
  color: #e8e8e8;
  font: inherit;
  padding: 3px 6px;
}
.oklch-picker .ok-saved-commit {
  flex: none;
  border: 1px solid #3a3d44;
  border-radius: 3px;
  background: #2a2d33;
  color: #d8d8d8;
  padding: 3px 10px;
  cursor: pointer;
}
.oklch-picker .ok-saved-commit:hover { background: #34373e; }
.oklch-picker .ok-registry-row { margin-top: 6px; }
.oklch-picker .ok-registry-toggle {
  flex: none;
  border: 1px solid #3a3d44;
  border-radius: 3px;
  background: #2a2d33;
  color: #d8d8d8;
  padding: 3px 10px;
  font: inherit;
  cursor: pointer;
}
.oklch-picker .ok-registry-toggle:hover { background: #34373e; }
.oklch-picker .ok-registry-controls { margin-top: 6px; }
.oklch-picker .ok-registry-family,
.oklch-picker .ok-registry-gamut,
.oklch-picker .ok-registry-search {
  background: #1c1e22;
  border: 1px solid #3a3d44;
  border-radius: 3px;
  color: #e8e8e8;
  font: inherit;
  padding: 3px 6px;
}
.oklch-picker .ok-registry-family { flex: none; max-width: 118px; }
.oklch-picker .ok-registry-gamut { flex: none; max-width: 120px; }   /* CU6 gamut filter */
.oklch-picker .ok-registry-search { flex: 1; min-width: 0; }
.oklch-picker .ok-registry-grid-row { margin-top: 6px; }
.oklch-picker .ok-registry-grid {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 4px;
  flex: 1;
  max-height: 150px;
  overflow-y: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}
.oklch-picker .ok-registry-grid::-webkit-scrollbar { width: 6px; }
.oklch-picker .ok-registry-grid::-webkit-scrollbar-thumb {
  background: #3a3d44; border-radius: 3px;
}
.oklch-picker .ok-registry-grid.is-blend-target {
  outline: 2px dashed #e8c96a;
  outline-offset: 2px;
  border-radius: 3px;
}
.oklch-picker .ok-registry-more {
  color: #8a8d94;
  font-size: 11px;
  align-self: center;
  padding: 0 4px;
}
.oklch-picker .ok-blend-row { margin-top: 6px; }
.oklch-picker .ok-blend-chip {
  width: 22px; height: 22px; flex: none;
  border: 1px solid #3a3d44;
  border-radius: 3px;
  padding: 0;
  cursor: pointer;
}
.oklch-picker .ok-blend-chip:hover { border-color: #d8d8d8; }
.oklch-picker .ok-blend-chip.is-picking {
  border-color: #e8c96a;
  box-shadow: 0 0 0 2px rgba(232, 201, 106, 0.45);
}
.oklch-picker .ok-blend-bar {
  display: block;
  flex: 1;
  height: 22px;
  cursor: pointer;
  border-radius: 3px;
}
/* The full OKLCH picker embedded inline in the Full pane — drop its own frame
   (the shell provides the popover chrome); its head keeps the live colour name +
   reproducibility-gamut chip. */
.oklch-picker.ok-embedded { position: static; z-index: auto; box-shadow: none;
  border: none; border-radius: 0; background: transparent; }
.oklch-picker.ok-embedded .ok-head { background: transparent; border-radius: 0; }