/* The kit's elements: one contract per element, about five skins each.

   A contract is fixed, semantic, accessible markup (elements.js has each
   one, with its sample, its skins and the rules they meet). A skin is CSS on
   that same markup, chosen by one attribute:

     <nav data-k="nav" data-skin="rule"> <a href="/" aria-current="page">…

   So swapping a skin in the studio changes data-skin on the real element:
   the page's own links, data and scripts are untouched, and every skin shows
   the site's real content. A skin may change layout as well as look (a top
   bar becomes a bottom tab bar, rows become cards, a table stacks into cards
   on a phone). Building a pick is writing the attribute.

   Every rule here reads only the kit's tokens (tokens.css): colour, type,
   --s, --gap-in, --gap-out, --radius, --dur, --ease, the key light. Every
   rule is scoped to the kit's own skin names, so a project's own skin for an
   element (registered in its options.js, styled in its own CSS under its own
   data-skin) never mixes with these. Shared behaviour (menus, sheets, tabs,
   toasts, icons) is in behaviors.js: one behaviour, five looks.

   Sources for the recurring rules (the registry cites them per skin):
   44px targets and press at 0.96 over 150ms ease-out (signature, better-ui);
   concentric radii (better-ui); borders for structure, shadows for height
   (better-ui); focus rings 2px (better-accessibility); tabular figures and
   wrapping (better-typography); groups 2.5× apart (better-layout, persona);
   no bounce, reduced motion gets fades (signature, apple-design). */

/* ── Shared ───────────────────────────────────────────────────────────── */

[data-k] {
  /* One pixel at the default body size: every kit size is a multiple. */
  --k-fs: calc(var(--body-size, 16px) / 16);
  --k-small: calc(var(--k-fs) * 14);
  --k-tiny: calc(var(--k-fs) * 13);
  /* A raised thing's shadow falls away from the key light (cinema.js). */
  --k-lift:
    var(--cz-sx, 0px) calc(var(--cz-sy, 1px) * 2 + 2px) calc(var(--s, 8px) * 2) calc(var(--s, 8px) * -0.5) rgb(0 0 0 / 0.16),
    var(--cz-sx, 0px) var(--cz-sy, 1px) 2px rgb(0 0 0 / 0.08);
  --k-ring: 0 0 0 1px var(--line);
  --k-tint: color-mix(in oklab, var(--ink) 6%, transparent);
  --k-tint-2: color-mix(in oklab, var(--ink) 10%, transparent);
  /* A panel's inset and a track's, from the base unit (6px and 3px at 8px). */
  --k-inset: calc(var(--s, 8px) * 0.75);
  --k-track: calc(var(--s, 8px) * 0.375);
}

/* Sizes include their padding, inside every kit element. */
[data-k], [data-k] *, [data-k] ::before, [data-k] ::after { box-sizing: border-box; }

/* Visually hidden, still read aloud. */
.k-sr {
  position: absolute !important;
  inline-size: 1px; block-size: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* Icons: <i data-icon="search"></i>, filled from the picked set (icons.js)
   by behaviors.js. They take the text's colour and size. */
[data-icon] {
  display: inline-grid; place-items: center; flex: none;
  inline-size: 1.25em; block-size: 1.25em;
  font-style: normal; line-height: 1;
}
[data-icon] > svg { inline-size: 100%; block-size: 100%; }

/* ── Navigation ───────────────────────────────────────────────────────────
   <nav data-k="nav" aria-label="Sections"> <a href aria-current="page">…
   Links may hold <i data-icon> and <span class="k-text">; icons show only
   in the tab bar and the rail. */

[data-k="nav"]:is([data-skin="words"], [data-skin="rule"], [data-skin="segment"], [data-skin="tabbar"], [data-skin="rail"]) {
  display: flex; align-items: center;
  font-family: var(--font-body);
  font-size: calc(var(--k-fs) * 15);
}
[data-k="nav"]:is([data-skin="words"], [data-skin="rule"], [data-skin="segment"], [data-skin="tabbar"], [data-skin="rail"]) > a {
  position: relative;
  display: inline-grid; grid-auto-flow: column; align-items: center; justify-content: center;
  gap: calc(var(--s) * 0.75);
  min-block-size: 44px; min-inline-size: 44px;
  padding-inline: calc(var(--s) * 1.25);
  color: var(--ink-2); text-decoration: none; white-space: nowrap;
  border-radius: calc(var(--radius) * 0.5);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition-property: color, background-color, box-shadow;
  transition-duration: 150ms; transition-timing-function: ease-out;
}
[data-k="nav"]:is([data-skin="words"], [data-skin="rule"], [data-skin="segment"], [data-skin="tabbar"], [data-skin="rail"]) > a[aria-current="page"] {
  color: var(--ink); font-weight: 600;
}
[data-k="nav"]:is([data-skin="words"], [data-skin="rule"], [data-skin="segment"], [data-skin="tabbar"], [data-skin="rail"]) > a:focus-visible {
  outline: 2px solid var(--accent); outline-offset: -2px;
}
@media (hover: hover) {
  [data-k="nav"]:is([data-skin="words"], [data-skin="rule"], [data-skin="segment"], [data-skin="tabbar"], [data-skin="rail"]) > a:not([aria-current="page"]):hover { color: var(--ink); }
}
/* The current word turns semibold without moving its neighbours: each link
   keeps room for its bold width (data-text is set by behaviors.js).
   Anything repeated never moves (signature). */
[data-k="nav"]:is([data-skin="words"], [data-skin="rule"], [data-skin="segment"]) > a { grid-auto-flow: row; }
[data-k="nav"]:is([data-skin="words"], [data-skin="rule"], [data-skin="segment"]) > a > * { grid-area: 1 / 1; }
[data-k="nav"]:is([data-skin="words"], [data-skin="rule"], [data-skin="segment"]) > a[data-text]::after {
  content: attr(data-text) / "";
  grid-area: 1 / 1; font-weight: 600;
  visibility: hidden; block-size: 0; overflow: hidden;
}
[data-k="nav"]:is([data-skin="words"], [data-skin="rule"], [data-skin="segment"]) > a [data-icon] { display: none; }

/* Plain words: the words and a weight change; spread across a phone, set
   close together on a desktop. */
[data-k="nav"][data-skin="words"] { justify-content: space-between; }
@media (min-width: 40rem) { [data-k="nav"]:is([data-skin="words"], [data-skin="rule"]) { justify-content: flex-start; gap: calc(var(--s) * 1); } }

/* Words on a rule: the current one sits on a short ink rule. */
[data-k="nav"][data-skin="rule"] {
  justify-content: space-between;
  box-shadow: inset 0 -1px 0 var(--line);
}
[data-k="nav"][data-skin="rule"] > a { border-radius: 0; }
[data-k="nav"][data-skin="rule"] > a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--ink); }

/* Sheer segment: one capsule, the current one raised in it. */
[data-k="nav"][data-skin="segment"] {
  max-inline-size: 36rem; padding: calc(var(--k-track) + 1px); gap: 2px; border-radius: 999px;
  background: color-mix(in oklab, var(--surface) 60%, transparent);
  box-shadow: var(--k-ring);
}
[data-k="nav"][data-skin="segment"] > a { flex: 1 1 0; min-block-size: 40px; border-radius: 999px; padding-inline: calc(var(--s) * 1); }
[data-k="nav"][data-skin="segment"] > a[aria-current="page"] { background: var(--surface); box-shadow: var(--k-ring), var(--k-lift); }
/* The capsule inside is 40px; the target reaches the track's edge (48px). */
[data-k="nav"][data-skin="segment"] > a::before { content: ""; position: absolute; inset: calc((var(--k-track) + 1px) * -1) -1px; }

/* Bottom tab bar: thumb reach; each section an icon over its word, frosted
   so the page scrolls under it. The page keeps room for it. */
