/* The Checkbox (components/check.js): a box of 16 and a tick, the
   system's one check, in the one ladder. A core sheet (every tier; it
   names no effect). Round 2, 2026-10-08, his item 11: "refine
   checkboxes and integrate them with all controls/nested corner rule or
   however makes sense".

   The box: 16 (four whole cells) in its row's text line, 8 to the words,
   never a size other than 16 in any state (the 2026-09-07 supersession:
   a box changing size does it by rounded height and width, and at
   these proportions a swell of a 16 box is under a pixel; the glyph
   carries the impulse alone). Its corner by the law from its container
   (components/surface.css): the container's corner (--control-corner,
   inherited from the option or the surface's hand-down) less the box's
   real inset (--check-inset: --check-space where the host says it, an
   option its side padding; 8 for a box in a row of its own), or, from
   the inset that equals the corner on, its own: the Control corner
   capped at the base corner 4 (--check-own: a 16 box at 8 is a circle,
   and a circle check reads as a radio, so the Checkbox keeps a box
   under Control 8, 12 and Pill: the one exception to "a control's own
   corner is the Control corner", for Maciek's eye), and never more than
   that own corner, whatever the container's (iteration 24's audit: at
   Corner 16 a regular control's 16 less the inset 8 made the box a
   circle). At the defaults 4, a quarter-rounded box, the swatch
   squares' corner.

   The ladder (components/button.css): rest the inactive ground with
   its edge in the DIM role, --ds-color-text-dim at the rule (the
   stroke role measures 1.3:1 on a list's ground and cannot say "a box
   is here", WCAG 1.4.11; the dim words' ink can, 7:1; so the inactive
   edge does not follow the Inactive stroke switch, an amendment of the
   2026-10-06 "the global strokes on the checks" for the inactive edge
   only, and its hover and held keep it while the ladder's Edge is the
   Rest, adding the rung's weight alone: html[data-edge-hover] and
   data-edge-held, panes/states.js, say when a rung names an edge of its
   own; iteration 24's audit: at the defaults the rung's edge, the stroke
   role, took the dim edge away under the hand and a box read as a grey
   square); hover the ground tinted by state-hover, held by state-held;
   checked the active ground, the tick in the page colour and the
   active stroke, which keeps following the Active stroke switch
   (owner, 2026-09-06: a chosen check "wears the fill"); checked hover
   and held the Button's; focus a ring, 1 px of the focus colour 2 out,
   only where the keys brought it (html[data-kbd], the spine's rule);
   off no tint, the box at the ladder's off share (below), the words
   dim, no hand. In a
   many-choice option the ROW carries the rungs (the hand's tint, the
   forced-colours highlight) and the mark takes none of its own.

   The clocks: the box's ground, edge and the tick's colour ride the
   chosen clock (--chosen-clock: the state clock) on the state curve,
   the same both ways (a colour never bounces); the tick pops in on a
   check: scale from 0.4 to 1.12 at 75 % to 1, each segment on the
   curve, over the follow clock, about its centre, its opacity 0 to 1
   on the same clock and curve (owner, 2026-09-06: "For checkbox make
   it pop with small snappy bounce"; "Pop Checkbox icons only a bit
   more"); on an uncheck it leaves by opacity alone, on the state clock
   (the overshoot is arrival's). The pop's 1.12 and 0.4 are literals
   here (--check-pop, --check-from) with Motion's "Check pop" card's
   constants until that candidate is promoted with this, its reader.
   Under reduced motion
   the clocks are 0 (components/surface.css) and the pop plays none.
   Forced colours: the box an outline of CanvasText, checked Highlight
   with the tick HighlightText (the tick hides by opacity, which forced
   colours leave alone). A finger: the box stays 16; the hit is the
   label's band of 48 about the box's centre (the Button's pattern), in
   an option the option's row. */
.ds-check {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-8);
  min-height: var(--line, calc(var(--ds-grid-cell) * 6));
  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);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
/* the check button (components/check.js checkButton; round 6,
   iteration 16's follow-up): the Button (components/button.css draws
   its rungs, its corner, its slot), its words straight after its slot
   wherever it is stretched (a check reads its box and its name as one),
   dim while off ("An unchecked check is inactive"); the box in the
   slot, its corner the button's less the slot's room (the concentric
   rule: the box stands that room from the button's edge); on, the
   button is the chosen rung and the box inverted in it, the page's
   ground with the tick in the active colour */
