/* The chrome a configuration lands on: one control root, one slot, four states and four roles.

   Every value here is a name the token layer declares. The height is whichever ramp step the
   component declared, handed in as `--kit-step`, so a control's size is its declaration and never a
   number in this file. The radius is a name too — `data-corners` re-points that one name at the
   other family, which is what makes a squarish create button and a circular one one component in
   two configurations rather than two components.

   The four interaction states are three translucent rungs laid over whatever the ladder put
   underneath and a ring that is never a fill, so one recipe serves every surface. Each rung is an
   inset shadow rather than a second background, because a background a control already spent is a
   rung the walk cannot read off the rendered element. The four tint roles are the closed list: each
   resolves to one accent disposition, and nothing else on a control is reachable by an app's
   colour. */

.kit-control {
  --kit-radius: var(--radius-200);
  /* An edge a component declares, carried through every state rung rather than replaced by the first
     one that fires. A control's own hairline and the layer's state plate are both `box-shadow` on the
     same node at the same weight, so a component that stated an edge lost it to hover and press —
     and a component that stated it *after* this file, which every chapter stylesheet does, killed the
     plates instead. Neither is a choice anybody made. The slot is transparent by default, so a
     control that declares no edge renders exactly as it did. */
  --kit-edge: 0 0 0 0 transparent;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: var(--space-100);
  height: var(--kit-step);
  min-width: var(--kit-step);
  padding: 0 var(--space-150);
  border: 0;
  border-radius: var(--kit-radius);
  background-color: var(--surface-000);
  color: var(--ink-body);
  font-family: var(--font-sans);
  font-size: var(--type-200);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  box-shadow: var(--kit-edge);
  transition: background-color var(--duration-200) var(--ease), color var(--duration-200) var(--ease);
}