[data-k="nav"][data-skin="tabbar"] {
  position: fixed; z-index: 30; inset-inline: 0; inset-block-end: 0;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  padding: calc(var(--k-track) + 1px) max(var(--s), env(safe-area-inset-right)) max(calc(var(--k-track) + 1px), env(safe-area-inset-bottom)) max(var(--s), env(safe-area-inset-left));
  background: color-mix(in oklab, var(--bg) 84%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: 0 -1px 0 var(--line);
  font-size: calc(var(--k-fs) * 12);
}
[data-k="nav"][data-skin="tabbar"] > a { grid-auto-flow: row; justify-items: center; gap: 2px; min-block-size: 52px; padding-inline: 2px; overflow: hidden; text-overflow: ellipsis; }
[data-k="nav"][data-skin="tabbar"] > a [data-icon] { inline-size: 24px; block-size: 24px; }
[data-k="nav"][data-skin="tabbar"] > a > .k-text { overflow: hidden; text-overflow: ellipsis; max-inline-size: 100%; }
html:has([data-k="nav"][data-skin="tabbar"]) body { padding-block-end: calc(64px + env(safe-area-inset-bottom)); /* kit-ok: the tab bar's height, 52px targets and their inset */ }

/* Side rail: on a desktop the sections stand in a column at the left; on a
   phone it reads as words on a rule. */
[data-k="nav"][data-skin="rail"] { justify-content: space-between; box-shadow: inset 0 -1px 0 var(--line); }
[data-k="nav"][data-skin="rail"] > a [data-icon] { display: none; }
@media (min-width: 60rem) {
  [data-k="nav"][data-skin="rail"] {
    position: fixed; z-index: 30; inset-block: 0; inset-inline-start: 0;
    inline-size: calc(var(--s) * 26);
    flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 2px;
    padding: calc(var(--gap-out) * 0.75) calc(var(--s) * 1.5);
    background: var(--bg); box-shadow: inset -1px 0 0 var(--line);
  }
  [data-k="nav"][data-skin="rail"] > a { justify-content: start; padding-inline: calc(var(--s) * 1.5); }
  [data-k="nav"][data-skin="rail"] > a [data-icon] { display: inline-grid; }
  [data-k="nav"][data-skin="rail"] > a[aria-current="page"] { background: var(--k-tint); }
  html:has([data-k="nav"][data-skin="rail"]) body { padding-inline-start: calc(var(--s) * 26); }
}

/* ── Tabs and segmented controls ──────────────────────────────────────────
   <div data-k="tabs" role="tablist" aria-label> <button role="tab"
   aria-selected aria-controls>… Panels are the page's; behaviors.js moves
   the selection and the keyboard (arrows, Home, End). */

[data-k="tabs"]:is([data-skin="underline"], [data-skin="capsule"], [data-skin="boxed"], [data-skin="weight"], [data-skin="track"]) {
  position: relative; display: flex; align-items: stretch;
  font-family: var(--font-body); font-size: calc(var(--k-fs) * 15);
}
[data-k="tabs"]:is([data-skin="underline"], [data-skin="capsule"], [data-skin="boxed"], [data-skin="weight"], [data-skin="track"]) > [role="tab"] {
  position: relative; z-index: 1;
  display: inline-grid; place-items: center;
  min-block-size: 44px; min-inline-size: 44px;
  padding-inline: calc(var(--s) * 1.5);
  font: inherit; color: var(--ink-2);
  background: none; border: 0; border-radius: calc(var(--radius) * 0.5);
  cursor: pointer; white-space: nowrap;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition-property: color, background-color, box-shadow;
  transition-duration: 150ms; transition-timing-function: ease-out;
}
[data-k="tabs"]:is([data-skin="underline"], [data-skin="capsule"], [data-skin="boxed"], [data-skin="weight"], [data-skin="track"]) > [role="tab"][aria-selected="true"] { color: var(--ink); font-weight: 600; }
[data-k="tabs"]:is([data-skin="underline"], [data-skin="capsule"], [data-skin="boxed"], [data-skin="weight"], [data-skin="track"]) > [role="tab"]:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* Room for the bold width, so nothing shifts. */
[data-k="tabs"]:is([data-skin="underline"], [data-skin="capsule"], [data-skin="boxed"], [data-skin="weight"], [data-skin="track"]) > [role="tab"] > * { grid-area: 1 / 1; }
[data-k="tabs"]:is([data-skin="underline"], [data-skin="capsule"], [data-skin="boxed"], [data-skin="weight"], [data-skin="track"]) > [role="tab"][data-text]::after {
  content: attr(data-text) / ""; grid-area: 1 / 1; font-weight: 600; visibility: hidden; block-size: 0; overflow: hidden;
}
@media (hover: hover) {
  [data-k="tabs"]:is([data-skin="underline"], [data-skin="capsule"], [data-skin="boxed"], [data-skin="weight"], [data-skin="track"]) > [role="tab"]:not([aria-selected="true"]):hover { color: var(--ink); }
}

/* Underline: the selected tab sits on the accent. */
[data-k="tabs"][data-skin="underline"] { box-shadow: inset 0 -1px 0 var(--line); gap: calc(var(--s) * 0.5); }
[data-k="tabs"][data-skin="underline"] > [role="tab"] { border-radius: 0; }
[data-k="tabs"][data-skin="underline"] > [role="tab"][aria-selected="true"] { box-shadow: inset 0 -2px 0 var(--accent); }

/* Capsule segment: the selected one in a raised capsule. */
[data-k="tabs"][data-skin="capsule"] { gap: 2px; }
[data-k="tabs"][data-skin="capsule"] > [role="tab"] { border-radius: 999px; }
[data-k="tabs"][data-skin="capsule"] > [role="tab"][aria-selected="true"] { background: var(--surface); box-shadow: var(--k-ring), var(--k-lift); }

/* Boxed: one box divided into equal parts, the selected part filled. */
[data-k="tabs"][data-skin="boxed"] { border-radius: calc(var(--radius) * 0.75); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
[data-k="tabs"][data-skin="boxed"] > [role="tab"] { flex: 1 1 0; border-radius: 0; }
[data-k="tabs"][data-skin="boxed"] > [role="tab"] + [role="tab"] { box-shadow: inset 1px 0 0 var(--line); }
[data-k="tabs"][data-skin="boxed"] > [role="tab"][aria-selected="true"] { background: var(--k-tint-2); }

/* Text weight only: the quietest; the selected word in ink and semibold. */
[data-k="tabs"][data-skin="weight"] { gap: calc(var(--s) * 0.5); }
[data-k="tabs"][data-skin="weight"] > [role="tab"] { padding-inline: calc(var(--s) * 1); }

/* Pill track: a recessed track with a thumb that slides to the selection
   (behaviors.js sets --k-ind-x and --k-ind-w from the selected tab). */
[data-k="tabs"][data-skin="track"] { padding: var(--k-track); border-radius: 999px; background: var(--k-tint); }
[data-k="tabs"][data-skin="track"] > [role="tab"] { flex: 1 1 0; border-radius: 999px; min-block-size: 38px; }
/* The thumb is 38px; the target reaches the track's edge (44px). */
[data-k="tabs"][data-skin="track"] > [role="tab"]::before { content: ""; position: absolute; inset: calc(var(--k-track) * -1) -1px; }
[data-k="tabs"][data-skin="track"]::before {
  content: ""; position: absolute; z-index: 0;
  inset-block: 3px; inset-inline-start: 0;
  inline-size: var(--k-ind-w, 0px); translate: var(--k-ind-x, 0px) 0;
  border-radius: 999px; background: var(--surface); box-shadow: var(--k-ring), var(--k-lift);
}
@media (prefers-reduced-motion: no-preference) {
  [data-k="tabs"][data-skin="track"][data-k-ready]::before { transition: translate 200ms var(--ease), inline-size 200ms var(--ease); }
}

/* ── Filters ──────────────────────────────────────────────────────────────
   <div data-k="filters" role="group" aria-label>
     <button class="k-filters-open"> the one button (sheet skin)
     <span class="k-lead"> the sentence's first word (sentence skin)
     <div class="k-groups">
       <div class="k-group" data-none="Everyone">
         <button class="k-group-open" aria-expanded><span class="k-label">Who</span> <span class="k-value">Everyone</span>
         <div class="k-options" role="group" aria-label="Who">
           <button class="k-option" aria-pressed><span class="k-text">Maya</span> <span class="k-count">3</span>
       <button class="k-filters-done"> closes the sheet
   Toggling, the value text, opening and closing are behaviors.js. */

[data-k="filters"]:is([data-skin="menus"], [data-skin="pills"], [data-skin="sentence"], [data-skin="sheet"], [data-skin="chips"]) {
  position: relative; font-family: var(--font-body); font-size: calc(var(--k-fs) * 15);
}
[data-k="filters"]:is([data-skin="menus"], [data-skin="pills"], [data-skin="sentence"], [data-skin="sheet"], [data-skin="chips"]) :is(.k-filters-open, .k-group-open, .k-option, .k-filters-done) {
  font: inherit; color: var(--ink); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--s) * 0.75);
  min-block-size: 44px; min-inline-size: 44px;
  padding-inline: calc(var(--s) * 1.5);
  background: none; border: 0; border-radius: calc(var(--radius) * 0.75);
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition-property: scale, background-color, color, box-shadow;
  transition-duration: 150ms; transition-timing-function: ease-out;
}
[data-k="filters"]:is([data-skin="menus"], [data-skin="pills"], [data-skin="sentence"], [data-skin="sheet"], [data-skin="chips"]) :is(.k-filters-open, .k-group-open, .k-option, .k-filters-done):active { scale: 0.96; }
[data-k="filters"]:is([data-skin="menus"], [data-skin="pills"], [data-skin="sentence"], [data-skin="sheet"], [data-skin="chips"]) :is(.k-filters-open, .k-group-open, .k-option, .k-filters-done):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[data-k="filters"]:is([data-skin="menus"], [data-skin="pills"], [data-skin="sentence"], [data-skin="sheet"], [data-skin="chips"]) .k-value { color: var(--ink-2); }
[data-k="filters"]:is([data-skin="menus"], [data-skin="pills"], [data-skin="sentence"], [data-skin="sheet"], [data-skin="chips"]) .k-count { color: var(--ink-2); font-size: var(--k-tiny); font-variant-numeric: tabular-nums; }
[data-k="filters"]:is([data-skin="menus"], [data-skin="pills"], [data-skin="sentence"], [data-skin="sheet"], [data-skin="chips"]) .k-option[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
[data-k="filters"]:is([data-skin="menus"], [data-skin="pills"], [data-skin="sentence"], [data-skin="sheet"], [data-skin="chips"]) .k-option[aria-pressed="true"] .k-count { color: inherit; opacity: 0.75; }
/* Only the skins that use them show the one button, the lead word and Done. */
[data-k="filters"]:is([data-skin="menus"], [data-skin="pills"], [data-skin="sentence"], [data-skin="chips"]) :is(.k-filters-open, .k-filters-done) { display: none; }
[data-k="filters"]:is([data-skin="menus"], [data-skin="pills"], [data-skin="sheet"], [data-skin="chips"]) .k-lead { display: none; }

/* The groups and anything the page keeps beside them (a Done toggle) flow
   on one line where they fit. */
[data-k="filters"]:is([data-skin="menus"], [data-skin="sheet"], [data-skin="chips"]) { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--s) * 0.5); }

/* Three menus: one quiet menu per group, in one row; each says what's
   picked. Its options open in a panel under it. */
[data-k="filters"][data-skin="menus"] .k-groups { display: flex; flex-wrap: wrap; gap: calc(var(--s) * 0.5); }
[data-k="filters"][data-skin="menus"] .k-group { position: relative; }
[data-k="filters"][data-skin="menus"] .k-group-open { background: color-mix(in oklab, var(--surface) 70%, transparent); box-shadow: var(--k-ring); }
[data-k="filters"][data-skin="menus"] .k-group-open [data-icon] { color: var(--ink-2); inline-size: 1em; block-size: 1em; }
[data-k="filters"][data-skin="menus"] .k-options {
  position: absolute; z-index: 20; inset-block-start: calc(100% + 6px); inset-inline-start: 0;
  display: none; flex-direction: column; align-items: stretch; gap: 2px;
  min-inline-size: calc(var(--s) * 24); padding: var(--k-inset);
  background: var(--surface); border-radius: calc(var(--radius) * 0.75 + var(--k-inset));
  box-shadow: var(--k-ring), var(--k-lift);
}
[data-k="filters"][data-skin="menus"] .k-group[data-open] .k-options { display: flex; }
[data-k="filters"][data-skin="menus"] .k-option { justify-content: flex-start; border-radius: calc(var(--radius) * 0.75); }

/* Pill rows: every option on the page, a row per group, no menus. */
[data-k="filters"][data-skin="pills"] .k-groups { display: grid; gap: calc(var(--s) * 1); }
[data-k="filters"][data-skin="pills"] .k-group-open { display: none; }
[data-k="filters"][data-skin="pills"] .k-options { display: flex; flex-wrap: wrap; gap: calc(var(--s) * 0.5); }
[data-k="filters"][data-skin="pills"] .k-option { border-radius: 999px; box-shadow: var(--k-ring); background: color-mix(in oklab, var(--surface) 70%, transparent); }
[data-k="filters"][data-skin="pills"] .k-option .k-count { display: none; }

/* A sentence: "Showing everyone's, everything, any time", each phrase a menu. */
[data-k="filters"][data-skin="sentence"] .k-lead { color: var(--ink-2); }
[data-k="filters"][data-skin="sentence"] { display: flex; flex-wrap: wrap; align-items: center; column-gap: 2px; }
[data-k="filters"][data-skin="sentence"] .k-groups { display: contents; }
[data-k="filters"][data-skin="sentence"] .k-group { position: relative; }
[data-k="filters"][data-skin="sentence"] .k-group-open { padding-inline: calc(var(--s) * 0.5); color: var(--ink); }
[data-k="filters"][data-skin="sentence"] .k-group-open .k-label,
[data-k="filters"][data-skin="sentence"] .k-group-open [data-icon] { display: none; }
[data-k="filters"][data-skin="sentence"] .k-group-open .k-value { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in oklab, var(--ink) 35%, transparent); text-decoration-thickness: 1px; text-underline-offset: 4px; }
[data-k="filters"][data-skin="sentence"] .k-group + .k-group::before { content: ","; color: var(--ink-2); margin-inline: calc(var(--s) * -0.5) 2px; }
[data-k="filters"][data-skin="sentence"] .k-options {
  position: absolute; z-index: 20; inset-block-start: calc(100% + 4px); inset-inline-start: 0;
  display: none; flex-direction: column; gap: 2px; min-inline-size: calc(var(--s) * 22); padding: var(--k-inset);
  background: var(--surface); border-radius: calc(var(--radius) * 0.75 + var(--k-inset)); box-shadow: var(--k-ring), var(--k-lift);
}
[data-k="filters"][data-skin="sentence"] .k-group[data-open] .k-options { display: flex; }
[data-k="filters"][data-skin="sentence"] .k-option { justify-content: flex-start; }
[data-k="filters"]:is([data-skin="menus"], [data-skin="sentence"]) .k-option .k-count { margin-inline-start: auto; }

/* One button and a sheet: a single Filter control; every group opens in a
   sheet from the bottom. */
[data-k="filters"][data-skin="sheet"] .k-filters-open { background: var(--ink); color: var(--bg); border-radius: 999px; padding-inline: calc(var(--s) * 2); font-weight: 600; }
[data-k="filters"][data-skin="sheet"] .k-filters-open .k-value { color: inherit; opacity: 0.72; font-weight: 400; }
[data-k="filters"][data-skin="sheet"] .k-groups {
  position: fixed; z-index: 40; inset-inline: 0; inset-block-end: 0;
  display: none; flex-direction: column; gap: calc(var(--gap-in) * 1.5);
  max-inline-size: 40rem; margin-inline: auto; max-block-size: 80dvh; overflow: auto; overscroll-behavior: contain;
  padding: calc(var(--s) * 3) calc(var(--s) * 2) max(calc(var(--s) * 2), env(safe-area-inset-bottom));
  background: var(--surface); border-radius: calc(var(--radius) * 1.5) calc(var(--radius) * 1.5) 0 0;
  box-shadow: 0 -1px 0 var(--line), 0 -12px 40px rgb(0 0 0 / 0.18);
}
[data-k="filters"][data-skin="sheet"][data-open] .k-groups { display: flex; }
[data-k="filters"][data-skin="sheet"] .k-group { display: grid; gap: calc(var(--s) * 0.75); }
[data-k="filters"][data-skin="sheet"] .k-group-open { justify-content: start; padding-inline: 0; min-block-size: 0; pointer-events: none; font-weight: 600; }
[data-k="filters"][data-skin="sheet"] .k-group-open :is(.k-value, [data-icon]) { display: none; }
[data-k="filters"][data-skin="sheet"] .k-options { display: flex; flex-wrap: wrap; gap: calc(var(--s) * 0.5); }
[data-k="filters"][data-skin="sheet"] .k-option { border-radius: 999px; box-shadow: var(--k-ring); }
[data-k="filters"][data-skin="sheet"] .k-filters-done { display: inline-flex; align-self: stretch; background: var(--ink); color: var(--bg); font-weight: 600; }
@media (prefers-reduced-motion: no-preference) {
  [data-k="filters"][data-skin="sheet"] .k-groups { transition: translate 280ms var(--ease), display 280ms allow-discrete; }
  @starting-style { [data-k="filters"][data-skin="sheet"][data-open] .k-groups { translate: 0 100%; } }
}

