/*
 * SpamBarometer design system (2026 redesign, "Concept B")
 * Loaded after Bootstrap and style.css by every layout. It sets the tokens,
 * re-themes Bootstrap's components, and points the legacy style.css
 * variables at the new palette so older page styles follow along.
 */

/* ---------- Tokens ---------- */
:root {
    --sb-storm: #142231;
    --sb-storm-2: #1c2e41;
    --sb-storm-line: rgba(255, 255, 255, 0.12);
    --sb-on-storm: #f2f5f8;
    --sb-on-storm-2: #aeb9c5;

    --sb-paper: #f4f6f8;
    --sb-surface: #ffffff;
    --sb-surface-2: #f8fafb;
    --sb-ink: #121a23;
    --sb-ink-2: #47515d;
    --sb-ink-3: #5f6974;
    --sb-line: #dce1e6;

    --sb-amber: #e08a3a;          /* needle, accents, buttons on storm */
    --sb-amber-strong: #a85a10;   /* buttons on paper: white text 5.1:1 */
    --sb-amber-press: #8f4c0d;
    --sb-amber-tint: #fbf0e4;
    --sb-link: #a85a10;

    --sb-pass: #1f8a4c;
    --sb-warn: #946403;
    --sb-fail: #c8372d;
    --sb-info: #2f5d86;
    --sb-pass-tint: #e7f4ec;
    --sb-warn-tint: #faf1dc;
    --sb-fail-tint: #fbeae8;
    --sb-info-tint: #e8eff6;

    --sb-radius-sm: 0.5rem;
    --sb-radius: 0.75rem;
    --sb-radius-lg: 1.125rem;
    --sb-shadow-sm: 0 1px 2px rgba(18, 26, 35, 0.06), 0 4px 12px -4px rgba(18, 26, 35, 0.1);
    --sb-shadow-lg: 0 2px 4px rgba(18, 26, 35, 0.06), 0 28px 70px -18px rgba(10, 20, 32, 0.45);

    --sb-font: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
    --sb-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    /* Bootstrap theme variables */
    --bs-body-font-family: var(--sb-font);
    --bs-body-font-size: 1rem;
    --bs-body-line-height: 1.6;
    --bs-body-color: var(--sb-ink);
    --bs-body-bg: var(--sb-paper);
    --bs-emphasis-color: var(--sb-ink);
    --bs-secondary-color: var(--sb-ink-3);
    --bs-tertiary-bg: var(--sb-surface-2);
    --bs-border-color: var(--sb-line);
    --bs-border-radius: var(--sb-radius-sm);
    --bs-border-radius-sm: 0.375rem;
    --bs-border-radius-lg: var(--sb-radius);
    --bs-link-color: var(--sb-link);
    --bs-link-color-rgb: 168, 90, 16;
    --bs-link-hover-color: var(--sb-amber-press);
    --bs-link-hover-color-rgb: 143, 76, 13;
    --bs-primary: var(--sb-amber-strong);
    --bs-primary-rgb: 168, 90, 16;
    --bs-success: var(--sb-pass);
    --bs-success-rgb: 31, 138, 76;
    --bs-warning: var(--sb-warn);
    --bs-warning-rgb: 148, 100, 3;
    --bs-danger: var(--sb-fail);
    --bs-danger-rgb: 200, 55, 45;
    --bs-info: var(--sb-info);
    --bs-info-rgb: 47, 93, 134;
    --bs-dark: var(--sb-storm);
    --bs-dark-rgb: 20, 34, 49;
    --bs-light-rgb: 248, 250, 251;
    --bs-secondary-rgb: 95, 105, 116;
    --bs-focus-ring-color: rgba(224, 138, 58, 0.35);

    /* Legacy style.css variables, re-pointed at the new palette */
    --primary: var(--sb-amber-strong);
    --primary-hover: var(--sb-amber-press);
    --primary-light: var(--sb-amber-tint);
    --neutral-900: var(--sb-ink);
    --neutral-800: #1f2a36;
    --neutral-700: #353f4b;
    --neutral-600: var(--sb-ink-2);
    --neutral-500: var(--sb-ink-3);
    --neutral-400: #8b95a1;
    --neutral-300: #c3cad2;
    --neutral-200: var(--sb-line);
    --neutral-100: #eef1f4;
    --neutral-50: var(--sb-surface-2);
    --success: var(--sb-pass);
    --success-light: var(--sb-pass-tint);
    --warning: var(--sb-warn);
    --warning-light: var(--sb-warn-tint);
    --danger: var(--sb-fail);
    --danger-light: var(--sb-fail-tint);
    --info: var(--sb-info);
    --info-light: var(--sb-info-tint);
    --border-color: var(--sb-line);
    --background: var(--sb-paper);
    --surface: var(--sb-surface);
    --text-primary: var(--sb-ink);
    --text-secondary: var(--sb-ink-2);
    --text-muted: var(--sb-ink-3);
    --shadow-sm: none;
    --shadow: var(--sb-shadow-sm);
    --shadow-md: var(--sb-shadow-sm);
    --radius-sm: 0.375rem;
    --radius: var(--sb-radius-sm);
    --radius-lg: var(--sb-radius);
}

/* ---------- Base ---------- */
body {
    font-family: var(--sb-font);
    background-color: var(--sb-paper);
    color: var(--sb-ink);
    font-size: 1rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--sb-link); text-underline-offset: 0.18em; }
a:hover { color: var(--sb-amber-press); }

:focus-visible { outline: 2px solid var(--sb-amber); outline-offset: 3px; }

code, kbd, pre, samp, .font-monospace { font-family: var(--sb-mono); }
code { color: var(--sb-ink); background: var(--sb-surface-2); border: 1px solid var(--sb-line); border-radius: 0.25rem; padding: 0.05em 0.3em; font-size: 0.875em; }
pre code { border: 0; padding: 0; background: none; }

/* One family; the width axis does the work: wide and heavy for headings */
h1, h2, h3, .h1, .h2, .h3 {
    font-family: var(--sb-font);
    font-stretch: 112%;
    font-weight: 780;
    letter-spacing: -0.03em;
    line-height: 1.05;
    color: var(--sb-ink);
    text-wrap: balance;
}
h4, h5, h6, .h4, .h5, .h6 {
    font-family: var(--sb-font);
    font-weight: 650;
    letter-spacing: -0.012em;
    line-height: 1.25;
    color: var(--sb-ink);
}
h1, .h1 { font-size: clamp(2rem, 4.4vw, 3.25rem); }
h2, .h2 { font-size: clamp(1.625rem, 3.2vw, 2.25rem); }
h3, .h3 { font-size: clamp(1.25rem, 2.2vw, 1.625rem); letter-spacing: -0.022em; }
h4, .h4 { font-size: 1.25rem; }
h5, .h5 { font-size: 1.0625rem; }
h6, .h6 { font-size: 1rem; }

.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-stretch: 118%;
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 0.98;
}
.lead { font-size: clamp(1.0625rem, 1.5vw, 1.25rem); line-height: 1.55; color: var(--sb-ink-2); font-weight: 400; }
.text-muted, .text-body-secondary { color: var(--sb-ink-3) !important; }
.small, small { line-height: 1.5; }

/* Type helpers used by the redesigned templates */
.sb-display { font-stretch: 118%; font-weight: 800; font-size: clamp(2.6rem, 7.4vw, 6.25rem); line-height: 0.94; letter-spacing: -0.035em; text-wrap: balance; }
.sb-title { font-stretch: 112%; font-weight: 780; font-size: clamp(1.875rem, 4vw, 3rem); line-height: 1.02; letter-spacing: -0.03em; text-wrap: balance; }
.sb-head { font-weight: 650; font-size: 1.25rem; line-height: 1.25; letter-spacing: -0.012em; }
.sb-lead { font-size: clamp(1.0625rem, 1.5vw, 1.25rem); line-height: 1.55; color: var(--sb-ink-2); }
.sb-body { color: var(--sb-ink-2); }
.sb-small { font-size: 0.875rem; line-height: 1.5; color: var(--sb-ink-3); }
.sb-measure { max-width: 38rem; }

/* ---------- Buttons ---------- */
.btn {
    --bs-btn-font-family: var(--sb-font);
    --bs-btn-font-weight: 650;
    --bs-btn-border-radius: 0.625rem;
    --bs-btn-padding-x: 1.125rem;
    --bs-btn-padding-y: 0.5625rem;
    --bs-btn-font-size: 0.9375rem;
    letter-spacing: -0.005em;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 100ms ease-out;
    -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(0.97); }
.btn-lg { --bs-btn-padding-x: 1.5rem; --bs-btn-padding-y: 0.8125rem; --bs-btn-font-size: 1rem; --bs-btn-border-radius: 0.75rem; }
.btn-sm { --bs-btn-padding-x: 0.75rem; --bs-btn-padding-y: 0.375rem; --bs-btn-font-size: 0.8125rem; --bs-btn-border-radius: 0.5rem; }

.btn-primary {
    --bs-btn-color: #fff; --bs-btn-bg: var(--sb-amber-strong); --bs-btn-border-color: var(--sb-amber-strong);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--sb-amber-press); --bs-btn-hover-border-color: var(--sb-amber-press);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--sb-amber-press); --bs-btn-active-border-color: var(--sb-amber-press);
    --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: var(--sb-amber-strong); --bs-btn-disabled-border-color: var(--sb-amber-strong);
    --bs-btn-focus-shadow-rgb: 224, 138, 58;
    background-color: var(--bs-btn-bg); border-color: var(--bs-btn-border-color); color: var(--bs-btn-color);
}
.btn-primary:hover { background-color: var(--bs-btn-hover-bg); border-color: var(--bs-btn-hover-border-color); color: #fff; }

.btn-outline-primary, .btn-outline-secondary, .btn-secondary, .btn-light, .btn-outline-dark, .btn-outline-light {
    --bs-btn-color: var(--sb-ink); --bs-btn-bg: transparent; --bs-btn-border-color: var(--sb-line);
    --bs-btn-hover-color: var(--sb-ink); --bs-btn-hover-bg: var(--sb-surface); --bs-btn-hover-border-color: var(--sb-ink-3);
    --bs-btn-active-color: var(--sb-ink); --bs-btn-active-bg: #eef1f4; --bs-btn-active-border-color: var(--sb-ink-3);
    --bs-btn-disabled-color: var(--sb-ink-3); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--sb-line);
    --bs-btn-focus-shadow-rgb: 224, 138, 58;
    background-color: var(--bs-btn-bg); border-color: var(--bs-btn-border-color); color: var(--bs-btn-color);
}
.btn-outline-primary:hover, .btn-outline-secondary:hover, .btn-secondary:hover, .btn-light:hover, .btn-outline-dark:hover {
    background-color: var(--bs-btn-hover-bg); border-color: var(--bs-btn-hover-border-color); color: var(--bs-btn-hover-color);
}
.btn-secondary, .btn-light { --bs-btn-bg: var(--sb-surface); }

