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

   Two parts: the palette across the top, its legend in the Slider's
   label column (96); under it the wheel, and beside the wheel the side,
   whose every row starts on one label edge (the label column) and ends
   on one trailing column (the value column of the Slider, 96 here):
   Harmony and Linked; the channels and their values; Hex and Copy; the
   oklch(); the saved colours and Save colour; the palettes and their
   Save and Delete. Rows 8 apart, as in every window of the system.

   - the palette: five columns, four of whole cells and the last what
     is left (a share of the width was a fraction), 96 high, each its highlight, base and shadow (24 : 48 :
     24, the legend's lines beside them), 4 apart, in the control's corner
     by the law. A hand on a column outlines it (a hair of the text
     colour, 2 out: the colour is never covered), and so does a hand on
     its handle in the wheel (the cross-light, data-lit): his design, "a
     hand on a column outlines it". These, and the saved square's below,
     are strokes of the control's own design, in the text colour, never
     the focus colour, so they are not the hover stroke he struck out on
     2026-10-08 ("make sure we never use this hover stroke unless its
     very clearly designed this way!!": the focus ring a click left on a
     field); no other hover stroke exists on the page. The spine removed
     them on that word, and round 2's integration restored them
     (2026-10-09); the chosen one shows a
     check in its base in the ink that reads on it (the light scheme's
     text or page, whatever the page's scheme), and nothing else (Deep
     Down, 2026-10-02: "selected states on colors look ugly"); a keyboard
     focus rings it in the focus colour, only where the keys brought it
     (html[data-kbd], as every ring of both pages);
   - the wheel: a disc of 240, its handles 20 (the chosen 28), each its
     colour in a ring of the page's ground and a hair of the text colour;
     the anchor carries a dot under a rule. A hand on a handle grows it a
     little on the follow clock (colour never bounces), and after the
     intent lights its column (and a column its handle); the lines from
     the anchor show while the five move together; a press gives a
     handle the keys without the keyboard's ring (data-pressed); under
     the handles the shades' dots and ties (the highlight's in the light
     ink, the shadow's in the dark, each cased in the other) and the
     guides of a gesture (dotted, in the ink that reads on the disc);
   - the shades' row under the palette: its word in the label column,
     two bars of one whole width, the lean at its own;
   - the hex: a field of the ladder (the inactive ground, the stroke, the
     mono 15, its hover, its ring 2 out); the oklch() under it in the dim
     mono, on one line;
   - the saved colours: squares of 24, 4 apart, their corner by the law
     (4 inside the row's control height), their × a small button of the
     ladder at the corner under the hand (the colour stays whole);
   - the buttons beside a field have whole widths: Linked and Copy the
     trailing column, Save colour the Button's icon slot alone, a square
     of the control at its end, Save and Delete the slot alone in a half
     of it each (Delete a bin), the palette's field and its two on one
     row;
   - the side in four groups the Window space apart (the rule, the
     colour, its text, the kept), the rows of each the Panel space;
   - closed, the dialog leaves a well (.ds-picker-well): a button of the
     ladder, the word and the five, that opens it again. */
.ds-picker {
  --wheel: calc(var(--ds-grid-cell) * 60);
  /* the trailing column: the values', Linked's and Copy's */
  --ds-slider-value: calc(var(--ds-grid-cell) * 24);
  display: grid;
  /* its groups (the palette, the wheel and its side, the presets) the
     Window space apart (components/surface.css) */
  row-gap: var(--group-gap, var(--ds-space-16));
  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-picker__top {
  display: grid;
  grid-template-columns: var(--ds-slider-label) minmax(0, 1fr);
  column-gap: var(--ds-slider-gap);
}
.ds-picker__legend {
  /* Keep the palette aligned with its preset and shade controls. Its
     Highlight / Base / Shadow names are shown only in the hover chip. */
  visibility: hidden;
  display: grid;
  grid-template-rows: 1fr 2fr 1fr;
  row-gap: var(--ds-space-4);
  align-items: center;
  color: var(--ds-color-text-dim);
}
/* (the kind worked no longer lights its legend word: a worked channel's
   word never lit, so one state wore two looks, against the one ladder;
   the recede already isolates the kind worked, its word and the base's
   kept and the other's a step back: the refinement of iteration 24) */
/* the shades' row (iteration 21; laid again in iteration 24): under the
   palette, its word in the label column under the legend's, then the
   highlight and the shadow at one whole width each and the lean at its
   own, the side's gap apart, to the palette's end (no longer on the
   palette's columns, which it only seemed to follow); alone (no
   palette), a row of its own. The three share a line wherever the two
   bars keep their words whole beside the lean, and the lean takes a
   line of its own only where they would not (iteration 24's
   refinement: a narrow window's rule put it on its own line at 1000,
   where the three fit, with 160 a bar): each bar grows from a basis of
   33 cells, its word, its widest value and the room either side
   ("Highlight" 68, "100%" 40, 8 each side and 8 between), the lean
   wraps where the line is shorter than the three, and nothing is
   measured against a window, which may be wider or narrower than the
   picker in it */
.ds-picker__shades {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: var(--ds-slider-label) minmax(0, 1fr);
  column-gap: var(--ds-slider-gap);
  margin-top: var(--ds-slider-gap);
  min-width: 0;
}
.ds-picker__shadebars {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-slider-gap);
  min-width: 0;
}
.ds-picker__shadebars > .ds-slider {
  flex: 1 1 calc(var(--ds-grid-cell) * 33);
  min-width: 0;
}
.ds-picker__shadebars > .ds-check-button {
  flex: none;
}
/* the poles the shades lean to, a compact line under the bars (24 high,
   the density's), a step under them, each bar of the wheel's hues an
   even half (2026-10-16); a line each where a half is shorter than 48
   cells, so a mark never stands on its bar's words (at 390 a half of
   150 put 95° on "Warm" and 275° on its value) */
.ds-picker__shades {
  row-gap: var(--ds-space-8);
}
.ds-picker__poles > .ds-slider {
  flex: 1 1 calc(var(--ds-grid-cell) * 48);
  min-width: 0;
}
.ds-picker__palette {
  display: grid;
  /* four of whole cells, the last what is left (the radio rows' rule),
     so the edges are whole and the row ends on the window's edge */
  grid-template-columns:
    repeat(
      4,
      round(down, calc((100% - var(--ds-space-4) * 4) / 5), var(--ds-grid-cell))
    )
    minmax(0, 1fr);
  gap: var(--ds-space-4);
}
.ds-picker__col {
  position: relative;
  display: grid;
  grid-template-rows: 1fr 2fr 1fr;
  row-gap: var(--ds-space-4);
  height: calc(var(--ds-grid-cell) * 24);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--control-corner, var(--ds-radius-corner));
  overflow: hidden;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ds-picker__shade {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--control-corner, var(--ds-radius-corner));
  box-shadow: inset 0 0 0 var(--rule) var(--colour-hair);
}
/* Deep Down's isometric preview: a 30-degree top, base at the front
   left, shadow on the right. The same three interactive faces switch
   shape; selection, shade hovering and keyboard navigation stay put. */
html[data-cube="true"] .ds-picker__col {
  display: block;
  overflow: visible;
}
html[data-cube="true"] .ds-picker__shade {
  position: absolute;
  /* All five cubes have the same size, including the grid's remainder
     column on a narrow screen. cqw is the palette's own width. */
  width: min(
    calc(var(--ds-grid-cell) * 20),
    round(down, calc((100cqw - var(--ds-space-4) * 4) / 5), var(--ds-grid-cell))
  );
  aspect-ratio: 80 / 92;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 0;
  box-shadow: none;
}
html[data-cube="true"] .ds-picker__shade[data-part="highlight"] {
  clip-path: polygon(50% 0, 100% 25%, 50% 50%, 0 25%);
}
html[data-cube="true"] .ds-picker__shade[data-part="base"] {
  clip-path: polygon(0 25%, 50% 50%, 50% 100%, 0 75%);
}
html[data-cube="true"] .ds-picker__shade[data-part="shadow"] {
  clip-path: polygon(50% 50%, 100% 25%, 100% 75%, 50% 100%);
}
html[data-cube="true"] .ds-picker__check {
  position: absolute;
  left: 25%;
  top: 62.5%;
  transform: translate(-50%, -50%);
}
.ds-picker__palette {
  container: palette / inline-size;
  position: relative;
}
/* a colour's hex where the hand rests (2026-10-16; owner: "this is not
   elegant. figure out better way to show hex"): one chip over the
   column, the Slider's bubble's idiom, its square, its kind and its hex;
   the bands stay the colours alone. The chip emerges from behind the
   column on the same whole clock and curve as the Slider's bubble.
   The fixed clip ends at the palette's top edge: no part of the chip
   can show through a transparent cube while it enters or leaves. */
.ds-picker__tip-mask {
  --tip-height: calc(var(--ds-grid-cell) * 6);
  --tip-gap: var(--ds-space-8);
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  /* Room above the settled chip for the shared curve's overshoot. */
  height: calc(var(--tip-height) * 3 + var(--tip-gap));
  z-index: 3;
  overflow: clip;
  pointer-events: none;
}
.ds-picker__tip {
  position: absolute;
  bottom: var(--tip-gap);
  left: 0;
  display: flex;
  align-items: center;
  gap: var(--ds-space-4);
  padding: 0 var(--ds-space-8);
  height: var(--tip-height);
  border-radius: var(--control-corner, var(--ds-radius-corner));
  background: var(--ds-color-page);
  box-shadow: inset 0 0 0 var(--rule) var(--colour-hair);
  color: var(--ds-color-text);
  font-size: var(--ds-text-14);
  line-height: calc(var(--ds-grid-cell) * 5);
  white-space: nowrap;
  transform: translate(-50%, calc(100% + var(--tip-gap))) scale(0.4);
  transform-origin: center bottom;
  opacity: 0.2;
  pointer-events: none;
  transition:
    transform var(--ds-motion-clock) var(--ds-motion-ease),
    opacity var(--ds-motion-clock) var(--ds-motion-ease);
}
.ds-picker__tip[data-on] {
  transform: translate(-50%, 0) scale(1);
  opacity: 1;
}
.ds-picker__tipswatch {
  width: var(--ds-space-8);
  height: var(--ds-space-8);
  border-radius: calc(var(--ds-radius-4) / 2);
  box-shadow: inset 0 0 0 var(--rule) var(--colour-hair);
}
.ds-picker__tipword {
  color: var(--ds-color-text-dim);
}
.ds-picker__tiphex {
  font-family: var(--ds-font-mono);
  font-variant-numeric: tabular-nums;
}
.ds-picker__check {
  width: var(--ds-space-16);
  height: var(--ds-space-16);
  visibility: hidden;
  /* the light scheme's inks, whatever the page's: dark ink on a light
     colour, light ink on a dark one */
  color-scheme: light;
}
.ds-picker__col[aria-checked="true"] .ds-picker__check {
  visibility: visible;
}
.ds-picker__col[data-ink="dark"] .ds-picker__check {
  color: var(--ds-color-text);
}
.ds-picker__col[data-ink="light"] .ds-picker__check {
  color: var(--ds-color-page);
}
/* a hand on a column, or on its handle in the wheel: the column's
   outline, the text colour 2 out (the control's own design) */
@media (hover: hover) {
  .ds-picker__col:hover {
    outline: 1px solid var(--ds-color-text);
    outline-offset: 2px;
  }
}
.ds-picker__col[data-lit] {
  outline: 1px solid var(--ds-color-text);
  outline-offset: 2px;
}
html[data-kbd] .ds-picker__col:focus-visible {
  outline: 1px solid var(--ds-color-focus);
  outline-offset: 2px;
}

/* the wheel and the side: the wheel centred in a column with the
   Window space around it, so its handles and the shades' dots at the
   rim (each past the disc's edge by its ring) have room on every side
   and never meet the side's rows or the dialog's edge (iteration 15,
   2026-10-11; owner: "Center align color picker wheel. Make sure it
   has enough space") */
.ds-picker__body {
  display: grid;
  grid-template-columns: calc(var(--wheel) + var(--ds-space-16) * 2) minmax(
      0,
      1fr
    );
  column-gap: var(--ds-space-24);
  row-gap: var(--group-gap, var(--ds-space-16));
  align-items: start;
}
.ds-picker__wheel {
  position: relative;
  justify-self: center;
  width: var(--wheel);
  margin: var(--ds-space-16);
  aspect-ratio: 1;
  border-radius: 50%;
  touch-action: none;
  cursor: crosshair;
  -webkit-user-select: none;
  user-select: none;
}
.ds-picker__disc {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
/* the harmony's lines: shown while the five move together and no kind
   of shade is worked (picker.js), arriving on the follow and the curve
   and leaving on the follow and the exit curve, as the dots and ties do
   (the refinement: the scene left on three clocks, the dots at once) */
.ds-picker__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
/* shown or hidden by their strokes, so the layer's opacity is the task's
   recede alone (iteration 25's probes: drawn from the press, the recede
   held the layer at its share over the 0 that hid it, and a Shadow drag
   under Analogous left the lines at 0.3 where they should be gone) */
.ds-picker__lines line {
  transition: stroke-opacity var(--ds-motion-follow) var(--ds-motion-exit);
}
.ds-picker__lines:not([data-on]) line {
  stroke-opacity: 0;
}
.ds-picker__lines[data-on] line {
  transition: stroke-opacity var(--ds-motion-follow) var(--ds-motion-ease);
}
/* the wheel's hairs, the harmony's lines and the guides, in the ink that
   reads on the disc: the check's inks (the light scheme's page and
   text, whatever the page's), by the lightness the disc is painted at
   (picker.js data-ink; the review of iteration 24: the page's ink was
   dark on a dark disc in the dark scheme and pale on a pale one in the
   light) */
.ds-picker__lines,
.ds-picker__guides {
  color-scheme: light;
}
.ds-picker__lines line {
  stroke: var(--ds-color-page);
  stroke-width: 1;
  stroke-opacity: 0.8;
}
/* the guides (iteration 24): the path the hand drives, while it drives
   it (the hue's ring, the chroma's ray, the spread's arcs): a hair of
   the lines' ink over the disc, dotted (the lines are the set, drawn
   whole; a guide is where it goes, and the two never read as one),
   arriving and leaving on the follow clock */
.ds-picker__guides {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
/* a hair's widths and dashes are numbers, the screen's pixels under the
   non-scaling stroke (both engines take a length's px in the layer's
   units: calc(1px * 3) drew 1.25 wide on the 240 disc): the hair, a
   pixel on and two off */
.ds-picker__guides > :not(g) {
  fill: none;
  stroke: var(--ds-color-page);
  stroke-width: 1;
  stroke-dasharray: 1 2;
}
.ds-picker__wheel[data-ink="dark"] .ds-picker__lines line,
.ds-picker__wheel[data-ink="dark"] .ds-picker__guides > :not(g) {
  stroke: var(--ds-color-text);
}
/* arriving on the follow and the curve, leaving on the follow and the
   exit curve, as everything of the wheel's scene does (the review of the
   refinement: the guides and the poles still left on the curve while
   the dots and ties beside them left on the exit) */
.ds-picker__guides > * {
  stroke-opacity: 0;
  transition: stroke-opacity var(--ds-motion-follow) var(--ds-motion-exit);
}
.ds-picker__guides > [data-on] {
  stroke-opacity: 0.8;
  transition: stroke-opacity var(--ds-motion-follow) var(--ds-motion-ease);
}
/* a kind's hair (the shades' ties, the poles they lean to): its kind's
   ink, the highlight's light and the shadow's dark, whatever the page's
   scheme (the check's trick), cased in the other's, so it reads on the
   disc and off it on the page alike (picker.js cased(): the case under,
   the ink over), as the Lightness bar's marks */
.ds-picker__wheel g[data-part] {
  --ink: var(--ds-color-page);
  --case: var(--ds-color-text);
  color-scheme: light;
}
.ds-picker__wheel g[data-part="shadow"] {
  --ink: var(--ds-color-text);
  --case: var(--ds-color-page);
}
.ds-picker__wheel g[data-part] > * {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1;
}
/* the case a hair each side of the ink's (a number: the screen's
   pixels, above) */
.ds-picker__wheel g[data-part] > .ds-picker__case {
  stroke: var(--case);
  stroke-width: 3;
}
/* a pole: a mark of 2 past the rim, a dial's (the refinement), its case
   a hair each side */
.ds-picker__guides g[data-part] > * {
  stroke-width: 2;
}
.ds-picker__guides g[data-part] > .ds-picker__case {
  stroke-width: 4;
}
/* the shades on the wheel: a dot of 12 in its shade, tied to its
   base's handle by a hair, the highlight's dot and tie in the light
   ink and the shadow's in the dark, each cased in the other's
   (iteration 24's audit: one form for both kinds, told apart by their
   colour alone, and a tie of the page's colour lost where it ran over
   the page; its review: one ink alone was lost where the ground was
   its own, the highlight's on the light page, the shadow's on the
   dark); under the handles. They arrive from their base's handle along
   the tie (from it at half their size to their place, the opacity with
   them, on the follow clock and the ease; the tie fades in with them)
   and leave where they stand, faded on the follow and the exit curve,
   the way back to the handle taken once they are gone (the refinement:
   they cut out in a frame while the rows eased back). The one a hand
   rests on in the palette wears the handle's outline */
.ds-picker__ties {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.ds-picker__ties > g {
  stroke-opacity: 0;
  transition: stroke-opacity var(--ds-motion-follow) var(--ds-motion-exit);
}
.ds-picker__ties > g[data-on] {
  stroke-opacity: 0.8;
  transition: stroke-opacity var(--ds-motion-follow) var(--ds-motion-ease);
}
.ds-picker__sat {
  --ink: var(--ds-color-page);
  --case: var(--ds-color-text);
  position: absolute;
  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);
  opacity: 0;
  /* at rest it waits on its base's handle, at half its size, so it
     arrives from the colour it belongs to along its tie; leaving, it
     fades where it stands and goes back to wait there once faded (the
     transform's delay is the fade's length; its way back, unseen, rides
     the follow, as the motion law asks of every move) */
  transform: translate(var(--from-x, 0px), var(--from-y, 0px)) scale(0.5);
  pointer-events: none;
  transition:
    opacity var(--ds-motion-follow) var(--ds-motion-exit),
    transform var(--ds-motion-follow) var(--ds-motion-ease)
      var(--ds-motion-follow);
}
/* shown, it takes the hand: a press on it is a press on its base's
   handle (picker.js dotOf), which lights under it; its target the
   handles' own band past what is drawn, 1.5 cells (3.5 under a finger,
   below), so the cursor, the light and the press agree on one area (the
   review of the refinement: a press 9 off the dot's centre took the
   handle under a crosshair and no light, and one on its ring did
   nothing) */
.ds-picker__sat::after {
  content: "";
  position: absolute;
  inset: calc(var(--ds-grid-cell) * -1.5);
  border-radius: 50%;
}
.ds-picker__sat[data-on] {
  pointer-events: auto;
  cursor: grab;
  opacity: 1;
  transform: none;
  transition:
    opacity var(--ds-motion-follow) var(--ds-motion-ease),
    transform var(--ds-motion-follow) var(--ds-motion-ease);
}
.ds-picker__sat[data-part="shadow"] {
  --ink: var(--ds-color-text);
  --case: var(--ds-color-page);
}
/* the ring in the light scheme's ink, its case a hair past it, on a
   box of its own (so the outline a hand's rest gives the dot keeps the
   page's) */
.ds-picker__sat::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow:
    0 0 0 2px var(--ink),
    0 0 0 calc(2px + var(--ds-hair)) var(--case);
  color-scheme: light;
}
/* the outline past the case, a hair apart (a space of 4: the ring's 2,
   its case's hair and a hair between; the token gate's "no length
   literal but 0, 1px, 2px" counted the 2px * 2 it was written as) */
.ds-picker__sat[data-lit] {
  z-index: 4;
  outline: 1px solid var(--ds-color-text);
  outline-offset: var(--ds-space-4);
}
.ds-picker__handle {
  position: absolute;
  width: calc(var(--ds-grid-cell) * 5);
  height: calc(var(--ds-grid-cell) * 5);
  margin: calc(var(--ds-grid-cell) * -2.5) 0 0 calc(var(--ds-grid-cell) * -2.5);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  outline: none;
  cursor: grab;
  /* its light under the hand and its size when chosen move on the
     clock and the curve, as the sliders' marks do (round 6, iteration
     20); its place is the hand's or the value's, at once */
  transition:
    width var(--ds-motion-clock) var(--ds-motion-ease),
    height var(--ds-motion-clock) var(--ds-motion-ease),
    margin var(--ds-motion-clock) var(--ds-motion-ease);
}
.ds-picker__handle-face {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--swatch);
  box-shadow: 0 0 0 2px var(--ds-color-page);
  outline: 1px solid var(--ds-color-text);
  outline-offset: 2px;
  pointer-events: none;
  transition:
    transform var(--ds-motion-clock) var(--ds-motion-recede),
    opacity var(--ds-motion-clock) var(--ds-motion-recede);
}
/* a hit band of 32 about each handle (48 under a finger, below) */
.ds-picker__handle::before {
  content: "";
  position: absolute;
  inset: calc(var(--ds-grid-cell) * -1.5);
  border-radius: 50%;
}
.ds-picker__handle[data-chosen] {
  z-index: 1;
  width: calc(var(--ds-grid-cell) * 7);
  height: calc(var(--ds-grid-cell) * 7);
  margin: calc(var(--ds-grid-cell) * -3.5) 0 0 calc(var(--ds-grid-cell) * -3.5);
}
/* a shade inside its handle's reach (picker.js): a crescent of its
   colour inside the handle's fill, the highlight's at the top and the
   shadow's at the bottom, as light falls on a sphere, three at its pole
   and none at its middle (an inset shadow moved by its depth). Against
   the base it shades, which it always differs from by its own lift or
   depth, never against the ring (iteration 24's refinement drew it on
   the ring's half, of the page's colour, and its review found the
   neutral lifts lost on the light page's ring and the depths on the
   dark's, the very shades a neutral lean makes); the handle keeps its
   size, its ring and its hair, and it arrives and leaves as the dots do
   (a neutral shade's dot was left out and the wheel answered nothing) */
.ds-picker__rim {
  --lit: calc(var(--ds-grid-cell) * 0.75);
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 var(--lit) 0 0 var(--shade);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--ds-motion-follow) var(--ds-motion-exit);
}
.ds-picker__rim[data-part="shadow"] {
  --lit: calc(var(--ds-grid-cell) * -0.75);
}
.ds-picker__rim[data-on] {
  opacity: 1;
  transition: opacity var(--ds-motion-follow) var(--ds-motion-ease);
}
/* The gesture's other handles recede visually on the shared clock and
   curve. Their buttons and hit bands keep their full area, including
   through the return animation. The aside mark stays for the way back. */
