/* MailPier Inbox: plain Bootstrap plus a few brand rules. Colours meet WCAG AA contrast on their backgrounds. */
.mp-top { background: #0b3d5c; }
.mp-brand { color: #fff; font-weight: 600; text-decoration: none; }
.mp-brand:hover, .mp-brand:focus { color: #d4ecff; }
.mp-logo { vertical-align: -6px; }
.mp-top .nav-link { color: #e6f3ff; }
.mp-top .nav-link:hover, .mp-top .nav-link:focus { color: #fff; text-decoration: underline; }
.mp-page { min-height: 100vh; display: flex; flex-direction: column; }
.mp-page > main { flex: 1 0 auto; }
.mp-footer { color: #595f66; border-top: 1px solid #dee2e6; }
.mp-footer a { color: #595f66; }
.mp-legal { max-width: 820px; }
.mp-legal h2 { font-size: 1.25rem; margin-top: 1.75rem; }
.mp-mail-list .list-group-item { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) auto; gap: .75rem; align-items: baseline; }
.mp-mail-list .list-group-item:focus { outline: 3px solid #0b6bcb; outline-offset: -3px; }
.mp-mail-to, .mp-mail-from { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-mail-subject { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-when { color: #595f66; font-size: .875rem; white-space: nowrap; }
.mp-html-frame { width: 100%; min-height: 480px; border: 1px solid #dee2e6; border-radius: .375rem; background: #fff; }
.mp-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.25rem; letter-spacing: .1em; }
.mp-pre { background: #f6f8fa; padding: .75rem; border-radius: .375rem; white-space: pre-wrap; word-break: break-word; max-height: 480px; overflow: auto; }
.mp-key { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; word-break: break-all; }
.mp-headers th { width: 9rem; font-weight: 600; color: #3b4148; }
.visually-hidden-focusable:focus { position: static !important; }
@media (max-width: 640px) { .mp-mail-list .list-group-item { grid-template-columns: 1fr; gap: .1rem; } }
#blazor-error-ui { background: lightyellow; bottom: 0; box-shadow: 0 -1px 2px rgba(0,0,0,.2); display: none; left: 0; padding: .6rem 1.25rem .7rem; position: fixed; width: 100%; z-index: 1000; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }
/* Settings preview: keep each SQL line on one line on wider screens (scrolls inside the box if still too long); wraps on phones. */
@media (min-width: 768px) { .mp-pre-wide { white-space: pre; word-break: normal; overflow-x: auto; } }
/* Email check report and template diff (v2.4) */
.mp-qa-list li { padding: .2rem 0; border-bottom: 1px solid #eef0f2; }
.mp-qa-list li:last-child { border-bottom: 0; }
.mp-qa-status { display: inline-block; min-width: 3.2rem; text-align: center; }
.mp-diff { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .85rem; background: #f6f8fa; border-radius: .375rem; padding: .5rem .75rem; overflow-x: auto; }
.mp-diff div { white-space: pre-wrap; word-break: break-word; }
.mp-diff-del { background: #ffebe9; color: #82071e; }
.mp-diff-add { background: #e6ffec; color: #116329; }
.mp-diff-ctx { color: #595f66; }
/* Usage charts and status page (v2.3.3): server-rendered SVG. Categorical slots in fixed order (validated palette: CVD-safe on
   adjacent pairs; three light slots are under 3:1 on white, so every chart has its table view). Status colours are separate. */
:root {
    --mp-series-1: #2a78d6; --mp-series-2: #eb6834; --mp-series-3: #1baf7a; --mp-series-4: #eda100;
    --mp-series-5: #e87ba4; --mp-series-6: #008300; --mp-series-7: #6250d6; --mp-series-8: #e34948;
    --mp-chart-grid: #e1e0d9; --mp-chart-base: #c3c2b7; --mp-chart-ink: #52514e;
    --mp-up-ok: #0ca30c; --mp-up-degraded: #fab219; --mp-up-outage: #d03b3b; --mp-up-none: #e1e0d9;
}
[data-bs-theme="dark"] {
    --mp-series-1: #3987e5; --mp-series-2: #d95926; --mp-series-3: #199e70; --mp-series-4: #c98500;
    --mp-series-5: #d55181; --mp-series-6: #008300; --mp-series-7: #9085e9; --mp-series-8: #e66767;
    --mp-chart-grid: #2c2c2a; --mp-chart-base: #383835; --mp-chart-ink: #c3c2b7; --mp-up-none: #383835;
}
.mp-chart { width: 100%; height: auto; max-width: 760px; display: block; }
.mp-chart text { font: 11px system-ui, -apple-system, "Segoe UI", sans-serif; fill: var(--mp-chart-ink); font-variant-numeric: tabular-nums; }
.mp-chart-grid { stroke: var(--mp-chart-grid); stroke-width: 1; }
.mp-chart-base { stroke: var(--mp-chart-base); stroke-width: 1; }
.mp-chart rect:hover { opacity: .8; }
.mp-legend { display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-size: .875rem; margin: .25rem 0 .5rem; padding: 0; list-style: none; }
.mp-swatch { display: inline-block; width: .75rem; height: .75rem; border-radius: 2px; margin-right: .35rem; vertical-align: -1px; }
.mp-rank-bar { height: .5rem; background: var(--mp-series-1); border-radius: 2px; min-width: 2px; }
.mp-uptime { width: 100%; height: 34px; display: block; }
.mp-up-operational { fill: var(--mp-up-ok); }
.mp-up-degraded { fill: var(--mp-up-degraded); }
.mp-up-outage { fill: var(--mp-up-outage); }
.mp-up-nodata { fill: var(--mp-up-none); }
.mp-status-dot { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; margin-right: .4rem; }
@media (forced-colors: active) { .mp-chart rect, .mp-uptime rect { forced-color-adjust: none; } }
/* Pricing tables: fixed, equal plan columns so every row lines up; headers sit on the same baseline. */
.mp-price-table { table-layout: fixed; min-width: 760px; }
.mp-price-table col.mp-price-label { width: 24%; }
.mp-price-table thead th { vertical-align: bottom; }
.mp-price-table td, .mp-price-table th { overflow-wrap: anywhere; }