.settings-panel {
    display: none;
}

.settings-panel.is-active {
    display: block;
}

.settings-section {
    margin-bottom: var(--spacing-xl);
}

.settings-section:last-child {
    margin-bottom: 0;
}

/* Sub-section label inside a .settings-branding-section — matches the monospace
   eyebrow pattern used by .color-row__label, .settings-vocab-row__label,
   .settings-domain-card__heading so micro-typography reads as one system. */
.settings-section-label {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
}

/* === Vocabulary rows ===
   Card-style rows that mirror `.color-row` from the Colors section: a
   monospace eyebrow label on the left, then the editable inputs on the
   right. Replaces the old Bootstrap table so vocabulary reads as part of
   the same design system as Colors / Typography / Domains. */
.settings-vocab-grid {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.settings-vocab-row {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: var(--spacing-md);
    align-items: center;
    padding: var(--spacing-smd) var(--spacing-smd);
    border: 1px solid color-mix(in srgb, currentColor 8%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, currentColor 3%, transparent);
    transition: border-color 140ms ease;
}

.settings-vocab-row:hover {
    border-color: color-mix(in srgb, currentColor 14%, transparent);
}

.settings-vocab-row__label {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: var(--font-size-2xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.settings-vocab-row__inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-sm);
    min-width: 0;
}

.settings-vocab-row__field {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    min-width: 0;
}

.settings-vocab-row__field-label {
    font-size: var(--font-size-2xs);
    font-weight: 500;
    color: var(--color-text-muted);
}

/* Shared input style for vocab + skill level + custom domain — mirrors
   `.settings-typo-row__select`/`.typo-advanced__select` so every editable control
   in the branding tab uses the same color-mix borders + brand focus ring. */
.settings-branding-input {
    width: 100%;
    background: var(--color-card-bg);
    padding: var(--spacing-sm) var(--spacing-smd);
    border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
    border-radius: 10px;
    font: inherit;
    font-size: var(--font-size-md);
    line-height: 1.4;
    color: var(--color-text);
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.settings-branding-input:hover {
    border-color: color-mix(in srgb, currentColor 22%, transparent);
}

.settings-branding-input:focus {
    outline: none;
    border-color: var(--color-focus-ring);
    box-shadow: 0 0 0 3px var(--color-focus-ring-alpha);
}

.settings-branding-input::placeholder {
    color: color-mix(in srgb, currentColor 35%, transparent);
}

@media (max-width: 760px) {
    .settings-vocab-row {
        grid-template-columns: 1fr;
        gap: var(--spacing-sm);
    }
}

.settings-integration-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    margin-bottom: var(--spacing-smd);
}

.settings-integration-item:last-child {
    margin-bottom: 0;
}

.settings-integration-info {
    flex: 1;
    min-width: 0;
}

.settings-integration-info strong {
    display: block;
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--spacing-2xs);
}

.settings-integration-info small {
    color: #6b7280;
}

/* Integrations catalog: responsive card grid.
   Each service is one card — brand icon, name, and one centered button
   (Connect or Manage). Cards are the same size whatever the service state,
   and the grid auto-fills the full content width so there is no dead space. */
.settings-integration-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--spacing-smd);
}

/* Chrome (fill, border, radius, resting shadow) comes from `.global-card`;
   this class carries the card's inner layout and spacing. */
.settings-integration-card {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-smd);
    min-height: 118px;
    padding: var(--spacing-md);
}

.settings-integration-card--muted {
    opacity: 0.6;
}

.settings-integration-card-head {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    min-height: 32px;
}

.settings-integration-card-icon {
    width: 28px;
    height: 28px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.settings-integration-card-icon img {
    max-width: 28px;
    max-height: 28px;
    display: block;
}

.settings-integration-card-icon i {
    font-size: 1.25rem;
}

.settings-integration-card-name {
    font-weight: var(--font-weight-medium);
    font-size: 0.95rem;
    color: var(--color-text);
}

.settings-integration-badge {
    margin-left: auto;
    display: inline-block;
    padding: var(--spacing-2xs) var(--spacing-sm);
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
}

.settings-integration-badge.is-connected {
    color: var(--color-success);
    background: color-mix(in srgb, var(--color-success) 14%, transparent);
}

/* Not --color-warning: amber measures 2.15:1 on white. --status-warning-fg is
   the same hue darkened for exactly this, and the rest of the app uses it. */
.settings-integration-badge.is-attention {
    color: var(--status-warning-fg);
    background: var(--status-warning-bg);
}

/* The handle a feed reads, shown where a connected card shows nothing — a typo
   is the likeliest reason a handle feed breaks, so it stays on the card. */
.settings-integration-card-handle {
    margin: var(--spacing-xsm) 0 0;
    text-align: center;
    font-size: 0.9rem;
    color: var(--color-text);
}

.settings-integration-card-help {
    margin: var(--spacing-xsm) 0 0;
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--color-text-muted);
}

.settings-integration-card-help--attention {
    color: var(--status-warning-fg);
}

/* One centered action per card, pinned to the bottom so every card's button
   sits on the same line regardless of name length. */
.settings-integration-card-action {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    margin-top: auto;
}

.settings-integration-card-action .btn {
    min-width: 8.5rem;
}

.settings-integration-card-form {
    margin-top: var(--spacing-xs);
}

/* === Developer settings: service-account builder ===
   Pills take the org's brand color so the picker matches the white-label theme. */
