/* The colour picker.
 *
 * Its own stylesheet, deliberately: the chrome is being restyled in style.css and windows.css, and
 * a component that lands in either would collide with that work. Everything here is scoped to .cp
 * and .cf, and it reads the same tokens as the rest so a theme change carries it along.
 */

/* --------------------------------------------------- the field: one square */

/* The whole control in a settings row. No hex box beside it - two colours in one row used to mean
   four controls and thirty characters of lowercase hex, and the row read as a form instead of as
   a pair of colours. The hex value lives in the picker, next to the thing it describes. */

.cf { display: inline-flex; align-items: center; gap: 6px; }

.cf-swatch {
  position: relative;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  cursor: pointer;
  /* a checkerboard UNDER the colour, so a partly transparent swatch reads as transparent rather
     than as a slightly different flat colour */
  background-image:
    linear-gradient(45deg, #2a2a30 25%, transparent 25%, transparent 75%, #2a2a30 75%),
    linear-gradient(45deg, #2a2a30 25%, transparent 25%, transparent 75%, #2a2a30 75%);
  background-size: 8px 8px;
  background-position: 0 0, 4px 4px;
}
.cf-swatch::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 3px;
  background: var(--c, #fff);
}
.cf-swatch:hover { border-color: #4d4d57; }
.cf-swatch:focus-visible { outline: 1px solid var(--focus); outline-offset: 1px; }

/* ------------------------------------------------------------- the picker */

.cp {
  position: fixed;
  z-index: 90;
  width: 212px;
  padding: 10px;
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-surface, 9px);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .5), 0 12px 32px rgba(0, 0, 0, .55);
  color: var(--ink);
  font: var(--t-sm) var(--ui);
  user-select: none;
}

.cp-svwrap { position: relative; line-height: 0; }
.cp-sv {
  display: block;
  width: 192px;
  height: 132px;
  border-radius: 6px;
  cursor: crosshair;
  /* an inset hairline rather than a border: a border around a gradient field reads as a picture
     frame, and the field is an instrument, not an image */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
}

/* The position marker: a white ring, not a filled dot - a dot hides the very colour it is
   pointing at, which is the one thing being judged. */
.cp-dot {
  position: absolute;
  width: 11px;
  height: 11px;
  margin: -5.5px 0 0 -5.5px;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(0, 0, 0, .3);
  pointer-events: none;
}

/* sliders: native range inputs, restyled to read as gradient tracks */
.cp-slider {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 192px;
  height: 10px;
  margin: 10px 0 0;
  border-radius: 5px;
  background: transparent;
  cursor: pointer;
}
.cp-slider::-webkit-slider-runnable-track { height: 10px; border-radius: 5px; }
.cp-slider::-moz-range-track { height: 10px; border-radius: 5px; }

.cp-hue {
  background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
}

/* the opacity track shows the colour fading over a checkerboard, so the slider states the result
   rather than merely a number */
.cp-alphawrap {
  position: relative;
  margin-top: 10px;
  border-radius: 5px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
  background-image:
    linear-gradient(45deg, #35353c 25%, transparent 25%, transparent 75%, #35353c 75%),
    linear-gradient(45deg, #35353c 25%, transparent 25%, transparent 75%, #35353c 75%);
  background-size: 8px 8px;
  background-position: 0 0, 4px 4px;
}
.cp-alphawrap::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 5px;
  background: linear-gradient(to right, transparent, var(--cp-solid, #fff));
  pointer-events: none;
}
.cp-alpha { position: relative; z-index: 1; margin: 0; }

.cp-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -2px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: transparent;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .6);
}
.cp-slider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: transparent;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .6);
}

.cp-row { display: flex; align-items: center; gap: 6px; margin-top: 11px; }

/* before and after, touching, so the pair reads as one comparison rather than two swatches */
.cp-before,
.cp-preview {
  width: 22px;
  height: 24px;
  flex: 0 0 auto;
  background-image:
    linear-gradient(45deg, #2a2a30 25%, transparent 25%, transparent 75%, #2a2a30 75%),
    linear-gradient(45deg, #2a2a30 25%, transparent 25%, transparent 75%, #2a2a30 75%);
  background-size: 8px 8px;
  background-position: 0 0, 4px 4px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09);
}
.cp-before { border-radius: 4px 0 0 4px; }
.cp-preview { border-radius: 0 4px 4px 0; margin-left: -6px; }

.cp-hex {
  flex: 1 1 auto;
  min-width: 0;
  height: 24px;
  padding: 0 7px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bg);
  color: var(--ink);
  font: var(--t-sm) var(--mono);
  text-transform: lowercase;
}
.cp-hex:hover { border-color: var(--line-2); }
.cp-hex:focus { border-color: var(--focus); outline: none; }

.cp-pct {
  flex: 0 0 auto;
  min-width: 30px;
  color: var(--ink-faint);
  font: var(--t-xs) var(--mono);
  text-align: right;
}

.cp-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 3px;
  margin-top: 11px;
}
.cp-chip {
  height: 16px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
}
.cp-chip:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 0 0 1px var(--ink); }

.cp-foot { display: flex; align-items: center; gap: 6px; margin-top: 11px; }
.cp-foot .spacer { flex: 1 1 auto; }

/* The picker's own buttons rather than the shared .btn, so a restyle of the chrome cannot make
   Apply look like something other than the commit. */
.cp-btn {
  height: 24px;
  padding: 0 11px;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  background: var(--panel-3);
  color: var(--ink-dim);
  font: var(--t-sm) var(--ui);
  cursor: pointer;
}
.cp-btn:hover { color: var(--ink); border-color: #4d4d57; }
.cp-apply {
  background: var(--ink);
  border-color: var(--ink);
  color: #0f0f11;
}
.cp-apply:hover { background: #fff; border-color: #fff; color: #0f0f11; }

/* ------------------------------------------------- menu heading + inert row */

/* A heading inside a context menu, as the reference titles its cluster-type list. Quiet and small:
   it names the menu, it is not an item in it. */
.ctx-head {
  padding: 5px 9px 4px;
  color: var(--ink-faint);
  font-size: var(--t-xs);
  letter-spacing: .06em;
}

/* A row that cannot act. Shown rather than hidden, because the reference has the entry and its
   absence would read as a missing feature instead of a known gap; dimmed and unclickable, with the
   reason on hover. */
.ctx-item.ctx-off {
  opacity: .4;
  cursor: default;
}
.ctx-item.ctx-off:hover { background: transparent; }