.bookings-role-page__header {
    background: linear-gradient(135deg, var(--color-action), var(--color-action-hover));
    color: var(--color-neutral-ink-fg);
    padding: var(--spacing-mdlg) var(--spacing-lg);
    border-radius: var(--radius-card);
    margin-bottom: var(--spacing-md);
}

/* Team roster — one column of person chips (ADR-125/131); the row just
   frames the chip and carries the you/open state the chip itself can't. */
.bookings-role-page__team-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-sm);
}

.bookings-role-page__team-member {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    padding: var(--spacing-xsm) var(--spacing-sm);
    border-radius: var(--radius-card);
    border: 1px solid var(--role-tile-open-border, #d1d5db);
    background: var(--role-tile-open-bg, #f3f4f6);
}

.bookings-role-page__team-member--you {
    background: var(--role-tile-mine-bg, color-mix(in srgb, var(--color-action) 10%, white));
    border-color: var(--role-tile-mine-border, var(--color-action));
}

/* The viewer's own row: real face and name on the chip, the tint above and
   this tag carrying the "that's me" the old bespoke span used to. */
.bookings-role-page__team-you {
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-action);
}

/* An unfilled role wears the chip shape but not a person's weight. */
.bookings-role-page__team-member--open .global-person-chip__name {
    color: var(--color-text-muted);
}


/* ── Your Work: the pay periods of a standing seat ─────────────────────────
   A booking role's deliverable is one button in the middle column. A seat is
   the same job repeated, so the column carries one row per period and the
   button moves inside the row. The rows wear the Job card's own divided-row
   shape — same gutter, same hairline between rows — so the two cards read as
   one page rather than a list bolted onto it. Every value here is a token;
   the row tint is the action ramp's wash, the one a hovered or selected row
   takes everywhere else in the app. */
.bookings-role-periods {
    padding: var(--spacing-xs) 0 var(--spacing-sm);
}

.bookings-role-periods [x-cloak] { display: none !important; }

.bookings-role-period + .bookings-role-period {
    border-top: 1px solid var(--color-border-subtle);
}

.bookings-role-period__row {
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    display: grid;
    align-items: center;
    gap: var(--spacing-sm);
    /* dot · date · what happened · pay · amount · chevron. The middle column
       is the only elastic one, so a long badge never squeezes the date. */
    grid-template-columns: 14px 5.75rem minmax(6.875rem, 1fr) auto 4.125rem 1rem;
    padding: var(--spacing-sm) var(--spacing-lg);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.bookings-role-period__row:hover,
.bookings-role-period--expanded > .bookings-role-period__row {
    background: var(--color-action-tint);
}

.bookings-role-period__date {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
}

.bookings-role-period__work {
    font-size: var(--font-size-md);
    color: var(--color-text-light);
}

/* A period that came and went unmarked says so in the same amber the rest of
   the product uses for "this is waiting on you". */
.bookings-role-period--late .bookings-role-period__work {
    color: var(--color-warning);
    font-weight: var(--font-weight-medium);
}

/* Marked in this session: the amber has to go with the word it described.
   After this rule so it wins on equal specificity. */
.bookings-role-period--marked .bookings-role-period__work {
    color: var(--color-text-light);
    font-weight: var(--font-weight-body);
}

/* A period nobody has been billed for yet is a fact, not a task. */
.bookings-role-period--upcoming .bookings-role-period__date,
.bookings-role-period--upcoming .bookings-role-period__work,
.bookings-role-period--upcoming .bookings-role-period__amount {
    opacity: 0.55;
}

.bookings-role-period__amount {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    text-align: right;
    color: var(--color-text);
}

.bookings-role-period__chev {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    opacity: 0.5;
    transition: transform var(--transition-fast);
}

.bookings-role-period--expanded .bookings-role-period__chev {
    transform: rotate(90deg);
    opacity: 0.9;
}

.bookings-role-period__panel {
    padding: 0 var(--spacing-lg) var(--spacing-md);
    background: var(--color-action-tint);
}

/* On a phone the pay badge and the amount cannot both sit on the row, so the
   badge steps out and the amount keeps its place: what it pays is the fact a
   worker scans for, and the badge's answer is inside the row anyway. */
@media (max-width: 575.98px) {
    .bookings-role-period__row {
        grid-template-columns: 14px 4.5rem minmax(0, 1fr) 3.75rem 1rem;
        padding: var(--spacing-sm) var(--spacing-md);
        gap: var(--spacing-xsm);
    }
    .bookings-role-period__pay { display: none; }
    .bookings-role-period__panel { padding: 0 var(--spacing-md) var(--spacing-md); }
}