/* ==========================================================================
   Keys: the one button style
   --------------------------------------------------------------------------
   Every button on the site is a raised pill that dents when pressed, built the way Airbnb builds its tab
   pills (read from their live page). Behind a button's content sit two complete looks, one raised and one
   pressed. Pressing cross-fades from the first to the second while the button sinks a little and shrinks a
   hair; nothing redraws a shadow, so it is smooth. Most buttons draw the two looks as their own ::before
   (raised) and ::after (pressed), so no markup changes; the home page's buttons (menu.css) have two real
   <span> layers for the same thing and take everything else from here.

   Press state is one number per button, --pk-d (0 up, 1 down), and --pk-s (1 while a finger or mouse is on
   it, which also shrinks it). Under a finger or mouse button (:active), under a finger on iOS (.is-down,
   put there by keys.js, because iOS Safari does not apply :active to touches), from the click until the
   next page has loaded (.is-pressed, also keys.js), or switched on (.is-on, .is-open, aria-pressed) the
   button is down.

   Colour comes from a tone. Light is Airbnb's recipe as it is, and every button is light unless it is
   listed in a coloured tone below. The coloured tones (accent, dark, green, maroon) follow the same recipe
   in one base colour. Every length in a shadow is a multiple of --pk-px (1px times --pk-k), so one number
   makes the whole bevel thicker or thinner: the home page's tall buttons use 1.8, the 44px ones 1.1 (the
   default) and the small ones a little under 1. Size, spacing and type stay with each button's stylesheet.

   Written without CSS nesting on purpose: a phone that does not know nesting would drop those rules and
   leave white labels on nothing. color-mix() (Safari 16.2) is the newest thing used.

   TO MAKE A BUTTON A KEY: add its selector to the list of keys. That list is written out in every rule marked
   "(the list of keys)" below, and every copy must be the same (tests/test_keys.py checks it): search for a
   neighbour such as .pf-chip and add yours beside it each time. If the button is not light, also name it in one
   coloured tone near the end of the file. The same test fails when a button in a template is neither a key nor
   one of the few deliberate exceptions (docs/BUTTONS.md).
   ========================================================================== */

:root {
  --pk-ink: #2E1B14;
  --pk-card: #FFFDFA;
  --pk-accent: #C05A2A;
  --pk-dark: #4A2822;
  --pk-green: #00A64F;
  --pk-maroon: #7A1F2E;
  --pk-ease: cubic-bezier(.1, .9, .2, 1);
}
@media (prefers-reduced-motion: reduce) {
  :root { --pk-motion: 0; }   /* the two looks still swap, instantly; nothing moves */
}

/* ---- KEYS: how every key behaves (the list of keys) ------------------------------------------------- */
:is(
  .mcs-ui .mcs-ui-btn,
  .mcs-ev-scope .mcs-ev-btn,
  .mcs-btn,
  .vc-btn,
  .auth-box .btn,
  .mcs-nav .mcs-nav-ghost,
  .mcs-nav .mcs-nav-cta,
  .mcs-nav .mcs-nav-lang-btn,
  .mcs-nav .mcs-nav-arrow,
  .mcs-nav .mcs-nav-home,
  .mcs-nav .mcs-nav-settings,
  .mcs-nav .mcs-nav-profile,
  .mcs-ui-segbar .mcs-ui-seg,
  .mcs-ex-toggle,
  .mcs-dialog .mcs-dialog-buttons button,
  .se-add-btn,
  .se-recipe-toggle,
  .se-brew-rm,
  .se-optional-toggle,
  .se-cap-tool,
  .se-capture-select,
  .pf-chip,
  .mcs-ui-morelink,
  .mcs-ev-morelink,
  .se-capture-next,
  .se-cap-link,
  .mcs-skip-link,
  .pk,
  .hm .hm-btn,
  .mcs-admin .btn,
  .mcs-admin .page-link,
  .mcs-admin td.text-end > a
) {
  --pk-key: 1;                                  /* keys.js asks for this to know a button is a key */
  --pk-d: 0;
  --pk-s: 0;
  --pk-px: calc(1px * var(--pk-k, 1.1));
  --pk-t: calc(220ms * var(--pk-motion, 1));
  isolation: isolate;
  border: 1px solid var(--pk-halo);
  border-radius: 999px;
  background: var(--pk-own-bg, transparent);     /* a one-layer key (the admin console) paints itself; the rest hold their looks in ::before and ::after */
  box-shadow: var(--pk-own-shadow, none);
  color: var(--pk-fg);
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  outline: none;                                /* the ring is drawn for keyboard focus only (below) */
  transform: translateY(calc(var(--pk-d) * var(--pk-sink, 2px) * var(--pk-motion, 1)))
             scale(calc(1 - .012 * var(--pk-s) * var(--pk-motion, 1)));
  transition: transform var(--pk-t) var(--pk-ease), border-color var(--pk-t) var(--pk-ease);
}

