.payments-balance-cards {
    display: flex;
    gap: var(--spacing-smd);
    margin-bottom: var(--spacing-md);
}

.payments-balance-card {
    flex: 1;
    min-width: 0;
    padding: var(--spacing-md) var(--spacing-mdlg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-card-bg);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    text-align: left;
    text-decoration: none;
    color: inherit;
    position: relative;
    overflow: hidden;
}

.payments-balance-card__label {
    font-size: var(--font-size-sm);
    font-weight: 500;
    opacity: 0.85;
    margin-bottom: var(--spacing-xs);
}

.payments-balance-card__amount {
    font-size: var(--font-size-h1);
    font-weight: 700;
    line-height: 1.2;
}

.payments-balance-card__detail {
    font-size: var(--font-size-xs);
    opacity: 0.75;
    margin-top: var(--spacing-2xs);
}

.payments-balance-card__indicator {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: transparent;
    transition: background 0.2s;
}

.payments-balance-card--selected .payments-balance-card__indicator {
    background: currentColor;
}

/* Card variants — the fixed action ink + global semantic colors */
.payments-balance-card--earnings {
    background: linear-gradient(135deg, var(--color-action), var(--color-action-hover));
    color: var(--color-neutral-ink-fg);
    /* Raw fallback first for engines without color-mix(); the mix replaces it. */
    border-color: rgba(36, 41, 47, 0.4);
    border-color: color-mix(in srgb, var(--color-action) 40%, transparent);
}

.payments-balance-card--paid {
    background: linear-gradient(135deg, #198754, #20c997);
    color: #fff;
    border-color: rgba(21, 115, 71, 0.3);
}

.payments-balance-card--outstanding {
    background: var(--color-card-bg);
    color: #1f2937;
    border-color: var(--color-border);
    box-shadow: var(--shadow-sm);
}

.payments-balance-card--outstanding.payments-balance-card--selected {
    border-color: #1f2937;
}

/* In-Transit card — money already on its way to the worker's bank. Calm blue,
   matching the deposit in-transit accent. */
.payments-balance-card--in-transit {
    background: #eff6ff;
    color: #1e40af;
    border-color: #bfdbfe;
}

.payments-balance-card--in-transit.payments-balance-card--selected {
    border-color: #1e40af;
}

@media (max-width: 767.98px) {
    .payments-balance-cards {
        flex-wrap: wrap;
    }
    .payments-balance-card {
        flex: 1 1 calc(50% - 0.375rem);
        min-width: 140px;
    }
}

@media (max-width: 480px) {
    .payments-balance-card {
        flex: 1 1 100%;
    }
}

/* Copy reference button (inline in cards and details) */
.payments-card__copy-ref {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: var(--spacing-2xs);
    margin-left: var(--spacing-xs);
    font-size: var(--font-size-xs);
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
    vertical-align: middle;
}

.payments-card__copy-ref:hover {
    color: #374151;
    background: #f3f4f6;
}

.payments-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-smd) var(--spacing-md);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-action);
    border-radius: var(--radius-card);
    margin-bottom: var(--spacing-sm);
    background: var(--color-card-bg);
    cursor: pointer;
    transition: box-shadow 0.15s, border-color 0.15s;
}

.payments-card:hover {
    box-shadow: var(--shadow-md);
    border-left-color: var(--color-action-hover);
}

.payments-card__left {
    min-width: 0;
    flex: 1;
}

.payments-card__role {
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-lg);
    color: #1f2937;
}

.payments-card__opp {
    font-size: var(--font-size-sm);
    color: #6b7280;
    margin-top: var(--spacing-2xs);
}

.payments-card__right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--spacing-xs);
    flex-shrink: 0;
    margin-left: var(--spacing-md);
}

.payments-card__amount {
    font-weight: 700;
    font-size: var(--font-size-base);
    color: #1f2937;
}

.payments-card__amount--paid {
    color: #10b981;
}

/* Deposit card — a native <details> that expands to the bills inside it */
.payments-deposit-card {
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-text-muted);
    border-radius: var(--radius-card);
    margin-bottom: var(--spacing-smd);
    background: var(--color-card-bg);
    overflow: hidden;
}

.payments-deposit-card--paid { border-left-color: #10b981; background: var(--color-grey-50); }
.payments-deposit-card--in_transit { border-left-color: #3b82f6; }
.payments-deposit-card--pending { border-left-color: var(--color-warning); }
.payments-deposit-card--failed { border-left-color: var(--color-error); }
.payments-deposit-card--canceled { border-left-color: var(--color-text-muted); }

.payments-deposit-card--paid .payments-deposit-card__amount { color: #6b7280; }

.payments-deposit-card__summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-smd);
    padding: var(--spacing-smd) var(--spacing-md);
    cursor: pointer;
    list-style: none;
}

.payments-deposit-card__summary::-webkit-details-marker { display: none; }

.payments-deposit-card__summary-left {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    min-width: 0;
}

.payments-deposit-card__chevron {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    flex-shrink: 0;
    transition: transform 0.15s ease;
}

.payments-deposit-card[open] .payments-deposit-card__chevron { transform: rotate(90deg); }

.payments-deposit-card__heading {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xs);
    min-width: 0;
}

.payments-deposit-card__title {
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-lg);
    color: #1f2937;
}

.payments-deposit-card__meta {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    font-weight: 500;
}

.payments-deposit-card__summary-right {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-shrink: 0;
}

.payments-deposit-card__amount {
    font-weight: 700;
    font-size: var(--font-size-lg);
    color: #1f2937;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}

.payments-deposit-card__bill-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-smd);
    padding: var(--spacing-sm) var(--spacing-md);
}

.payments-deposit-card__bill-row + .payments-deposit-card__bill-row {
    border-top: 1px solid var(--color-grey-50);
}

.payments-deposit-card__bill-info {
    display: flex;
    flex-direction: column;
    gap: 0.0625rem;
    min-width: 0;
}

.payments-deposit-card__bill-role {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: #374151;
}

.payments-deposit-card__bill-opp {
    font-weight: 400;
    color: var(--color-text-muted);
}

.payments-deposit-card__bill-sub {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

@media (max-width: 767.98px) {
    .payments-deposit-card__summary {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
    }
    .payments-deposit-card__summary-right {
        width: 100%;
        justify-content: space-between;
    }
    .payments-deposit-card__bill-opp {
        white-space: normal;
    }
}

.payments-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-md);
}

.payments-modal {
    background: var(--color-card-bg);
    border-radius: 12px;
    box-shadow: 0 20px 60px var(--ink-alpha-15);
    max-width: 520px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--spacing-lg);
    position: relative;
}

.payments-modal__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    border: none;
    background: none;
    color: #6b7280;
    cursor: pointer;
    font-size: var(--font-size-base);
    padding: var(--spacing-xs);
    line-height: 1;
}

.payments-modal__close:hover {
    color: #1f2937;
}

.payments-bill-detail__header {
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-smd);
    border-bottom: 1px solid #f3f4f6;
}

.payments-bill-detail__title {
    font-weight: 700;
    margin-bottom: var(--spacing-xs);
}

.payments-bill-detail__opp {
    font-size: var(--font-size-md);
    color: #6b7280;
    margin-bottom: var(--spacing-sm);
}

.payments-bill-detail__section-title {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-sm);
}

.payments-bill-detail__items {
    margin-bottom: var(--spacing-md);
}

.payments-bill-detail__item {
    display: flex;
    justify-content: space-between;
    padding: var(--spacing-xsm) 0;
    font-size: var(--font-size-md);
    color: #4b5563;
}

.payments-bill-detail__item--total {
    border-top: 1px solid var(--color-border-hairline);
    margin-top: var(--spacing-xs);
    padding-top: var(--spacing-sm);
    font-weight: 700;
    color: #1f2937;
}

.payments-bill-detail__item-amount {
    font-weight: var(--font-weight-medium);
    font-variant-numeric: tabular-nums;
}

.payments-bill-detail__timeline {
    margin-bottom: var(--spacing-md);
}

.payments-bill-detail__event {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-smd);
    padding: var(--spacing-xsm) 0;
    position: relative;
}

.payments-bill-detail__event-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-border);
    margin-top: var(--spacing-xs);
    flex-shrink: 0;
}

.payments-bill-detail__event:first-child .payments-bill-detail__event-dot {
    background: var(--color-action);
}

.payments-bill-detail__event-content {
    display: flex;
    justify-content: space-between;
    flex: 1;
    gap: var(--spacing-sm);
}

.payments-bill-detail__event-main {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xs);
    flex: 1;
    min-width: 0;
}

.payments-bill-detail__event-label {
    font-size: var(--font-size-md);
    color: #374151;
}

.payments-bill-detail__event-detail {
    font-size: var(--font-size-xs);
    color: #6b7280;
    line-height: 1.3;
}

.payments-bill-detail__event-date {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    flex-shrink: 0;
}

.payments-bill-detail__meta {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    padding-top: var(--spacing-sm);
    border-top: 1px solid #f3f4f6;
}

/* Bill timeline (inline step list in the bill drawer and detail page) */
.payments-bill-timeline {
    position: relative;
    list-style: none;
    margin: 0;
    padding-left: var(--spacing-lg);
}

.payments-bill-timeline__step {
    position: relative;
    padding-bottom: var(--spacing-mdlg);
    padding-left: var(--spacing-md);
}

.payments-bill-timeline__step:last-child {
    padding-bottom: 0;
}

.payments-bill-timeline__step::before {
    content: "";
    position: absolute;
    left: -24px;
    top: 8px;
    bottom: -12px;
    width: 2px;
    background: #dee2e6;
}

.payments-bill-timeline__step:last-child::before {
    display: none;
}

/* The step marker itself is the shared .global-status-dot atom
   (components/status-dot.css); the timeline only positions it on the rail. */
.payments-bill-timeline .global-status-dot {
    position: absolute;
    left: -30px;
    top: 4px;
}

.payments-bill-timeline__label {
    display: block;
    font-weight: var(--font-weight-medium);
}

.payments-bill-timeline__time {
    display: block;
    font-size: var(--font-size-sm);
}

/* ===========================================
   Pipeline indicator (payment progress; the stage count varies by rail)
   =========================================== */
.payments-pipeline-indicator {
    display: flex;
    align-items: flex-start;
    padding: var(--spacing-sm) var(--spacing-md) var(--spacing-sm);
}

