/* Supervisor booking surface (MEA-16): the bookings list, the participant
   lookup, the booking form, and the confirmation. Content-named classes in
   the layered convention (loaded globally via the app-css glob); every value
   a token — cards use --t-card-bg, text on the dark hero bg uses --t-bg-text,
   text on cards uses --t-text. */

@layer design {
  /* Participant search results: one card per match, the WHOLE card a link. */
  .participant-results {
    list-style: none;
    display: grid;
    gap: var(--mea-space-2);
    margin: var(--mea-space-4) 0;
    padding: 0;
  }
  .participant-results__card {
    display: block;
    padding: var(--mea-space-3);
    color: var(--t-link);
    text-decoration: none;
  }
  .participant-results__card:hover { color: var(--t-link-hover); }

  /* The booking form for the chosen participant. */
  .booking-form__for {
    font-weight: var(--mea-w-semibold);
    color: var(--t-text);
  }

  /* The booking confirmation's facts. */
  .booking-confirmed__facts {
    display: grid;
    gap: var(--mea-space-2);
    margin: var(--mea-space-3) 0 0;
  }
  .booking-confirmed__fact { display: flex; gap: var(--mea-space-2); }
  .booking-confirmed__label { color: var(--t-text-muted); }
  .booking-confirmed__value { color: var(--t-text); }

  /* A panel's trailing action (the create CTA / back button). */
  .dashboard-panel__action { margin-block-start: var(--mea-space-3); }

  /* The bookings list card sits on the dark hero bg but its own surface is
     the white card — row text must rebind the dark ink tokens, not inherit
     the hero's white text. */
  .supervisor-bookings .dashboard-panel { color: var(--t-text); }
}