/* a key sits where it is put (a rule of its own that places it, such as position: absolute, wins) */
:where(
  .mcs-ui .mcs-ui-btn,
  .mcs-ev-scope .mcs-ev-btn,
  .mcs-btn,
  .vc-btn,
  .auth-box .btn,
  .mcs-nav .mcs-nav-ghost,
  .mcs-nav .mcs-nav-cta,
  .mcs-nav .mcs-nav-lang-btn,
  .mcs-nav .mcs-nav-arrow,
  .mcs-nav .mcs-nav-home,
  .mcs-nav .mcs-nav-settings,
  .mcs-nav .mcs-nav-profile,
  .mcs-ui-segbar .mcs-ui-seg,
  .mcs-ex-toggle,
  .mcs-dialog .mcs-dialog-buttons button,
  .se-add-btn,
  .se-recipe-toggle,
  .se-brew-rm,
  .se-optional-toggle,
  .se-cap-tool,
  .se-capture-select,
  .pf-chip,
  .mcs-ui-morelink,
  .mcs-ev-morelink,
  .se-capture-next,
  .se-cap-link,
  .mcs-skip-link,
  .pk
) { position: relative; }

/* ---- the two looks, as the key's own ::before and ::after (the list of keys) ------------------------- */
:is(
  .mcs-ui .mcs-ui-btn,
  .mcs-ev-scope .mcs-ev-btn,
  .mcs-btn,
  .vc-btn,
  .auth-box .btn,
  .mcs-nav .mcs-nav-ghost,
  .mcs-nav .mcs-nav-cta,
  .mcs-nav .mcs-nav-lang-btn,
  .mcs-nav .mcs-nav-arrow,
  .mcs-nav .mcs-nav-home,
  .mcs-nav .mcs-nav-settings,
  .mcs-nav .mcs-nav-profile,
  .mcs-ui-segbar .mcs-ui-seg,
  .mcs-ex-toggle,
  .mcs-dialog .mcs-dialog-buttons button,
  .se-add-btn,
  .se-recipe-toggle,
  .se-brew-rm,
  .se-optional-toggle,
  .se-cap-tool,
  .se-capture-select,
  .pf-chip,
  .mcs-ui-morelink,
  .mcs-ev-morelink,
  .se-capture-next,
  .se-cap-link,
  .mcs-skip-link,
  .pk
)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  transition: opacity var(--pk-t) var(--pk-ease);
  background: var(--pk-up-bg);
  box-shadow: var(--pk-up-shadow);
  opacity: calc(1 - var(--pk-d));
}
/* (the list of keys again) */
:is(
  .mcs-ui .mcs-ui-btn,
  .mcs-ev-scope .mcs-ev-btn,
  .mcs-btn,
  .vc-btn,
  .auth-box .btn,
  .mcs-nav .mcs-nav-ghost,
  .mcs-nav .mcs-nav-cta,
  .mcs-nav .mcs-nav-lang-btn,
  .mcs-nav .mcs-nav-arrow,
  .mcs-nav .mcs-nav-home,
  .mcs-nav .mcs-nav-settings,
  .mcs-nav .mcs-nav-profile,
  .mcs-ui-segbar .mcs-ui-seg,
  .mcs-ex-toggle,
  .mcs-dialog .mcs-dialog-buttons button,
  .se-add-btn,
  .se-recipe-toggle,
  .se-brew-rm,
  .se-optional-toggle,
  .se-cap-tool,
  .se-capture-select,
  .pf-chip,
  .mcs-ui-morelink,
  .mcs-ev-morelink,
  .se-capture-next,
  .se-cap-link,
  .mcs-skip-link,
  .pk
)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  transition: opacity var(--pk-t) var(--pk-ease);
  background: var(--pk-down-bg);
  box-shadow: var(--pk-down-shadow);
  opacity: var(--pk-d);
}