/* The rail may shrink: stages give up width, a label folds under its dot and
   a connector closes to a hair, so a squeezed track (a phone row, a row beside
   a pushed drawer) keeps the rail inside its own cell instead of running the
   labels over the money column. With room to spare nothing shrinks, so the
   wide desktop row is unchanged. */
.payments-pipeline-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
    flex: 0 1 auto;
    min-width: 0;
}

/* The stage marker is the shared .global-status-dot atom
   (components/status-dot.css); the state class is chosen in the template. The
   pipeline only adds its two decorations on top: the pulse on the live stage
   and the × glyph on a failed one. The drawer rail (.payments-bill-detail__st) carries
   the same atom and shares both decorations, so its dots read exactly like the
   main card's. */
.payments-pipeline-stage .global-status-dot,
.payments-bill-detail__st .global-status-dot {
    position: relative;
}

.payments-pipeline-stage--active .global-status-dot,
.payments-bill-detail__st--active .global-status-dot {
    animation: pipeline-pulse 1.5s ease-in-out infinite;
}

.payments-pipeline-stage--failed .global-status-dot::after,
.payments-bill-detail__st--failed .global-status-dot::after {
    content: "\00d7";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--color-neutral-ink-fg);
    font-size: var(--font-size-2xs);
    font-weight: 700;
    line-height: 1;
}

.payments-pipeline-label {
    font-size: var(--font-size-2xs);
    color: var(--color-text-muted);
    text-align: center;
}

.payments-pipeline-stage--completed .payments-pipeline-label {
    color: var(--ms-done);
    font-weight: 500;
}

.payments-pipeline-stage--active .payments-pipeline-label {
    color: var(--ms-active);
    font-weight: 500;
}

.payments-pipeline-stage--failed .payments-pipeline-label {
    color: var(--color-error);
    font-weight: 500;
}

.payments-pipeline-connector {
    flex: 1;
    height: 2px;
    background: #e5e7eb;
    margin-top: var(--spacing-xsm);
    min-width: var(--spacing-md);
}

.payments-pipeline-connector--completed {
    background: var(--ms-done);
}

.payments-pipeline-connector--active {
    background: linear-gradient(90deg, var(--ms-done), var(--ms-active));
}

/* The halo reads --ms-active, never a fixed blue — the throb has to match
   the dot it wraps. */
@keyframes pipeline-pulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ms-active) 40%, transparent); }
    50% { box-shadow: 0 0 0 4px transparent; }
}

@media (prefers-reduced-motion: reduce) {
    .payments-pipeline-stage--active .global-status-dot,
    .payments-bill-detail__st--active .global-status-dot {
        animation: none;
    }
}

.payments-pipeline-indicator--compact {
    padding: var(--spacing-xs) var(--spacing-sm);
}

.payments-pipeline-indicator--compact .payments-pipeline-label {
    display: none;
}

/* The compact dot size comes from .global-status-dot--sm, applied in the
   template — the surface decides the size, not a descendant override. */
.payments-pipeline-indicator--compact .payments-pipeline-connector {
    margin-top: var(--spacing-xs);
    min-width: 8px;
}

.payments-pipeline-indicator--compact .global-status-dot::after {
    display: none;
}

.payments-card-group {
    margin-bottom: var(--spacing-sm);
}

.payments-card-group .payments-card {
    margin-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-color: #f3f4f6;
}

.payments-card-group > .payments-pipeline-indicator {
    border: 1px solid var(--color-border);
    border-top: none;
    border-left: 3px solid var(--color-action);
    border-bottom-left-radius: var(--radius-card);
    border-bottom-right-radius: var(--radius-card);
    background: var(--color-grey-50);
}

@media (max-width: 480px) {
    .payments-pipeline-label {
        font-size: var(--font-size-2xs);
    }

    .payments-pipeline-indicator {
        padding: var(--spacing-xsm) var(--spacing-smd) var(--spacing-sm);
    }
}

td .payments-pipeline-indicator {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

.payments-deposit-card__bills {
    margin-top: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-smd);
    background: var(--color-grey-50);
    border-radius: var(--radius-md);
    border: 1px solid #f3f4f6;
}

.payments-deposit-card__bill-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-xs) 0;
    font-size: var(--font-size-sm);
}

.payments-deposit-card__bill-row + .payments-deposit-card__bill-row {
    border-top: 1px solid var(--color-border-hairline);
}

.payments-deposit-card__bill-ref {
    color: #374151;
}

.payments-deposit-card__bill-amount {
    font-weight: var(--font-weight-medium);
    font-variant-numeric: tabular-nums;
    color: #1f2937;
}

.payments-filter-input  { max-width: 200px; }
.payments-filter-select { max-width: 200px; }
.payments-filter-narrow { max-width: 150px; }
.payments-placeholder-sm { height: 80px; }
.payments-placeholder-lg { height: 200px; }

/* Stat cards: inherits from main.css .global-stat-card, .global-stat-card-value, .global-stat-card-label */

/* ====================================   Bank Setup Screen
   The whole My Pay page until a bank is connected, and every state of the
   worker-setup landing page: the shared setup card (_setup_card.html). It
   used to sit bare on the page; Nick asked for a real container (2026-09-23),
   so the card is the house hero surface (.global-card --elevated) with the
   recipe below.
   =========================================== */
.payments-bank-setup {
    padding: 3.5rem var(--spacing-lg);
    text-align: center;
}

/* The card itself: one centered column. .global-card brings the surface
   (fill, radius, --elevated's floating shadow); this brings the layout. */
.payments-setup-card {
    align-items: center;
    max-width: 28rem;
    margin: 0 auto var(--spacing-lg);
    padding: var(--spacing-2xl) var(--spacing-xl);
}

/* The glyph in a soft tinted disc — same dimensions as the empty-state badge
   (main.css), restated here because a setup card is not an empty state: it
   also comes in the success and warning tempers the connect states need. */
.payments-setup-card__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: var(--radius-pill);
    background: var(--color-action-selected);
    color: var(--color-action);
    font-size: var(--font-size-h1);
    line-height: 1;
    margin-bottom: var(--spacing-md);
}

.payments-setup-card__badge--success {
    background: var(--status-success-bg);
    color: var(--color-success);
}

.payments-setup-card__badge--warning {
    background: var(--status-warning-bg);
    color: var(--color-warning-text);
}

.payments-setup-card__title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    margin-bottom: var(--spacing-sm);
}

/* The measure keeps the sentence from running wall to wall inside the card. */
.payments-setup-card__lead,
.payments-setup-card__detail {
    max-width: 36ch;
    margin: 0 auto;
    color: var(--color-text-muted);
    line-height: 1.6;
}

.payments-setup-card__action {
    margin-top: var(--spacing-lg);
}

/* The card's foot: "Powered by" and the Stripe wordmark, nothing else — the
   mark carries the trust (Nick, 2026-09-24). The zeroed bottom margin keeps
   the card's own padding as the only space below it. */
.payments-setup-card__trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    margin: var(--spacing-lg) 0 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    line-height: 1;
}

/* Sized off the em so it tracks the line's own type; a shade taller than the
   words, the way Stripe's own lockup sits. Ink comes from currentColor. */
.payments-setup-card__stripe-mark {
    height: 1.2em;
    width: auto;
}

@media (max-width: 640px) {
    .payments-bank-setup {
        padding: var(--spacing-xl) var(--spacing-md);
    }
}

/* ============================================
   Next payout banner — shown at the top only when a payout is in flight
   ============================================ */
.payments-next-payout-banner {
    display: flex;
    align-items: center;
    gap: var(--spacing-smd);
    flex-wrap: wrap;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 12px;
    padding: var(--spacing-smd) var(--spacing-md);
    margin-bottom: var(--spacing-md);
    color: #1e40af;
}

.payments-next-payout-banner__icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(30, 64, 175, 0.1);
    display: grid;
    place-items: center;
    flex: none;
    font-size: var(--font-size-xl);
}

.payments-next-payout-banner__main {
    display: flex;
    flex-direction: column;
    gap: 0.0625rem;
    min-width: 0;
}

.payments-next-payout-banner__label {
    font-size: var(--font-size-2xs);
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.payments-next-payout-banner__amount {
    font-size: 1.4rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.payments-next-payout-banner__when {
    margin-left: auto;
    text-align: right;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
}

.payments-next-payout-banner__when small {
    display: block;
    font-weight: 400;
    opacity: 0.8;
}

@media (max-width: 480px) {
    .payments-next-payout-banner__when {
        margin-left: 0;
        text-align: left;
        width: 100%;
    }
}

/* ============================================
   Admin Dashboard — Summary Cards
   ============================================ */

/* The pool strip and the bill-status cards flow as ONE grid so the numbers read
   as even rows instead of a wide bar over a narrow one. Both stay their own htmx
   container (each keeps its own refresh), so the two containers and their inner
   bars drop out of the box tree with display:contents and let every card become
   a direct item of this one grid.

   The column count follows the card count, because a leftover half-row is the
   thing this layout exists to avoid: an off-platform org has 2 pool cards + 4
   status cards, so three across gives two rows of three; a pool org has 4 + 4,
   so four across gives two rows of four. The template picks the modifier off the
   same off-platform flag the pool strip itself branches on. */
.payments-summary-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-smd);
    margin-bottom: var(--spacing-mdlg);
}

.payments-summary-cards--pool {
    grid-template-columns: repeat(4, 1fr);
}

/* These four are pass-throughs now, not layout. The two containers are htmx swap
   targets and the two bars are what each partial wraps its cards in; all four sit
   between .payments-summary-cards and the cards, and the grid can only place its own
   children, so they step out of the box tree. Scoped under .payments-summary-cards so a
   second page that reuses either partial gets its own layout, not this one. */
.payments-summary-cards #pool-position-container,
.payments-summary-cards #status-cards-container,
.payments-summary-cards .payments-summary-bar,
.payments-summary-cards .payments-summary-bar--pool {
    display: contents;
}

/* A banner or a note is a full-width line, not a card, so it spans every column
   however many there are. Without this the display:contents above would promote
   them into the grid as ordinary one-column items. */
.payments-pool-banner,
.payments-pool-note {
    grid-column: 1 / -1;
}