/* Chips with counts: every option in one flowing set, each with how many. */
[data-k="filters"][data-skin="chips"] .k-groups { display: flex; flex-wrap: wrap; gap: calc(var(--s) * 0.5); }
[data-k="filters"][data-skin="chips"] .k-group { display: contents; }
[data-k="filters"][data-skin="chips"] .k-group-open { display: none; }
[data-k="filters"][data-skin="chips"] .k-options { display: contents; }
[data-k="filters"][data-skin="chips"] .k-option { border-radius: calc(var(--radius) * 0.5); background: var(--k-tint); padding-inline: calc(var(--s) * 1.25); }

/* ── Search ───────────────────────────────────────────────────────────────
   <search data-k="search"> <label class="k-label" for> <div class="k-box">
   <i data-icon="search"> <input type="search"> <button class="k-clear">
   <kbd class="k-key">/</kbd> </div> <ul class="k-results" role="listbox"> */

[data-k="search"]:is([data-skin="underline"], [data-skin="filled"], [data-skin="capsule"], [data-skin="expand"], [data-skin="command"]) {
  position: relative; display: grid; gap: calc(var(--s) * 0.5); font-family: var(--font-body);
}
[data-k="search"]:is([data-skin="underline"], [data-skin="filled"], [data-skin="capsule"], [data-skin="expand"], [data-skin="command"]) .k-label {
  position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
[data-k="search"]:is([data-skin="underline"], [data-skin="filled"], [data-skin="capsule"], [data-skin="expand"], [data-skin="command"]) .k-box {
  display: flex; align-items: center; gap: calc(var(--s) * 1);
  min-block-size: 44px; padding-inline: calc(var(--s) * 1.5);
  color: var(--ink-2); cursor: text;
}
[data-k="search"]:is([data-skin="underline"], [data-skin="filled"], [data-skin="capsule"], [data-skin="expand"], [data-skin="command"]) input {
  flex: 1 1 auto; min-inline-size: 0; block-size: 44px; padding: 0;
  font: inherit; font-size: max(16px, var(--body-size)); /* kit-ok: 16px stops a phone zooming into the field (type) */ color: var(--ink);
  background: none; border: 0; outline: none; appearance: none; -webkit-appearance: none;
}
[data-k="search"]:is([data-skin="underline"], [data-skin="filled"], [data-skin="capsule"], [data-skin="expand"], [data-skin="command"]) input::-webkit-search-cancel-button { -webkit-appearance: none; }
[data-k="search"]:is([data-skin="underline"], [data-skin="filled"], [data-skin="capsule"], [data-skin="expand"], [data-skin="command"]) input::placeholder { color: var(--ink-2); opacity: 1; }
[data-k="search"]:is([data-skin="underline"], [data-skin="filled"], [data-skin="capsule"], [data-skin="expand"], [data-skin="command"]) .k-box:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
[data-k="search"]:is([data-skin="underline"], [data-skin="filled"], [data-skin="capsule"], [data-skin="expand"], [data-skin="command"]) .k-clear {
  display: inline-grid; place-items: center; flex: none; inline-size: 44px; block-size: 44px; margin-inline-end: calc(var(--s) * -1.5);
  color: var(--ink-2); background: none; border: 0; border-radius: 999px; cursor: pointer;
}
[data-k="search"]:is([data-skin="underline"], [data-skin="filled"], [data-skin="capsule"], [data-skin="expand"], [data-skin="command"]) .k-clear[hidden] { display: none; }
[data-k="search"]:is([data-skin="underline"], [data-skin="filled"], [data-skin="capsule"], [data-skin="expand"]) .k-key { display: none; }
[data-k="search"]:is([data-skin="underline"], [data-skin="filled"], [data-skin="capsule"], [data-skin="expand"], [data-skin="command"]) .k-results {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 2px;
}
[data-k="search"]:is([data-skin="underline"], [data-skin="filled"], [data-skin="capsule"], [data-skin="expand"], [data-skin="command"]) .k-results:empty { display: none; }
[data-k="search"]:is([data-skin="underline"], [data-skin="filled"], [data-skin="capsule"], [data-skin="expand"], [data-skin="command"]) .k-results > li {
  display: flex; align-items: center; gap: calc(var(--s) * 1); min-block-size: 44px;
  padding: calc(var(--s) * 0.75) calc(var(--s) * 1.5); border-radius: calc(var(--radius) * 0.75); cursor: pointer;
}
[data-k="search"]:is([data-skin="underline"], [data-skin="filled"], [data-skin="capsule"], [data-skin="expand"], [data-skin="command"]) .k-results > li[aria-selected="true"] { background: var(--k-tint-2); }
@media (hover: hover) {
  [data-k="search"]:is([data-skin="underline"], [data-skin="filled"], [data-skin="capsule"], [data-skin="expand"], [data-skin="command"]) .k-results > li:hover { background: var(--k-tint); }
}

/* Quiet underline: a rule to write on. */
[data-k="search"][data-skin="underline"] .k-box { padding-inline: 0; box-shadow: inset 0 -1px 0 color-mix(in oklab, var(--ink) 40%, transparent); }
[data-k="search"][data-skin="underline"] .k-box:has(input:focus-visible) { outline: 0; box-shadow: inset 0 -2px 0 var(--accent); }
[data-k="search"][data-skin="underline"] .k-clear { margin-inline-end: -10px; /* kit-ok: the icon's edge on the rule's end, optically */ }

/* Filled field: a recessed well. */
[data-k="search"][data-skin="filled"] .k-box { background: var(--k-tint); border-radius: calc(var(--radius) * 0.75); }

/* Capsule: a raised pill on the page. */
[data-k="search"][data-skin="capsule"] .k-box { background: var(--surface); border-radius: 999px; box-shadow: var(--k-ring); padding-inline: calc(var(--s) * 2); }

/* Expanding icon: only the icon until it's used, then the whole width. */
[data-k="search"][data-skin="expand"] .k-box {
  inline-size: 44px; padding-inline: 12px; /* kit-ok: the 20px icon centred in the 44px target */ justify-self: end;
  background: var(--surface); border-radius: 999px; box-shadow: var(--k-ring); overflow: hidden;
}
[data-k="search"][data-skin="expand"] .k-box input { opacity: 0; }
[data-k="search"][data-skin="expand"]:is(:focus-within, [data-filled]) .k-box { inline-size: 100%; padding-inline: calc(var(--s) * 2); }
[data-k="search"][data-skin="expand"]:is(:focus-within, [data-filled]) .k-box input { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  [data-k="search"][data-skin="expand"] .k-box { transition: inline-size 220ms var(--ease), padding 220ms var(--ease); }
  [data-k="search"][data-skin="expand"] .k-box input { transition: opacity 150ms ease-out; }
}

/* Command bar: one big field, raised, with its key; results float under it. */
[data-k="search"][data-skin="command"] .k-box {
  min-block-size: 52px; padding-inline: calc(var(--s) * 2);
  background: var(--surface); border-radius: calc(var(--radius) * 1.25); box-shadow: var(--k-ring), var(--k-lift);
  font-size: calc(var(--k-fs) * 17);
}
[data-k="search"][data-skin="command"] .k-key {
  flex: none; display: none; min-inline-size: 24px; padding: 2px var(--k-inset); font: inherit; font-size: var(--k-tiny); text-align: center;
  color: var(--ink-2); border-radius: calc(var(--radius) * 0.5); box-shadow: var(--k-ring);
}
@media (hover: hover) { [data-k="search"][data-skin="command"] .k-box:not(:focus-within) .k-key { display: inline-block; } }
[data-k="search"][data-skin="command"] .k-results {
  position: absolute; z-index: 20; inset-inline: 0; inset-block-start: calc(100% + 6px);
  padding: var(--k-inset); background: var(--surface); border-radius: calc(var(--radius) * 1.25); box-shadow: var(--k-ring), var(--k-lift);
}

/* ── Text fields ──────────────────────────────────────────────────────────
   <div data-k="field"> <label class="k-label" for> <input class="k-input">
   (or a textarea) <p class="k-hint"> <p class="k-error" hidden>. A failing
   field has aria-invalid="true" and its error in aria-describedby. */

[data-k="field"]:is([data-skin="underline"], [data-skin="boxed"], [data-skin="filled"], [data-skin="floating"], [data-skin="pill"]) {
  position: relative; display: grid; gap: calc(var(--s) * 0.75); font-family: var(--font-body);
}
[data-k="field"]:is([data-skin="underline"], [data-skin="boxed"], [data-skin="filled"], [data-skin="floating"], [data-skin="pill"]) .k-label { font-size: var(--k-small); font-weight: 600; color: var(--ink); }
[data-k="field"]:is([data-skin="underline"], [data-skin="boxed"], [data-skin="filled"], [data-skin="floating"], [data-skin="pill"]) .k-input {
  inline-size: 100%; min-block-size: 44px; margin: 0;
  padding: calc(var(--s) * 1.25) calc(var(--s) * 1.5);
  font: inherit; font-size: max(16px, var(--body-size)); /* kit-ok: 16px stops a phone zooming into the field (type) */ line-height: 1.35; color: var(--ink);
  background: none; border: 0; border-radius: 0; outline: none; appearance: none; -webkit-appearance: none;
  transition-property: box-shadow, background-color; transition-duration: 150ms; transition-timing-function: ease-out;
}
[data-k="field"]:is([data-skin="underline"], [data-skin="boxed"], [data-skin="filled"], [data-skin="floating"], [data-skin="pill"]) textarea.k-input { min-block-size: calc(var(--s) * 12); resize: vertical; }
[data-k="field"]:is([data-skin="underline"], [data-skin="boxed"], [data-skin="filled"], [data-skin="floating"], [data-skin="pill"]) .k-input::placeholder { color: var(--ink-2); opacity: 1; }
[data-k="field"]:is([data-skin="underline"], [data-skin="boxed"], [data-skin="filled"], [data-skin="floating"], [data-skin="pill"]) .k-hint { margin: 0; font-size: var(--k-tiny); color: var(--ink-2); text-wrap: pretty; }
[data-k="field"]:is([data-skin="underline"], [data-skin="boxed"], [data-skin="filled"], [data-skin="floating"], [data-skin="pill"]) .k-error { margin: 0; font-size: var(--k-tiny); font-weight: 600; color: var(--danger); text-wrap: pretty; }
[data-k="field"]:is([data-skin="underline"], [data-skin="boxed"], [data-skin="filled"], [data-skin="floating"], [data-skin="pill"]) .k-error[hidden] { display: none; }

/* Underline: a rule to write on; focus deepens it to the accent. */
[data-k="field"][data-skin="underline"] .k-input { padding-inline: 0; box-shadow: inset 0 -1px 0 color-mix(in oklab, var(--ink) 40%, transparent); }
[data-k="field"][data-skin="underline"] .k-input:focus-visible { box-shadow: inset 0 -2px 0 var(--accent); }
[data-k="field"][data-skin="underline"] .k-input[aria-invalid="true"] { box-shadow: inset 0 -2px 0 var(--danger); }

/* Boxed: a bordered box (borders are right for inputs, better-ui). */
[data-k="field"][data-skin="boxed"] .k-input { background: var(--surface); border-radius: calc(var(--radius) * 0.75); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ink) 28%, transparent); }
[data-k="field"][data-skin="boxed"] .k-input:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
[data-k="field"][data-skin="boxed"] .k-input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--danger); }

/* Filled: a recessed well, no outline until focus. */
[data-k="field"][data-skin="filled"] .k-input { background: var(--k-tint); border-radius: calc(var(--radius) * 0.75); }
[data-k="field"][data-skin="filled"] .k-input:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); background: var(--surface); }
[data-k="field"][data-skin="filled"] .k-input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--danger); }

