/* Duon Labs brutalist primitives.
 *
 * Brutalist-in-motion design language. Hard, rigid, monolithic.
 * Each primitive is a thin wrapper around tokens (apps/_brand/tokens.css)
 * — no hardcoded values. Change a token, every primitive updates.
 *
 * Lean by design: 4 primitives, ~10 lines each. Add more only when a
 * real use case appears. Defer = brutalist restraint.
 *
 * Surfaces consume:
 *   - Front (Django): served via STATICFILES_DIRS, loaded in base.html
 *     after tokens.css + motion.css.
 *   - Flywheel (Vite): @import "../../../_brand/components.css" in main.css.
 *   - Decks (Slidev): @import "../_brand/components.css" in style.css.
 *
 * Documented in .agents/duon-brand-context.md (the "what + when to use"). */

/* ---- .highlight ----------------------------------------------------- */
/* Yellow marker through text. Line-by-line via box-decoration-break: clone.
 * Use on H1s, key phrases, pull quotes. Surgical, not decorative. */
.highlight {
  background: var(--color-accent-yellow);
  color: var(--color-bg-light);                /* black on yellow */
  padding: 0.05em 0.25em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ---- .accent-bar ---------------------------------------------------- */
/* Hard yellow bar — vertical (left of content) or horizontal (top of card).
 * Default vertical 4px wide. Use .accent-bar--top for horizontal 2px tall. */
.accent-bar {
  position: relative;
}
.accent-bar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--color-accent-yellow);
}
.accent-bar--top::before {
  width: 48px;
  height: 2px;
}

/* ---- .metric -------------------------------------------------------- */
/* Big mono number + small mono label below. Tabular-nums for stable width
 * when values change (data integrity). */
.metric {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.metric__value {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700;
  letter-spacing: var(--tracking-tighter);
  line-height: 1;
}
.metric__label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: var(--opacity-tertiary);
}

/* ---- .rule-thick / .rule-hair --------------------------------------- */
/* Hard horizontal dividers. No fade, no gradient. Brutalist materiality. */
.rule-thick {
  border: 0;
  border-top: 4px solid currentColor;
  margin: 0;
}
.rule-hair {
  border: 0;
  border-top: 1px solid currentColor;
  opacity: var(--opacity-faint);
  margin: 0;
}

/* ---- .section-stripe ------------------------------------------------ */
/* Short vertical bar used as a typographic anchor next to section
 * headers (`01 RESEARCH` + h2). Distinct from .accent-bar — that one
 * is loud yellow for ONE accented section per page; this is subtle,
 * neutral, and meant to repeat across every section. Picks up
 * currentColor so it inverts naturally between dark and light
 * surfaces; hidden below md since section markers stack tight on
 * mobile and don't need the rhythm. */
.section-stripe {
  display: none;
  width: 2px;
  height: 2rem;
  background: currentColor;
  opacity: 0.2;
  flex-shrink: 0;
}
@media (min-width: 768px) {
  .section-stripe {
    display: block;
  }
}