html[data-task-drawn] .ds-picker__handle[data-aside] .ds-picker__handle-face {
  transform: scale(var(--ds-state-recede));
  opacity: var(--ds-state-recede);
}
/* the anchor's dot, under a rule alone (no rule, no anchor) */
.ds-picker[data-rule] .ds-picker__handle[data-anchor] .ds-picker__handle-face::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--ds-space-4);
  height: var(--ds-space-4);
  margin: calc(var(--ds-space-4) / -2) 0 0 calc(var(--ds-space-4) / -2);
  border-radius: 50%;
  background: var(--ds-color-page);
  box-shadow: 0 0 0 var(--rule) var(--ds-color-text);
}
/* lit: under the hand (the script's data-hover, which a captured
   drag's let-go puts right at once in both engines), cross-lit from the
   palette, and held through a drag (the motion audit, 2026-10-12: a
   press lost the light at once and the let-go grew it back on the
   clock) */
.ds-picker__handle:focus-visible {
  z-index: 2;
}
.ds-picker__handle[data-hover],
.ds-picker__handle[data-lit] {
  z-index: 3;
}
.ds-picker__handle[data-hover] .ds-picker__handle-face,
.ds-picker__handle[data-lit] .ds-picker__handle-face,
.ds-picker__handle[data-working] .ds-picker__handle-face,
.ds-picker__wheel[data-dragging] .ds-picker__handle[data-chosen] .ds-picker__handle-face {
  transform: scale(1.15);
}
/* The hand/keys in control outrank a parked hover or palette preview. */
.ds-picker__handle[data-working],
.ds-picker__wheel[data-dragging] .ds-picker__handle[data-chosen] {
  z-index: 5;
}
html[data-kbd] .ds-picker__handle:focus-visible:not([data-pressed]) .ds-picker__handle-face {
  outline-color: var(--ds-color-focus);
}
.ds-picker__wheel[data-dragging],
.ds-picker__wheel[data-dragging] .ds-picker__handle {
  cursor: grabbing;
}
.ds-picker__wheel[data-dragging] .ds-picker__handle {
  transition: none;
}
.ds-picker__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.ds-picker__side {
  display: grid;
  /* its rows the Panel space apart (components/surface.css) */
  row-gap: var(--stack-gap, var(--ds-space-8));
  align-content: start;
  min-width: 0;
}
.ds-picker__row {
  display: flex;
  align-items: start;
  gap: var(--ds-slider-gap);
  min-width: 0;
}
.ds-picker__row > .ds-dropdown {
  flex: 1 1 auto;
}
/* the buttons' icons stand in the Button's slot (iteration 24): a square
   of the control at every density, its glyph the page's preset
   (--icon); Save colour, Save and Delete are the slot alone */