/* ---- states (the list of keys, once for each) ---------------------------------------------------------------- */
/* down: pressed, held until the next page loads, or switched on (a chosen tab, an open panel) */
:is(
  .mcs-ui .mcs-ui-btn,
  .mcs-ev-scope .mcs-ev-btn,
  .mcs-btn,
  .vc-btn,
  .auth-box .btn,
  .mcs-nav .mcs-nav-ghost,
  .mcs-nav .mcs-nav-cta,
  .mcs-nav .mcs-nav-lang-btn,
  .mcs-nav .mcs-nav-arrow,
  .mcs-nav .mcs-nav-home,
  .mcs-nav .mcs-nav-settings,
  .mcs-nav .mcs-nav-profile,
  .mcs-ui-segbar .mcs-ui-seg,
  .mcs-ex-toggle,
  .mcs-dialog .mcs-dialog-buttons button,
  .se-add-btn,
  .se-recipe-toggle,
  .se-brew-rm,
  .se-optional-toggle,
  .se-cap-tool,
  .se-capture-select,
  .pf-chip,
  .mcs-ui-morelink,
  .mcs-ev-morelink,
  .se-capture-next,
  .se-cap-link,
  .mcs-skip-link,
  .pk,
  .hm .hm-btn,
  .mcs-admin .btn,
  .mcs-admin .page-link,
  .mcs-admin td.text-end > a
):is(:active, .is-down, .is-pressed, .is-on, .is-open, [aria-pressed="true"]) { --pk-d: 1; }
/* under a finger or mouse, or on its way to the next page: also shrinks a hair, and goes down quicker than it comes back */
:is(
  .mcs-ui .mcs-ui-btn,
  .mcs-ev-scope .mcs-ev-btn,
  .mcs-btn,
  .vc-btn,
  .auth-box .btn,
  .mcs-nav .mcs-nav-ghost,
  .mcs-nav .mcs-nav-cta,
  .mcs-nav .mcs-nav-lang-btn,
  .mcs-nav .mcs-nav-arrow,
  .mcs-nav .mcs-nav-home,
  .mcs-nav .mcs-nav-settings,
  .mcs-nav .mcs-nav-profile,
  .mcs-ui-segbar .mcs-ui-seg,
  .mcs-ex-toggle,
  .mcs-dialog .mcs-dialog-buttons button,
  .se-add-btn,
  .se-recipe-toggle,
  .se-brew-rm,
  .se-optional-toggle,
  .se-cap-tool,
  .se-capture-select,
  .pf-chip,
  .mcs-ui-morelink,
  .mcs-ev-morelink,
  .se-capture-next,
  .se-cap-link,
  .mcs-skip-link,
  .pk,
  .hm .hm-btn,
  .mcs-admin .btn,
  .mcs-admin .page-link,
  .mcs-admin td.text-end > a
):is(:active, .is-down, .is-pressed) { --pk-s: 1; --pk-t: calc(120ms * var(--pk-motion, 1)); }
:is(
  .mcs-ui .mcs-ui-btn,
  .mcs-ev-scope .mcs-ev-btn,
  .mcs-btn,
  .vc-btn,
  .auth-box .btn,
  .mcs-nav .mcs-nav-ghost,
  .mcs-nav .mcs-nav-cta,
  .mcs-nav .mcs-nav-lang-btn,
  .mcs-nav .mcs-nav-arrow,
  .mcs-nav .mcs-nav-home,
  .mcs-nav .mcs-nav-settings,
  .mcs-nav .mcs-nav-profile,
  .mcs-ui-segbar .mcs-ui-seg,
  .mcs-ex-toggle,
  .mcs-dialog .mcs-dialog-buttons button,
  .se-add-btn,
  .se-recipe-toggle,
  .se-brew-rm,
  .se-optional-toggle,
  .se-cap-tool,
  .se-capture-select,
  .pf-chip,
  .mcs-ui-morelink,
  .mcs-ev-morelink,
  .se-capture-next,
  .se-cap-link,
  .mcs-skip-link,
  .pk,
  .hm .hm-btn,
  .mcs-admin .btn,
  .mcs-admin .page-link,
  .mcs-admin td.text-end > a
):focus-visible { outline: 2px solid var(--pk-accent); outline-offset: var(--pk-ring, 3px); }
:is(
  .mcs-ui .mcs-ui-btn,
  .mcs-ev-scope .mcs-ev-btn,
  .mcs-btn,
  .vc-btn,
  .auth-box .btn,
  .mcs-nav .mcs-nav-ghost,
  .mcs-nav .mcs-nav-cta,
  .mcs-nav .mcs-nav-lang-btn,
  .mcs-nav .mcs-nav-arrow,
  .mcs-nav .mcs-nav-home,
  .mcs-nav .mcs-nav-settings,
  .mcs-nav .mcs-nav-profile,
  .mcs-ui-segbar .mcs-ui-seg,
  .mcs-ex-toggle,
  .mcs-dialog .mcs-dialog-buttons button,
  .se-add-btn,
  .se-recipe-toggle,
  .se-brew-rm,
  .se-optional-toggle,
  .se-cap-tool,
  .se-capture-select,
  .pf-chip,
  .mcs-ui-morelink,
  .mcs-ev-morelink,
  .se-capture-next,
  .se-cap-link,
  .mcs-skip-link,
  .pk,
  .hm .hm-btn,
  .mcs-admin .btn,
  .mcs-admin .page-link,
  .mcs-admin td.text-end > a
):is([disabled], [aria-disabled="true"], .is-disabled) { opacity: .5; cursor: default; pointer-events: none; }

