/* ═══════════════════════════════════════════════════════════════════
   Scheduled Reports — shared component styles
   Class prefix: sched-

   Editorial system mirrors the pa-an-* analytics page tokens
   (warm paper, ink-on-paper text, orange printer's mark accent).
   Tokens are referenced with fallbacks so the button renders
   correctly even when used outside the analytics CSS scope.
   ═══════════════════════════════════════════════════════════════════ */

/* -------------------------------------------------------------------
   ScheduleReportButton — masthead inline action.
   Sits next to Export CSV in the analytics page rail.
   Restrained, text-secondary level, glyph + label.
   ------------------------------------------------------------------- */
/* Default sched-btn used outside the analytics instrument:
   still a restrained ghost button. */
.sched-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: transparent;
    border: 1px solid var(--pa-an-neutral-300, #cdc7be);
    border-radius: var(--pa-an-radius, 6px);
    color: var(--pa-an-ink, #1a1714);
    font-family: var(--font-body, Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: color 140ms ease,
                border-color 140ms ease,
                background-color 140ms ease,
                box-shadow 140ms ease;
    white-space: nowrap;
    user-select: none;
}

.sched-btn__icon {
    width: 18px;
    height: 18px;
    color: var(--pa-an-orange, #DD9142);
    flex: 0 0 auto;
    transition: color 140ms ease;
}

.sched-btn__copy {
    display: grid;
    gap: 2px;
    text-align: left;
}

.sched-btn__label {
    font: 800 0.84rem/1 inherit;
    color: var(--pa-an-ink, #1a1714);
    letter-spacing: 0.01em;
}

.sched-btn__sub {
    color: var(--pa-an-neutral, #5c5852);
    font: italic 500 0.69rem/1 inherit;
}

.sched-btn:hover {
    border-color: var(--pa-an-orange, #DD9142);
    background-color: rgba(221, 145, 66, 0.06);
}

.sched-btn:focus-visible {
    outline: none;
    border-color: var(--pa-an-orange, #DD9142);
    box-shadow: 0 0 0 2px rgba(221, 145, 66, 0.35);
}

.sched-btn:active {
    background-color: rgba(221, 145, 66, 0.12);
    transform: translateY(1px);
}

/* Attached treatment: when the schedule button is rendered as the right
   cell of the analytics instrument, drop its border/radius so it shares
   the parent frame, and let .pa-an-instrument-action own the hover wash. */
.pa-an-instrument-action .sched-btn {
    display: grid;
    grid-template-columns: 18px auto;
    grid-template-rows: auto auto;
    align-content: center;
    align-items: center;
    column-gap: 8px;
    row-gap: 2px;
    min-width: 130px;
    padding: 0 16px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.pa-an-instrument-action .sched-btn .sched-btn__icon {
    grid-row: 1 / span 2;
    align-self: center;
    width: 18px;
    height: 18px;
}

.pa-an-instrument-action .sched-btn:hover,
.pa-an-instrument-action .sched-btn:active {
    background: transparent;
    transform: none;
}

.pa-an-instrument-action .sched-btn:focus-visible {
    outline: 2px solid var(--pa-an-orange, #DD9142);
    outline-offset: -2px;
    box-shadow: none;
}

/* Narrow viewports — collapse the subtitle line. */
@media (max-width: 599px) {
    .sched-btn {
        padding: 8px 10px;
        gap: 6px;
    }

    .sched-btn__sub {
        display: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   Wizard — /proaudit/reports/schedules/new
   Class prefix: sr-wizard-

   Editorial broadsheet system mirrors the analytics pa-an-* tokens.
   Warm cream paper, ink-on-paper, printer's-mark amber accent.
   Vertical stepper renders like a typeset table-of-contents on the
   left rail; right side floats a focused step card on the paper.
   ═══════════════════════════════════════════════════════════════════ */

.sr-wizard {
    --sr-paper: var(--pa-an-paper, #f4f2ef);
    --sr-paper-raised: #faf7f2;
    --sr-ink: var(--pa-an-ink, #1a1714);
    --sr-ink-muted: var(--pa-an-neutral, #5c5852);
    --sr-rule: var(--pa-an-neutral-200, #e6e2dc);
    --sr-rule-strong: var(--pa-an-neutral-300, #cdc7be);
    --sr-orange: var(--pa-an-orange, #dd9142);
    --sr-orange-soft: rgba(221, 145, 66, 0.10);
    --sr-shadow: 0 1px 0 rgba(40, 34, 27, 0.04),
                 0 6px 24px -10px rgba(40, 34, 27, 0.18);
    --sr-radius: var(--pa-an-radius, 6px);
    --sr-font-body: var(--font-body, Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
    --sr-font-display: var(--font-display, var(--sr-font-body));

    max-width: 1180px;
    margin: 0 auto;
    padding: 32px 28px 64px;
    background: var(--sr-paper);
    color: var(--sr-ink);
    font-family: var(--sr-font-body);
}

/* Masthead -------------------------------------------------------- */

.sr-wizard__masthead {
    padding-bottom: 20px;
    margin-bottom: 28px;
    border-bottom: 1px solid var(--sr-rule);
}

.sr-wizard__eyebrow {
    margin: 0 0 6px;
    font-size: 0.78rem;
    color: var(--sr-ink-muted);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

    .sr-wizard__eyebrow em {
        font-style: italic;
        font-weight: 400;
        letter-spacing: 0;
        text-transform: none;
        color: var(--sr-orange);
    }

.sr-wizard__title {
    margin: 0 0 6px;
    font-family: var(--sr-font-display);
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.1;
}

.sr-wizard__dek {
    margin: 0;
    color: var(--sr-ink-muted);
    font-size: 0.95rem;
    max-width: 60ch;
}

/* Layout: stepper rail + card ------------------------------------ */

.sr-wizard__layout {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 40px;
    align-items: start;
}

@media (max-width: 900px) {
    .sr-wizard__layout {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/* Stepper --------------------------------------------------------- */

.sr-wizard__stepper {
    position: sticky;
    top: 16px;
    padding-right: 16px;
    border-right: 1px solid var(--sr-rule);
}

@media (max-width: 900px) {
    .sr-wizard__stepper {
        position: static;
        padding-right: 0;
        padding-bottom: 16px;
        border-right: none;
        border-bottom: 1px solid var(--sr-rule);
    }
}

.sr-wizard__steps {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: sr-wizard;
}

.sr-wizard__step {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 10px;
    padding: 12px 0;
    align-items: baseline;
    border-bottom: 1px dashed var(--sr-rule);
    transition: opacity 200ms ease;
}

    .sr-wizard__step:last-child {
        border-bottom: none;
    }

.sr-wizard__step-num {
    font-family: var(--sr-font-display);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--sr-rule-strong);
    font-variant-numeric: tabular-nums;
    transition: color 200ms ease;
}

.sr-wizard__step-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.sr-wizard__step-label {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--sr-ink-muted);
    transition: color 200ms ease;
}

.sr-wizard__step-hint {
    font-size: 0.78rem;
    font-style: italic;
    color: var(--sr-rule-strong);
}

.sr-wizard__step--current .sr-wizard__step-num,
.sr-wizard__step--current .sr-wizard__step-label {
    color: var(--sr-ink);
}

.sr-wizard__step--current .sr-wizard__step-label {
    text-decoration: underline;
    text-decoration-color: var(--sr-orange);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.sr-wizard__step--done .sr-wizard__step-num,
.sr-wizard__step--done .sr-wizard__step-label {
    color: var(--sr-ink);
}

.sr-wizard__step--done .sr-wizard__step-num::after {
    content: " ·";
    color: var(--sr-orange);
}

.sr-wizard__step--pending {
    opacity: 0.7;
}

/* Card ------------------------------------------------------------ */

.sr-wizard__card {
    background: var(--sr-paper-raised);
    border: 1px solid var(--sr-rule);
    border-radius: var(--sr-radius);
    box-shadow: var(--sr-shadow);
    padding: 28px 32px 24px;
    min-height: 460px;
    display: flex;
    flex-direction: column;
}

.sr-wizard__pane {
    flex: 1 1 auto;
    animation: sr-wizard-fade 240ms ease-out both;
}

@media (prefers-reduced-motion: reduce) {
    .sr-wizard__pane {
        animation: none;
    }
}

@keyframes sr-wizard-fade {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.sr-wizard__pane-head {
    margin-bottom: 24px;
    padding-bottom: 14px;
    border-bottom: 1px dotted var(--sr-rule-strong);
}

.sr-wizard__pane-eyebrow {
    margin: 0 0 4px;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--sr-ink-muted);
}

    .sr-wizard__pane-eyebrow em {
        font-style: italic;
        font-weight: 500;
        text-transform: none;
        letter-spacing: 0;
        color: var(--sr-orange);
    }

.sr-wizard__pane-title {
    margin: 0 0 4px;
    font-family: var(--sr-font-display);
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.sr-wizard__pane-dek {
    margin: 0;
    color: var(--sr-ink-muted);
    font-size: 0.9rem;
    max-width: 64ch;
}

/* Step 1 — report grid -------------------------------------------- */

.sr-wizard__report-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}

.sr-wizard__report-card {
    display: grid;
    grid-template-columns: 6px 1fr;
    gap: 14px;
    padding: 0;
    background: var(--sr-paper);
    border: 1px solid var(--sr-rule);
    border-radius: var(--sr-radius);
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
    overflow: hidden;
    transition: border-color 160ms ease,
                background 160ms ease,
                box-shadow 160ms ease;
}

    .sr-wizard__report-card:hover {
        border-color: var(--sr-rule-strong);
        background: var(--sr-paper-raised);
    }

    .sr-wizard__report-card:focus-visible {
        outline: none;
        box-shadow: 0 0 0 2px var(--sr-orange);
        border-color: var(--sr-orange);
    }

.sr-wizard__report-card-marker {
    background: var(--sr-rule-strong);
    transition: background 160ms ease;
}

.sr-wizard__report-card--selected {
    border-color: var(--sr-ink);
    background: var(--sr-paper-raised);
    box-shadow: 0 0 0 1px var(--sr-ink) inset;
}

    .sr-wizard__report-card--selected .sr-wizard__report-card-marker {
        background: var(--sr-orange);
    }

.sr-wizard__report-card-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px 14px 0;
}

.sr-wizard__report-card-name {
    font-family: var(--sr-font-display);
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--sr-ink);
}

.sr-wizard__report-card-tagline {
    font-size: 0.85rem;
    color: var(--sr-ink-muted);
    line-height: 1.4;
}

.sr-wizard__report-card-audience {
    margin-top: 6px;
    font-size: 0.76rem;
    color: var(--sr-rule-strong);
    letter-spacing: 0.02em;
}

    .sr-wizard__report-card-audience em {
        font-style: italic;
        color: var(--sr-orange);
        margin-right: 4px;
    }

/* Step 2 — filter summary ----------------------------------------- */

.sr-wizard__filter-summary {
    margin: 0 0 20px;
    display: grid;
    gap: 10px;
}

.sr-wizard__filter-row {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px dotted var(--sr-rule);
}

    .sr-wizard__filter-row dt {
        font-size: 0.78rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--sr-ink-muted);
    }

    .sr-wizard__filter-row dd {
        margin: 0;
        font-size: 0.95rem;
        color: var(--sr-ink);
        font-variant-numeric: tabular-nums;
    }

.sr-wizard__filter-value {
    font-weight: 500;
}

.sr-wizard__filter-sep {
    margin: 0 6px;
    color: var(--sr-orange);
}

.sr-wizard__hint {
    margin: 12px 0 0;
    font-size: 0.88rem;
    font-style: italic;
    color: var(--sr-ink-muted);
}

.sr-wizard__link {
    color: var(--sr-ink);
    border-bottom: 1px solid var(--sr-orange);
    text-decoration: none;
    transition: color 140ms ease;
}

    .sr-wizard__link:hover {
        color: var(--sr-orange);
    }

/* Step 3 — recipients --------------------------------------------- */

.sr-wizard__meter {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--sr-paper);
    border: 1px solid var(--sr-rule);
    border-radius: var(--sr-radius);
    margin-bottom: 20px;
    font-size: 0.85rem;
}

.sr-wizard__meter-label {
    font-weight: 500;
    color: var(--sr-ink-muted);
    letter-spacing: 0.02em;
}

.sr-wizard__meter-count {
    font-variant-numeric: tabular-nums;
    color: var(--sr-ink);
    font-weight: 500;
}

.sr-wizard__meter-bar {
    flex: 1 1 auto;
    height: 4px;
    background: var(--sr-rule);
    border-radius: 2px;
    overflow: hidden;
    min-width: 80px;
}

.sr-wizard__meter-bar-fill {
    display: block;
    height: 100%;
    background: var(--sr-orange);
    transition: width 200ms ease;
}

.sr-wizard__recipient-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    padding: 16px;
    background: var(--sr-paper);
    border: 1px solid var(--sr-rule);
    border-radius: var(--sr-radius);
    align-items: start;
    margin-bottom: 16px;
}

.sr-wizard__consent {
    grid-column: 1 / -1;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 0.85rem;
    color: var(--sr-ink-muted);
    padding: 8px 10px;
    background: var(--sr-orange-soft);
    border-left: 3px solid var(--sr-orange);
    border-radius: 3px;
}

    .sr-wizard__consent input[type="checkbox"] {
        margin-top: 2px;
        accent-color: var(--sr-orange);
    }

.sr-wizard__add-btn {
    grid-column: 1 / -1;
    justify-self: end;
    padding: 8px 16px;
    border: 1px solid var(--sr-ink);
    background: transparent;
    color: var(--sr-ink);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    border-radius: var(--sr-radius);
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease;
}

    .sr-wizard__add-btn:not(:disabled):hover {
        background: var(--sr-ink);
        color: var(--sr-paper);
    }

    .sr-wizard__add-btn:disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }

.sr-wizard__recipient-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--sr-rule);
}

.sr-wizard__recipient-row {
    display: grid;
    grid-template-columns: 80px 1fr auto 28px;
    gap: 12px;
    align-items: center;
    padding: 10px 4px;
    border-bottom: 1px dotted var(--sr-rule);
}

.sr-wizard__recipient-kind {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sr-orange);
    font-weight: 600;
}

.sr-wizard__recipient-name {
    font-size: 0.95rem;
    color: var(--sr-ink);
}

.sr-wizard__recipient-meta {
    font-size: 0.82rem;
    color: var(--sr-ink-muted);
    font-variant-numeric: tabular-nums;
}

.sr-wizard__recipient-remove {
    background: transparent;
    border: 1px solid var(--sr-rule);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    line-height: 1;
    color: var(--sr-ink-muted);
    cursor: pointer;
    font-size: 1rem;
    transition: color 140ms ease, border-color 140ms ease;
}

    .sr-wizard__recipient-remove:hover {
        color: var(--sr-orange);
        border-color: var(--sr-orange);
    }

.sr-wizard__empty {
    margin: 16px 0;
    padding: 16px;
    background: var(--sr-paper);
    border: 1px dashed var(--sr-rule-strong);
    border-radius: var(--sr-radius);
    color: var(--sr-ink-muted);
    font-style: italic;
    font-size: 0.9rem;
    text-align: center;
}

/* Step 4 — schedule + format -------------------------------------- */

.sr-wizard__field-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

@media (max-width: 600px) {
    .sr-wizard__field-grid {
        grid-template-columns: 1fr;
    }
}

.sr-wizard__field--full {
    grid-column: 1 / -1;
}

.sr-wizard__formats {
    margin: 16px 0 12px;
    padding: 14px 16px;
    border: 1px solid var(--sr-rule);
    border-radius: var(--sr-radius);
    background: var(--sr-paper);
}

    .sr-wizard__formats legend {
        padding: 0 6px;
        font-size: 0.78rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--sr-ink-muted);
    }

.sr-wizard__format {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-right: 24px;
    font-size: 0.9rem;
    color: var(--sr-ink);
    cursor: pointer;
}

    .sr-wizard__format input[type="checkbox"] {
        accent-color: var(--sr-orange);
    }

.sr-wizard__format--always {
    color: var(--sr-ink-muted);
    font-style: italic;
    cursor: default;
}

.sr-wizard__skip-empty {
    display: flex;
    gap: 10px;
    align-items: center;
    margin: 8px 0;
    font-size: 0.9rem;
    color: var(--sr-ink-muted);
}

    .sr-wizard__skip-empty input[type="checkbox"] {
        accent-color: var(--sr-orange);
    }

/* Step 5 — review ------------------------------------------------- */

.sr-wizard__review {
    display: grid;
    gap: 20px;
}

.sr-wizard__review-block {
    margin: 0;
    padding: 16px 18px;
    background: var(--sr-paper);
    border: 1px solid var(--sr-rule);
    border-radius: var(--sr-radius);
}

.sr-wizard__review-eyebrow {
    margin: 0 0 10px;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sr-ink-muted);
}

    .sr-wizard__review-eyebrow em {
        font-style: italic;
        text-transform: none;
        letter-spacing: 0;
        color: var(--sr-orange);
        font-weight: 500;
    }

.sr-wizard__review-row {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 14px;
    padding: 6px 0;
    border-bottom: 1px dotted var(--sr-rule);
    font-size: 0.9rem;
}

    .sr-wizard__review-row:last-child {
        border-bottom: none;
    }

    .sr-wizard__review-row dt {
        font-size: 0.78rem;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--sr-ink-muted);
    }

    .sr-wizard__review-row dd {
        margin: 0;
        color: var(--sr-ink);
        font-variant-numeric: tabular-nums;
    }

.sr-wizard__review-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 6px;
}

    .sr-wizard__review-list li {
        display: grid;
        grid-template-columns: 70px 1fr auto;
        gap: 10px;
        align-items: center;
        padding: 6px 0;
        border-bottom: 1px dotted var(--sr-rule);
        font-size: 0.88rem;
    }

.sr-wizard__mono {
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 0.85rem;
}

.sr-wizard__error {
    margin: 12px 0 0;
    padding: 10px 14px;
    background: rgba(208, 70, 60, 0.08);
    border-left: 3px solid #d0463c;
    border-radius: 3px;
    color: #8a2a22;
    font-size: 0.88rem;
}

/* Navigation footer ----------------------------------------------- */

.sr-wizard__nav {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding-top: 24px;
    margin-top: 24px;
    border-top: 1px solid var(--sr-rule);
}

.sr-wizard__nav-back,
.sr-wizard__nav-primary {
    font: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 9px 20px;
    border-radius: var(--sr-radius);
    cursor: pointer;
    transition: background 140ms ease,
                color 140ms ease,
                border-color 140ms ease,
                box-shadow 140ms ease;
}

.sr-wizard__nav-back {
    background: transparent;
    color: var(--sr-ink-muted);
    border: 1px solid var(--sr-rule);
}

    .sr-wizard__nav-back:not(:disabled):hover {
        color: var(--sr-ink);
        border-color: var(--sr-rule-strong);
    }

    .sr-wizard__nav-back:disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }

.sr-wizard__nav-primary {
    background: var(--sr-ink);
    color: var(--sr-paper);
    border: 1px solid var(--sr-ink);
}

    .sr-wizard__nav-primary:not(:disabled):hover {
        background: var(--sr-orange);
        border-color: var(--sr-orange);
    }

    .sr-wizard__nav-primary:focus-visible {
        outline: none;
        box-shadow: 0 0 0 2px var(--sr-orange);
    }

    .sr-wizard__nav-primary:disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }

/* ═══════════════════════════════════════════════════════════════════
   Shared design tokens (re-declared) for list/detail/snapshot/dl pages.
   Each page root re-declares so children outside .sr-wizard inherit
   the editorial palette without the wizard wrapper.
   ═══════════════════════════════════════════════════════════════════ */

.sr-list, .sr-detail, .sr-snap, .sr-dl {
    --sr-paper: var(--pa-an-paper, #f4f2ef);
    --sr-paper-raised: #faf7f2;
    --sr-ink: var(--pa-an-ink, #1a1714);
    --sr-ink-muted: var(--pa-an-neutral, #5c5852);
    --sr-rule: var(--pa-an-neutral-200, #e6e2dc);
    --sr-rule-strong: var(--pa-an-neutral-300, #cdc7be);
    --sr-orange: var(--pa-an-orange, #dd9142);
    --sr-success: #2f7a3a;
    --sr-warning: #b8741a;
    --sr-danger:  #a3361b;
    --sr-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    --sr-body: var(--font-body, Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);

    background-color: var(--sr-paper);
    color: var(--sr-ink);
    font-family: var(--sr-body);
    min-height: 100%;
    padding: 32px clamp(20px, 5vw, 56px) 64px;
}

/* ── Shared masthead ──────────────────────────────────────────────── */
.sr-page-masthead {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--sr-rule);
    margin-bottom: 28px;
    flex-wrap: wrap;
}

.sr-page-masthead__left {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sr-page-masthead__eyebrow {
    margin: 0;
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    color: var(--sr-ink-muted);
}

.sr-page-masthead__eyebrow em {
    font-style: italic;
    font-weight: 500;
}

.sr-page-masthead__title {
    margin: 0;
    font-family: var(--sr-body);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--sr-ink);
    line-height: 1.15;
}

.sr-page-masthead__dek {
    margin: 6px 0 0;
    color: var(--sr-ink-muted);
    font-size: 0.92rem;
    max-width: 60ch;
}

.sr-page-masthead__right {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.sr-cap-indicator {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--sr-ink-muted);
    font-variant-numeric: tabular-nums;
    font-family: var(--sr-mono);
}

.sr-cap-indicator strong {
    color: var(--sr-ink);
    font-weight: 600;
}

.sr-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--sr-ink);
    color: var(--sr-paper);
    border: 1px solid var(--sr-ink);
    border-radius: 4px;
    font-family: var(--sr-body);
    font-size: 0.88rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 140ms ease, border-color 140ms ease;
}

.sr-cta:hover {
    background: var(--sr-orange);
    border-color: var(--sr-orange);
}

.sr-cta:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--sr-orange);
}

/* ── Shared chips / pills ─────────────────────────────────────────── */
.sr-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border: 1px solid var(--sr-rule-strong);
    background: var(--sr-paper-raised);
    color: var(--sr-ink-muted);
    font-size: 0.74rem;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    border-radius: 2px;
    white-space: nowrap;
}

.sr-chip--mono {
    font-family: var(--sr-mono);
}

.sr-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    border: 1px solid currentColor;
    background: var(--sr-paper-raised);
}

.sr-pill::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.sr-pill--active    { color: var(--sr-success); }
.sr-pill--paused    { color: var(--sr-warning); }
.sr-pill--completed { color: var(--sr-ink-muted); }
.sr-pill--failed    { color: var(--sr-danger); }
.sr-pill--pending   { color: var(--sr-ink-muted); }
.sr-pill--skipped   { color: var(--sr-ink-muted); }
.sr-pill--inactive  { color: var(--sr-ink-muted); }

/* ── Shared empty + error states ──────────────────────────────────── */
.sr-empty {
    padding: 56px 24px;
    text-align: center;
    border: 1px dashed var(--sr-rule-strong);
    border-radius: 4px;
    background: var(--sr-paper-raised);
    color: var(--sr-ink-muted);
}

.sr-empty__eyebrow {
    margin: 0 0 6px;
    font-size: 0.78rem;
    font-style: italic;
    color: var(--sr-ink-muted);
}

.sr-empty__title {
    margin: 0 0 6px;
    font-size: 1.05rem;
    color: var(--sr-ink);
    font-weight: 600;
}

.sr-empty__dek {
    margin: 0 auto;
    max-width: 48ch;
    font-size: 0.9rem;
    line-height: 1.5;
}

.sr-error-banner {
    padding: 12px 16px;
    margin-bottom: 16px;
    border: 1px solid var(--sr-danger);
    background: rgba(163, 54, 27, 0.06);
    color: var(--sr-danger);
    border-radius: 4px;
    font-size: 0.9rem;
}

/* ═══════════════════════════════════════════════════════════════════
   Index (Schedules list) — sr-list-*
   ═══════════════════════════════════════════════════════════════════ */

.sr-list__toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.sr-list__tablist {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--sr-rule);
    margin-bottom: 18px;
}

.sr-list__tab {
    background: transparent;
    border: none;
    padding: 10px 18px 11px;
    font-family: var(--sr-body);
    font-size: 0.9rem;
    color: var(--sr-ink-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 140ms ease, border-color 140ms ease;
    font-variant-numeric: tabular-nums;
}

.sr-list__tab:hover {
    color: var(--sr-ink);
}

.sr-list__tab[aria-selected="true"] {
    color: var(--sr-ink);
    border-bottom-color: var(--sr-orange);
    font-weight: 600;
}

.sr-list__tab-count {
    margin-left: 6px;
    font-size: 0.74rem;
    color: var(--sr-ink-muted);
    font-family: var(--sr-mono);
}

.sr-list__search {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sr-list__search input {
    padding: 7px 12px;
    border: 1px solid var(--sr-rule-strong);
    background: var(--sr-paper-raised);
    border-radius: 3px;
    font-family: var(--sr-body);
    font-size: 0.88rem;
    color: var(--sr-ink);
    min-width: 240px;
}

.sr-list__search input:focus {
    outline: none;
    border-color: var(--sr-orange);
    box-shadow: 0 0 0 2px rgba(221, 145, 66, 0.15);
}

.sr-list-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--sr-paper-raised);
    border: 1px solid var(--sr-rule);
    border-radius: 4px;
    overflow: hidden;
}

.sr-list-table thead th {
    text-align: left;
    padding: 11px 14px;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--sr-ink-muted);
    background: var(--sr-paper);
    border-bottom: 1px solid var(--sr-rule);
    font-weight: 600;
}

.sr-list-table tbody td {
    padding: 14px;
    border-top: 1px solid var(--sr-rule);
    vertical-align: middle;
    font-size: 0.92rem;
}

.sr-list-table tbody tr:first-child td {
    border-top: none;
}

.sr-list-table tbody tr:hover {
    background: rgba(221, 145, 66, 0.04);
}

.sr-list-table__name {
    color: var(--sr-ink);
    font-weight: 500;
    text-decoration: none;
}

.sr-list-table__name:hover {
    color: var(--sr-orange);
}

.sr-list-table__meta {
    display: block;
    margin-top: 2px;
    color: var(--sr-ink-muted);
    font-size: 0.78rem;
}

.sr-list-table__mono {
    font-family: var(--sr-mono);
    font-variant-numeric: tabular-nums;
    color: var(--sr-ink-muted);
    font-size: 0.85rem;
}

.sr-list-table__actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}

.sr-action-btn {
    background: transparent;
    border: 1px solid var(--sr-rule-strong);
    padding: 5px 11px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.78rem;
    color: var(--sr-ink-muted);
    font-family: var(--sr-body);
    transition: all 120ms ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.sr-action-btn:hover {
    color: var(--sr-ink);
    border-color: var(--sr-ink);
}

.sr-action-btn--danger:hover {
    color: var(--sr-danger);
    border-color: var(--sr-danger);
}

.sr-action-btn--primary {
    background: var(--sr-ink);
    color: var(--sr-paper);
    border-color: var(--sr-ink);
}

.sr-action-btn--primary:hover {
    background: var(--sr-orange);
    border-color: var(--sr-orange);
    color: var(--sr-paper);
}

.sr-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--sr-rule);
    font-size: 0.85rem;
    color: var(--sr-ink-muted);
}