.ds-picker .ds-button {
  position: relative;
  gap: var(--ds-space-8);
  flex: none;
}
/* Linked and Copy: the trailing column's width, each its slot and its
   words, the Button's flood rule putting the words at its end (the
   slot's room after them), so the two words end on one edge at every
   density (iteration 24's refinement: Copy, words alone, started them at
   its padding while Linked's ended at its end, two alignments in one
   column) */
.ds-picker__link,
.ds-picker__copy {
  justify-content: flex-start;
  width: var(--ds-slider-value);
}
.ds-picker__channels {
  display: grid;
  row-gap: var(--stack-gap, var(--ds-space-8));
}
/* the chosen colour's shades on its Lightness while they show (the
   Slider's setMarks, iteration 24: the wheel has no lightness, and lift
   and depth are lightness): a hair at each shade's lightness in its
   kind's ink, the highlight's light and the shadow's dark as on the
   wheel, cased in the other so it reads on any stop of the track */
.ds-picker .ds-slider__hair[data-kind] {
  color-scheme: light;
  background-image: linear-gradient(
    to right,
    transparent calc(var(--at) - var(--ds-hair) * 2),
    var(--case) calc(var(--at) - var(--ds-hair) * 2),
    var(--case) calc(var(--at) - var(--ds-hair)),
    var(--ink) calc(var(--at) - var(--ds-hair)),
    var(--ink) var(--at),
    var(--case) var(--at),
    var(--case) calc(var(--at) + var(--ds-hair)),
    transparent calc(var(--at) + var(--ds-hair))
  );
}
.ds-picker .ds-slider__hair[data-kind="highlight"] {
  --ink: var(--ds-color-page);
  --case: var(--ds-color-text);
}
.ds-picker .ds-slider__hair[data-kind="shadow"] {
  --ink: var(--ds-color-text);
  --case: var(--ds-color-page);
}
.ds-picker__label {
  flex: none;
  width: var(--ds-slider-label);
  color: var(--ds-color-text-dim);
  line-height: var(--control, calc(var(--ds-grid-cell) * 8));
}
.ds-picker__hexbox {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
}
.ds-picker__hex {
  flex: 1 1 auto;
  box-sizing: border-box;
  min-width: 0;
  height: var(--control, calc(var(--ds-grid-cell) * 8));
  margin: 0;
  padding: 0 var(--ds-space-8);
  border: 0;
  border-radius: var(--control-corner, var(--ds-radius-corner));
  background: var(--ds-color-inactive);
  box-shadow: inset 0 0 0 var(--stroke-inactive-w) var(--ds-stroke-inactive);
  color: var(--ds-color-text);
  font-family: var(--ds-font-mono);
  font-size: var(--mono-type, var(--ds-text-15));
  text-transform: lowercase;
  outline: none;
  /* a text field, not a scrub: said so (Chromium reads text for an
     input with no rule, WebKit auto), so it can never inherit a swipe */
  cursor: text;
}
@media (hover: hover) {
  .ds-picker__hex:hover {
    background: color-mix(
      in srgb,
      var(--ds-color-inactive),
      var(--ds-color-text) var(--ds-state-hover)
    );
    box-shadow: inset 0 0 0 var(--hover-edge-w) var(--ds-state-hover-edge);
    color: var(--ds-state-hover-text);
  }
}
html[data-kbd] .ds-picker__hex:focus-visible {
  outline: 1px solid var(--ds-color-focus);
  outline-offset: 2px;
}
/* a state forced for a specimen (round 5, the States grid: a field of
   the ladder frozen in hover, held, focus; disabled is the input's) */
