/* 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: var(--r-sm);
  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: var(--r-sm);
  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: var(--z-picker);
  width: 212px;
  padding: 10px;
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-surface, var(--r));
  /* elevation comes from the shared recipe in style.css */
  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: var(--r);
  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: var(--r-sm);
  background: transparent;
  cursor: pointer;
}
.cp-slider::-webkit-slider-runnable-track { height: 10px; border-radius: var(--r-sm); }
.cp-slider::-moz-range-track { height: 10px; border-radius: var(--r-sm); }

.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: var(--r-sm);
  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: var(--r-sm);
  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: var(--r-sm) 0 0 var(--r-sm); }
.cp-preview { border-radius: 0 var(--r-sm) var(--r-sm) 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: var(--r-sm);
  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;
}
/* The swatch lifts under the pointer, like every other swatch in the application. Consistency of
   RESPONSE is most of what makes a set of controls feel like one product. */
.cp-chip:hover { transform: scale(1.12); }
.cp-chip {
  height: 16px;
  padding: 0;
  border: 0;
  border-radius: var(--r-sm);
  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; }

/* This used to say: 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. That reasoning is how a
   product ends up with four outlined buttons - and it did not even work, because the hard 4px
   radius and the literal #4d4d57 could not follow an appearance, so on the condensed theme this
   footer was the one place still sitting at 4px. Apply is a PRIMARY; the system has a role for
   that, and it is stated once. */
/* The primary tokens, not --ink.
 *
 * This was `background: var(--ink); color: #0f0f11`, which is correct on a dark ground and
 * invisible on a light one: --ink flips to near-black there, so the commit button became
 * near-black text on a near-black chip. Same bug the primary button already had and the same
 * fix - the tokens flip with the ground, measured off its own luminance. */
.cp-apply {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-ink);
}
.cp-apply:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
  color: var(--primary-ink);
}

/* ------------------------------------------------- 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;
}

/* 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; }

/* =========================================================== the colour control

   The surface a drawing's colour is chosen on - web/lib/color-control.js - and the row control
   that opens it. It shares this sheet with the picker on purpose: they are two halves of one
   instrument, the grid for the colour you recognise and the field for the one you do not, and a
   thumb or a checkerboard that drifted between them would be visible the moment they open beside
   each other.

   Paint is the control system's: the buttons wear `chip` and the figure wears `txt`, so this file
   states geometry and nothing else. */

.cc-pop {
  position: fixed;
  z-index: var(--z-picker);
  /* Ten swatch columns at seventeen and a bit, three-pixel gutters, eight of padding. The width
     is the grid's, not a round number chosen first and divided afterwards - which is how the
     eight-wide grey row came to sit in a ten-wide grid with a hole in it. */
  width: 214px;
  padding: 8px;
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-surface, var(--r));
  color: var(--ink);
  font: var(--t-sm) var(--ui);
  user-select: none;
}

.cc-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; }

/* A swatch is a colour, not a control face: no hairline of the product's own over an arbitrary
   hue, only a dark seal so white on a pale ground still has an edge. */
.cc-sw {
  aspect-ratio: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: var(--r-sm);
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35);
  transition: transform var(--t-tap) var(--ease);
}
/* The swatch lifts under the pointer - the same response every other swatch in the product gives.
   Consistency of RESPONSE is most of what makes a set of controls feel like one product. */
.cc-sw:hover { transform: scale(1.18); z-index: 1; }
/* SELECTED IS A RING INSIDE THE CELL, not an outline around it. An outline grows the swatch,
   which shoves the row and clips against the edge of the grid on the first and last column; a
   knocked-out inner ring states the same thing and moves nothing. */
.cc-sw.on {
  box-shadow: inset 0 0 0 2px var(--panel-2), inset 0 0 0 3.5px var(--ink), inset 0 0 0 4.5px rgba(0, 0, 0, .35);
}

.cc-rule { height: 1px; margin: 9px 0; background: var(--line-2); }
.cc-row { display: flex; align-items: center; gap: 7px; }
.cc-label { flex: 0 0 auto; color: var(--ink-dim); font: var(--t-xs) var(--ui); }