.sr-pagination__pages {
    display: flex;
    gap: 8px;
    align-items: center;
}

.sr-pagination__count {
    font-family: var(--sr-mono);
    font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════════════════════
   Detail page — sr-detail-*
   ═══════════════════════════════════════════════════════════════════ */

.sr-detail__masthead {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    padding-bottom: 18px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--sr-rule);
    flex-wrap: wrap;
}

.sr-detail__heading {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sr-detail__eyebrow {
    margin: 0;
    font-size: 0.78rem;
    color: var(--sr-ink-muted);
    font-style: italic;
}

.sr-detail__title {
    margin: 0;
    font-size: clamp(1.4rem, 3vw, 1.85rem);
    font-weight: 600;
    color: var(--sr-ink);
    letter-spacing: -0.01em;
}

.sr-detail__pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.sr-detail__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.sr-detail__back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--sr-ink-muted);
    text-decoration: none;
    font-size: 0.85rem;
    margin-bottom: 12px;
}

.sr-detail__back:hover {
    color: var(--sr-orange);
}

.sr-detail__tablist {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--sr-rule);
    margin: 18px 0 22px;
    overflow-x: auto;
}

.sr-detail__tab {
    background: transparent;
    border: none;
    padding: 10px 16px 11px;
    font-family: var(--sr-body);
    font-size: 0.88rem;
    color: var(--sr-ink-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
    transition: color 140ms ease, border-color 140ms ease;
}

.sr-detail__tab:hover {
    color: var(--sr-ink);
}

.sr-detail__tab[aria-selected="true"] {
    color: var(--sr-ink);
    border-bottom-color: var(--sr-orange);
    font-weight: 600;
}

.sr-detail__panel {
    padding: 0 2px;
}

.sr-detail__section {
    background: var(--sr-paper-raised);
    border: 1px solid var(--sr-rule);
    border-radius: 4px;
    padding: 22px 24px;
}

.sr-detail__section + .sr-detail__section {
    margin-top: 16px;
}

.sr-detail__section-eyebrow {
    margin: 0 0 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--sr-rule);
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--sr-ink-muted);
    font-weight: 600;
}