/* A view with metrics off renders no cards at all, and the grid's bottom margin
   would be left behind as a gap above the table. Keyed on "holds no card" rather
   than on a modifier class the server would have to add, because the cards arrive
   in two htmx swaps that land after the wrapper is already on the page.

   A browser without :has() throws the whole rule out and keeps the gap. That is
   accepted: an empty band above the table looks slightly loose and nothing else
   breaks. */
.payments-summary-cards:not(:has(.payments-summary-card)) {
    margin-bottom: 0;
}

/* The metric strips reload after every card action (refreshBalance /
   refreshStatusCards). Keep them fully opaque while they refetch so the numbers
   just change in place — no dim, no fade. */
#pool-position-container.htmx-request,
#status-cards-container.htmx-request {
    opacity: 1;
}

.payments-summary-card {
    /* Surface, border, 8px radius, and resting shadow now come from the shared
       .global-card the template composes onto this card. Only the summary-specific
       padding, the top accent bar (::before), and the hover lift stay here. */
    padding: var(--spacing-md) var(--spacing-mdlg);
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.payments-summary-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.payments-summary-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
}

.payments-summary-card--total::before,
.payments-summary-card--pending::before,
.payments-summary-card--approved::before,
.payments-summary-card--paid::before,
.payments-summary-card--count::before,
.payments-summary-card--outstanding::before,
.payments-summary-card--pool::before { background: var(--color-border); }

.payments-summary-card__value {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.5px;
    color: var(--color-text);
}

.payments-summary-card--total .payments-summary-card__value,
.payments-summary-card--pending .payments-summary-card__value,
.payments-summary-card--approved .payments-summary-card__value,
.payments-summary-card--paid .payments-summary-card__value,
.payments-summary-card--count .payments-summary-card__value,
.payments-summary-card--outstanding .payments-summary-card__value,
.payments-summary-card--pool .payments-summary-card__value { color: var(--color-text); }

/* Runway card renders prose ("Covers all scheduled bills") instead of a dollar
   figure — shrink it so it fits the card; Bootstrap text-* utilities override
   the --pool color via !important for the success/danger states. */
.payments-summary-card__value--text {
    font-size: var(--font-size-lg);
    padding-top: var(--spacing-xs);
}

.payments-summary-card__label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
    margin-top: var(--spacing-xs);
}

.payments-summary-card__count {
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
    margin-top: var(--spacing-2xs);
}

/* On a phone the wrapper also carries .global-swipe-strip (main.css phone
   block): eight cards two-across pushed the bill list 700px down, so they
   become one sideways row instead. The grid rules above stay for the desktop
   and are inert under the strip's flex. A banner or note is a full-width
   stop in that row, matching its full-width line on the desktop grid. */
@media (max-width: 767.98px) {
    .payments-summary-cards .payments-pool-banner,
    .payments-summary-cards .payments-pool-note {
        flex: 0 0 100%;
        min-width: 0;
        scroll-snap-align: start;
    }

    /* A phone row squeezes the rail; its connectors may close to a hair. */
    .payments-pipeline-connector {
        min-width: var(--spacing-xs);
    }
}

/* Warning banner above the pool cards — leads with the stop (setup not done),
   why only, no instruction. Calm amber, full width. */
.payments-pool-banner {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-card);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-warning);
    background: color-mix(in srgb, var(--color-warning) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-warning) 35%, transparent);
}

/* Small note by the pool cards when owed bills carry no due date — they sit
   outside the "due soon" and runway math, so this says so plainly. */
.payments-pool-note {
    display: flex;
    align-items: center;
    gap: var(--spacing-xsm);
    margin: -0.5rem 0 var(--spacing-md);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

/* One wrapper per tab holds that tab's search box and its dropdowns, so Alpine
   can swap the whole set when you change tabs. The wrapper needs to be a flex row
   of its own or the dropdowns stack under the search box instead of sitting
   beside it. It takes the full toolbar row, and it wraps: an open drawer takes
   480px off the page, and the dropdowns should drop to a second line rather than
   run past the card's right edge. */
.global-page-header__toolbar > .payments-header-filter {
    display: flex;
    align-items: center;
    flex: 1 1 100%;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    min-width: 0;
}

.payments-booking-groups {
    display: grid;
    /* minmax(0, 1fr), not 1fr: a bare 1fr track is min-content wide at its
       narrowest, so one nowrap child (the pipeline rail on a phone) inflated
       the track past the screen and every card's right edge was clipped. */
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-smd);
}

.payments-booking-group {
    background: transparent;
    position: relative;
}

/* Card background — starts halfway through the header pill */
.payments-booking-group::before {
    content: '';
    position: absolute;
    top: 2.1rem;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-sm);
    z-index: 0;
}

.payments-booking-group__header {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-smd) var(--spacing-md) var(--spacing-xsm);
}

.payments-booking-group__icon {
    height: 2.05rem;
    min-width: 2.05rem;
    width: 2.05rem;
    border-radius: var(--radius-pill);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-md);
    color: var(--color-neutral-ink-fg);
    /* Literal-rgba fallback for engines without color-mix (rgba alphas >0.5
       have no standard token); the color-mix() line below overrides it and
       stays on the same action ink, so the two lines cannot drift apart. */
    background: linear-gradient(135deg, rgba(36, 41, 47, 0.85), rgba(50, 56, 62, 0.75));
    background: linear-gradient(135deg, color-mix(in srgb, var(--color-action) 85%, transparent), color-mix(in srgb, var(--color-action-hover) 75%, transparent));
    backdrop-filter: blur(8px);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--color-action) 30%, transparent);
    flex-shrink: 0;
}

.payments-booking-group__pill {
    background: #111827;
    color: #fff;
    font-weight: 800;
    border-radius: var(--radius-pill);
    padding: var(--spacing-xsm) var(--spacing-md);
    font-size: clamp(0.95rem, 1.3vw, 1.1rem);
    letter-spacing: 0.15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 40%;
    transition: background 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
    text-decoration: none;
}

.payments-booking-group__pill:hover {
    background: #1f2937;
    color: #fff;
    box-shadow: 0 2px 8px var(--ink-alpha-20);
}

/* The unlinked card's pill is a label, not a link — there is no booking behind
   it to open. Same shape as its neighbours, minus the affordances that promise
   a click. */
.payments-booking-group__pill--static,
.payments-booking-group__pill--static:hover {
    cursor: default;
    background: #111827;
    box-shadow: none;
}

.payments-booking-group__date-badge {
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--color-action);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: var(--spacing-xsm);
    background: var(--color-action-tint);
    padding: var(--spacing-xs) var(--spacing-smd);
    border-radius: var(--radius-pill);
}

.payments-booking-group__date-badge i {
    font-size: var(--font-size-md);
    color: var(--color-action);
}

.payments-booking-group__meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-shrink: 0;
}

/* The live total wears the shared green money pill (.global-value-pill, the one
   the sign-up dashboard uses) — the call site adds that class, so the green and
   the white text come from its tokens and cannot drift from it. This rule is
   box metrics only: the header sets the total beside a smaller "remaining" chip,
   so the atom's own md text would tower over its neighbour. The voided total is
   NOT that pill — it greys out below — so its box lives here too. */
.payments-booking-group__total-value {
    font-weight: 800;
    padding: var(--spacing-2xs) var(--spacing-sm);
    border-radius: 8px;
    font-size: var(--font-size-sm);
}

.payments-booking-group__remaining {
    font-weight: 800;
    font-size: var(--font-size-sm);
    padding: var(--spacing-2xs) var(--spacing-sm);
    border-radius: 8px;
}

.payments-booking-group__remaining--has {
    color: #92400e;
    background: #fef3c7;
}

.payments-booking-group__remaining--zero {
    color: #065f46;
    background: #d1fae5;
}

.payments-booking-group__remaining--void {
    color: #374151;
    background: #e5e7eb;
}

.payments-booking-group__total-value--void {
    color: #6b7280;
    background: #f3f4f6;
    text-decoration: line-through;
}

/* Date + time chip on the group header. Own payments-booking-group__ classes (was a
   borrowed assignments-group__ chip) so the payments dashboard owns its own styling. */
.payments-booking-group__event {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-shrink: 0;
    line-height: 1.2;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-pill);
    padding: var(--spacing-xsm) var(--spacing-smd);
    box-shadow: 0 1px 2px var(--ink-alpha-05);
}

.payments-booking-group__event-icon {
    color: #6b7280;
    font-size: var(--font-size-sm);
    margin-right: -0.1rem;
}

.payments-booking-group__event-sep {
    color: var(--color-text-muted);
    font-weight: 700;
}

.payments-booking-group__event-date {
    font-size: var(--font-size-md);
    font-weight: 700;
    color: #1f2937;
    white-space: nowrap;
}

.payments-booking-group__event-time {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: #6b7280;
    white-space: nowrap;
}

/* The whole row opens the bill drawer, so it reads and behaves like a button:
   pointer cursor, hover wash, and a chevron that fades in on hover to cue the
   click. The trailing 18px column holds that chevron without shifting content. */
.payments-bill-row {
    position: relative;
    z-index: 1;
    display: grid;
    /* worker (with onboarding ring) | labeled stage rail | status+amount+meter | actions | chevron */
    grid-template-columns: minmax(180px, 1fr) minmax(300px, 340px) 160px 160px 18px;
    align-items: center;
    gap: 0 var(--spacing-smd);
    /* Comfortable rows: a little more air so the bigger labeled rail and the
       total/remaining block breathe. */
    padding: var(--spacing-smd) var(--spacing-md);
    line-height: 1.2;
    cursor: pointer;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

/* Left accent bar — the row is a clickable card (opens the bill drawer), so the
   hover has to read as one. The bar reveals on hover in the action ink and
   stays off-screen otherwise, layered above the row's own background tint. */
.payments-bill-row::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--color-action);
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
}

.payments-bill-row:hover {
    /* An ink tint several times stronger than the old near-invisible wash,
       plus a hairline inset ring so the whole row lifts as one card. */
    background: color-mix(in srgb, var(--color-action) 6%, transparent);
    box-shadow: var(--shadow-inset-ring);
}

.payments-bill-row:hover::before {
    opacity: 1;
}

/* Selected: the row whose drawer is open (is-open set by the drawer itself)
   holds the hover look — slightly stronger — so the open bill stays findable
   in the list while the panel is out. */
.payments-bill-row.is-open {
    background: color-mix(in srgb, var(--color-action) 9%, transparent);
    box-shadow: var(--shadow-inset-ring-strong);
}