.btn-success { --bs-btn-bg: var(--sb-pass); --bs-btn-border-color: var(--sb-pass); --bs-btn-hover-bg: #187a42; --bs-btn-hover-border-color: #187a42; --bs-btn-active-bg: #156b3a; --bs-btn-active-border-color: #156b3a; --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; }
.btn-danger { --bs-btn-bg: var(--sb-fail); --bs-btn-border-color: var(--sb-fail); --bs-btn-hover-bg: #ad2e25; --bs-btn-hover-border-color: #ad2e25; --bs-btn-active-bg: #962820; --bs-btn-active-border-color: #962820; --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; }
.btn-warning { --bs-btn-bg: var(--sb-amber); --bs-btn-border-color: var(--sb-amber); --bs-btn-hover-bg: #f09a4a; --bs-btn-hover-border-color: #f09a4a; --bs-btn-active-bg: #f09a4a; --bs-btn-color: var(--sb-ink); --bs-btn-hover-color: var(--sb-ink); --bs-btn-active-color: var(--sb-ink); }
.btn-info, .btn-dark { --bs-btn-bg: var(--sb-storm); --bs-btn-border-color: var(--sb-storm); --bs-btn-hover-bg: var(--sb-storm-2); --bs-btn-hover-border-color: var(--sb-storm-2); --bs-btn-active-bg: var(--sb-storm-2); --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; }
.btn-outline-success { --bs-btn-color: var(--sb-pass); --bs-btn-border-color: var(--sb-pass); --bs-btn-hover-bg: var(--sb-pass); --bs-btn-hover-border-color: var(--sb-pass); --bs-btn-active-bg: var(--sb-pass); }
.btn-outline-danger { --bs-btn-color: var(--sb-fail); --bs-btn-border-color: var(--sb-fail); --bs-btn-hover-bg: var(--sb-fail); --bs-btn-hover-border-color: var(--sb-fail); --bs-btn-active-bg: var(--sb-fail); }
.btn-outline-warning, .btn-outline-info { --bs-btn-color: var(--sb-ink); --bs-btn-border-color: var(--sb-line); --bs-btn-hover-color: var(--sb-ink); --bs-btn-hover-bg: var(--sb-surface); --bs-btn-hover-border-color: var(--sb-ink-3); --bs-btn-active-bg: #eef1f4; --bs-btn-active-color: var(--sb-ink); }
.btn-link { --bs-btn-color: var(--sb-link); --bs-btn-hover-color: var(--sb-amber-press); font-weight: 600; }

/* ---------- Cards: flat surfaces, structure from a hairline, not a shadow ---------- */
.card {
    --bs-card-border-color: var(--sb-line);
    --bs-card-border-radius: var(--sb-radius);
    --bs-card-inner-border-radius: calc(var(--sb-radius) - 1px);
    --bs-card-cap-bg: transparent;
    --bs-card-spacer-y: 1.25rem;
    --bs-card-spacer-x: 1.25rem;
    --bs-card-cap-padding-y: 1rem;
    --bs-card-cap-padding-x: 1.25rem;
    background-color: var(--sb-surface);
    border: 1px solid var(--sb-line);
    border-radius: var(--sb-radius);
    box-shadow: none;
}
.card-header { background: transparent; border-bottom: 1px solid var(--sb-line); font-weight: 650; padding: 1rem 1.25rem; }
.card-header h1, .card-header h2, .card-header h3, .card-header h4, .card-header h5, .card-header h6,
.card-title { font-family: var(--sb-font); font-stretch: 100%; font-weight: 650; letter-spacing: -0.012em; font-size: 1.0625rem; line-height: 1.3; margin-bottom: 0; }
.card-body .card-title { margin-bottom: 0.5rem; }
.card-footer { background: var(--sb-surface-2); border-top: 1px solid var(--sb-line); padding: 1rem 1.25rem; }
.card-body { padding: 1.25rem; }
.shadow, .shadow-sm { box-shadow: var(--sb-shadow-sm) !important; }
.shadow-lg { box-shadow: var(--sb-shadow-lg) !important; }

/* ---------- Tables ---------- */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--sb-ink);
    --bs-table-border-color: var(--sb-line);
    --bs-table-hover-bg: rgba(18, 26, 35, 0.025);
    --bs-table-striped-bg: rgba(18, 26, 35, 0.02);
    font-size: 0.9375rem;
}
.table > :not(caption) > * > * { padding: 0.75rem 1rem; }
.table th, .table thead th {
    background: transparent;
    color: var(--sb-ink-3);
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    border-bottom: 1px solid var(--sb-line);
}
.table tbody tr { background: transparent; }
.table-light { --bs-table-bg: var(--sb-surface-2); --bs-table-color: var(--sb-ink-3); }
.table-dark { --bs-table-bg: var(--sb-storm); --bs-table-color: var(--sb-on-storm); }

/* ---------- Alerts: brand tints with a soft status outline (no stock Bootstrap blue) ---------- */
.alert {
    --bs-alert-border-radius: var(--sb-radius-sm);
    border: 1px solid transparent;
    font-size: 0.9375rem;
    padding: 0.875rem 1rem;
}
.alert-primary, .alert-warning { --bs-alert-color: #5c3d02; --bs-alert-bg: var(--sb-warn-tint); --bs-alert-border-color: var(--sb-warn); --bs-alert-link-color: #5c3d02; }
.alert-primary { --bs-alert-color: #6b3a0a; --bs-alert-bg: var(--sb-amber-tint); --bs-alert-border-color: var(--sb-amber); }
.alert-success { --bs-alert-color: #145c33; --bs-alert-bg: var(--sb-pass-tint); --bs-alert-border-color: var(--sb-pass); --bs-alert-link-color: #145c33; }
.alert-danger { --bs-alert-color: #8a241d; --bs-alert-bg: var(--sb-fail-tint); --bs-alert-border-color: var(--sb-fail); --bs-alert-link-color: #8a241d; }
.alert-info, .alert-secondary, .alert-light {
    --bs-alert-color: #1f3d58; --bs-alert-bg: var(--sb-info-tint); --bs-alert-border-color: var(--sb-info); --bs-alert-link-color: #1f3d58;
}
.alert-dark { --bs-alert-color: var(--sb-on-storm); --bs-alert-bg: var(--sb-storm); --bs-alert-border-color: var(--sb-amber); }
.alert { background-color: var(--bs-alert-bg); color: var(--bs-alert-color); border-color: color-mix(in srgb, var(--bs-alert-border-color) 28%, transparent); }
.alert .alert-link, .alert a { color: var(--bs-alert-link-color, inherit); font-weight: 600; }
.alert-heading { font-stretch: 100%; font-size: 1rem; font-weight: 700; letter-spacing: 0; }

/* ---------- Badges: pills, tinted ---------- */
.badge {
    font-family: var(--sb-font);
    font-weight: 650;
    font-size: 0.75em;
    letter-spacing: 0;
    padding: 0.35em 0.65em;
    border-radius: 999px;
}
.badge.bg-success, .badge.text-bg-success { background-color: var(--sb-pass-tint) !important; color: var(--sb-pass) !important; }
.badge.bg-warning, .badge.text-bg-warning { background-color: var(--sb-warn-tint) !important; color: var(--sb-warn) !important; }
.badge.bg-danger, .badge.text-bg-danger { background-color: var(--sb-fail-tint) !important; color: var(--sb-fail) !important; }
.badge.bg-info, .badge.text-bg-info, .badge.bg-secondary, .badge.text-bg-secondary, .badge.bg-light, .badge.text-bg-light {
    background-color: #eef1f4 !important; color: var(--sb-ink-2) !important;
}
.badge.bg-primary, .badge.text-bg-primary { background-color: var(--sb-amber-tint) !important; color: var(--sb-link) !important; }
.badge.bg-dark, .badge.text-bg-dark { background-color: var(--sb-storm) !important; color: #fff !important; }

/* ---------- Forms ---------- */
.form-label { font-size: 0.875rem; font-weight: 600; color: var(--sb-ink-2); margin-bottom: 0.375rem; }
.form-control, .form-select {
    font-family: var(--sb-font);
    font-size: 1rem;
    color: var(--sb-ink);
    background-color: var(--sb-surface);
    border: 1.5px solid var(--sb-line);
    border-radius: 0.625rem;
    padding: 0.625rem 0.875rem;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}
.form-select { padding-right: 2.25rem; }
.form-control:hover, .form-select:hover { border-color: var(--sb-ink-3); }
.form-control:focus, .form-select:focus {
    border-color: var(--sb-amber);
    box-shadow: 0 0 0 4px rgba(224, 138, 58, 0.22);
    outline: none;
}
.form-control::placeholder { color: #8b95a1; }
.form-control-lg, .form-select-lg { font-size: 1.0625rem; padding: 0.8125rem 1rem; border-radius: 0.75rem; }
.form-control-sm, .form-select-sm { font-size: 0.875rem; padding: 0.375rem 0.625rem; border-radius: 0.5rem; }
.form-text { color: var(--sb-ink-3); font-size: 0.8125rem; }
.input-group-text { background: var(--sb-surface-2); border: 1.5px solid var(--sb-line); color: var(--sb-ink-3); border-radius: 0.625rem; }
.input-group > .btn { border-width: 1.5px; }
.form-check-input { border: 1.5px solid #9aa4af; }
.form-check-input:checked { background-color: var(--sb-amber-strong); border-color: var(--sb-amber-strong); }
.form-check-input:focus { border-color: var(--sb-amber); box-shadow: 0 0 0 4px rgba(224, 138, 58, 0.22); }
.form-switch .form-check-input { width: 2.25em; }
.form-switch .form-check-input:checked { background-color: var(--sb-pass); border-color: var(--sb-pass); }
.is-invalid { border-color: var(--sb-fail) !important; }
.invalid-feedback { color: var(--sb-fail); }
.is-valid { border-color: var(--sb-pass) !important; }

/* ---------- Navigation components ---------- */
.nav-tabs { --bs-nav-tabs-border-color: var(--sb-line); --bs-nav-tabs-link-active-color: var(--sb-ink); --bs-nav-tabs-link-active-bg: transparent; --bs-nav-tabs-link-active-border-color: transparent; gap: 0.25rem; }
.nav-tabs .nav-link { border: 0; border-bottom: 2px solid transparent; color: var(--sb-ink-3); font-weight: 600; border-radius: 0; padding: 0.625rem 0.875rem; }
.nav-tabs .nav-link:hover { color: var(--sb-ink); border-bottom-color: var(--sb-line); }
.nav-tabs .nav-link.active { border-bottom-color: var(--sb-amber); color: var(--sb-ink); background: transparent; }
.nav-pills { --bs-nav-pills-link-active-bg: var(--sb-storm); --bs-nav-pills-border-radius: 999px; }
.nav-pills .nav-link { color: var(--sb-ink-2); font-weight: 600; }

.pagination { --bs-pagination-color: var(--sb-ink-2); --bs-pagination-border-color: var(--sb-line); --bs-pagination-hover-color: var(--sb-ink); --bs-pagination-hover-bg: var(--sb-surface); --bs-pagination-active-bg: var(--sb-storm); --bs-pagination-active-border-color: var(--sb-storm); --bs-pagination-focus-box-shadow: 0 0 0 4px rgba(224, 138, 58, 0.22); --bs-pagination-border-radius: 0.5rem; }

.breadcrumb { --bs-breadcrumb-divider-color: var(--sb-ink-3); --bs-breadcrumb-item-active-color: var(--sb-ink-3); font-size: 0.875rem; }
.breadcrumb a { color: var(--sb-ink-2); text-decoration: none; }
.breadcrumb a:hover { color: var(--sb-link); text-decoration: underline; }

.list-group { --bs-list-group-border-color: var(--sb-line); --bs-list-group-border-radius: var(--sb-radius); --bs-list-group-action-hover-bg: var(--sb-surface-2); --bs-list-group-active-bg: var(--sb-storm); --bs-list-group-active-border-color: var(--sb-storm); }

.dropdown-menu {
    --bs-dropdown-border-color: var(--sb-line);
    --bs-dropdown-border-radius: var(--sb-radius);
    --bs-dropdown-link-hover-bg: var(--sb-surface-2);
    --bs-dropdown-link-active-bg: var(--sb-amber-tint);
    --bs-dropdown-link-active-color: var(--sb-ink);
    box-shadow: var(--sb-shadow-sm);
    padding: 0.375rem;
}
.dropdown-item { border-radius: 0.5rem; font-size: 0.9375rem; padding: 0.5rem 0.75rem; }

.modal-content { border: 0; border-radius: var(--sb-radius-lg); box-shadow: var(--sb-shadow-lg); }
.modal-header, .modal-footer { border-color: var(--sb-line); }
.modal-title { font-stretch: 100%; font-weight: 700; letter-spacing: -0.012em; font-size: 1.25rem; }

.accordion { --bs-accordion-border-color: var(--sb-line); --bs-accordion-border-radius: var(--sb-radius); --bs-accordion-inner-border-radius: calc(var(--sb-radius) - 1px); --bs-accordion-active-bg: var(--sb-surface); --bs-accordion-active-color: var(--sb-ink); --bs-accordion-btn-focus-box-shadow: 0 0 0 4px rgba(224, 138, 58, 0.22); }
.accordion-button { font-weight: 600; }

.progress { --bs-progress-bg: #e6eaee; --bs-progress-bar-bg: var(--sb-amber); --bs-progress-border-radius: 999px; height: 0.5rem; }

.spinner-border { color: var(--sb-amber); }

/* Bootstrap colour utilities re-pointed at the palette */
.text-primary { color: var(--sb-link) !important; }
.bg-primary { background-color: var(--sb-amber-strong) !important; }
.text-success { color: var(--sb-pass) !important; }
.text-warning { color: var(--sb-warn) !important; }
.text-danger { color: var(--sb-fail) !important; }
.text-info { color: var(--sb-info) !important; }
.bg-light { background-color: var(--sb-surface-2) !important; }
.bg-dark { background-color: var(--sb-storm) !important; }
.border { border-color: var(--sb-line) !important; }

/* ---------- Site navigation (storm material) ---------- */
/* Paint a storm strip behind the translucent nav so it reads as storm-blue at rest,
   not grey (the nav blurs whatever sits behind it). */
body:has(> nav.sb-nav) {
    background: linear-gradient(to bottom, var(--sb-storm) 0, var(--sb-storm) 4rem, var(--sb-paper) 4rem) no-repeat, var(--sb-paper);
}
.sb-nav {
    position: sticky; top: 0; z-index: 1030;
    background: rgba(20, 34, 49, 0.88);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    color: var(--sb-on-storm);
    padding: 0;
}
.sb-nav .container { min-height: 4rem; }
.sb-nav .navbar-brand { display: flex; align-items: center; gap: 0.5rem; color: #fff; font-weight: 750; font-stretch: 110%; letter-spacing: -0.02em; font-size: 1.125rem; }
.sb-nav .navbar-brand:hover { color: #fff; }
.sb-nav .navbar-brand img { width: 28px; height: 28px; }
.sb-nav .nav-link { color: var(--sb-on-storm-2); font-weight: 500; font-size: 0.9375rem; padding: 0.5rem 0.75rem !important; border-radius: 0.5rem; }
.sb-nav .nav-link:hover, .sb-nav .nav-link:focus, .sb-nav .nav-link.active, .sb-nav .nav-link[aria-current="page"] { color: #fff; background: rgba(255, 255, 255, 0.08); }
.sb-nav .btn-primary { --bs-btn-bg: var(--sb-amber); --bs-btn-border-color: var(--sb-amber); --bs-btn-color: var(--sb-ink); --bs-btn-hover-bg: #f09a4a; --bs-btn-hover-border-color: #f09a4a; --bs-btn-hover-color: var(--sb-ink); --bs-btn-active-bg: #f09a4a; --bs-btn-active-color: var(--sb-ink); }
.sb-nav .navbar-toggler { border-color: rgba(255, 255, 255, 0.25); padding: 0.375rem 0.625rem; }
.sb-nav .navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(224, 138, 58, 0.4); }
.sb-nav .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.85%29' stroke-linecap='round' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }
.sb-nav .dropdown-menu { margin-top: 0.5rem; }
.sb-nav .user-initials-circle { background: var(--sb-amber); color: var(--sb-ink); }
@media (max-width: 991.98px) {
    .sb-nav .navbar-collapse { padding: 0.5rem 0 1rem; }
    .sb-nav .navbar-nav .btn { margin: 0.5rem 0 0 !important; width: 100%; }
}
@media (prefers-reduced-transparency: reduce) {
    .sb-nav { background: var(--sb-storm); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ---------- Site footer ---------- */
.sb-footer { background: var(--sb-storm); color: var(--sb-on-storm-2); padding: 4rem 0 2.5rem; font-size: 0.9375rem; border: 0; }
.sb-footer h2 { color: #fff; font-family: var(--sb-font); font-stretch: 100%; font-size: 0.9375rem; font-weight: 650; letter-spacing: 0; text-transform: none; margin-bottom: 0.75rem; }
.sb-footer p { color: var(--sb-on-storm-2); }
.sb-footer a:not(.btn) { color: var(--sb-on-storm-2); text-decoration: none; display: inline-block; padding: 0.375rem 0; min-height: 0; }
.sb-footer a:not(.btn):hover { color: #fff; }
.sb-footer ul { list-style: none; padding: 0; margin: 0; }
.sb-footer .sb-foot-cta { display: grid; gap: 1.5rem; align-items: end; padding-bottom: 3rem; margin-bottom: 3rem; border-bottom: 1px solid var(--sb-storm-line); }
@media (min-width: 860px) { .sb-footer .sb-foot-cta { grid-template-columns: 1fr auto; } }
.sb-footer .sb-foot-cta h2 { font-stretch: 112%; font-weight: 780; font-size: clamp(1.75rem, 3.6vw, 2.75rem); letter-spacing: -0.03em; line-height: 1.04; margin: 0; }
.sb-footer .sb-foot-cta .btn-primary { --bs-btn-bg: var(--sb-amber); --bs-btn-border-color: var(--sb-amber); --bs-btn-color: var(--sb-ink); --bs-btn-hover-bg: #f09a4a; --bs-btn-hover-border-color: #f09a4a; --bs-btn-hover-color: var(--sb-ink); }
.sb-footer .sb-legal { margin-top: 3rem; font-size: 0.8125rem; color: #8b97a4; }

/* ---------- Page header band (storm) used by redesigned inner pages ---------- */
.sb-band { background: var(--sb-storm); color: var(--sb-on-storm); padding: 3rem 0 3.5rem; }
.sb-band h1, .sb-band .h1, .sb-band h2 { color: #fff; }
.sb-band p, .sb-band .lead { color: var(--sb-on-storm-2); }
.sb-band .breadcrumb a, .sb-band .breadcrumb-item, .sb-band .breadcrumb-item.active { color: var(--sb-on-storm-2); }
.sb-band .breadcrumb-item + .breadcrumb-item::before { color: rgba(255, 255, 255, 0.35); }
.sb-band .btn-primary { --bs-btn-bg: var(--sb-amber); --bs-btn-border-color: var(--sb-amber); --bs-btn-color: var(--sb-ink); --bs-btn-hover-bg: #f09a4a; --bs-btn-hover-border-color: #f09a4a; --bs-btn-hover-color: var(--sb-ink); }
.sb-band .btn-outline-secondary, .sb-band .btn-outline-light { --bs-btn-color: #fff; --bs-btn-border-color: rgba(255, 255, 255, 0.28); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: rgba(255, 255, 255, 0.06); --bs-btn-hover-border-color: rgba(255, 255, 255, 0.6); }
.sb-band-overlap { padding-bottom: 6rem; }
.sb-pull-up { margin-top: -4.5rem; position: relative; }

/* ---------- Account / app shell ---------- */
.sidebar { background: transparent; border-right: 1px solid var(--sb-line); min-height: calc(100vh - 4rem); padding-top: 1.5rem !important; }
.sidebar .nav-link {
    color: var(--sb-ink-2);
    font-weight: 500;
    font-size: 0.9375rem;
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    margin: 0 0.5rem 0.125rem;
    display: flex; align-items: center;
}
.sidebar .nav-link i { width: 1.25rem; color: var(--sb-ink-3); }
.sidebar .nav-link:hover { background: rgba(18, 26, 35, 0.04); color: var(--sb-ink); }
.sidebar .nav-link.active { background: var(--sb-surface); color: var(--sb-ink); font-weight: 650; box-shadow: inset 3px 0 0 var(--sb-amber), 0 1px 2px rgba(18, 26, 35, 0.06); }
.sidebar .nav-link.active i { color: var(--sb-link); }

/* Status dots used across reports */
.status-indicator { width: 0.5rem; height: 0.5rem; border-radius: 999px; display: inline-block; margin-right: 0.5rem; vertical-align: middle; }
.status-pass { background-color: var(--sb-pass); }
.status-fail { background-color: var(--sb-fail); }
.status-neutral { background-color: var(--sb-warn); }

/* ---------- Motion and accessibility preferences ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
    .btn:active { transform: none; }
}
@media (prefers-contrast: more) {
    :root { --sb-ink-2: var(--sb-ink); --sb-ink-3: var(--sb-ink-2); --sb-line: #8b95a1; }
}

/* =====================================================================
   Marketing components (homepage and marketing pages)
   ===================================================================== */
.sb-hero {
    padding-top: 3.5rem;
    background: linear-gradient(to bottom, var(--sb-storm) 0, var(--sb-storm) calc(100% - 10rem), var(--sb-paper) calc(100% - 10rem));
    color: var(--sb-on-storm);
}
@media (min-width: 992px) { .sb-hero { padding-top: 5rem; } }
.sb-hero h1 { color: #fff; max-width: 15ch; margin: 0; }
.sb-hero-row { display: grid; gap: 1.75rem; margin-top: 2rem; padding-bottom: 3rem; }
.sb-hero-row .sb-lead { color: var(--sb-on-storm-2); margin: 0; }
.sb-hero-row .sb-small { color: var(--sb-on-storm-2); margin: 0.875rem 0 0; }
.sb-ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; }
@media (min-width: 992px) {
    .sb-hero-row { grid-template-columns: minmax(0, 38rem) auto; justify-content: space-between; align-items: end; margin-top: 2.5rem; padding-bottom: 4rem; }
    .sb-hero-actions { text-align: right; }
    .sb-hero-actions .sb-ctas { justify-content: flex-end; }
}
.sb-on-storm .btn-primary, .sb-hero .btn-primary {
    --bs-btn-bg: var(--sb-amber); --bs-btn-border-color: var(--sb-amber); --bs-btn-color: var(--sb-ink);
    --bs-btn-hover-bg: #f09a4a; --bs-btn-hover-border-color: #f09a4a; --bs-btn-hover-color: var(--sb-ink);
    --bs-btn-active-bg: #f09a4a; --bs-btn-active-border-color: #f09a4a; --bs-btn-active-color: var(--sb-ink);
}
.sb-hero .btn-outline-light {
    --bs-btn-color: var(--sb-on-storm); --bs-btn-border-color: rgba(255, 255, 255, 0.28); --bs-btn-bg: transparent;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: rgba(255, 255, 255, 0.06); --bs-btn-hover-border-color: rgba(255, 255, 255, 0.6);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: rgba(255, 255, 255, 0.1);
}

/* Product window: the interactive sample report */
.sb-window { background: var(--sb-surface); color: var(--sb-ink); border-radius: var(--sb-radius-lg); box-shadow: var(--sb-shadow-lg); overflow: hidden; }
.sb-window-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 1rem; padding: 0.875rem 1.25rem; border-bottom: 1px solid var(--sb-line); background: var(--sb-surface-2); }
.sb-window-bar strong { font-weight: 650; font-size: 0.9375rem; }
.sb-window-bar span { font-size: 0.8125rem; color: var(--sb-ink-3); }
.sb-window-body { display: grid; }
.sb-pane { padding: 1.25rem; }
.sb-pane + .sb-pane { border-top: 1px solid var(--sb-line); }
@media (min-width: 720px) {
    .sb-window-body { grid-template-columns: 1fr 1fr; }
    .sb-pane-email { grid-column: 1; grid-row: 1; }
    .sb-pane-score { grid-column: 2; grid-row: 1; border-top: 0 !important; border-left: 1px solid var(--sb-line); }
    .sb-pane-problems { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
    .sb-window-body { grid-template-columns: 1.05fr 0.95fr 1.15fr; }
    .sb-pane { padding: 1.5rem; }
    .sb-pane-problems { grid-column: 3; grid-row: 1; border-top: 0 !important; border-left: 1px solid var(--sb-line); }
}
.sb-pane-title { font-family: var(--sb-font); font-stretch: 100%; font-size: 0.875rem; font-weight: 650; letter-spacing: 0; color: var(--sb-ink-2); margin: 0 0 1rem; display: flex; align-items: center; gap: 0.5rem; line-height: 1.3; }
.sb-count { display: inline-grid; place-items: center; min-width: 1.375rem; height: 1.375rem; padding: 0 0.375rem; border-radius: 999px; background: var(--sb-fail-tint); color: var(--sb-fail); font-size: 0.75rem; font-weight: 700; }
.sb-count.is-zero { background: var(--sb-pass-tint); color: var(--sb-pass); }
.sb-from { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.sb-avatar { width: 2.25rem; height: 2.25rem; border-radius: 999px; display: grid; place-items: center; background: var(--sb-amber-tint); color: var(--sb-link); font-weight: 700; flex: none; }
.sb-from strong { display: block; font-size: 0.9375rem; font-weight: 650; line-height: 1.3; }
.sb-from span { font-size: 0.8125rem; color: var(--sb-ink-3); }
.sb-field { display: block; margin-bottom: 1rem; }
.sb-field > span { display: block; font-size: 0.8125rem; font-weight: 600; color: var(--sb-ink-2); margin-bottom: 0.375rem; }
.sb-field input { font-weight: 600; }
.sb-field small { display: block; margin-top: 0.375rem; font-size: 0.8125rem; color: var(--sb-ink-3); }
.sb-mail-preview { border: 1px solid var(--sb-line); border-radius: 0.625rem; padding: 0.875rem; margin-bottom: 1rem; background: var(--sb-surface-2); }
.sb-mp-image {
    height: 4.5rem; border-radius: 0.375rem; margin-bottom: 0.75rem;
    background: linear-gradient(135deg, #f6dcc1, #fbefe2); display: grid; place-items: center; color: #a86a2c;
    transition: height 260ms cubic-bezier(0.3, 0.7, 0.4, 1);
}
.sb-mp-lines span { display: block; height: 0.5rem; border-radius: 999px; background: rgba(18, 26, 35, 0.12); margin-bottom: 0.5rem; }
.sb-mp-lines span:nth-child(2) { width: 88%; }
.sb-mp-lines span:nth-child(3) { width: 64%; margin-bottom: 0; }
.sb-mail-preview.is-image-only .sb-mp-image { height: 8.25rem; margin-bottom: 0; }
.sb-mail-preview.is-image-only .sb-mp-lines { display: none; }
.sb-opt { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; cursor: pointer; font-size: 0.9375rem; margin: 0; }
.sb-opt .form-check-input { width: 2.5rem; height: 1.375rem; margin: 0; flex: none; cursor: pointer; }
.sb-opt .form-check-input:checked { background-color: var(--sb-fail); border-color: var(--sb-fail); }

.sb-pane-score { text-align: center; }
.sb-pane-score .sb-pane-title { justify-content: center; }
.sb-dial { display: block; width: 100%; max-width: 17rem; margin: 0 auto; overflow: visible; }
.sb-dial-zone { fill: none; stroke-width: 13; }
.sb-dial-tick { stroke: var(--sb-ink-3); stroke-width: 1.5; }
.sb-dial-tick.major { stroke: var(--sb-ink-2); stroke-width: 2; }
.sb-dial-label { fill: var(--sb-ink-3); font: 600 12px var(--sb-font); }
.sb-dial-needle { fill: var(--sb-ink); }
.sb-dial-hub { fill: var(--sb-amber); }
.sb-dial-hub-ring { fill: var(--sb-surface); }
.sb-readout { margin-top: -0.5rem; font-variant-numeric: tabular-nums; }
.sb-readout .sb-score-value { font-stretch: 118%; font-weight: 800; font-size: 3.5rem; letter-spacing: -0.04em; line-height: 1; }
.sb-readout .sb-of { font-size: 1.125rem; font-weight: 500; color: var(--sb-ink-3); margin-left: 0.125rem; }
.sb-verdict { margin: 0.375rem 0 0; font-size: 1rem; color: var(--sb-ink-2); }
.sb-tone-pass { color: var(--sb-pass); } .sb-tone-warn { color: var(--sb-warn); } .sb-tone-fail { color: var(--sb-fail); }
.sb-chips { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.25rem; }
.sb-chip {
    display: inline-flex; align-items: center; gap: 0.4375rem; min-height: 2.25rem; padding: 0 0.875rem;
    border-radius: 999px; border: 1px solid transparent; cursor: pointer; font: 600 0.875rem/1 var(--sb-font);
    transition: background-color 150ms ease, color 150ms ease, transform 100ms ease-out;
}
.sb-chip:active { transform: scale(0.95); }
.sb-chip::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 999px; background: currentColor; }
.sb-chip.is-pass { background: var(--sb-pass-tint); color: var(--sb-pass); }
.sb-chip.is-fail { background: var(--sb-fail-tint); color: var(--sb-fail); }
.sb-chip-state { font-weight: 500; }
.sb-problems { display: grid; gap: 0.625rem; list-style: none; padding: 0; margin: 0; }
.sb-prob { --sb-prob-tone: var(--sb-warn); border: 1px solid var(--sb-line); border-radius: 0.625rem; padding: 0.75rem 0.875rem 0.75rem 1.75rem; background: var(--sb-surface); position: relative; }
.sb-prob.is-fail { --sb-prob-tone: var(--sb-fail); }
/* Severity dot, matching the auth chips */
.sb-prob::before { content: ""; position: absolute; left: 0.875rem; top: 1.1rem; width: 0.5rem; height: 0.5rem; border-radius: 999px; background: var(--sb-prob-tone); }
.sb-prob.is-new { animation: sb-prob-in 220ms cubic-bezier(0.3, 0.7, 0.4, 1); }
@keyframes sb-prob-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.sb-prob-head { display: flex; justify-content: space-between; gap: 0.75rem; align-items: baseline; }
.sb-prob-title { font-weight: 650; font-size: 0.9375rem; line-height: 1.35; }
.sb-pts { font-weight: 700; font-size: 0.875rem; font-variant-numeric: tabular-nums; color: var(--sb-fail); white-space: nowrap; }
.sb-prob-fix { margin: 0.25rem 0 0; font-size: 0.875rem; line-height: 1.5; color: var(--sb-ink-2); }
.sb-prob-fix code { font-size: 0.8125rem; overflow-wrap: anywhere; }
.sb-prob-rule { display: block; margin-top: 0.375rem; font-size: 0.75rem; color: var(--sb-ink-3); border: 0; background: none; padding: 0; }
.sb-empty { padding: 1.5rem 1rem; text-align: center; border: 1px dashed var(--sb-line); border-radius: 0.625rem; color: var(--sb-ink-2); font-size: 0.9375rem; }
.sb-empty strong { display: block; color: var(--sb-pass); font-size: 1rem; margin-bottom: 0.25rem; }
.sb-window-foot { padding: 0.75rem 1.25rem; border-top: 1px solid var(--sb-line); font-size: 0.8125rem; color: var(--sb-ink-3); background: var(--sb-surface-2); margin: 0; }

/* Sections */
.sb-section { padding: 5rem 0; }
@media (min-width: 992px) { .sb-section { padding: 7rem 0; } }
.sb-section-tight { padding-top: 0; }
.sb-section-head { display: grid; gap: 1rem; margin-bottom: 3rem; }
.sb-section-head > * { margin: 0; }
@media (min-width: 992px) { .sb-section-head { grid-template-columns: 1fr 1fr; align-items: end; gap: 4rem; } }

.sb-steps { display: grid; gap: 2.5rem; counter-reset: sb-step; list-style: none; padding: 0; margin: 0; }
@media (min-width: 860px) { .sb-steps { grid-template-columns: repeat(3, 1fr); gap: 3rem; } }
.sb-step { counter-increment: sb-step; border-top: 2px solid var(--sb-ink); padding-top: 1.25rem; }
.sb-step::before { content: counter(sb-step); display: block; margin-bottom: 1rem; font-stretch: 118%; font-weight: 800; font-size: 3.5rem; line-height: 0.9; letter-spacing: -0.04em; color: var(--sb-amber); }
.sb-step h3 { font-stretch: 100%; font-weight: 650; font-size: 1.25rem; letter-spacing: -0.012em; line-height: 1.25; margin-bottom: 0.5rem; }
.sb-step p { color: var(--sb-ink-2); margin: 0; }
.sb-addr { display: inline-block; margin-top: 1rem; padding: 0.5rem 0.75rem; border-radius: 0.5rem; background: var(--sb-surface); border: 1px solid var(--sb-line); font-family: var(--sb-mono); font-size: 0.8125rem; overflow-wrap: anywhere; }

.sb-feature { display: grid; gap: 2rem; align-items: center; padding: 3rem 0; }
.sb-feature + .sb-feature { border-top: 1px solid var(--sb-line); }
@media (min-width: 992px) {
    .sb-feature { grid-template-columns: 1fr 1.2fr; gap: 5rem; padding: 4rem 0; }
    .sb-feature.is-flipped .sb-feature-copy { order: 2; }
}
.sb-feature-copy h3 { font-stretch: 108%; font-weight: 750; font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.1; letter-spacing: -0.025em; margin-bottom: 1rem; }
.sb-feature-copy p { color: var(--sb-ink-2); }
.sb-tag { display: inline-block; vertical-align: middle; margin-left: 0.5rem; font: 650 0.75rem/1 var(--sb-font); letter-spacing: 0; padding: 0.3125rem 0.5rem; border-radius: 999px; background: var(--sb-amber-tint); color: var(--sb-link); }
.sb-artefact { background: var(--sb-surface); border-radius: 0.875rem; box-shadow: var(--sb-shadow-sm); border: 1px solid var(--sb-line); overflow: hidden; margin: 0; }
.sb-artefact pre { margin: 0; padding: 1.25rem; overflow-x: auto; background: var(--sb-storm); color: #d6dee6; font: 400 0.8125rem/1.7 var(--sb-mono); white-space: pre; }
.sb-artefact pre .k { color: #8fb3d9; } .sb-artefact pre .ok { color: #7fd4a0; } .sb-artefact pre .bad { color: #ff8f84; }
.sb-artefact figcaption { padding: 1.125rem 1.25rem; font-size: 0.9375rem; color: var(--sb-ink-2); }
.sb-artefact figcaption strong { color: var(--sb-ink); }
.sb-rules { width: 100%; border-collapse: collapse; font-size: 0.875rem; margin: 0; }
.sb-rules th { text-align: left; font-weight: 600; color: var(--sb-ink-3); padding: 0.75rem 1.25rem; border-bottom: 1px solid var(--sb-line); font-size: 0.8125rem; }
.sb-rules td { padding: 0.75rem 1.25rem; border-bottom: 1px solid var(--sb-line); vertical-align: top; color: var(--sb-ink-2); }
.sb-rules tr:last-child td { border-bottom: 0; }
.sb-rules td:first-child { font-family: var(--sb-mono); font-size: 0.8125rem; color: var(--sb-ink); white-space: nowrap; }
.sb-rules .num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 650; white-space: nowrap; }
.sb-rules .plus { color: var(--sb-fail); } .sb-rules .minus { color: var(--sb-pass); }
@media (max-width: 560px) { .sb-rules th:nth-child(2), .sb-rules td:nth-child(2) { display: none; } }
.sb-rewrite { padding: 1.25rem; display: grid; gap: 0.75rem; }
.sb-rewrite > div { border-radius: 0.625rem; padding: 0.875rem 1rem; }
.sb-rewrite .before { background: var(--sb-fail-tint); }
.sb-rewrite .after { background: var(--sb-pass-tint); }
.sb-rewrite small { display: block; font-size: 0.8125rem; font-weight: 650; margin-bottom: 0.25rem; }
.sb-rewrite .before small { color: var(--sb-fail); } .sb-rewrite .after small { color: var(--sb-pass); }
.sb-rewrite p { font-weight: 600; margin: 0; }
.sb-rewrite .why { padding: 0 0.25rem; font-size: 0.875rem; color: var(--sb-ink-2); font-weight: 400; }

.sb-plans { display: grid; gap: 1.25rem; }
@media (min-width: 860px) { .sb-plans { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.5rem; } }
.sb-plan { background: var(--sb-surface); border: 1px solid var(--sb-line); border-radius: 1rem; padding: 2rem; display: flex; flex-direction: column; }
.sb-plan.is-featured { border: 2px solid var(--sb-amber); }
.sb-plan h3 { font-stretch: 100%; font-size: 1.125rem; font-weight: 650; letter-spacing: 0; margin: 0; }
.sb-plan .sb-plan-note { color: var(--sb-ink-3); font-size: 0.875rem; margin: 0.25rem 0 0; }
.sb-price { margin: 0.75rem 0 1.5rem; font-stretch: 115%; font-weight: 800; font-size: 3rem; letter-spacing: -0.04em; line-height: 1; }
.sb-price small { font-stretch: 100%; font-size: 1rem; font-weight: 500; color: var(--sb-ink-3); letter-spacing: 0; }
.sb-plan ul { display: grid; gap: 0.625rem; margin: 0 0 2rem; padding: 0; list-style: none; flex: 1; }
.sb-plan li { display: flex; gap: 0.625rem; color: var(--sb-ink-2); }
.sb-plan li::before { content: ""; flex: none; width: 1.125rem; height: 1.125rem; margin-top: 0.25rem; border-radius: 999px; background: var(--sb-pass-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%231f8a4c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/0.875rem no-repeat; }
.sb-plan .btn { align-self: flex-start; }

.sb-guides { border-top: 1px solid var(--sb-line); }
.sb-guide { display: grid; gap: 0.25rem 2rem; padding: 1.5rem 0; border-bottom: 1px solid var(--sb-line); text-decoration: none; color: inherit; }
@media (min-width: 860px) { .sb-guide { grid-template-columns: 1fr 1.3fr auto; align-items: baseline; } }
.sb-guide h3 { font-stretch: 100%; font-weight: 650; font-size: 1.25rem; letter-spacing: -0.012em; margin: 0; transition: color 150ms ease; }
.sb-guide p { color: var(--sb-ink-2); margin: 0; }
.sb-guide .sb-go { font-weight: 600; font-size: 0.9375rem; color: var(--sb-link); white-space: nowrap; }
.sb-guide:hover { color: inherit; }
.sb-guide:hover h3 { color: var(--sb-link); }

.sb-explainer { display: grid; gap: 1.5rem; }
@media (min-width: 992px) { .sb-explainer { grid-template-columns: 1fr 1.3fr; gap: 5rem; } }
.sb-explainer p { color: var(--sb-ink-2); }

.sb-recent { background: var(--sb-surface); border: 1px solid var(--sb-line); border-radius: var(--sb-radius); overflow: hidden; }
.sb-opt.form-switch { padding-left: 0; }
.sb-opt.form-switch .form-check-input { margin-left: 0; float: none; width: 2.5rem; height: 1.375rem; }
.sb-nav, .sb-nav.navbar { border-bottom: 0; }

/* =====================================================================
   Test page
   ===================================================================== */
.sb-test-hero { padding-top: 2.5rem; color: var(--sb-on-storm); background: linear-gradient(to bottom, var(--sb-storm) 0, var(--sb-storm) calc(100% - 5rem), var(--sb-paper) calc(100% - 5rem)); }
@media (min-width: 992px) { .sb-test-hero { padding-top: 3.5rem; } }
.sb-stepper { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; margin: 0 0 1.75rem; padding: 0; list-style: none; font-size: 0.9375rem; }
.sb-stepper li { display: flex; align-items: center; gap: 0.5rem; color: var(--sb-on-storm-2); }
.sb-step-n { display: grid; place-items: center; width: 1.625rem; height: 1.625rem; border-radius: 999px; border: 1.5px solid rgba(255, 255, 255, 0.3); font-size: 0.8125rem; font-weight: 700; transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease; }
.sb-stepper .is-current { color: #fff; font-weight: 600; }
.sb-stepper .is-current .sb-step-n { border-color: var(--sb-amber); color: var(--sb-amber); }
.sb-stepper .is-done .sb-step-n { background: var(--sb-amber); border-color: var(--sb-amber); color: var(--sb-ink); }
.sb-test-title { color: #fff; margin: 0 0 2rem; max-width: 18ch; font-size: clamp(2.25rem, 5.4vw, 4.25rem); line-height: 0.98; }
.sb-address-card { background: var(--sb-surface); color: var(--sb-ink); border-radius: var(--sb-radius-lg); box-shadow: var(--sb-shadow-lg); padding: 1.5rem; display: grid; gap: 1.25rem; }
@media (min-width: 860px) { .sb-address-card { padding: 2rem 2.25rem; grid-template-columns: 1fr auto; align-items: center; gap: 2rem; } }
.sb-address { font-family: var(--sb-mono); font-weight: 500; font-size: clamp(1.125rem, 2.6vw, 1.875rem); line-height: 1.35; letter-spacing: -0.01em; user-select: all; margin: 0; }
/* Grouping the hash in fours makes it scannable; spacing is visual only, so copying stays exact */
.sb-address .g { display: inline-block; margin-right: 0.28em; }
.sb-address .d { display: inline-block; white-space: nowrap; color: var(--sb-ink-3); }
.sb-address-meta { display: flex; flex-wrap: wrap; gap: 0.375rem 1.25rem; margin: 0.75rem 0 0; font-size: 0.875rem; color: var(--sb-ink-3); }
.sb-address-meta > span { display: inline-flex; align-items: center; gap: 0.375rem; }
.sb-copy { min-width: 10rem; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; }
.sb-copy.is-copied { --bs-btn-bg: var(--sb-pass); --bs-btn-border-color: var(--sb-pass); --bs-btn-hover-bg: var(--sb-pass); --bs-btn-hover-border-color: var(--sb-pass); --bs-btn-color: #fff; --bs-btn-hover-color: #fff; }

.sb-test-below { padding: 3rem 0 6rem; }
.sb-test-grid { display: grid; gap: 2.5rem; }
@media (min-width: 992px) { .sb-test-grid { grid-template-columns: 1.6fr 1fr; gap: 4rem; align-items: start; } }
.sb-status { background: var(--sb-surface); border: 1px solid var(--sb-line); border-radius: 1rem; min-height: 20rem; overflow: hidden; }
.sb-state { padding: 2rem; animation: sb-fade 240ms ease; }
.sb-state[hidden] { display: none; }
@keyframes sb-fade { from { opacity: 0; } to { opacity: 1; } }
.sb-waiting { display: grid; place-items: center; text-align: center; min-height: 20rem; }
.sb-waiting h2, .sb-state-title { font-stretch: 110%; font-weight: 750; font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: -0.025em; line-height: 1.1; margin: 0 0 0.625rem; }
.sb-waiting p { max-width: 26rem; margin: 0 auto; }
.sb-pulse { position: relative; width: 1rem; height: 1rem; margin: 0 auto 1.5rem; }
.sb-pulse::before, .sb-pulse::after { content: ""; position: absolute; inset: 0; border-radius: 999px; background: var(--sb-amber); }
.sb-pulse::after { animation: sb-ring 1.8s cubic-bezier(0.2, 0.6, 0.4, 1) infinite; }
@keyframes sb-ring { from { transform: scale(1); opacity: 0.6; } to { transform: scale(3.2); opacity: 0; } }
.sb-checks { display: grid; gap: 0.25rem; list-style: none; padding: 0; margin: 1.25rem 0 0; }
.sb-check-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0; font-size: 0.9375rem; color: var(--sb-ink-3); }
.sb-check-row .ic { width: 1.375rem; height: 1.375rem; flex: none; border-radius: 999px; border: 1.5px solid var(--sb-line); display: grid; place-items: center; transition: background-color 150ms ease, border-color 150ms ease; }
.sb-check-row.is-running { color: var(--sb-ink); }
.sb-check-row.is-running .ic { border-color: var(--sb-amber); border-top-color: transparent; animation: sb-spin 700ms linear infinite; }
@keyframes sb-spin { to { transform: rotate(360deg); } }
.sb-check-row.is-done { color: var(--sb-ink); }
.sb-check-row.is-done .ic { background: var(--sb-pass) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/0.75rem no-repeat; border-color: var(--sb-pass); }
.sb-ready { text-align: center; padding: 3rem 0; }

.sb-tips h2 { font-family: var(--sb-font); font-stretch: 100%; font-size: 1.125rem; font-weight: 700; letter-spacing: -0.012em; margin-bottom: 1rem; }
.sb-tips ol { counter-reset: sb-tip; display: grid; gap: 1rem; list-style: none; padding: 0; margin: 0; }
.sb-tips li { counter-increment: sb-tip; display: grid; grid-template-columns: 1.75rem 1fr; gap: 0.5rem; color: var(--sb-ink-2); }
.sb-tips li::before { content: counter(sb-tip); font-stretch: 115%; font-weight: 800; color: var(--sb-amber); font-size: 1.125rem; line-height: 1.45; }
.sb-tips li strong { color: var(--sb-ink); font-weight: 650; }
.sb-allowance { margin-top: 2rem; padding: 1.25rem; border-radius: 0.875rem; background: var(--sb-surface); border: 1px solid var(--sb-line); }
.sb-allowance p { font-size: 0.9375rem; color: var(--sb-ink-2); margin: 0; }
.sb-allowance strong { color: var(--sb-ink); }
.sb-meter { display: flex; gap: 0.375rem; margin: 0.75rem 0; }
.sb-meter i { flex: 1; height: 0.5rem; border-radius: 999px; background: var(--sb-line); }
.sb-meter i.used { background: var(--sb-amber); }

/* Segmented control (currency, filters) */
.sb-segmented { display: inline-flex; gap: 0.25rem; padding: 0.25rem; border-radius: 999px; background: var(--sb-surface); border: 1px solid var(--sb-line); }
.sb-segmented a, .sb-segmented button { padding: 0.375rem 0.875rem; border-radius: 999px; font-size: 0.875rem; font-weight: 600; color: var(--sb-ink-2); text-decoration: none; border: 0; background: none; }
.sb-segmented a:hover, .sb-segmented button:hover { color: var(--sb-ink); }
.sb-segmented .is-active { background: var(--sb-storm); color: #fff; }
.sb-yes { color: var(--sb-pass); font-weight: 600; }
.sb-no { color: var(--sb-ink-3); }

/* =====================================================================
   Report (test results)
   ===================================================================== */
.sb-panel { background: var(--sb-surface); border: 1px solid var(--sb-line); border-radius: var(--sb-radius); overflow: hidden; }
.sb-panel .table > :not(caption) > * > * { padding-left: 1.25rem; padding-right: 1.25rem; }
.sb-panel .table tbody tr:last-child td { border-bottom: 0; }
.sb-report-band { padding-top: 2.25rem; }
.sb-report-kicker { color: var(--sb-on-storm-2); font-size: 0.9375rem; }
.sb-report-subject { color: #fff; font-size: clamp(1.75rem, 3.6vw, 2.75rem); max-width: 28ch; overflow-wrap: anywhere; }
.sb-report-from { color: var(--sb-on-storm-2); }
.sb-report-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.5rem; }
.sb-band .btn-outline-light { --bs-btn-color: #fff; --bs-btn-border-color: rgba(255, 255, 255, 0.28); --bs-btn-bg: transparent; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: rgba(255, 255, 255, 0.06); --bs-btn-hover-border-color: rgba(255, 255, 255, 0.6); --bs-btn-active-color: #fff; --bs-btn-active-bg: rgba(255, 255, 255, 0.1); }

.sb-summary { display: grid; box-shadow: var(--sb-shadow-lg); border: 0; border-radius: var(--sb-radius-lg); }
.sb-summary-score { padding: 1.75rem; text-align: center; }
.sb-summary-fixes { padding: 1.75rem; border-top: 1px solid var(--sb-line); }
@media (min-width: 992px) {
    .sb-summary { grid-template-columns: 0.9fr 1.1fr; }
    .sb-summary-fixes { border-top: 0; border-left: 1px solid var(--sb-line); }
}
.sb-summary .sb-dial { max-width: 16rem; }
.sb-chip.is-warn { background: var(--sb-warn-tint); color: var(--sb-warn); }
a.sb-chip { text-decoration: none; }
.sb-prob-title { color: var(--sb-ink); text-decoration: none; }
a.sb-prob-title:hover { color: var(--sb-link); text-decoration: underline; }

.sb-categories { display: grid; gap: 1rem 2rem; margin: 2rem 0 0; }
@media (min-width: 768px) { .sb-categories { grid-template-columns: repeat(3, 1fr); } }
.sb-cat { font-size: 0.9375rem; color: var(--sb-ink-2); }
.sb-cat strong { font-size: 1.125rem; font-variant-numeric: tabular-nums; }
.sb-bar { height: 0.5rem; border-radius: 999px; background: #e6eaee; margin-top: 0.5rem; overflow: hidden; }
.sb-bar i { display: block; height: 100%; border-radius: inherit; }
.sb-bar .is-pass { background: var(--sb-pass); } .sb-bar .is-warn { background: var(--sb-amber); } .sb-bar .is-fail { background: var(--sb-fail); }

.sb-report-nav { position: sticky; top: 4.5rem; z-index: 5; display: flex; gap: 0.25rem; overflow-x: auto; margin: 2.5rem 0 0; padding: 0.375rem; background: rgba(244, 246, 248, 0.9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid var(--sb-line); border-radius: 999px; scrollbar-width: none; }
.sb-report-nav a { flex: none; padding: 0.375rem 0.875rem; border-radius: 999px; font-size: 0.875rem; font-weight: 600; color: var(--sb-ink-2); text-decoration: none; }
.sb-report-nav a:hover { background: var(--sb-surface); color: var(--sb-ink); }
.sb-report-section { padding-top: 3.5rem; scroll-margin-top: 8rem; }
.sb-section-title { font-stretch: 110%; font-weight: 750; font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: -0.025em; line-height: 1.1; margin-bottom: 0.75rem; }
.sb-sub-title { font-family: var(--sb-font); font-stretch: 100%; font-size: 1.0625rem; font-weight: 650; letter-spacing: -0.01em; margin: 1.75rem 0 0.75rem; }
.sb-code-block { display: block; white-space: pre-wrap; overflow-wrap: anywhere; padding: 0.5rem 0.625rem; font-size: 0.8125rem; }
.sb-ink-3 { color: var(--sb-ink-3); }
.sb-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1px; background: var(--sb-line); border: 1px solid var(--sb-line); border-radius: var(--sb-radius); overflow: hidden; margin-top: 1rem; }
.sb-facts > div { background: var(--sb-surface); padding: 1rem 1.25rem; }
.sb-facts span { display: block; font-size: 0.8125rem; color: var(--sb-ink-3); margin-bottom: 0.25rem; }
.sb-facts strong { font-weight: 650; }
.sb-list { padding-left: 1.125rem; margin: 0 0 1rem; }
.sb-list li { margin-bottom: 0.5rem; color: var(--sb-ink-2); }
.sb-email-frame { display: block; width: 100%; height: 70vh; border: 0; background: #fff; }
.sb-email-text { margin: 0; padding: 1.25rem; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.875rem; max-height: 70vh; }

@media print {
    .sb-nav, .sb-footer, .sb-no-print, .modal { display: none !important; }
    body { background: #fff !important; }
    .sb-band { background: #fff !important; color: var(--sb-ink) !important; padding: 0 0 1rem !important; }
    .sb-band h1, .sb-band p, .sb-report-kicker, .sb-report-from { color: var(--sb-ink) !important; }
    .sb-pull-up { margin-top: 0 !important; }
    .sb-summary { box-shadow: none !important; border: 1px solid var(--sb-line) !important; }
    .sb-report-section { break-inside: avoid-page; padding-top: 1.5rem; }
    a { color: inherit !important; text-decoration: none !important; }
}

/* =====================================================================
   App shell (account pages)
   ===================================================================== */
.sb-app-nav { padding-top: 0.5rem; }
.sb-app-nav .nav { gap: 0.125rem; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.sb-app-nav .nav-link { display: flex; align-items: center; gap: 0.625rem; white-space: nowrap; color: var(--sb-ink-2); font-weight: 500; font-size: 0.9375rem; border-radius: 0.5rem; padding: 0.5rem 0.75rem; }
.sb-app-nav .nav-link i { width: 1rem; text-align: center; color: var(--sb-ink-3); font-size: 0.875rem; }
.sb-app-nav .nav-link:hover { background: rgba(18, 26, 35, 0.045); color: var(--sb-ink); }
.sb-app-nav .nav-link.active { background: var(--sb-surface); color: var(--sb-ink); font-weight: 650; box-shadow: inset 3px 0 0 var(--sb-amber), 0 1px 2px rgba(18, 26, 35, 0.06); }
.sb-app-nav .nav-link.active i { color: var(--sb-link); }
@media (min-width: 768px) {
    .sb-app-nav { position: sticky; top: 5rem; align-self: flex-start; border-right: 1px solid var(--sb-line); min-height: calc(100vh - 8rem); padding-right: 1rem; }
}
@media (max-width: 767.98px) {
    .sb-app-nav { margin-bottom: 1.5rem; border-bottom: 1px solid var(--sb-line); padding-bottom: 0.5rem; }
    .sb-app-nav .nav-link.active { box-shadow: inset 0 -2px 0 var(--sb-amber); }
}
/* Page titles inside the app are working headings, not marketing headlines */
.sb-app-nav + [class*="col-"] h1, .sb-app-title { font-size: clamp(1.75rem, 3vw, 2.25rem); letter-spacing: -0.025em; margin: 0; }
.sb-app-nav + [class*="col-"] > .d-flex:first-child { border-bottom: 0 !important; margin-bottom: 1.5rem !important; }
.sb-app-nav + [class*="col-"] .card { box-shadow: none !important; border: 1px solid var(--sb-line) !important; }
.sb-app-nav + [class*="col-"] .card:hover { transform: none; }

.sb-stats { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); margin-bottom: 1.5rem; }
.sb-stat { background: var(--sb-surface); border: 1px solid var(--sb-line); border-radius: var(--sb-radius); padding: 1.25rem; }
.sb-stat > span { display: block; font-size: 0.875rem; color: var(--sb-ink-3); margin-bottom: 0.5rem; }
.sb-stat strong { display: block; font-stretch: 112%; font-weight: 780; font-size: 2.25rem; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.sb-stat strong small { font-stretch: 100%; font-size: 1rem; font-weight: 500; color: var(--sb-ink-3); letter-spacing: 0; }
.sb-stat p { margin: 0.5rem 0 0; font-size: 0.875rem; color: var(--sb-ink-2); }
.sb-chart { display: flex; align-items: flex-end; gap: 0.5rem; height: 11rem; padding-top: 1.5rem; border-bottom: 1px solid var(--sb-line); }
.sb-chart-bar { flex: 1; max-width: 3rem; height: var(--h); min-height: 0.5rem; border-radius: 0.375rem 0.375rem 0 0; position: relative; text-decoration: none; transition: filter 150ms ease; }
.sb-chart-bar.is-pass { background: var(--sb-pass); } .sb-chart-bar.is-warn { background: var(--sb-amber); } .sb-chart-bar.is-fail { background: var(--sb-fail); }
.sb-chart-bar:hover { filter: brightness(1.1); }
.sb-chart-bar span { position: absolute; top: -1.375rem; left: 50%; transform: translateX(-50%); font-size: 0.75rem; font-weight: 650; color: var(--sb-ink-2); font-variant-numeric: tabular-nums; }
.sb-why { display: grid; gap: 2rem 3rem; }
@media (min-width: 768px) { .sb-why { grid-template-columns: repeat(3, 1fr); } }
.sb-why h3 { margin-bottom: 0.5rem; }
.sb-feature-copy h2 { font-stretch: 108%; font-weight: 750; font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.1; letter-spacing: -0.025em; margin-bottom: 1rem; }
.sb-facts.sb-artefact { margin: 0; }
.sb-facts.sb-artefact { grid-template-columns: 1fr 1fr; }

/* =====================================================================
   Guides
   ===================================================================== */
.sb-search { display: flex; gap: 0.5rem; max-width: 40rem; }
.sb-search .form-control { border-color: transparent; }
.sb-topics { display: flex; flex-wrap: wrap; gap: 0.375rem 0.75rem; font-size: 0.875rem; color: var(--sb-on-storm-2); }
.sb-topics a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.3); }
.sb-topics a:hover { border-color: #fff; color: #fff; }
.sb-topic { padding: 3rem 0 1rem; border-top: 1px solid var(--sb-line); scroll-margin-top: 5rem; }
.sb-topic-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem 2rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.sb-topic-head h2 { font-stretch: 110%; font-weight: 750; font-size: clamp(1.375rem, 2.4vw, 1.75rem); letter-spacing: -0.02em; margin: 0 0 0.375rem; }
.sb-guide-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.5rem 3rem; }
@media (min-width: 768px) { .sb-guide-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .sb-guide-list { grid-template-columns: repeat(3, 1fr); } }
.sb-guide-list a { font-weight: 650; font-size: 1.0625rem; color: var(--sb-ink); text-decoration: none; line-height: 1.3; }
.sb-guide-list a:hover { color: var(--sb-link); text-decoration: underline; }
.sb-guide-list p { margin: 0.375rem 0 0; color: var(--sb-ink-2); font-size: 0.9375rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Guide article */
.sb-article-title { color: #fff; max-width: 24ch; font-size: clamp(2rem, 4.4vw, 3.25rem); }
.sb-article-meta { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; color: var(--sb-on-storm-2); font-size: 0.9375rem; }
.sb-article-grid { display: grid; gap: 2rem; }
@media (min-width: 1100px) {
    .sb-article-grid { grid-template-columns: 15rem minmax(0, 46rem); gap: 4rem; justify-content: center; }
    .sb-toc { position: sticky; top: 6rem; align-self: start; max-height: calc(100vh - 8rem); overflow-y: auto; }
}
@media (max-width: 1099.98px) { .sb-toc { display: none; } }
.sb-toc-title { font-size: 0.8125rem; font-weight: 650; color: var(--sb-ink-3); margin-bottom: 0.5rem; }
.sb-toc ol { list-style: none; padding: 0; margin: 0; border-left: 1px solid var(--sb-line); }
.sb-toc a { display: block; padding: 0.3125rem 0 0.3125rem 0.875rem; margin-left: -1px; border-left: 2px solid transparent; font-size: 0.875rem; line-height: 1.4; color: var(--sb-ink-2); text-decoration: none; }
.sb-toc a:hover { color: var(--sb-ink); }
.sb-toc a.is-current { color: var(--sb-ink); border-left-color: var(--sb-amber); font-weight: 600; }

/* Long-form reading: ~68 characters a line, generous leading, real code blocks */
.sb-prose { font-size: 1.0625rem; line-height: 1.7; color: #26303b; max-width: 46rem; }
.sb-prose > * + * { margin-top: 1.1em; }
.sb-prose h2 { font-stretch: 108%; font-weight: 750; font-size: 1.75rem; letter-spacing: -0.022em; line-height: 1.15; margin-top: 2.25em; margin-bottom: 0.5em; scroll-margin-top: 6rem; color: var(--sb-ink); }
.sb-prose h3 { font-stretch: 100%; font-weight: 700; font-size: 1.25rem; letter-spacing: -0.012em; margin-top: 1.75em; margin-bottom: 0.25em; color: var(--sb-ink); }
.sb-prose h4 { font-size: 1.0625rem; font-weight: 700; margin-top: 1.5em; }
.sb-prose p, .sb-prose li { color: #26303b; }
.sb-prose ul, .sb-prose ol { padding-left: 1.25rem; }
.sb-prose li + li { margin-top: 0.375em; }
.sb-prose li::marker { color: var(--sb-ink-3); }
.sb-prose a { color: var(--sb-link); text-decoration: underline; text-decoration-thickness: 1px; }
.sb-prose strong { color: var(--sb-ink); }
.sb-prose code { font-size: 0.875em; }
.sb-prose pre { background: var(--sb-storm); color: #d6dee6; border-radius: 0.75rem; padding: 1rem 1.25rem; overflow-x: auto; font-size: 0.875rem; line-height: 1.65; }
.sb-prose pre code { color: inherit; background: none; border: 0; padding: 0; font-size: inherit; }
.sb-prose blockquote { border-left: 3px solid var(--sb-amber); padding: 0.25rem 0 0.25rem 1.25rem; color: var(--sb-ink-2); font-style: normal; }
.sb-prose img { max-width: 100%; height: auto; border-radius: 0.75rem; border: 1px solid var(--sb-line); background: #fff; }
/* Long URLs and keys in stored guide text would otherwise push the page sideways */
.sb-prose { overflow-wrap: break-word; }
/* Guide diagrams (drawn by scripts/guide-diagrams) */
.sb-prose .sb-figure { margin: 2.25rem 0; }
.sb-prose .sb-figure picture { display: block; }
.sb-prose .sb-figure img { display: block; width: 100%; }
.sb-prose .sb-figure figcaption { margin-top: 0.625rem; color: var(--sb-ink-2); font-size: 0.9375rem; line-height: 1.45; }
.sb-prose table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; display: block; overflow-x: auto; }
.sb-prose th, .sb-prose td { border-bottom: 1px solid var(--sb-line); padding: 0.625rem 0.75rem; text-align: left; vertical-align: top; }
.sb-prose th { color: var(--sb-ink-3); font-weight: 600; font-size: 0.8125rem; }
.sb-prose .badge, .sb-prose .tag { font-size: 0.75rem; }
.sb-inline-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-top: 3rem !important; padding: 1.5rem; border-radius: var(--sb-radius); background: var(--sb-storm); color: var(--sb-on-storm-2); }
.sb-inline-cta strong { display: block; color: #fff; font-size: 1.125rem; }
.sb-inline-cta .btn-primary { --bs-btn-bg: var(--sb-amber); --bs-btn-border-color: var(--sb-amber); --bs-btn-color: var(--sb-ink); --bs-btn-hover-bg: #f09a4a; --bs-btn-hover-border-color: #f09a4a; --bs-btn-hover-color: var(--sb-ink); }
.sb-feedback { margin-top: 1.5rem !important; padding: 1.25rem 1.5rem; border: 1px solid var(--sb-line); border-radius: var(--sb-radius); background: var(--sb-surface); font-size: 1rem; }
.sb-feedback .btn.active { background: var(--sb-storm); border-color: var(--sb-storm); color: #fff; }
.sb-article-grid { grid-template-columns: minmax(0, 1fr); }
.sb-article-grid > * { min-width: 0; }
@media (min-width: 1100px) { .sb-article-grid { grid-template-columns: 15rem minmax(0, 46rem); } }
.sb-prose svg, .sb-prose video, .sb-prose iframe { max-width: 100%; height: auto; }
.sb-prose img { max-width: 100% !important; height: auto !important; } /* stored content carries inline fixed widths */
.sb-prose :not(pre) > code { overflow-wrap: anywhere; word-break: break-word; }
.sb-guide-list-wide { grid-template-columns: minmax(0, 1fr) !important; max-width: 46rem; gap: 1.75rem; } .sb-guide-list-wide .sb-small { display: block; margin-top: 0.375rem; }

/* FAQ disclosure list */
.sb-faq { border-top: 1px solid var(--sb-line); }
.sb-faq details { border-bottom: 1px solid var(--sb-line); }
.sb-faq summary { list-style: none; cursor: pointer; padding: 1rem 2.25rem 1rem 0; position: relative; font-weight: 650; font-size: 1.0625rem; color: var(--sb-ink); }
.sb-faq summary::-webkit-details-marker { display: none; }
.sb-faq summary::after { content: ""; position: absolute; right: 0.25rem; top: 50%; width: 0.625rem; height: 0.625rem; border-right: 2px solid var(--sb-ink-3); border-bottom: 2px solid var(--sb-ink-3); transform: translateY(-70%) rotate(45deg); transition: transform 180ms ease; }
.sb-faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.sb-faq summary:hover { color: var(--sb-link); }
.sb-faq .sb-prose { padding: 0 0 1.25rem; font-size: 1rem; }

/* =====================================================================
   Sign-in pages
   ===================================================================== */
.sb-auth { display: grid; min-height: calc(100vh - 4rem); }
@media (min-width: 992px) { .sb-auth { grid-template-columns: 1fr 1fr; } }
.sb-auth-aside { display: none; background: var(--sb-storm); color: var(--sb-on-storm-2); padding: 4rem; align-items: center; }
@media (min-width: 992px) { .sb-auth-aside { display: flex; } }
.sb-auth-aside > div { max-width: 30rem; margin-left: auto; }
.sb-auth-kicker { color: var(--sb-amber); font-weight: 650; margin-bottom: 1rem; }
.sb-auth-aside h2 { color: #fff; font-stretch: 115%; font-weight: 800; font-size: clamp(2rem, 3.2vw, 2.75rem); line-height: 1.02; letter-spacing: -0.03em; margin-bottom: 2rem; }
.sb-auth-aside ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.875rem; }
.sb-auth-aside li { display: flex; gap: 0.75rem; }
.sb-auth-aside li::before { content: ""; flex: none; width: 1.125rem; height: 1.125rem; margin-top: 0.25rem; border-radius: 999px; background: rgba(224, 138, 58, 0.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23e08a3a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/0.875rem no-repeat; }
.sb-auth-main { display: flex; align-items: center; justify-content: center; padding: 3rem 1rem; }
.sb-auth-card { width: 100%; max-width: 26rem; }
.sb-auth-card h1 { font-size: clamp(1.75rem, 3vw, 2.25rem); margin-bottom: 0.625rem; }
.sb-social { display: inline-flex; align-items: center; justify-content: center; gap: 0.625rem; min-height: 2.875rem; background: var(--sb-surface); }
.sb-or { display: flex; align-items: center; gap: 0.75rem; margin: 1.25rem 0; color: var(--sb-ink-3); font-size: 0.8125rem; }
.sb-or::before, .sb-or::after { content: ""; flex: 1; height: 1px; background: var(--sb-line); }

/* Legal documents: the stored markup wraps each section in a card; render it as one document */
.sb-legal-doc .card { border: 0 !important; background: none !important; box-shadow: none !important; transform: none !important; margin: 0 !important; }
.sb-legal-doc .card-body { padding: 0 !important; }
.sb-legal-doc h2 { font-size: 1.375rem !important; margin-top: 2em !important; }
.sb-contact-list { display: grid; gap: 1.75rem; }
.sb-contact-list h2 { font-family: var(--sb-font); font-stretch: 100%; font-size: 1rem; font-weight: 650; letter-spacing: 0; margin-bottom: 0.375rem; }
.sb-contact-list p { color: var(--sb-ink-2); margin: 0; }

/* =====================================================================
   Admin panel (SB Admin template re-themed)
   ===================================================================== */
.sb-nav-fixed { background: var(--sb-paper); }
.sb-nav-fixed .sb-topnav { background: var(--sb-storm) !important; height: 3.75rem; padding: 0 0.75rem; z-index: 1039; }
.sb-admin-toggle { color: var(--sb-on-storm-2); border: 0; padding: 0.5rem; margin-right: 0.25rem; border-radius: 0.5rem; }
.sb-admin-toggle:hover, .sb-admin-toggle:focus-visible { color: #fff; background: rgba(255, 255, 255, 0.08); }
.sb-admin-brand { display: flex; align-items: center; gap: 0.5rem; color: #fff !important; font-weight: 750; font-stretch: 110%; letter-spacing: -0.02em; font-size: 1.0625rem; }
.sb-admin-brand small { font-stretch: 100%; font-weight: 500; color: var(--sb-amber); font-size: 0.8125rem; margin-left: 0.25rem; letter-spacing: 0; }
.sb-admin-site-link { color: var(--sb-on-storm-2); text-decoration: none; font-size: 0.875rem; margin-left: 1rem; }
.sb-admin-site-link:hover { color: #fff; }
.sb-nav-fixed .sb-topnav .nav-link { color: var(--sb-on-storm-2); }
.sb-nav-fixed .sb-topnav .nav-link:hover { color: #fff; }

.sb-nav-fixed #layoutSidenav #layoutSidenav_nav { top: 3.75rem; height: calc(100vh - 3.75rem); transition: transform 220ms cubic-bezier(0.3, 0.7, 0.4, 1); z-index: 1038; }
.sb-sidenav, .sb-sidenav-dark { background: var(--sb-storm) !important; color: var(--sb-on-storm-2); border-top: 1px solid var(--sb-storm-line); }
.sb-sidenav .sb-sidenav-menu .nav .sb-sidenav-menu-heading { color: #7f8b98 !important; font-size: 0.75rem !important; font-weight: 650; letter-spacing: 0.02em; text-transform: none !important; padding: 1.25rem 1rem 0.375rem !important; }
.sb-sidenav .sb-sidenav-menu .nav .nav-link { color: var(--sb-on-storm-2) !important; font-size: 0.9375rem; padding: 0.5rem 1rem !important; margin: 0 0.5rem; border-radius: 0.5rem; }
.sb-sidenav .sb-sidenav-menu .nav .nav-link .sb-nav-link-icon { color: #7f8b98 !important; }
.sb-sidenav .sb-sidenav-menu .nav .nav-link:hover { background: rgba(255, 255, 255, 0.06) !important; color: #fff !important; }
.sb-sidenav .sb-sidenav-menu .nav .nav-link.active { background: rgba(224, 138, 58, 0.14) !important; color: #fff !important; box-shadow: inset 3px 0 0 var(--sb-amber); }
.sb-sidenav .sb-sidenav-menu .nav .nav-link.active .sb-nav-link-icon { color: var(--sb-amber) !important; }
.sb-sidenav .sb-sidenav-footer { background: var(--sb-storm-2) !important; color: var(--sb-on-storm-2) !important; font-size: 0.875rem; }

/* Desktop: the toggle hides the menu; small screens: the menu slides in over the content */
@media (min-width: 992px) {
    .sb-nav-fixed.sb-sidenav-toggled #layoutSidenav #layoutSidenav_nav { transform: translateX(-100%); }
    .sb-nav-fixed.sb-sidenav-toggled #layoutSidenav #layoutSidenav_content { padding-left: 0; }
}
@media (max-width: 991.98px) {
    .sb-nav-fixed #layoutSidenav #layoutSidenav_nav { transform: translateX(-100%); }
    .sb-nav-fixed #layoutSidenav #layoutSidenav_content { padding-left: 0 !important; }
    .sb-nav-fixed.sb-sidenav-toggled #layoutSidenav #layoutSidenav_nav { transform: none; box-shadow: var(--sb-shadow-lg); }
}

.sb-nav-fixed #layoutSidenav_content main { padding-bottom: 2rem; }
.sb-nav-fixed #layoutSidenav_content h1 { font-size: clamp(1.75rem, 3vw, 2.25rem); margin-top: 1.5rem !important; }
.sb-nav-fixed .breadcrumb { background: none; padding: 0; }

/* Stat cards: neutral surface; the icon carries the colour instead of solid rainbow blocks */
.sb-nav-fixed .card.text-white[class*="bg-"], .sb-nav-fixed .card.text-bg-primary, .sb-nav-fixed .card.text-bg-success {
    --sb-card-tone: var(--sb-ink-3);
    background: var(--sb-surface) !important; color: var(--sb-ink) !important; border: 1px solid var(--sb-line) !important;
}
.sb-nav-fixed .card.text-white.bg-primary { --sb-card-tone: var(--sb-amber-strong); }
.sb-nav-fixed .card.text-white.bg-success { --sb-card-tone: var(--sb-pass); }
.sb-nav-fixed .card.text-white.bg-warning { --sb-card-tone: var(--sb-warn); }
.sb-nav-fixed .card.text-white.bg-danger { --sb-card-tone: var(--sb-fail); }
.sb-nav-fixed .card.text-white.bg-info { --sb-card-tone: var(--sb-info); }
.sb-nav-fixed .card.text-white .text-white, .sb-nav-fixed .card.text-white .text-white-50, .sb-nav-fixed .card.text-white a, .sb-nav-fixed .card.text-white h1, .sb-nav-fixed .card.text-white h2, .sb-nav-fixed .card.text-white h3, .sb-nav-fixed .card.text-white h4, .sb-nav-fixed .card.text-white h5, .sb-nav-fixed .card.text-white div { color: var(--sb-ink) !important; }
.sb-nav-fixed .card.text-white .card-footer { background: var(--sb-surface-2) !important; border-top: 1px solid var(--sb-line) !important; }
.sb-nav-fixed .card.text-white .card-footer a, .sb-nav-fixed .card.text-white .card-footer .small { color: var(--sb-link) !important; text-decoration: none; font-weight: 600; }
.sb-nav-fixed .card.text-white i.fas, .sb-nav-fixed .card.text-white i.fa, .sb-nav-fixed .card.text-white svg { color: var(--sb-card-tone) !important; opacity: 0.85; }
.sb-nav-fixed .card.bg-light, .sb-nav-fixed .card.bg-dark { background: var(--sb-surface) !important; color: var(--sb-ink) !important; }
.sb-nav-fixed .card.bg-dark *, .sb-nav-fixed .card.bg-secondary * { color: var(--sb-ink) !important; }
.sb-nav-fixed .card.bg-secondary { background: var(--sb-surface) !important; border: 1px solid var(--sb-line) !important; }

/* DataTables */
.dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select { border: 1.5px solid var(--sb-line); border-radius: 0.5rem; padding: 0.25rem 0.5rem; }
.dataTables_wrapper .dataTables_info { color: var(--sb-ink-3); font-size: 0.875rem; }
.page-item.active .page-link { background: var(--sb-storm); border-color: var(--sb-storm); }

.sb-admin-footer { padding: 1.25rem 0; color: var(--sb-ink-3); font-size: 0.8125rem; border-top: 1px solid var(--sb-line); }
.dataTables_wrapper .dataTables_length select { width: auto !important; min-width: 4.75rem; padding: 0.375rem 2rem 0.375rem 0.625rem !important; display: inline-block; }

/* Tables inside panels scroll sideways on small screens instead of widening the page */
.sb-panel.table-responsive, .sb-recent.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sb-app-nav + [class*="col-"], .row > [class*="col-"] { min-width: 0; }
.sb-subject-cell { max-width: 26rem; } @media (max-width: 575.98px) { .sb-subject-cell { max-width: 11rem; } }
.sb-prose img { min-width: 0 !important; } .sb-prose figure { max-width: 100%; } /* stored diagrams carry inline min-width: 800px */

/* Selected menu items: a quiet filled highlight, no coloured strip down the side */
.sb-app-nav .nav-link.active,
.sidebar .nav-link.active {
    background: rgba(18, 26, 35, 0.07);
    box-shadow: none;
    color: var(--sb-ink);
    font-weight: 650;
}
.sb-app-nav .nav-link.active i, .sidebar .nav-link.active i { color: var(--sb-amber-strong); }
@media (max-width: 767.98px) {
    .sb-app-nav .nav-link.active { box-shadow: none; background: rgba(18, 26, 35, 0.07); }
}
.sb-sidenav .sb-sidenav-menu .nav .nav-link.active {
    background: rgba(255, 255, 255, 0.1) !important;
    box-shadow: none;
    font-weight: 650;
}

/* Admin: wide tables scroll inside their card instead of pushing the whole page sideways */
.sb-nav-fixed .card-body:has(> table),
.sb-nav-fixed .dataTables_wrapper .row > [class*="col-"]:has(> table) { overflow-x: auto; }
.sb-nav-fixed td code { overflow-wrap: anywhere; }