.sr-detail__deflist {
    display: grid;
    grid-template-columns: minmax(160px, 220px) 1fr;
    gap: 10px 24px;
    margin: 0;
}

.sr-detail__deflist dt {
    color: var(--sr-ink-muted);
    font-size: 0.85rem;
    font-style: italic;
}

.sr-detail__deflist dd {
    margin: 0;
    color: var(--sr-ink);
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
}

.sr-detail__deflist dd.sr-detail__mono {
    font-family: var(--sr-mono);
    color: var(--sr-ink-muted);
}

.sr-detail__recipient-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sr-detail__recipient-row {
    display: grid;
    grid-template-columns: 80px 1fr auto auto;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid var(--sr-rule);
}

.sr-detail__recipient-row:first-child {
    border-top: none;
}

.sr-detail__recipient-kind {
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--sr-ink-muted);
    font-weight: 600;
}

.sr-detail__recipient-name {
    color: var(--sr-ink);
    font-size: 0.92rem;
}

.sr-detail__recipient-meta {
    color: var(--sr-ink-muted);
    font-size: 0.82rem;
    font-family: var(--sr-mono);
}

.sr-detail__runs-table {
    width: 100%;
    border-collapse: collapse;
}

.sr-detail__runs-table thead th {
    text-align: left;
    padding: 8px 12px;
    font-size: 0.72rem;
    color: var(--sr-ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--sr-rule);
    font-weight: 600;
}

