/* The site's own buttons: flat, the page's lettering with a hairline round them, amber where a button is the page's main
   move. Every page but the Lab loads this right after rack.css, so the same buttons (.tbtn, and .fcap on the home) drop their
   rendered caps here and keep them in the Lab, which never loads this file. Where a button sits and how big a key is stays
   with each page's own sheet. */
:is(.fcap, .tbtn) { border: 1px solid var(--ink-line, rgba(228, 224, 215, 0.2)); border-radius: 4px; background: transparent; color: var(--ink, #e4e0d7); text-decoration: none; text-shadow: var(--engrave, none); cursor: pointer; transition: color 0.2s, border-color 0.2s, background-color 0.2s; }
.fcap, .tbtn.wide, .tkeys .tbtn.wide { -webkit-appearance: none; appearance: none; box-sizing: border-box; width: auto; min-width: 0; height: 40px; aspect-ratio: auto; padding: 0 1.8em; font-family: var(--silk); font-weight: 400; font-size: 11px; letter-spacing: 0.16em; text-indent: 0.16em; text-transform: uppercase; white-space: nowrap; }
.fcap { --h: 40px; display: inline-block; height: var(--h); line-height: calc(var(--h) - 2px); text-align: center; } /* a block of text, not a flex row: the space in "Let's connect" crosses a span */
:is(.fcap, .tbtn).go { color: var(--amber); border-color: rgba(255, 176, 0, 0.4); }
:is(.fcap, .tbtn):hover, :is(.fcap, .tbtn):focus-visible { color: #fff; border-color: var(--ink, #e4e0d7); outline: none; }
:is(.fcap, .tbtn).go:hover, :is(.fcap, .tbtn).go:focus-visible { color: var(--amber); border-color: var(--amber); background-color: rgba(255, 176, 0, 0.08); }
:is(.fcap, .tbtn):focus-visible { box-shadow: 0 0 0 2px rgba(255, 176, 0, 0.25); }
:is(.fcap, .tbtn):active { transform: none; filter: none; background-color: rgba(228, 224, 215, 0.1); }
.tbtn.on { color: var(--accent, var(--amber)); border-color: var(--accent, var(--amber)); box-shadow: none; }
:is(.fcap, .tbtn)[disabled] { opacity: 0.7; cursor: default; }
@media (prefers-reduced-motion: reduce) { :is(.fcap, .tbtn) { transition: none; } }

/* a row of buttons: one width, the widest word's. No room for them in a row: one above the other, the width of the page */
.caps { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; justify-self: start; width: max-content; max-width: 100%; }
.caps [hidden] { display: none; }
@media (max-width: 559px) { .caps { grid-auto-flow: row; justify-self: stretch; width: auto; } }

/* the Listen links: the label over the buttons, no rack panel round them */
.zone[data-label="Listen"] { display: grid; justify-items: start; gap: 10px; min-width: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; }
.zone[data-label="Listen"]::before { position: static; padding: 0; background: none; font-size: max(9px, var(--fs-label)); }
.zone[data-label="Listen"] .tkeys { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; }