/* Floating label: the label sits in the box and rises when it's used. */
[data-k="field"][data-skin="floating"] { grid-template-columns: minmax(0, 1fr); }
[data-k="field"][data-skin="floating"] .k-label,
[data-k="field"][data-skin="floating"] .k-input { grid-area: 1 / 1; }
[data-k="field"][data-skin="floating"] .k-input {
  min-block-size: 56px; padding-block: calc(var(--s) * 2.75) calc(var(--s) * 0.75);
  background: var(--surface); border-radius: calc(var(--radius) * 0.75);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ink) 28%, transparent);
}
[data-k="field"][data-skin="floating"] .k-input:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
[data-k="field"][data-skin="floating"] .k-input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--danger); }
[data-k="field"][data-skin="floating"] .k-input::placeholder { opacity: 0; }
[data-k="field"][data-skin="floating"] .k-input:focus::placeholder { opacity: 1; }
[data-k="field"][data-skin="floating"] .k-label {
  z-index: 1; align-self: start; margin-block-start: 17px; /* kit-ok: centred in the 56px box */ margin-inline-start: calc(var(--s) * 1.5);
  font-weight: 400; font-size: max(16px, var(--body-size)); /* kit-ok: 16px stops a phone zooming into the field (type) */ color: var(--ink-2);
  pointer-events: none; transform-origin: 0 0;
}
[data-k="field"][data-skin="floating"]:has(.k-input:focus, .k-input:not(:placeholder-shown)) .k-label {
  translate: 0 -10px; scale: 0.8; font-weight: 600; color: var(--ink);
}
@media (prefers-reduced-motion: no-preference) {
  [data-k="field"][data-skin="floating"] .k-label { transition: translate 150ms ease-out, scale 150ms ease-out, color 150ms ease-out; }
}
[data-k="field"][data-skin="floating"] :is(.k-hint, .k-error) { grid-column: 1; }

/* Pill: a capsule, for short single-line answers. */
[data-k="field"][data-skin="pill"] .k-input { padding-inline: calc(var(--s) * 2); background: var(--surface); border-radius: 999px; box-shadow: var(--k-ring); }
[data-k="field"][data-skin="pill"] textarea.k-input { border-radius: calc(var(--radius) * 1.25); }
[data-k="field"][data-skin="pill"] .k-input:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
[data-k="field"][data-skin="pill"] .k-input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--danger); }
[data-k="field"][data-skin="pill"] :is(.k-label, .k-hint, .k-error) { padding-inline: calc(var(--s) * 2); }

/* ── Selects and menus ────────────────────────────────────────────────────
   <div data-k="select"> <label class="k-label" for> <select class="k-native">
   The native select is the value. behaviors.js builds the other skins' parts
   from it (a trigger, a listbox, a segmented radio group, a combobox) and
   keeps them in step, so every skin submits the same form. */

[data-k="select"]:is([data-skin="native"], [data-skin="dropdown"], [data-skin="sheet"], [data-skin="segmented"], [data-skin="combobox"]) {
  position: relative; display: grid; gap: calc(var(--s) * 0.75); font-family: var(--font-body);
}
[data-k="select"]:is([data-skin="native"], [data-skin="dropdown"], [data-skin="sheet"], [data-skin="segmented"], [data-skin="combobox"]) .k-label { font-size: var(--k-small); font-weight: 600; color: var(--ink); }
[data-k="select"]:is([data-skin="native"], [data-skin="dropdown"], [data-skin="sheet"], [data-skin="segmented"], [data-skin="combobox"]) :is(.k-native, .k-trigger, .k-combo) {
  inline-size: 100%; min-block-size: 44px; margin: 0; padding: 0 calc(var(--s) * 5) 0 calc(var(--s) * 1.5);
  font: inherit; font-size: max(16px, var(--body-size)); /* kit-ok: 16px stops a phone zooming into the field (type) */ color: var(--ink); text-align: start;
  background: var(--surface); border: 0; border-radius: calc(var(--radius) * 0.75);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ink) 28%, transparent);
  appearance: none; -webkit-appearance: none; cursor: pointer;
}
[data-k="select"]:is([data-skin="native"], [data-skin="dropdown"], [data-skin="sheet"], [data-skin="segmented"], [data-skin="combobox"]) :is(.k-native, .k-trigger, .k-combo):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* The chevron, drawn in the text's colour. */
[data-k="select"]:is([data-skin="native"], [data-skin="dropdown"], [data-skin="sheet"], [data-skin="combobox"])::after {
  content: ""; position: absolute; inset-inline-end: calc(var(--s) * 1.5); inset-block-end: 14px;
  inline-size: 16px; block-size: 16px; background: var(--ink-2); pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E") center / contain no-repeat;
}
[data-k="select"]:is([data-skin="native"], [data-skin="dropdown"], [data-skin="sheet"], [data-skin="segmented"], [data-skin="combobox"]) :is(.k-trigger, .k-list, .k-seg, .k-combo, .k-scrim) { display: none; }
[data-k="select"]:is([data-skin="dropdown"], [data-skin="sheet"], [data-skin="segmented"], [data-skin="combobox"]) .k-native { display: none; }
[data-k="select"]:is([data-skin="native"], [data-skin="dropdown"], [data-skin="sheet"], [data-skin="segmented"], [data-skin="combobox"]) .k-list {
  position: absolute; z-index: 20; inset-inline: 0; inset-block-start: calc(100% + 6px);
  flex-direction: column; gap: 2px; margin: 0; padding: var(--k-inset); list-style: none;
  max-block-size: min(20rem, 50dvh); overflow: auto; overscroll-behavior: contain;
  background: var(--surface); border-radius: calc(var(--radius) * 0.75 + var(--k-inset)); box-shadow: var(--k-ring), var(--k-lift);
}
[data-k="select"]:is([data-skin="native"], [data-skin="dropdown"], [data-skin="sheet"], [data-skin="segmented"], [data-skin="combobox"]) .k-list > [role="option"] {
  display: flex; align-items: center; justify-content: space-between; gap: calc(var(--s) * 1);
  min-block-size: 44px; padding-inline: calc(var(--s) * 1.5); border-radius: calc(var(--radius) * 0.75); cursor: pointer;
}
[data-k="select"]:is([data-skin="native"], [data-skin="dropdown"], [data-skin="sheet"], [data-skin="segmented"], [data-skin="combobox"]) .k-list > [role="option"][data-active] { background: var(--k-tint-2); }
[data-k="select"]:is([data-skin="native"], [data-skin="dropdown"], [data-skin="sheet"], [data-skin="segmented"], [data-skin="combobox"]) .k-list > [role="option"][aria-selected="true"] { font-weight: 600; }
[data-k="select"]:is([data-skin="native"], [data-skin="dropdown"], [data-skin="sheet"], [data-skin="segmented"], [data-skin="combobox"]) .k-list > [role="option"][aria-selected="true"]::after {
  content: ""; inline-size: 16px; block-size: 16px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Native: the platform's own picker, styled to sit with the fields. */
/* (nothing more: the shared rules are the whole skin) */

/* Dropdown panel: a button that opens a list under it. */
[data-k="select"][data-skin="dropdown"] .k-trigger { display: flex; align-items: center; }
[data-k="select"][data-skin="dropdown"][data-open] .k-list { display: flex; }

/* Sheet on a phone: the list rises from the bottom on a phone, and drops
   down under the button on a desktop. */
[data-k="select"][data-skin="sheet"] .k-trigger { display: flex; align-items: center; }
[data-k="select"][data-skin="sheet"][data-open] .k-list { display: flex; }
@media (max-width: 40rem) {
  [data-k="select"][data-skin="sheet"][data-open] .k-scrim { display: block; position: fixed; z-index: 39; inset: 0; background: rgb(0 0 0 / 0.3); }
  [data-k="select"][data-skin="sheet"] .k-list {
    position: fixed; z-index: 40; inset-inline: 0; inset-block: auto 0; max-block-size: 70dvh;
    padding: calc(var(--s) * 1.5) calc(var(--s) * 1) max(calc(var(--s) * 1.5), env(safe-area-inset-bottom));
    border-radius: calc(var(--radius) * 1.5) calc(var(--radius) * 1.5) 0 0;
  }
}

/* Segmented: for a few choices, all of them shown, one picked. */
[data-k="select"][data-skin="segmented"] .k-seg {
  display: flex; padding: var(--k-track); gap: 2px; border-radius: 999px; background: var(--k-tint);
}
[data-k="select"][data-skin="segmented"] .k-seg > [role="radio"] {
  position: relative; flex: 1 1 0; min-block-size: 38px; min-inline-size: 44px; padding-inline: calc(var(--s) * 1.25);
  font: inherit; font-size: var(--k-small); color: var(--ink-2); background: none; border: 0; border-radius: 999px; cursor: pointer;
  transition-property: scale, background-color, color, box-shadow; transition-duration: 150ms; transition-timing-function: ease-out;
}
[data-k="select"][data-skin="segmented"] .k-seg > [role="radio"]:active { scale: 0.96; }
/* The capsule is 38px; the target reaches the track's edge (44px). */
[data-k="select"][data-skin="segmented"] .k-seg > [role="radio"]::before { content: ""; position: absolute; inset: calc(var(--k-track) * -1) -1px; }
[data-k="select"][data-skin="segmented"] .k-seg > [role="radio"][aria-checked="true"] { color: var(--ink); font-weight: 600; background: var(--surface); box-shadow: var(--k-ring), var(--k-lift); }
[data-k="select"][data-skin="segmented"] .k-seg > [role="radio"]:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Combobox: type to narrow a long list. */
[data-k="select"][data-skin="combobox"] .k-combo { display: block; cursor: text; }
[data-k="select"][data-skin="combobox"][data-open] .k-list { display: flex; }

/* ── Buttons ──────────────────────────────────────────────────────────────
   <button data-k="button" data-role="primary|secondary|quiet|danger">
   An <a> that goes somewhere may wear it too. Icons are <i data-icon>. */

[data-k="button"]:is([data-skin="filled"], [data-skin="outline"], [data-skin="tinted"], [data-skin="text"], [data-skin="capsule"]) {
  --k-c: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--s) * 0.75);
  min-block-size: 44px; min-inline-size: 44px; padding-inline: calc(var(--s) * 2);
  font: inherit; font-family: var(--font-body); font-size: calc(var(--k-fs) * 15); font-weight: 600; line-height: 1.2;
  color: var(--k-c); text-decoration: none; white-space: nowrap;
  background: none; border: 0; border-radius: calc(var(--radius) * 0.75); cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition-property: scale, background-color, color, box-shadow;
  transition-duration: 150ms; transition-timing-function: ease-out;
}
[data-k="button"]:is([data-skin="filled"], [data-skin="outline"], [data-skin="tinted"], [data-skin="text"], [data-skin="capsule"]):active:not(:disabled, [aria-disabled="true"]) { scale: 0.96; }
[data-k="button"]:is([data-skin="filled"], [data-skin="outline"], [data-skin="tinted"], [data-skin="text"], [data-skin="capsule"]):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[data-k="button"]:is([data-skin="filled"], [data-skin="outline"], [data-skin="tinted"], [data-skin="text"], [data-skin="capsule"]):is(:disabled, [aria-disabled="true"]) { opacity: 0.45; cursor: default; }
[data-k="button"]:is([data-skin="filled"], [data-skin="outline"], [data-skin="tinted"], [data-skin="text"], [data-skin="capsule"])[data-role="quiet"] { --k-c: var(--ink-2); font-weight: 500; }
[data-k="button"]:is([data-skin="filled"], [data-skin="outline"], [data-skin="tinted"], [data-skin="text"], [data-skin="capsule"])[data-role="danger"] { --k-c: var(--danger); }
/* An icon beside a word sits a little tighter on its side (better-ui, optical alignment). */
[data-k="button"]:is([data-skin="filled"], [data-skin="outline"], [data-skin="tinted"], [data-skin="capsule"]):has(> [data-icon]:first-child) { padding-inline-start: calc(var(--s) * 2 - 2px); }

/* Filled: the one solid control. Primary is ink on the ground. */
[data-k="button"][data-skin="filled"]:not([data-role]),
[data-k="button"][data-skin="filled"][data-role="primary"] { background: var(--ink); color: var(--bg); }
[data-k="button"][data-skin="filled"][data-role="secondary"] { background: var(--surface); box-shadow: var(--k-ring), var(--k-lift); }
[data-k="button"][data-skin="filled"][data-role="danger"] { background: var(--danger); color: var(--bg); }