.ds-picker__hex[data-state="hover"] {
  background: color-mix(
    in srgb,
    var(--ds-color-inactive),
    var(--ds-color-text) var(--ds-state-hover)
  );
  box-shadow: inset 0 0 0 var(--hover-edge-w) var(--ds-state-hover-edge);
  color: var(--ds-state-hover-text);
}
.ds-picker__hex[data-state="held"] {
  background: color-mix(
    in srgb,
    var(--ds-color-inactive),
    var(--ds-color-text) var(--ds-state-held)
  );
  box-shadow: inset 0 0 0 var(--held-edge-w) var(--ds-state-held-edge);
  color: var(--ds-state-held-text);
}
.ds-picker__hex[data-state="focus"] {
  outline: 1px solid var(--ds-color-focus);
  outline-offset: 2px;
}
.ds-picker__hex:disabled {
  color: var(--ds-color-text-dim);
  cursor: default;
}
.ds-picker__lch {
  display: block;
  /* one line: its three numbers read together (in a narrow window it
     starts on the label edge, below, so a 360 phone has the room);
     clipped, never wrapped, where a window has less */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding-left: calc(var(--ds-slider-label) + var(--ds-slider-gap));
  color: var(--ds-color-text-dim);
  font-family: var(--ds-font-mono);
  font-size: var(--mono-type, var(--ds-text-15));
  line-height: calc(var(--ds-grid-cell) * 6);
  font-variant-numeric: tabular-nums;
}