.sr-detail__runs-table tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--sr-rule);
    font-size: 0.88rem;
    font-variant-numeric: tabular-nums;
}

.sr-detail__runs-table tbody td.sr-detail__mono {
    font-family: var(--sr-mono);
    color: var(--sr-ink-muted);
    font-size: 0.82rem;
}

.sr-detail__comingsoon {
    padding: 36px 24px;
    text-align: center;
    border: 1px dashed var(--sr-rule-strong);
    border-radius: 4px;
    color: var(--sr-ink-muted);
}

.sr-detail__comingsoon-eyebrow {
    margin: 0 0 6px;
    font-style: italic;
    font-size: 0.78rem;
}

.sr-detail__comingsoon-title {
    margin: 0 0 6px;
    color: var(--sr-ink);
    font-size: 1rem;
    font-weight: 600;
}

.sr-detail__comingsoon-dek {
    margin: 0;
    max-width: 48ch;
    margin-inline: auto;
    font-size: 0.88rem;
    line-height: 1.5;
}

.sr-detail__add-form {
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr 1fr 1fr auto;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--sr-rule);
}

@media (max-width: 720px) {
    .sr-detail__add-form { grid-template-columns: 1fr; }
    .sr-detail__deflist  { grid-template-columns: 1fr; gap: 4px 0; }
    .sr-detail__deflist dt { margin-top: 8px; }
    .sr-detail__recipient-row { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════
   Snapshot history + viewer — sr-snap-*
   ═══════════════════════════════════════════════════════════════════ */

.sr-snap-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    border-left: 1px dashed var(--sr-rule-strong);
    margin-left: 12px;
    padding-left: 28px;
}

.sr-snap-timeline__item {
    position: relative;
    padding: 14px 0;
    border-bottom: 1px solid var(--sr-rule);
}

.sr-snap-timeline__item:first-child { padding-top: 4px; }
.sr-snap-timeline__item:last-child  { border-bottom: none; }

.sr-snap-timeline__item::before {
    content: "";
    position: absolute;
    left: -34px;
    top: 22px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--sr-paper);
    border: 1.5px solid var(--sr-orange);
}

