/* ============================================================
   Kit — header.css   (reusable part: the card header)
   The top section every card state shares. It carries the
   persistent avatar plus, optionally, a heading, a subhead (with
   a doodle slot), and a progress bar + count chip.

   Fill:
     .bp-header            accent (checklist, resource center)
     .bp-header--plain     white (the explainer tooltip)
   Optional rows are just present-or-absent in the markup.
   A media/video block (.bp-media) sits ABOVE a plain header.
   ============================================================ */

.bp-header {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: var(--bp-accent);
  color: var(--bp-accent-foreground);
}
.bp-header--plain {
  background: var(--bp-surface);
  color: var(--bp-surface-foreground);
  /* horizontal padding matches the body below, so heading, copy and
     buttons all share one left/right edge; a faint hairline marks the
     break from the body */
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--bp-header-divider);
}

/* identity row: avatar + name/role + close */
.bp-header__top { display: flex; align-items: center; gap: 8px; }

.bp-header__avatar {
  width: 32px; height: 32px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bp-surface);
}

.bp-header__id {
  display: flex; align-items: baseline; gap: 5px;
  flex: 0 1 auto; min-width: 0;
  font-size: 12px; line-height: 18px;
}
.bp-header__name { font-weight: 600; flex: none; white-space: nowrap; }
/* the role is never meant to be long; if it is, it truncates with an
   ellipsis on one line rather than wrapping or shoving the close button */
.bp-header__role {
  font-weight: 400; opacity: .64;
  flex: 0 1 auto; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bp-header--plain .bp-header__role { opacity: 1; color: var(--bp-surface-muted); }

/* Close button.
   The X is a static icon tinted to --close-ink and held at 64% so it never
   reads pure; on hover it goes full strength and rotates a quarter turn.
   The button chrome itself: transparent at rest, an outline at 24% on
   hover, outline 24% + fill 16% on press. Ink tracks the header fill. */
.bp-header__close {
  --close-ink: 255, 255, 255;            /* white on the accent header */
  margin-left: auto;
  flex: none;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border: 1px solid transparent;
  border-radius: 16px; corner-shape: squircle;
  background: transparent; color: inherit; cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.bp-header--plain .bp-header__close { --close-ink: 17, 24, 39; }  /* dark on the white header */
.bp-header__close:hover  { border-color: rgba(var(--close-ink), .12); background: transparent; }
.bp-header__close:active { border-color: rgba(var(--close-ink), .24); background: rgba(var(--close-ink), .16); }
/* on the white header the dark ink reads heavier, so press is lighter there */
.bp-header--plain .bp-header__close:active { border-color: rgba(var(--close-ink), .16); background: rgba(var(--close-ink), .08); }
.bp-header__close svg { width: 14px; height: 14px; display: block; opacity: .64; transition: opacity .15s ease, transform .2s cubic-bezier(.34,1.56,.64,1); }
/* on hover the X goes full strength and rotates a quarter turn */
.bp-header__close:hover svg { opacity: 1; transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) {
  .bp-header__close:hover svg { transform: none; }
}

/* heading + subhead */
.bp-header__heading { font-size: 16px; line-height: 24px; font-weight: 600; }

.bp-header__sub {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 12px; line-height: 18px;
}
/* Feedback illustration slot. Holds a looping lottie motif (white
   outline, black fill knocked back to 16% so it reads as a dark tint
   over the accent). Motifs rotate so the same one isn't shown twice in
   a row. A static SVG is the no-JS fallback. */
.bp-header__doodle {
  flex: none; width: 52px; height: 52px;
  display: grid; place-items: center;
  color: var(--bp-accent-foreground);
}
.bp-header__doodle svg,
.bp-header__doodle .bp-header__motif { width: 100%; height: 100%; }
.bp-header__sub-text { opacity: .82; }

/* progress bar + count chip */
.bp-header__progress { display: flex; align-items: center; gap: 14px; }
.bp-header__track {
  flex: 1; height: 12px; border-radius: 12px;
  background: var(--bp-progress-track); overflow: hidden;
}
.bp-header__fill {
  height: 100%; width: 0%; border-radius: 12px;
  background: var(--bp-progress-fill);
  transition: width .4s cubic-bezier(.2,.8,.2,1);
}
.bp-header__count {
  flex: none; height: 22px; padding: 0 8px;
  display: inline-flex; align-items: center;
  border-radius: 9999px;
  background: var(--bp-surface); color: var(--bp-accent);
  font-size: 12px; font-weight: 600;
}

/* ---------- media / video header (sits above a plain header) ----------
   The thumbnail/video carries its own title art, so there is no text
   layer here. A primary-colour wash at 64% ties it to the brand. The
   play control is a blurred dark disc with a white glyph; it scales up
   on hover (and will run the play lottie once that asset lands). */
.bp-media {
  position: relative;
  background: var(--bp-accent);
  overflow: hidden;
  corner-shape: squircle;
}
/* the media sizes to its own thumbnail/video (no crop).
   DIRECT child only, so it never grabs the nested play-glyph img */
.bp-media > img,
.bp-media > video {
  display: block;
  width: 100%; height: auto;
}
/* brand wash: a colour-blend re-hues the thumbnail to the primary so it
   reads as the brand even over a blue screenshot, while keeping the
   thumbnail's own light/dark so it never goes muddy */
.bp-media::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: var(--bp-accent);
  mix-blend-mode: color;
  pointer-events: none;
}
.bp-media__play {
  position: absolute; top: 50%; left: 50%; z-index: 2;
  transform: translate(-50%, -50%);
  width: 56px; height: 56px;
  border: none; border-radius: 50%;
  background: rgba(0, 0, 0, .32);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  color: #fff;
  display: grid; place-items: center; cursor: pointer;
  transition: transform .16s cubic-bezier(.2, .8, .2, 1);
}
.bp-media__play:hover { transform: translate(-50%, -50%) scale(1.08); }
/* play/pause glyph, centered in the disc (img swap or inline svg) */
.bp-media__play-anim,
.bp-media__play svg { width: 24px; height: 24px; display: block; fill: #fff; }