/* Reusable slide components for xaringan — kickers, cards, pills, buttons.
   Port of ../quarto/components.css to remark.js's .class[content] syntax.

   Add after xaringan-themer.css so these rules win:

     css: ["xaringan-themer.css",
           "../style/xaringan/split.css",
           "../style/xaringan/components.css"]

   Colors come from custom properties, which every theme in xaringan.R emits
   into xaringan-themer.css:

     --accent / --accent-2 / --accent-3   the theme's h1 / h2 / h3 colors
     --accent-ink                          text on an accent fill
     --surface-2 / --border / --muted      chrome, blended from ink over bg
     --ink                                 body text

   Each var() below carries a spacemacs_light()-tuned fallback, so this file
   still looks right on its own. The fallbacks live inline rather than in a
   :root block on purpose — a :root block here would load *after*
   xaringan-themer.css and beat the theme at equal specificity. To retheme by
   hand, redefine :root in a deck-local .css appended after this one. */

:root {
  --radius: 12px;
  --mono: 'Droid Sans Mono', 'DejaVu Sans Mono', monospace;
}

/* ------------------------------------------------------------------ *
 * Kicker — small-caps eyebrow label that sits above a heading.
 * Usage:  .kicker[PART TWO]
 *         # The actual title
 * ------------------------------------------------------------------ */

.remark-slide-content .kicker {
  display: block;
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.5em;
  line-height: 1.2;
  color: var(--accent, #3FA5E3);
  margin-bottom: 0.3em;
}

/* Kill the big top margin on a heading that directly follows a kicker,
   so the pair reads as one unit. */
.remark-slide-content .kicker + h1,
.remark-slide-content .kicker + h2,
.remark-slide-content .kicker + h3 {
  margin-top: 0;
}

.remark-slide-content .kicker.accent-2 { color: var(--accent-2, #BC2F5C); }
.remark-slide-content .kicker.accent-3 { color: var(--accent-3, #4FB99A); }

/* ------------------------------------------------------------------ *
 * Card — rounded, bordered panel.
 * Usage:  .card[ content ]
 *         .card.accent[ content ]   <- accent left rule
 * ------------------------------------------------------------------ */

.remark-slide-content .card {
  display: block;
  background: var(--surface-2, #F2EEE2);
  border: 1px solid var(--border, #DED9C9);
  border-radius: var(--radius);
  padding: 0.6em 0.9em;
  margin: 0.6em 0;
}

/* Don't let the first/last child push the padding open. */
.remark-slide-content .card > :first-child { margin-top: 0; }
.remark-slide-content .card > :last-child  { margin-bottom: 0; }

.remark-slide-content .card.accent   { border-left: 5px solid var(--accent, #3FA5E3); }
.remark-slide-content .card.accent-2 { border-left: 5px solid var(--accent-2, #BC2F5C); }
.remark-slide-content .card.accent-3 { border-left: 5px solid var(--accent-3, #4FB99A); }

/* Card with no fill — just the outline. */
.remark-slide-content .card.plain { background: transparent; }

/* Card title: a heading inside a card, scaled down and de-margined.
   Usage:  .card[ .card-title[Costs] ... ] */
.remark-slide-content .card-title {
  display: block;
  font-weight: 600;
  color: var(--accent-2, #BC2F5C);
  margin-bottom: 0.25em;
}

/* ------------------------------------------------------------------ *
 * Card row — lay several cards side by side.
 * Usage:  .cards[ .card[one] .card[two] .card[three] ]
 * ------------------------------------------------------------------ */

.remark-slide-content .cards {
  display: flex;
  gap: 0.7em;
  align-items: stretch;
  margin: 0.6em 0;
}

.remark-slide-content .cards > .card {
  flex: 1 1 0;
  margin: 0;
}

/* ------------------------------------------------------------------ *
 * Pill — small inline status badge.
 * Usage:  .pill[draft]   .pill.accent[shipped]
 * ------------------------------------------------------------------ */

.remark-slide-content .pill {
  display: inline-block;
  padding: 0.15em 0.7em;
  border-radius: 999px;
  background: var(--surface-2, #F2EEE2);
  border: 1px solid var(--border, #DED9C9);
  color: var(--muted, #6B6A65);
  font-family: var(--mono);
  font-size: 0.55em;
  letter-spacing: 0.03em;
  line-height: 1.6;
  vertical-align: middle;
}

.remark-slide-content .pill.accent {
  background: var(--accent, #3FA5E3);
  border-color: transparent;
  color: var(--accent-ink, #FFFFFF);
}

.remark-slide-content .pill.accent-2 {
  background: var(--accent-2, #BC2F5C);
  border-color: transparent;
  color: var(--accent-ink, #FFFFFF);
}

.remark-slide-content .pill.accent-3 {
  background: var(--accent-3, #4FB99A);
  border-color: transparent;
  color: var(--accent-ink, #FFFFFF);
}

/* ------------------------------------------------------------------ *
 * Button — a link styled as a button.
 * Usage:  .btn[[Read the paper](https://example.org)]
 *         .btn.accent[[Launch app](https://example.org)]
 * ------------------------------------------------------------------ */

.remark-slide-content .btn > a,
.remark-slide-content a.btn {
  display: inline-block;
  padding: 0.35em 1.1em;
  margin: 0.2em 0.3em 0.2em 0;
  border-radius: var(--radius);
  background: var(--surface-2, #F2EEE2);
  border: 1px solid var(--border, #DED9C9);
  color: var(--ink, #292B2E);
  font-size: 0.75em;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.remark-slide-content .btn > a:hover,
.remark-slide-content a.btn:hover {
  background: #fff;
  border-color: var(--accent, #3FA5E3);
}

.remark-slide-content .btn.accent > a,
.remark-slide-content a.btn.accent {
  background: var(--accent, #3FA5E3);
  border-color: transparent;
  color: var(--accent-ink, #FFFFFF);
}

.remark-slide-content .btn.accent > a:hover,
.remark-slide-content a.btn.accent:hover {
  filter: brightness(1.08);
  background: var(--accent, #3FA5E3);
}

/* Buttons sit inline; wrap them in .btn-row to space a group evenly. */
.remark-slide-content .btn-row {
  display: block;
  margin: 0.6em 0;
}

/* ------------------------------------------------------------------ *
 * Inverse slides — keep components legible on the dark background.
 * ------------------------------------------------------------------ */

/* No custom properties are redefined here on purpose. An inverse slide is not
   always "dark bg, light text" — monokai_dark(), for instance, flips inverse to
   a *light* background — so only the theme knows the right values. Every theme
   in xaringan.R emits its own `.remark-slide-content.inverse { --... }` block
   into xaringan-themer.css. The rules below just re-point components at
   whatever those turn out to be. */

.remark-slide-content.inverse .card,
.remark-slide-content.inverse .btn > a { color: var(--ink, #292B2E); }

/* Neutral pills only — :not() keeps the filled variants on --accent-ink,
   which a bare `.inverse .pill` rule would override at equal specificity. */
.remark-slide-content.inverse .pill:not(.accent):not(.accent-2):not(.accent-3) {
  color: var(--muted, #6B6A65);
}

.remark-slide-content.inverse .btn > a:hover {
  background: var(--surface-2, #3F4247);
  border-color: var(--accent, #3FA5E3);
}