/* Outline: a drawn edge in the role's colour. */
[data-k="button"][data-skin="outline"]:not([data-role="quiet"]) { box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--k-c) 70%, transparent); }
[data-k="button"][data-skin="outline"][data-role="secondary"] { box-shadow: inset 0 0 0 1px var(--line); }

/* Tinted: a wash of the role's colour, ink on it. */
[data-k="button"][data-skin="tinted"]:not([data-role="quiet"]) { background: color-mix(in oklab, var(--accent) 16%, transparent); color: var(--ink); }
[data-k="button"][data-skin="tinted"][data-role="secondary"] { background: var(--k-tint-2); }
[data-k="button"][data-skin="tinted"][data-role="danger"] { background: color-mix(in oklab, var(--danger) 14%, transparent); color: var(--danger); }

/* Text: just the words; the primary in ink, underlined on hover. */
[data-k="button"][data-skin="text"] { padding-inline: calc(var(--s) * 1); }
[data-k="button"][data-skin="text"][data-role="secondary"] { font-weight: 500; }
@media (hover: hover) { [data-k="button"][data-skin="text"]:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; } }

/* Capsule: filled, fully round, a little wider. */
[data-k="button"][data-skin="capsule"] { border-radius: 999px; padding-inline: calc(var(--s) * 2.5); }
[data-k="button"][data-skin="capsule"]:not([data-role]),
[data-k="button"][data-skin="capsule"][data-role="primary"] { background: var(--ink); color: var(--bg); }
[data-k="button"][data-skin="capsule"][data-role="secondary"] { background: var(--surface); box-shadow: var(--k-ring); }
[data-k="button"][data-skin="capsule"][data-role="danger"] { background: var(--danger); color: var(--bg); }

/* ── Toggles and checks ───────────────────────────────────────────────────
   <label data-k="toggle"> <input class="k-input" type="checkbox|radio"> (a
   switch adds role="switch") <span class="k-mark"> <span class="k-text">
   or <button data-k="toggle" aria-pressed> <span class="k-mark">
   <span class="k-text"> (behaviors.js flips aria-pressed). */

[data-k="toggle"]:is([data-skin="circle"], [data-skin="square"], [data-skin="switch"], [data-skin="pressed"], [data-skin="tick"]) {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--s) * 1.25);
  min-block-size: 44px; min-inline-size: 44px; margin: 0; padding: 0;
  font: inherit; color: var(--ink); text-align: start; background: none; border: 0; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
[data-k="toggle"]:is([data-skin="circle"], [data-skin="square"], [data-skin="switch"], [data-skin="pressed"], [data-skin="tick"]) > .k-input {
  position: absolute; inline-size: 1px; block-size: 1px; margin: 0; opacity: 0; pointer-events: none;
}
[data-k="toggle"]:is([data-skin="circle"], [data-skin="square"], [data-skin="switch"], [data-skin="pressed"], [data-skin="tick"]) > .k-mark {
  position: relative; flex: none; display: inline-grid; place-items: center;
  color: var(--bg);
  transition-property: background-color, box-shadow, scale; transition-duration: 150ms; transition-timing-function: ease-out;
}
/* The tick, drawn in the mark's colour; it grows in from a quarter, the
   better-ui icon values. */
[data-k="toggle"]:is([data-skin="circle"], [data-skin="square"], [data-skin="pressed"], [data-skin="tick"]) > .k-mark::after {
  content: ""; inline-size: 62%; block-size: 62%; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0; scale: 0.25;
  transition-property: opacity, scale; transition-duration: 150ms; transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}
[data-k="toggle"]:is([data-skin="circle"], [data-skin="square"], [data-skin="pressed"], [data-skin="tick"]):is([aria-pressed="true"], :has(> .k-input:checked)) > .k-mark::after { opacity: 1; scale: 1; }
[data-k="toggle"]:is([data-skin="circle"], [data-skin="square"], [data-skin="switch"], [data-skin="pressed"], [data-skin="tick"]):is(:focus-visible, :has(> .k-input:focus-visible)) > .k-mark { outline: 2px solid var(--accent); outline-offset: 2px; }
[data-k="toggle"]:is([data-skin="circle"], [data-skin="square"], [data-skin="switch"], [data-skin="pressed"], [data-skin="tick"]):focus-visible { outline: none; }
[data-k="toggle"]:is([data-skin="circle"], [data-skin="square"], [data-skin="switch"], [data-skin="pressed"], [data-skin="tick"]):is(:disabled, [aria-disabled="true"], :has(> .k-input:disabled)) { opacity: 0.45; cursor: default; }
[data-k="toggle"]:is([data-skin="circle"], [data-skin="square"], [data-skin="switch"], [data-skin="pressed"], [data-skin="tick"]) > .k-text { text-wrap: pretty; }

/* Circle check: an open circle for anything to do; filled with a tick when done. */
[data-k="toggle"][data-skin="circle"] > .k-mark { inline-size: 20px; block-size: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ink-2); }
[data-k="toggle"][data-skin="circle"]:is([aria-pressed="true"], :has(> .k-input:checked)) > .k-mark { background: var(--ink); box-shadow: none; }

/* Square check: a box, for forms and lists of settings. */
[data-k="toggle"][data-skin="square"] > .k-mark { inline-size: 20px; block-size: 20px; border-radius: min(6px, calc(var(--radius) * 0.4)); /* kit-ok: a check box stays a box */ box-shadow: inset 0 0 0 1.5px var(--ink-2); }
[data-k="toggle"][data-skin="square"]:is([aria-pressed="true"], :has(> .k-input:checked)) > .k-mark { background: var(--accent); box-shadow: none; }

/* Switch: on and off, for settings that take effect at once. */
[data-k="toggle"][data-skin="switch"] { justify-content: space-between; }
[data-k="toggle"][data-skin="switch"] > .k-mark { order: 2; inline-size: 44px; block-size: 26px; border-radius: 999px; background: var(--k-tint-2); box-shadow: inset 0 0 0 1px var(--line); place-items: center start; }
[data-k="toggle"][data-skin="switch"] > .k-mark::before {
  content: ""; inline-size: 22px; block-size: 22px; margin-inline-start: 2px; border-radius: 50%;
  background: var(--surface); box-shadow: 0 1px 3px rgb(0 0 0 / 0.25);
}
[data-k="toggle"][data-skin="switch"]:is([aria-pressed="true"], :has(> .k-input:checked)) > .k-mark { background: var(--accent); box-shadow: none; }
[data-k="toggle"][data-skin="switch"]:is([aria-pressed="true"], :has(> .k-input:checked)) > .k-mark::before { translate: 18px 0; }
@media (prefers-reduced-motion: no-preference) { [data-k="toggle"][data-skin="switch"] > .k-mark::before { transition: translate 200ms var(--ease); } }

/* Pressed button: the whole control looks like a button and stays down. */
[data-k="toggle"][data-skin="pressed"] {
  gap: calc(var(--s) * 0.75); padding-inline: calc(var(--s) * 1.5);
  font-size: calc(var(--k-fs) * 15); font-weight: 500;
  border-radius: calc(var(--radius) * 0.75); box-shadow: var(--k-ring);
  transition-property: scale, background-color, color, box-shadow; transition-duration: 150ms; transition-timing-function: ease-out;
}
[data-k="toggle"][data-skin="pressed"]:active { scale: 0.96; }
[data-k="toggle"][data-skin="pressed"] > .k-mark { inline-size: 16px; block-size: 16px; color: inherit; }
[data-k="toggle"][data-skin="pressed"]:not([aria-pressed="true"]):not(:has(> .k-input:checked)) > .k-mark { display: none; }
[data-k="toggle"][data-skin="pressed"]:is([aria-pressed="true"], :has(> .k-input:checked)) { background: var(--ink); color: var(--bg); box-shadow: none; }

/* Row tick: the words first, a tick at the end when it's on; the whole row
   is the target. */
[data-k="toggle"][data-skin="tick"] { display: flex; inline-size: 100%; justify-content: space-between; }
[data-k="toggle"][data-skin="tick"] > .k-mark { order: 2; inline-size: 20px; block-size: 20px; color: var(--accent); }

/* ── List rows ────────────────────────────────────────────────────────────
   <li data-k="row"> <span class="k-lead"> (a time, a date, a number)
   <span class="k-mark"> (a toggle) <span class="k-lines"> <span class="k-title">
   <span class="k-sub"> <span class="k-meta"> <span class="k-note"> </span>
   <span class="k-trail"> (a link or an action). Every part but the lines
   is optional; the columns line up down the list. */

[data-k="row"]:is([data-skin="ruled"], [data-skin="spaced"], [data-skin="twocol"], [data-skin="cards"], [data-skin="compact"]) {
  --k-lh: calc(var(--k-fs) * 23);
  position: relative; display: flex; align-items: baseline; gap: calc(var(--s) * 1.5);
  list-style: none; margin: 0; padding-block: var(--gap-in);
  font-family: var(--font-body); line-height: var(--k-lh);
}
[data-k="row"]:is([data-skin="ruled"], [data-skin="spaced"], [data-skin="twocol"], [data-skin="cards"], [data-skin="compact"]) > .k-lead {
  flex: none; display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px;
  /* As wide as "10:30 PM" at least, so the names line up down a list. */
  min-inline-size: calc(var(--k-fs) * 60);
  color: var(--ink-2); font-size: var(--k-tiny); font-variant-numeric: tabular-nums; white-space: nowrap;
}
[data-k="row"]:is([data-skin="ruled"], [data-skin="spaced"], [data-skin="twocol"], [data-skin="cards"], [data-skin="compact"]) > .k-mark {
  flex: none; align-self: flex-start; display: grid; place-items: center;
  /* A 20px column, there even when a row has nothing to mark, so the names
     line up down the list; the mark's 44px target reaches into the gaps. */
  inline-size: 20px; min-block-size: 44px;
  margin-block: calc((var(--k-lh) - 44px) / 2); /* kit-ok: the 44px target centred on the first line */
}
[data-k="row"]:is([data-skin="ruled"], [data-skin="spaced"], [data-skin="twocol"], [data-skin="cards"], [data-skin="compact"]) > .k-mark > * { margin-inline: -12px; /* kit-ok: a 44px target over the 20px column */ }
[data-k="row"]:is([data-skin="ruled"], [data-skin="spaced"], [data-skin="twocol"], [data-skin="cards"], [data-skin="compact"]) > .k-lines {
  flex: 1 1 auto; min-inline-size: 0; display: flex; flex-direction: column;
}
[data-k="row"]:is([data-skin="ruled"], [data-skin="spaced"], [data-skin="twocol"], [data-skin="cards"], [data-skin="compact"]) .k-title { color: var(--ink); font-weight: 500; text-wrap: pretty; overflow-wrap: anywhere; }
[data-k="row"]:is([data-skin="ruled"], [data-skin="spaced"], [data-skin="twocol"], [data-skin="cards"], [data-skin="compact"]) :is(.k-sub, .k-meta) { color: var(--ink-2); font-size: var(--k-small); line-height: 1.4; text-wrap: pretty; }
[data-k="row"]:is([data-skin="ruled"], [data-skin="spaced"], [data-skin="twocol"], [data-skin="cards"], [data-skin="compact"]) .k-note {
  margin-block-start: calc(var(--s) * 0.75); padding-inline-start: calc(var(--s) * 1.25);
  color: var(--ink); font-size: var(--k-small); line-height: 1.45; text-wrap: pretty;
  box-shadow: inset 1px 0 0 var(--line);
}
[data-k="row"]:is([data-skin="ruled"], [data-skin="spaced"], [data-skin="twocol"], [data-skin="cards"], [data-skin="compact"]) > .k-trail {
  flex: none; align-self: flex-start; margin-inline-start: auto; margin-block: calc((var(--k-lh) - 44px) / 2); /* kit-ok: the 44px target centred on the first line */
  display: inline-flex; align-items: center; gap: calc(var(--s) * 0.5); min-block-size: 44px;
  font-size: var(--k-small); color: var(--ink-2);
}
[data-k="row"]:is([data-skin="ruled"], [data-skin="spaced"], [data-skin="twocol"], [data-skin="cards"], [data-skin="compact"]) > .k-trail a { display: inline-flex; align-items: center; min-block-size: 44px; min-inline-size: 44px; justify-content: center; color: var(--accent); font-weight: 600; text-decoration: none; }

/* Ruled: a hairline between rows. */
[data-k="row"][data-skin="ruled"] { box-shadow: inset 0 -1px 0 var(--line); }