.ds-check-button {
  --check-space: calc(
    (var(--control, calc(var(--ds-grid-cell) * 8)) - var(--ds-space-16)) / 2
  );
  /* its slot holds the box, always 16 (the Checkbox's rule), never an
     icon at the preset (iteration 24): the room after its words is the
     room it had, measured from its words' size (the review of the
     icon presets) */
  --icon: var(--type, var(--ds-type-size));
  justify-content: flex-start;
}
.ds-check-button .ds-button__icon + * {
  margin-left: 0;
}
.ds-check-button:not([aria-pressed="true"]):not(:hover) {
  color: var(--ds-color-text-dim);
}
.ds-check-button[aria-pressed="true"] .ds-check__box[data-checked] {
  background: var(--ds-color-page);
  box-shadow: none;
  color: var(--ds-color-active);
}
/* in the tool's chrome (data-plain, lib/chrome.js: the inspector, its
   dock, the popups, the side pages' bars) the box alone says on, as the
   Checkbox's does, and the button stands on the rest rung, its hover and
   held tints, whether checked or not; checked, its words the ink. A
   column of the chrome's checks is mostly on (the picker card's eight
   Parts), and eight fills stood brighter than the canvas beside them;
   off, its box at the off share (below), so an off check that is on
   still says so and never reads as an enabled one (the critique of
   iteration 24: the
   dock drew a checked check on the line ground, the side pages' bars on
   the fill, and neither answered a press). A row that asks for it
   (data-check-box) draws its checks the same: the picker's Shades,
   where a Warm/cool on the fill stood beside two bars whose fills are
   that colour and read as a third bar at 100 % (owner, 2026-10-16:
   "Something is wrong with this button") */
:is([data-plain], [data-check-box])
  .ds-check-button:not([data-state])[aria-pressed="true"] {
  --button-stroke: var(--ds-stroke-inactive);
  --button-stroke-w: var(--stroke-inactive-w);
  background: var(--ds-color-inactive);
  color: var(--ds-color-text);
}
:is([data-plain], [data-check-box])
  .ds-check-button:not([data-state])[aria-pressed="true"]:disabled {
  color: var(--ds-color-text-dim);
}
@media (hover: hover) {
  [data-plain]
    .ds-check-button:not([data-state]):not(
      :disabled
    )[aria-pressed="true"]:hover {
    background: color-mix(
      in srgb,
      var(--ds-color-inactive),
      var(--ds-color-text) var(--ds-state-hover)
    );
  }
}
:is([data-plain], [data-check-box])
  .ds-check-button:not([data-state]):not(
    :disabled
  )[aria-pressed="true"][data-press],
:where(html:not([data-presses]))
  :is([data-plain], [data-check-box])
  .ds-check-button:not([data-state]):not(
    :disabled
  )[aria-pressed="true"]:active {
  background: color-mix(
    in srgb,
    var(--ds-color-inactive),
    var(--ds-color-text) var(--ds-state-held)
  );
}
:is([data-plain], [data-check-box])
  .ds-check-button[aria-pressed="true"]
  .ds-check__box[data-checked] {
  background: var(--ds-color-active);
  box-shadow: inset 0 0 0 var(--stroke-active-w) var(--ds-stroke-active);
  color: var(--ds-color-page);
}
/* the native input over the drawn box, unseen: a 16 box still, so the
   focus's clip is the box's */