.payments-bill-row.is-open::before {
    opacity: 1;
}

.payments-bill-row.is-open .payments-bill-row__chevron {
    opacity: 1;
}

.payments-bill-row__avatar-icon {
    font-size: 0.55rem;
}

/* The real, keyboard-focusable opener. Whole-row click is the mouse path; this
   button is how keyboard users open the drawer. It shows on row hover (a mouse
   cue) and whenever it is focused (so a keyboard user can see where they are). */
.payments-bill-row__chevron {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.payments-bill-row:hover .payments-bill-row__chevron,
.payments-bill-row__chevron:focus-visible {
    opacity: 1;
}

.payments-bill-row__chevron:focus-visible {
    outline: none;
    opacity: 1;
    box-shadow: var(--shadow-focus-ring-tight);
    border-radius: var(--radius-md);
}

.payments-bill-row + .payments-bill-row {
    border-top: 1px solid #f3f4f6;
}

/* Reimburse mode (ADR-160, Nick 08-31). On a platform-payments org every row
   renders its select cell (_booking_group.html) so entering the mode is a
   class flip, not a repaint — the class rides the bills tab panel
   (dashboard.html), and these rules are the flip's other half: hidden cell
   and the normal five columns outside the mode, a lead checkbox column inside
   it. Off-platform orgs render no cells and can never wear the mode class. */
.payments-bill-row__select {
    display: none;
}

.payments-bills-reimburse-mode .payments-bill-row__select {
    display: flex;
    align-items: center;
    justify-content: center;
}

.payments-bills-reimburse-mode .payments-bill-row {
    /* select box | worker | labeled stage rail | status+amount+meter | actions | chevron */
    grid-template-columns: 28px minmax(180px, 1fr) minmax(300px, 340px) 160px 160px 18px;
    /* The whole-row drawer click is parked in the mode (the row's hx-trigger
       guard), so the row must not promise one. */
    cursor: default;
}

.payments-bill-row__select-box {
    margin: 0;
    cursor: pointer;
}

/* Unpickable: unpaid, exhausted, or unassigned rows keep their box visible so
   the column reads as one rail, dimmed so the eye skips them. */
.payments-bill-row__select-box:disabled {
    cursor: default;
    opacity: 0.35;
}

/* The mode's selection bar — pinned above the list while picking. */
.payments-reimburse-bar {
    display: flex;
    align-items: center;
    gap: var(--spacing-smd);
    padding: var(--spacing-sm) var(--spacing-md);
    margin-bottom: var(--spacing-smd);
    border: 1px solid color-mix(in srgb, var(--color-action) 25%, transparent);
    border-radius: var(--radius-card);
    background: color-mix(in srgb, var(--color-action) 6%, transparent);
}

.payments-reimburse-bar__summary {
    font-weight: var(--font-weight-medium);
    font-variant-numeric: tabular-nums;
}

.payments-reimburse-bar__actions {
    display: flex;
    gap: var(--spacing-sm);
    margin-left: auto;
}

.payments-bill-row__worker {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.payments-bill-row__name-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-xsm);
    min-width: 0;
}

/* Bill-row face — geometry, fill, and the img variant all moved to the
   `.global-avatar --xs / --soft / --empty` atom (components/avatar.css).
   .bill-row__avatar--img is deleted outright (`img.global-avatar` covers it).
   What survives here is the TOOLTIP HOST only: the positioning context and the
   hover-name bubble, which is a payments-bill-row behaviour, not avatar geometry. */
.payments-bill-row__avatar {
    position: relative;
    cursor: default;
    box-shadow: var(--shadow-sm);
}

/* An unassigned seat is an open outline — a lift would make the empty slot read
   as a real, present person again. */
.payments-bill-row__avatar.global-avatar--empty {
    box-shadow: none;
}

.payments-bill-row__avatar[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: #1f2937;
    color: #fff;
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-medium);
    padding: var(--spacing-2xs) var(--spacing-xsm);
    border-radius: 5px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    z-index: 10;
}

.payments-bill-row__avatar:hover[data-tip]::after {
    opacity: 1;
}

.payments-bill-row__name {
    font-size: var(--font-size-lg);
    font-weight: 800;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.payments-bill-row__role {
    font-size: var(--font-size-2xs);
    font-weight: 500;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.payments-bill-row__referral-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-2xs);
    font-weight: 700;
    color: var(--color-action);
    background: var(--color-action-tint);
    padding: var(--spacing-2xs) var(--spacing-xsm);
    border-radius: var(--radius-pill);
    margin-left: var(--spacing-xsm);
    vertical-align: middle;
}

/* Payout marker — a worker the org's pay rail cannot pay yet gets a red dot and
   the words "Payouts disabled" beside their name. The words never name the
   platform; the cause rides the title tooltip, which is why the whole marker is
   one hover target. Replaces the old avatar ring, which said the same thing in
   a color nobody could read without a legend. */
.payments-payout-alert {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    flex-shrink: 0;
    cursor: help;
    color: var(--color-error);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
}

.payments-payout-alert__dot {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: var(--radius-pill);
    background: var(--color-error);
}

/* The middle rung of the ladder: the same words on their own line, standing IN
   for the role line rather than adding to it, so an alerted row is exactly as
   tall as a clean one. Off at the widest and the tightest widths (see the
   responsive block at the end of this file). */
.payments-payout-alert__line {
    display: none;
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-error);
    cursor: help;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.payments-bill-row__amount {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--spacing-2xs);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.payments-bill-row__amount-value {
    font-size: var(--font-size-lg);
    font-weight: 800;
    color: #1f2937;
}

.payments-bill-row__amount-meter {
    width: 100%;
    max-width: 132px;
    height: 5px;
    border-radius: var(--radius-pill);
    background: var(--color-header-band);
    overflow: hidden;
}

.payments-bill-row__amount-meter-fill {
    display: block;
    height: 100%;
    border-radius: var(--radius-pill);
    background: #198754;
}

/* Payment-status word, sitting at the top of the money column above the total —
   a tone dot + the plain status ("Deposited", "Partially paid", "Approved").
   It's a fact about the money, so it lives with the money; the word itself takes
   the status tone to read at a glance and to stay clearly distinct from the
   worker-readiness chip up by the name. Not a pill — no fill or border. */
.payments-bill-row__amount-status {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    max-width: 100%;
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.01em;
    color: var(--color-text-muted);
}

.payments-bill-row__amount-status-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.payments-bill-row__amount-status-dot {
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-radius: var(--radius-pill);
    /* Neutral default; the tone modifiers below recolor it. Same tone vocabulary
       payment_status_tone emits (success / warning / danger / progress / neutral). */
    background: var(--color-grey-400);
}

.payments-bill-row__amount-status--success {
    color: var(--color-success);
}

.payments-bill-row__amount-status--success .payments-bill-row__amount-status-dot {
    background: var(--color-success);
}

.payments-bill-row__amount-status--warning {
    color: var(--status-warning-fg);
}

.payments-bill-row__amount-status--warning .payments-bill-row__amount-status-dot {
    background: var(--color-warning);
}

.payments-bill-row__amount-status--danger {
    color: var(--color-error);
}

.payments-bill-row__amount-status--danger .payments-bill-row__amount-status-dot {
    background: var(--color-error);
}

.payments-bill-row__amount-status--progress {
    color: var(--color-info);
}

.payments-bill-row__amount-status--progress .payments-bill-row__amount-status-dot {
    background: var(--color-info);
}

.payments-bill-row__amount-status--neutral {
    color: var(--color-text-muted);
}

.payments-bill-row__amount-status--neutral .payments-bill-row__amount-status-dot {
    background: var(--color-grey-400);
}

.payments-bill-row__amount-fee {
    font-size: var(--font-size-2xs);
    font-weight: 500;
    color: #b0b0b0;
    font-style: italic;
    text-align: center;
}

/* Stage column — the labeled pipeline rail, centered. The status word that used
   to sit beneath it now lives in the amount column, so this column is just the
   rail (plus an optional off-platform method pill on its own line below). */
.payments-bill-row__progress {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    align-items: center;
    min-width: 0;
}

/* The labeled rail carries its own generous padding on standalone surfaces; in
   the dense bill row it sits flush so the stage names align and the row stays
   one tidy cluster. */
.payments-bill-row__progress .payments-pipeline-indicator {
    width: 100%;
    padding: var(--spacing-2xs) 0 0;
}

.payments-bill-row__actions {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-xs);
    justify-content: flex-end;
}

/* One primary action per wrapper, in the bill rows and the bill sidebar. A
   blocked action explains itself on hover (data-tooltip), never in a caption. */
.payments-action-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
    min-width: 0;
}

.payments-btn-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: var(--radius-button);
    cursor: pointer;
    font-size: var(--font-size-xs);
    transition: all 0.2s ease;
    text-decoration: none;
}