/* Spaced: no lines at all; more air carries the grouping. */
[data-k="row"][data-skin="spaced"] { padding-block: calc(var(--gap-in) * 1.25); }

/* Two columns: the time in its own column, like a planner's margin. */
[data-k="row"][data-skin="twocol"] { gap: calc(var(--s) * 2); }
[data-k="row"][data-skin="twocol"] > .k-lead { inline-size: calc(var(--k-fs) * 64); text-align: end; align-items: flex-end; }
[data-k="row"][data-skin="twocol"] .k-title { font-weight: 600; }

/* Cards: each row a raised surface of its own. */
[data-k="row"][data-skin="cards"] {
  margin-block-end: calc(var(--gap-in) * 0.75); padding: calc(var(--s) * 1.5) calc(var(--s) * 2);
  background: var(--surface); border-radius: var(--radius); box-shadow: var(--k-ring), var(--k-lift);
}

/* Compact: one line each; the name and where it is side by side. */
[data-k="row"][data-skin="compact"] { min-block-size: 44px; padding-block: calc(var(--gap-in) * 0.5); box-shadow: inset 0 -1px 0 var(--line); } /* one line, but never less than a target */
[data-k="row"][data-skin="compact"] > .k-lines { flex-direction: row; align-items: baseline; gap: calc(var(--s) * 1); }
[data-k="row"][data-skin="compact"] .k-title { flex: none; max-inline-size: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-k="row"][data-skin="compact"] .k-sub { flex: 1 1 auto; min-inline-size: 2em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-k="row"][data-skin="compact"] .k-meta { flex: none; white-space: nowrap; }
[data-k="row"][data-skin="compact"] .k-note { display: none; }

/* ── Tables ───────────────────────────────────────────────────────────────
   <div data-k="table"> <table> <caption> <thead> <th scope="col"> <tbody>
   <tr> <th scope="row"> <td data-label="Amount" class="k-num">. The label
   on each cell is what the phone's stacked skin shows beside it. Grouped
   rows: a <tbody> per group, opened by <tr class="k-group"><th colspan
   scope="rowgroup">. The table scrolls inside its box, never the page. */

[data-k="table"]:is([data-skin="ruled"], [data-skin="zebra"], [data-skin="ledger"], [data-skin="cards"], [data-skin="grouped"]) {
  max-inline-size: 100%; overflow-x: auto; overscroll-behavior-x: contain; font-family: var(--font-body);
}
[data-k="table"]:is([data-skin="ruled"], [data-skin="zebra"], [data-skin="ledger"], [data-skin="cards"], [data-skin="grouped"]) table {
  inline-size: 100%; border-collapse: collapse; font-size: var(--k-small); font-variant-numeric: tabular-nums; color: var(--ink);
}
[data-k="table"]:is([data-skin="ruled"], [data-skin="zebra"], [data-skin="ledger"], [data-skin="cards"], [data-skin="grouped"]) caption {
  caption-side: top; text-align: start; padding-block-end: var(--gap-in); font-family: var(--font-display); font-weight: var(--display-weight, 500); font-size: calc(var(--k-fs) * 18); text-wrap: balance;
}
[data-k="table"]:is([data-skin="ruled"], [data-skin="zebra"], [data-skin="ledger"], [data-skin="cards"], [data-skin="grouped"]) :is(th, td) {
  padding: calc(var(--s) * 1.25) calc(var(--s) * 1.5); text-align: start; vertical-align: top;
}
[data-k="table"]:is([data-skin="ruled"], [data-skin="zebra"], [data-skin="ledger"], [data-skin="cards"], [data-skin="grouped"]) thead th { color: var(--ink-2); font-weight: 600; font-size: var(--k-tiny); white-space: nowrap; }
[data-k="table"]:is([data-skin="ruled"], [data-skin="zebra"], [data-skin="ledger"], [data-skin="cards"], [data-skin="grouped"]) tbody th { font-weight: 500; }
[data-k="table"]:is([data-skin="ruled"], [data-skin="zebra"], [data-skin="ledger"], [data-skin="cards"], [data-skin="grouped"]) .k-num { text-align: end; white-space: nowrap; }
[data-k="table"]:is([data-skin="ruled"], [data-skin="zebra"], [data-skin="ledger"], [data-skin="cards"], [data-skin="grouped"]) tr.k-group > th { padding-block: calc(var(--s) * 1.5) calc(var(--s) * 0.75); color: var(--ink-2); font-size: var(--k-tiny); font-weight: 600; }
[data-k="table"]:is([data-skin="ruled"], [data-skin="zebra"], [data-skin="ledger"], [data-skin="cards"], [data-skin="grouped"]) :is(th, td):first-child { padding-inline-start: 0; }
[data-k="table"]:is([data-skin="ruled"], [data-skin="zebra"], [data-skin="ledger"], [data-skin="cards"], [data-skin="grouped"]) :is(th, td):last-child { padding-inline-end: 0; }

/* Ruled: a hairline under every row. */
[data-k="table"][data-skin="ruled"] tr { box-shadow: inset 0 -1px 0 var(--line); }

/* Zebra: alternate rows washed, no lines; for wide tables read across. */
[data-k="table"][data-skin="zebra"] :is(th, td):first-child { padding-inline-start: calc(var(--s) * 1.5); }
[data-k="table"][data-skin="zebra"] :is(th, td):last-child { padding-inline-end: calc(var(--s) * 1.5); }
[data-k="table"][data-skin="zebra"] tbody tr:nth-child(odd of :not(.k-group)) > * { background: var(--k-tint); }
[data-k="table"][data-skin="zebra"] tbody tr:nth-child(odd of :not(.k-group)) > :first-child { border-start-start-radius: calc(var(--radius) * 0.5); border-end-start-radius: calc(var(--radius) * 0.5); }
[data-k="table"][data-skin="zebra"] tbody tr:nth-child(odd of :not(.k-group)) > :last-child { border-start-end-radius: calc(var(--radius) * 0.5); border-end-end-radius: calc(var(--radius) * 0.5); }

/* Ledger: an ink rule under the heads, hairlines under the rows, figures
   in columns with their decimals lined up. */
[data-k="table"][data-skin="ledger"] table { font-feature-settings: "tnum" 1, "lnum" 1; }
[data-k="table"][data-skin="ledger"] thead tr { box-shadow: inset 0 -1px 0 var(--ink); }
[data-k="table"][data-skin="ledger"] tbody tr { box-shadow: inset 0 -1px 0 var(--line); }
[data-k="table"][data-skin="ledger"] tfoot tr { box-shadow: inset 0 1px 0 var(--ink); font-weight: 600; }
[data-k="table"][data-skin="ledger"] thead th { font-weight: 500; letter-spacing: 0.01em; }

/* Cards on a phone: each row a card with its labels; a ruled table on a desktop. */
[data-k="table"][data-skin="cards"] tr { box-shadow: inset 0 -1px 0 var(--line); }
@media (max-width: 40rem) {
  [data-k="table"][data-skin="cards"] { overflow: visible; }
  [data-k="table"][data-skin="cards"] :is(table, tbody, tr, th, td) { display: block; }
  [data-k="table"][data-skin="cards"] thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
  [data-k="table"][data-skin="cards"] tbody tr {
    display: grid; gap: calc(var(--s) * 0.5); margin-block-end: calc(var(--gap-in) * 0.75); padding: calc(var(--s) * 1.5) calc(var(--s) * 2);
    background: var(--surface); border-radius: var(--radius); box-shadow: var(--k-ring), var(--k-lift);
  }
  [data-k="table"][data-skin="cards"] tbody :is(th, td) { display: flex; justify-content: space-between; gap: calc(var(--s) * 2); padding: 0; text-align: end; }
  [data-k="table"][data-skin="cards"] tbody th { justify-content: start; text-align: start; font-size: max(16px, var(--body-size)); /* kit-ok: 16px stops a phone zooming into the field (type) */ }
  [data-k="table"][data-skin="cards"] tbody td[data-label]::before { content: attr(data-label); color: var(--ink-2); text-align: start; }
}

/* Grouped: a heading row for each group that stays put while its rows scroll. */
[data-k="table"][data-skin="grouped"] { overflow: visible; }
[data-k="table"][data-skin="grouped"] tbody tr:not(.k-group) { box-shadow: inset 0 -1px 0 var(--line); }
[data-k="table"][data-skin="grouped"] tr.k-group > th {
  position: sticky; inset-block-start: 0; z-index: 1;
  padding-block: calc(var(--s) * 1) calc(var(--s) * 0.75); padding-inline-start: 0;
  background: var(--bg); color: var(--ink-2); font-size: var(--k-tiny); font-weight: 600;
}
[data-k="table"][data-skin="grouped"] tbody + tbody tr.k-group > th { padding-block-start: calc(var(--gap-in) * 1.5); }

/* ── Cards ────────────────────────────────────────────────────────────────
   <article data-k="card"> <div class="k-media"><img alt></div> (optional)
   <header class="k-head"> <h3 class="k-title"> <p class="k-sub"> </header>
   <div class="k-body"> <footer class="k-actions">. Never a grid of
   identical icon-heading-text cards, never cards in cards (guardrails.bans). */

[data-k="card"]:is([data-skin="flat"], [data-skin="raised"], [data-skin="outlined"], [data-skin="photo"], [data-skin="split"]) {
  --k-pad: calc(var(--s) * 2);
  position: relative; display: flex; flex-direction: column; gap: calc(var(--gap-in) * 0.75);
  padding: var(--k-pad); border-radius: var(--radius); color: var(--ink); font-family: var(--font-body);
  overflow: hidden; isolation: isolate;
}
[data-k="card"]:is([data-skin="flat"], [data-skin="raised"], [data-skin="outlined"], [data-skin="photo"], [data-skin="split"]) .k-media {
  margin: 0; aspect-ratio: 16 / 9; overflow: hidden; background: var(--k-tint);
  border-radius: max(0px, calc(var(--radius) - var(--k-pad)));
}
[data-k="card"]:is([data-skin="flat"], [data-skin="raised"], [data-skin="outlined"], [data-skin="photo"], [data-skin="split"]) .k-media > img {
  display: block; inline-size: 100%; block-size: 100%; object-fit: cover; outline: 1px solid rgb(0 0 0 / 0.1); outline-offset: -1px;
}
[data-k="card"]:is([data-skin="flat"], [data-skin="raised"], [data-skin="outlined"], [data-skin="photo"], [data-skin="split"]) .k-head { display: grid; gap: 2px; }
[data-k="card"]:is([data-skin="flat"], [data-skin="raised"], [data-skin="outlined"], [data-skin="photo"], [data-skin="split"]) .k-title { margin: 0; font-family: var(--font-display); font-weight: var(--display-weight, 500); font-size: calc(var(--k-fs) * 19); line-height: 1.25; text-wrap: balance; }
[data-k="card"]:is([data-skin="flat"], [data-skin="raised"], [data-skin="outlined"], [data-skin="photo"], [data-skin="split"]) .k-sub { margin: 0; color: var(--ink-2); font-size: var(--k-small); }
[data-k="card"]:is([data-skin="flat"], [data-skin="raised"], [data-skin="outlined"], [data-skin="photo"], [data-skin="split"]) .k-body { font-size: calc(var(--k-fs) * 15); line-height: 1.5; text-wrap: pretty; }
[data-k="card"]:is([data-skin="flat"], [data-skin="raised"], [data-skin="outlined"], [data-skin="photo"], [data-skin="split"]) .k-body > :first-child { margin-block-start: 0; }
[data-k="card"]:is([data-skin="flat"], [data-skin="raised"], [data-skin="outlined"], [data-skin="photo"], [data-skin="split"]) .k-body > :last-child { margin-block-end: 0; }
[data-k="card"]:is([data-skin="flat"], [data-skin="raised"], [data-skin="outlined"], [data-skin="photo"], [data-skin="split"]) .k-actions { display: flex; flex-wrap: wrap; gap: calc(var(--s) * 1); margin-block-start: auto; }

/* Flat: a lighter surface, no edge, no shadow. */
[data-k="card"][data-skin="flat"] { background: var(--surface); }

/* Raised: the surface lifted off the ground, lit by the key light. */
[data-k="card"][data-skin="raised"] { background: var(--surface); box-shadow: var(--k-ring), var(--k-lift); }

/* Outlined: on the ground itself, held by a hairline. */
[data-k="card"][data-skin="outlined"] { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }

