/* ============================================================================
   Button colour variants (`.custom-button-<slug>`) + theme modifiers
   ----------------------------------------------------------------------------
   Coloured variants for Material buttons, authored as modifier classes
   alongside `.md-button`: [text](url){ .md-button .custom-button-<slug> }
   The slugs and colour values mirror the label pill set in labels.css — this
   stylesheet is fully standalone and the values are hand-authored copies with
   no link to anything outside this repo.

   Each colour class declares a light and a dark trio (bg/fg/border) as custom
   properties; the scheme-picker rules choose which trio paints the button (and
   which hover brightness applies), and the theme modifier classes re-pick a
   trio regardless of the page scheme:

     .custom-button--inversed     → the OPPOSITE scheme's trio
     .custom-button--force-light  → always the light trio
     .custom-button--force-dark   → always the dark trio

   The modifier rules sit after the pickers at equal specificity, so source
   order settles the tie (force-* last, beating a stray --inversed). The picker
   rules keep the historical `[scheme] .md-typeset …` shape so they still
   out-cascade the theme's accent-colour hover AND `.md-button--primary` when
   both classes appear. Hover/focus follows the EFFECTIVE trio via --btn-hover
   (a force-dark button on a light page gets the dark brighten).

   Border modifiers (independent of the theme modifiers, one of):

     .custom-button--bordered      → border on both trios
     .custom-button--border-light  → border only when the LIGHT trio paints
     .custom-button--border-dark   → border only when the DARK trio paints
     .custom-button--borderless    → never a border

   "Light/dark" here means the trio the button is showing, NOT the page scheme
   — so a force-light button keeps its border state in both schemes. Mechanism:
   each painting rule resolves border-colour through a side-specific override
   (--btn-border-light / --btn-border-dark) that falls back to the trio's own
   border. The border modifiers only SET those two custom properties, so they
   need no scheme scoping and no specificity games — whichever trio paints
   consumes the matching side. The chromatic light trios have no border colour
   (transparent by design), so an enabled light border falls back to a
   color-mix of the light fg (--btn-light-strong); the neutrals override that
   with their curated --btn-light-border-strong so Default and Always match.

   Style modifier (independent of theme and border, one of):

     .custom-button--slim  → full-width flex row: paragraph-weight text,
                             tighter padding, small radius, icon pinned right

   All colour/theme/border rules apply to slim buttons unchanged — slim only
   overrides the theme's .md-button geometry.
   ============================================================================ */

/* The modern theme's .md-button has no border; the neutral variants (and all
   dark variants) rely on one, same as the label pills. */
.md-typeset .md-button[class*="custom-button-"] {
  border: 1px solid transparent;
  --btn-light-strong: var(--btn-light-border-strong,
      color-mix(in srgb, var(--btn-light-fg) 30%, transparent));
}

/* ── Colour trios (no painting here) ─────────────────────────────────────── */

