.part-button { -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; }
.part-button > .word { text-box: trim-both cap alphabetic; }   /* its letters centred, not its descender space */
/* the gap 8 px, on the 4 px scale (row 1893); the face the page's, also where no reset gives it (the edge's pages, row 2093f) */
.part-button { display: inline-flex; align-items: center; gap: var(--button-gap); font-family: inherit; }
@media (min-width: 900px) {
  .part-button { min-height: var(--control-h); } /* row 1889: a press without a size is as tall as the kit's (32 px), never its line's height */
}
/* the button atom (kit/parts.js Button, skyvw:0 §143): a size names its height, padding and type; primary is the view's one
   white button, secondary a raised fill and scrim a dark ground for a press over a picture (both answer a hand as the plain one,
   a bar's ghost, does); one that reaches fills its line on a phone and is as wide as its word at a desk (tokens.css) */
.part-button:is(.size-normal, .size-small, .size-large) { justify-content: center; gap: var(--button-gap); min-height: var(--button-h);
  padding: 0 var(--button-pad); font-size: var(--button-font); line-height: 1.2; white-space: nowrap; text-decoration: none; color: var(--fg); background: transparent;
  border: 1px solid transparent; border-radius: var(--radius); box-sizing: border-box; cursor: pointer; }
.part-button.size-small { min-height: var(--button-h-small); padding: 0 var(--button-pad-small); font-size: var(--button-font-small); }
.part-button.size-large { gap: var(--button-gap-large); min-height: var(--button-h-large); padding: 0 var(--button-pad-large);
  font-size: var(--button-font-large); }
/* v5 2.4 (row 2093r): a press outside a bar always has a fill and only a field has a border; secondary is the raised fill, outline its old name until the sweep */
.part-button:is(.secondary, .outline) { background: var(--raised); }
.part-button.scrim { background: var(--scrim); }
.part-button:is(.size-normal, .size-small, .size-large):hover { background: var(--hover); }
/* a link drawn as a press lights as a button does under the pointer and the keyboard (row 1022's recipe, from style.css) */
a.part-button:where(:not(.primary)):focus-visible { background: var(--hover); color: var(--fg); }
@media (hover: hover) { a.part-button:where(:not(.primary)):hover { background: var(--hover); color: var(--fg); } }
/* the sign alone (`alone`, or a place's data-face icon, row 847): square at its height, its word kept for a reader and clipped, as the round button's */
.part-button.alone { justify-content: center; min-width: var(--button-h); padding: 0; }
.part-button:is(.alone, [data-face="icon"]) > .word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
  white-space: nowrap; }
.part-button.primary:is(.size-normal, .size-small, .size-large) { min-width: var(--button-primary-min); color: var(--on-accent); background: var(--accent);
  font-weight: 600; }
.part-button.primary:is(.size-normal, .size-small, .size-large):hover { background: var(--accent-hover); }
.part-button.primary:is(.size-normal, .size-small, .size-large):disabled { color: var(--muted); background: var(--input); border-color: var(--border); }
.part-button:is(.size-normal, .size-small, .size-large):disabled { color: var(--muted); }
.part-button.reach-phone { width: var(--button-reach); }
.part-button .part-key, .part-key { font: 600 var(--type-small)/16px var(--font-mono); min-width: 16px; padding: 0 var(--space-1);
  border-radius: 4px; background: color-mix(in oklab, var(--fg) 10%, transparent); color: var(--muted); text-align: center; }
/* A21: a phone or touch screen has no keyboard hints; desktop shortcuts still work and remain visible. */
@media (max-width: 899px), (any-pointer: coarse) {
  .part-key { display: none; }
}
/* presses side by side (actions): they wrap; a row with nothing to do now takes no room */
.part-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.part-actions:not(:has(> :not([hidden]))) { display: none; }
/* a press and its hint under it (hintedPress) */
.part-choice { display: grid; gap: var(--space-1); }
.part-choice small { color: var(--muted); font-size: var(--type-small); }