.payments-btn-action--approve { background: #d1fae5; color: #059669; }
.payments-btn-action--approve:hover { background: #10b981; color: #fff; transform: scale(1.1); box-shadow: 0 3px 12px rgba(16, 185, 129, 0.35); }

.payments-btn-action--pay { background: #dbeafe; color: #2563eb; }
.payments-btn-action--pay:hover { background: #3b82f6; color: #fff; transform: scale(1.1); box-shadow: 0 3px 12px rgba(59, 130, 246, 0.35); }

.payments-btn-action--void { background: #fef2f2; color: var(--color-error); }
.payments-btn-action--void:hover { background: var(--color-error); color: #fff; transform: scale(1.1); box-shadow: 0 3px 12px rgba(217, 0, 43, 0.35); }

.payments-btn-action--disabled { opacity: 0.35; cursor: default; }
.payments-btn-action--disabled:hover { transform: none; box-shadow: none; }

@keyframes statusFlash {
    0% { background-color: #d1fae5; }
    100% { background-color: transparent; }
}

.payments-bill-row--flash {
    animation: statusFlash 1.5s ease-out forwards;
}

.payments-bill-row--worker {
    grid-template-columns: minmax(170px, 1fr) minmax(300px, 340px) 150px 18px;
}

.payments-bill-row--deposit {
    grid-template-columns: minmax(170px, 1fr) 150px 18px;
}

/* The one date line under the amount: green when the money landed, blue while
   the bank has named an arrival day, amber ONLY when the worker's own work is
   what the money waits on, and plain muted for an ordinary future due date. */
.payments-bill-row__when {
    font-size: var(--font-size-2xs);
    font-weight: 500;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.payments-bill-row__when--ok {
    color: var(--color-success);
    font-weight: var(--font-weight-medium);
}

.payments-bill-row__when--wait {
    color: #1e40af;
    font-weight: var(--font-weight-medium);
}

.payments-bill-row__when--due {
    color: var(--color-warning-text);
    font-weight: var(--font-weight-medium);
}

.payments-bill-row__amount-value--void {
    text-decoration: line-through;
    color: var(--color-text-muted);
    font-weight: 700;
}

/* A voided/cancelled bill's rail column: a plain word and its reason where
   the dots would be — there is no pipeline to draw for money that will not
   move. */
.payments-bill-row__terminal {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.payments-bill-row__terminal-label {
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-medium);
    color: #374151;
}

.payments-bill-row__terminal-desc {
    font-size: var(--font-size-2xs);
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Deposit-card extras. position:relative lifts them above the card's ::before
   background layer: the pseudo-element is the card's first child at z-index 0,
   so any later positioned sibling paints over it in tree order — no raw
   z-index needed (the stacking ladder has no rung this low on purpose). */
.payments-booking-group__error {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
    color: var(--color-error);
    background: var(--color-error-subtle);
    border-bottom: 1px solid color-mix(in srgb, var(--color-error) 25%, transparent);
}

@media (max-width: 1024px) {
    .payments-bill-row {
        /* worker | stage rail | amount | actions | chevron */
        grid-template-columns: minmax(160px, 1fr) 200px 110px 140px 18px;
    }

    /* Reimburse mode re-runs this rung with its lead checkbox column: the
       two-class mode selector outranks the bare .payments-bill-row above wherever it
       appears, so without this restatement picking on a tablet would keep
       the desktop's wide tracks and overflow the row. The --worker and
       --deposit variants below are My Pay surfaces — the mode class never
       reaches them, so they need no restatement. */
    .payments-bills-reimburse-mode .payments-bill-row {
        grid-template-columns: 28px minmax(160px, 1fr) 200px 110px 140px 18px;
    }

    /* Worker (My Pay) rows: same shrink, minus the tracks they never had.
       The 768px stack below needs no variants — its area rules already
       address the columns by name. */
    .payments-bill-row--worker {
        grid-template-columns: minmax(160px, 1fr) 200px 130px 18px;
    }

    .payments-bill-row--deposit {
        grid-template-columns: minmax(160px, 1fr) 130px 18px;
    }

    /* Four labels never fit the 200px rail track: before the rail could shrink
       they ran over the money column, and once it could they overlapped each
       other. From this rung down the rail is dots only; the drawer or the row's
       status word names the stage, and the 768px stack below restates the
       labels where the rail gets the full row again. */
    .payments-bill-row .payments-pipeline-label {
        display: none;
    }

    /* Middle rung: the name and the alert words no longer share a line, so the
       words drop under the name and take the role line's place. The dot stays
       put beside the name, and the row keeps its height. */
    .payments-bill-row__worker--alerted .payments-payout-alert__text,
    .payments-bill-row__worker--alerted .payments-bill-row__role {
        display: none;
    }

    .payments-bill-row__worker--alerted .payments-payout-alert__line {
        display: block;
    }
}

@media (max-width: 768px) {
    .payments-booking-group__header {
        flex-wrap: wrap;
    }

    .payments-booking-group__meta {
        display: none;
    }

    .payments-booking-group__date-badge {
        font-size: var(--font-size-2xs);
    }

    /* The header wraps here, so the pill has the first line to itself: the
       desktop's 40% cap would leave it a stub beside empty space. */
    .payments-booking-group__pill {
        max-width: 100%;
    }

    .payments-bill-row {
        grid-template-columns: 1fr auto;
        gap: var(--spacing-xs) var(--spacing-sm);
    }

    /* The rail has the whole row to itself again here, so the labels the
       1024px rung hid come back. */
    .payments-bill-row .payments-pipeline-label {
        display: block;
    }

    /* Tightest rung: only the dot fits beside the name. The role line comes
       back and the whole sentence lives in the dot's tooltip. */
    .payments-bill-row__worker--alerted .payments-payout-alert__line {
        display: none;
    }

    .payments-bill-row__worker--alerted .payments-bill-row__role {
        display: block;
    }

    .payments-bill-row__worker { grid-column: 1; grid-row: 1; }
    .payments-bill-row__amount { grid-column: 2; grid-row: 1; text-align: right; }
    .payments-bill-row__progress { grid-column: 1 / -1; }
    .payments-bill-row__actions { grid-column: 1 / -1; justify-content: flex-start; }
    /* No hover on touch — the chevron cue is desktop-only. */
    .payments-bill-row__chevron { display: none; }

    /* The rail's side padding goes on this rung — the row's own padding is
       the gutter, and every pixel of the 361px card is a label's. */
    .payments-pipeline-indicator { padding-inline: 0; }

    /* Reimburse mode on the stacked rung: the checkbox takes a slim lead
       track and row 1 re-places around it. Only grid-column is restated —
       the placements above still supply each cell's row and spans. */
    .payments-bills-reimburse-mode .payments-bill-row {
        grid-template-columns: 28px 1fr auto;
    }
    .payments-bills-reimburse-mode .payments-bill-row__select { grid-column: 1; grid-row: 1; }
    .payments-bills-reimburse-mode .payments-bill-row__worker { grid-column: 2; }
    .payments-bills-reimburse-mode .payments-bill-row__amount { grid-column: 3; }
}

/* A push drawer takes --drawer-width off the row without changing the window, so
   the rungs above fire too late and the alert words squeeze the worker's name
   down to an initial. These re-run the same two rungs early while a drawer is
   pushing — only above 1200px, since below that the drawer covers the list
   instead of narrowing it. Both push classes are listed together: the bill
   drawer and the saved-view dock push the same distance, so one set of rules
   can't drift from the other. Higher specificity, so they win wherever they
   apply, whatever the order. */
@media (min-width: 1200px) and (max-width: 1504px) {
    .global-app-layout.is-drawer-open .payments-bill-row__worker--alerted .payments-payout-alert__text,
    .global-app-layout.is-dock-drawer-open .payments-bill-row__worker--alerted .payments-payout-alert__text,
    .global-app-layout.is-drawer-open .payments-bill-row__worker--alerted .payments-bill-row__role,
    .global-app-layout.is-dock-drawer-open .payments-bill-row__worker--alerted .payments-bill-row__role {
        display: none;
    }

    .global-app-layout.is-drawer-open .payments-bill-row__worker--alerted .payments-payout-alert__line,
    .global-app-layout.is-dock-drawer-open .payments-bill-row__worker--alerted .payments-payout-alert__line {
        display: block;
    }
}

@media (min-width: 1200px) and (max-width: 1248px) {
    .global-app-layout.is-drawer-open .payments-bill-row__worker--alerted .payments-payout-alert__line,
    .global-app-layout.is-dock-drawer-open .payments-bill-row__worker--alerted .payments-payout-alert__line {
        display: none;
    }

    .global-app-layout.is-drawer-open .payments-bill-row__worker--alerted .payments-bill-row__role,
    .global-app-layout.is-dock-drawer-open .payments-bill-row__worker--alerted .payments-bill-row__role {
        display: block;
    }
}

/* The columns have to come down a rung with them. The widest rung's tracks add
   up to a 898px floor, so inside a pushed 821px track the row keeps its full
   width and the tail — the Approve button among it — sits under the panel, with
   overflow-x visible and no scrollbar to reach it. 1524px is where a pushed row
   still gets the 1024px rung's own width (1024 + --drawer-width), so the switch
   happens exactly when the wide tracks stop fitting rather than after. */
@media (min-width: 1200px) and (max-width: 1524px) {
    /* The rail is dots only at this rung (labels hidden below), so 160px holds
       it. At 200px the five tracks plus gaps needed 676px inside the 645px a
       pushed row gets on a 1280 window, and the chevron hung 15px past the card. */
    .global-app-layout.is-drawer-open .payments-bill-row,
    .global-app-layout.is-dock-drawer-open .payments-bill-row {
        grid-template-columns: minmax(160px, 1fr) 160px 110px 140px 18px;
    }

    /* The push selectors above outrank the reimburse-mode override (three
       classes to its two), and the gear's saved-view dock can be open while
       picking — so the mode's lead column is restated at this rung too. */
    .global-app-layout.is-drawer-open .payments-bills-reimburse-mode .payments-bill-row,
    .global-app-layout.is-dock-drawer-open .payments-bills-reimburse-mode .payments-bill-row {
        grid-template-columns: 28px minmax(160px, 1fr) 160px 110px 140px 18px;
    }

    /* Four labels do not fit a 160px track, so beside a pushed drawer the rail
       is dots only — the open drawer names the stages of the bill in hand. */
    .global-app-layout.is-drawer-open .payments-bill-row .payments-pipeline-label,
    .global-app-layout.is-dock-drawer-open .payments-bill-row .payments-pipeline-label {
        display: none;
    }
}

/* ============================================
   Bill Detail Drawer (the one canonical surface)
   ============================================ */

/* The shell/slide/backdrop come from the shared push-drawer (components/drawer.css:
   .global-drawer-panel + .global-drawer-scrim). .payments-bill-detail is the calm inner panel: header and
   footer stay put, and on a tall screen only the activity feed scrolls, inside its
   own little window (.payments-bill-detail__main picks up the slack on short screens). */
.payments-bill-detail {
    display: flex;
    flex-direction: column;
    background: var(--color-card-bg);
    overflow: hidden;
}

/* The middle of the panel — everything between the header and the pinned footer.
   It gives up height first (min-height: 0) so the footer never leaves the view;
   on a short screen it scrolls as a whole, and the activity feed still keeps its
   own smaller window. */
.payments-bill-detail__main {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
}

/* Header row: the shared .global-drawer-head / .global-drawer-close (drawer_header.html) with
   this drawer's own reference line in the title slot — "Bill #12 · Booking" is
   richer than a plain name, so the markup stays here. */
.payments-bill-detail__ref {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    letter-spacing: 0.01em;
}
.payments-bill-detail__ref span {
    color: var(--color-grey-500);
    font-weight: 400;
}
.payments-bill-detail__band {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-xs) var(--spacing-mdlg) var(--spacing-md);
}
.payments-bill-detail__who {
    display: flex;
    align-items: center;
    gap: var(--spacing-smd);
    min-width: 0;
    flex: 1;
}
.payments-bill-detail__av {
    position: relative;
    flex: 0 0 auto;
}
.payments-bill-detail__avatar {
    width: 50px;
    height: 50px;
    font-size: var(--font-size-md);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.payments-bill-detail__avatar--empty {
    color: var(--color-grey-500);
}
.payments-bill-detail__who-text {
    min-width: 0;
}
.payments-bill-detail__name-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-xsm);
    min-width: 0;
}
.payments-bill-detail__name {
    font-weight: var(--font-weight-heading);
    font-size: var(--font-size-lg);
    letter-spacing: -0.015em;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.payments-bill-detail__role {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-top: var(--spacing-2xs);
}
.payments-bill-detail__role b {
    color: var(--color-text);
    font-weight: var(--font-weight-medium);
}
.payments-bill-detail__money {
    text-align: right;
    flex: 0 0 auto;
}
.payments-bill-detail__amt {
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-heading);
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}
.payments-bill-detail__pill {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xsm);
    margin-top: var(--spacing-sm);
    font-size: var(--font-size-2xs);
    font-weight: 700;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-pill);
    white-space: nowrap;
}
.payments-bill-detail__pill-dot {
    width: 6px;
    height: 6px;
    border-radius: var(--radius-pill);
    background: currentColor;
}
.payments-bill-detail__pill--ok {
    background: var(--status-success-bg);
    color: var(--color-success);
}
.payments-bill-detail__pill--ramp {
    background: color-mix(in srgb, var(--color-action) 12%, transparent);
    color: var(--color-action);
}
.payments-bill-detail__pill--wait {
    background: var(--color-grey-100);
    color: var(--color-text-muted);
}
.payments-bill-detail__pill--flag {
    background: var(--status-danger-bg);
    color: var(--color-error);
}

/* "Open in QuickBooks / Ramp" — one quiet bordered brand button per platform,
   shown under the header only when the bill carries that platform's id. */
.payments-bill-detail__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    padding: 0 var(--spacing-mdlg) var(--spacing-md);
}
/* The payments feature's one chip that opens the outside platform: the bill
   drawer's brand buttons and the profile card's "Open in Ramp" (Nick, 09-02). */
.payments-extlink {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-xsm) var(--spacing-smd);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-card-bg);
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    transition: background 0.12s ease, border-color 0.12s ease;
}
.payments-extlink:hover {
    background: var(--color-grey-50);
    border-color: var(--color-grey-300);
}
.payments-extlink__logo {
    width: 18px;
    height: 18px;
    object-fit: contain;
}
.payments-extlink__ext {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.payments-bill-detail__syncnote {
    display: flex;
    align-items: center;
    gap: var(--spacing-xsm);
    margin: 0 var(--spacing-mdlg) var(--spacing-md);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}
.payments-bill-detail__syncnote-ic {
    font-size: var(--font-size-sm);
}
.payments-bill-detail__syncnote--warning {
    color: var(--color-warning);
}
/* The note row's own door into the match modal — a quiet text link, not a button,
   so it never competes with the footer's money moves. */
.payments-bill-detail__syncnote-act {
    padding: 0;
    border: 0;
    background: none;
    font-size: inherit;
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    text-decoration: underline;
    cursor: pointer;
}
.payments-bill-detail__syncnote-act:hover {
    text-decoration: none;
}
.payments-bill-detail__syncnote-act:disabled {
    cursor: default;
    opacity: 0.5;
}

/* Sync match modal — compact candidate rows, one dot per compared fact */
.payments-sync-match__msg {
    margin-bottom: var(--spacing-smd);
    color: var(--color-text);
}
.payments-sync-match__legend {
    display: flex;
    align-items: center;
    gap: var(--spacing-xsm);
    margin-bottom: var(--spacing-smd);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}
.payments-sync-match__legend .payments-sync-match__dot:not(:first-child) {
    margin-left: var(--spacing-smd);
}
.payments-sync-match__rows {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xsm);
}
.payments-sync-match__row {
    display: flex;
    align-items: center;
    gap: var(--spacing-smd);
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-smd);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-card-bg);
    text-align: left;
    cursor: pointer;
}
.payments-sync-match__row:hover:not(:disabled) {
    background: var(--color-surface-subtle);
}
.payments-sync-match__row:disabled {
    cursor: default;
    opacity: 0.6;
}
.payments-sync-match__row-who {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}
.payments-sync-match__row-doc {
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
}
.payments-sync-match__row-vendor,
.payments-sync-match__row-date {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}
.payments-sync-match__row-money {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.payments-sync-match__row-amt {
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
}
.payments-sync-match__row-tag {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}
.payments-sync-match__dots {
    display: flex;
    gap: var(--spacing-xs);
}
/* Geometry only: all three states set their own fill and edge below. The hollow
   "nothing to compare" look used to live here, which left --skipped as a name with
   no rule and made its appearance an accident of whatever the base happened to say.
   Every dot in the DOM carries exactly one state modifier — the legend writes all
   three, and a row's dot gets one from `'payments-sync-match__dot--' + dot.state`. */
.payments-sync-match__dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-pill);
    border: 1.5px solid transparent;
}
.payments-sync-match__dot--match {
    background: var(--color-success);
    border-color: var(--color-success);
}
.payments-sync-match__dot--differ {
    background: var(--color-warning);
    border-color: var(--color-warning);
}
.payments-sync-match__dot--skipped {
    background: var(--color-card-bg);
    border-color: var(--color-grey-200);
}
/* The shared toggle, but top-aligned: the label runs two lines here, and a
   switch centred against both sits below the sentence it belongs to. */
