/* ============================================================================
 * deliverability.css — visual parity shim for the Utilities > Deliverability
 * pages.
 *
 * Those pages were authored with modern HTML5 / CSS class names (main,
 * fieldset, form-row, btn-primary, lyris-data-table, deliv-*, wizard-*) that
 * do NOT exist in ListManager's base stylesheets, so they rendered as raw
 * browser-default HTML. This file defines those classes to match the ACTIVE
 * "black" theme (themes/black/css/theme.css) VERBATIM, so the deliverability
 * pages are indistinguishable from native admin pages (e.g. Edit Site).
 *
 * Native "black" theme palette (do NOT substitute other values):
 *   accent green   #99c064   .dialog_titlebar / active-tab accent
 *   heading/label  #32363f   (.toptitle text)
 *   body text      #383838   (#content td)
 *   muted text     #898888
 *   links          #0084ff / hover #3777A4   (#content a)
 *   buttons        #000 bg / #fff text       .btn  (native — NOT redefined here)
 *   tab active     #eff0f2   .dialog_tabs_selected
 *   tab inactive   #dbe6e8   .dialog_tabs_unselected
 *   tab/panel border #b1b8c2
 *   table header   #dddcdc (text #575656)
 *   zebra row      #ecebeb     hover row #e2eea6
 *   input border   #b2b7c2
 *   body font      Arial, 11px / 16px line-height
 *
 * Loaded only on /utilities/deliverability/* pages and scoped under `main` /
 * unique class names, so it cannot affect any other page. Buttons are
 * deliberately NOT styled here — they inherit the native black `.btn` (the old
 * custom button rules made them grey-on-blue, which is why they looked foreign).
 * NOTE: values mirror the "black" theme; if the install switches themes, this
 * file must be re-synced to that theme (deferred-items).
 * ========================================================================== */