/* the saved colours and the palettes */
.ds-picker__saved {
  display: grid;
  grid-template-columns: var(--ds-slider-label) minmax(0, 1fr) auto;
  column-gap: var(--ds-slider-gap);
  align-items: center;
}
.ds-picker__saved > .ds-picker__label {
  width: auto;
}
.ds-picker__savedlist {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-4);
  min-width: 0;
}
/* the empty list's words stand in the list's cell while it is empty
   (picker.js: a node of the page, never a ::before) */
.ds-picker__saved > .ds-picker__label {
  grid-area: 1 / 1;
}
.ds-picker__saved > .ds-picker__savedlist,
.ds-picker__saved > .ds-picker__none {
  grid-area: 1 / 2;
}
.ds-picker__saved > .ds-picker__add {
  grid-area: 1 / 3;
}
.ds-picker__none {
  color: var(--ds-color-text-dim);
}
/* The swatches' + shows the colour it keeps across its face, inset by
   half a cell (2 px). The icon uses the palette check's contrasting ink. */
.ds-picker__add {
  position: relative;
}
.ds-picker__add::before {
  content: "";
  position: absolute;
  inset: calc(var(--ds-space-4) / 2);
  border-radius: max(
    0px,
    calc(var(--control-corner, var(--ds-radius-corner)) - var(--ds-space-4) / 2)
  );
  background: var(--keeps, transparent);
  box-shadow: inset 0 0 0 var(--rule) var(--colour-hair);
  pointer-events: none;
}
.ds-picker__add > .ds-button__label {
  position: relative;
  z-index: 1;
}
.ds-picker__add:not(:disabled) > .ds-button__label {
  color-scheme: light;
  color: var(--ds-color-page);
}
.ds-picker__add[data-ink="dark"]:not(:disabled) > .ds-button__label {
  color: var(--ds-color-text);
}
.ds-picker__add:disabled::before {
  opacity: 0;
}
/* the palette's row heading the five it names (picker.js data-head):
   across the top, its field and its two buttons, a step over the
   columns */
