/* Shared settings/configuration-page chrome. These utilities were
   duplicated byte-for-byte across the Microsoft 365 connections page,
   the Exchange Online panel, and the SSO settings page; they live here
   so any settings surface can reuse the same numbered-step cards,
   destructive "danger zone", and access-denied notice without copying
   CSS. Pair with the global `.surface-card` utility (app.css) for the
   card body. Inputs / labels / buttons inherit from app.css. */

/* Step-number badge — a small brand-tinted circle preceding a section
   title so a multi-step setup (credentials → consent → test) reads at
   a glance. */
.step-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--color-brand-subtle, var(--color-surface-sunken));
    color: var(--color-brand);
    border: 1px solid var(--color-brand);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    line-height: 1;
}

/* Completed step — the badge swaps its number for a check and flips to
   the success palette, so a returning operator reads progress at a
   glance without re-reading the step copy. */
.step-badge--done {
    background: var(--color-success);
    border-color: var(--color-success);
    color: var(--color-text-on-brand, #fff);
}

@media (forced-colors: active) {
    .step-badge {
        border: 1px solid CanvasText;
        color: CanvasText;
        background: Canvas;
    }
}

/* Section legend — a heading row with an optional muted hint beneath.
   Used on <legend> inside a card <fieldset> (re-flowed to block so it
   sits above the fields rather than overlapping the border) or on any
   section header. */
.section-legend {
    display: block;
    width: 100%;
    padding: 0;
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border-subtle);
}

.section-legend__title {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    /* Body/UI font (Inter), not the brand display face — these are functional
       settings section labels, so they read uniformly with the form content
       around them rather than standing out as display-font headings (which the
       global `h1,h2,h3` rule would otherwise apply to this <h2>). */
    font-family: var(--font-sans);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    letter-spacing: var(--letter-spacing-tight, -0.01em);
}

.section-legend__hint {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    line-height: var(--line-height-snug, 1.4);
}

/* Danger zone — a destructive action visually separated so it can't be
   reached by accident. Subdued surface with a thin danger border; the
   button inside carries `.danger` so the global rule colours it red. */
.danger-zone {
    margin-top: var(--space-8);
    padding: var(--space-5) var(--space-6);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-danger);
    background: var(--color-surface);
}

@media (forced-colors: active) {
    .danger-zone {
        border: 1px solid CanvasText;
    }
}

.danger-zone__heading {
    margin: 0 0 var(--space-2);
    /* Body/UI font (Inter) — see .section-legend__title; a functional section
       label, uniform with the form content rather than a display-font heading. */
    font-family: var(--font-sans);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

.danger-zone p {
    margin: 0 0 var(--space-3);
    color: var(--color-text-muted);
}

/* Forbidden / access-denied inline notice — a single neutral message
   card replacing a form the caller isn't authorised to use. */
.forbidden-notice {
    margin-top: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-subtle);
    background: var(--color-surface);
    color: var(--color-text);
}