/* Worker profile -> Payments card.
 *
 * Admin-only surface answering "can we pay this person, and what have they
 * earned". One card in the shell's standard dress — card-header with a badge
 * only when the state needs saying, else the kebab that reopens setup — then
 * the earnings stat strip and the Ramp routing facts. A worker who still needs a
 * Ramp vendor and payee gets the inline setup in the facts' place — bills are
 * never listed here (they live on the bills dashboard).
 *
 * The cards, badges, buttons and form controls are the shipped singletons —
 * nothing here redefines .global-card, .global-badge, .btn or .form-select.
 */

.payments-worker-card__hint {
    margin: var(--spacing-xs) 0 var(--spacing-smd);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* The date presets (the sales strips' shared control) right above the
   numbers (Nick, 09-02); no resolved-window label beside them (Nick, 09-03). */
.payments-range {
    margin-bottom: var(--spacing-sm);
}

/* The same numbers the worker's Earnings page shows, at card scale; four
   tiles fit the profile's narrowest main column. */
.payments-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-smd) var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-subtle);
}

.payments-stats__item {
    min-width: 0;
}

.payments-stats__label {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.payments-stats__value {
    display: block;
    font-size: 1.15rem;
    font-weight: var(--font-weight-medium);
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
}

/* The Ramp routing as one strip (Nick, 09-02): the wordmark, the vendor, who
   gets paid, and the Open in Ramp button.
   Pieces wrap whole; the button drops to its own row on a phone. */
.payments-rail {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-smd);
    padding: var(--spacing-smd) var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-subtle);
}

/* The wordmark (96x26) at text height; the button carries the square logo. */
.payments-rail__mark,
.payments-rail__open-mark {
    width: auto;
    height: 18px;
}

.payments-rail__who {
    flex: 1 1 14rem;
    min-width: 0;
}

.payments-rail__name {
    display: block;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
}

.payments-rail__email {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    overflow-wrap: anywhere;
}

/* Open in Ramp: the round icon button stretched to a pill, the logo and the
   new-tab arrow inside and no words (Nick, 09-03). */
.payments-rail__open {
    margin-left: auto;
    width: auto;
    padding: 0 var(--spacing-smd);
    gap: var(--spacing-sm);
    border-radius: var(--radius-pill);
}

/* The Stripe rail's facts, one size for the whole list (Nick, 09-02): key
   and value both sit on the standard-body step of the ladder; only a
   secondary detail steps down. */
.payments-facts {
    display: grid;
    gap: var(--spacing-2xs);
    font-size: var(--font-size-md);
}

.payments-facts__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) 0;
    border-top: 1px solid var(--color-border);
}

.payments-facts__row:first-child {
    border-top: 0;
}

.payments-facts__key {
    flex-shrink: 0;
    color: var(--color-text-secondary);
}

.payments-facts__value {
    min-width: 0;
    text-align: right;
}

.payments-facts__primary {
    display: block;
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
}

.payments-facts__secondary {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* Bank name and its last-four on one line (Nick, 08-30): the blocks a
   facts row normally stacks become flex items here, keeping their own
   weights while sharing the line. */
.payments-facts__inline {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xsm);
    align-items: baseline;
    justify-content: flex-end;
}

.payments-setup-step {
    position: relative;
    display: flex;
    gap: var(--spacing-smd);
    padding-bottom: var(--spacing-md);
}

.payments-setup-step:last-child {
    padding-bottom: 0;
}

.payments-setup-step__marker {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 26px;
    height: 26px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface-subtle);
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}

.payments-setup-step.is-done .payments-setup-step__marker {
    border-color: var(--color-success);
    background: var(--color-success);
    color: var(--color-card-bg);
}

.payments-setup-step.is-current .payments-setup-step__marker {
    border-color: var(--color-action);
    background: var(--color-action);
    color: var(--color-card-bg);
}

/* Connector between markers; the last step has nothing to connect to. */
.payments-setup-step__line {
    position: absolute;
    top: 30px;
    bottom: 4px;
    left: 13px;
    width: 1px;
    background: var(--color-border);
}

.payments-setup-step:last-child .payments-setup-step__line {
    display: none;
}

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

.payments-setup-step__title {
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
}

.payments-setup-step.is-pending .payments-setup-step__title {
    color: var(--color-text-muted);
}

.payments-setup-step__sub {
    margin: var(--spacing-2xs) 0 var(--spacing-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.payments-setup-step__control {
    width: 100%;
    /* Same cap as the wizard panel's vendor box (.integrations-ramp-match-row__pick .global-cs,
       main.css) — the two doors to the same pick should be the same size. */
    max-width: 20rem;
}

.payments-setup-actions {
    display: flex;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--color-border);
}

.payments-note {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-xsm);
    margin: var(--spacing-sm) 0 0;
    font-size: var(--font-size-sm);
}

.payments-note i {
    margin-top: var(--spacing-2xs);
}

.payments-note--warn {
    color: var(--color-warning-text);
}

/* Ramp refusing the vendor outright — the one genuine failure on this card. */
.payments-note--error {
    color: var(--color-error);
}

.payments-note--muted {
    color: var(--color-text-secondary);
}

.payments-note--ok {
    color: var(--color-text-secondary);
}

.payments-note--ok i {
    color: var(--color-success);
}