.payments-sync-match__choice.form-switch {
    align-items: flex-start;
    font-size: var(--font-size-sm);
}
.payments-sync-match__choice-help {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}
.payments-sync-match__error {
    margin: var(--spacing-smd) 0 0;
    font-size: var(--font-size-sm);
    color: var(--color-warning);
}
.payments-sync-match__footer {
    gap: var(--spacing-sm);
}
.payments-sync-match__skip {
    margin-right: auto;
    color: var(--color-text-muted);
}

/* slim drawer pipeline rail — sized for a variable number of dots */
.payments-bill-detail__rail {
    display: flex;
    padding: var(--spacing-md) var(--spacing-mdlg) var(--spacing-mdlg);
}
.payments-bill-detail__st {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
}
/* The connector is a ::before so it paints behind the dot (the element's own
   child) with no stacking context needed. Top centres it on the 14px atom. */
.payments-bill-detail__st::before {
    content: "";
    position: absolute;
    top: 6px;
    left: 50%;
    width: 100%;
    height: 2px;
    background: var(--color-grey-200);
}
.payments-bill-detail__st:last-child::before {
    display: none;
}
.payments-bill-detail__st-lb {
    font-size: var(--font-size-2xs);
    color: var(--color-grey-500);
    white-space: nowrap;
    font-weight: 500;
}
/* The day the dot's milestone landed — tucked right under its label, quieter
   than it, tabular figures so the dates line up dot to dot. The column's own
   gap (0.5rem) is sized for dot-to-label; the date sits closer to the label it
   belongs to, so the pair reads as one caption. */
.payments-bill-detail__st-dt {
    font-size: var(--font-size-2xs);
    color: var(--color-grey-500);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    margin-top: -0.35rem;
}
.payments-bill-detail__st--completed::before {
    background: var(--color-success);
}
.payments-bill-detail__st--completed .payments-bill-detail__st-lb {
    color: var(--color-text-muted);
    font-weight: var(--font-weight-medium);
}
.payments-bill-detail__st--active .payments-bill-detail__st-lb {
    color: var(--color-text);
    font-weight: var(--font-weight-medium);
}
.payments-bill-detail__st--failed .payments-bill-detail__st-lb {
    color: var(--color-error);
    font-weight: var(--font-weight-medium);
}

.payments-bill-detail__ramp {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xs);
    margin: 0 var(--spacing-mdlg) var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-smd);
    border: 1px solid var(--color-grey-200);
    border-radius: var(--radius-md);
    background: var(--color-grey-50);
}
.payments-bill-detail__ramp-head {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
}
.payments-bill-detail__ramp-sub {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}
/* The line already computes how the bill is doing; without these it was read out in
   the same grey whether Ramp was paying it or refusing to. The accent is on the left
   edge so the label stays the thing being read and the colour is only the sorting. */
.payments-bill-detail__ramp {
    border-left: 3px solid var(--color-grey-400);
}
.payments-bill-detail__ramp[data-ramp-state="success"] {
    border-left-color: var(--color-success);
}
.payments-bill-detail__ramp[data-ramp-state="attention"] {
    border-left-color: var(--color-warning);
    background: color-mix(in srgb, var(--color-warning) 8%, transparent);
}
.payments-bill-detail__ramp[data-ramp-state="problem"],
.payments-bill-detail__ramp[data-ramp-state="rejected"] {
    border-left-color: var(--color-error);
    background: color-mix(in srgb, var(--color-error) 8%, transparent);
}
.payments-bill-detail__ramp[data-ramp-state="problem"] .payments-bill-detail__ramp-head,
.payments-bill-detail__ramp[data-ramp-state="rejected"] .payments-bill-detail__ramp-head {
    color: var(--color-error);
}
.payments-bill-detail__ramp[data-ramp-state="in_flight"] {
    border-left-color: var(--color-grey-400);
}

.payments-bill-detail__sec {
    padding: var(--spacing-md) var(--spacing-mdlg) var(--spacing-md);
    border-top: 1px solid var(--color-grey-100);
}
.payments-bill-detail__sec-h {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-smd);
}
.payments-bill-detail__sec-ic {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-md);
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    font-size: var(--font-size-sm);
}
.payments-bill-detail__sec-ic--clock {
    background: var(--status-success-bg);
    color: var(--color-success);
}
.payments-bill-detail__sec-ic--shield {
    background: color-mix(in srgb, var(--color-action) 12%, transparent);
    color: var(--color-action);
}
.payments-bill-detail__sec-ic--list {
    background: var(--color-grey-100);
    color: var(--color-grey-500);
}
.payments-bill-detail__sec-lbl {
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-grey-500);
}
.payments-bill-detail__sec-cnt {
    margin-left: auto;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-grey-500);
}

