/* Speakers — hand-authored additions.

   pages/speakers.css is GENERATED from the design handoff by scripts/extract_page_css.py and
   must never be hand-edited; additions live here (CLAUDE.md house style).

   These replace inline `style=` attributes in the mock. No colour literals — TIER 2 semantic
   tokens, or TIER 1 primitives only where the design system itself has no semantic role for
   an on-dark variant. */

/* The eyebrow inside the dark anticipation panel. */
.anticipate .t-eyebrow {
  color: var(--p-accent-300);
}

/* The notify form sits on the dark panel, so its input needs the inverse treatment. The
   design system has no on-dark input variant yet; when it gets one, delete this. */
.anticipate .notify {
  width: 100%;
  max-width: 440px;
}

.anticipate .notify .input {
  background: var(--p-graphite-800);
  border-color: var(--p-graphite-700);
  color: var(--p-white);
}

.anticipate .notify-consent {
  color: var(--p-steel-300);
}

/* Chips inside a speaker card align left rather than stretching to the card width. */
.speaker-card__body .chip {
  align-self: flex-start;
}

/* A TBC placeholder card carries only a label. */
.speaker-card--tbd .t-eyebrow {
  color: var(--p-steel-400);
}

/* ── Profile page ─────────────────────────────────────────────────────────── */

.profile-card {
  padding: var(--sp-5);
}

/* The profile name is a heading but reads as a name, not a section title — body face,
   sentence case, no tracking. */
.profile__name {
  text-transform: none;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 24px;
  margin: 0;
}

.profile__body .chip {
  align-self: flex-start;
}

/* "On the agenda" links reuse the agenda page's `.spk-mini` pill shape. That component is
   defined in pages/agenda.css, which this page does not load, so the shape is restated here
   rather than pulling in a whole stylesheet for one pill. */
.on-agenda .agenda-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--c-border-subtle);
  border-radius: var(--r-pill);
  padding: 6px 14px;
  font-size: var(--fs-small);
  text-decoration: none;
  color: var(--c-text-primary);
  width: fit-content;
}

.profile__linkedin {
  font-size: var(--fs-small);
}