/* ---- TONES: how a key looks ----------------------------------------------------------------------
   Light is every key's default; the coloured tones come after it, so they win. All of it is :where(), so
   a rule written for one button (a label colour, a size) always beats a tone. */
:where(
  .mcs-ui .mcs-ui-btn,
  .mcs-ev-scope .mcs-ev-btn,
  .mcs-btn,
  .vc-btn,
  .auth-box .btn,
  .mcs-nav .mcs-nav-ghost,
  .mcs-nav .mcs-nav-cta,
  .mcs-nav .mcs-nav-lang-btn,
  .mcs-nav .mcs-nav-arrow,
  .mcs-nav .mcs-nav-home,
  .mcs-nav .mcs-nav-settings,
  .mcs-nav .mcs-nav-profile,
  .mcs-ui-segbar .mcs-ui-seg,
  .mcs-ex-toggle,
  .mcs-dialog .mcs-dialog-buttons button,
  .se-add-btn,
  .se-recipe-toggle,
  .se-brew-rm,
  .se-optional-toggle,
  .se-cap-tool,
  .se-capture-select,
  .pf-chip,
  .mcs-ui-morelink,
  .mcs-ev-morelink,
  .se-capture-next,
  .se-cap-link,
  .mcs-skip-link,
  .pk,
  .hm .hm-btn,
  .mcs-admin .btn,
  .mcs-admin .page-link,
  .mcs-admin td.text-end > a,
  input[type="file"]
) {
  --pk-fg: var(--pk-ink);
  --pk-sub: #8A7059;
  --pk-halo: rgba(255, 255, 255, .95);
  --pk-up-bg: linear-gradient(175deg, rgb(243, 241, 238) 8%, var(--pk-card) 53%);
  --pk-up-shadow:
    0 calc(3 * var(--pk-px)) calc(2.5 * var(--pk-px)) rgba(0, 0, 0, .10),
    0 calc(1 * var(--pk-px)) calc(1 * var(--pk-px)) rgba(0, 0, 0, .15),
    0 calc(0.8 * var(--pk-px)) calc(0.4 * var(--pk-px)) rgba(0, 0, 0, .15),
    inset 0 calc(1 * var(--pk-px)) calc(1.5 * var(--pk-px)) #fff,
    inset 0 calc(10 * var(--pk-px)) calc(15 * var(--pk-px)) rgba(58, 58, 58, .02),
    inset 0 calc(-1.5 * var(--pk-px)) calc(0.8 * var(--pk-px)) rgba(255, 255, 255, .6),
    inset 0 calc(-1.5 * var(--pk-px)) calc(0.75 * var(--pk-px)) rgba(0, 0, 0, .3);
  --pk-down-bg: linear-gradient(163deg, var(--pk-card) 17%, rgb(245, 243, 240) 82%);
  --pk-down-shadow:
    0 calc(1 * var(--pk-px)) calc(0.5 * var(--pk-px)) #fff,
    0 calc(-0.5 * var(--pk-px)) calc(1 * var(--pk-px)) rgba(0, 0, 0, .15),
    0 calc(-1.2 * var(--pk-px)) calc(0.5 * var(--pk-px)) calc(1 * var(--pk-px)) rgba(0, 0, 0, .05),
    0 calc(8 * var(--pk-px)) calc(16 * var(--pk-px)) rgba(0, 0, 0, .05),
    inset calc(-0.2 * var(--pk-px)) calc(-1 * var(--pk-px)) calc(1 * var(--pk-px)) #fff,
    inset calc(0.5 * var(--pk-px)) calc(0.7 * var(--pk-px)) calc(2.5 * var(--pk-px)) rgba(0, 0, 0, .2),
    inset calc(-1 * var(--pk-px)) calc(-3 * var(--pk-px)) calc(8 * var(--pk-px)) rgba(0, 0, 0, .05),
    inset calc(0.5 * var(--pk-px)) calc(2 * var(--pk-px)) calc(4 * var(--pk-px)) rgba(0, 0, 0, .1),
    inset calc(1 * var(--pk-px)) calc(6 * var(--pk-px)) calc(6 * var(--pk-px)) calc(2 * var(--pk-px)) rgba(0, 0, 0, .1);
}