/* Photo-filled: its photo is the ground, under a tint that keeps the text at 4.5:1. */
[data-k="card"][data-skin="photo"] { min-block-size: calc(var(--s) * 28); justify-content: flex-end; background: var(--surface); }
[data-k="card"][data-skin="photo"] .k-media { position: absolute; inset: 0; z-index: -2; aspect-ratio: auto; border-radius: 0; }
[data-k="card"][data-skin="photo"] .k-media > img { outline: 0; }
[data-k="card"][data-skin="photo"]::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to top, color-mix(in oklab, var(--surface) 92%, transparent) 30%, color-mix(in oklab, var(--surface) 55%, transparent));
}

/* Split: the picture beside the words on a desktop, above them on a phone. */
[data-k="card"][data-skin="split"] { background: var(--surface); box-shadow: var(--k-ring); }
@media (min-width: 40rem) {
  [data-k="card"][data-skin="split"] { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); grid-template-rows: auto 1fr auto; column-gap: calc(var(--s) * 2.5); row-gap: calc(var(--gap-in) * 0.75); }
  [data-k="card"][data-skin="split"] .k-media { grid-row: 1 / -1; aspect-ratio: auto; min-block-size: 100%; }
}

/* ── Section headers ──────────────────────────────────────────────────────
<header data-k="section"> <h2 class="k-title"> <span class="k-count">
   (how many, optional) <a|button class="k-action"> (optional). Never an
   eyebrow above a heading, never capitals (guardrails.bans). */

[data-k="section"]:is([data-skin="quiet"], [data-skin="large"], [data-skin="rule"], [data-skin="count"], [data-skin="inline"]) {
  display: flex; align-items: baseline; gap: calc(var(--s) * 1); flex-wrap: wrap;
  margin-block: var(--gap-out) var(--gap-in); font-family: var(--font-body);
}
[data-k="section"]:is([data-skin="quiet"], [data-skin="large"], [data-skin="rule"], [data-skin="count"], [data-skin="inline"]) .k-title { margin: 0; }
[data-k="section"]:is([data-skin="quiet"], [data-skin="large"], [data-skin="rule"], [data-skin="count"], [data-skin="inline"]) .k-title, [data-k="section"]:is([data-skin="quiet"], [data-skin="large"], [data-skin="rule"], [data-skin="count"], [data-skin="inline"]).k-title { color: var(--ink); text-wrap: balance; }
[data-k="section"]:is([data-skin="quiet"], [data-skin="large"], [data-skin="rule"], [data-skin="count"], [data-skin="inline"]) .k-count { color: var(--ink-2); font-size: var(--k-tiny); font-variant-numeric: tabular-nums; }
[data-k="section"]:is([data-skin="quiet"], [data-skin="large"], [data-skin="rule"], [data-skin="count"], [data-skin="inline"]) .k-action {
  margin-inline-start: auto; display: inline-flex; align-items: center; min-block-size: 44px; padding-inline: calc(var(--s) * 0.5);
  margin-block: -12px; /* kit-ok: a 44px target that doesn't push the heading apart */ font: inherit; font-size: var(--k-small); font-weight: 600; color: var(--accent); text-decoration: none; background: none; border: 0; cursor: pointer;
}
[data-k="section"]:is([data-skin="quiet"], [data-skin="large"], [data-skin="rule"], [data-skin="count"], [data-skin="inline"]) .k-action:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: calc(var(--radius) * 0.33); }

/* Quiet label: small, soft, sentence case; the list is the subject. */
[data-k="section"][data-skin="quiet"] .k-title, [data-k="section"][data-skin="quiet"].k-title { font-size: var(--k-small); font-weight: 600; color: var(--ink-2); }

/* Large title: the voice, big enough to be a chapter. */
[data-k="section"][data-skin="large"] .k-title, [data-k="section"][data-skin="large"].k-title { font-family: var(--font-display); font-weight: var(--display-weight, 500); font-size: calc(var(--k-fs) * 26); line-height: 1.15; }

/* Rule under: the title over a full-width hairline. */
[data-k="section"][data-skin="rule"] { padding-block-end: calc(var(--s) * 1); box-shadow: inset 0 -1px 0 var(--line); }
[data-k="section"][data-skin="rule"] .k-title, [data-k="section"][data-skin="rule"].k-title { font-size: calc(var(--k-fs) * 15); font-weight: 600; }

/* Count and title: how many, set large in figures, then what they are. */
[data-k="section"][data-skin="count"] .k-count { order: -1; font-family: var(--font-display); font-size: calc(var(--k-fs) * 26); line-height: 1; color: var(--ink); }
[data-k="section"][data-skin="count"] .k-title, [data-k="section"][data-skin="count"].k-title { font-size: calc(var(--k-fs) * 15); font-weight: 500; color: var(--ink-2); }

/* Inline with its action: the title and what you can do, on one line. */
[data-k="section"][data-skin="inline"] { flex-wrap: nowrap; justify-content: space-between; }
[data-k="section"][data-skin="inline"] .k-title, [data-k="section"][data-skin="inline"].k-title { font-family: var(--font-display); font-weight: var(--display-weight, 500); font-size: calc(var(--k-fs) * 19); }

/* ── Sheets and dialogs ───────────────────────────────────────────────────
   <dialog data-k="sheet" aria-labelledby> <div class="k-sheet">
   <header class="k-head"> <h2 class="k-title"> <button class="k-close"
   data-k-close aria-label="Close"> </header> <div class="k-body">
   <footer class="k-actions"> </div> </dialog>. Opened by any
   <button data-k-open="<id>">; behaviors.js opens it (modal, focus trapped
   by the platform) and puts focus back where it was. */

dialog[data-k="sheet"]:is([data-skin="bottom"], [data-skin="center"], [data-skin="side"], [data-skin="full"], [data-skin="popover"]) {
  --k-pad: calc(var(--s) * 2);
  padding: 0; border: 0; color: var(--ink); background: var(--surface);
  font-family: var(--font-body); overscroll-behavior: contain;
  max-inline-size: 100vw; max-block-size: 100dvh;
  box-shadow: var(--k-ring), 0 24px 64px rgb(0 0 0 / 0.24);
}
dialog[data-k="sheet"]:is([data-skin="bottom"], [data-skin="center"], [data-skin="side"], [data-skin="full"], [data-skin="popover"])::backdrop {
  background: rgb(0 0 0 / 0.32);
}
dialog[data-k="sheet"]:is([data-skin="bottom"], [data-skin="center"], [data-skin="side"], [data-skin="full"], [data-skin="popover"]) .k-sheet {
  display: flex; flex-direction: column; max-block-size: inherit; block-size: 100%;
}
dialog[data-k="sheet"]:is([data-skin="bottom"], [data-skin="center"], [data-skin="side"], [data-skin="full"], [data-skin="popover"]) .k-head {
  display: flex; align-items: center; gap: calc(var(--s) * 1); padding: var(--k-pad) var(--k-pad) calc(var(--s) * 1);
}
dialog[data-k="sheet"]:is([data-skin="bottom"], [data-skin="center"], [data-skin="side"], [data-skin="full"], [data-skin="popover"]) .k-title {
  margin: 0; flex: 1 1 auto; min-inline-size: 0; font-family: var(--font-display); font-weight: var(--display-weight, 500);
  font-size: calc(var(--k-fs) * 21); line-height: 1.2; text-wrap: balance;
}
dialog[data-k="sheet"]:is([data-skin="bottom"], [data-skin="center"], [data-skin="side"], [data-skin="full"], [data-skin="popover"]) .k-close {
  flex: none; display: inline-grid; place-items: center; inline-size: 44px; block-size: 44px; margin: -8px calc(var(--s) * -1) -8px 0; /* kit-ok: the 44px close target inside the heading's line */
  color: var(--ink-2); background: none; border: 0; border-radius: 999px; cursor: pointer;
}
dialog[data-k="sheet"]:is([data-skin="bottom"], [data-skin="center"], [data-skin="side"], [data-skin="full"], [data-skin="popover"]) .k-close:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
dialog[data-k="sheet"]:is([data-skin="bottom"], [data-skin="center"], [data-skin="side"], [data-skin="full"], [data-skin="popover"]) .k-body {
  flex: 1 1 auto; overflow: auto; padding: calc(var(--s) * 1) var(--k-pad); display: grid; gap: var(--gap-in); align-content: start;
}
dialog[data-k="sheet"]:is([data-skin="bottom"], [data-skin="center"], [data-skin="side"], [data-skin="full"], [data-skin="popover"]) .k-actions {
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: calc(var(--s) * 1); padding: calc(var(--s) * 1.5) var(--k-pad) var(--k-pad);
}
/* Arriving and leaving: a fade, and each skin's own short move. */
@media (prefers-reduced-motion: no-preference) {
  dialog[data-k="sheet"]:is([data-skin="bottom"], [data-skin="center"], [data-skin="side"], [data-skin="full"], [data-skin="popover"]) {
    transition: opacity 200ms ease-out, translate 280ms var(--ease), scale 200ms var(--ease), overlay 280ms allow-discrete, display 280ms allow-discrete;
  }
  dialog[data-k="sheet"]:is([data-skin="bottom"], [data-skin="center"], [data-skin="side"], [data-skin="full"], [data-skin="popover"])::backdrop {
    transition: opacity 200ms ease-out, overlay 280ms allow-discrete, display 280ms allow-discrete;
  }
}
dialog[data-k="sheet"]:is([data-skin="bottom"], [data-skin="center"], [data-skin="side"], [data-skin="full"], [data-skin="popover"]):not([open]) { opacity: 0; }
dialog[data-k="sheet"]:is([data-skin="bottom"], [data-skin="center"], [data-skin="side"], [data-skin="full"], [data-skin="popover"]):not([open])::backdrop { opacity: 0; }
@starting-style {
  dialog[data-k="sheet"]:is([data-skin="bottom"], [data-skin="center"], [data-skin="side"], [data-skin="full"], [data-skin="popover"])[open] { opacity: 0; }
  dialog[data-k="sheet"]:is([data-skin="bottom"], [data-skin="center"], [data-skin="side"], [data-skin="full"], [data-skin="popover"])[open]::backdrop { opacity: 0; }
}

/* Bottom sheet: rises from the bottom; drag it down to put it away. */
dialog[data-k="sheet"][data-skin="bottom"] {
  margin: auto auto 0; inline-size: 100%; max-inline-size: 40rem; max-block-size: 92dvh;
  border-radius: calc(var(--radius) * 1.5) calc(var(--radius) * 1.5) 0 0;
  padding-block-end: env(safe-area-inset-bottom);
}
dialog[data-k="sheet"][data-skin="bottom"] .k-sheet::before {
  content: ""; flex: none; align-self: center; inline-size: 36px; block-size: 5px; margin-block-start: var(--s); border-radius: 999px; background: var(--k-tint-2);
}
dialog[data-k="sheet"][data-skin="bottom"] .k-head { padding-block-start: calc(var(--s) * 1); touch-action: none; }
dialog[data-k="sheet"][data-skin="bottom"]:not([open]) { translate: 0 100%; }
@starting-style { dialog[data-k="sheet"][data-skin="bottom"][open] { translate: 0 100%; } }

/* Centred dialog: a card in the middle, the page dimmed behind it. */
dialog[data-k="sheet"][data-skin="center"] {
  margin: auto; inline-size: calc(100vw - 32px); max-inline-size: 32rem; max-block-size: min(40rem, calc(100dvh - 32px));
  border-radius: calc(var(--radius) * 1.5);
}
dialog[data-k="sheet"][data-skin="center"]:not([open]) { scale: 0.96; }
@starting-style { dialog[data-k="sheet"][data-skin="center"][open] { scale: 0.96; } }

/* Side panel: slides in from the end edge and keeps the page beside it. */
dialog[data-k="sheet"][data-skin="side"] {
  margin: 0 0 0 auto; inline-size: min(26rem, 100vw); block-size: 100dvh; max-block-size: 100dvh;
  border-radius: calc(var(--radius) * 1.5) 0 0 calc(var(--radius) * 1.5);
  padding-block: env(safe-area-inset-top) env(safe-area-inset-bottom);
}
dialog[data-k="sheet"][data-skin="side"]:not([open]) { translate: 100% 0; }
@starting-style { dialog[data-k="sheet"][data-skin="side"][open] { translate: 100% 0; } }