.ds-picker__presets[data-head] {
  grid-column: 1 / -1;
  margin-bottom: var(--ds-space-8);
}
.ds-picker__savedlist:not(:empty) + .ds-picker__none {
  display: none;
}
.ds-picker__saveditem {
  position: relative;
}
.ds-picker__swatch {
  display: block;
  width: calc(var(--ds-grid-cell) * 6);
  height: calc(var(--ds-grid-cell) * 6);
  margin: 0;
  padding: 0;
  border: 0;
  /* the one corner (components/surface.css), at most half the square */
  border-radius: var(--control-corner, var(--ds-radius-corner));
  box-shadow: inset 0 0 0 var(--rule) var(--colour-hair);
  cursor: pointer;
}
html[data-kbd] .ds-picker__swatch:focus-visible {
  outline: 1px solid var(--ds-color-focus);
  outline-offset: 2px;
}
/* a hand on a saved square: its outline, the text colour 2 out (the
   control's own design, as the column's) */
@media (hover: hover) {
  .ds-picker__swatch:hover {
    outline: 1px solid var(--ds-color-text);
    outline-offset: 2px;
  }
}
/* the ×: a small button of the ladder (the inactive ground and stroke,
   tinted under the hand), shown at the square's corner under the hand */
.ds-picker__remove {
  position: absolute;
  top: calc(var(--ds-space-4) * -2);
  right: calc(var(--ds-space-4) * -2);
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--ds-space-16);
  height: var(--ds-space-16);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--ds-color-inactive);
  box-shadow: inset 0 0 0 var(--stroke-inactive-w) var(--ds-stroke-inactive);
  color: var(--ds-color-text);
  cursor: pointer;
}
.ds-picker__remove svg {
  width: calc(var(--ds-grid-cell) * 3);
  height: calc(var(--ds-grid-cell) * 3);
}
@media (hover: hover) {
  .ds-picker__saveditem:hover .ds-picker__remove {
    display: flex;
  }
  .ds-picker__remove:hover {
    background: color-mix(
      in srgb,
      var(--ds-color-inactive),
      var(--ds-color-text) var(--ds-state-hover)
    );
  }
}
.ds-picker__remove:active {
  background: color-mix(
    in srgb,
    var(--ds-color-inactive),
    var(--ds-color-text) var(--ds-state-held)
  );
}
/* the palettes: the field on the value column, ending where the bars
   and the hex end, then Save and Delete sharing the trailing column, a
   half each less the gap, each its slot in its middle, one row at every
   width (iteration 21: where the row had less than a field of 240 beside
   them they wrapped under it, two icons on a row alone; iteration 24's
   refinement: two squares at the column's end stood 32 off the field,
   where every other button of the side stands the gap off its own; the
   review of that refinement: the field then ran 24 past the column every
   other field ends on, "Deep Down" standing out past "Custom" and the
   hex). 44 each beside 96 (the gap between), squares of 32 in a narrow
   window's 72, as Linked and Copy there are the trailing column with
   their slot in its middle */