.kit-slot {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

/* The state overlay is the layer's `--state-*` rung rather than a recipe restated here: it is cut
   from the control's own ink rather than from a fixed white or black, so it survives whatever fill
   it lands on — a 6% white over a near-white primary plate is the same plate, which is how hover,
   press and rest came to render identically.

   That cut has one condition, and it belongs here because it binds every file below: **the root
   carries the ground's ink and the drawing carries the quiet one.** `currentColor` at the root is
   what the three rungs are cut from, so a control that states `--ink-muted` there has silently
   ordered 60% of every rung the layer rules — the icon button's hover landed at 4.8% of white and
   measured as no plate at all beside its own rest. The rung is not a colour the reader reads, so it
   is not the rung's job to be quiet; a control that wants a quiet drawing states that on the slot
   the drawing sits in. The `--ink-body` this file defaults the root to is the reading ink of a
   control whose drawing *is* text, which is why it is the one root ink that says nothing.

   **Selected is not on that ramp at all, and the chapter 2 stakeholder review is what took it off.**
   It used to be a fourth share of the same `currentColor` — a tinted plate inside a ring cut from the
   app's colour — and the fault in that is arithmetic rather than taste: a *share* of an ink has
   whatever value that ink happens to have, so where the plate landed was decided by how light the app
   the reader was in happened to be. Measured on the chip, on the ground each is drawn on: under the
   grey apps the selected plate came out `#424245` on the dark ground, a hair off the press plate's
   `#49494C`, and on paper it came out `#DDDDE0` — the hover plate, byte for byte, with no colour in it
   at all. Under a blue app it came out `#1D2647`, which is *fainter* than hover. So the one state whose
   whole job is to say *this is the current one of the set* was drawn at the weight of a transient
   pointer state, told from it by a hairline, and carried the app's colour nowhere a reader would find
   it. That is the review's three sentences — the filling too light, the filling and the white label and
   the app's colour all crowding each other on the dark ground, and the colour gone entirely on paper.

   **So selected is the app's colour, at full strength, with the ink knocked out of it.** Not a share
   of it: the colour itself, laid over whatever plate the component already had, with the label,
   the glyphs and the meta all set in `--surface-000`. That pair is the one the layer already
   guarantees — `--accent-ink` is cut per ground to clear the text floor against `--surface-000`, and
   foundations-check measures it there for every app on both grounds — so a selected control is
   legible by construction rather than by inspection, under all eight apps, on both grounds, with no
   per-component ink to keep in step. It is also the notation the surfaces this kit is benchmarked
   against use for exactly this state, and the one a reader can name on sight from across the screen:
   nothing else in the kit is the app's colour edge to edge.

   **The ring goes with the tint, because a solid plate has nothing to outline.** A ring drawn in the
   same colour as the fill behind it is not a ring, and one drawn in anything else is a second mark on
   a state that no longer needs one — the whole of how selected used to be told from press was that
   hairline, and the plate does that job now on its own. The focus ring is untouched and stays where it
   was: `--stroke-focus`, 1px, *outside* the box and held off it by an offset. The two states were once
   separated by which side of a border a line fell on; they are now separated by one being a fill and
   the other being a ring, which is the difference the collision was always asking for.

   **The floor this replaced was also the wrong shape for what selected means.** A 2px bar along one
   edge is the mark a tab strip makes, and it was being drawn on chips, rows, menu items and setting
   rows that have no strip to sit in.

   **Every state is spelled twice: once for the cell that draws it and once for the pointer that
   reaches it.** `data-state` is how the matrix draws a state on a specimen; the pseudo-class is how
   a reader gets it, and this file used to state only the first for hover and press — so eleven
   controls in chapter 4 alone drew five states and answered a real pointer with none of them. Focus
   was already spelled both ways, which is what the missing half should have looked like.

   **The pointer cursor is the half of hover that arrives before it** — interaction-and-notation.md
   §2.1's other half, and the half most often left off — so it is stated here rather than by each
   control. `button` and `link` are the two roles a control root carries when it acts, and a
   root carrying neither is a region: the toolbar, the rail and the pane head are `.kit-control` too,
   and a chip that is a tag takes no role precisely so that nothing reads it as pressable.

   **A control drawn at a state renders that state; a control at rest answers the pointer.** That is
   the whole of how the two halves divide, and it is why the live rungs name the resting control
   rather than excluding the others one at a time: `disabled` and `selected` are drawn states like
   any other, so they are outside the live selectors already — and a specimen drawn at press does not
   flip to hover the moment a pointer crosses the cell it is sitting in, which a live `:hover`
   outweighing a `data-state` by two attributes is exactly what it did. */
.kit-control[role="button"]:not([data-state="disabled"]),
.kit-control[role="link"]:not([data-state="disabled"]) {
  cursor: pointer;
}

.kit-control[data-state="hover"],
.kit-control[role="button"][data-state="rest"]:hover,
.kit-control[role="link"][data-state="rest"]:hover,
.kit-control[role="button"]:not([data-state]):hover,
.kit-control[role="link"]:not([data-state]):hover {
  box-shadow: var(--kit-edge), inset 0 0 0 100vmax var(--state-hover);
}

.kit-control[data-state="press"],
.kit-control[role="button"][data-state="rest"]:active,
.kit-control[role="link"][data-state="rest"]:active,
.kit-control[role="button"]:not([data-state]):active,
.kit-control[role="link"]:not([data-state]):active {
  box-shadow: var(--kit-edge), inset 0 0 0 100vmax var(--state-press);
}

/* Opaque, and stated as a plate rather than as a background, for the reason every other rung here is:
   a component's own `background-color` is declared at this rule's own weight and after it, so a
   background set here loses to every file below and a 100vmax inset plate does not. `--kit-edge` is
   not composed, because a hairline drawn over the app's colour states a boundary the fill already is.

   The ink is carried on the slots as well as on the root. A slot's colour is the component's — the
   chip's meta is muted, the icon button's glyph is muted, the route chip's address is muted — and a
   knockout that only reached the root left half of a selected control reading as mid grey on the app's
   colour. It reaches the control's **own** slots and stops there: a chip on a selected row and a face
   in a selected message are controls of their own, standing on their own plates, and a knockout that
   ran down the whole subtree painted their labels in the ground the row was cut against — measured,
   a `Work` tag on a selected contacts row came out black on its own near-black plate. `:where()`
   keeps the rule at the root selector's own weight, so a component that has to state another ink on
   a selected slot still can — and four of them do.

   `--kit-quiet` is the third ink and the one that has to travel. A control that draws no plate of its
   own — an icon button, a count, the rail's toggle — stands on whatever is underneath it, and inside a
   selected row that is the app's colour: the muted rung measured 2.57 : 1 there, so the two actions at
   the end of a selected mail row and the count on a selected rail row were marks under the floor they
   answer to. A custom property inherits, so a control drawing its mark at `var(--kit-quiet,
   var(--ink-muted))` reads at the muted rung wherever it normally lives and at the knockout inside a
   selected control, without either of them naming the other. The fallback belongs at the *use* site
   and never here: declared on `.kit-control`, every nested control root re-declared it, so a selected
   row set the knockout and the icon button standing on it set it straight back — the same fault one
   element lower. A name only a selected root declares is a name only a selected root can change. */
.kit-control[data-state="selected"] {
  --kit-quiet: var(--surface-000);
  box-shadow: inset 0 0 0 100vmax var(--accent-ink);
  color: var(--surface-000);
  font-weight: var(--weight-strong);
}

.kit-control[data-state="selected"] > :where(.kit-slot) {
  color: var(--surface-000);
}

.kit-control[data-state="focus-visible"],
.kit-control:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* Rendered, not hidden. Fading a white label and its accent plate together dims both and leaves the
   label unreadable, so a disabled control gives up its tint and states its unavailability in the
   neutral ladder, where the floors still apply. */
.kit-control[data-state="disabled"] {
  background-color: var(--surface-200);
  color: var(--ink-subtle);
}

.kit-control[data-state="disabled"]::before {
  background-color: var(--ink-subtle);
}

.kit-control[data-tint-role="primary-action"] {
  background-color: var(--accent-ink);
  color: var(--surface-000);
}

.kit-control[data-tint-role="selection"] {
  color: var(--accent-ink);
}

.kit-control[data-tint-role="plate"] {
  color: var(--plate-ink);
}

.kit-control[data-tint-role="plate"] > :where(.kit-slot) {
  color: var(--plate-ink);
}

.kit-control[data-tint-role="focus"] {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.kit-control[data-tint-role="jewel"]::before {
  content: "";
  width: var(--space-100);
  height: var(--space-100);
  border-radius: var(--radius-pill);
  background-color: var(--accent-artwork);
}