/* Full screen on a phone: the whole screen for a long task; centred on a desktop. */
dialog[data-k="sheet"][data-skin="full"] { margin: auto; border-radius: calc(var(--radius) * 1.5); inline-size: calc(100vw - 32px); max-inline-size: 36rem; max-block-size: min(44rem, calc(100dvh - 32px)); }
dialog[data-k="sheet"][data-skin="full"]:not([open]) { translate: 0 24px; }
@starting-style { dialog[data-k="sheet"][data-skin="full"][open] { translate: 0 24px; } }
@media (max-width: 40rem) {
  dialog[data-k="sheet"][data-skin="full"] {
    inline-size: 100vw; max-inline-size: 100vw; block-size: 100dvh; max-block-size: 100dvh; border-radius: 0;
    padding-block: env(safe-area-inset-top) env(safe-area-inset-bottom);
  }
}

/* Popover: small, next to what opened it, no dimming (behaviors.js places it). */
dialog[data-k="sheet"][data-skin="popover"] {
  position: fixed; margin: 0; inset: var(--k-y, 50%) auto auto var(--k-x, 50%);
  inline-size: min(22rem, calc(100vw - 16px)); max-block-size: min(28rem, calc(100dvh - 16px));
  border-radius: calc(var(--radius) + var(--k-inset)); box-shadow: var(--k-ring), var(--k-lift);
  transform-origin: var(--k-origin, top left);
}
dialog[data-k="sheet"][data-skin="popover"]::backdrop { background: transparent; }
dialog[data-k="sheet"][data-skin="popover"] { --k-pad: calc(var(--s) * 1.5); }
dialog[data-k="sheet"][data-skin="popover"]:not([open]) { scale: 0.96; }
@starting-style { dialog[data-k="sheet"][data-skin="popover"][open] { scale: 0.96; } }

/* ── Toasts and alerts ────────────────────────────────────────────────────
   <div data-k="toast" role="status"> <span class="k-msg"> <button
   class="k-action"> (optional, e.g. Undo) <button class="k-close"
   aria-label="Dismiss"> (optional). Shown with data-show (KIT.toast in
   behaviors.js). One with an action stays until it's used or dismissed. */

[data-k="toast"]:is([data-skin="bar"], [data-skin="capsule"], [data-skin="banner"], [data-skin="inline"], [data-skin="undo"]) {
  display: flex; align-items: center; gap: calc(var(--s) * 1);
  font-family: var(--font-body); font-size: calc(var(--k-fs) * 15); line-height: 1.35;
}
[data-k="toast"]:is([data-skin="bar"], [data-skin="capsule"], [data-skin="banner"], [data-skin="undo"]) {
  position: fixed; z-index: 50; opacity: 0; visibility: hidden; pointer-events: none;
}
[data-k="toast"]:is([data-skin="bar"], [data-skin="capsule"], [data-skin="banner"], [data-skin="undo"])[data-show] { opacity: 1; visibility: visible; pointer-events: auto; }
@media (prefers-reduced-motion: no-preference) {
  [data-k="toast"]:is([data-skin="bar"], [data-skin="capsule"], [data-skin="banner"], [data-skin="undo"]) { transition: opacity 200ms ease-out, translate 240ms var(--ease), visibility 0s linear 240ms; }
  [data-k="toast"]:is([data-skin="bar"], [data-skin="capsule"], [data-skin="banner"], [data-skin="undo"])[data-show] { transition: opacity 200ms ease-out, translate 240ms var(--ease), visibility 0s; }
}
[data-k="toast"]:is([data-skin="bar"], [data-skin="capsule"], [data-skin="banner"], [data-skin="inline"], [data-skin="undo"]) .k-msg { flex: 1 1 auto; min-inline-size: 0; text-wrap: pretty; }
[data-k="toast"]:is([data-skin="bar"], [data-skin="capsule"], [data-skin="banner"], [data-skin="inline"], [data-skin="undo"]) :is(.k-action, .k-close) {
  flex: none; display: inline-grid; place-items: center; min-block-size: 44px; min-inline-size: 44px; margin-block: -10px; /* kit-ok: 44px targets inside a 24px line */
  padding-inline: calc(var(--s) * 1); font: inherit; font-weight: 600; color: inherit; background: none; border: 0; border-radius: 999px; cursor: pointer;
}
[data-k="toast"]:is([data-skin="bar"], [data-skin="capsule"], [data-skin="banner"], [data-skin="inline"], [data-skin="undo"]) :is(.k-action, .k-close):focus-visible { outline: 2px solid currentColor; outline-offset: -4px; }
[data-k="toast"]:is([data-skin="bar"], [data-skin="capsule"], [data-skin="banner"], [data-skin="inline"], [data-skin="undo"]) .k-close { padding: 0; opacity: 0.8; }
[data-k="toast"]:is([data-skin="bar"], [data-skin="capsule"], [data-skin="banner"], [data-skin="inline"], [data-skin="undo"]) :is(.k-action, .k-close)[hidden] { display: none; }

/* Bar at the bottom: edge to edge, in ink, above the home indicator. */
[data-k="toast"][data-skin="bar"] {
  inset-inline: 0; inset-block-end: 0; padding: calc(var(--s) * 1.75) max(calc(var(--s) * 2), env(safe-area-inset-right)) max(calc(var(--s) * 1.75), env(safe-area-inset-bottom)) max(calc(var(--s) * 2), env(safe-area-inset-left));
  background: var(--ink); color: var(--bg); translate: 0 100%;
}
[data-k="toast"][data-skin="bar"][data-show] { translate: 0 0; }

/* Floating capsule: a small pill over the bottom of the page. */
[data-k="toast"][data-skin="capsule"],
[data-k="toast"][data-skin="undo"] {
  inset-inline-start: 50%; inset-block-end: max(calc(var(--s) * 3), calc(env(safe-area-inset-bottom) + var(--s) * 1.5));
  inline-size: max-content; max-inline-size: calc(100vw - 32px); padding: calc(var(--s) * 1.25) calc(var(--s) * 2.25);
  background: var(--ink); color: var(--bg); border-radius: 999px; box-shadow: var(--k-lift);
  translate: -50% 12px;
}
[data-k="toast"]:is([data-skin="capsule"], [data-skin="undo"])[data-show] { translate: -50% 0; }

/* Top banner: across the top under the status bar, in the surface. */
[data-k="toast"][data-skin="banner"] {
  inset-inline: 0; inset-block-start: 0; padding: max(calc(var(--s) * 1.5), env(safe-area-inset-top)) calc(var(--s) * 2) calc(var(--s) * 1.5);
  background: var(--surface); color: var(--ink); box-shadow: 0 1px 0 var(--line), var(--k-lift); translate: 0 -100%;
}
[data-k="toast"][data-skin="banner"][data-show] { translate: 0 0; }
[data-k="toast"][data-skin="banner"] .k-action { color: var(--accent); }

/* Inline notice: in the flow of the page, where the thing happened. */
[data-k="toast"][data-skin="inline"] {
  padding: calc(var(--s) * 1.25) calc(var(--s) * 1.75); border-radius: calc(var(--radius) * 0.75);
  background: color-mix(in oklab, var(--accent) 10%, var(--surface)); color: var(--ink); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 22%, transparent);
}
[data-k="toast"][data-skin="inline"]:not([data-show]) { display: none; }
[data-k="toast"][data-skin="inline"] .k-action { color: var(--accent); }

/* With undo: the capsule, its action set apart by a rule so it reads first. */
[data-k="toast"][data-skin="undo"] { padding-inline-end: calc(var(--s) * 1); gap: calc(var(--s) * 1.5); }
[data-k="toast"][data-skin="undo"] .k-action { box-shadow: inset 1px 0 0 color-mix(in oklab, var(--bg) 28%, transparent); border-radius: 0 999px 999px 0; padding-inline: calc(var(--s) * 1.75) calc(var(--s) * 1.25); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* ── Tags and badges ──────────────────────────────────────────────────────
   <span data-k="tag"> a word. Its colour is --k-tone (default the soft ink),
   so whose-is-whose colours come from the page: --k-tone on the tag or
   anything around it.
   Colour is never the only cue: the word is always there. */

[data-k="tag"]:is([data-skin="text"], [data-skin="tint"], [data-skin="outline"], [data-skin="dot"], [data-skin="margin"]) {
  --k-t: var(--k-tone, var(--ink-2));
  display: inline-flex; align-items: center; gap: 0.4em;
  font-family: var(--font-body); font-size: var(--k-tiny); font-weight: 500; line-height: 1.25;
  color: var(--k-t); white-space: nowrap;
}

/* Text only: the word in its colour. */
/* (the shared rules are the whole skin) */

/* Tinted pill: a wash of its colour behind it. */
[data-k="tag"][data-skin="tint"] { padding: 0.2em 0.65em; border-radius: 999px; background: color-mix(in oklab, var(--k-t) 14%, transparent); color: color-mix(in oklab, var(--k-t) 80%, var(--ink)); }

/* Outline pill: drawn around, nothing filled. */
[data-k="tag"][data-skin="outline"] { padding: 0.15em 0.6em; border-radius: 999px; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--k-t) 55%, transparent); }

/* Dot and word: a small dot of its colour, then the word. */
[data-k="tag"][data-skin="dot"]::before { content: ""; inline-size: 0.55em; block-size: 0.55em; border-radius: 50%; background: var(--k-t); flex: none; }

/* Margin word: small italic, like a note in a planner's margin. */
[data-k="tag"][data-skin="margin"] { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: var(--k-tiny); }

/* ── Empty states ─────────────────────────────────────────────────────────
   <div data-k="empty"> <p class="k-msg"> <button data-k="button"
   class="k-action"> (optional) <ol class="k-steps"> (optional, first run).
   Never an illustration: the words carry it (signature: no clip art). */

[data-k="empty"]:is([data-skin="sentence"], [data-skin="action"], [data-skin="centred"], [data-skin="hint"], [data-skin="steps"]) {
  display: grid; gap: calc(var(--gap-in) * 0.75); justify-items: start; font-family: var(--font-body);
}
[data-k="empty"]:is([data-skin="sentence"], [data-skin="action"], [data-skin="centred"], [data-skin="hint"], [data-skin="steps"]) .k-msg { margin: 0; color: var(--ink-2); text-wrap: pretty; max-inline-size: 36em; }
[data-k="empty"]:is([data-skin="sentence"], [data-skin="action"], [data-skin="centred"], [data-skin="hint"]) .k-steps { display: none; }

/* One sentence: the words alone, the action as a quiet link under them. */
[data-k="empty"][data-skin="sentence"] .k-action { margin-inline-start: calc(var(--s) * -1); }

/* Sentence and action: the words, then the one thing to do. */
[data-k="empty"][data-skin="action"] { padding-block: var(--gap-in); }
[data-k="empty"][data-skin="action"] .k-msg { color: var(--ink); }

/* Centred: a quiet pause in the middle of the space, no picture. */
[data-k="empty"][data-skin="centred"] { justify-items: center; text-align: center; padding-block: var(--gap-out); }
[data-k="empty"][data-skin="centred"] .k-msg { font-family: var(--font-display); font-size: calc(var(--k-fs) * 19); line-height: 1.35; color: var(--ink); text-wrap: balance; }

/* Inline hint: small, on the line where the list would be. */
[data-k="empty"][data-skin="hint"] { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: calc(var(--s) * 0.5); row-gap: 0; }
[data-k="empty"][data-skin="hint"] .k-msg { font-size: var(--k-small); }

/* First-run steps: the order is the information, so it's numbered. */
[data-k="empty"][data-skin="steps"] .k-msg { color: var(--ink); font-weight: 500; }
[data-k="empty"][data-skin="steps"] .k-steps {
  display: grid; gap: calc(var(--s) * 1); margin: 0; padding: 0; list-style: none; counter-reset: k-step;
  font-size: calc(var(--k-fs) * 15); color: var(--ink-2);
}
[data-k="empty"][data-skin="steps"] .k-steps > li { counter-increment: k-step; display: grid; grid-template-columns: 1.75em minmax(0, 1fr); align-items: baseline; text-wrap: pretty; }
[data-k="empty"][data-skin="steps"] .k-steps > li::before { content: counter(k-step); color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ── Reduced motion ───────────────────────────────────────────────────────
   Presses and slides go; fades stay (signature, better-accessibility). */
@media (prefers-reduced-motion: reduce) {
  [data-k] :active, [data-k]:active { scale: 1 !important; }
  dialog[data-k="sheet"], [data-k="toast"] { translate: none !important; scale: 1 !important; }
}