/* files — pay documents on the bill (receipts, the frozen invoice PDF) */
.payments-bill-detail__files-add {
    margin-left: auto;
    border: 1px solid var(--color-grey-200);
    background: none;
    border-radius: var(--radius-md);
    padding: var(--spacing-2xs) var(--spacing-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-grey-600);
    cursor: pointer;
}
.payments-bill-detail__files-add:hover {
    border-color: var(--color-action);
    color: var(--color-action);
}
.payments-bill-detail__files {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}
.payments-bill-detail__file {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}
.payments-bill-detail__file-txt {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xs);
}
.payments-bill-detail__file-name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-grey-800);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.payments-bill-detail__file-name:hover {
    color: var(--color-action);
}
.payments-bill-detail__file-meta {
    font-size: var(--font-size-xs);
    color: var(--color-grey-500);
}
.payments-bill-detail__file-del {
    margin-left: auto;
    flex: 0 0 auto;
    border: none;
    background: none;
    padding: var(--spacing-xs) var(--spacing-xsm);
    border-radius: var(--radius-md);
    color: var(--color-grey-400);
    cursor: pointer;
}
.payments-bill-detail__file-del:hover {
    color: var(--color-error);
    background: var(--status-danger-bg);
}
/* activity timeline — the only part that scrolls, inside a fixed window. A CSS
   mask fades an edge only while more events hide past it; at a hard end the
   fade width collapses to 0 so nothing readable is ever dimmed. The is-top /
   is-bottom classes come from the scroll handler on the element. */
.payments-bill-detail__tl-wrap {
    position: relative;
}
.payments-bill-detail__tl-scroll {
    --tl-fade-top: 18px;
    --tl-fade-btm: 18px;
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
    /* The bottom pad clears the fade mask, so the last line reads in full
       once the list is scrolled to the end. */
    padding: var(--spacing-xsm) var(--spacing-sm) var(--spacing-mdlg) 0;
    scrollbar-width: thin;
    overscroll-behavior: contain;
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0,
        black var(--tl-fade-top),
        black calc(100% - var(--tl-fade-btm)),
        transparent 100%
    );
    mask-image: linear-gradient(
        to bottom,
        transparent 0,
        black var(--tl-fade-top),
        black calc(100% - var(--tl-fade-btm)),
        transparent 100%
    );
}
.payments-bill-detail__tl-scroll.is-top {
    --tl-fade-top: 0px;
}
.payments-bill-detail__tl-scroll.is-bottom {
    --tl-fade-btm: 0px;
}
.payments-bill-detail__tl {
    position: relative;
    padding-left: var(--spacing-mdlg);
    margin: 0;
    list-style: none;
}
.payments-bill-detail__tl::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 5px;
    bottom: 6px;
    width: 2px;
    background: var(--color-grey-200);
}
.payments-bill-detail__ev {
    position: relative;
    padding: 0 0 var(--spacing-md);
}
.payments-bill-detail__ev:last-child {
    padding-bottom: var(--spacing-2xs);
}
/* Two dot colours only: grey for history, red for problems. The old four-way
   palette (green acts, purple org actions) meant nothing to a reader with no
   legend — "nobody knows what that means" (Nick, 2026-08-18). */
.payments-bill-detail__ev-mk {
    position: absolute;
    left: -22px;
    top: 2px;
    width: 13px;
    height: 13px;
    border-radius: var(--radius-pill);
    background: var(--color-grey-500);
    border: 2px solid var(--color-grey-500);
}
.payments-bill-detail__ev--flag .payments-bill-detail__ev-mk {
    border-color: var(--color-error);
    background: var(--color-error);
}
.payments-bill-detail__ev-t {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    letter-spacing: -0.01em;
    color: var(--color-text);
}
.payments-bill-detail__ev-m {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-top: 0.05rem;
}
.payments-bill-detail__ev time {
    font-size: var(--font-size-xs);
    color: var(--color-grey-500);
    font-variant-numeric: tabular-nums;
}

/* An external bill id (a Ramp id, a document number) is one unbroken token with
   nowhere to wrap, so on a narrow drawer it runs past the panel edge — and
   .global-drawer-body is overflow-x: hidden, which would clip the tail with no way to
   reach it. Scrolling the table inside its own box keeps the id reachable
   without widening the drawer, which is fixed at --drawer-width for every
   drawer in the app (drawer.css). */
.payments-bill-detail__break-scroll {
    overflow-x: auto;
    overscroll-behavior-x: contain;
}

.payments-bill-detail__break-tbl {
    width: 100%;
    font-size: var(--font-size-sm);
    font-variant-numeric: tabular-nums;
}
.payments-bill-detail__break-tbl td {
    padding: var(--spacing-xsm) 0;
    border-bottom: 1px solid var(--color-grey-100);
}
.payments-bill-detail__break-tbl tfoot td {
    border-top: 1px solid var(--color-grey-200);
    border-bottom: none;
    padding-top: var(--spacing-sm);
}

/* Action bar pinned to the bottom of the panel. .global-drawer-panel is a flex column
   (header, scrolling body, then this footer), so the bar stays in view while the
   body scrolls. The primary sits above the pair of deliberate money moves. */
.payments-bill-detail__footer {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-smd);
    padding: var(--spacing-md) var(--spacing-mdlg);
    border-top: 1px solid var(--color-grey-200);
    background: var(--color-grey-50);
}

.payments-bill-detail__adjust {
    display: flex;
    gap: var(--spacing-sm);
    align-items: flex-start;
}
.payments-bill-detail__adjust > .payments-action-button {
    flex: 1 1 0;
}

.payments-deposit-card__icon {
    width: 36px;
    height: 36px;
    background: #d1fae5;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #059669;
    font-size: var(--font-size-base);
    flex-shrink: 0;
}

.payments-deposit-card__count {
    font-size: var(--font-size-2xs);
    color: var(--color-text-muted);
    font-weight: 500;
    margin-left: var(--spacing-xsm);
}

.payments-deposit-card__bill-ref {
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
}

/* Ledger register. A flat register on the same surface language as the bill
   cards above it — the register itself uses no Bootstrap table utilities.
   Pending rows pin at the top on a soft tint (not the loud Bootstrap yellow)
   so a settled register still reads calm while in-flight money stays easy to
   spot. */
.payments-ledger-totals {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-smd);
}
.payments-ledger-total {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-xs);
}
.payments-ledger-total__label {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}
.payments-ledger-total__value {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}
.payments-ledger-total__value--credit {
    color: var(--color-success);
}
.payments-ledger-total__value--debit {
    color: var(--color-error);
}

.payments-ledger {
    overflow-x: auto;
    overscroll-behavior-x: contain;
}
.payments-ledger__table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-md);
}
.payments-ledger__table thead th {
    background-color: var(--color-header-band);
    padding: var(--spacing-sm) var(--spacing-smd);
    text-align: left;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    white-space: nowrap;
}
.payments-ledger__table td {
    padding: var(--spacing-sm) var(--spacing-smd);
    border-top: 1px solid var(--color-border-subtle);
    vertical-align: middle;
}
.payments-ledger-num {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.payments-ledger-section > th {
    padding: var(--spacing-smd) var(--spacing-smd) var(--spacing-xs);
    text-align: left;
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary);
    background-color: transparent;
}
.payments-ledger-section__note {
    text-transform: none;
    letter-spacing: 0;
    color: var(--color-text-muted);
}

.payments-ledger-row[data-ledger-toggle] {
    cursor: pointer;
}
.payments-ledger-row:hover > td {
    background-color: var(--color-surface-subtle);
}
.payments-ledger-row__date {
    white-space: nowrap;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}
.payments-ledger-row__chevron {
    display: inline-block;
    margin-right: var(--spacing-xs);
    font-size: var(--font-size-2xs);
    color: var(--color-text-muted);
    transition: transform 0.15s ease;
}
.payments-ledger-row.is-open .payments-ledger-row__chevron {
    transform: rotate(90deg);
}
.payments-ledger-row__name {
    display: block;
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
}
.payments-ledger-row__context {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}
.payments-ledger-row__dash {
    color: var(--color-text-muted);
}
.payments-ledger-row--pending > td {
    background-color: #f8fafd;
}
.payments-ledger-row--void > td {
    color: var(--color-text-muted);
}
.payments-ledger-amount--debit {
    color: var(--color-error);
}
.payments-ledger-amount--credit {
    color: var(--color-success);
}
.payments-ledger-amount--pending {
    color: var(--color-text-muted);
}
.payments-ledger-amount--void {
    color: var(--color-text-muted);
    text-decoration: line-through;
}

.payments-ledger-detail > td {
    border-top: none;
    padding-top: 0;
}
.payments-ledger-detail__body {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    padding: var(--spacing-smd);
    border-radius: var(--radius-md);
    background-color: var(--color-surface-subtle);
}
.payments-ledger-detail__pairs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs) var(--spacing-lg);
    margin: 0;
}
.payments-ledger-detail__pair {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-xs);
}
.payments-ledger-detail__pair dt {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-body);
    color: var(--color-text-secondary);
}
.payments-ledger-detail__pair dd {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}
.payments-ledger-detail__link {
    align-self: flex-start;
    padding: 0;
    border: none;
    background: none;
    font-size: var(--font-size-sm);
    color: var(--color-action);
    text-decoration: underline;
    cursor: pointer;
}
.payments-ledger-detail__ids {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs) var(--spacing-smd);
    font-size: var(--font-size-2xs);
    color: var(--color-text-muted);
}
.payments-ledger-detail__id {
    white-space: nowrap;
}
.payments-ledger-ref-kind {
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-text-secondary);
}

/* Own chip classes, not Bootstrap badges: main.css gives .badge.bg-warning an
   !important yellow that would beat any override, so the ledger draws its own. */
.payments-ledger-chip {
    display: inline-block;
    padding: 0.25em 0.6em;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-body);
    line-height: 1.4;
    white-space: nowrap;
}
.payments-ledger-chip--confirmed {
    background-color: #e8f5ee;
    color: #1a7f4b;
}
.payments-ledger-chip--pending {
    background-color: transparent;
    border: 1px dashed #c2c9d6;
    color: #6b7280;
}
.payments-ledger-chip--void {
    background-color: #eef0f4;
    color: #6b7280;
}