.sr-snap-timeline__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}

.sr-snap-timeline__timestamp {
    font-family: var(--sr-mono);
    font-size: 0.92rem;
    color: var(--sr-ink);
    font-variant-numeric: tabular-nums;
}

.sr-snap-timeline__meta {
    color: var(--sr-ink-muted);
    font-size: 0.82rem;
    margin-top: 3px;
}

.sr-snap-viewer__metadata {
    background: var(--sr-paper-raised);
    border: 1px solid var(--sr-rule);
    border-radius: 4px;
    padding: 22px 24px;
    margin-bottom: 18px;
}

.sr-snap-viewer__json {
    background: #1a1714;
    color: #f4f2ef;
    border-radius: 4px;
    padding: 18px 20px;
    font-family: var(--sr-mono);
    font-size: 0.82rem;
    line-height: 1.55;
    overflow-x: auto;
    max-height: 60vh;
    margin: 0;
    white-space: pre-wrap;
    word-break: break-all;
}

.sr-snap-viewer__note {
    margin-top: 12px;
    font-size: 0.82rem;
    color: var(--sr-ink-muted);
    font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════════
   Distribution lists — sr-dl-*
   (Mostly relies on shared list-table classes; small overrides here.)
   ═══════════════════════════════════════════════════════════════════ */

.sr-dl-dialog {
    --sr-paper: #f4f2ef;
    --sr-paper-raised: #faf7f2;
    --sr-ink: #1a1714;
    --sr-ink-muted: #5c5852;
    --sr-rule: #e6e2dc;
    --sr-rule-strong: #cdc7be;
    --sr-orange: #dd9142;
    --sr-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    --sr-body: var(--font-body, Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
    padding: 12px 8px;
    color: var(--sr-ink);
    font-family: var(--sr-body);
}

.sr-dl-dialog__title {
    margin: 0 0 4px;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--sr-ink);
}

.sr-dl-dialog__dek {
    margin: 0 0 18px;
    color: var(--sr-ink-muted);
    font-size: 0.88rem;
}

.sr-dl-dialog__field-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.sr-dl-dialog__actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--sr-rule);
}

