/* Colour: a role's swatch, the inspector's (the Global card's Colour and
   Stroke rows, lib/panes.js colourCell; the Colour section's squares
   that first wore it are archived in archive/2026-10-11-colour-section/,
   their rules gone in iteration 22). Its one look is written here
   (iteration 24's audit: this sheet still drew the archived 64 square,
   rounded halves and "no stroke", and the pane sheet overrode every
   rule of it); how a row shares the chip between its halves is the
   pane sheet's (ds.css: the page's own half two thirds, the halves even
   while the other scheme is previewed, the half the Scheme hides
   closed).

   A chip of 48 by 24 where a row's value starts (a Colour row's the
   value column's width), the one corner (straight in the chrome),
   clipping its halves, and over them the hair every colour shown as a
   colour wears (components/surface.css --colour-hair: a pale value
   stays a box on a pale page; the chrome's own in the chrome,
   lib/chrome.js), so the halves inside carry no corner of their own
   and the one that opens or closes meets the other on a straight edge
   (owner, 2026-10-11: "no rounded corner on transition (in middle)";
   "animation of the colors must happen within container"). Each half
   holds a paint layer in its own color-scheme (the left light, the
   right dark), painting var(--c), the role's token, so each shows the
   token resolving in its mode; the half itself stays in the page's
   scheme, so its ring is the page's measure whatever it paints.
   Nothing is green at rest. */
.swatch__chip {
  position: relative;
  display: flex;
  overflow: hidden;
  width: calc(var(--ds-grid-cell) * 12);
  height: calc(var(--ds-grid-cell) * 6);
  /* the one corner, which the chrome holds straight (lib/chrome.js
     SHOWS: "a colour's chip shows its colour in the chrome's straight
     shape"), as the ladder's swatches and the opacity field beside it
     are (the refinement of iteration 24: a scale step of 4 here rounded
     the dock's chips alone) */
  border-radius: var(--control-corner, var(--ds-radius-corner));
}
.swatch__chip::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 var(--rule) var(--colour-hair);
  pointer-events: none;
}
/* the halves share the chip by their grow alone (a basis of 0), so a
   half closed takes no room at all and the other fills the chip (the
   shares slide on the chrome's recolour clock, the pane sheet's) */
.swatch__half {
  position: relative;
  flex: 1 1 0%;
  min-width: 0;
  overflow: hidden;
  opacity: 1;
}
.swatch__paint {
  position: absolute;
  inset: 0;
  background: var(--c);
  transition: background-color var(--ds-motion-clock) var(--ds-motion-ease);
}
.swatch__half[data-mode="light"] > .swatch__paint {
  color-scheme: light;
}
.swatch__half[data-mode="dark"] > .swatch__paint {
  color-scheme: dark;
}
/* each half is its colour's picker: a button laid over it, unseen, so
   the half shows the token; a press opens the compact picker under the
   chip (lib/pickpop.js). The half whose picker is open, or that holds
   the keys' focus, wears the measure ring inside the chip (the chip
   clips, so a ring outside the half would not show) */
.swatch__pick {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: transparent;
  cursor: pointer;
  outline: none;
}
html[data-kbd] .swatch__half:focus-within,
.swatch__half:has(> .swatch__pick[data-open]) {
  z-index: 1;
  outline: 1px solid var(--ds-color-measure);
  outline-offset: calc(var(--rule) * -2);
}

/* a finger: the chip twice as wide, so each half of a pair is 32 or
   more across (the page's own two thirds, 64, the other 32; a Colour
   row's chip is its column's whole width already), and the row's own
   ground above and below it reaches the half under the finger
   (lib/panes.js reach), so each half takes a press 48 high (the lab's
   touch unit) while it is drawn 24 */
@media (pointer: coarse) {
  .swatch__chip {
    width: calc(var(--ds-grid-cell) * 24);
  }
}

@media (forced-colors: active) {
  .swatch__paint {
    forced-color-adjust: none;
  }
  html[data-kbd] .swatch__half:focus-within {
    outline: var(--focus-ring-forced-w) solid Highlight;
  }
}