/* The Payments settings page — every rule the page used to carry in its inline
   <style> block (moved 2026-09-03; only the class names changed, onto the
   payments- charter prefix). Loaded last in base.html so the cascade
   position the inline block had (after every linked sheet) is preserved. */

/* One shared card shell (same look as .settings-branding-section) so every card
   on this page reads as a peer. The account card spans the full row;
   the rest sit in a two-column grid on large screens. */
.payments-settings-card {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-sm);
    padding: var(--spacing-mdlg) var(--spacing-lg);
}
.payments-settings-card__header {
    display: flex; align-items: center; gap: var(--spacing-sm);
    padding-bottom: var(--spacing-smd); margin-bottom: var(--spacing-md);
    border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent);
}
.payments-settings-card__header h6 { margin: 0; }
.payments-settings-grid {
    display: grid; grid-template-columns: 1fr;
    gap: var(--spacing-lg); align-items: start; margin-top: var(--spacing-lg);
}
@media (min-width: 992px) {
    .payments-settings-grid { grid-template-columns: 1fr 1fr; }
    /* An off-platform org has only the Bills card down here. Two columns
       would leave it stranded at half the width of every card above it. */
    .payments-settings-grid:has(> .payments-settings-card:only-child) { grid-template-columns: 1fr; }
}

/* One row per connected tool: mark, name, state, and whatever control that
   state earns — same shape whether the tool is connected or not. */
/* Top-aligned, not centered: a connected QuickBooks row carries a toggle
   under its note, and centering floated the mark and the badge down beside
   the small print instead of the tool's name. */
.payments-settings-tool {
    display: flex; align-items: flex-start; gap: var(--spacing-smd);
    padding: var(--spacing-md) 0;
    border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent);
}
.payments-settings-tool > img { margin-top: 0.15rem; }
.payments-settings-tool:last-child { border-bottom: 0; padding-bottom: 0; }
.payments-settings-tool__body { min-width: 0; flex: 1; }
.payments-settings-tool__name { font-weight: var(--font-weight-medium); }
.payments-settings-tool__note { margin: 0; font-size: var(--font-size-md); color: var(--color-text-muted); }

/* Setup wizard stepper. */
.payments-settings-steps { display: flex; align-items: center; gap: var(--spacing-sm); margin-bottom: var(--spacing-md); }
.payments-settings-steps__bar { flex: 1; height: 1px; min-width: var(--spacing-smd); background: var(--color-border); }
.payments-settings-step {
    display: inline-flex; align-items: center; gap: var(--spacing-xsm);
    background: none; border: 0; padding: 0;
    font-size: var(--font-size-md); color: var(--color-text-muted);
}
.payments-settings-step__num {
    width: 1.6rem; height: 1.6rem; border-radius: 50%;
    border: 1px solid currentColor;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: var(--font-size-sm);
}
.payments-settings-step.is-active { color: var(--color-action); font-weight: var(--font-weight-medium); }
.payments-settings-step.is-done { color: var(--color-success); }

/* Money-movement freeze throw-switch (ADR-072). Named payments-freeze-*, not
   payments-settings-*, because it is its own component, not part of the settings
   card grid above. State is driven purely from the native checkbox's :checked
   via :has(), so the visuals can never disagree with what will actually be
   submitted. */

/* The switch's live/frozen palette, derived once from the house tokens so the
   track gradients, icons, state labels, and armed-card glow all move together.
   Declared on the card and the control both — the control styles everything
   inside it, the card's armed state needs the frozen color too. */
.payments-freeze-card,
.payments-freeze-control {
    --freeze-live: var(--color-success);
    --freeze-live-top: color-mix(in srgb, var(--color-success) 72%, white);
    --freeze-frozen: var(--color-warning-text);
    --freeze-frozen-top: var(--color-warning);
}

.payments-freeze-control {
    display: flex;
    align-items: center;
    gap: var(--spacing-mdlg);
    margin-top: var(--spacing-xs);
}

/* The switch — big, standalone, on the left. */
.payments-freeze-switch {
    position: relative;
    flex: 0 0 auto;
    display: block;
    width: 132px;
    height: 60px;
    cursor: pointer;
    margin: 0;
}

/* Native input: invisible but covers the track for clicks + keyboard. */
.payments-freeze-switch input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