.sr-dl-members-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 8px;
}

.sr-dl-members-table thead th {
    text-align: left;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--sr-ink-muted);
    border-bottom: 1px solid var(--sr-rule);
    padding: 8px 6px;
    font-weight: 600;
}

.sr-dl-members-table tbody td {
    padding: 10px 6px;
    border-bottom: 1px solid var(--sr-rule);
    font-size: 0.88rem;
    color: var(--sr-ink);
}

.sr-dl-add-member {
    display: grid;
    grid-template-columns: 130px 1fr 1fr auto;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid var(--sr-rule);
    margin-bottom: 8px;
    align-items: end;
}

@media (max-width: 640px) {
    .sr-dl-add-member { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════
   Recipient landing pages (/r/{token}, /r/u/{token})
   Class prefix: sr-r-

   Anonymous, paper-and-ink presentation of an emailed report or
   the one-click unsubscribe confirmation. Self-contained tokens
   redeclared so the page renders correctly even when the page
   layout is the minimal EmptyLayout (no other CSS scopes apply).
   ═══════════════════════════════════════════════════════════════════ */
.sr-r-page {
    --sr-paper: #f4f2ef;
    --sr-paper-raised: #faf7f2;
    --sr-ink: #1a1714;
    --sr-ink-muted: #5c5852;
    --sr-rule: #e6e2dc;
    --sr-accent: #dd9142;
    min-height: 100vh;
    background: var(--sr-paper);
    color: var(--sr-ink);
    font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.sr-r-rule {
    height: 4px;
    background: var(--sr-accent);
    width: 100%;
}

.sr-r-mast {
    max-width: 720px;
    margin: 0 auto;
    padding: 28px 24px 12px;
    width: 100%;
    border-bottom: 1px solid var(--sr-rule);
}

.sr-r-logo {
    font-size: 1.1rem;
    color: var(--sr-ink);
    letter-spacing: 0.01em;
}

.sr-r-mast__eyebrow {
    font-size: 0.78rem;
    color: var(--sr-ink-muted);
    margin: 4px 0 0;
    letter-spacing: 0.04em;
}

.sr-r-main {
    flex: 1;
    max-width: 720px;
    margin: 0 auto;
    padding: 28px 24px;
    width: 100%;
}

.sr-r-frame {
    background: var(--sr-paper-raised);
    border: 1px solid var(--sr-rule);
    border-radius: 8px;
    padding: 0;
    overflow: hidden;
}

.sr-r-frame__head {
    padding: 20px 24px;
    border-bottom: 1px solid var(--sr-rule);
    background: var(--sr-paper);
}

.sr-r-frame__eyebrow {
    font-size: 0.74rem;
    color: var(--sr-ink-muted);
    margin: 0;
    letter-spacing: 0.04em;
}

.sr-r-frame__from {
    margin: 4px 0 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--sr-ink);
}

.sr-r-frame__body {
    padding: 24px;
    line-height: 1.55;
}

.sr-r-frame__foot {
    padding: 14px 24px;
    border-top: 1px solid var(--sr-rule);
    font-size: 0.82rem;
    color: var(--sr-ink-muted);
}

.sr-r-frame__foot a {
    color: var(--sr-ink-muted);
    text-decoration: underline;
}

.sr-r-card {
    background: var(--sr-paper-raised);
    border: 1px solid var(--sr-rule);
    border-radius: 8px;
    padding: 32px 28px;
}

.sr-r-card--state { text-align: left; }

.sr-r-card--gate label {
    display: block;
    font-size: 0.82rem;
    color: var(--sr-ink-muted);
    margin: 16px 0 6px;
}

.sr-r-card--gate input[type="password"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--sr-rule);
    border-radius: 4px;
    font-size: 0.95rem;
    background: var(--sr-paper);
    color: var(--sr-ink);
    box-sizing: border-box;
    margin-bottom: 14px;
}

.sr-r-card__title {
    margin: 0 0 8px;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--sr-ink);
}