/* the coloured tones: the same recipe in one base colour (--pk-base), its dark edge (--pk-deep) and the
   glow of its shadow (--pk-glow), the last two as r, g, b */
:where(
  .mcs-ui .mcs-ui-btn-accent,
  .mcs-admin .btn-warning,
  .auth-box .btn.accent,
  .se-capture-select,
  .se-capture-next,
  .se-cap-wand.is-on,
  .pk.pk-accent,
  .mcs-admin .btn-primary,
  .mcs-ui .mcs-ui-btn-dark,
  .mcs-ev-scope .mcs-ev-btn-dark,
  .mcs-btn-primary,
  .vc-btn-dark,
  .mcs-nav .mcs-nav-cta,
  .mcs-dialog .mcs-dialog-buttons button:first-child,
  .mcs-skip-link,
  .hm .hm-btn--brown,
  .pk.pk-dark,
  .mcs-admin .btn-success,
  .hm .hm-btn--green,
  .pk.pk-green,
  .mcs-admin .btn-danger,
  .mcs-ui .mcs-ui-btn-maroon,
  .pk.pk-maroon
) {
  --pk-fg: var(--pk-card);
  --pk-sub: rgba(255, 253, 250, .86);
  --pk-halo: rgba(255, 255, 255, .12);
  --pk-up-bg: var(--pk-base);                   /* flat colour; the soft gradient follows, where color-mix() is known */
  --pk-up-shadow:
    0 calc(3 * var(--pk-px)) calc(2.5 * var(--pk-px)) rgba(var(--pk-deep), .18),
    0 calc(1 * var(--pk-px)) calc(1 * var(--pk-px)) rgba(var(--pk-deep), .30),
    0 calc(0.8 * var(--pk-px)) calc(0.4 * var(--pk-px)) rgba(var(--pk-deep), .30),
    0 calc(10 * var(--pk-px)) calc(14 * var(--pk-px)) calc(-8 * var(--pk-px)) rgba(var(--pk-glow), .45),
    inset 0 calc(1 * var(--pk-px)) calc(1.5 * var(--pk-px)) rgba(255, 255, 255, .38),
    inset 0 calc(10 * var(--pk-px)) calc(15 * var(--pk-px)) rgba(255, 255, 255, .02),
    inset 0 calc(-1.5 * var(--pk-px)) calc(0.8 * var(--pk-px)) rgba(255, 255, 255, .10),
    inset 0 calc(-1.5 * var(--pk-px)) calc(0.75 * var(--pk-px)) rgba(var(--pk-deep), .55);
  --pk-down-bg: var(--pk-base);
  --pk-down-shadow:
    0 calc(1 * var(--pk-px)) calc(0.5 * var(--pk-px)) rgba(255, 255, 255, .22),
    0 calc(-0.5 * var(--pk-px)) calc(1 * var(--pk-px)) rgba(var(--pk-deep), .26),
    0 calc(-1.2 * var(--pk-px)) calc(0.5 * var(--pk-px)) calc(1 * var(--pk-px)) rgba(var(--pk-deep), .08),
    0 calc(8 * var(--pk-px)) calc(16 * var(--pk-px)) rgba(var(--pk-glow), .08),
    inset calc(-0.2 * var(--pk-px)) calc(-1 * var(--pk-px)) calc(1 * var(--pk-px)) rgba(255, 255, 255, .12),
    inset calc(0.5 * var(--pk-px)) calc(0.7 * var(--pk-px)) calc(2.5 * var(--pk-px)) rgba(var(--pk-deep), .62),
    inset calc(-1 * var(--pk-px)) calc(-3 * var(--pk-px)) calc(8 * var(--pk-px)) rgba(255, 255, 255, .04),
    inset calc(0.5 * var(--pk-px)) calc(2 * var(--pk-px)) calc(4 * var(--pk-px)) rgba(var(--pk-deep), .32),
    inset calc(1 * var(--pk-px)) calc(6 * var(--pk-px)) calc(6 * var(--pk-px)) calc(2 * var(--pk-px)) rgba(var(--pk-deep), .34);
}
:where(.mcs-ui .mcs-ui-btn-accent,
  .mcs-admin .btn-warning,
  .auth-box .btn.accent,
  .se-capture-select,
  .se-capture-next,
  .se-cap-wand.is-on,
  .pk.pk-accent) { --pk-base: var(--pk-accent); --pk-deep: 70, 25, 5; --pk-glow: 192, 90, 42; }
