/* Owner Settings uses the shared invoice-product primitives. */
#ownerSettingsSection .cp-management-list {
    inline-size: 100%;
    margin-inline: 0;
}

/* PBI-038 round-2 items 2-3: Settings tab redesign proposal
   (docs/product/design/2026-09-16-settings-tab-proposal.md). Profile's email
   pill reuses the cp-management-row__status pill primitive with two additive
   modifiers scoped to this section. */
.cp-owner-pill-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.cp-owner-pill--primary {
    gap: 6px;
    border-color: var(--cp-primary);
    color: var(--cp-primary);
    background: color-mix(in srgb, var(--cp-primary) 8%, var(--cp-surface-muted));
}

.cp-owner-pill__verified {
    color: var(--cp-safe);
    font-weight: 700;
}

/* Provider configuration dialog: Regenerate/Revoke sit in an intrinsic
   auto-fit grid, no viewport breakpoint (proposal, Integrations spec). */
.cp-provider-drawer-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 8px;
}

.cp-provider-drawer-actions .cp-button {
    inline-size: 100%;
}

/* PBI-038 round-4, PO-accepted 2026-09-17: Settings tab — cards, one fixed
   height, one shared action-column right edge. Ported from the accepted
   prototype (docs/design-system/components/patterns/settings-tab-r4/,
   docs/product/design/2026-09-17-settings-cards-round-4.md), same tokens,
   production `cp-settings-*` names (the prototype's `r4-` prefix stays
   pattern-local). Registered in docs/design-system/REGISTRY.md. */
.cp-settings { display: grid; gap: var(--cp-gap-out, 24px); }
.cp-settings-section { display: grid; gap: 12px; }
.cp-settings-section-title {
    margin: 0;
    color: var(--cp-ink);
    font: 700 var(--cp-type-body) / 1.2 var(--crest-font, sans-serif);
}
.cp-settings-stack { display: grid; gap: 10px; }

.cp-settings-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    inline-size: 100%;
    box-sizing: border-box;
    min-block-size: 76px;
    padding: 10px 16px;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-document);
    background: var(--cp-surface-document);
}
.cp-settings-card--disabled { background: var(--cp-surface-muted); }
.cp-settings-card--muted .cp-settings-title { color: var(--cp-muted); font-weight: 600; }

.cp-settings-lead {
    flex: 0 0 auto;
    inline-size: 36px;
    block-size: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--cp-surface-muted);
    color: var(--cp-safe);
}
.cp-settings-lead svg { inline-size: 18px; block-size: 18px; }
.cp-settings-lead--plan { color: var(--cp-primary); }
.cp-settings-lead--avatar {
    background: color-mix(in srgb, var(--cp-primary) 16%, var(--cp-surface-muted));
    color: var(--cp-text);
    font: 700 var(--cp-type-body) / 1 var(--crest-font, sans-serif);
}
.cp-settings-lead--logo {
    border-radius: var(--cp-radius-row);
    background: var(--cp-surface-document);
    border: 1px solid var(--cp-border);
}
.cp-settings-lead--logo img { inline-size: 26px; block-size: 26px; object-fit: contain; }
.cp-settings-lead--device { color: var(--cp-muted); }

.cp-settings-mid { flex: 1 1 12ch; min-inline-size: 0; display: grid; gap: 2px; align-content: center; }
.cp-settings-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-inline-size: 0;
}
.cp-settings-title {
    margin: 0;
    max-inline-size: 100%;
    color: var(--cp-ink);
    font: 600 var(--cp-type-body) / 1.25 var(--crest-font, sans-serif);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    word-break: break-word;
}
.cp-settings-title-row:has(.cp-badge) .cp-settings-title { flex: 1 1 auto; }
.cp-settings-status {
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-inline-size: 0;
    color: var(--cp-muted);
    font-size: var(--cp-type-detail);
    overflow-wrap: anywhere;
}
.cp-settings-dot { inline-size: 8px; block-size: 8px; border-radius: 50%; flex: 0 0 auto; background: var(--cp-muted); }
.cp-settings-dot--safe { background: var(--cp-safe); }
.cp-settings-dot--primary { background: var(--cp-primary); }

.cp-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: var(--cp-radius-control);
    font-size: var(--cp-type-detail);
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.cp-badge--info {
    background: color-mix(in srgb, var(--cp-primary) 8%, transparent);
    color: var(--cp-primary);
}
/* A card that is not available yet reads as a neutral note, not as an action: muted ink holds 7:1 on its tint in both themes. */
.cp-settings-card--disabled .cp-badge--info {
    background: transparent;
    color: var(--cp-muted);
}
.cp-badge--upsell {
    background: color-mix(in srgb, var(--crest-document-attention) 18%, transparent);
    color: var(--crest-document-attention);
}

/* One fixed-size action slot; right edge shared by every card in every
   section. A coming-soon card puts a badge in this slot instead of a
   button — the column holds EITHER, never both, at the same width/centering. */
.cp-settings-action {
    flex: 0 0 auto;
    min-inline-size: 72px;
    min-block-size: 44px;
    padding-inline: 8px;
    justify-content: center;
    font-size: var(--cp-type-body);
}
.cp-badge.cp-settings-action {
    min-block-size: 0;
    padding: 3px 8px;
    font-size: var(--cp-type-detail);
    justify-content: center;
    text-align: center;
}

/* Stripe checklist inside the Settings dialog. */
.cp-settings-checklist { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; min-inline-size: 0; }
.cp-settings-step { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; min-inline-size: 0; }
.cp-settings-step-num {
    inline-size: 26px;
    block-size: 26px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: var(--cp-type-detail);
    font-weight: 700;
    background: var(--cp-surface-muted);
    color: var(--cp-muted);
}
.cp-settings-step[data-done="true"] .cp-settings-step-num { background: var(--cp-safe); color: var(--cp-on-color); }
.cp-settings-step-body { display: grid; gap: 8px; min-inline-size: 0; }
.cp-settings-step-label { margin: 0; color: var(--cp-ink); font: 600 var(--cp-type-body) / 1.3 var(--crest-font, sans-serif); }
.cp-settings-step-state { margin: 0; color: var(--cp-muted); font-size: var(--cp-type-detail); }
.cp-settings-step[data-done="true"] .cp-settings-step-state { color: var(--cp-safe); font-weight: 600; }

.cp-settings-copy-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-inline-size: 0;
    min-block-size: var(--cp-hit-target);
    padding: 6px 10px;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-row);
    background: var(--cp-surface-muted);
}
.cp-settings-copy-value {
    flex: 1 1 auto;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--cp-ink);
    font: 500 var(--cp-type-detail) / 1.3 ui-monospace, monospace;
}

.cp-settings-disclosure { color: var(--cp-muted); font-size: var(--cp-type-detail); }
.cp-settings-disclosure summary {
    display: inline-flex;
    min-block-size: 32px;
    align-items: center;
    color: var(--cp-primary);
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}
.cp-settings-text-danger {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--cp-hit-target);
    padding: 0;
    border: 0;
    border-block-end: 1px solid currentColor;
    background: transparent;
    color: var(--cp-danger);
    font: 400 var(--cp-type-body) / 1.2 var(--crest-font, sans-serif);
    cursor: pointer;
}
@media (any-hover: hover) {
    .cp-settings-text-danger:hover { color: var(--cp-danger-hover); }
}

@media (prefers-reduced-motion: reduce) {
    .cp-settings-card, .cp-badge { transition: none; }
}