.sr-r-card__deck {
    margin: 0 0 12px;
    color: var(--sr-ink-muted);
    font-size: 0.92rem;
    line-height: 1.5;
}

.sr-r-btn {
    display: inline-block;
    padding: 10px 18px;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: 500;
    border: 1px solid var(--sr-ink);
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease;
}

.sr-r-btn--primary {
    background: var(--sr-ink);
    color: var(--sr-paper);
}

.sr-r-btn--primary:hover {
    background: #000;
}

.sr-r-foot {
    max-width: 720px;
    margin: 0 auto;
    padding: 16px 24px 32px;
    width: 100%;
    font-size: 0.78rem;
    color: var(--sr-ink-muted);
    border-top: 1px solid var(--sr-rule);
}

.sr-r-foot a {
    color: var(--sr-ink-muted);
    text-decoration: underline;
}

/* LimitMeter */
.sr-meter { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink, #16140F); }
.sr-meter__bar { width: 80px; height: 6px; background: rgba(0,0,0,0.08); border-radius: 2px; overflow: hidden; }
.sr-meter__fill { height: 100%; background: #0B5E5E; transition: width 200ms ease, background 200ms ease; }
.sr-meter--warn .sr-meter__fill { background: #DD9142; }
.sr-meter--full .sr-meter__fill { background: #8a2a18; }
.sr-meter__label { font-family: var(--font-mono, 'JetBrains Mono', monospace); }

/* PasswordPromptCard */
.sr-pwd-card { max-width: 360px; padding: 20px; background: #FFFDF8; border: 1px solid #E8E1D2; border-radius: 4px; }
.sr-pwd-card__title { margin: 0 0 8px; font-size: 16px; font-weight: 600; }
.sr-pwd-card__hint { margin: 0 0 12px; font-size: 13px; color: #645E50; }
.sr-pwd-card__error { margin: 8px 0; color: #8a2a18; font-size: 13px; }

/* Pills (reused by Expiry + DeliveryStatus) */
.sr-pill { display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: 11px; font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; background: rgba(0,0,0,0.06); color: #3A362C; }
.sr-pill--ok { background: rgba(11,94,94,0.12); color: #0B5E5E; }
.sr-pill--warn, .sr-pill--queued { background: rgba(221,145,66,0.16); color: #8a4a14; }
.sr-pill--expired, .sr-pill--bounced, .sr-pill--failed, .sr-pill--complained, .sr-pill--suppressed { background: rgba(138,42,24,0.12); color: #8a2a18; }
.sr-pill--sent, .sr-pill--delivered { background: rgba(11,94,94,0.12); color: #0B5E5E; }

/* ResolvedRecipientsPreview */
.sr-resolved { font-family: var(--font-body, Roboto, sans-serif); }
.sr-resolved__count { margin: 0 0 8px; font-size: 13px; color: #645E50; font-style: italic; }
.sr-resolved__list { margin: 0; padding: 0 0 0 18px; font-size: 13px; font-family: var(--font-mono, monospace); }
.sr-resolved__more { color: #645E50; font-style: italic; list-style: none; margin-top: 4px; }