.settings-scope-builder {
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    padding: var(--spacing-md);
    background: var(--color-card-bg);
}

.settings-scope-scroll {
    max-height: 340px;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    padding: var(--spacing-sm) var(--spacing-smd);
}

.settings-scope-group + .settings-scope-group {
    margin-top: var(--spacing-smd);
}

.settings-scope-group--off {
    opacity: 0.55;
}

/* Group heading matches the monospace eyebrow used across settings. */
.settings-scope-group__heading {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-xs);
}

.settings-scope-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-smd);
    padding: var(--spacing-xs) 0;
}

.settings-scope-row + .settings-scope-row {
    border-top: 1px solid var(--color-border);
}

.settings-scope-row__label {
    font-size: var(--font-size-sm);
    min-width: 0;
}

.settings-scope-row__pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--spacing-xsm);
}

.settings-scope-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 4rem;
    padding: var(--spacing-2xs) var(--spacing-sm);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-size: var(--font-size-xs);
    line-height: 1.2;
    color: var(--color-text-muted);
    background: transparent;
    cursor: pointer;
    margin-bottom: 0;
    user-select: none;
    transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.settings-scope-pill:hover {
    border-color: var(--color-action);
    color: var(--color-action);
}

.btn-check:checked + .settings-scope-pill {
    background: var(--color-action);
    border-color: var(--color-action);
    color: var(--color-neutral-ink-fg);
}

.btn-check:disabled + .settings-scope-pill {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* Money pills read as heavier: dashed outline until picked, then burnt
   orange instead of brand color, so a money grant never looks routine. */
.settings-scope-pill--money {
    border-style: dashed;
}

.btn-check:checked + .settings-scope-pill--money {
    background: #9a3412;
    border-color: #9a3412;
    border-style: solid;
    color: #fff;
}

.settings-scope-full-access {
    border: 1px solid rgba(217, 0, 43, 0.35);
    background: rgba(217, 0, 43, 0.04);
    border-radius: 0.5rem;
    padding: var(--spacing-sm) var(--spacing-smd);
}

.settings-money-callout {
    border: 1px solid rgba(255, 153, 0, 0.5);
    background: rgba(255, 193, 7, 0.08);
    border-radius: 0.5rem;
    padding: var(--spacing-sm) var(--spacing-smd);
}

.settings-cap-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-2xs) var(--spacing-sm);
    border-radius: 999px;
    background: var(--color-surface-subtle);
    font-size: var(--font-size-2xs);
    color: var(--color-text);
    white-space: nowrap;
}

.settings-cap-chip--money-on {
    background: rgba(217, 0, 43, 0.12);
    color: var(--color-error);
    font-weight: var(--font-weight-medium);
}

/* Amber pill: the account holds a money power but the money box is off. */
.settings-cap-chip--money-warn {
    background: rgba(255, 193, 7, 0.16);
    color: #9a6700;
    font-weight: var(--font-weight-medium);
}

/* Quiet "Look only" badge — informative, not a warning. */
.settings-cap-chip--look {
    background: var(--color-surface-subtle);
    color: var(--color-text-muted);
}

/* Resting service-account card — matches the webhook card spacing above.
   Chrome comes from `.global-card`; this class carries only the padding. */
.settings-sa-card {
    padding: var(--spacing-smd);
}

/* === Developer settings: webhook event picker ===
   Same tokens as .scope-*, sized for a checkbox list instead of a pill grid. */
.settings-event-picker {
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    padding: var(--spacing-sm) var(--spacing-smd);
    background: var(--color-card-bg);
}

.settings-event-picker-all {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    font-size: var(--font-size-sm);
    cursor: pointer;
    margin-bottom: 0;
}

.settings-event-picker-groups {
    max-height: 280px;
    overflow-y: auto;
    overscroll-behavior: contain;
    margin-top: var(--spacing-sm);
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--color-border);
}

.settings-event-picker-group + .settings-event-picker-group {
    margin-top: var(--spacing-sm);
}

.settings-event-picker-group__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
}

.settings-event-picker-group__toggle {
    display: flex;
    align-items: center;
    gap: var(--spacing-xsm);
    border: none;
    background: transparent;
    padding: var(--spacing-2xs) 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-button);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    cursor: pointer;
}

.settings-event-picker-group__count {
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
}

.settings-event-picker-group__actions {
    display: flex;
    gap: var(--spacing-sm);
    flex-shrink: 0;
}

.settings-event-picker-link {
    border: none;
    background: transparent;
    padding: 0;
    font-size: var(--font-size-2xs);
    color: var(--color-action);
    cursor: pointer;
}

.settings-event-picker-link:hover {
    text-decoration: underline;
}

.settings-event-picker-group__rows {
    padding: var(--spacing-xs) 0 var(--spacing-xs) var(--spacing-mdlg);
}

.settings-event-picker-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-xs) 0;
    font-size: var(--font-size-sm);
    cursor: pointer;
    margin-bottom: 0;
}

.settings-event-picker-row__label {
    flex-grow: 1;
}

.settings-event-picker-row__type {
    font-size: var(--font-size-2xs);
    color: var(--color-text-muted);
}

/* Keyboard focus on pill toggles — the native input is visually hidden by
   .btn-check, so the ring must land on the label. */
.btn-check:focus-visible + .settings-scope-pill {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
}

@media (max-width: 480px) {
    .settings-scope-row {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-xs);
    }

    .settings-scope-row__pills {
        justify-content: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .settings-scope-pill {
        transition: none;
    }
}