/* chromatic */
.md-typeset .custom-button-red {
  --btn-light-bg: rgb(255,226,226); --btn-light-fg: rgb(159,7,18); --btn-light-border: transparent;
  --btn-dark-bg: rgb(159,7,18); --btn-dark-fg: rgb(255,226,226); --btn-dark-border: rgb(251,44,54);
}
.md-typeset .custom-button-orange {
  --btn-light-bg: rgb(255,237,212); --btn-light-fg: rgb(159,45,0); --btn-light-border: transparent;
  --btn-dark-bg: rgb(159,45,0); --btn-dark-fg: rgb(255,237,212); --btn-dark-border: rgb(255,105,0);
}
.md-typeset .custom-button-amber {
  --btn-light-bg: rgb(254,243,198); --btn-light-fg: rgb(151,60,0); --btn-light-border: transparent;
  --btn-dark-bg: rgb(151,60,0); --btn-dark-fg: rgb(254,243,198); --btn-dark-border: rgb(254,154,0);
}
.md-typeset .custom-button-yellow {
  --btn-light-bg: rgb(254,249,194); --btn-light-fg: rgb(137,75,0); --btn-light-border: transparent;
  --btn-dark-bg: rgb(137,75,0); --btn-dark-fg: rgb(254,249,194); --btn-dark-border: rgb(240,177,0);
}
.md-typeset .custom-button-lime {
  --btn-light-bg: rgb(236,252,202); --btn-light-fg: rgb(60,99,0); --btn-light-border: transparent;
  --btn-dark-bg: rgb(60,99,0); --btn-dark-fg: rgb(236,252,202); --btn-dark-border: rgb(124,207,0);
}
.md-typeset .custom-button-green {
  --btn-light-bg: rgb(220,252,231); --btn-light-fg: rgb(1,102,48); --btn-light-border: transparent;
  --btn-dark-bg: rgb(1,102,48); --btn-dark-fg: rgb(220,252,231); --btn-dark-border: rgb(0,201,80);
}
.md-typeset .custom-button-emerald {
  --btn-light-bg: rgb(208,250,229); --btn-light-fg: rgb(0,96,69); --btn-light-border: transparent;
  --btn-dark-bg: rgb(0,96,69); --btn-dark-fg: rgb(208,250,229); --btn-dark-border: rgb(0,188,125);
}
.md-typeset .custom-button-teal {
  --btn-light-bg: rgb(203,251,241); --btn-light-fg: rgb(0,95,90); --btn-light-border: transparent;
  --btn-dark-bg: rgb(0,95,90); --btn-dark-fg: rgb(203,251,241); --btn-dark-border: rgb(0,187,167);
}
.md-typeset .custom-button-cyan {
  --btn-light-bg: rgb(206,250,254); --btn-light-fg: rgb(0,95,120); --btn-light-border: transparent;
  --btn-dark-bg: rgb(0,95,120); --btn-dark-fg: rgb(206,250,254); --btn-dark-border: rgb(0,184,219);
}
.md-typeset .custom-button-sky {
  --btn-light-bg: rgb(223,242,254); --btn-light-fg: rgb(0,89,138); --btn-light-border: transparent;
  --btn-dark-bg: rgb(0,89,138); --btn-dark-fg: rgb(223,242,254); --btn-dark-border: rgb(0,166,244);
}
.md-typeset .custom-button-blue {
  --btn-light-bg: rgb(219,234,254); --btn-light-fg: rgb(25,60,184); --btn-light-border: transparent;
  --btn-dark-bg: rgb(25,60,184); --btn-dark-fg: rgb(219,234,254); --btn-dark-border: rgb(43,127,255);
}
.md-typeset .custom-button-indigo {
  --btn-light-bg: rgb(224,231,255); --btn-light-fg: rgb(55,42,172); --btn-light-border: transparent;
  --btn-dark-bg: rgb(55,42,172); --btn-dark-fg: rgb(224,231,255); --btn-dark-border: rgb(97,95,255);
}
.md-typeset .custom-button-violet {
  --btn-light-bg: rgb(237,233,254); --btn-light-fg: rgb(93,14,192); --btn-light-border: transparent;
  --btn-dark-bg: rgb(93,14,192); --btn-dark-fg: rgb(237,233,254); --btn-dark-border: rgb(142,81,255);
}
.md-typeset .custom-button-purple {
  --btn-light-bg: rgb(243,232,255); --btn-light-fg: rgb(110,17,176); --btn-light-border: transparent;
  --btn-dark-bg: rgb(110,17,176); --btn-dark-fg: rgb(243,232,255); --btn-dark-border: rgb(173,70,255);
}
.md-typeset .custom-button-fuchsia {
  --btn-light-bg: rgb(250,232,255); --btn-light-fg: rgb(138,1,148); --btn-light-border: transparent;
  --btn-dark-bg: rgb(138,1,148); --btn-dark-fg: rgb(250,232,255); --btn-dark-border: rgb(225,42,251);
}
.md-typeset .custom-button-pink {
  --btn-light-bg: rgb(252,231,243); --btn-light-fg: rgb(163,0,76); --btn-light-border: transparent;
  --btn-dark-bg: rgb(163,0,76); --btn-dark-fg: rgb(252,231,243); --btn-dark-border: rgb(246,51,154);
}
.md-typeset .custom-button-rose {
  --btn-light-bg: rgb(255,228,230); --btn-light-fg: rgb(165,0,54); --btn-light-border: transparent;
  --btn-dark-bg: rgb(165,0,54); --btn-dark-fg: rgb(255,228,230); --btn-dark-border: rgb(255,32,86);
}