.ds-picker__presets {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--ds-slider-value);
  column-gap: var(--ds-slider-gap);
  align-items: start;
  min-width: 0;
}
.ds-picker__presethost {
  min-width: 0;
}
.ds-picker__palacts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ds-slider-gap);
}
/* the slot in the middle of its half: over the Button's rule for a slot,
   which starts it at the left edge; that rule weighs five classes
   through its :has() (components/button.css), so this one names the same
   :has() to meet it, as the narrow window's Linked and Copy do */
.ds-picker__palacts
  > .ds-button:has(> .ds-button__label > .ds-button__icon:only-child)
  > .ds-button__label {
  justify-content: center;
}
/* the side's groups (iteration 21): the rule (Harmony, Linked, the
   Spread), the colour (Lightness, Chroma, Hue), its text (the hex, the
   oklch()) and the kept (the saved colours, the palettes), each the
   Window space from the next, its rows the Panel space apart; one
   column of eight rows read as one list */
.ds-picker__side > [data-part="hex"]:not(:first-child),
.ds-picker__side > [data-part="lch"]:not(:first-child, [data-part="hex"] + *),
.ds-picker__side > [data-part="saved"]:not(:first-child),
.ds-picker__side
  > [data-part="presets"]:not(:first-child, [data-part="saved"] + *),
.ds-picker__channels > :nth-child(2) {
  margin-top: max(
    0px,
    calc(
      var(--group-gap, var(--ds-space-16)) - var(--stack-gap, var(--ds-space-8))
    )
  );
}
/* a palette's name takes a column of its own in the list, wider than a
   theme's; in the closed field, which shows no strip, the field's room,
   dissolving only where it is narrower than the name (iteration 22's
   audit: at 320 the column of 112 ran 22 past a field of 72, under
   Save, and its fade never came) */
.ds-picker__presethost .ds-dropdown[data-kind="swatches"] .ds-dropdown__name {
  width: calc(var(--ds-grid-cell) * 28);
}
.ds-picker__presethost
  .ds-dropdown[data-kind="swatches"]
  .ds-dropdown__value
  .ds-dropdown__name {
  flex: 1 1 auto;
  width: auto;
  /* to the chevron's glyph, 16 in the middle of its square slot, as the
     column of 112 reached it before */
  margin-right: calc(
    (var(--ds-space-16) - var(--control, calc(var(--ds-grid-cell) * 8))) / 2
  );
}
.ds-picker__presethost
  .ds-dropdown[data-kind="swatches"]
  .ds-dropdown__value
  .ds-dropdown__strip {
  display: none;
}
.ds-picker .ds-button:disabled {
  color: var(--ds-color-text-dim);
  cursor: default;
}
/* the well (iteration 21): what a closed Colour dialog leaves, the
   button that opens it again (a button of the ladder,
   components/button.css): the dialog's word, then its five as the
   Dropdown's strip draws a theme's, a square of 16 each, in the row's
   inner corner, edged by the hair */