/* ---- layout / page chrome ------------------------------------------------ */
main {
    display: block;            /* HTML5 element fallback for old engines */
    box-sizing: border-box;
    width: 100%;
    max-width: 1400px;         /* fill the panel, but cap + center on wide screens */
    margin: 0 auto;
    padding: 10px 16px 26px;
    color: #383838;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    line-height: 16px;
}
main h1 {
    font-size: 16px;
    font-weight: bold;
    color: #32363f;
    margin: 0 0 16px;
    padding-bottom: 6px;
    border-bottom: 2px solid #b1b8c2;
}
main h2 {
    font-size: 13px;
    font-weight: bold;
    color: #32363f;
    margin: 18px 0 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid #cdd3d8;
}
main h3 { font-size: 12px; font-weight: bold; color: #444; margin: 14px 0 6px; }
/* The global styles.css styles h1/h2/h3 as Tahoma with letter-spacing:3px (a
 * legacy heading look). The deliverability `main h2/h3` rules above override
 * only size/colour, so that wide Tahoma tracking leaked through and made the
 * headings look foreign. Reset to the Arial body font with normal tracking so
 * every deliverability heading reads as a clean, compact section label that
 * matches the rest of the admin content. */
main h1, main h2, main h3 { font-family: Arial, Helvetica, sans-serif; letter-spacing: normal; }
main section { display: block; margin: 0 0 18px; }
main p { margin: 6px 0; }
main small { color: #898888; }
main a:link, main a:visited { color: #0084ff; text-decoration: none; }
main a:hover { color: #3777A4; text-decoration: underline; }

/* ---- grouped settings (fieldset / legend) -------------------------------- */
/* Native admin pages do not box form sections, so blend the fieldset into the
 * panel (transparent) and present the legend as a bold section label. */
main fieldset {
    border: 0;
    border-top: 1px solid #cdd3d8;
    border-radius: 0;
    padding: 10px 4px 4px;
    margin: 0 0 14px;
    background: transparent;
}
main legend {
    font-weight: bold;
    color: #32363f;
    font-size: 12px;
    padding: 0 6px 0 0;
}

/* ---- form rows (label + control + hint) ---------------------------------- */
main .form-row { margin: 0 0 11px; }
main .form-row > label {
    display: inline-block;
    min-width: 160px;
    padding-right: 10px;
    font-weight: bold;
    color: #383838;
    text-align: right;
    vertical-align: top;
}
/* checkbox / radio rows: the <label> wraps the <input>, so left-align it */
main .form-row > label:has(input) {
    min-width: 0;
    text-align: left;
    font-weight: normal;
}
main .form-row > input[type=text],
main .form-row > input[type=number],
main .form-row > input[type=password],
main .form-row > input[type=email],
main .form-row > select,
main .form-row > textarea,
main .filter-field input,
main .filter-field select {
    padding: 2px 5px;
    border: 1px solid #b2b7c2;
    border-radius: 3px;
    background: #fff;
    color: #222;
    font-size: 11px;
    font-family: inherit;
    vertical-align: top;
}
main .form-row > input:focus,
main .form-row > select:focus,
main .form-row > textarea:focus {
    border-color: #99c064;
    outline: none;
    box-shadow: 0 0 0 2px rgba(153, 192, 100, .25);
}
main .form-row > .form-static {
    display: inline-block;
    vertical-align: top;
    padding: 2px 0;
    font-weight: bold;
    color: #222;
}
main .form-row > small,
main .form-row .fieldset-hint,
main .form-row .fieldset-help {
    display: block;
    margin: 3px 0 0 170px;
    color: #898888;
    font-size: 10px;
    line-height: 14px;
}
main .fieldset-hint, main .fieldset-help {
    display: block;
    color: #898888;
    font-size: 10px;
    line-height: 14px;
    margin: 2px 0 8px;
}
main .form-actions {
    margin: 16px 0 4px;
    padding-top: 10px;
    border-top: 1px solid #cdd3d8;
}
main .radio-group { display: flex; flex-direction: column; gap: 4px; }
main .radio-group label { font-weight: normal; }

/* visually-hidden, but available to screen readers */
main .sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---- buttons ------------------------------------------------------------- */
/* Intentionally NOT styled here. The deliverability buttons carry the native
 * `.btn` class and sit inside `#content`, so the black theme's
 * `#content .btn { background:#000; color:#fff }` rule styles them exactly like
 * native Save/Cancel buttons. `.btn-primary` / `.btn-danger` have no native
 * rule and therefore fall back to the same native black `.btn`. */

/* ---- data tables (lyris-data-table) -------------------------------------- */
main table.lyris-data-table {
    width: 100%;
    border-collapse: collapse;
    margin: 8px 0 14px;
    font-size: 11px;
}
main table.lyris-data-table caption {
    text-align: left;
    font-weight: bold;
    color: #575656;
    padding: 4px 0 6px;
}
main table.lyris-data-table th {
    background: #dddcdc;
    color: #575656;
    text-align: left;
    font-weight: bold;
    padding: 5px 8px;
    border-bottom: 1px solid #c7c7c7;
    white-space: nowrap;
}
main table.lyris-data-table td {
    /* styles.css sets a global `td { color:#fff }` (legacy dark-cell default);
     * override it here or numeric data cells render white-on-light (invisible). */
    color: #383838;
    padding: 5px 8px;
    border-bottom: 1px solid #e6e6e6;
    vertical-align: top;
}
main table.lyris-data-table tbody tr:nth-child(even) { background: #ecebeb; }
main table.lyris-data-table tbody tr:hover { background: #e2eea6; }
main .deliv-row-dead td { color: #9a9a9a; font-style: italic; }
main .deliv-row-actions { white-space: nowrap; }
main .deliv-row-actions form { display: inline; margin: 0; }

/* ---- status badges (icon + label already present in markup) -------------- */
main .deliv-state-verified,
main .deliv-state-drifted,
main .deliv-state-missing,
main .deliv-state-error,
main .deliv-state-unknown,
main .deliv-active-active,
main .deliv-active-overlap,
main .deliv-active-inactive {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 10px;
    border: 1px solid transparent;
    font-size: 10px;
    font-weight: bold;
    line-height: 15px;
    white-space: nowrap;
}
main .deliv-state-verified  { background: #e3f1e1; color: #2e6b2e; border-color: #b6d7b0; }
main .deliv-state-drifted   { background: #fcefc7; color: #8a6d00; border-color: #eed98a; }
main .deliv-state-missing   { background: #eceff1; color: #546e7a; border-color: #cfd8dc; }
main .deliv-state-error     { background: #f8d7da; color: #a11722; border-color: #f0b6bb; }
main .deliv-state-unknown   { background: #ededed; color: #575656; border-color: #d8d8d8; }
main .deliv-active-active   { background: #e3f1e1; color: #2e6b2e; border-color: #b6d7b0; }
main .deliv-active-overlap  { background: #e3f0fb; color: #1565c0; border-color: #b9d6f2; }
main .deliv-active-inactive { background: #ededed; color: #777777; border-color: #d8d8d8; }
main .deliv-icon { margin-right: 3px; }
main .deliv-icon-active   { color: #2e8b2e; }
main .deliv-icon-overlap  { color: #1565c0; }
main .deliv-icon-inactive { color: #999999; }

/* ---- DNS record / monospace blocks --------------------------------------- */
main .deliv-record,
main .deliv-record-existing,
main pre.deliv-record {
    display: block;
    background: #f6f8fa;
    border: 1px solid #d0d7de;
    border-radius: 4px;
    padding: 8px 10px;
    margin: 6px 0;
    font-family: Consolas, "Courier New", monospace;
    font-size: 11px;
    color: #1f2328;
    white-space: pre-wrap;
    word-break: break-all;
}
main .deliv-record-existing { background: #fff8e6; border-color: #eecf7a; }
main dl.dns-record-spec { margin: 8px 0; }
main dl.dns-record-spec dt {
    font-weight: bold;
    color: #575656;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .02em;
    margin-top: 6px;
}
main dl.dns-record-spec dd {
    margin: 2px 0 0;
    font-family: Consolas, "Courier New", monospace;
    word-break: break-all;
}

/* ---- inline messages ----------------------------------------------------- */
main .deliv-error, main .field-error {
    background: #f8d7da;
    border: 1px solid #f0b6bb;
    color: #a11722;
    padding: 8px 12px;
    border-radius: 4px;
    margin: 8px 0;
    font-weight: bold;
}
main .field-error { display: inline-block; padding: 2px 8px; }
/* Empty inline validation placeholders (the wizard JS fills them via textContent
 * only on invalid input) must NOT render as stray pink "blips" — hide until they
 * actually hold a message. */
main .field-error:empty { display: none; }
main .deliv-warning {
    background: #fff3cd; border: 1px solid #ffe18a; color: #856404;
    padding: 8px 12px; border-radius: 4px; margin: 8px 0;
}
main .deliv-notice {
    background: #e7f1fb; border: 1px solid #bcd9f3; color: #23527c;
    padding: 8px 12px; border-radius: 4px; margin: 8px 0;
}
main .deliv-empty-state { color: #898888; font-style: italic; padding: 10px 0; }
main .deliv-hint, main .deliv-help, main .dkim-fingerprint-hint {
    color: #898888; font-size: 10px; line-height: 14px;
}

/* ---- sections / panels --------------------------------------------------- */
main .deliv-spf-section,
main .deliv-dkim-section,
main .deliv-verify-section,
main .deliv-dkim-masterkey-section { margin: 0 0 18px; }

/* ---- S8 DMARC aggregate-report drill-in (dmarc-reports.tml) + dashboard align % ----
 * These classes shipped in the S8 .tml/dashboard but were never added to the stylesheet,
 * so the drill-in rendered with browser defaults. Mirror the existing panel/chip look. */
main .dmarc-rpt-card {
    background: #f7f9fb;
    border: 1px solid #e0e6ea;
    border-radius: 4px;
    padding: 12px 16px;
    margin: 0 0 18px;
}
main .dmarc-rpt-card > h2:first-child,
main .dmarc-rpt-card > h3:first-child { margin-top: 0; }
main .deliv-align-pct { font-weight: bold; color: #32363f; }
main .dmarc-warn-chip {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: bold;
    background: #fff3cd;
    border: 1px solid #ffe18a;
    color: #856404;
}
main .dmarc-override-form { margin: 10px 0 0; }
main .form-field { margin: 8px 0; }
main .form-field > label { font-weight: bold; display: inline-block; margin-bottom: 2px; }

main .deliv-verify-section,
main .deliv-stats-box,
main .dkim-verify-status-panel,
main .spf-verify-status-panel {
    background: #f7f9fb;
    border: 1px solid #e0e6ea;
    border-radius: 4px;
    padding: 12px 14px;
}
main .deliv-stats-box { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 8px 0 14px; }
main .deliv-stats-box dl { margin: 0; }
main .deliv-stats-box dt {
    font-size: 10px; color: #898888; text-transform: uppercase; letter-spacing: .03em;
}
main .deliv-stats-box dd { margin: 0; font-size: 15px; font-weight: bold; color: #32363f; }
main .deliv-alerts-controls { display: flex; gap: 8px; align-items: center; margin: 0 0 12px; }
main .deliv-pagination {
    display: flex; gap: 8px; align-items: center; justify-content: flex-end; margin: 12px 0;
}
main details.deliv-dkim-retired { margin: 10px 0; }
main details.deliv-dkim-retired > summary {
    cursor: pointer; font-weight: bold; color: #0084ff; padding: 4px 0;
}
main .dkim-rotation-explainer {
    background: #eef4e6; border-left: 3px solid #99c064; padding: 8px 12px;
    margin: 8px 0; color: #3a4a2c;
}
main .dkim-override-cb, main .spf-override-cb { margin: 8px 0; }
main .dkim-publish-instructions { margin: 8px 0 8px 18px; }
main .dkim-publish-instructions li { margin: 4px 0; }
main .link-action { color: #0084ff; text-decoration: none; font-weight: bold; }
main .link-action:hover { text-decoration: underline; }

/* ---- audit-log filter bar ------------------------------------------------ */
main .filter-row {
    display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-end;
    margin: 0 0 12px; padding: 10px 12px;
    background: #f0f1f2; border: 1px solid #dcdee0; border-radius: 4px;
}
main .filter-field { display: flex; flex-direction: column; font-size: 10px; color: #666; }
main .filter-field label { font-weight: bold; margin-bottom: 2px; color: #3a3a3a; }
main .filter-actions { display: flex; gap: 6px; align-items: flex-end; }

/* ---- conflict tables (SPF / DKIM / DMARC wizards) ------------------------ */
main .spf-conflicts, main .dkim-conflicts, main .dmarc-conflicts { margin: 10px 0; }
main table.spf-conflict-table, main table.dkim-conflict-table, main table.dmarc-conflict-table {
    width: 100%; border-collapse: collapse; margin: 6px 0; font-size: 11px;
}
main table.spf-conflict-table th, main table.dkim-conflict-table th, main table.dmarc-conflict-table th {
    background: #dddcdc; color: #575656; text-align: left; padding: 4px 8px;
}
main table.spf-conflict-table td, main table.dkim-conflict-table td, main table.dmarc-conflict-table td {
    padding: 4px 8px; border-bottom: 1px solid #e6e6e6; vertical-align: top; color: #383838;
}
main .spf-conflict-tier-label, main .dkim-conflict-tier-label, main .dmarc-conflict-tier-label {
    display: inline-block; padding: 1px 7px; border-radius: 9px;
    font-size: 10px; font-weight: bold; background: #ededed; color: #575656;
    white-space: nowrap; vertical-align: middle;   /* keep two-word tiers ("Critical Override") on one line */
}
main .spf-conflict-icon, main .dkim-conflict-icon, main .dmarc-conflict-icon {
    margin-right: 4px; vertical-align: middle;
}
/* Severity cell: keep the icon + tier badge on a single line and let the column
 * size to fit it (the wide "What this means" column absorbs the extra width). */
main table.spf-conflict-table td:first-child,
main table.dkim-conflict-table td:first-child,
main table.dmarc-conflict-table td:first-child { white-space: nowrap; }
main .dkim-icon-error { color: #a11722; }

/* ---- wizard progress stepper --------------------------------------------- */
main nav.wizard-progress { margin: 0 0 18px; }
main nav.wizard-progress ol {
    list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0;
}
main nav.wizard-progress li {
    flex: 1 1 0; min-width: 92px; text-align: center; padding: 7px 8px;
    font-size: 10px; color: #9aa0a6;
    background: #f0f1f2; border: 1px solid #dcdee0; border-bottom: 3px solid #d8dadd;
    border-radius: 3px 3px 0 0;
}
main nav.wizard-progress li.wizard-step-active {
    color: #32363f; font-weight: bold; background: #fff; border-bottom-color: #99c064;
}
main .wizard-done-link { margin-top: 14px; }

/* ---- alert banner (server-rendered in index.tml) ------------------------- */
/* Unscoped (unique class names) so the index.tml banner is styled even though
 * it may sit outside a <main> element. */
.deliv-alert-banner {
    display: block; padding: 8px 14px; margin: 0 0 12px;
    font-weight: bold; border-radius: 4px;
}
.deliv-alert-banner-R {
    background: #f8d7da; color: #721c24;
    border: 1px solid #f0b6bb; border-left: 5px solid #c9302c;
}
.deliv-alert-banner-Y {
    background: #fff3cd; color: #856404;
    border: 1px solid #ffe18a; border-left: 5px solid #e0a800;
}
.deliv-alert-banner a { color: inherit; text-decoration: underline; }

/* ============================================================================
 * ADDENDUM — closes coverage gaps found by the per-page audit. All rules
 * scoped under `main` or unique deliv-/dkim-/spf- names.
 * ========================================================================== */

/* ---- DKIM status-icon colors (deliverability::dkim_status_icon) ----------- */
main .deliv-icon-verified  { color: #2e6b2e; }   /* V check  — record matches key   */
main .deliv-icon-mismatch  { color: #a11722; }   /* M warn   — p= tag disagrees     */
main .deliv-icon-drifted   { color: #8a6d00; }   /* D cycle  — key rotated, old live */
main .deliv-icon-revoked   { color: #6d2277; }   /* R nosign — p= empty (revoked)    */
main .deliv-icon-none      { color: #898888; }   /* - dash   — not configured        */
main .deliv-icon-unknown   { color: #898888; }   /* U/?      — status unclear        */

/* ---- Alert severity badges (alerts.tml deliv-sev-*) ----------------------- */
main .deliv-sev-critical,
main .deliv-sev-warning,
main .deliv-sev-info,
main .deliv-sev-unknown {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 10px;
    border: 1px solid transparent;
    font-size: 10px;
    font-weight: bold;
    line-height: 15px;
    white-space: nowrap;
}
main .deliv-sev-critical { background: #f8d7da; color: #a11722; border-color: #f0b6bb; }
main .deliv-sev-warning  { background: #fff3cd; color: #856404; border-color: #ffe18a; }
main .deliv-sev-info     { background: #e3f0fb; color: #1565c0; border-color: #b9d6f2; }
main .deliv-sev-unknown  { background: #ededed; color: #575656; border-color: #d8d8d8; }

/* ---- Conflict-row severity tinting (DKIM / SPF / DMARC wizards) ----------- */
main table.lyris-data-table tbody tr.dkim-conflict-critical,
main table.lyris-data-table tbody tr.spf-conflict-critical,
main table.lyris-data-table tbody tr.dmarc-conflict-critical  { background: #fdf0f0; }
main table.lyris-data-table tbody tr.dkim-conflict-major,
main table.lyris-data-table tbody tr.spf-conflict-major,
main table.lyris-data-table tbody tr.dmarc-conflict-major     { background: #fdf7e6; }
main table.lyris-data-table tbody tr.dkim-conflict-minor,
main table.lyris-data-table tbody tr.spf-conflict-minor,
main table.lyris-data-table tbody tr.dmarc-conflict-minor     { background: #f5f5f5; }
main table.lyris-data-table tbody tr.dkim-conflict-critical:hover,
main table.lyris-data-table tbody tr.spf-conflict-critical:hover,
main table.lyris-data-table tbody tr.dmarc-conflict-critical:hover,
main table.lyris-data-table tbody tr.dkim-conflict-major:hover,
main table.lyris-data-table tbody tr.spf-conflict-major:hover,
main table.lyris-data-table tbody tr.dmarc-conflict-major:hover,
main table.lyris-data-table tbody tr.dkim-conflict-minor:hover,
main table.lyris-data-table tbody tr.spf-conflict-minor:hover,
main table.lyris-data-table tbody tr.dmarc-conflict-minor:hover { background: #e2eea6; }

/* ---- DKIM wizard Step 4 verify-poller (JS-injected) ----------------------- */
main a.dkim-verify-done-link {
    font-weight: bold; color: #0084ff; display: inline-block; margin-top: 8px;
}
main a.dkim-verify-done-link:hover { color: #3777A4; text-decoration: underline; }
main small.dkim-verify-detail {
    display: block; margin-top: 6px; color: #898888; font-size: 10px; line-height: 14px;
}

/* ---- Horizontal-scroll wrapper for wide data tables (opt-in via markup) ---- */
main .deliv-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 8px 0 14px; }
main .deliv-table-scroll > table.lyris-data-table { margin: 0; }

/* ---- Actions cell: inline forms + nowrap, with or without a class --------- */
main table.lyris-data-table td:last-child { white-space: nowrap; }
main table.lyris-data-table td:last-child > form { display: inline; margin: 0; }

/* ---- Generic baselines for bare structural elements ----------------------- */
main dl { margin: 6px 0 12px; }
main dt { font-weight: bold; color: #575656; margin-top: 6px; }
main dd { margin: 2px 0 0 16px; color: #222; }
main code {
    font-family: Consolas, "Courier New", monospace; font-size: 10.5px;
    background: #f0f0f0; border: 1px solid #dde0e3; border-radius: 2px;
    padding: 0 3px; color: #1f2328;
}
main pre {
    display: block; background: #f6f8fa; border: 1px solid #d0d7de; border-radius: 4px;
    padding: 8px 10px; margin: 6px 0; font-family: Consolas, "Courier New", monospace;
    font-size: 11px; color: #1f2328; white-space: pre-wrap; word-break: break-all;
}
main details { margin: 4px 0; }
main summary {
    cursor: pointer; font-weight: bold; color: #0084ff; padding: 2px 0;
    font-size: 11px; list-style: disclosure-closed;
}
main details[open] > summary { list-style: disclosure-open; }

/* ---- Stats-box heading spans full width (flex container) ------------------ */
main .deliv-stats-box > h2 { flex-basis: 100%; margin-top: 0; }

/* ---- copy-to-clipboard buttons (deliv_copy.js, DMARC + DKIM wizards) ------- */
/* The button keeps the native black `.btn` look; only the transient "Copied"
 * state is recoloured. `!important` is required to beat `#content .btn` (ID
 * specificity), matching the approach used by the tab rules above. */
main .deliv-copy-btn { margin-left: 6px; vertical-align: middle; }
main .deliv-copy-btn.deliv-copied {
    background: #2e6b2e !important;
    border-color: #2e6b2e !important;
    color: #fff !important;
}

/* ---- Filter bar: a div carrying both filter-field + filter-actions -------- */
main .filter-field.filter-actions { flex-direction: row; align-items: flex-end; gap: 6px; }

/* ---- Verify-results section framing (domain_edit POST, no class) ---------- */
main section[aria-labelledby="verify-results-heading"] {
    background: #f7f9fb; border: 1px solid #e0e6ea; border-radius: 4px;
    padding: 12px 14px; margin: 0 0 18px;
}

/* ---- <small> hint that is a direct child of <form> (verify section) ------- */
main .deliv-verify-section form > small {
    display: block; margin-top: 6px; color: #898888; font-size: 10px; line-height: 14px;
}

/* ---- Bare label/input/select directly inside <fieldset> (wizard steps) ---- */
main fieldset > label {
    display: inline-block; min-width: 140px; padding-right: 8px;
    font-weight: bold; color: #383838; vertical-align: middle;
}
main fieldset > input[type=text],
main fieldset > input[type=number],
main fieldset > select {
    padding: 2px 5px; border: 1px solid #b2b7c2; border-radius: 3px;
    background: #fff; color: #222; font-size: 11px; font-family: inherit;
    vertical-align: middle;
}
main fieldset > input[type=text]:focus,
main fieldset > input[type=number]:focus,
main fieldset > select:focus {
    border-color: #99c064; outline: none; box-shadow: 0 0 0 2px rgba(153,192,100,.25);
}
main fieldset > p.fieldset-hint {
    margin: 4px 0 8px 148px; color: #898888; font-size: 10px; line-height: 14px;
}

/* ---- Nested rotation-explainer inside a section: tighten margins ---------- */
main section > .dkim-rotation-explainer { margin-top: 4px; margin-bottom: 4px; }

/* ---- Deliverability Settings tabs (alert_settings.tml) -------------------- */
/* Matched VERBATIM to the native black-theme tab strip:
 *   active   .dialog_tabs_selected   background #eff0f2
 *   inactive .dialog_tabs_unselected background #dbe6e8
 *   border   .dialog_tabs_title      1px solid  #b1b8c2
 *   text     #32363f bold 11px
 *   panel separator .dialog_tabs_panel border-top 1px solid #b1b8c2
 * `.deliv-tab` is a <button type="button">; keep specificity high so nothing
 * in the base theme overrides it. */
main .deliv-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin: 2px 0 14px;
    padding: 0;
    border-bottom: 1px solid #b1b8c2;   /* the baseline the active tab "breaks" */
}
/* Canonical tab pattern: every tab overlaps the baseline by 1px (margin-bottom:-1px).
 * INACTIVE tabs keep their #b1b8c2 bottom border, so the baseline reads as a
 * continuous line under them (boxed / closed). The ACTIVE tab overrides its
 * bottom border to the panel colour (#eff0f2), breaking the baseline at its
 * position so it visibly connects to the content below — exactly like the
 * native black-theme tabs. Active is also the LIGHTER colour (#eff0f2). */
main button.deliv-tab,
main .deliv-tab {
    padding: 5px 16px !important;
    margin: 0 0 -1px 0 !important;
    border: 1px solid #b1b8c2 !important;
    border-radius: 5px 5px 0 0 !important;
    background: #dbe6e8 !important;     /* inactive: darker, sits on the baseline */
    color: #32363f !important;
    font-size: 11px;
    font-weight: bold;
    line-height: 16px;
    cursor: pointer;
}
main button.deliv-tab:hover,
main .deliv-tab:hover {
    background: #e6eef0 !important;
    color: #32363f !important;
}
main button.deliv-tab-active,
main .deliv-tab-active,
main .deliv-tab-active:hover {
    background: #eff0f2 !important;            /* active: lighter, merges with panel */
    border-bottom-color: #eff0f2 !important;  /* break the baseline -> connected */
    color: #32363f !important;
}
main .deliv-tab-panel { display: block; }

/* ---- DMARC double-ack confirmation modal (dmarc_wizard_override.js) ------- */
/* The JS appends this dialog to <body> (OUTSIDE <main> and #content) and
 * toggles inline display:block/none, so these selectors are intentionally
 * UNSCOPED and the buttons are styled here (the theme's #content .btn rule
 * does not reach them). */
.dmarc-confirm-dialog-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 10000;
}
.dmarc-confirm-dialog-box {
    width: calc(100% - 40px); max-width: 460px;
    margin: 14vh auto 0;
    background: #fff;
    border: 1px solid #b1b8c2; border-top: 4px solid #c9302c; border-radius: 6px;
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.35);
    padding: 18px 22px 20px;
    font-family: Arial, Helvetica, sans-serif; color: #383838;
}
.dmarc-confirm-dialog-box h3 {
    margin: 0 0 10px;
    font-family: Arial, Helvetica, sans-serif; letter-spacing: normal;
    font-size: 14px; font-weight: bold; color: #a11722;
}
.dmarc-confirm-dialog-box p {
    margin: 0 0 18px; font-size: 11px; line-height: 1.5; color: #383838;
}
.dmarc-confirm-btn-row { text-align: right; }
/* Match the app's native black .btn (the modal lives outside #content, so the
 * theme's #content .btn rule cannot reach it -- replicate it here). The danger
 * variant keeps the deliverability error red so the destructive action stays
 * distinguishable. */
.dmarc-confirm-btn-row .btn {
    display: inline-block; box-sizing: border-box;
    margin-left: 8px; padding: 0 16px;
    height: 30px; line-height: 30px;   /* line-height == height centers the single text line */
    border: 0; border-radius: 3px;
    background-color: #000; color: #fff;
    font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: normal;
    white-space: nowrap; cursor: pointer; vertical-align: middle; text-align: center;
    text-transform: capitalize;
}
.dmarc-confirm-btn-row .btn:hover { background-color: #32353e; }
.dmarc-confirm-btn-row .btn-danger { background-color: #a11722; }
.dmarc-confirm-btn-row .btn-danger:hover { background-color: #871018; }

/* ===================================================================
   S7 -- Deliverability Dashboard (transitional visual baseline, sec. 4.16)
   Anchored on the existing deliv-* language; re-skin target for Spec 03.
   =================================================================== */

/* Traffic-light pill (icon + label; never color alone -- WCAG 2.1 AA). */
.deliv-light-green,
.deliv-light-yellow,
.deliv-light-red,
.deliv-light-neutral {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 9px;
    font-size: 10px;
    font-weight: bold;
    white-space: nowrap;
    border: 1px solid transparent;
}
.deliv-light-green   { background: #e3f4e1; color: #1b6b2b; border-color: #b6dcb0; }
.deliv-light-yellow  { background: #fbf2cf; color: #806000; border-color: #e6d489; }
.deliv-light-red     { background: #f8dcdc; color: #9b1c1c; border-color: #e3a6a6; }
.deliv-light-neutral { background: #ececec; color: #555555; border-color: #d2d2d2; }
.deliv-light-icon    { margin-right: 3px; }

/* Domain headline pill (rollup summary of the core three). */
.deliv-headline-authenticated,
.deliv-headline-attention,
.deliv-headline-action,
.deliv-headline-unconfigured {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: bold;
}
.deliv-headline-authenticated { background: #e3f4e1; color: #1b6b2b; }
.deliv-headline-attention     { background: #fbf2cf; color: #806000; }
.deliv-headline-action        { background: #f8dcdc; color: #9b1c1c; }
.deliv-headline-unconfigured  { background: #ececec; color: #555555; }

/* Summary cards row (reuses the deliv-stats-box card idiom). */
.deliv-dash-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 12px 0 18px 0;
}
.deliv-dash-card {
    flex: 1 1 160px;
    min-width: 150px;
    background: #f7f9fb;
    border: 1px solid #e0e6ea;
    border-radius: 4px;
    padding: 10px 14px;
}
.deliv-dash-card .deliv-dash-count { font-size: 26px; font-weight: bold; line-height: 1.1; }
.deliv-dash-card .deliv-dash-label { font-size: 11px; text-transform: uppercase; color: #555; }
.deliv-dash-card.is-action     { border-left: 4px solid #9b1c1c; }
.deliv-dash-card.is-attention  { border-left: 4px solid #806000; }
.deliv-dash-card.is-authenticated { border-left: 4px solid #1b6b2b; }
.deliv-dash-card.is-unconfigured  { border-left: 4px solid #999; }

/* Active-alerts strip. */
.deliv-dash-alerts { margin: 0 0 18px 0; }
.deliv-dash-alerts .deliv-alert-row {
    padding: 6px 10px;
    border-left: 4px solid #ccc;
    background: #fafafa;
    margin-bottom: 4px;
    font-size: 12px;
}
.deliv-dash-alerts .deliv-alert-row.sev-C { border-left-color: #9b1c1c; }
.deliv-dash-alerts .deliv-alert-row.sev-W { border-left-color: #806000; }
.deliv-dash-alerts .deliv-alert-row.sev-I { border-left-color: #2a6db0; }
.deliv-dash-alerts .deliv-alert-seen { color: #898888; font-size: 10px; }

/* TLS posture chip (informational, not a traffic light -- RD-4). */
.deliv-tls-chip {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 10px;
    background: #eef2f6;
    color: #41566b;
    border: 1px solid #d4dde6;
}

/* ---- Global deliverability alert banner (lm_alert_banner.js) --------------
 * NOT main-scoped: the strip is injected by mf_htmltag.tcl ABOVE <main> (top of
 * every admin page), so main-scoped rules can't reach it. Without these rules it
 * rendered as dark text on the dark top-bar and was effectively invisible. */
.lm-alert-banner {
    display: block;
    padding: 8px 16px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    line-height: 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.18);
}
.lm-alert-banner svg { vertical-align: text-bottom; margin-right: 4px; }
.lm-alert-banner-text { font-weight: bold; }
.lm-alert-banner-link { font-weight: bold; text-decoration: underline; }
/* Severity colours — high contrast so a Critical reads as urgent. */
.lm-alert-banner.lm-alert-banner-sev-C { background: #c62828; color: #ffffff; }
.lm-alert-banner.lm-alert-banner-sev-C .lm-alert-banner-link { color: #ffffff; }
.lm-alert-banner.lm-alert-banner-sev-W { background: #fff3cd; color: #856404; }
.lm-alert-banner.lm-alert-banner-sev-W .lm-alert-banner-link { color: #6b4e00; }
.lm-alert-banner.lm-alert-banner-sev-I { background: #e3f0fb; color: #1565c0; }
.lm-alert-banner.lm-alert-banner-sev-I .lm-alert-banner-link { color: #0d47a1; }

/* ============================================================
 * S9 — Full Deliverability Health Dashboard
 * Spec: docs/superpowers/specs/2026-06-11-s9-full-dashboard-design.md
 * ============================================================ */

/* ---- Tab strip ------------------------------------------- */
.deliv-tab-strip {
    display: flex;
    align-items: stretch;
    background: #fafafa;
    border-bottom: 2px solid #e0e0e0;
    font-family: Arial, Helvetica, sans-serif;
}
.deliv-tab {
    padding: 9px 18px;
    cursor: pointer;
    font-size: 12px;
    color: #555;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    white-space: nowrap;
    text-decoration: none;
    display: inline-block;
}
.deliv-tab:hover { color: #1a4f7a; }
.deliv-tab.deliv-tab-active {
    color: #1a4f7a;
    font-weight: bold;
    border-bottom-color: #1a4f7a;
    background: #fff;
}
.deliv-tab-spacer { flex: 1; }
.deliv-tab-controls { display: flex; align-items: center; gap: 8px; padding: 0 12px; }

/* ---- Window (time) chips ---------------------------------- */
.deliv-window-chip {
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 10px;
    cursor: pointer;
    border: 1px solid transparent;
    text-decoration: none;
    display: inline-block;
    font-family: Arial, Helvetica, sans-serif;
}
.deliv-window-chip-off { background: #f0f0f0; color: #555; border-color: #ddd; }
.deliv-window-chip-off:hover { border-color: #1a4f7a; color: #1a4f7a; }
.deliv-window-chip-on { background: #1a4f7a; color: #fff; }

/* ---- Custom absolute date range (plain GET form, no JS) ---- */
.deliv-window-custom {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 6px;
    padding: 2px 6px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-family: Arial, Helvetica, sans-serif;
}
.deliv-window-custom-on { border-color: #1a4f7a; background: #eaf1f7; }
.deliv-window-custom input[type="date"] {
    font-size: 11px;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 2px 4px;
    color: #444;
    font-family: Arial, Helvetica, sans-serif;
}
.deliv-window-custom-sep { color: #888; font-size: 11px; }
.deliv-window-custom-go {
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 10px;
    border: 1px solid #1a4f7a;
    background: #1a4f7a;
    color: #fff;
    cursor: pointer;
    font-family: Arial, Helvetica, sans-serif;
}
.deliv-window-custom-go:hover { background: #15405f; }

/* ---- Domain chip ------------------------------------------ */
.deliv-domain-chip {
    font-size: 11px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 3px 8px;
    color: #444;
    cursor: pointer;
    font-family: Arial, Helvetica, sans-serif;
}

/* ---- Panel grid ------------------------------------------- */
.deliv-health-row-full { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 12px; }
.deliv-health-row-2    { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.deliv-health-row-3    { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.deliv-health-panel { background: #fff; border: 1px solid #dde3ea; border-radius: 5px; overflow: hidden; font-family: Arial, Helvetica, sans-serif; }
.deliv-health-panel-head { padding: 8px 12px; border-bottom: 1px solid #eef0f4; display: flex; justify-content: space-between; align-items: center; }
.deliv-health-panel-title { font-size: 12px; font-weight: bold; color: #222; }
.deliv-health-panel-sub { font-size: 10px; color: #aaa; }
.deliv-health-panel-drill { font-size: 10px; color: #1a4f7a; cursor: pointer; text-decoration: underline; }
.deliv-health-panel-body { padding: 10px 12px; }

/* ---- Complaint spike alert banner ------------------------- */
.deliv-health-spike-banner {
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 4px;
    padding: 8px 14px;
    margin-bottom: 14px;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: Arial, Helvetica, sans-serif;
}
.deliv-health-spike-banner .deliv-spike-msg { flex: 1; }
.deliv-health-spike-banner .deliv-spike-ack { font-size: 11px; color: #1a4f7a; cursor: pointer; text-decoration: underline; white-space: nowrap; }

/* ---- Provider scorecard table ----------------------------- */
.deliv-sc-table { width: 100%; border-collapse: collapse; font-size: 11px; table-layout: fixed; font-family: Arial, Helvetica, sans-serif; }
.deliv-sc-table th { text-align: left; color: #999; font-weight: normal; font-size: 10px; padding: 3px 8px 6px; border-bottom: 1px solid #eee; }
.deliv-sc-table th.r { text-align: right; }
.deliv-sc-table td { padding: 6px 8px; border-bottom: 1px solid #f5f5f5; vertical-align: middle; }
.deliv-sc-table tr:last-child td { border-bottom: none; }
.deliv-sc-table tr.deliv-sc-other { opacity: 0.7; }
.deliv-sc-col-prov   { width: 90px; }
.deliv-sc-col-bounce { width: 80px; }
.deliv-sc-col-comp   { width: 92px; }
.deliv-sc-col-sent   { width: 54px; text-align: right; color: #888; font-size: 10px; }

/* ---- Provider dot colours --------------------------------- */
.deliv-prov-name { display: flex; align-items: center; gap: 5px; font-size: 11px; color: #444; white-space: nowrap; }
.deliv-prov-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.deliv-prov-dot-gmail     { background: #ea4335; }
.deliv-prov-dot-yahoo     { background: #6001d2; }
.deliv-prov-dot-microsoft { background: #00a4ef; }
.deliv-prov-dot-apple     { background: #555; }
.deliv-prov-dot-other     { background: #bbb; }

/* ---- Bullet bar (delivery rate) --------------------------- */
.deliv-bullet-wrap { background: #eef1f5; border-radius: 3px; height: 18px; overflow: hidden; width: 100%; position: relative; }
.deliv-bullet-fill { height: 100%; border-radius: 3px; display: flex; align-items: center; padding: 0 6px; font-size: 10px; font-weight: bold; color: #fff; white-space: nowrap; min-width: 32px; }
.deliv-bullet-fill-green { background: #43a047; }
.deliv-bullet-fill-amber { background: #e65100; }
.deliv-bullet-fill-grey  { background: #9e9e9e; }

/* ---- Colour-coded pills ----------------------------------- */
.deliv-pill { display: inline-block; padding: 2px 7px; border-radius: 10px; font-size: 11px; font-weight: bold; text-align: center; min-width: 46px; font-family: Arial, Helvetica, sans-serif; }
.deliv-pill-good { background: #e8f5e9; color: #2e7d32; }
.deliv-pill-ok   { background: #f5f5f5; color: #555; }
.deliv-pill-warn { background: #fff3e0; color: #e65100; }
.deliv-pill-crit { background: #ffebee; color: #c62828; }

/* ---- Expand / drill links --------------------------------- */
.deliv-expand-link { font-size: 10px; color: #1a4f7a; cursor: pointer; margin-top: 6px; display: inline-block; }

/* ---- Chart containers (FusionCharts) ---------------------- */
.deliv-chart-container { width: 100%; height: 180px; }
.deliv-donut-chart     { width: 100%; height: 200px; }
.deliv-suppress-chart  { width: 100%; height: 120px; }

/* ---- Bounce donut — centred with 2-col legend ------------- */
.deliv-donut-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.deliv-donut-chart { width: 100%; height: 130px; }
.deliv-donut-legend { font-size: 11px; display: grid; grid-template-columns: 1fr 1fr; gap: 5px 16px; width: 100%; font-family: Arial, Helvetica, sans-serif; }
.deliv-legend-row { display: flex; align-items: center; gap: 5px; }
.deliv-legend-dot { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; }
.deliv-donut-footer { font-size: 11px; color: #888; margin-top: 4px; }

/* ---- TLS panel -------------------------------------------- */
.deliv-tls-bar-wrap { background: #eef4fa; border-radius: 3px; height: 20px; overflow: hidden; margin: 6px 0 4px; }
.deliv-tls-bar-fill { background: #1a4f7a; height: 100%; border-radius: 3px; display: flex; align-items: center; justify-content: flex-end; padding-right: 6px; }
.deliv-tls-bar-pct { font-size: 11px; color: #fff; font-weight: bold; }
.deliv-tls-stat-row { display: flex; justify-content: space-between; font-size: 11px; margin-top: 3px; font-family: Arial, Helvetica, sans-serif; }
.deliv-tls-label { color: #888; }
.deliv-tls-fail  { color: #c62828; }
.deliv-tls-link  { font-size: 10px; color: #1a4f7a; cursor: pointer; margin-top: 5px; display: block; }

/* ---- S10 reputation placeholder cards --------------------- */
.deliv-s10-placeholder { background: #f5f5f5; border: 1px dashed #ccc; border-radius: 4px; padding: 10px 12px; text-align: center; font-size: 11px; color: #999; font-family: Arial, Helvetica, sans-serif; }
.deliv-s10-placeholder + .deliv-s10-placeholder { margin-top: 8px; }
.deliv-s10-icon   { font-size: 16px; margin-bottom: 3px; }
.deliv-s10-name   { font-weight: bold; color: #666; margin-bottom: 2px; font-size: 11px; }
.deliv-s10-status { margin-bottom: 5px; font-size: 10px; }
.deliv-s10-cta    { font-size: 11px; color: #1a4f7a; cursor: pointer; text-decoration: underline; }

/* ---- Drilldown page table --------------------------------- */
.deliv-drilldown-table { width: 100%; border-collapse: collapse; font-size: 12px; font-family: Arial, Helvetica, sans-serif; }
.deliv-drilldown-table th { text-align: left; color: #888; font-weight: normal; font-size: 11px; padding: 4px 8px 6px; border-bottom: 1px solid #ddd; }
.deliv-drilldown-table td { padding: 5px 8px; border-bottom: 1px solid #f0f0f0; vertical-align: middle; }
.deliv-drilldown-table tr:last-child td { border-bottom: none; }
.deliv-drilldown-back { font-size: 11px; color: #1a4f7a; cursor: pointer; text-decoration: underline; display: inline-block; margin-bottom: 12px; }

/* ---- S10 reputation settings page cards ------------------- */
.deliv-s10-card       { background: #fff; border: 1px solid #dde3ea; border-radius: 5px; padding: 14px 16px; margin-bottom: 14px; font-family: Arial, Helvetica, sans-serif; }
.deliv-s10-card-head  { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.deliv-s10-card-icon  { font-size: 20px; }
.deliv-s10-card-title { font-size: 13px; font-weight: bold; color: #1a4f7a; }
.deliv-s10-card-badge { font-size: 10px; padding: 2px 6px; border-radius: 10px; background: #e8f4fd; color: #1a4f7a; border: 1px solid #b3d4ed; }
.deliv-s10-card-badge.connected { background: #e8f5e9; color: #2e7d32; border-color: #a5d6a7; }
.deliv-s10-card-badge.error     { background: #fdecea; color: #c62828; border-color: #ef9a9a; }
.deliv-s10-form       { font-size: 11px; }
.deliv-s10-form label { display: block; color: #555; margin: 6px 0 2px; }
.deliv-s10-form input[type="text"],
.deliv-s10-form input[type="password"] { width: 100%; max-width: 380px; padding: 4px 6px; border: 1px solid #ccc; border-radius: 3px; font-size: 11px; font-family: Arial, Helvetica, sans-serif; box-sizing: border-box; }
.deliv-s10-form-hint  { font-size: 10px; color: #888; margin-top: 2px; }
.deliv-s10-btn-row    { margin-top: 10px; display: flex; gap: 8px; align-items: center; }
.deliv-s10-rate       { font-size: 12px; color: #1a4f7a; font-weight: bold; }
.deliv-s10-sync       { font-size: 10px; color: #888; margin-top: 3px; }
.deliv-s10-err        { font-size: 10px; color: #c62828; margin-top: 3px; }
.deliv-s10-light-red    { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #c62828; margin-right: 4px; vertical-align: middle; }
.deliv-s10-light-yellow { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #f9a825; margin-right: 4px; vertical-align: middle; }
.deliv-s10-light-green  { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #2e7d32; margin-right: 4px; vertical-align: middle; }
.deliv-s10-light-grey   { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #9e9e9e; margin-right: 4px; vertical-align: middle; }

/* ---- S10 reputation settings: provider <details> cards ----- */
.deliv-s10-intro      { font-size: 12px; color: #555; margin-bottom: 16px; font-family: Arial, Helvetica, sans-serif; }
.deliv-s10-redirect   { background: #e8f4fd; border: 1px solid #b3d4ed; border-radius: 5px; padding: 14px 16px; margin-bottom: 14px; font-size: 12px; font-family: Arial, Helvetica, sans-serif; }
.deliv-s10-prov-card  { background: #fff; border: 1px solid #dde3ea; border-radius: 5px; margin-bottom: 14px; font-family: Arial, Helvetica, sans-serif; }
.deliv-s10-prov-summary { padding: 12px 16px; cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; }
.deliv-s10-prov-summary::-webkit-details-marker { display: none; }
.deliv-s10-prov-summary::before { content: "\25B8"; color: #1a4f7a; font-size: 11px; }
details[open] > .deliv-s10-prov-summary::before { content: "\25BE"; }
.deliv-s10-prov-title { font-size: 13px; font-weight: bold; color: #1a4f7a; }
.deliv-s10-prov-body  { padding: 4px 16px 16px; font-size: 12px; color: #444; border-top: 1px solid #eef1f4; }
.deliv-s10-prov-body p { margin: 8px 0; }
.deliv-s10-steps      { font-size: 11px; color: #555; margin: 8px 0 12px; padding-left: 20px; }
.deliv-s10-steps li   { margin-bottom: 5px; }
.deliv-s10-steps a    { color: #1a4f7a; }
.deliv-s10-field      { margin: 8px 0; }
.deliv-s10-field label { display: block; color: #555; font-size: 11px; margin-bottom: 2px; }
.deliv-s10-field input[type="text"],
.deliv-s10-field input[type="password"] { width: 100%; max-width: 380px; padding: 4px 6px; border: 1px solid #ccc; border-radius: 3px; font-size: 11px; font-family: Arial, Helvetica, sans-serif; box-sizing: border-box; }
.deliv-s10-field select { padding: 4px 6px; border: 1px solid #ccc; border-radius: 3px; font-size: 11px; font-family: Arial, Helvetica, sans-serif; }
.deliv-s10-actions    { margin-top: 12px; display: flex; gap: 8px; align-items: center; }
.deliv-s10-jmrp       { font-size: 11px; color: #888; margin-top: 10px; }
.deliv-s10-jmrp a     { color: #1a4f7a; }
.deliv-s10-test-ok    { font-size: 11px; color: #2e7d32; background: #e8f5e9; border: 1px solid #a5d6a7; border-radius: 3px; padding: 6px 8px; margin: 8px 0; }
.deliv-s10-test-err   { font-size: 11px; color: #c62828; background: #fdecea; border: 1px solid #ef9a9a; border-radius: 3px; padding: 6px 8px; margin: 8px 0; }
.deliv-s10-footer     { margin-top: 18px; }
.deliv-s10-breadcrumb { font-family: Arial, Helvetica, sans-serif; font-size: 11px; letter-spacing: normal; margin-bottom: 8px; }
.deliv-s10-breadcrumb a { color: #1a4f7a; }

/* S10 connected-state block (per-domain Google/SNDS/Yahoo connection rows) */
.deliv-s10-conn-row    { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: #f7faf7; border: 1px solid #d9ead9; border-radius: 4px; padding: 11px 13px; margin-bottom: 8px; }
.deliv-s10-conn-info   { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.deliv-s10-conn-domain { font-size: 12px; font-weight: bold; color: #2e7d32; display: flex; align-items: center; }
.deliv-s10-conn-meta   { font-size: 10px; color: #888; }
.deliv-s10-conn-meta.err { color: #c62828; }
.deliv-s10-conn-actions{ display: flex; gap: 7px; flex-shrink: 0; }
.deliv-s10-add-another { margin-top: 12px; }
.deliv-s10-add-another > summary { font-size: 11px; color: #1a4f7a; cursor: pointer; list-style: none; }
.deliv-s10-add-another > summary::-webkit-details-marker { display: none; }
.deliv-s10-add-another > summary::before { content: "\25B8 "; color: #1a4f7a; }
.deliv-s10-add-another[open] > summary::before { content: "\25BE "; }
.deliv-s10-add-body    { margin-top: 10px; padding: 12px; border: 1px solid #eef1f4; border-radius: 4px; background: #fafbfc; }