/* neutrals */
.md-typeset .custom-button-slate {
  --btn-light-bg: rgb(226,232,240); --btn-light-fg: rgb(49,65,88); --btn-light-border: rgb(144,161,185);
  --btn-light-border-strong: rgb(144,161,185);
  --btn-dark-bg: rgb(49,65,88); --btn-dark-fg: rgb(241,245,249); --btn-dark-border: rgb(98,116,142);
}
.md-typeset .custom-button-grey {
  --btn-light-bg: rgb(229,231,235); --btn-light-fg: rgb(54,65,83); --btn-light-border: rgb(153,161,175);
  --btn-light-border-strong: rgb(153,161,175);
  --btn-dark-bg: rgb(54,65,83); --btn-dark-fg: rgb(243,244,246); --btn-dark-border: rgb(106,114,130);
}
.md-typeset .custom-button-zinc {
  --btn-light-bg: rgb(228,228,231); --btn-light-fg: rgb(63,63,70); --btn-light-border: rgb(159,159,169);
  --btn-light-border-strong: rgb(159,159,169);
  --btn-dark-bg: rgb(63,63,70); --btn-dark-fg: rgb(244,244,245); --btn-dark-border: rgb(113,113,123);
}
.md-typeset .custom-button-neutral {
  --btn-light-bg: rgb(229,229,229); --btn-light-fg: rgb(64,64,64); --btn-light-border: rgb(161,161,161);
  --btn-light-border-strong: rgb(161,161,161);
  --btn-dark-bg: rgb(38,38,38); --btn-dark-fg: rgb(245,245,245); --btn-dark-border: rgb(115,115,115);
}
.md-typeset .custom-button-stone {
  --btn-light-bg: rgb(231,229,228); --btn-light-fg: rgb(68,64,59); --btn-light-border: rgb(166,160,155);
  --btn-light-border-strong: rgb(166,160,155);
  --btn-dark-bg: rgb(68,64,59); --btn-dark-fg: rgb(245,245,244); --btn-dark-border: rgb(121,113,107);
}
.md-typeset .custom-button-taupe {
  --btn-light-bg: rgb(232,228,227); --btn-light-fg: rgb(71,60,57); --btn-light-border: rgb(171,160,156);
  --btn-light-border-strong: rgb(171,160,156);
  --btn-dark-bg: rgb(43,36,34); --btn-dark-fg: rgb(243,241,241); --btn-dark-border: rgb(124,109,103);
}
.md-typeset .custom-button-mauve {
  --btn-light-bg: rgb(231,228,231); --btn-light-fg: rgb(70,57,71); --btn-light-border: rgb(168,158,169);
  --btn-light-border-strong: rgb(168,158,169);
  --btn-dark-bg: rgb(42,33,44); --btn-dark-fg: rgb(243,241,243); --btn-dark-border: rgb(121,105,123);
}
.md-typeset .custom-button-mist {
  --btn-light-bg: rgb(227,231,232); --btn-light-fg: rgb(57,68,71); --btn-light-border: rgb(156,168,171);
  --btn-light-border-strong: rgb(156,168,171);
  --btn-dark-bg: rgb(34,41,43); --btn-dark-fg: rgb(241,243,243); --btn-dark-border: rgb(103,120,124);
}
.md-typeset .custom-button-olive {
  --btn-light-bg: rgb(232,232,227); --btn-light-fg: rgb(71,71,57); --btn-light-border: rgb(171,171,156);
  --btn-light-border-strong: rgb(171,171,156);
  --btn-dark-bg: rgb(43,43,34); --btn-dark-fg: rgb(244,244,240); --btn-dark-border: rgb(124,124,103);
}

/* ── Scheme pickers ──────────────────────────────────────────────────────── */