.payments-freeze-switch__track {
    position: absolute;
    inset: 0;
    display: block;
    border-radius: var(--radius-pill);
    padding: 6px;
    /* LIVE (default, unchecked): calm green. */
    background: linear-gradient(180deg, var(--freeze-live-top) 0%, var(--freeze-live) 100%);
    box-shadow:
        inset 0 2px 6px rgba(0, 0, 0, 0.28),
        inset 0 -1px 0 rgba(255, 255, 255, 0.12);
    transition: background 0.25s ease, box-shadow 0.25s ease;
}

.payments-freeze-switch__thumb {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(180deg, var(--color-card-bg) 0%, var(--color-grey-100) 100%);
    box-shadow:
        0 3px 6px rgba(0, 0, 0, 0.32),
        0 1px 0 rgba(255, 255, 255, 0.9) inset;
    transform: translateX(0);
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

.payments-freeze-switch__icon {
    position: absolute;
    font-size: var(--font-size-xl);
    line-height: 1;
    transition: opacity 0.2s ease;
}
.payments-freeze-switch__icon--live { color: var(--freeze-live); opacity: 1; }
.payments-freeze-switch__icon--frozen { color: var(--freeze-frozen); opacity: 0; }

/* FROZEN (checked): amber, thumb thrown right, paused glyph. */
.payments-freeze-switch input:checked ~ .payments-freeze-switch__track {
    background: linear-gradient(180deg, var(--freeze-frozen-top) 0%, var(--freeze-frozen) 100%);
    box-shadow:
        inset 0 2px 6px rgba(0, 0, 0, 0.32),
        0 0 0 4px color-mix(in srgb, var(--freeze-frozen) 20%, transparent);
}
.payments-freeze-switch input:checked ~ .payments-freeze-switch__track .payments-freeze-switch__thumb {
    transform: translateX(72px);
}
.payments-freeze-switch input:checked ~ .payments-freeze-switch__track .payments-freeze-switch__icon--live { opacity: 0; }
.payments-freeze-switch input:checked ~ .payments-freeze-switch__track .payments-freeze-switch__icon--frozen { opacity: 1; }

/* Keyboard focus ring on the track (the input itself is transparent). */
.payments-freeze-switch input:focus-visible ~ .payments-freeze-switch__track {
    outline: 3px solid color-mix(in srgb, var(--freeze-frozen) 55%, transparent);
    outline-offset: 3px;
}

.payments-freeze-control__body { min-width: 0; }

.payments-freeze-control__state { margin-bottom: var(--spacing-xs); }
.payments-freeze-state {
    display: none;
    align-items: center;
    gap: var(--spacing-sm);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.13em;
    text-transform: uppercase;
}
.payments-freeze-state__dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 22%, transparent);
}
.payments-freeze-state--live { color: var(--freeze-live); }
.payments-freeze-state--frozen { color: var(--freeze-frozen); }
/* Default → live; show frozen only when the switch is on. */
.payments-freeze-control:not(:has(.payments-freeze-switch input:checked)) .payments-freeze-state--live { display: inline-flex; }
.payments-freeze-control:has(.payments-freeze-switch input:checked) .payments-freeze-state--frozen { display: inline-flex; }

.payments-freeze-control__label {
    display: block;
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    cursor: pointer;
    margin: 0 0 var(--spacing-xs);
}

.payments-freeze-control__help {
    font-size: var(--font-size-sm);
    line-height: 1.5;
    color: var(--color-text-muted);
    margin: 0;
    max-width: 46ch;
}

@media (max-width: 480px) {
    .payments-freeze-control { flex-direction: column; align-items: flex-start; gap: var(--spacing-md); }
}

@media (prefers-reduced-motion: reduce) {
    .payments-freeze-switch__track,
    .payments-freeze-switch__thumb,
    .payments-freeze-switch__icon { transition: none; }
}

/* The card "arms" when the freeze switch is thrown. */
.payments-freeze-card:has(.payments-freeze-switch input:checked) {
    border-color: color-mix(in srgb, var(--freeze-frozen) 55%, transparent) !important;
    box-shadow: 0 10px 30px -16px color-mix(in srgb, var(--freeze-frozen) 60%, transparent);
}