/* ============================================================================
 * Odahl — Media & inline elements
 * Avatars, badges, tags, pills, kbd keys, inline code, blockquote.
 * Requires tokens.css.
 * ============================================================================ */

/* ── Avatar ────────────────────────────────────────────────────────── */
.odahl-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--aether-trace); color: var(--aether-deep);
  font-family: var(--display); font-style: italic; font-weight: 500;
  font-size: 0.95rem; letter-spacing: -0.02em;
  overflow: hidden; user-select: none;
  border: 1px solid var(--seam);
}
.odahl-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.odahl-avatar-sm { width: 24px; height: 24px; font-size: 0.78rem; }
.odahl-avatar-lg { width: 56px; height: 56px; font-size: 1.4rem; }
.odahl-avatar-xl { width: 96px; height: 96px; font-size: 2.2rem; }

/* ── Avatar group: stacked avatars with overlap ────────────────────── */
.odahl-avatar-group { display: inline-flex; }
.odahl-avatar-group .odahl-avatar { margin-left: -8px; box-shadow: 0 0 0 2px var(--bone); }
.odahl-avatar-group .odahl-avatar:first-child { margin-left: 0; }

/* ── Badge: small inline marker (counts, status) ───────────────────── */
.odahl-badge {
  display: inline-flex; align-items: center;
  padding: 0.1rem 0.55rem;
  font-family: var(--mono); font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  background: var(--aether-deep); color: var(--bone);
  border-radius: var(--radius-pill);
  letter-spacing: 0.02em;
}
.odahl-badge-subtle {
  background: var(--aether-trace); color: var(--aether-deep);
}
.odahl-badge-warning { background: var(--ember-deep); color: var(--bone-warm); }
.odahl-badge-success { background: var(--ash); color: var(--bone-warm); }

/* ── Tag: text label with optional dismiss ─────────────────────────── */
.odahl-tag {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.25rem 0.7rem;
  font-family: var(--display); font-style: italic; font-size: 0.85rem;
  color: var(--ink-soft);
  background: var(--bone-warm); border: 1px solid var(--seam);
}
.odahl-tag-dismiss {
  background: transparent; border: 0; cursor: pointer; padding: 0;
  color: var(--ink-mute); font-family: var(--mono); font-size: 0.85rem;
  display: inline-flex; align-items: center;
  transition: color var(--speed-quick) var(--ease-out);
}
.odahl-tag-dismiss:hover { color: var(--ember-deep); }

/* ── Pill: status indicator (active/inactive/pending/error) ────────── */
.odahl-pill {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.18rem 0.7rem;
  font-family: var(--body); font-size: 0.78rem; font-weight: 500;
  background: var(--bone-warm); border: 1px solid var(--seam);
  border-radius: var(--radius-pill); color: var(--ink-soft);
  letter-spacing: 0.02em;
}
.odahl-pill::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--ash);
}
.odahl-pill[data-state="active"]::before  { background: var(--ash); }
.odahl-pill[data-state="active"]          { color: var(--ash-deep); }
.odahl-pill[data-state="pending"]::before { background: var(--aether-deep); animation: pill-pulse 2s ease-in-out infinite; }
.odahl-pill[data-state="pending"]         { color: var(--aether-deep); }
.odahl-pill[data-state="error"]::before   { background: var(--ember-deep); }
.odahl-pill[data-state="error"]           { color: var(--ember-deep); }
.odahl-pill[data-state="inactive"]::before { background: var(--ash-light); }
.odahl-pill[data-state="inactive"]        { color: var(--ink-mute); }
@keyframes pill-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* ── Kbd: keyboard key visual ───────────────────────────────────────── */
.odahl-kbd {
  display: inline-block;
  padding: 0.1rem 0.45rem; min-width: 1.4em; text-align: center;
  font-family: var(--mono); font-size: 0.78rem;
  background: var(--bone); border: 1px solid var(--seam);
  border-bottom-width: 2px;
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  vertical-align: middle;
}

/* ── Inline code ───────────────────────────────────────────────────── */
.odahl-code-inline, code {
  font-family: var(--mono); font-size: 0.88em;
  padding: 0.1em 0.35em;
  background: var(--bone-warm); border: 1px solid var(--seam);
  color: var(--aether-deep);
  border-radius: var(--radius-sm);
}

/* ── Pre / code block ──────────────────────────────────────────────── */
.odahl-code, pre.odahl-code {
  font-family: var(--mono); font-size: 0.82rem; line-height: 1.55;
  padding: var(--gap-sm); background: var(--bone-warm);
  border: 1px solid var(--seam); border-left: 2px solid var(--aether-deep);
  color: var(--ink); overflow-x: auto;
  margin: var(--gap-sm) 0;
}
.odahl-code code { background: transparent; border: 0; padding: 0; color: inherit; }

/* ── Blockquote / pull quote ───────────────────────────────────────── */
.odahl-quote {
  font-family: var(--display); font-style: italic; font-weight: 300;
  font-size: 1.5rem; line-height: 1.4; color: var(--ink);
  padding: var(--gap-lg);
  border-left: 2px solid var(--aether-deep);
  background: var(--bone-warm);
  margin: var(--gap-lg) 0;
}
.odahl-quote-attribution {
  display: block; margin-top: 1rem;
  font-family: var(--display); font-style: italic; font-size: 0.95rem;
  font-weight: 400; color: var(--ink-mute);
}

/* ── Detail / disclosure ────────────────────────────────────────────── */
details.odahl-detail {
  border: 1px solid var(--seam); padding: 0;
  background: var(--bone-warm);
  margin-bottom: var(--gap-sm);
}
details.odahl-detail > summary {
  list-style: none; cursor: pointer;
  padding: var(--gap-sm); display: flex; justify-content: space-between;
  align-items: center;
  font-family: var(--display); font-style: italic; font-size: 1.05rem;
  color: var(--ink);
  transition: background var(--speed-quick) var(--ease-out);
}
details.odahl-detail > summary::-webkit-details-marker { display: none; }
details.odahl-detail > summary::after {
  content: '+'; font-family: var(--mono); font-size: 1.2rem;
  color: var(--aether-deep);
  transition: transform var(--speed-standard) var(--ease-out);
}
details.odahl-detail[open] > summary::after { content: '−'; }
details.odahl-detail > summary:hover { background: var(--aether-trace); }
details.odahl-detail-body {
  padding: var(--gap-sm); border-top: 1px solid var(--seam);
}