/* ============================================================
   Payment confirm modals — readiness checklist layout
   (approve_confirm.html / payout_confirm.html). Design tokens
   only, per ADR-125 (the CSS ratchet forbids new raw hex here).
   ============================================================ */
.payments-pay-confirm {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.payments-pay-confirm__payee {
    display: flex;
    align-items: center;
    gap: var(--spacing-smd);
}
/* Pay-confirm payee face — DELETED, both the disc and its --img twin. It was an
   off-ladder 44px ink circle with a hard-coded `white` foreground; it now
   renders as `.global-avatar .global-avatar--lg .global-avatar--ink`, which
   puts it on the ladder and on the shared foreground token. */
.payments-pay-confirm__payee-text {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}
.payments-pay-confirm__payee-name {
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
}
.payments-pay-confirm__payee-role {
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
}

.payments-pay-confirm__details {
    margin: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.payments-pay-confirm__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-smd);
}
.payments-pay-confirm__row + .payments-pay-confirm__row {
    border-top: 1px solid var(--color-border-subtle);
}
.payments-pay-confirm__row dt {
    margin: 0;
    font-weight: 500;
    color: var(--color-text-light);
}
.payments-pay-confirm__row dd {
    margin: 0;
    text-align: right;
    color: var(--color-text);
}
.payments-pay-confirm__row--amount dt {
    font-weight: 700;
    color: var(--color-text);
}
.payments-pay-confirm__row--amount dd {
    font-weight: 700;
    font-size: var(--font-size-lg);
    color: var(--color-text);
}

.payments-pay-confirm__field {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}
.payments-pay-confirm__field-label {
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-sm);
    color: var(--color-text);
}
.payments-pay-confirm__field-help {
    font-size: var(--font-size-2xs);
    color: var(--color-text-light);
}

.payments-readiness-checks {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}
.payments-readiness-check {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
}
.payments-readiness-check__mark {
    display: inline-flex;
    flex-shrink: 0;
    line-height: 1.4;
}
.payments-readiness-check--pass .payments-readiness-check__mark {
    color: var(--color-success);
}
.payments-readiness-check--fail .payments-readiness-check__mark {
    color: var(--color-error);
}
.payments-readiness-check__body {
    display: flex;
    flex-direction: column;
    line-height: 1.35;
}
.payments-readiness-check__label {
    color: var(--color-text);
}
.payments-readiness-check--fail .payments-readiness-check__label {
    color: var(--color-text-light);
}
.payments-readiness-check__reason {
    font-size: var(--font-size-2xs);
    color: var(--color-text-light);
}

.payments-pay-confirm__pool {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    padding: var(--spacing-smd);
    border-radius: var(--radius-md);
    background: var(--color-surface-subtle);
    border: 1px solid var(--color-border);
}
.payments-pay-confirm__pool--short {
    border-color: var(--color-error);
}
.payments-pay-confirm__pool-title {
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-text-light);
}
.payments-pay-confirm__pool-row {
    display: flex;
    justify-content: space-between;
    color: var(--color-text);
}
.payments-pay-confirm__pool-row--total {
    font-weight: 700;
    padding-top: var(--spacing-xs);
    border-top: 1px solid var(--color-border-subtle);
}
.payments-pay-confirm__pool--short .payments-pay-confirm__pool-row--total {
    color: var(--color-error);
}
/* Pool balance could not be checked: the block reads as a failed check —
   error border, an x mark, and the why-only reason, no pool-math rows. */
.payments-pay-confirm__pool--failed {
    border-color: var(--color-error);
}
.payments-pay-confirm__pool-unknown {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-error);
}

/* Always-visible-but-disabled submit (void/adjust modals): the button stays put
   with a why-only reason under it, matching the row/overflow disabled pattern. */
.payments-pay-confirm__submit-block {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
}
.payments-pay-confirm__submit-reason {
    font-size: var(--font-size-2xs);
    color: var(--color-text-light);
    text-align: center;
}

/* Bills/Ledger toggle + saved-view tabs share the header's single tab slot. One
   row with a rule between them, rather than two stacked strips of chrome that
   would read as two sets of tabs and steal a row of body height. */
.payments-bill-tabs-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-smd);
    min-width: 0;
}
.payments-bill-tabs-row > nav {
    min-width: 0;
}
.payments-bill-tabs-row > nav + nav {
    padding-left: var(--spacing-smd);
    border-left: 1px solid var(--color-border-hairline);
}

/* ---- Reimbursements status drawer (the kebab's "Reimbursements") ---------- */
/* One list of every minted ask. Rows wear the bill rows' dot-and-word status
   idiom; settled rows (paid/voided) dim as a group below the divider rather
   than per-part, so the whole archive reads quieter at once. */

.payments-reimb-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.payments-reimb-list__count {
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
}

.payments-reimb-divider {
    margin-top: var(--spacing-sm);
    padding-top: var(--spacing-smd);
    border-top: 1px solid var(--color-border-hairline);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.payments-reimb-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-smd);
}

.payments-reimb-row--settled {
    opacity: 0.55;
}

.payments-reimb-row__who {
    flex: 1;
    min-width: 0;
}

.payments-reimb-row__name {
    font-weight: var(--font-weight-medium);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.payments-reimb-row__meta {
    font-size: var(--font-size-2xs);
    color: var(--color-text-muted);
}

.payments-reimb-row__amount {
    font-weight: var(--font-weight-medium);
    font-variant-numeric: tabular-nums;
}

/* The bill rows' status treatment, sized for a modal row. Tone vocabulary is
   the same success / warning / progress / neutral the dashboard speaks. */
.payments-reimb-row__status {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    min-width: 4.5rem;
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.01em;
    color: var(--color-text-muted);
}

.payments-reimb-row__status-dot {
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-radius: var(--radius-pill);
    background: var(--color-grey-400);
}

.payments-reimb-row__status--success {
    color: var(--color-success);
}

.payments-reimb-row__status--success .payments-reimb-row__status-dot {
    background: var(--color-success);
}

.payments-reimb-row__status--warning {
    color: var(--status-warning-fg);
}

.payments-reimb-row__status--warning .payments-reimb-row__status-dot {
    background: var(--color-warning);
}

.payments-reimb-row__status--progress {
    color: var(--color-info);
}

.payments-reimb-row__status--progress .payments-reimb-row__status-dot {
    background: var(--color-info);
}

/* Neutral (voided) pinned explicitly, like the bill rows' --neutral: it
   restates the base today so a later change to the default can't reshade it. */
.payments-reimb-row__status--neutral {
    color: var(--color-text-muted);
}

.payments-reimb-row__status--neutral .payments-reimb-row__status-dot {
    background: var(--color-grey-400);
}

/* Danger (payment failed) — the bill rows' error tone: the one state in this
   drawer that needs a human, so it's the one state allowed to shout. */
.payments-reimb-row__status--danger {
    color: var(--color-error);
}

.payments-reimb-row__status--danger .payments-reimb-row__status-dot {
    background: var(--color-error);
}

/* The meta line's payment-signal date (paid <day> / payment failed <day>):
   a shade darker than the rest of the line so the news reads first. */
.payments-reimb-row__meta strong {
    color: var(--color-grey-700);
    font-weight: var(--font-weight-medium);
}

.payments-reimb-row__actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

/* One-off bill drawer. Sticky footer pinned to the foot of the scrolling body
   so the primary action is always reachable without scrolling the form. */
#one-off-bill-drawer .payments-bill-drawer-footer {
    position: sticky;
    bottom: 0;
    background: var(--bs-body-bg, #fff);
    border-top: 1px solid rgba(15, 23, 42, .08);
    padding-top: .75rem;
    margin-top: 1rem;
}

/* ─── Standing pay ───────────────────────────────────────────────────────────
   Two lists, one dress. The seat list (.payments-recurring) is drawn both on
   the admin's Payments card on a worker profile and on that person's own
   Upcoming tab here, from one partial. .payments-watchlist__schedules is the admin's list
   of every recurring payment the org is tracking, on the Repeats tab. A
   row that reads differently on the two sides would be two answers to one
   question.

   Rows are a grid that collapses to stacked lines on a phone rather than
   scrolling sideways: the amount and when it next runs are the two things
   somebody opens this for, and neither may end up off-screen.

   Nothing here redefines .global-badge — the paused tone is the shipped
   singleton, which is also what keeps this list reading the same as every
   other status in the product. */
.payments-recurring,
.payments-watchlist__schedules {
    margin-top: var(--spacing-md);
}

.payments-recurring__title {
    margin: 0 0 var(--spacing-xs);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
}

.payments-recurring__list,
.payments-watchlist__list {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-subtle);
}

.payments-recurring__row,
.payments-watchlist__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-smd) var(--spacing-md);
}

.payments-recurring__row + .payments-recurring__row,
.payments-watchlist__row + .payments-watchlist__row {
    border-top: 1px solid var(--color-border);
}

.payments-recurring__what,
.payments-watchlist__what {
    min-width: 0;
}

/* The overlay that makes the whole row open the role's settings, the same
   pattern as the role tile's trigger on the opportunity page. */
.payments-watchlist__open {
    position: absolute;
    inset: 0;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.payments-watchlist__open:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: -2px;
}

.payments-recurring__name,
.payments-watchlist__name {
    display: block;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The reference is how somebody ties a line here to a row in Ramp or
   QuickBooks, so it is quiet but never dropped. */
.payments-recurring__ref,
.payments-watchlist__period {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.payments-recurring__terms {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-xs);
    white-space: nowrap;
}

.payments-recurring__amount,
.payments-watchlist__amount {
    font-weight: var(--font-weight-medium);
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
    white-space: nowrap;
}

.payments-recurring__cadence,
.payments-recurring__next,
.payments-watchlist__cadence,
.payments-watchlist__next {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.payments-recurring__when,
.payments-watchlist__why {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: var(--spacing-xs);
}

/* Why a seat's pay has not started, on its own line across the row, so the
   amount and the badge stay where every other row has them. */
.payments-watchlist__note {
    grid-column: 1 / -1;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    text-align: right;
}

@media (max-width: 36rem) {
    .payments-recurring__row,
    .payments-watchlist__row {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--spacing-xs);
    }

    .payments-recurring__when,
    .payments-watchlist__why {
        justify-content: flex-start;
    }

    .payments-watchlist__note {
        text-align: left;
    }
}