:where(.mcs-admin .btn-primary,
  .mcs-ui .mcs-ui-btn-dark,
  .mcs-ev-scope .mcs-ev-btn-dark,
  .mcs-btn-primary,
  .vc-btn-dark,
  .mcs-nav .mcs-nav-cta,
  .mcs-dialog .mcs-dialog-buttons button:first-child,
  .mcs-skip-link,
  .hm .hm-btn--brown,
  .pk.pk-dark) { --pk-base: var(--pk-dark); --pk-deep: 0, 0, 0; --pk-glow: 46, 27, 20; }
:where(.mcs-admin .btn-success,
  .hm .hm-btn--green,
  .pk.pk-green) { --pk-base: var(--pk-green); --pk-deep: 0, 60, 28; --pk-glow: 0, 105, 48; }
:where(.mcs-admin .btn-danger,
  .mcs-ui .mcs-ui-btn-maroon,
  .pk.pk-maroon) { --pk-base: var(--pk-maroon); --pk-deep: 40, 0, 8; --pk-glow: 122, 31, 46; }

/* the soft gradients of the coloured tones; a phone that does not know color-mix() (before Safari 16.2) keeps the
   flat colour above, which still reads as the same button */
@supports (background: color-mix(in srgb, red, blue)) {
  :where(
    .mcs-ui .mcs-ui-btn-accent,
    .mcs-admin .btn-warning,
    .auth-box .btn.accent,
    .se-capture-select,
    .se-capture-next,
    .se-cap-wand.is-on,
    .pk.pk-accent,
    .mcs-admin .btn-primary,
    .mcs-ui .mcs-ui-btn-dark,
    .mcs-ev-scope .mcs-ev-btn-dark,
    .mcs-btn-primary,
    .vc-btn-dark,
    .mcs-nav .mcs-nav-cta,
    .mcs-dialog .mcs-dialog-buttons button:first-child,
    .mcs-skip-link,
    .hm .hm-btn--brown,
    .pk.pk-dark,
    .mcs-admin .btn-success,
    .hm .hm-btn--green,
    .pk.pk-green,
    .mcs-admin .btn-danger,
    .mcs-ui .mcs-ui-btn-maroon,
    .pk.pk-maroon
  ) {
    --pk-up-bg: linear-gradient(175deg, color-mix(in srgb, var(--pk-base) 86%, white) 8%, var(--pk-base) 60%);
    --pk-down-bg: linear-gradient(163deg, color-mix(in srgb, var(--pk-base) 89%, black) 17%, color-mix(in srgb, var(--pk-base) 77%, black) 82%);
  }
}

