/* The compact Colour picker (components/picker-compact.js). A core
   sheet: every tier.

   About 240 wide: its content is 56 cells (224) whatever the inset of
   the window it stands in, as the scenes' windows keep their content
   (the window adds its inset twice: 256 at the default 16; 224 holds
   the Format switch, 72, a value of eleven mono characters, "255 255
   255", and the eyedropper, 24, with their gaps). A stack the Panel
   space apart (components/surface.css --stack-gap): the square (40
   cells high), the two strips (the Slider, its words for a reader
   only, no value field), the value row (the Format switch, the value
   field of the ladder, the eyedropper as a square button of the
   ladder), then the palette's swatches, 16 each and 8 apart, wrapping.

   The square paints black up over a run from white to the hue, the
   model's own colours, not the chrome's; its mark is the wheel's
   handle's idiom (components/picker.css): a disc of 12 in the colour,
   a ring of the page's ground and a hair of the text colour; a focus
   from the keys rings the square in the focus colour. The corner is
   the control's by the law. */
@property --cpick-ring {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
.ds-cpick {
  --cpick-w: calc(var(--ds-grid-cell) * 56);
  display: grid;
  /* and the give of a strip at its window's edge, so the square, the
     strips and the value row keep their margins to the stretched
     window (components/effects/give.js) */
  width: calc(var(--cpick-w) + var(--stretch-l) + var(--stretch-r));
  row-gap: var(--stack-gap, var(--ds-space-8));
  min-width: 0;
  color: var(--ds-color-text);
  font-family: var(--ds-type-family);
  font-size: var(--type, var(--ds-text-16));
  line-height: var(--line, calc(var(--ds-grid-cell) * 6));
  font-weight: var(--ds-type-weight);
}
.ds-cpick__field {
  position: relative;
  box-sizing: border-box;
  height: calc(var(--ds-grid-cell) * 40);
  border-radius: var(--control-corner, var(--ds-radius-corner));
  background:
    linear-gradient(to top, #000, transparent),
    linear-gradient(to right, #fff, hsl(var(--hue, 0) 100% 50%));
  /* a colour shown as a colour: the colour hair, not the inactive
     stroke (a grey ring round its black foot) */
  box-shadow: inset 0 0 0 var(--rule) var(--colour-hair);
  touch-action: none;
  cursor: crosshair;
  -webkit-user-select: none;
  user-select: none;
  outline: none;
}
.ds-cpick__field[data-dragging] {
  cursor: crosshair;
}
html[data-kbd] .ds-cpick__field:focus-visible:not([data-pressed]) {
  outline: 1px solid var(--ds-color-focus);
  outline-offset: 2px;
}
.ds-cpick__mark {
  position: absolute;
  left: var(--x, 0%);
  top: var(--y, 100%);
  width: calc(var(--ds-grid-cell) * 3);
  height: calc(var(--ds-grid-cell) * 3);
  margin: calc(var(--ds-grid-cell) * -1.5) 0 0 calc(var(--ds-grid-cell) * -1.5);
  border-radius: 50%;
  background: var(--swatch);
  /* a ring of the page's ground 2 wide, then the text's ring, its width
     the mark's light (a box-shadow, so it eases: an outline's width is
     drawn in whole pixels) */
  --cpick-ring: 1px;
  box-shadow:
    0 0 0 2px var(--ds-color-page),
    0 0 0 calc(2px + var(--cpick-ring)) var(--ds-color-text);
  pointer-events: none;
  /* its light, as the sliders' marks have theirs: the ring 2 under the
     hand, a keyboard focus or a press, on the clock and the curve, at
     once under the press (the motion audit, 2026-10-12: it answered
     nothing) */
  transition: --cpick-ring var(--ds-motion-clock) var(--ds-motion-ease);
}
.ds-cpick__field[data-hover] .ds-cpick__mark,
.ds-cpick__field[data-dragging] .ds-cpick__mark,
html[data-kbd]
  .ds-cpick__field:focus-visible:not([data-pressed])
  .ds-cpick__mark {
  --cpick-ring: 2px;
}
.ds-cpick__field[data-dragging] .ds-cpick__mark {
  transition-duration: 0s;
}
.ds-cpick__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* the strips: the Slider's bar alone across the width (its label for
   a reader; the label column the sheet lays out is given up) */
.ds-cpick__strips {
  display: grid;
  row-gap: var(--stack-gap, var(--ds-space-8));
  min-width: 0;
}
.ds-cpick__strips .ds-slider[data-label="beside"] {
  grid-template-columns: minmax(0, 1fr);
}
.ds-cpick__strips .ds-slider__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* The value row: the format switch and eyedropper absorb their side's
   window stretch. The middle HEX/RGB/HSL field keeps its resting width
   and position; the gaps remain constant throughout the return. */
.ds-cpick__row {
  display: grid;
  /* the format 80: its word (HEX, 33) beside the chevron's square slot
     (round 6, iteration 16: the slot is the control's height, and 72
     left the word 24) */
  grid-template-columns:
    calc(var(--ds-grid-cell) * 20 + var(--stretch-l)) minmax(0, 1fr)
    calc(var(--control, calc(var(--ds-grid-cell) * 8)) + var(--stretch-r));
  column-gap: var(--ds-space-8);
  align-items: start;
  min-width: 0;
}
.ds-cpick__format {
  position: relative;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
}
.ds-cpick__format .ds-dropdown__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.ds-cpick__valuebox {
  display: flex;
  min-width: 0;
}
.ds-cpick__value {
  width: 100%;
}
.ds-cpick__drop {
  width: calc(var(--control, calc(var(--ds-grid-cell) * 8)) + var(--stretch-r));
  min-width: 0;
  padding: 0;
}
.ds-cpick__drop:disabled {
  color: var(--ds-color-text-dim);
  cursor: default;
}
/* the swatches: squares of 16, 8 apart, the one that is the colour now
   marked by a ring of the text colour (the saved squares' idiom) */
.ds-cpick__swatches {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-8);
  min-width: 0;
}
.ds-cpick__swatches[hidden] {
  display: none;
}
.ds-cpick__item {
  display: flex;
}
.ds-cpick__swatch {
  display: block;
  box-sizing: border-box;
  width: var(--ds-space-16);
  height: var(--ds-space-16);
  margin: 0;
  padding: 0;
  border: 0;
  /* the one corner, at most a quarter of the square (the Checkbox's cap) */
  border-radius: min(var(--ds-radius-corner), var(--ds-radius-4));
  background:
    linear-gradient(var(--swatch), var(--swatch)),
    repeating-conic-gradient(
        var(--ds-color-stroke) 0 25%,
        var(--ds-color-page) 0 50%
      )
      0 0 / var(--ds-space-8) var(--ds-space-8);
  box-shadow: inset 0 0 0 var(--rule) var(--colour-hair);
  cursor: pointer;
}
@media (hover: hover) {
  .ds-cpick__swatch:hover {
    outline: 1px solid var(--ds-color-text);
    outline-offset: 2px;
  }
}
.ds-cpick__swatch[data-current] {
  outline: 1px solid var(--ds-color-text);
  outline-offset: 2px;
}
/* a swatch of the ground's own lightness (picker-compact.js data-near):
   its edge the inactive stroke, where the colour hair alone was lost on
   the ground (iteration 24's refinement) */
.ds-cpick__swatch[data-near] {
  box-shadow: inset 0 0 0 var(--stroke-inactive-w) var(--ds-stroke-inactive);
}
html[data-kbd] .ds-cpick__swatch:focus-visible {
  outline: 1px solid var(--ds-color-focus);
  outline-offset: 2px;
}
/* a finger: the square's mark stays; the swatches 24 with their 8 gap
   make a 32 pitch, under the touch unit, so each takes a band of 48
   about itself through its item */
@media (pointer: coarse) {
  .ds-cpick__swatch {
    width: calc(var(--ds-grid-cell) * 6);
    height: calc(var(--ds-grid-cell) * 6);
  }
  .ds-cpick__item {
    position: relative;
  }
  .ds-cpick__item::after {
    content: "";
    position: absolute;
    inset: calc(var(--ds-grid-cell) * -3);
  }
}
@media (forced-colors: active) {
  .ds-cpick__field,
  .ds-cpick__mark,
  .ds-cpick__swatch {
    forced-color-adjust: none;
  }
  .ds-cpick__field {
    outline: 1px solid CanvasText;
  }
  html[data-kbd] .ds-cpick__field:focus-visible,
  html[data-kbd] .ds-cpick__swatch:focus-visible {
    outline: 2px solid Highlight;
  }
}