/* The opacity track: the colour itself, fading over a checkerboard. */
.cc-track { position: relative; flex: 1 1 auto; min-width: 60px; height: 14px; cursor: pointer; touch-action: none; }
.cc-track::before,
.cc-track::after { content: ''; position: absolute; inset: 4px 0; border-radius: var(--r-sm); }
.cc-track::before {
  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;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
}
.cc-track::after { background: linear-gradient(to right, transparent, var(--cc-c, #fff)); }
/* The picker's thumb, to the pixel: a white ring over whatever it is standing on. */
.cc-thumb {
  position: absolute;
  top: 1px;
  z-index: 1;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .6);
  pointer-events: none;
}

/* `input.cc-pct`, not `.cc-pct`: the short text field in style.css is `input.txt` and carries a
   92px width, which a bare class cannot outrank - it stretched the figure across the row and left
   the track a thumb wide. Same specificity, later sheet. */
input.cc-pct {
  flex: 0 0 auto;
  width: 44px;
  padding: 0 6px;
  text-align: right;
}

/* The opacity row runs label - track - figure; the action row is two buttons. Both are .cc-row,
   and each says only where it differs. */
.cc-opa { gap: 8px; }
.cc-act { gap: 6px; }
.cc-none,
.cc-custom { display: inline-flex; align-items: center; gap: 6px; padding: 0 8px; }
.cc-custom { flex: 1 1 auto; min-width: 0; justify-content: flex-start; }
.cc-hex { font: var(--t-xs) var(--mono); text-transform: lowercase; }

/* The swatch inside each of the two buttons, over the same checkerboard the track uses, so a
   colour at forty per cent looks like one rather than like a duller colour at full strength. */
.cc-customsw,
.cc-slash,
.cc-chipsw {
  position: relative;
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border-radius: var(--r-sm);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .4);
  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: 6px 6px;
  background-position: 0 0, 3px 3px;
}
.cc-customsw::after,
.cc-chipsw::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--r-sm);
  background: var(--cc-c, #fff);
  opacity: var(--cc-a, 1);
}
/* NO COLOUR, drawn the way every drawing tool draws it: an empty square with one diagonal
   through it. A word alone would be a checkbox; the mark is what makes it read at a glance. */
.cc-slash { background-image: none; box-shadow: inset 0 0 0 1px var(--c-line-hover); }
.cc-slash::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top right, transparent calc(50% - 0.7px), #f23645 calc(50% - 0.7px), #f23645 calc(50% + 0.7px), transparent calc(50% + 0.7px));
}

/* THE ROW CONTROL: the same instrument where a settings window puts a label beside it. */
.cc-chip { display: inline-flex; align-items: center; gap: 7px; padding: 0 9px; }
.cc-chippct { font: var(--t-xs) var(--mono); }
/* A channel that is switched off says so in the control that opens it, rather than only inside.
   Without this a rectangle with no border showed a border swatch of its last colour. */
.cc-chip.cc-off .cc-chipsw,
.cc-pop.cc-off .cc-customsw { box-shadow: inset 0 0 0 1px var(--c-line-hover); }
.cc-chip.cc-off .cc-chipsw::after,
.cc-pop.cc-off .cc-customsw::after { opacity: .15; }

/* Under a finger. The track is the one control here that is DRAGGED, so it gets the thumb-sized
   target the rest of the product's sliders already take; the swatches are tapped, and a 17px cell
   in a grid of eighty is deliberately not enlarged - the grid would not fit the screen, and the
   full picker one button away is the coarse-pointer answer for an exact colour. */
@media (pointer: coarse) {
  .cc-track { min-width: 48px; height: 26px; }
  .cc-thumb { top: 7px; width: 16px; height: 16px; margin-left: -8px; }
  .cc-track::before,
  .cc-track::after { inset: 10px 0; }
  /* The figure has to hold "100%" at the touch type size, and touch.css puts ten pixels of
     padding on either side of it: at the mouse width the phone clipped the per-cent sign clean
     off, which is the sort of thing that only ever shows up on the device. */
  input.cc-pct { width: 64px; padding: 0 8px; }
  .cc-none,
  .cc-custom { padding: 0 10px; }
}