/* ---- the admin console: keys in one layer ---------------------------------------------------------------
   Tabler's buttons (the admin console is SQLAdmin's, in Tabler) cannot hold two looks: an <input type="submit"> has no
   ::before, and a dropdown toggle draws its caret in ::after. So here the same key is one layer: the raised look as the
   button's own background and shadow, swapped for the pressed look while it is down (the cross-fade is the only thing
   missing). Everything is scoped by .mcs-admin, the class on the admin pages' <body>. */
:where(
  .mcs-admin .btn,
  .mcs-admin .page-link,
  .mcs-admin td.text-end > a
) { --pk-own-bg: var(--pk-up-bg); --pk-own-shadow: var(--pk-up-shadow); }
:where(
  .mcs-admin .btn,
  .mcs-admin .page-link,
  .mcs-admin td.text-end > a
):is(:active, .is-down, .is-pressed, .is-on, .is-open, .show, .active, [aria-pressed="true"], [aria-expanded="true"]) {
  --pk-own-bg: var(--pk-down-bg);
  --pk-own-shadow: var(--pk-down-shadow);
}
:is(
  .mcs-admin .btn,
  .mcs-admin .page-link,
  .mcs-admin td.text-end > a
):is(.show, .active, [aria-expanded="true"]) { --pk-d: 1; }
/* the page you are on in a list's pager is the one pressed in; a disabled one (prev on page 1) is faded */
.mcs-admin .page-item.active > .page-link { --pk-d: 1; --pk-own-bg: var(--pk-down-bg); --pk-own-shadow: var(--pk-down-shadow); }
.mcs-admin .page-item.disabled > .page-link { opacity: .5; pointer-events: none; }
/* Tabler draws its buttons with deep rules of its own: grouped buttons joined by a -1px margin and flat inner corners, a
   fill and a border colour on the first button while it is pressed, a focus ring drawn as a shadow. These say "keep the
   key", whatever Tabler says (spacing utilities such as .m-2 are left alone: only joined groups lose their margin). */
:is(
  .mcs-admin .btn,
  .mcs-admin .page-link,
  .mcs-admin td.text-end > a
) {
  background-color: transparent !important;
  border-color: var(--pk-halo) !important;
  border-radius: 999px !important;
  box-shadow: var(--pk-own-shadow, none) !important;
  color: var(--pk-fg) !important;
}
.mcs-admin .btn-group > .btn,
.mcs-admin .input-group > .btn,
.mcs-admin .page-item .page-link { margin-left: 0 !important; }

/* ---- .pk: a key with nothing else to style it (new buttons; the login window's button) ----------- */
.pk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 26px;
  font-family: var(--mcs-sans, "Lato-Bold", Helvetica, Arial, sans-serif);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

/* ---- the file pickers ---------------------------------------------------------------------------
   The browser draws a file picker's button, and a button the browser draws has no ::before or ::after to hold two
   looks. It is the same key in one layer instead: raised, and under a finger or mouse its pressed look, without
   the cross-fade. */
input[type="file"] {
  --pk-px: calc(1px * var(--pk-k, .9));
  --pk-t: calc(220ms * var(--pk-motion, 1));
  height: auto;                                 /* room for the button inside the box, whatever the box was */
  padding: 6px 0;
}
input[type="file"].form-control-1 { padding: 6px 8px; }   /* one in a bordered box keeps room from the box's edge */
input[type="file"]::file-selector-button {
  margin: 0 12px 0 0;
  padding: 7px 16px;
  border: 1px solid var(--pk-halo);
  border-radius: 999px;
  background: var(--pk-up-bg);
  box-shadow: var(--pk-up-shadow);
  color: var(--pk-fg);
  font-family: "Lato-Bold", sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: transform var(--pk-t) var(--pk-ease);
}
input[type="file"]:active::file-selector-button {
  background: var(--pk-down-bg);
  box-shadow: var(--pk-down-shadow);
  transform: translateY(calc(2px * var(--pk-motion, 1))) scale(calc(1 - .012 * var(--pk-motion, 1)));
  transition-duration: calc(120ms * var(--pk-motion, 1));
}