.ds-check__input {
  position: absolute;
  left: 0;
  top: calc(50% - var(--ds-space-16) / 2);
  width: var(--ds-space-16);
  height: var(--ds-space-16);
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.ds-check__box {
  /* the box's inset in its container (a host says its own), and its
     own corner: the one corner, capped at 4 (a quarter of its side) */
  --check-inset: var(--check-space, var(--ds-space-8));
  --check-own: min(var(--ds-radius-corner), var(--ds-radius-4));
  /* the pop: how far the tick overshoots, and where it starts from */
  --check-pop: 0.12;
  --check-from: 0.4;
  --chosen-clock: var(--ds-motion-state);
  display: flex;
  flex: none;
  box-sizing: border-box;
  width: var(--ds-space-16);
  height: var(--ds-space-16);
  border-radius: min(
    var(--check-own),
    max(
      var(--control-corner, var(--check-own)) - var(--check-inset),
      var(--check-own) *
        max(
          0,
          sign(
            var(--check-inset) - var(--control-corner, var(--check-own)) + 1px
          )
        )
    )
  );
  /* its edge at rest, and under the hand and held while the rungs name
     none of their own (above) */
  --check-edge: var(--ds-color-text-dim);
  --check-edge-hover: var(--check-edge);
  --check-edge-held: var(--check-edge);
  background: var(--ds-color-inactive);
  box-shadow: inset 0 0 0 var(--rule) var(--check-edge);
  color: var(--ds-color-page);
  transition:
    background-color var(--chosen-clock) var(--ds-motion-state-ease),
    box-shadow var(--chosen-clock) var(--ds-motion-state-ease),
    color var(--chosen-clock) var(--ds-motion-state-ease);
}
.ds-check__box > svg {
  width: 100%;
  height: 100%;
  opacity: 0;
  transform-origin: 50% 50%;
  transition: opacity var(--ds-motion-state) var(--ds-motion-state-ease);
}
/* checked: a check's input, or a host's word on the mark */
.ds-check__input:checked + .ds-check__box,
.ds-check__box[data-checked] {
  background: var(--ds-color-active);
  box-shadow: inset 0 0 0 var(--stroke-active-w) var(--ds-stroke-active);
}
/* its arrival on the pop's own clock and curve, the follow, so nothing
   of it finishes early (the critique of iteration 24: the tick's
   opacity rode the state clock, 0.72 at 20 ms, while its scale ran to
   120 ms, and every arrival the Motion page shows rides the follow);
   its leave on the state clock, as an answer is (above) */
.ds-check__input:checked + .ds-check__box > svg,
.ds-check__box[data-checked] > svg {
  opacity: 1;
  transition: opacity var(--ds-motion-follow) var(--ds-motion-ease);
}
/* the pop, on a check the hand or the keys made (components/check.js
   marks it; the mark goes when it has played) */
@keyframes ds-check-pop {
  0% {
    scale: var(--check-from);
    animation-timing-function: var(--ds-motion-ease);
  }
  75% {
    scale: calc(1 + var(--check-pop));
    animation-timing-function: var(--ds-motion-ease);
  }
  100% {
    scale: 1;
  }
}
.ds-check__box[data-pop] > svg {
  animation: ds-check-pop var(--ds-motion-follow) var(--ds-motion-ease);
}
html[data-edge-hover] .ds-check__box {
  --check-edge-hover: var(--ds-state-hover-edge);
}
html[data-edge-held] .ds-check__box {
  --check-edge-held: var(--ds-state-held-edge);
}
/* the rungs of a check of its own (in an option the row carries them) */
@media (hover: hover) {
  .ds-check:hover > .ds-check__input:not(:disabled) + .ds-check__box {
    background: color-mix(
      in srgb,
      var(--ds-color-inactive),
      var(--ds-color-text) var(--ds-state-hover)
    );
  }
  /* an off box's edge under the hand (iteration 21, the ladder's More);
     a checked one keeps the active edge */
  .ds-check:hover
    > .ds-check__input:not(:disabled):not(:checked)
    + .ds-check__box:not([data-checked]) {
    box-shadow: inset 0 0 0 var(--hover-edge-w) var(--check-edge-hover);
  }
  .ds-check:hover > .ds-check__input:not(:disabled):checked + .ds-check__box {
    background: color-mix(
      in srgb,
      var(--ds-color-active),
      var(--ds-color-text) var(--ds-state-hover)
    );
  }
}
.ds-check:active > .ds-check__input:not(:disabled) + .ds-check__box {
  background: color-mix(
    in srgb,
    var(--ds-color-inactive),
    var(--ds-color-text) var(--ds-state-held)
  );
}
.ds-check:active
  > .ds-check__input:not(:disabled):not(:checked)
  + .ds-check__box:not([data-checked]) {
  box-shadow: inset 0 0 0 var(--held-edge-w) var(--check-edge-held);
}
.ds-check:active > .ds-check__input:not(:disabled):checked + .ds-check__box {
  background: color-mix(
    in srgb,
    var(--ds-color-active),
    var(--ds-color-text) var(--ds-state-held)
  );
}
/* focus is a layer: the ring only where the keys brought it
   (components/surface.css says the ring). The states a specimen forced
   (round 5's States grid, data-state on the check) went with the grid:
   nothing sets them since, and their hover painted a checked box's
   ground unchecked (iteration 24's audit); a Check kind in the States
   strip would bring them back, each split checked and not */
html[data-kbd] .ds-check__input:focus-visible + .ds-check__box {
  outline: var(--focus-ring-w) solid var(--ds-color-focus);
  outline-offset: var(--focus-ring-gap);
}
/* off: readable, never faded */
.ds-check:has(> .ds-check__input:disabled),
.ds-check[data-off] {
  cursor: default;
}
/* off, the box says it at the ladder's off share, as the Slider's fill
   and an off radio's chosen cell do (components/surface.css --off-ink):
   its edge at a third of the dim ink, and checked, the fill at a third
   of its ink with the tick in the dim words' colour, so an off check
   never reads as an enabled one, checked or not (interaction.md, "An
   off state must still be readable", stated 2026-09-06: an off control
   "says its state with its ground and its glyph"; the review of
   iteration 24's refinement: an off unchecked check drew exactly as an
   enabled one, and an off checked one differed from a check that is on
   by its words alone) */
.ds-check__input:disabled + .ds-check__box,
.ds-check[data-off] > .ds-check__box,
.ds-check-button:disabled .ds-check__box,
.ds-dropdown__option[aria-disabled="true"] .ds-check__box {
  --check-edge: color-mix(
    in srgb,
    var(--ds-color-text-dim) var(--off-ink),
    var(--ds-color-inactive)
  );
}
.ds-check__input:disabled:checked + .ds-check__box,
.ds-check[data-off] > .ds-check__input:checked + .ds-check__box,
.ds-check[data-off] > .ds-check__box[data-checked],
.ds-check-button[aria-pressed]:disabled .ds-check__box[data-checked],
.ds-dropdown__option[aria-disabled="true"] .ds-check__box[data-checked] {
  background: color-mix(
    in srgb,
    var(--ds-color-active) var(--off-ink),
    var(--ds-color-inactive)
  );
  box-shadow: none;
  color: var(--ds-color-text-dim);
}
.ds-check__input:disabled ~ .ds-check__label {
  color: var(--ds-color-text-dim);
}
.ds-check__label {
  min-width: 0;
}
/* a recolour rides the clock and the curve */
html[data-recolour] .ds-check__box {
  transition:
    background-color var(--ds-motion-clock) var(--ds-motion-ease),
    box-shadow var(--ds-motion-clock) var(--ds-motion-ease),
    color var(--ds-motion-clock) var(--ds-motion-ease);
}
html[data-recolour] .ds-check__label {
  transition: color var(--ds-motion-clock) var(--ds-motion-ease);
}
@media (prefers-reduced-motion: reduce) {
  .ds-check__box[data-pop] > svg {
    animation: none;
  }
}
/* a finger: the label's band of 48 about the box's centre */
@media (pointer: coarse) {
  .ds-check::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: calc(50% - var(--ds-grid-cell) * 6);
    bottom: calc(50% - var(--ds-grid-cell) * 6);
  }
}
@media (forced-colors: active) {
  .ds-check__box {
    outline: 1px solid CanvasText;
    outline-offset: -1px;
  }
  .ds-check__input:checked + .ds-check__box,
  .ds-check__box[data-checked] {
    forced-color-adjust: none;
    background: Highlight;
    box-shadow: none;
    color: HighlightText;
  }
  html[data-kbd] .ds-check__input:focus-visible + .ds-check__box {
    outline: var(--focus-ring-forced-w) solid Highlight;
  }
  .ds-check__input:disabled ~ .ds-check__label {
    color: GrayText;
  }
  /* a check button that is on: on the canvas the button is Highlight
     (components/button.css) and its box the inverse, HighlightText with
     the tick in Highlight; in the chrome the box alone says on, so the
     button is the system's own and its box Highlight (found in judging
     the review's fixes: the chrome's rest rung beat the Highlight under
     an opt-out, and Bubble and Spotlight stood as dark boxes in the
     page's grey, their checked boxes the grey fill) */
  .ds-check-button[aria-pressed="true"] .ds-check__box[data-checked] {
    background: HighlightText;
    color: Highlight;
  }
  [data-plain] .ds-check-button:not([data-state])[aria-pressed="true"] {
    forced-color-adjust: auto;
  }
  [data-plain]
    .ds-check-button[aria-pressed="true"]
    .ds-check__box[data-checked] {
    background: Highlight;
    color: HighlightText;
  }
  /* off, its box in GrayText, as the engine draws an off control */
  .ds-check__input:disabled + .ds-check__box,
  .ds-check[data-off] > .ds-check__box,
  .ds-check-button:disabled .ds-check__box,
  .ds-dropdown__option[aria-disabled="true"] .ds-check__box {
    outline-color: GrayText;
  }
  .ds-check__input:disabled:checked + .ds-check__box,
  .ds-check[data-off] > .ds-check__input:checked + .ds-check__box,
  .ds-check[data-off] > .ds-check__box[data-checked],
  .ds-check-button[aria-pressed]:disabled .ds-check__box[data-checked],
  .ds-dropdown__option[aria-disabled="true"] .ds-check__box[data-checked] {
    background: GrayText;
    color: Canvas;
  }
}