/*
 * Page metadata badges (surfaces / level / time).
 *
 * Rendered by hooks/page_badges.py as a strip directly under the H1 of
 * tutorials and how-to pages, from page frontmatter. Colours are dark-mode
 * aware and lean on the Hadron brand anchors (see hadron-brand.css).
 */

:root {
  --hb-surface-bg:      rgba(2, 48, 71, 0.06);
  --hb-surface-fg:      #0e4a5e;
  --hb-accent-bg:       rgba(33, 158, 188, 0.14);
  --hb-accent-fg:       #0e7490;
  --hb-beginner-bg:     rgba(46, 125, 50, 0.12);
  --hb-beginner-fg:     #2e7d32;
  --hb-intermediate-bg: rgba(255, 183, 3, 0.20);
  --hb-intermediate-fg: #8a5300;
  --hb-advanced-bg:     rgba(251, 133, 0, 0.16);
  --hb-advanced-fg:     #b34a00;
}

[data-md-color-scheme="slate"] {
  --hb-surface-bg:      rgba(142, 202, 230, 0.10);
  --hb-surface-fg:      #a9d8ea;
  --hb-accent-bg:       rgba(33, 158, 188, 0.22);
  --hb-accent-fg:       #8ecae6;
  --hb-beginner-bg:     rgba(129, 199, 132, 0.16);
  --hb-beginner-fg:     #9fd8a2;
  --hb-intermediate-bg: rgba(255, 183, 3, 0.18);
  --hb-intermediate-fg: #ffd166;
  --hb-advanced-bg:     rgba(251, 133, 0, 0.20);
  --hb-advanced-fg:     #ffb27a;
}

.md-typeset .hadron-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: -0.4rem 0 1.1rem;   /* pull up toward the H1, breathe before the intro */
}

.md-typeset .hadron-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.32em;
  padding: 0.2em 0.66em;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  letter-spacing: 0.01em;
}

.md-typeset .hadron-badge__icon {
  flex: 0 0 auto;
}

/* Surface chips (also links to the CLI-vs-MCP explanation). */
.md-typeset a.hadron-badge--surface,
.md-typeset a.hadron-badge--surface:hover {
  text-decoration: none;
  background: var(--hb-surface-bg);
  color: var(--hb-surface-fg);
}

.md-typeset a.hadron-badge--surface.hadron-badge--accent,
.md-typeset a.hadron-badge--surface.hadron-badge--accent:hover {
  background: var(--hb-accent-bg);
  color: var(--hb-accent-fg);
}

.md-typeset a.hadron-badge--surface:hover {
  filter: brightness(0.97);
}

/* Level chips. */
.md-typeset .hadron-badge--level-beginner {
  background: var(--hb-beginner-bg);
  color: var(--hb-beginner-fg);
}
.md-typeset .hadron-badge--level-intermediate {
  background: var(--hb-intermediate-bg);
  color: var(--hb-intermediate-fg);
}
.md-typeset .hadron-badge--level-advanced {
  background: var(--hb-advanced-bg);
  color: var(--hb-advanced-fg);
}

/* Time chip: quiet, outlined. */
.md-typeset .hadron-badge--time {
  background: transparent;
  color: var(--md-default-fg-color--light);
  box-shadow: inset 0 0 0 1px var(--md-default-fg-color--lightest);
}