.ds-picker-well[hidden] {
  display: none;
}
.ds-picker-well__strip {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, var(--ds-space-16));
  height: var(--ds-space-16);
  overflow: hidden;
  border-radius: max(
    0px,
    var(--control-corner, var(--ds-radius-corner)) -
      (var(--control, calc(var(--ds-grid-cell) * 8)) - var(--ds-space-16)) / 2
  );
}
.ds-picker-well__strip::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 var(--rule) var(--colour-hair);
  pointer-events: none;
}
/* a narrow window: the wheel over the side, at the side's start */
@container (max-width: 640px) {
  .ds-picker {
    /* the trailing column the Slider's own 72, so the bars keep room;
       Linked and Copy their icons alone (their names stay for a reader) */
    --ds-slider-value: calc(var(--ds-grid-cell) * 18);
  }
  /* the palette takes the row, its legend gone, as under a finger, and
     the shades' word with it (the bars carry theirs, and the group its
     name), so the palette, its shades and the side start on one edge
     (iteration 24's refinement: at 1000 the shades started on the edge
     and the palette they shade 104 to its right, after the legend; at
     390 with a mouse the legend left the palette 204, columns of 36 and
     no room for a hex, where the whole row gives them 56 and the tiny
     names' 11) */
  .ds-picker__top,
  .ds-picker__shades {
    grid-template-columns: minmax(0, 1fr);
  }
  .ds-picker__legend,
  .ds-picker__shades > .ds-picker__label {
    display: none;
  }
  .ds-picker__body {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
  }
  /* the wheel as wide as its column leaves, the Window space round it,
     in steps of the 16 lattice up to 80 cells (iteration 24's
     refinement: 240 at every width, 84 unused on a 390 phone and 112
     either side at 1000; on a phone it is the whole precision of hue and
     chroma under a finger): 288 on a 390 phone with a finger, 320 at
     1000; its observer reads the size, the radii and the reach again */
  .ds-picker__wheel {
    width: min(
      calc(var(--ds-grid-cell) * 80),
      round(
        down,
        calc(100% - var(--ds-space-16) * 2),
        calc(var(--ds-grid-cell) * 4)
      )
    );
  }
  .ds-picker__side {
    justify-self: stretch;
  }
  /* Linked and Copy their slot alone, in the middle of the trailing
     column: over the Button's rule for a slot and its words, which starts
     them at the left edge and keeps a room after them. That rule weighs
     four classes through its :has() (components/button.css), so this one
     names the same :has() to meet it (true of both always: its weight is
     the reason, the review of iteration 24 asked) */
  .ds-picker
    :is(.ds-picker__link, .ds-picker__copy):has(
      > .ds-button__label > .ds-button__icon:first-child
    ) {
    padding-right: 0;
  }
  .ds-picker
    :is(.ds-picker__link, .ds-picker__copy):has(
      > .ds-button__label > .ds-button__icon:first-child
    )
    > .ds-button__label {
    justify-content: center;
  }
  /* the oklch() from the label edge: indented by the label column its
     longest (25 digits) would not fit a 360 phone's side on one line */
  .ds-picker__lch {
    padding-left: 0;
  }
  :is(.ds-picker__link, .ds-picker__copy) .ds-button__label > span:last-child {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}
/* a picker under 288 (a phone of 320): the Harmony's label stands over
   its field, so its rule is read whole, and Linked keeps to the field's
   line (iteration 21's accessibility audit: "Custom" had 16 of its 59) */
@container (max-width: 288px) {
  .ds-picker__row {
    align-items: end;
  }
  .ds-picker__row > .ds-dropdown {
    grid-template-columns: minmax(0, 1fr);
  }
  /* and the Hex's and the Palette's over their fields, the field and
     its buttons sharing the line under it, so the hex and a palette's
     name are read whole (iteration 22's audit: a field of 72 for a hex
     of 83, a name of 112 in a field of 72) */
  .ds-picker__hexrow {
    flex-wrap: wrap;
    row-gap: 0;
  }
  .ds-picker__hexrow > .ds-picker__label {
    flex-basis: 100%;
  }
  .ds-picker__hexrow > .ds-picker__hexbox {
    flex-basis: 0;
  }
  .ds-picker__presets {
    align-items: end;
  }
  .ds-picker__presethost .ds-dropdown {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* a finger: every target 48 (the touch unit) by a hit band about a
   control of the window's height, so a row's controls stay one height:
   the handles' bands 48 (and a shown dot's the same 3.5 cells past it,
   40); the palette's columns take the legend's column (the legend goes;
   it is no control and its words are aria-hidden); the
   buttons' and the hex's bands 48 (the hex's on its own label, which
   gives it the focus), the hex in 16 (iOS zooms on less); the channels
   16 apart, so each bar's band is its own; the saved squares 48, each
   with its × beside it, 48, always shown */
@media (pointer: coarse) {
  .ds-picker__handle::before,
  .ds-picker__sat::after {
    inset: calc(var(--ds-grid-cell) * -3.5);
  }
  .ds-picker__top {
    grid-template-columns: minmax(0, 1fr);
  }
  .ds-picker__legend {
    display: none;
  }
  /* and the shades' word with it: the bars carry theirs */
  .ds-picker__shades {
    grid-template-columns: minmax(0, 1fr);
  }
  .ds-picker__shades > .ds-picker__label {
    display: none;
  }
  /* the buttons' bands are the Button's own (components/button.css),
     48 high; the icon buttons, 44 wide, reach half their 8 gap either
     side, so theirs are 48 wide too and meet no neighbour's */
  .ds-picker__add::after,
  .ds-picker__savepal::after,
  .ds-picker__delpal::after {
    left: calc(var(--ds-space-4) / -2);
    right: calc(var(--ds-space-4) / -2);
  }
  .ds-picker__hexbox::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: calc(
      (
          var(--control, calc(var(--ds-grid-cell) * 8)) - var(--ds-grid-cell) *
            12
        ) /
        2
    );
    bottom: calc(
      (
          var(--control, calc(var(--ds-grid-cell) * 8)) - var(--ds-grid-cell) *
            12
        ) /
        2
    );
  }
  .ds-picker__hex {
    font-size: var(--ds-text-16);
  }
  .ds-picker__side,
  .ds-picker__channels {
    row-gap: max(var(--stack-gap, var(--ds-space-8)), var(--ds-space-16));
  }
  /* and the shades' row from the palette, and its lines from each other,
     16 too, so a held bar's give (8 either way) meets neither the
     palette nor the lean (iteration 24's refinement: a held Highlight at
     390 grew to 208..256 between the palette's 208 and the lean's 256) */
  .ds-picker__shades {
    margin-top: max(var(--stack-gap, var(--ds-space-8)), var(--ds-space-16));
  }
  .ds-picker__shadebars {
    row-gap: max(var(--stack-gap, var(--ds-space-8)), var(--ds-space-16));
  }
  .ds-picker__swatch {
    width: calc(var(--ds-grid-cell) * 12);
    height: calc(var(--ds-grid-cell) * 12);
  }
  /* the × beside its square, a target of its own (over the square's
     corner its band would take a quarter of the square's) */
  .ds-picker__saveditem {
    display: flex;
  }
  .ds-picker__remove {
    position: static;
    display: flex;
    width: calc(var(--ds-grid-cell) * 12);
    height: calc(var(--ds-grid-cell) * 12);
    border-radius: var(--control-corner, var(--ds-radius-corner));
  }
}
@media (forced-colors: active) {
  .ds-picker__col,
  .ds-picker__swatch,
  .ds-picker__handle,
  .ds-picker__disc,
  .ds-picker__sat {
    forced-color-adjust: none;
  }
  /* the shades' dots keep their colour, and their two kinds keep two
     forms in the system's two colours: the highlight ringed in Canvas
     and cased in CanvasText, the shadow the other way, their ties the
     same (the review of iteration 24: under forced colours the ring was
     dropped, five white discs, the kinds alike) */
  .ds-picker__wheel :is(g, .ds-picker__sat)[data-part="highlight"] {
    --ink: Canvas;
    --case: CanvasText;
  }
  .ds-picker__wheel :is(g, .ds-picker__sat)[data-part="shadow"] {
    --ink: CanvasText;
    --case: Canvas;
  }
  .ds-picker__hex {
    outline: 1px solid CanvasText;
  }
  html[data-kbd] .ds-picker__hex:focus-visible,
  html[data-kbd] .ds-picker__col:focus-visible,
  html[data-kbd] .ds-picker__swatch:focus-visible {
    outline: 2px solid Highlight;
  }
}