[data-md-color-scheme="default"] .md-typeset .md-button[class*="custom-button-"] {
  background: var(--btn-light-bg); color: var(--btn-light-fg);
  border-color: var(--btn-border-light, var(--btn-light-border));
  --btn-hover: brightness(0.95); --btn-hover-strong: brightness(0.9);
}
[data-md-color-scheme="slate"] .md-typeset .md-button[class*="custom-button-"] {
  background: var(--btn-dark-bg); color: var(--btn-dark-fg);
  border-color: var(--btn-border-dark, var(--btn-dark-border));
  --btn-hover: brightness(1.15); --btn-hover-strong: brightness(1.3);
}

/* ── Theme modifiers (must follow the pickers — equal specificity) ───────── */

[data-md-color-scheme="default"] .md-typeset .md-button.custom-button--inversed {
  background: var(--btn-dark-bg); color: var(--btn-dark-fg);
  border-color: var(--btn-border-dark, var(--btn-dark-border));
  --btn-hover: brightness(1.15); --btn-hover-strong: brightness(1.3);
}
[data-md-color-scheme="slate"] .md-typeset .md-button.custom-button--inversed {
  background: var(--btn-light-bg); color: var(--btn-light-fg);
  border-color: var(--btn-border-light, var(--btn-light-border));
  --btn-hover: brightness(0.95); --btn-hover-strong: brightness(0.9);
}
[data-md-color-scheme] .md-typeset .md-button.custom-button--force-light {
  background: var(--btn-light-bg); color: var(--btn-light-fg);
  border-color: var(--btn-border-light, var(--btn-light-border));
  --btn-hover: brightness(0.95); --btn-hover-strong: brightness(0.9);
}
[data-md-color-scheme] .md-typeset .md-button.custom-button--force-dark {
  background: var(--btn-dark-bg); color: var(--btn-dark-fg);
  border-color: var(--btn-border-dark, var(--btn-dark-border));
  --btn-hover: brightness(1.15); --btn-hover-strong: brightness(1.3);
}

/* ── Border modifiers (custom-property switches — no scheme scoping needed;
      whichever trio paints consumes its side's override) ──────────────────── */

.md-typeset .md-button.custom-button--bordered {
  --btn-border-light: var(--btn-light-strong); --btn-border-dark: var(--btn-dark-border);
}
.md-typeset .md-button.custom-button--border-light {
  --btn-border-light: var(--btn-light-strong); --btn-border-dark: transparent;
}
.md-typeset .md-button.custom-button--border-dark {
  --btn-border-light: transparent; --btn-border-dark: var(--btn-dark-border);
}
.md-typeset .md-button.custom-button--borderless {
  --btn-border-light: transparent; --btn-border-dark: transparent;
}

/* ── Style modifier: slim (full-width row button) ─────────────────────────
      Semibold text at paragraph size (the theme's .md-button already
      inherits paragraph font-size — only the 700 weight and big padding make
      it look larger), tighter padding, small radius, full-width flex row: the
      label text node is the first flex item, the trailing .twemoji icon the second, so
      space-between pins label left / icon right. ───────────────────────────── */

.md-typeset .md-button.custom-button--slim {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  padding: .4em .9em;
  border-radius: .3rem;
}
.md-typeset .md-button.custom-button--slim .twemoji { flex-shrink: 0; }

/* hover/focus feedback (variant colours suppress the theme's accent hover) */
.md-typeset .md-button[class*="custom-button-"]:hover,
.md-typeset .md-button[class*="custom-button-"]:focus {
  filter: var(--btn-hover, brightness(0.95));
}

/* Slim hover: the theme's default .md-button:hover { opacity:.8 } still
   applies to custom buttons (nothing else declares opacity) and fading a pale
   trio toward the page half-cancels the brightness darken — on slim's big
   full-width bar the net change was near-invisible. Suppress the fade and use
   the stronger trio-aware brightness instead. Equal specificity with the rule
   above; source order wins. */
.md-typeset .md-button.custom-button--slim:hover,
.md-typeset .md-button.custom-button--slim:focus {
  opacity: 1;
  filter: var(--btn-hover-strong, brightness(0.9));
}