/* ==========================================================================
   DNS Security Auditor - Stylesheet
   Aesthetic: Premium security tool. Dark, authoritative, trustworthy.
   ========================================================================== */

/* -- Self-hosted fonts -- */
/* DM Sans: normal 400 */
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/static/fonts/dm-sans-normal-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/static/fonts/dm-sans-normal-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* DM Sans: normal 500 */
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/static/fonts/dm-sans-normal-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/static/fonts/dm-sans-normal-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* DM Sans: normal 600 */
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/static/fonts/dm-sans-normal-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/static/fonts/dm-sans-normal-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* DM Sans: normal 700 */
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/static/fonts/dm-sans-normal-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/static/fonts/dm-sans-normal-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* DM Sans: italic 400. The italic woff2 has an opsz axis but no wght axis,
   so unlike the normal faces above it is declared at 400 only. Italic text at
   a heavier weight still matches this face and the browser synthesizes the
   weight, which beats synthesizing the slant from the upright face. */
@font-face {
    font-family: 'DM Sans';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('/static/fonts/dm-sans-italic-400-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'DM Sans';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('/static/fonts/dm-sans-italic-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* JetBrains Mono: normal 400 */
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/static/fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/static/fonts/jetbrains-mono-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* JetBrains Mono: normal 500 */
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/static/fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/static/fonts/jetbrains-mono-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* -- Design Tokens -- */
:root {
    color-scheme: dark;
    /* Foundation. A deeper navy ground than the old slate-900 so the
       surface, raised and hover steps read as depth rather than one flat
       value. Doc 35. */
    --bg: #0b1220;
    --bg-raised: #111a2e;
    --surface: #141d31;
    --surface-hover: #1a2540;
    /* Record and code blocks stay dark in both themes. */
    --code-bg: #0b1220;

    /* Borders */
    --border: #263149;
    --border-strong: #3a4763;
    --border-light: #1a2438;
    --border-focus: #5b8def;

    /* Text. Every step is 4.5:1 or better on --bg, --bg-raised and
       --surface; tests/test_palette_contrast.py holds that. */
    --text-primary: #eef2f8;
    --text-secondary: #a3b0c4;
    --text-tertiary: #98a5b9;
    --text-muted: #8e9bb0;
    --text-inverse: #ffffff;

    /* Brand accent. One cobalt, slightly desaturated from the stock
       blue-500, used for links and interactive states. */
    --primary: #5b8def;
    /* Backgrounds that carry white text need a darker step than the link
       colour: white on #5b8def is 3.4:1, on #2f5fcc it is 5.5:1. */
    --primary-solid: #2f5fcc;
    --primary-solid-hover: #274fa8;
    --primary-hover: #7ea6f5;
    --primary-light: #7ea6f5;
    --primary-subtle: rgba(91, 141, 239, 0.14);
    --primary-border: rgba(91, 141, 239, 0.28);

    /* Status. Pulled off the neon green-500 / amber-500 / red-500 toward
       tones that still read instantly but sit inside one palette. */
    --pass: #34c07a;
    /* Solid fill that carries white text: white on #34c07a is 2.2:1. */
    --pass-solid: #197a4a;
    --pass-bg: rgba(52, 192, 122, 0.10);
    --pass-border: rgba(52, 192, 122, 0.28);
    --warn: #e0a43c;
    --warn-contrast: #1a1a1a;
    /* Record syntax highlighting has four steps: safe, caution, warn,
       danger. Caution needs its own colour, not --warn: it marks ~all and
       p=quarantine, and --warn marks ?all and p=none. Painting an
       enforcing policy the same as no policy is the one distinction this
       tool exists to draw. */
    --rec-caution: #d9b24a;
    --warn-bg: rgba(224, 164, 60, 0.10);
    --warn-border: rgba(224, 164, 60, 0.28);
    --fail: #e5484d;
    /* Text needs more than the fill colour: #e5484d on the card surface is
       under the 4.5:1 AA floor for normal text. Fills, borders and icons
       keep --fail. */
    --fail-text: #f0767a;
    /* Solid fill that carries white text: white on #e5484d is 4.1:1. */
    --fail-solid: #b8323a;
    --fail-bg: rgba(229, 72, 77, 0.10);
    --fail-border: rgba(229, 72, 77, 0.28);

    /* Fix/recommendation */
    --fix-bg: rgba(52, 192, 122, 0.08);
    --fix-border: #34c07a;

    /* DMARCbis teal, kept for the RFC 9989 badges only; --primary is the
       single interactive accent. */
    --dmarcbis: #38bfae;
    --dmarcbis-contrast: #0a2d28;
    /* Muted text sitting on a raised or tinted panel rather than the page
       ground, where --text-muted alone falls short of 4.5:1. */
    --text-muted-raised: #b3bfd0;
    --ttl-long-text: #b39cf7;
    --ttl-long-bg: rgba(139, 92, 246, 0.04);
    --ttl-long-border: rgba(139, 92, 246, 0.27);
    --dmarcbis-bg: rgba(56, 191, 174, 0.10);
    --dmarcbis-border: rgba(56, 191, 174, 0.28);

    /* Typography */
    --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Consolas', monospace;
    --font-xs: 0.75rem;
    --font-sm: 0.8125rem;
    --font-base: 0.9375rem;
    --font-md: 1rem;
    --font-lg: 1.125rem;
    --font-xl: 1.25rem;
    --font-2xl: 1.5rem;
    --font-3xl: 1.75rem;
    --font-4xl: 2.125rem;

    /* Layout */
    --max-width: 880px;
    --radius-sm: 4px;
    --radius: 8px;
    --radius-lg: 12px;

    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 64px;

    /* Shadows — subtle on dark */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.55);

    /* Motion */
    --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --duration: 0.15s;
    --duration-slow: 0.25s;
}

/* Display tracking for headings; component rules with their own
   letter-spacing override this. */
h1,
h2,
h3 {
    letter-spacing: -0.02em;
}

/* -- Reset -- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* -- Base -- */
html {
    /* Doc 87: the reader's own default size (browser or OS setting). Every
       --font-* token is rem, so text follows it; layout tokens stay px, so
       larger text wraps inside the same containers. */
    font-size: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
    max-width: 100vw;
}

body {
    font-family: var(--font-body);
    /* DM Sans ships an opsz axis (9 to 40); this lets the browser pick the
       display cut at heading sizes instead of scaling the text cut. */
    font-optical-sizing: auto;
    background: var(--bg);
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    max-width: 100vw;
}

/* Brand-colored selection */
::selection {
    background: rgba(59, 130, 246, 0.25);
    color: var(--text-primary);
}

/* Accessible focus rings */
:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Screen reader only (visually hidden but accessible) */
.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;
}

.container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 max(var(--space-lg), env(safe-area-inset-right)) 0 max(var(--space-lg), env(safe-area-inset-left));
}

main {
    max-width: 100%;
    padding: 0;
}

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header {
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 100;
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
}

/* Logo */
.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--text-primary);
    transition: opacity var(--duration) var(--ease);
}

.logo:hover {
    opacity: 0.85;
}

/* Flex centring lines up the wordmark's box with the nav links, which leaves
   the larger wordmark's baseline about 3px below theirs; line-height cannot
   move it because the leading is split evenly above and below. Padding under
   the text lifts the baseline onto the nav's while the box stays centred. */
.logo-text {
    font-weight: 700;
    font-size: var(--font-lg);
    letter-spacing: -0.01em;
    padding-bottom: 0.32em;
}

.logo-accent {
    color: var(--primary);
}

.header-right {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.nav-link {
    font-size: var(--font-sm);
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    padding: 0.3rem 0.55rem;
    border-radius: var(--radius);
    transition: color 0.15s var(--ease), background 0.15s var(--ease);
}

.nav-link:hover {
    color: var(--text-primary);
    background: var(--surface);
}

.nav-link-active {
    color: var(--text-primary);
    font-weight: 500;
    border-bottom: 2px solid var(--primary);
    padding-bottom: 2px;
}

/* ==========================================================================
   AUDIT INPUT
   ========================================================================== */
.audit-input-section {
    position: relative;
    padding-top: var(--space-2xl);
    padding-bottom: var(--space-lg);
    transition: padding 0.3s ease;
}

.audit-input-section.compact {
    padding-top: var(--space-md);
    padding-bottom: var(--space-sm);
}

.audit-input-section.compact .audit-title,
.audit-input-section.compact .audit-subtitle,
.audit-input-section.compact .scope-selector,
.audit-input-section.compact .selector-toggle-row {
    display: none;
}

.audit-input-section.compact .audit-input-card {
    padding: var(--space-md) var(--space-lg);
}

.audit-input-section.compact .audit-input-card::before {
    display: none;
}

.audit-input-card {
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: var(--space-xl) var(--space-2xl);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: visible;
}

.audit-input-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--primary);
    opacity: 0.6;
    pointer-events: none;
}

.audit-title {
    font-size: var(--font-3xl);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
    line-height: 1.2;
}

.audit-subtitle {
    font-size: var(--font-md);
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: var(--space-md);
    line-height: 1.55;
}

.audit-form {
    width: 100%;
    margin-top: var(--space-lg);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.input-row {
    display: flex;
    gap: 0;
    align-items: stretch;
    max-width: 600px;
    width: 100%;
}

.input-unified .input-wrapper {
    display: flex;
    align-items: center;
    background: var(--surface-hover);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-lg);
    transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
    max-width: 600px;
    width: 100%;
}
.input-unified .input-wrapper:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-subtle);
}
/* One soft pulse of the ring when the page opens with the cursor already in
   the field. app.js adds the class once and removes it on animationend. */
.input-unified .input-wrapper.input-wrapper-hello {
    animation: input-hello 900ms ease-out;
}
@keyframes input-hello {
    from { box-shadow: 0 0 0 0 var(--primary-border); }
    to { box-shadow: 0 0 0 10px transparent; }
}
.input-unified .domain-input {
    border: none;
    background: transparent;
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
    height: 50px;
}
.input-unified .domain-input:focus {
    border: none;
    box-shadow: none;
}
.input-unified .audit-btn {
    border-radius: 0 var(--radius) var(--radius) 0;
    height: 46px;
    margin: 2px 2px 2px 0;
    flex-shrink: 0;
}

/* The input alone, so the validity indicator anchors to the field rather
   than to the row that also holds the Run Audit button. */
.domain-input-wrap {
    position: relative;
    display: flex;
    flex: 1 1 0%;
    min-width: 0;
}

.domain-input-wrap .domain-input {
    padding-right: 2.5rem;
}

.input-wrapper {
    flex: 1;
    position: relative;
}

.selector-toggle-row {
    margin-top: 0.6rem;
    text-align: center;
    max-width: 600px;
    width: 100%;
}

.selector-toggle {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-size: var(--font-sm);
    color: var(--primary-light);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    transition: color var(--duration) var(--ease);
}

.selector-toggle:hover {
    color: var(--primary-light);
}

.selector-toggle.active {
    color: var(--primary-light);
}

.selector-field {
    display: none;
    margin-top: 0.5rem;
}

.selector-field.visible {
    display: block;
}

.selector-input {
    max-width: 280px;
    font-size: var(--font-base);
    padding-left: 0.85rem;
}

.input-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--text-tertiary);
    pointer-events: none;
    transition: color var(--duration) var(--ease);
}

/* Tint icon on focus */
.input-wrapper:focus-within .input-icon {
    color: var(--primary);
}

.domain-input {
    width: 100%;
    height: 48px;
    padding: 0 1rem 0 2.75rem;
    font-family: var(--font-body);
    font-size: var(--font-lg);
    font-weight: 500;
    color: var(--text-primary);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    outline: none;
    transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}

.domain-input::placeholder {
    color: var(--text-tertiary);
    font-weight: 400;
}

.domain-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-subtle);
}

.audit-btn {
    height: 48px;
    padding: 0 var(--space-lg);
    background: var(--primary-solid);
    color: var(--text-inverse);
    border: none;
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: var(--font-base);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--duration) var(--ease), transform 0.1s var(--ease), box-shadow var(--duration) var(--ease);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.audit-btn:hover {
    background: var(--primary-solid-hover);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

.audit-btn:active {
    transform: scale(0.98);
}

.audit-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
}

/* Spinner */
.spinner {
    width: 18px;
    height: 18px;
    animation: spin 0.9s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.btn-loading {
    display: none;
    align-items: center;
    gap: 0.45rem;
}

.audit-btn.is-loading .btn-text {
    display: none;
}

.audit-btn.is-loading .btn-loading {
    display: flex;
}

/* ==========================================================================
   LOADING STATE
   ========================================================================== */
.loading-section {
    display: none;
    padding-top: 1.25rem;
}

.loading-card {
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: var(--space-lg) var(--space-xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
}

.loading-bar-track {
    width: 100%;
    height: 4px;
    background: var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin-bottom: 0.85rem;
}

/* Accessible progress indicators */
.loading-bar-track[role="progressbar"] {
    position: relative;
}

.loading-bar-fill {
    height: 100%;
    width: 0%;
    background: var(--primary);
    border-radius: var(--radius-sm);
    transition: width 0.5s var(--ease-out);
}

.loading-status {
    font-size: var(--font-sm);
    color: var(--text-secondary);
    letter-spacing: 0.005em;
}

/* ==========================================================================
   RESULTS
   ========================================================================== */
.results-section {
    display: none;
    animation: fadeIn 0.45s var(--ease-out);
    scroll-margin-top: 4.5rem;
    contain: layout style;
}

/* Semantic heading resets for result sections (excludes .result-title) */
:where(.results-section h2) {
    margin: 0;
    font-size: inherit;
    font-weight: 700;
    line-height: inherit;
}

:where(.results-section h3:not(.result-title)) {
    margin: 0;
    font-size: inherit;
    font-weight: 600;
    line-height: inherit;
}

/* Prevent layout shift during progressive rendering */
#executive-summary-slot:not(:empty) {
    min-height: auto;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Domain banner */
.domain-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0 0.65rem;
    margin-top: 0.25rem;
}

.domain-name {
    font-size: var(--font-xl);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

.audit-timestamp {
    font-size: var(--font-sm);
    color: var(--text-tertiary);
    margin-top: 0.2rem;
    letter-spacing: 0.005em;
}

.banner-actions {
    display: flex;
    gap: 0.5rem;
}

.share-btn {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.9rem;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: var(--font-sm);
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: border-color var(--duration) var(--ease), color var(--duration) var(--ease), box-shadow var(--duration) var(--ease), background var(--duration) var(--ease);
}

.share-btn.btn-busy {
    opacity: 0.6;
    pointer-events: none;
    position: relative;
}

.share-btn.btn-busy span {
    visibility: hidden;
}

.share-btn.btn-busy::after {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    border: 2px solid var(--text-secondary);
    border-top-color: transparent;
    border-radius: 50%;
    animation: btn-spin 0.6s linear infinite;
}

@keyframes btn-spin {
    to { transform: rotate(360deg); }
}

.share-btn:hover {
    border-color: var(--primary-border);
    color: var(--text-primary);
    background: var(--surface-hover);
    box-shadow: var(--shadow-sm);
}

.pdf-btn {
    background: var(--primary-solid);
    color: var(--text-inverse);
    border-color: var(--primary-solid);
}

.pdf-btn:hover {
    background: var(--primary-solid-hover);
    border-color: var(--primary-solid-hover);
    color: var(--text-inverse);
}

.pdf-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.pdf-btn svg {
    stroke: currentColor;
}

/* Share dropdown */
.share-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    background: var(--bg-raised, var(--surface));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 4px;
    z-index: 100;
    min-width: 180px;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 150ms var(--ease), transform 150ms var(--ease);
}

.share-dropdown.open {
    opacity: 1;
    transform: translateY(0);
}

.share-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    background: none;
    border: none;
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: var(--font-sm);
    font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
    text-align: left;
    transition: background var(--duration) var(--ease);
}

.share-option:hover {
    background: var(--surface-hover);
}

.share-option svg {
    flex-shrink: 0;
    color: var(--text-secondary);
}

.share-option-label {
    white-space: nowrap;
}

/* Status line. Doc 92: the five counters were tiles between the short
   answer and the plan; they are one line just above the cards they count.
   Each item is the count, then its label, with a status-coloured mark. */
.summary-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: var(--space-lg);
    row-gap: var(--space-xs);
    margin-bottom: var(--space-md);
}

.summary-card {
    display: inline-flex;
    flex-direction: row-reverse;
    align-items: baseline;
    gap: 0.35rem;
    padding-left: var(--space-sm);
    border-left: 3px solid transparent;
    line-height: 1.4;
}

.pass-card {
    border-left-color: var(--pass);
}

.warn-card {
    border-left-color: var(--warn);
}

.fail-card {
    border-left-color: var(--fail);
}

/* Optional protocols the domain has not published. Neutral: nothing is
   wrong, so it takes neither the warning amber nor the pass green. */
.absent-card {
    border-left-color: var(--text-tertiary);
}

/* Checks whose lookup never completed. Neutral on purpose: not a finding,
   and colouring it red or green would state something the audit did not
   establish. Shown only when the count is non-zero, matching the PDF. */
.unavailable-card {
    border-left-color: var(--text-tertiary);
}

/* Checks that do not apply to this domain (a null MX domain's DKIM, say).
   Neutral like the two above, and shown only when the count is non-zero. */
.na-card {
    border-left-color: var(--text-tertiary);
}

.summary-label {
    font-size: var(--font-sm);
    font-weight: 500;
    color: var(--text-secondary);
}

.summary-value {
    font-size: var(--font-base);
    font-weight: 700;
}

.pass-value {
    color: var(--pass);
}

.warn-value {
    color: var(--warn);
}

.fail-value {
    color: var(--fail-text);
}

.unavailable-value,
.na-value,
.absent-value {
    color: var(--text-tertiary);
}

/* Priorities: the one prioritized list. A plain surface; each row's icon
   carries the severity, so the box is not red when the worst finding is a
   warning. */
.priority-section {
    display: none;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    margin-bottom: var(--space-xl);
    animation: fadeIn 0.4s var(--ease-out) 0.25s backwards;
}

.priority-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-sm);
    font-weight: 600;
    font-size: var(--font-base);
    color: var(--text-primary);
    margin: 0 0 var(--space-md);
}

.priority-summary {
    font-size: var(--font-xs);
    font-weight: 500;
    color: var(--text-tertiary);
}

.priority-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.priority-row {
    border-radius: var(--radius);
}

/* The one-line instruction. Opening it is what the click does now; the link
   into the card is a control inside the opened row. */
.priority-head {
    display: grid;
    grid-template-columns: 16px 1fr auto auto;
    align-items: center;
    column-gap: var(--space-sm);
    min-height: 44px;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius);
    font-size: var(--font-sm);
    line-height: 1.5;
    color: var(--text-primary);
    cursor: pointer;
    transition: background var(--duration) var(--ease);
}

.priority-head:hover,
.priority-head:focus-visible {
    background: var(--surface-hover);
}

.priority-chevron {
    display: inline-flex;
    color: var(--text-tertiary);
    transition: transform var(--duration-slow) var(--ease-out);
}

.priority-head[aria-expanded="true"] .priority-chevron {
    transform: rotate(180deg);
}

.priority-protocol {
    font-weight: 500;
    white-space: nowrap;
}

/* Doc 92: the plain consequence leads; the instruction sits under it. */
.priority-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.priority-plain {
    font-weight: 500;
    color: var(--text-primary);
}

.priority-action-sub {
    font-size: var(--font-xs);
    color: var(--text-tertiary);
}

.priority-meta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    justify-self: end;
}

.priority-meta .priority-protocol {
    font-size: var(--font-xs);
    color: var(--text-tertiary);
}

/* Optional extras: one closed toggle at the end of the plan. */
.plan-optional {
    margin-top: var(--space-sm);
    border-top: 1px solid var(--border);
    padding-top: var(--space-sm);
}

.plan-optional-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 44px;
    padding: var(--space-xs) var(--space-sm);
    background: none;
    border: 0;
    border-radius: var(--radius);
    font: inherit;
    font-size: var(--font-sm);
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    text-align: left;
}

.plan-optional-toggle:hover,
.plan-optional-toggle:focus-visible {
    background: var(--surface-hover);
}

.plan-optional-toggle[aria-expanded="true"] .priority-chevron {
    transform: rotate(180deg);
}

.plan-optional-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

/* Why it matters, what to change, how to confirm. */
.priority-body {
    padding: var(--space-sm) var(--space-sm) var(--space-md) calc(16px + var(--space-md));
    font-size: var(--font-sm);
    line-height: 1.6;
    color: var(--text-secondary);
}

.plan-part {
    margin-bottom: var(--space-md);
}

.plan-part-label {
    font-size: var(--font-xs);
    font-weight: 600;
    color: var(--text-tertiary);
    margin-bottom: var(--space-xs);
}

.plan-part-body .record-block {
    margin: var(--space-xs) 0;
}

.plan-record-host {
    font-size: var(--font-xs);
    color: var(--text-tertiary);
}

.plan-record-note {
    font-size: var(--font-xs);
    color: var(--text-tertiary);
    margin-top: var(--space-xs);
}

.plan-fix {
    color: var(--text-secondary);
}

.plan-card-link {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-size: var(--font-sm);
    color: var(--primary-light);
    cursor: pointer;
    text-align: left;
}

.plan-card-link:hover {
    text-decoration: underline;
}

@media (max-width: 640px) {
    /* A control on its own line, so it gets the 44px touch target */
    .plan-card-link {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    .priority-head {
        grid-template-columns: 16px 1fr auto;
        row-gap: var(--space-xs);
        padding-block: var(--space-sm);
    }

    .priority-meta {
        grid-column: 2 / 3;
        grid-row: 2;
        justify-self: start;
    }

    .priority-head .priority-chevron {
        grid-column: 3;
        grid-row: 1;
    }
}

/* Status icons (static/app.js ICON). One shape per status; the colour comes
   from the status class on the wrapper. */
.status-icon {
    display: inline-flex;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.status-icon .icon {
    width: 16px;
    height: 16px;
}

/* An icon inline with text sits on the text's centre line. */
.icon {
    display: inline-block;
    vertical-align: -3px;
    flex-shrink: 0;
}

.status-icon.pass { color: var(--pass); }
.status-icon.warn { color: var(--warn); }
.status-icon.fail { color: var(--fail); }
.status-icon.absent,
.status-icon.unavailable,
.status-icon.info { color: var(--text-tertiary); }

/* One tag component for every pill, badge and chip. */
.tag {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    font-family: inherit;
    gap: 4px;
    height: 22px;
    padding: 0 8px;
    border-radius: var(--radius);
    font-size: var(--font-xs);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1;
    white-space: nowrap;
    flex-shrink: 0;
    background: var(--border);
    color: var(--text-tertiary);
}

.tag-pass { background: var(--pass-bg); color: var(--pass); }
.tag-warn { background: var(--warn-bg); color: var(--warn); }
.tag-fail { background: var(--fail-bg); color: var(--fail-text); }
.tag-absent,
.tag-unavailable { background: var(--border); color: var(--text-tertiary); }
.tag-critical { background: var(--fail-bg); color: var(--fail-text); }
.tag-high { background: var(--warn-bg); color: var(--warn); }
.tag-medium,
.tag-low { background: var(--border); color: var(--text-tertiary); }

/* An amber tag on an amber-tinted surface stacks two translucent washes and
   fell to 4.1:1 in light theme. On a warn surface the tag is solid amber
   with the text-on-amber token, which clears 4.5:1 in both themes. */
.rb-verdict-monitoring .tag-warn,
.rb-verdict-monitoring .tag-high,
.anomaly-warn .tag-warn,
.anomaly-warn .tag-high { background: var(--warn); color: var(--warn-contrast); }

/* Tiers are ranks, not sentences: the one uppercase exception. */
.tag-critical,
.tag-high,
.tag-medium,
.tag-low { text-transform: uppercase; }

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

/* Inside Details a chip can hold a record value or a sentence. It wraps
   inside itself rather than running past the panel edge; a one-line chip
   keeps the 22px face. */
.cd-body .tag {
    height: auto;
    min-height: 22px;
    min-width: 0;
    max-width: 100%;
    padding-top: 3px;
    padding-bottom: 3px;
    line-height: 1.3;
    white-space: normal;
    overflow-wrap: anywhere;
    flex-shrink: 1;
}

a.tag { text-decoration: none; }

/* A tag that is also a control keeps a 44px touch target around its 22px
   face: the ::after box is the hit area. Rows of them wrap with a row gap of
   at least 22px so neighbouring targets never overlap. */
.tag-hit {
    position: relative;
    border: 0;
    cursor: pointer;
}

.tag-hit::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 44px;
    transform: translateY(-50%);
}

.tag-hit:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.dk-fields .tag code { font-family: var(--font-mono); }

.articles-filter[aria-pressed="true"] {
    background: var(--primary-solid);
    color: var(--text-inverse);
}

.articles-filter[aria-pressed="true"]:hover {
    background: var(--primary-solid-hover);
}

/* Results toolbar */
.results-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-md);
    margin-top: var(--space-2xl);
}

.results-toolbar .results-label {
    margin: 0;
}

.toggle-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.75rem;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: var(--font-xs);
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: border-color var(--duration) var(--ease), color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}

.toggle-all-btn:hover {
    border-color: var(--primary-border);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
}

/* Results list */
.results-label {
    font-size: var(--font-xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-bottom: var(--space-md);
    margin-top: var(--space-2xl);
}

.results-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

/* Result card -- left border accent for status at-a-glance */
.result-card {
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
    border-left: 3px solid var(--border);
    overflow: hidden;
    opacity: 0;
    transform: translateY(12px);
    animation: cardEntrance 400ms var(--ease-out) forwards;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.result-card:hover {
    border-color: var(--border);
    box-shadow: var(--shadow-md);
}

@keyframes cardEntrance {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Skip painting off-screen cards. This is a paint optimisation only, not
   the removed DOM-lazy-loading: the card stays in the document, reachable
   by focus, find-in-page and assistive tech. But content-visibility:auto
   also clamps an off-screen card to contain-intrinsic-size until it is
   near the viewport, so any accessibility sweep of this page must force
   these cards to paint first (override content-visibility to visible)
   before scanning. Without that override, on / with cloudflare.com at
   1280px only four cards render their real content and the other eight
   clamp to 302px -- a sweep run that way reports a clean result from a
   quarter of the page, the exact mistake PR #29 made. */
.result-card:nth-child(n+6) {
    content-visibility: auto;
    contain-intrinsic-size: auto 300px;
}

.result-card[data-status="pass"] {
    border-left-color: var(--pass);
}

.result-card[data-status="warn"] {
    border-left-color: var(--warn);
}

.result-card[data-status="fail"] {
    border-left-color: var(--fail);
}

/* A check that did not run. Deliberately neutral: it is not a finding
   about the domain, so it must not read as pass, warn or fail. */
.result-card[data-status="unavailable"] {
    border-left-color: var(--border-strong);
}

.result-card[data-status="absent"] {
    border-left-color: var(--text-tertiary);
}

@media (prefers-reduced-motion: reduce) {
    .input-unified .input-wrapper.input-wrapper-hello {
        animation: none;
    }

    .result-card,
.top-progress-bar,
.back-to-top {
        opacity: 1;
        transform: none;
        animation: none !important;
        transition: none !important;
    }

    .loading-bar-fill {
        transition: none !important;
    }
}

.result-header {
    padding: var(--space-md) var(--space-lg);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    user-select: none;
    transition: background var(--duration) var(--ease);
}

.result-header:hover {
    background: rgba(255, 255, 255, 0.02);
}

/* A collapsed card is a row in a list of twelve, not a cell in a table:
   4px more above and below keeps the closed list from reading as one. */
.result-card:not(.expanded) .result-header {
    padding-top: calc(var(--space-md) + var(--space-xs));
    padding-bottom: calc(var(--space-md) + var(--space-xs));
}

/* Check name */
h3.result-title,
.result-title {
    font-weight: 600;
    font-size: var(--font-md);
    color: var(--text-primary);
    margin: 0;
}

/* One-line verdict */
.result-verdict {
    flex: 1;
    text-align: right;
    font-size: var(--font-sm);
    color: var(--text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Chevron */
.result-chevron {
    display: inline-flex;
    color: var(--text-tertiary);
    transition: transform var(--duration-slow) var(--ease-out);
    flex-shrink: 0;
    margin-left: 0.25rem;
}

/* Expanded state */
.result-card.expanded .result-chevron {
    transform: rotate(180deg);
}

.result-card.expanded {
    box-shadow: var(--shadow-md);
}

.result-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--duration-slow) var(--ease);
    overflow: hidden;
}

.result-card.expanded .result-body {
    grid-template-rows: 1fr;
}

.result-body-inner {
    min-height: 0;
    overflow: hidden;
    padding: 0 var(--space-lg) 0;
    border-top: 1px solid transparent;
    transition: padding var(--duration-slow) var(--ease), border-color var(--duration-slow) var(--ease);
}

.result-card.expanded .result-body-inner {
    padding: 20px var(--space-lg);
    border-top-color: var(--border);
}

/* Record block (DNS records) -- darker than card for depth */
.record-block {
    font-family: var(--font-mono);
    font-size: var(--font-sm);
    line-height: 1.75;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-md);
    padding-right: 4rem;
    margin: 0.75rem 0;
    word-break: break-all;
    position: relative;
    color: var(--text-primary);
    overflow-x: auto;
    border-left: 3px solid var(--primary-border);
}

/* Record syntax highlighting */
.rec-keyword {
    color: var(--primary-light);
}

.rec-value {
    color: var(--text-primary);
}

.rec-safe {
    color: var(--pass);
    font-weight: 500;
}

.rec-neutral {
    color: var(--rec-caution);
}

.rec-warn {
    color: var(--warn);
    font-weight: 500;
}

.rec-danger {
    color: var(--fail-text);
    font-weight: 500;
}

.rec-muted {
    color: var(--text-tertiary);
}

/* Room for the 44px copy button and its offset above and below, so a
   one-line record does not let the button hang out of the block. */
.record-block:has(> .copy-btn) {
    min-height: calc(44px + 1.2rem);
}

.copy-btn {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    background: var(--surface-hover);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    padding: 0.4rem 0.7rem;
    min-height: 44px;
    min-width: 44px;
    font-family: var(--font-body);
    font-size: var(--font-xs);
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--duration) var(--ease);
}

.copy-btn:hover {
    color: var(--text-primary);
    border-color: var(--text-muted);
    background: var(--border);
}

.copy-btn.copied {
    color: var(--pass);
    border-color: var(--pass-border);
    animation: copy-flash 0.3s var(--ease);
}

@keyframes copy-flash {
    0% { transform: scale(1); }
    50% { transform: scale(0.92); }
    100% { transform: scale(1); }
}

/* Error state */
.error-title {
    color: var(--fail-text);
    font-weight: 600;
    margin-bottom: 0.35rem;
}

.error-message {
    color: var(--text-secondary);
    font-size: var(--font-sm);
}

.error-retry {
    margin-top: 0.75rem;
    padding: 0.5rem 1rem;
    background: var(--primary-solid);
    color: white;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    font-family: var(--font-body);
    font-size: var(--font-sm);
    font-weight: 600;
}

.error-retry:hover {
    /* --primary-hover is a lighter blue meant for text-on-dark use, not a
       white-text fill (2.5:1); the solid-hover pair keeps it AA on hover
       the same way the base rule now does at rest. */
    background: var(--primary-solid-hover);
}

/* ==========================================================================
   DMARC POLICY DISCOVERY (TREE WALK VISUALIZATION)
   ========================================================================== */
.tree-walk {
    margin: 1rem 0;
    padding: var(--space-lg);
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

/* Header row: title + dmarcbis badge */
.tw-header-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.85rem;
}

.tree-walk-header {
    font-size: var(--font-xs);
    font-weight: 500;
    color: var(--text-tertiary);
}

/* Intro / educational text */
.tw-intro {
    font-size: var(--font-sm);
    color: var(--text-secondary);
    line-height: 1.65;
    margin-bottom: 1rem;
}

.tw-intro a {
    color: var(--primary-light);
    text-decoration: underline;
}

.tw-intro a:hover {
    color: var(--primary);
}

/* -- Simple mode -- */
.tree-walk-simple {
    padding: 1.25rem 1.5rem;
}

.tw-simple-body {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: var(--font-sm);
    color: var(--text-secondary);
    line-height: 1.6;
}

.tw-simple-check {
    color: var(--pass);
    font-size: var(--font-md);
    font-weight: 700;
    flex-shrink: 0;
    line-height: 1.6;
}

.tw-simple-body strong {
    color: var(--text-primary);
    font-weight: 600;
}

.tw-simple-policy {
    margin-top: 0.65rem;
    padding-left: 1.5rem;
    font-size: var(--font-sm);
    color: var(--text-secondary);
}

.tw-footnote {
    margin-top: 0.85rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
    font-size: var(--font-xs);
    color: var(--text-tertiary);
    line-height: 1.65;
}

.tw-footnote a {
    color: var(--primary-light);
    text-decoration: underline;
}

/* Card explanations had no link rule, so their links took the browser's
   default blue in both themes. */
.explanation a {
    color: var(--primary-light);
    text-decoration: underline;
}

.tw-footnote a:hover {
    color: var(--primary);
}

/* -- Full mode timeline -- */
.tree-walk-steps {
    position: relative;
    padding-left: 0.25rem;
}

.tw-step {
    display: flex;
    gap: 0.75rem;
    position: relative;
    padding-bottom: 0.85rem;
}

.tw-step.tw-last {
    padding-bottom: 0;
}

.tw-connector {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    width: 14px;
    padding-top: 0.15rem;
}

.tw-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--border);
    background: var(--bg);
    flex-shrink: 0;
    z-index: 1;
    transition: box-shadow 0.4s var(--ease);
}

.tw-found .tw-dot {
    border-color: var(--pass);
    background: var(--pass);
}

.tw-notfound .tw-dot {
    border-color: var(--text-muted);
    background: var(--bg);
}

.tw-policy-source .tw-dot {
    box-shadow: 0 0 0 3px var(--pass-bg);
}

.tw-step:not(.tw-last)::before {
    content: '';
    position: absolute;
    left: calc(0.25rem + 7px - 1px);
    top: calc(0.15rem + 10px);
    bottom: 0;
    width: 2px;
    background: var(--border);
    z-index: 0;
}

.tw-step.tw-line-to-found:not(.tw-last)::before {
    background: var(--pass);
}

/* ── Tree Walk Animations ───────────────────────────────────── */
.tw-animated .tw-step {
    animation: twStepIn 0.35s var(--ease-out) backwards;
}

.tw-animated .tw-step:nth-child(1) { animation-delay: 0.05s; }
.tw-animated .tw-step:nth-child(2) { animation-delay: 0.2s; }
.tw-animated .tw-step:nth-child(3) { animation-delay: 0.35s; }
.tw-animated .tw-step:nth-child(4) { animation-delay: 0.5s; }
.tw-animated .tw-step:nth-child(5) { animation-delay: 0.65s; }
.tw-animated .tw-step:nth-child(6) { animation-delay: 0.8s; }
.tw-animated .tw-step:nth-child(7) { animation-delay: 0.95s; }
.tw-animated .tw-step:nth-child(8) { animation-delay: 1.1s; }

@keyframes twStepIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tw-animated .tw-step:not(.tw-last)::before {
    transform-origin: top;
    animation: twLineGrow 0.25s var(--ease-out) backwards;
    animation-delay: var(--line-delay, 0.18s);
}

@keyframes twLineGrow {
    from { transform: scaleY(0); }
    to { transform: scaleY(1); }
}

.tw-animated .tw-policy-source .tw-dot {
    animation: twStepIn 0.35s var(--ease-out) backwards,
        twPulse 0.6s var(--ease-out) backwards;
}

@keyframes twPulse {
    0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.45); }
    50% { box-shadow: 0 0 0 7px rgba(16, 185, 129, 0.15); }
    100% { box-shadow: 0 0 0 4px var(--pass-bg); }
}

.tw-animated .tw-meta,
.tw-animated .tw-summary {
    animation: twMetaIn 0.4s var(--ease-out) backwards;
    animation-delay: 0.65s;
}

.tw-animated .tw-intro {
    animation: twMetaIn 0.35s var(--ease-out) backwards;
    animation-delay: 0.02s;
}

@keyframes twMetaIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tw-animated.tree-walk-simple .tw-simple-body,
.tw-animated.tree-walk-simple .tw-simple-policy,
.tw-animated.tree-walk-simple .tw-footnote {
    animation: twMetaIn 0.45s var(--ease-out) backwards;
}

.tw-animated.tree-walk-simple .tw-simple-body { animation-delay: 0.08s; }
.tw-animated.tree-walk-simple .tw-simple-policy { animation-delay: 0.22s; }
.tw-animated.tree-walk-simple .tw-footnote { animation-delay: 0.36s; }

.tw-content {
    flex: 1;
    min-width: 0;
}

.tw-domain {
    font-family: var(--font-mono);
    font-size: var(--font-sm);
    font-weight: 500;
    color: var(--text-primary);
}

.tw-label {
    font-size: var(--font-xs);
    color: var(--text-tertiary);
    margin-top: 0.1rem;
}

.tw-record {
    font-family: var(--font-mono);
    font-size: var(--font-xs);
    color: var(--pass);
    margin-top: 0.3rem;
    word-break: break-all;
    line-height: 1.5;
}

.tw-norecord {
    font-size: var(--font-xs);
    color: var(--text-tertiary);
    font-style: italic;
    margin-top: 0.2rem;
}

.tw-lookup-failed {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-style: normal;
}

/* Card sections are h4 so a screen reader can move between them; they keep
   the look their class gives them. */
:where(h4.sv-title, h4.mw-title, h4.rb-title, h4.rcb-title, h4.tree-walk-header, h4.se-header) {
    font: inherit;
}

/* -- Metadata summary section -- */
.tw-meta {
    margin-top: 0.85rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.tw-meta-row {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    font-size: var(--font-sm);
    line-height: 1.55;
}

.tw-meta-label {
    flex-shrink: 0;
    width: 140px;
    font-size: var(--font-xs);
    font-weight: 500;
    color: var(--text-tertiary);
}

.tw-meta-value {
    flex: 1;
    color: var(--text-secondary);
    min-width: 0;
}

.tw-meta-value strong {
    color: var(--text-primary);
    font-weight: 600;
}

.tw-meta-value code {
    font-family: var(--font-mono);
    font-size: var(--font-xs);
    background: rgba(255, 255, 255, 0.05);
    padding: 0.1rem 0.35rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}

.tw-summary {
    margin-top: 0.85rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
    font-size: var(--font-sm);
    color: var(--text-secondary);
    line-height: 1.55;
}

.tw-no-policy {
    color: var(--fail-text);
    font-weight: 500;
}

@media (max-width: 640px) {
    .tw-meta-row {
        flex-direction: column;
        gap: 0.1rem;
    }

    .tw-meta-label {
        width: auto;
    }

    .tree-walk {
        padding: 1.1rem 1rem;
    }
}

/* ==========================================================================
   SPF EXECUTION TRACE
   ========================================================================== */
.spf-execution {
    margin: 1rem 0;
    padding: var(--space-lg);
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.se-header-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.85rem;
}

.se-header {
    font-size: var(--font-xs);
    font-weight: 500;
    color: var(--text-tertiary);
}

.se-intro {
    font-size: var(--font-sm);
    color: var(--text-secondary);
    line-height: 1.65;
    margin-bottom: 1rem;
}

.se-intro strong {
    color: var(--fail-text);
    font-weight: 600;
}

/* -- Timeline -- */
.se-steps {
    position: relative;
    padding-left: 0.25rem;
}

.se-step {
    display: flex;
    gap: 0.75rem;
    position: relative;
    padding-bottom: 0.65rem;
}

.se-step.se-last {
    padding-bottom: 0;
}

.se-depth-1 { padding-left: 1.25rem; }
.se-depth-2 { padding-left: 2.5rem; }
.se-depth-3 { padding-left: 3.75rem; }

.se-connector {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    width: 14px;
    padding-top: 0.15rem;
}

.se-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--pass);
    background: var(--pass);
    flex-shrink: 0;
    z-index: 1;
}

.se-exceeded .se-dot {
    border-color: var(--fail);
    background: var(--fail);
}

.se-unknown .se-dot {
    border-color: var(--warn);
    background: transparent;
}

.se-unknown .se-mechanism {
    color: var(--text-secondary);
}

.se-step:not(.se-last)::before {
    content: '';
    position: absolute;
    left: calc(0.25rem + 7px - 1px);
    top: calc(0.15rem + 10px);
    bottom: 0;
    width: 2px;
    background: var(--border);
    z-index: 0;
}

.se-depth-1:not(.se-last)::before { left: calc(1.25rem + 0.25rem + 7px - 1px); }
.se-depth-2:not(.se-last)::before { left: calc(2.5rem + 0.25rem + 7px - 1px); }
.se-depth-3:not(.se-last)::before { left: calc(3.75rem + 0.25rem + 7px - 1px); }

.se-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.se-mechanism {
    font-family: var(--font-mono);
    font-size: var(--font-sm);
    font-weight: 500;
    color: var(--text-primary);
    min-width: 0;
    overflow-wrap: anywhere;
}

.se-counter {
    display: inline-block;
    font-size: var(--font-xs);
    font-weight: 500;
    padding: 0.1rem 0.4rem;
    border-radius: var(--radius-sm);
    letter-spacing: 0.02em;
    color: var(--pass);
    background: var(--pass-bg);
    border: 1px solid var(--pass-border);
    white-space: nowrap;
}

.se-counter.exceeded {
    color: var(--fail-text);
    background: var(--fail-bg);
    border-color: var(--fail-border);
}

/* ── SPF Execution Animations ─────────────────────────────── */
.se-animated .se-step {
    animation: twStepIn 0.35s var(--ease-out) backwards;
}

.se-animated .se-step:not(.se-last)::before {
    transform-origin: top;
    animation: twLineGrow 0.25s var(--ease-out) backwards;
    animation-delay: var(--line-delay, 0.18s);
}

.se-animated .se-intro {
    animation: twMetaIn 0.35s var(--ease-out) backwards;
    animation-delay: 0.02s;
}

@media (max-width: 640px) {
    .spf-execution { padding: 1.1rem 1rem; }
    .se-mechanism { font-size: var(--font-xs); }
    .se-depth-1 { padding-left: 0.75rem; }
    .se-depth-2 { padding-left: 1.5rem; }
    .se-depth-3 { padding-left: 2.25rem; }
}

/* ==========================================================================
   DMARC EVALUATION SUMMARY
   ========================================================================== */
.dmarc-eval {
    margin: 1rem 0;
    padding: var(--space-lg);
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.de-intro {
    font-size: var(--font-sm);
    color: var(--text-secondary);
    line-height: 1.65;
    margin-bottom: 1rem;
}

.de-rows {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.de-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.75rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: var(--font-sm);
}

.de-row.de-final {
    border-width: 2px;
    font-weight: 500;
}

.de-protocol {
    font-family: var(--font-mono);
    font-size: var(--font-xs);
    font-weight: 500;
    color: var(--text-primary);
    min-width: 3.2rem;
}

.de-align-mode { font-size: var(--font-xs); color: var(--text-tertiary); }
.de-align-result { font-size: var(--font-xs); font-weight: 500; }

.de-note {
    font-size: var(--font-xs);
    color: var(--text-muted);
    font-style: italic;
    width: 100%;
    margin-top: 0.15rem;
}

.de-mailing-list-note {
    font-size: var(--font-xs);
    color: var(--text-muted);
    font-style: italic;
    margin-top: 0.6rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border);
}

.de-aligned { color: var(--pass); }
.de-not-aligned { color: var(--fail-text); }

.de-policy-group {
    font-size: var(--font-xs);
    color: var(--text-secondary);
    font-weight: 400;
}

.de-disposition {
    font-size: var(--font-xs);
    color: var(--text-secondary);
    margin-left: auto;
    font-style: italic;
}

/* ── DMARC Eval Animations ────────────────────────────────── */
.de-animated .de-row {
    animation: twStepIn 0.35s var(--ease-out) backwards;
}

.de-animated .de-row:nth-child(1) { animation-delay: 0.05s; }
.de-animated .de-row:nth-child(2) { animation-delay: 0.2s; }
.de-animated .de-row:nth-child(3) { animation-delay: 0.35s; }

.de-animated .de-intro {
    animation: twMetaIn 0.35s var(--ease-out) backwards;
    animation-delay: 0.02s;
}

@media (max-width: 640px) {
    .dmarc-eval { padding: 1.1rem 1rem; }
    .de-row { flex-wrap: wrap; gap: 0.35rem; }
    .de-disposition { margin-left: 0; width: 100%; }
}

/* ==========================================================================
   DMARC REPORT DELIVERY CHAIN
   ========================================================================== */
.report-chain {
    margin: 1rem 0;
    padding: var(--space-lg);
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.rc-intro {
    font-size: var(--font-sm);
    color: var(--text-secondary);
    line-height: 1.65;
    margin-bottom: 1rem;
}

.rc-intro-warn {
    color: var(--fail-text);
    font-weight: 500;
}

.rc-dests {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.rc-dest {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: var(--font-sm);
    flex-wrap: wrap;
}

.rc-type {
    display: inline-block;
    font-size: var(--font-xs);
    font-weight: 500;
    padding: 0.1rem 0.4rem;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

.rc-type-rua {
    color: var(--pass);
    background: var(--pass-bg);
    border: 1px solid var(--pass-border);
}

.rc-type-ruf {
    color: var(--text-tertiary);
    background: rgba(100, 116, 139, 0.1);
    border: 1px solid var(--border);
}

.rc-address {
    font-family: var(--font-mono);
    font-size: var(--font-sm);
    color: var(--text-primary);
    min-width: 0;
    overflow-wrap: anywhere;
}

.rc-auth {
    font-size: var(--font-xs);
    font-weight: 500;
    flex-shrink: 0;
    margin-left: auto;
}

.rc-authorized { color: var(--pass); }
.rc-unauthorized { color: var(--fail-text); }
.rc-same-domain { color: var(--text-tertiary); }
.rc-mx-ok { font-size: var(--font-xs); color: var(--pass); flex-shrink: 0; }
.rc-mx-fail { font-size: var(--font-xs); color: var(--fail-text); flex-shrink: 0; }

.rc-footnote {
    margin-top: 0.85rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
    font-size: var(--font-xs);
    color: var(--text-tertiary);
    line-height: 1.65;
}

/* -- Report Chain Animations -- */
.rc-animated .rc-dest {
    animation: twStepIn 0.35s var(--ease-out) backwards;
}

.rc-animated .rc-intro {
    animation: twMetaIn 0.35s var(--ease-out) backwards;
    animation-delay: 0.02s;
}

@media (max-width: 640px) {
    .report-chain { padding: 1.1rem 1rem; }
    .rc-dest { gap: 0.35rem; }
    .rc-address { font-size: var(--font-xs); }
    .rc-auth { margin-left: 0; width: 100%; }
}

/* ==========================================================================
   SPF INCLUDE TREE
   ========================================================================== */
.spf-tree {
    margin: 1rem 0;
    padding: var(--space-lg);
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

/* SPF Budget Bar */
.st-budget {
    margin-bottom: 1rem;
}

.st-budget-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-sm);
    color: var(--text-primary);
    margin-bottom: 0.35rem;
}

.st-budget-status {
    font-size: var(--font-xs);
    font-weight: 500;
    padding: 0.12rem 0.5rem;
    border-radius: var(--radius-sm);
}

.st-budget-status.st-bar-warn {
    color: var(--warn);
    background: var(--warn-bg);
}

.st-budget-status.st-bar-over {
    color: var(--fail-text);
    background: var(--fail-bg);
}

.st-budget-track {
    height: 8px;
    width: 100%;
    background: var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.st-budget-fill {
    height: 100%;
    border-radius: var(--radius-sm);
    transition: width 0.6s var(--ease-out);
}

.st-budget-fill.st-bar-ok { background: var(--pass); }
.st-budget-fill.st-bar-warn { background: var(--warn); }
.st-budget-fill.st-bar-over { background: var(--fail); }

.st-budget-note {
    font-size: var(--font-xs);
    color: var(--text-tertiary);
    margin-top: 0.35rem;
    line-height: 1.5;
}

.st-tree-label {
    font-size: var(--font-xs);
    color: var(--text-tertiary);
    margin-bottom: 0.5rem;
    font-style: italic;
}

.st-cost-root {
    color: var(--primary-light);
    background: var(--primary-subtle);
    border: 1px solid var(--primary-border);
}

.st-cost-leaf {
    color: var(--text-tertiary);
    background: rgba(100, 116, 139, 0.1);
    border: 1px solid var(--border);
}

details.st-node {
    margin-bottom: 0.25rem;
}

details.st-node>summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.5rem;
    cursor: pointer;
    border-radius: var(--radius);
    min-height: 44px;
    font-size: var(--font-sm);
    list-style: none;
}

details.st-node>summary::-webkit-details-marker {
    display: none;
}

details.st-node>summary::before {
    content: '\25B6';
    font-size: var(--font-xs);
    color: var(--text-tertiary);
    transition: transform 0.15s ease;
    flex-shrink: 0;
    width: 12px;
}

details.st-node[open]>summary::before {
    transform: rotate(90deg);
}

details.st-node>summary:hover {
    background: var(--surface-hover);
}

.st-domain {
    font-family: var(--font-mono);
    font-size: var(--font-sm);
    font-weight: 500;
    color: var(--text-primary);
    min-width: 0;
    overflow-wrap: anywhere;
}

.st-cost {
    display: inline-block;
    font-size: var(--font-xs);
    font-weight: 500;
    padding: 0.1rem 0.4rem;
    border-radius: var(--radius-sm);
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.st-budget-low { color: var(--pass); background: var(--pass-bg); border: 1px solid var(--pass-border); }
.st-budget-mid { color: var(--warn); background: var(--warn-bg); border: 1px solid var(--warn-border); }
.st-budget-high { color: var(--fail-text); background: var(--fail-bg); border: 1px solid var(--fail-border); }

.st-children {
    padding-left: 1.25rem;
    border-left: 2px solid var(--border);
    margin-left: 0.5rem;
}

.st-record {
    font-family: var(--font-mono);
    font-size: var(--font-xs);
    color: var(--text-secondary);
    padding: 0.35rem 0.65rem;
    margin: 0.25rem 0 0.25rem 1.5rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow-x: auto;
    white-space: nowrap;
    line-height: 1.5;
}

.st-ips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.25rem 0 0.25rem 1.5rem;
}

.st-ip {
    display: inline-block;
    max-width: 100%;
    overflow-wrap: anywhere;
    font-family: var(--font-mono);
    font-size: var(--font-xs);
    padding: 0.1rem 0.35rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
}

.st-terminal {
    font-family: var(--font-mono);
    font-size: var(--font-sm);
    font-weight: 500;
    color: var(--text-primary);
    padding: 0.35rem 0.65rem;
    margin-top: 0.5rem;
    border-top: 1px solid var(--border);
}

/* -- SPF Tree Animations -- */
.st-animated>details.st-node {
    animation: twStepIn 0.35s var(--ease-out) backwards;
    animation-delay: 0.05s;
}

.st-animated .st-children>details.st-node {
    animation: twStepIn 0.35s var(--ease-out) backwards;
    animation-delay: 0.2s;
}

@media (max-width: 640px) {
    .spf-tree { padding: 1.1rem 1rem; }
    .st-children { padding-left: 0.75rem; }
    .st-record { margin-left: 0.75rem; font-size: var(--font-xs); }
    .st-ips { padding-left: 0.75rem; }
}

/* Doc 67: the two labelled parts an opened card starts with. The label
   matches .plan-part-label so a card and a plan row read the same, and the
   line itself matches .explanation so the two parts sit at one weight. */
.check-part-label {
    font-size: var(--font-xs);
    font-weight: 600;
    color: var(--text-tertiary);
    margin-top: var(--space-md);
    margin-bottom: var(--space-xs);
}

.result-body-inner > .check-part-label:first-child {
    margin-top: 0;
}

.check-part-label + .explanation,
.check-part-label + .what-this-is {
    margin-top: 0;
}

.what-this-is {
    font-size: var(--font-base);
    color: var(--text-secondary);
    line-height: 1.75;
    margin: 0.6rem 0;
}

/* Explanation text */
.explanation {
    font-size: var(--font-base);
    color: var(--text-secondary);
    line-height: 1.75;
    margin: 0.6rem 0;
}

.explanation strong {
    color: var(--text-primary);
    font-weight: 600;
}

/* Detail items (sub-findings) */
.detail-item {
    display: flex;
    /* Wrap stays: .business-risk-callout is a third child that relies on it
       to drop onto its own line (flex: 1 1 100%). The text span below is
       what must never wrap as a whole. */
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-sm);
    font-size: var(--font-sm);
    line-height: 1.6;
    margin: var(--space-sm) 0;
}

.detail-icon {
    display: inline-flex;
    flex: 0 0 16px;
    margin-top: 2px;
}

/* The text beside the icon. With a flex-basis of 0 it never asks for more
   than the line has left, so it fills the space beside the icon and wraps
   inside itself. Without this, any text too long to fit on the icon's line
   wrapped to the next line as a whole and left the icon alone on a line of
   its own: 56 of 85 detail rows on a phone. */
.detail-icon + span {
    flex: 1 1 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

.detail-item.pass-item { color: var(--pass); }
.detail-item.warn-item { color: var(--warn); }
.detail-item.fail-item { color: var(--fail-text); }
.detail-item.info-item { color: var(--text-secondary); }

/* Business impact callout (Prompt: SPF/DMARC/DKIM business_risk) */
.business-risk-callout {
    /* Grows to its own line (basis 100% plus the left margin cannot share
       one) and may shrink: with flex-shrink 0 the margin pushed it past the
       row by 1.5rem, which cleared the card edge only at a 16px root (Doc 87). */
    flex: 1 1 100%;
    margin: 0.4rem 0 0.1rem 1.5rem;
    padding: 0.5rem 0.75rem;
    border-left: 3px solid var(--warn);
    background: var(--warn-bg);
    border-radius: var(--radius-sm);
    font-size: var(--font-sm);
    line-height: 1.55;
    color: var(--text-secondary);
}
.business-risk-label {
    display: inline;
    font-weight: 500;
    color: var(--warn);
    margin-right: 0.4rem;
}
.business-risk-text {
    color: var(--text-secondary);
}
@media (max-width: 640px) {
    .business-risk-callout {
        margin-left: 0;
    }
    .business-risk-label {
        display: block;
        margin-bottom: 0.2rem;
    }
}

/* ==========================================================================
   VENDORS
   ========================================================================== */
.vendors-section {
    display: none;
    margin-top: var(--space-lg);
}

.vendors-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0.65rem;
}

/* Name over its detail line: the detail is a phrase ("Detected via SPF, MX,
   DKIM CNAME", "Receives your DMARC reports"), and beside the name it
   squeezed both into a narrow column with no space between them. */
.vendor-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.95rem 1.1rem;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    transition: box-shadow var(--duration) var(--ease);
}

.vendor-card:hover {
    box-shadow: var(--shadow-md);
}

.vendor-name {
    font-weight: 600;
    font-size: var(--font-sm);
    color: var(--text-primary);
}

.vendor-confidence {
    font-size: var(--font-xs);
    font-weight: 400;
    color: var(--text-tertiary);
}

/* ==========================================================================
   PROVIDER INTELLIGENCE (Prompt 19)
   ========================================================================== */

.pi-section {
    margin-top: var(--space-lg);
}

.pi-gateway-note {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    background: rgba(96, 165, 250, 0.08);
    border: 1px solid rgba(96, 165, 250, 0.25);
    border-radius: var(--radius);
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
    font-size: var(--font-sm);
    color: var(--text-secondary);
    line-height: 1.5;
}

.pi-gateway-icon {
    font-size: var(--font-lg);
    flex-shrink: 0;
    margin-top: 0.05rem;
}

.pi-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 0.75rem;
    overflow: hidden;
    transition: box-shadow var(--duration) var(--ease);
}

.pi-card:hover {
    box-shadow: var(--shadow-md);
}

.pi-card-primary {
    border-left: 3px solid var(--primary);
}

.pi-card-compact {
    border-left: 3px solid var(--border);
}

.pi-card-header {
    padding: 0.9rem 1.1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.pi-provider-info {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.pi-provider-name {
    font-weight: 600;
    font-size: var(--font-md);
    color: var(--text-primary);
}

.pi-detected-via {
    font-size: var(--font-xs);
    color: var(--text-tertiary);
}

.pi-guidance-toggle {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    width: 100%;
    padding: 0.6rem 1.1rem;
    background: rgba(148, 163, 184, 0.05);
    border: none;
    border-top: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: var(--font-sm);
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: background var(--duration) var(--ease);
}

.pi-guidance-toggle:hover {
    background: rgba(148, 163, 184, 0.1);
}

.pi-chevron {
    display: inline-flex;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.pi-guidance-toggle[aria-expanded="true"] .pi-chevron {
    transform: rotate(180deg);
}

.pi-guidance-body {
    padding: 0.5rem 1.1rem 0.85rem;
    border-top: 1px solid var(--border);
}

.pi-guidance-item {
    padding: 0.5rem 0;
    font-size: var(--font-sm);
    line-height: 1.55;
    color: var(--text-secondary);
}

.pi-guidance-item + .pi-guidance-item {
    border-top: 1px solid rgba(148, 163, 184, 0.08);
}

.pi-guidance-topic {
    display: inline-block;
    font-weight: 500;
    color: var(--text-primary);
    margin-right: 0.4rem;
    min-width: 5rem;
}

.pi-guidance-topic::after {
    content: ":";
}

.pi-scorecard {
    border-top: 1px solid var(--border);
    padding: 0.75rem 1.1rem;
}

.pi-scorecard-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-sm);
}

.pi-scorecard-table th {
    text-align: left;
    font-weight: 600;
    color: var(--text-tertiary);
    font-size: var(--font-xs);
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid var(--border);
}

.pi-scorecard-table td {
    padding: 0.45rem 0.5rem;
    color: var(--text-secondary);
    border-bottom: 1px solid rgba(148, 163, 184, 0.06);
}

.pi-scorecard-table tr:last-child td {
    border-bottom: none;
}

.pi-sc-center {
    text-align: center;
}

.pi-sending-header {
    font-size: var(--font-sm);
    font-weight: 500;
    color: var(--text-tertiary);
    margin: 1rem 0 0.5rem;
}

.pi-sending-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.65rem;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding: var(--space-xl) 0 calc(2rem + env(safe-area-inset-bottom));
    margin-top: var(--space-3xl);
    flex-shrink: 0;
    background: var(--bg-raised);
}

.footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    text-align: left;
}

.footer-left {
    display: flex;
    flex-direction: column;
    flex: 0 0 18rem;
    gap: 0.35rem;
}

.footer-brand-name {
    font-size: var(--font-md);
    font-weight: 500;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.footer-brand-desc {
    font-size: var(--font-sm);
    color: var(--text-secondary);
    line-height: 1.5;
}

.footer-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.4rem;
}

.footer-nav {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.footer-trust {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.35rem;
    font-size: var(--font-xs, 0.75rem);
    color: var(--text-muted);
}

.footer-trust .footer-link {
    font-size: inherit;
}

.footer-attribution .footer-link {
    font-size: inherit;
    font-weight: 500;
}

.footer-version {
    color: var(--text-muted);
    font-family: var(--font-mono);
}

.footer-dot {
    color: var(--text-muted);
    font-size: var(--font-base);
}

.footer-link {
    color: var(--primary-light);
    text-decoration: none;
    font-size: var(--font-base);
    font-weight: 500;
    transition: color var(--duration) var(--ease);
}

.footer-link:hover {
    color: var(--primary);
    text-decoration: underline;
}

.footer-attribution {
    font-size: var(--font-sm);
    color: var(--text-muted);
    /* Doc 39: one sentence with an inline link. The flex row only existed
       to sit the LinkedIn icon beside the text. */
    display: block;
}

/* ==========================================================================
   SCOPE SELECTOR
   ========================================================================== */
.scope-selector {
    margin-top: var(--space-lg);
}

.scope-label {
    font-size: var(--font-xs);
    font-weight: 500;
    color: var(--text-tertiary);
    margin-bottom: 0.55rem;
}

.scope-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.scope-desc {
    /* At 640px and below .scope-selector is itself a flex row, so this has
       to claim the full width or it lands beside the buttons. */
    flex: 1 0 100%;
    margin: 0.6rem 0 0;
    font-size: var(--font-sm);
    line-height: 1.5;
    color: var(--text-secondary);
    /* One line of space is always reserved, so switching between a short
       description and a long one moves the input below by at most a line. */
    min-height: 1.5em;
    max-width: 64ch;
}

.scope-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.42rem 0.8rem;
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-lg);
    font-family: var(--font-body);
    font-size: var(--font-sm);
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--duration) var(--ease);
    white-space: nowrap;
}

.scope-btn:hover {
    border-color: var(--primary-border);
    color: var(--primary-light);
    background: var(--primary-subtle);
}

.scope-btn.active {
    background: var(--primary-solid);
    border-color: var(--primary-solid);
    color: var(--text-inverse);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.scope-btn.active svg {
    stroke: var(--text-inverse);
}

.scope-btn svg {
    flex-shrink: 0;
}

/* Run another audit */
.run-another {
    text-align: center;
    padding: 2rem 0 0.5rem;
}

.run-another-btn {
    display: inline-flex;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
/* Tablet breakpoint */
@media (max-width: 820px) {
}

/* iPad portrait */
@media (max-width: 768px) {
    .audit-input-card {
        padding: var(--space-xl) var(--space-lg);
    }

    .scope-btn {
        font-size: var(--font-xs);
        padding: 0.4rem 0.7rem;
    }

    .nav-link {
        font-size: var(--font-xs);
        padding: 0.25rem 0.45rem;
    }

    .domain-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .banner-actions {
        width: 100%;
        flex-wrap: wrap;
    }

    .banner-actions .share-btn {
        flex: 1;
        min-width: 0;
        justify-content: center;
        min-height: 44px;
    }
}

/* Mobile breakpoint */
@media (max-width: 640px) {
    .container {
        padding: 0 max(var(--space-md), env(safe-area-inset-right)) 0 max(var(--space-md), env(safe-area-inset-left));
    }

    /* At 320 wide the wordmark and the nav with its 44px targets do not
       fit on one line; the nav takes a second line rather than pushing the
       theme toggle off the right edge. */
    .site-header .header-inner {
        height: auto;
        padding-top: 0.65rem;
        padding-bottom: 0.65rem;
        flex-wrap: wrap;
        row-gap: 0.25rem;
    }

    .site-nav {
        gap: 0.1rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        flex-wrap: nowrap;
    }

    .site-nav::-webkit-scrollbar {
        display: none;
    }

    .audit-input-section {
        padding-top: var(--space-xl);
    }

    .audit-title {
        font-size: var(--font-2xl);
    }

    .audit-subtitle {
        font-size: var(--font-sm);
    }

    .input-row,
.input-row.input-unified {
        flex-direction: column;
        gap: 0.75rem;
        width: 100%;
        max-width: 100%;
    }

    .input-wrapper,
.input-unified .input-wrapper {
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
        overflow: visible;
        position: relative;
        z-index: 10;
    }

    .domain-input,
.input-unified .domain-input {
        min-width: 0;
        width: 100%;
        flex: 1 1 0%;
        -webkit-appearance: none;
        appearance: none;
        font-size: var(--font-md);
        position: relative;
        z-index: 10;
        border-radius: var(--radius);
    }

    .audit-input-card {
        padding: var(--space-lg) var(--space-md);
        overflow: visible;
        position: relative;
    }

    #audit-btn {
        flex-shrink: 0;
        white-space: nowrap;
        position: relative;
        z-index: 10;
        min-height: 48px;
        justify-content: center;
    }

    .domain-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .banner-actions {
        width: 100%;
        flex-wrap: wrap;
        gap: 0.375rem;
    }

    /* Three buttons share 358px at 390 wide. Without nowrap "PDF Report"
       broke onto two lines while Export and Share stayed on one. */
    .banner-actions .share-btn {
        flex: 1;
        min-width: 0;
        justify-content: center;
        white-space: nowrap;
        padding-inline: 0.5rem;
        min-height: 44px;
    }

    .result-header {
        padding: 0.85rem 1rem;
        gap: 0.5rem;
        min-height: 44px;
        flex-wrap: wrap;
    }

    .result-title {
        font-size: var(--font-base);
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        flex: 1 1 0;
    }

    /* Doc 92: the verdict line shows on phones, on its own line under the
       title (the header wraps), so a closed row says more than an acronym
       and a pill. */
    .result-verdict {
        order: 10;
        flex: 1 1 100%;
        text-align: left;
        white-space: normal;
        padding-left: calc(16px + 0.5rem);
    }

    .result-card.expanded .result-body-inner {
        padding: 20px var(--space-md);
    }

    .record-block {
        font-size: var(--font-sm);
        padding: 0.75rem 0.85rem;
        padding-right: 4.25rem;
    }

    .vendors-grid {
        grid-template-columns: 1fr;
    }

    .pi-sending-grid {
        grid-template-columns: 1fr;
    }

    .pi-card-header {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Footer stacks on mobile */
    .footer-inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 1.25rem;
    }

    .footer-right {
        align-items: center;
    }

    /* In a column the 18rem basis would be a height. */
    .footer-left {
        flex: none;
        align-items: center;
    }

    .priority-section {
        padding: 1.1rem 1.25rem;
    }

    .scope-options,
.scope-selector {
        display: flex;
        flex-wrap: wrap;
        gap: 0.4rem;
    }

    .scope-btn {
        font-size: var(--font-xs);
        padding: 0.35rem 0.6rem;
        flex: 0 0 auto;
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    .scope-btn svg {
        width: 12px;
        height: 12px;
        display: none;
    }

    .toggle-all-btn {
        min-height: 44px;
    }

    .explanation,
    .what-this-is {
        font-size: var(--font-sm);
    }

    .detail-item {
        font-size: var(--font-sm);
    }

    .st-seg {
        min-height: 44px;
        padding: 0.4rem 0.85rem;
    }

    .st-seg-group {
        min-width: min(220px, 100%);
    }

    .spfd-mechs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .de-rows {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .pdf-btn {
        background: var(--primary-solid);
        color: var(--text-inverse);
        border-color: var(--primary-solid);
        order: -1;
        flex-basis: 100%;
    }

    .pdf-btn:hover {
        background: var(--primary-solid-hover);
    }

    .loading-card {
        padding: 1.35rem 1.15rem;
    }

    .tw-domain {
        word-break: break-all;
    }

    .tw-record {
        font-size: var(--font-xs);
    }

    .tw-footnote {
        font-size: var(--font-xs);
    }

    .selector-input {
        max-width: 100%;
    }

    .footer-attribution {
        text-align: center;
    }

    .run-another-btn {
        width: 100%;
        justify-content: center;
    }

    .error-message {
        font-size: var(--font-sm);
    }
}

@media (max-width: 400px) {
    .banner-actions .share-btn span {
        font-size: var(--font-xs);
    }

    .scope-btn span {
        font-size: var(--font-xs);
    }
}

/* ============================================================
   Defensive DNS callout card
   ============================================================ */

.defensive-signals {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.defensive-signal {
    font-size: var(--font-xs);
    font-weight: 500;
    color: var(--pass);
    background: rgba(16, 185, 129, 0.08);
    padding: 0.25rem 0.6rem;
    border-radius: var(--radius-sm);
}

/* ==========================================================================
   Authentication Resilience
   ========================================================================== */

.resilience-summary {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.65rem;
}

.resilience-text {
    font-size: var(--font-sm);
    color: var(--text-primary);
    line-height: 1.5;
}

.resilience-mechanisms {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.65rem;
}

.resilience-mech {
    display: flex;
    flex-wrap: wrap;
    min-width: 0;
    max-width: 100%;
    align-items: center;
    gap: 0.35rem;
    font-size: var(--font-xs);
    padding: 0.3rem 0.6rem;
    background: var(--bg-raised);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}

.resilience-mech-name {
    font-weight: 500;
    font-family: var(--font-mono);
    font-size: var(--font-xs);
    color: var(--text-primary);
}

.resilience-mech-note {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: var(--font-xs);
    color: var(--text-tertiary);
}

.resilience-risk-text {
    font-size: var(--font-sm);
    color: var(--text-secondary);
    line-height: 1.6;
    padding: 0.5rem 0.75rem;
    background: var(--bg-raised);
    border-left: 3px solid var(--primary-border);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* ==========================================================================
   Fix Preview
   ========================================================================== */

.fix-preview {
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px dashed var(--border);
}

.fix-preview-label {
    font-size: var(--font-sm);
    font-weight: 500;
    color: var(--pass);
    margin-bottom: 0.65rem;
}

.fix-preview-item {
    margin-bottom: 0.85rem;
}

.fix-preview-host {
    font-size: var(--font-sm);
    color: var(--text-secondary);
    margin-bottom: 0.45rem;
}

.fix-preview-host strong {
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: var(--font-xs);
}

.fix-record-block {
    font-family: var(--font-mono);
    font-size: var(--font-sm);
    line-height: 1.75;
    background: var(--fix-bg);
    border: 1px solid var(--pass-border);
    border-left: 3px solid var(--fix-border);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    padding-right: 3.75rem;
    margin: 0.4rem 0;
    word-break: break-all;
    position: relative;
    color: var(--text-primary);
}

.fix-record-value {
    color: var(--text-primary);
}

.fix-comment {
    font-size: var(--font-xs);
    color: var(--text-tertiary);
    margin-top: 0.3rem;
    line-height: 1.5;
}

/* ==========================================================================
   Anomalies
   ========================================================================== */

.anomalies-section {
    margin-bottom: var(--space-xl);
}

.anomalies-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--primary-light);
    margin-bottom: 0.65rem;
}

.anomalies-header svg {
    color: var(--primary-light);
}

.anomaly-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--border);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
}

.anomaly-card.anomaly-fail {
    border-left-color: var(--fail);
    background: var(--fail-bg);
}

.anomaly-card.anomaly-warn {
    border-left-color: var(--warn);
    background: var(--warn-bg);
}

.anomaly-card.anomaly-info {
    border-left-color: var(--primary-light);
    background: var(--primary-subtle);
}

.anomaly-top {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.3rem;
}

.anomaly-title {
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--text-primary);
}

.anomaly-desc {
    font-size: var(--font-sm);
    color: var(--text-secondary);
    line-height: 1.55;
}

.anomaly-rec {
    font-size: var(--font-xs);
    color: var(--pass);
    margin-top: 0.3rem;
    line-height: 1.5;
}

.anomaly-rec::before {
    content: "\2192  ";
}

/* ==========================================================================
   iOS INPUT STYLING RESET (global, not inside media query)
   ========================================================================== */
input[type="text"],
input[type="search"],
.domain-input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: var(--radius);
}

/* ==========================================================================
   RESPONSIVE FIXES
   ========================================================================== */

/* (640px additional rules merged into main mobile block below) */

@media (max-width: 400px) {
    .loading-card {
        padding: 1.15rem 1rem;
    }

    .tree-walk {
        padding: 1rem 0.85rem;
    }

    .tw-domain {
        font-size: var(--font-xs);
    }

    .tw-record {
        font-size: var(--font-xs);
    }

    .priority-section {
        padding: 1rem 1.1rem;
    }

    .scope-btn {
        flex: 1 1 calc(50% - 0.2rem);
        justify-content: center;
        text-align: center;
    }

    .audit-input-card {
        padding: 1.5rem 1.15rem 1.4rem;
    }

    .audit-title {
        font-size: var(--font-xl);
    }

    .audit-subtitle {
        font-size: var(--font-sm);
    }

    .result-header {
        padding: 0.75rem 0.85rem;
    }
}

/* On the smallest phones the icon, the validity tick's room and the button
   left the field about forty pixels of text: "example.com" read "exampl".
   Tighter padding and body-size text give the domain the room instead. */
@media (max-width: 400px) {
    .input-unified .audit-btn {
        padding: 0 0.9rem;
    }
    .domain-input-wrap .domain-input {
        font-size: var(--font-base);
        padding-left: 2.4rem;
        padding-right: 1.9rem;
    }
}

@media (max-width: 320px) {
    .container {
        padding: 0 0.75rem;
    }

    .scope-btn span {
        font-size: var(--font-xs);
    }

    .record-block {
        font-size: var(--font-xs);
        padding: 0.65rem 0.75rem;
        padding-right: 4.25rem;
    }

    .copy-btn {
        font-size: var(--font-xs);
        padding: 0.5rem 0.8rem;
        min-height: 44px;
    }
}

/* ==========================================================================
   FOCUS, NOTCH, LANDSCAPE, PRINT
   ========================================================================== */

.scope-btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: var(--radius-lg);
}

.share-btn:focus-visible,
.pdf-btn:focus-visible,
.toggle-all-btn:focus-visible,
.error-retry:focus-visible,
.run-another-btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: var(--radius);
}

.copy-btn:focus-visible,
.st-seg:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.selector-toggle:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.result-header:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
    border-radius: var(--radius-lg);
}

@media (max-width: 640px) {
}

/* Landscape phone */
@media (max-height: 500px) and (orientation: landscape) {
    .audit-input-section {
        padding-top: 1.5rem;
        padding-bottom: 1rem;
    }

    .audit-input-card {
        padding: 1.35rem 1.5rem 1.25rem;
    }

    .audit-title {
        font-size: var(--font-xl);
        margin-bottom: 0.25rem;
    }

    .audit-subtitle {
        margin-bottom: 0.3rem;
    }

    .scope-selector {
        margin-bottom: 1rem;
    }

    .site-header .header-inner {
        height: 48px;
    }
}

/* ==========================================================================
   TOP PROGRESS BAR
   ========================================================================== */
.top-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, var(--primary), var(--dmarcbis));
    z-index: 9999;
    transition: width 300ms ease-out;
    box-shadow: 0 0 8px var(--primary-subtle);
    pointer-events: none;
}

.top-progress-bar.complete {
    width: 100% !important;
    opacity: 0;
    transition: width 200ms ease-out, opacity 400ms ease 200ms;
}

/* ==========================================================================
   BACK TO TOP BUTTON
   ========================================================================== */
.back-to-top {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: var(--font-lg);
    cursor: pointer;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 200ms ease, transform 200ms ease, background 150ms ease, color 150ms ease;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.back-to-top.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.back-to-top:hover {
    background: var(--surface-hover);
    color: var(--text-primary);
}

@media (max-width: 640px) {
    .back-to-top {
        bottom: 16px;
        right: 16px;
    }
}

/* ==========================================================================
   COPY ALL RECORDS BUTTON
   ========================================================================== */
.copy-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.85rem;
    background: transparent;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: var(--font-sm);
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: border-color var(--duration) var(--ease), color var(--duration) var(--ease), background var(--duration) var(--ease);
}

.copy-all-btn:hover {
    border-color: var(--primary-border);
    color: var(--text-primary);
    background: var(--surface-hover);
}

.copy-all-btn.copied {
    color: var(--pass);
    border-color: var(--pass-border);
}

/* Print stylesheet */
@media print {
    .site-header,
.audit-input-section,
.loading-section,
.banner-actions,
.toggle-all-btn,
.run-another,
.site-footer,
.scope-selector,
.copy-btn,
.back-to-top,
.top-progress-bar,
.copy-all-btn {
        display: none !important;
    }

    body {
        background: white;
        color: black;
    }

    .results-section {
        display: block !important;
    }

    .result-card {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ccc;
    }

    .result-card.expanded .result-body {
        grid-template-rows: 1fr;
    }

    .result-body-inner {
        padding: 0 1rem 1rem;
        border-top: 1px solid #ccc;
        padding-top: 0.75rem;
    }

    .record-block {
        background: #f5f5f5;
        color: #333;
        border: 1px solid #ccc;
    }

    .priority-section {
        border: 1px solid #ccc;
        background: #fff;
    }
}

/* ── Executive Summary (Prompt 16) ────────────────────────── */

.es-block {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem 1.75rem;
    margin-bottom: var(--space-xl);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18), 0 1px 3px rgba(0, 0, 0, 0.1);
}

.es-verdict {
    font-size: var(--font-lg);
    font-weight: 700;
    line-height: 1.45;
    color: var(--text-primary);
}

/* The headline box: a 3px bar in the state colour on the left, square
   corners on that side, and a 40px icon on a tint of the same colour.
   Neutral uses --text-tertiary on --border, the unavailable treatment. */
.es-block[class*="es-state-"] {
    border-left-width: 3px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.es-state-pass { border-left-color: var(--pass); }
.es-state-warn { border-left-color: var(--warn); }
.es-state-fail { border-left-color: var(--fail); }
.es-state-neutral { border-left-color: var(--text-tertiary); }

.es-state-pass .es-icon { color: var(--pass); background: var(--pass-bg); }
.es-state-warn .es-icon { color: var(--warn); background: var(--warn-bg); }
.es-state-fail .es-icon { color: var(--fail); background: var(--fail-bg); }
.es-state-neutral .es-icon { color: var(--text-tertiary); background: var(--border); }

.es-head {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.es-head:last-child,
.es-head:has(+ .es-first:empty) {
    margin-bottom: 0;
}

.es-icon {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.es-head-text {
    min-width: 0;
    flex: 1;
    align-self: center;
    overflow-wrap: anywhere;
}

.es-subline {
    font-size: var(--font-base);
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0.25rem 0 0;
}

.es-first:empty {
    display: none;
}

.es-tech-wrap {
    margin-bottom: var(--space-lg);
}

.es-metrics {
    display: flex;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}

.es-metric {
    flex: 1;
    text-align: center;
    padding: 0.85rem 0.5rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.es-metric-value {
    font-size: var(--font-xl);
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 0.25rem;
}

.es-metric-label {
    font-size: var(--font-xs);
    font-weight: 500;
    color: var(--text-muted);
    margin-bottom: 0.15rem;
}

.es-metric-detail {
    font-size: var(--font-xs);
    color: var(--text-muted);
}

.es-color-green { color: var(--pass); }
.es-color-amber { color: var(--warn); }
.es-color-red { color: var(--fail-text); }
.es-color-blue { color: var(--primary-light); }
.es-color-neutral { color: var(--text-tertiary); }

.es-metric-ring {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.25rem;
}

.es-ring {
    display: block;
}

.es-ring-text {
    position: absolute;
    font-size: var(--font-xs);
    font-weight: 700;
    color: var(--text-primary);
}

.es-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.es-action {
    font-size: var(--font-xs);
    font-weight: 600;
    padding: 0.4rem 0.85rem;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: transparent;
    color: var(--primary-light);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

.es-action:hover {
    background: var(--primary-subtle, rgba(96, 165, 250, 0.1));
    border-color: var(--primary-light);
}

.share-btn:active,
.scope-btn:active,
.toggle-all-btn:active,
.copy-btn:active,
.copy-all-btn:active,
.es-action:active {
    transform: scale(0.97);
}

/* Doc 92: the short answer. The headline and its subline, any defensive
   signals, then up to three numbered actions. The closed Technical summary
   (tiles, deliverability line, panel buttons) sits above the check cards. */
.es-first {
    margin-bottom: 1.25rem;
}

h2.es-first-label,
.es-first-label {
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--text-secondary);
    margin: 0 0 var(--space-sm);
}

.es-first-list {
    margin: 0;
    padding-left: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.es-first-item {
    color: var(--text-primary);
    line-height: 1.5;
}

.es-first-item::marker {
    font-weight: 700;
    color: var(--text-secondary);
}

.es-first-head {
    display: block;
    font-size: var(--font-base);
}

.es-first-title {
    display: block;
    font-size: var(--font-xs);
    color: var(--text-tertiary);
}

.es-first-note {
    font-size: var(--font-sm);
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0 0 var(--space-sm);
}

.es-defensive {
    margin: -0.5rem 0 1.25rem;
}

.es-defensive-body {
    font-size: var(--font-sm);
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 0.5rem;
}

.es-tech-toggle::after {
    content: "";
    width: 0.45em;
    height: 0.45em;
    margin-left: 0.5em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-0.15em) rotate(45deg);
    transition: transform var(--duration-slow) var(--ease-out);
}

.es-tech-toggle[aria-expanded="true"]::after {
    transform: translateY(0.1em) rotate(225deg);
}

.es-tech {
    margin-top: 1.25rem;
}

.es-tech-actions {
    margin-top: 1rem;
}

/* A panel title that repeated its Details sub-header (Doc 92). */
.cd-subsection .panel-title-repeat {
    display: none;
}

/* Services found in your DNS: one closed section for the vendor list and
   the email platform. */
.services-section {
    margin-top: var(--space-2xl);
}

h2.services-heading {
    margin: 0 0 var(--space-md);
}

.services-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    min-height: 44px;
    padding: 0;
    background: none;
    border: 0;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: inherit;
    cursor: pointer;
}

.services-toggle:hover {
    color: var(--text-primary);
}

.services-chevron {
    transition: transform var(--duration-slow) var(--ease-out);
}

.services-toggle[aria-expanded="true"] .services-chevron {
    transform: rotate(180deg);
}

h3.services-sub,
.services-sub {
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--text-secondary);
    margin: var(--space-md) 0 var(--space-sm);
}

@media (max-width: 640px) {
    .es-block {
        padding: 1rem 1.1rem;
    }

    .es-verdict {
        font-size: var(--font-md);
    }

    .es-metrics {
        flex-direction: column;
        gap: 0.65rem;
    }

    .es-metric-value {
        font-size: var(--font-lg);
    }

    .es-actions {
        flex-direction: column;
    }

    .es-action {
        justify-content: center;
    }
}

@media (max-width: 400px) {
    .es-metrics {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .es-metric {
        padding: 0.65rem 0.85rem;
    }

    .es-action {
        width: 100%;
        text-align: center;
    }
}

/* ── DKIM Key Analysis ────────────────────────────────────── */

.dk-block {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    margin: 0.85rem 0;
}

.dk-key {
    padding: 0.6rem 0.7rem;
    border-radius: var(--radius);
    margin-bottom: 0.4rem;
    border: 1px solid var(--border);
}

.dk-rating-green { border-left: 3px solid var(--pass); }
.dk-rating-amber { border-left: 3px solid var(--warn); }
.dk-rating-red { border-left: 3px solid var(--fail); }
/* A retired key (empty p=, RFC 6376 3.6.1) is correctly published, so it takes
   the same neutral grey as .status-icon.unavailable rather than a verdict
   colour. Without this rule the row rendered with no stripe at all. */
.dk-rating-neutral { border-left: 3px solid var(--text-secondary); }

.dk-key-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.dk-selector {
    font-family: var(--font-mono);
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--text-primary);
}

.dk-key-info {
    font-size: var(--font-xs);
    color: var(--text-muted);
}

.dk-key-detail {
    font-size: var(--font-xs);
    color: var(--text-primary);
    margin-top: 0.2rem;
    line-height: 1.4;
}

.dk-fields {
    margin-top: 0.3rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.dk-rotation {
    font-size: var(--font-xs);
    color: var(--text-primary);
    padding: 0.4rem 0.65rem;
    background: var(--primary-subtle);
    border-left: 2px solid var(--primary);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    margin-top: 0.5rem;
    line-height: 1.4;
}

/* ── SPF Deep Analysis ────────────────────────────────────── */

.spfd-block {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    margin: 0.85rem 0;
}

.spfd-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.6rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}

.spfd-title {
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--text-primary);
}

.spfd-mechs {
    margin-bottom: 0.6rem;
}

.spfd-mechs-header {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 0.5rem;
    padding: 0.2rem 0.4rem;
    font-size: var(--font-xs);
    color: var(--text-muted);
    font-weight: 500;
}

.spfd-mech-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 0.5rem;
    align-items: center;
    padding: 0.3rem 0.4rem;
    border-radius: var(--radius-sm);
    font-size: var(--font-sm);
}

.spfd-mech-row:hover {
    background: rgba(255, 255, 255, 0.02);
}

.spfd-mech-raw {
    font-family: var(--font-mono);
    font-size: var(--font-xs);
    color: var(--text-primary);
    word-break: break-all;
}

.spfd-cost {
    font-family: var(--font-mono);
    font-size: var(--font-xs);
    font-weight: 500;
    width: 1.4rem;
    height: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--code-bg);
    color: var(--primary-light);
}

.spfd-cost-zero {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-muted-raised);
}

.spfd-provider {
    font-size: var(--font-xs);
    font-weight: 500;
    padding: 0.1rem 0.4rem;
    border-radius: var(--radius-sm);
    background: var(--pass-bg);
    color: var(--pass);
    white-space: nowrap;
}

.spfd-all {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem 0.65rem;
    border-radius: var(--radius-sm);
    margin-bottom: 0.5rem;
}

.spfd-all-info { background: rgba(255, 255, 255, 0.03); }
.spfd-all-warning { background: var(--warn-bg); border-left: 3px solid var(--warn); }
.spfd-all-critical { background: var(--fail-bg); border-left: 3px solid var(--fail); }

.spfd-all-mech {
    font-family: var(--font-mono);
    font-size: var(--font-xs);
    font-weight: 500;
    flex-shrink: 0;
}

.spfd-all-text {
    font-size: var(--font-xs);
    color: var(--text-primary);
    line-height: 1.4;
}

.spfd-misconfigs {
    margin-top: 0.5rem;
}

.spfd-opt {
    font-size: var(--font-xs);
    color: var(--text-primary);
    padding: 0.35rem 0.6rem;
    background: var(--primary-subtle);
    border-left: 2px solid var(--primary);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    margin-top: 0.4rem;
    line-height: 1.4;
}

@media (max-width: 640px) {
    .spfd-mechs-header { display: none; }
    .spfd-mech-row { grid-template-columns: 1fr; gap: 0.2rem; }
}

/* ── Attack Surface View ──────────────────────────────────── */

.as-block {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    margin: 0.85rem 0;
}

.as-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.4rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.as-title {
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--text-primary);
}

.as-overall-summary {
    font-size: var(--font-sm);
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.as-attacker {
    font-size: var(--font-xs);
    color: var(--text-primary);
    background: var(--fail-bg);
    border-left: 3px solid var(--fail);
    padding: 0.4rem 0.65rem;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    margin-bottom: 0.6rem;
    line-height: 1.4;
    font-style: italic;
}

.as-vectors {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

.as-vector {
    padding: 0.6rem 0.7rem;
    border-radius: var(--radius);
    border: 1px solid var(--border);
}

.as-vector-green { border-left: 3px solid var(--pass); }
.as-vector-amber { border-left: 3px solid var(--warn); }
.as-vector-red {
    border-left: 3px solid var(--fail);
    box-shadow: var(--shadow-sm);
}

.as-vector-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.25rem;
    gap: 0.3rem;
}

.as-vector-name {
    font-size: var(--font-xs);
    font-weight: 500;
    color: var(--text-primary);
}

.as-vector-summary {
    font-size: var(--font-xs);
    color: var(--text-primary);
    margin-bottom: 0.2rem;
    line-height: 1.4;
}

.as-vector-detail {
    font-size: var(--font-xs);
    color: var(--text-muted);
    line-height: 1.4;
}

@media (max-width: 640px) {
    .as-vectors {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ── Subdomain Security Audit ───────────────────────────── */

.sua-block {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    margin: 0.75rem 0;
}

.sua-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.sua-title {
    font-weight: 600;
    font-size: var(--font-sm);
    color: var(--text-primary);
}

.sua-summary-line {
    font-size: var(--font-sm);
    color: var(--text-secondary);
    line-height: 1.5;
}

.sua-callout {
    font-size: var(--font-sm);
    color: var(--text-primary);
    background: var(--fail-bg);
    border-left: 3px solid var(--fail);
    padding: 0.6rem 0.8rem;
    border-radius: 0 var(--radius) var(--radius) 0;
    margin: 0.5rem 0;
    line-height: 1.5;
}

.sua-details {
    margin-top: 0.5rem;
}

.sua-toggle {
    font-size: var(--font-xs);
    font-weight: 500;
    color: var(--primary-light);
    cursor: pointer;
    list-style: none;
    padding: 0.4rem 0;
    user-select: none;
}

.sua-toggle::-webkit-details-marker {
    display: none;
}

.sua-toggle-icon {
    display: inline-flex;
    vertical-align: -3px;
    transition: transform 0.2s ease;
    margin-right: 0.3rem;
}

.sua-details[open] .sua-toggle-icon {
    transform: rotate(180deg);
}

.sua-table-wrap {
    overflow-x: auto;
    margin-top: 0.4rem;
    -webkit-overflow-scrolling: touch;
}

.sua-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-xs);
}

.sua-table th {
    text-align: left;
    font-weight: 600;
    color: var(--text-muted);
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
    font-size: var(--font-xs);
}

.sua-table td {
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid var(--border-light);
    color: var(--text-secondary);
    vertical-align: middle;
}

.sua-row-red {
    background: color-mix(in srgb, var(--fail) 6%, transparent);
}

.sua-row-amber {
    background: color-mix(in srgb, var(--warn) 6%, transparent);
}

.sua-row-green td {
    color: var(--text-tertiary);
}

.sua-cell-sub {
    min-width: 10rem;
}

.sua-sub-name {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: var(--font-xs);
}

.sua-cell-policy {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: var(--font-xs);
}

.sua-cell-status {
    white-space: nowrap;
    font-weight: 500;
}

.sua-cell-action {
    text-align: right;
    white-space: nowrap;
}

.sua-audit-btn {
    background: transparent;
    border: 1px solid var(--primary);
    color: var(--primary);
    font-size: var(--font-xs);
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    min-height: 28px;
}

.sua-audit-btn:hover {
    background: var(--primary-solid);
    color: #fff;
}

@media (max-width: 768px) {
    .sua-table {
        font-size: var(--font-xs);
    }
    .sua-audit-btn {
        border: none;
        padding: 0.15rem 0.3rem;
        font-size: var(--font-xs);
    }
    .sua-cell-sub {
        min-width: 7rem;
    }
}

@media (max-width: 480px) {
    .sua-table th:nth-child(2),
.sua-table td:nth-child(2),
.sua-table th:nth-child(4),
.sua-table td:nth-child(4) {
        display: none;
    }
}

/* ── Spec Mode Toggle ─────────────────────────────────────── */

.st-toggle-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0;
    margin: 0.5rem 0;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.st-toggle-note {
    flex-basis: 100%;
    margin: 0;
    font-size: var(--font-xs);
    color: var(--text-muted);
    line-height: 1.4;
}

.st-toggle-label {
    font-size: var(--font-sm);
    font-weight: 500;
    color: var(--text-muted);
}

.st-seg-group {
    display: flex;
    background: var(--border);
    border-radius: var(--radius-lg);
    padding: 2px;
    transition: background 0.15s var(--ease);
}

.st-seg {
    font-size: var(--font-xs);
    font-weight: 600;
    padding: 0.3rem 0.75rem;
    border: none;
    background: transparent;
    color: var(--text-muted-raised);
    cursor: pointer;
    border-radius: var(--radius-lg);
    transition: all 0.2s;
    white-space: nowrap;
    min-height: 44px;
}

.st-seg:hover {
    color: var(--text-primary);
}

.st-seg-active.st-seg-dmarcbis {
    background: var(--dmarcbis);
    color: var(--dmarcbis-contrast);
}

.st-seg-active.st-seg-legacy {
    background: var(--surface);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
}

.st-delta {
    font-size: var(--font-xs);
    padding: 0.4rem 0.7rem;
    border-radius: var(--radius-sm);
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.spec-dmarcbis .st-delta,
.st-delta.spec-dmarcbis {
    background: var(--primary-subtle);
    color: var(--primary-light);
    border-left: 3px solid var(--primary);
}

.spec-legacy .st-delta,
.st-delta.spec-legacy {
    background: var(--surface);
    color: var(--text-muted);
    border-left: 3px solid var(--border);
}

.st-future {
    background: var(--warn-bg);
    border: 1px solid var(--warn-border);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    margin: 0.5rem 0;
}

.st-future-title {
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--warn);
    margin-bottom: 0.3rem;
}

.st-future-subtitle {
    font-size: var(--font-xs);
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.st-future-item {
    padding: 0.2rem 0;
    font-size: var(--font-xs);
}

.st-future-msg {
    color: var(--text-primary);
}

@media (max-width: 640px) {
    .st-toggle-bar {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ── DMARCbis Strict Validation ───────────────────────────── */

.sv-block {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    margin: 0.85rem 0;
}

.sv-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
    gap: 0.5rem;
}

.sv-header-left {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.sv-title {
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--text-primary);
}

.sv-header-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sv-summary {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--font-xs);
    font-weight: 500;
}

.sv-summary-pass { color: var(--pass); }
.sv-summary-warn { color: var(--warn); }
.sv-summary-fail { color: var(--fail-text); }

.sv-score { font-size: var(--font-xs); color: var(--text-muted); }

.sv-category { margin-bottom: 0.5rem; }

.sv-cat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.3rem 0;
}

.sv-cat-label {
    font-size: var(--font-sm);
    font-weight: 500;
    color: var(--text-primary);
}

.sv-cat-score { font-size: var(--font-xs); color: var(--text-muted); }

.sv-checks { padding-left: 0.2rem; }

.sv-check {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    padding: 0.2rem 0;
    font-size: var(--font-sm);
    line-height: 1.4;
}

.sv-icon {
    display: inline-flex;
    flex-shrink: 0;
    width: 16px;
}

.sv-pass { color: var(--pass); }
.sv-fail { color: var(--fail-text); }
.sv-warn { color: var(--warn); }

.sv-check-msg {
    color: var(--text-primary);
}

.sv-error-banner {
    background: var(--fail-bg);
    border: 1px solid var(--fail-border);
    border-radius: var(--radius);
    padding: 0.5rem 0.85rem;
    margin: 0.5rem 0;
    font-size: var(--font-sm);
    color: var(--fail-text);
    font-weight: 500;
}

@media (max-width: 640px) {
    .sv-block { padding: 0.75rem 0.85rem; }
    .sv-header { flex-direction: column; align-items: flex-start; }
}

/* ── DMARC Record Breakdown ───────────────────────────────── */

.record-breakdown {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    margin: 0.85rem 0;
}

.rb-header {
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}

.rb-title {
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--text-primary);
}

/* Verdict */
.rb-verdict {
    border-radius: var(--radius);
    padding: 0.6rem 0.85rem;
    margin-bottom: 0.75rem;
}

.rb-verdict-top {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.rb-verdict-summary {
    font-size: var(--font-sm);
    color: var(--text-primary);
}

.rb-verdict-reasons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.4rem;
}

.rb-verdict-reason {
    font-size: var(--font-xs);
    background: rgba(255, 255, 255, 0.06);
    padding: 0.1rem 0.45rem;
    border-radius: var(--radius-sm);
    color: var(--text-muted-raised);
}

.rb-verdict-ready { background: rgba(16, 185, 129, 0.15); }

.rb-verdict-compatible { background: var(--primary-subtle); }

.rb-verdict-monitoring { background: var(--warn-bg); }

.rb-verdict-attention { background: var(--warn-bg); }

.rb-verdict-misconfigured { background: var(--fail-bg); }

/* Tag rows */
.rb-kvs {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.rb-kv-row {
    padding: 0.55rem 0.6rem;
    border-radius: var(--radius-sm);
    transition: background 0.15s;
}

.rb-kv-row:hover {
    background: rgba(255, 255, 255, 0.02);
}

.rb-kv-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.rb-kv-name {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: var(--font-sm);
    color: var(--text-primary);
    flex-shrink: 0;
}

.rb-value {
    font-family: var(--font-mono);
    font-size: var(--font-xs);
    background: var(--surface-hover);
    color: var(--text-primary);
    padding: 0.1rem 0.4rem;
    border-radius: var(--radius-sm);
    min-width: 0;
    overflow-wrap: anywhere;
}

.rb-default {
    font-family: var(--font-mono);
    font-size: var(--font-xs);
    color: var(--text-muted);
}

.rb-default-label {
    font-size: var(--font-xs);
    font-style: italic;
}

.rb-absent {
    font-size: var(--font-xs);
    font-style: italic;
    color: var(--text-muted);
}

.rb-kv-label {
    font-size: var(--font-xs);
    color: var(--text-muted);
    margin-top: 0.15rem;
}

.rb-kv-explain {
    font-size: var(--font-sm);
    color: var(--text-primary);
    margin-top: 0.25rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

/* Per-tag warnings */
.rb-kv-warn {
    font-size: var(--font-xs);
    color: var(--fail-text);
    margin-top: 0.25rem;
    padding: 0.25rem 0.5rem;
    background: var(--fail-bg);
    border-radius: var(--radius-sm);
    border-left: 2px solid var(--fail);
}

.rb-kv-info {
    font-size: var(--font-xs);
    color: var(--warn);
    margin-top: 0.25rem;
    padding: 0.25rem 0.5rem;
    background: var(--warn-bg);
    border-radius: var(--radius-sm);
    border-left: 2px solid var(--warn);
}

/* Fallback chain */
.rb-fallback-chain {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.3rem;
    flex-wrap: wrap;
}

.rb-chain-link {
    font-family: var(--font-mono);
    font-size: var(--font-xs);
    padding: 0.12rem 0.4rem;
    border-radius: var(--radius-sm);
}

.rb-chain-active {
    background: var(--primary-subtle);
    color: var(--primary-light);
    font-weight: 500;
}

.rb-chain-inactive {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-muted-raised);
    text-decoration: line-through;
}

.rb-chain-arrow {
    color: var(--text-muted);
    font-size: var(--font-xs);
}

/* Configuration Warnings */
.rb-config-warnings {
    margin-top: 0.75rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--border);
}

.rb-cw-label {
    font-size: var(--font-sm);
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.rb-cw-item {
    padding: 0.5rem 0.65rem;
    border-radius: var(--radius-sm);
    margin-bottom: 0.4rem;
}

.rb-cw-critical { background: var(--fail-bg); border-left: 3px solid var(--fail); }
.rb-cw-advisory { background: var(--warn-bg); border-left: 3px solid var(--warn); }
.rb-cw-info { background: var(--primary-subtle); border-left: 3px solid var(--primary); }
.rb-cw-info .rb-cw-icon { color: var(--primary-light); }
.rb-cw-info .rb-cw-title { color: var(--primary-light); }

.rb-cw-header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.rb-cw-icon { font-size: var(--font-sm); flex-shrink: 0; }
.rb-cw-critical .rb-cw-icon { color: var(--fail-text); }
.rb-cw-advisory .rb-cw-icon { color: var(--warn); }

.rb-cw-title { font-size: var(--font-sm); font-weight: 500; }
.rb-cw-critical .rb-cw-title { color: var(--fail-text); }
.rb-cw-advisory .rb-cw-title { color: var(--warn); }

.rb-cw-text {
    font-size: var(--font-xs);
    color: var(--text-primary);
    margin-top: 0.2rem;
    line-height: 1.4;
}

/* DMARCbis note callout */
.rb-bis-note {
    font-size: var(--font-xs);
    color: var(--text-secondary);
    margin-top: 0.3rem;
    padding: 0.35rem 0.55rem;
    background: var(--dmarcbis-bg);
    border-left: 2px solid var(--dmarcbis);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    line-height: 1.4;
}

.rb-bis-note-label {
    font-weight: 500;
    font-size: var(--font-xs);
    color: var(--dmarcbis-contrast);
    background: var(--dmarcbis);
    padding: 0.05rem 0.35rem;
    border-radius: var(--radius-sm);
    letter-spacing: 0.03em;
    margin-right: 0.4rem;
}

@media (max-width: 640px) {
    .record-breakdown { padding: 0.75rem 0.85rem; }
    .rb-kv-header { gap: 0.3rem; }
    .rb-verdict-top { flex-direction: column; align-items: flex-start; gap: 0.3rem; }
}

/* ── Why DMARCbis? Education Section ──────────────────────── */

.wd-block {
    margin: 0.85rem 0;
}

.wd-summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.85rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    font-size: var(--font-sm);
    font-weight: 500;
    color: var(--text-primary);
    list-style: none;
    transition: background 0.15s var(--ease), border-color 0.15s var(--ease);
}

.wd-summary::-webkit-details-marker { display: none; }

.wd-summary-icon { font-size: var(--font-md); }

.wd-body {
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 var(--radius) var(--radius);
    padding: 1rem 1.25rem;
}

.wd-section { margin-bottom: 1rem; }
.wd-section:last-child { margin-bottom: 0; }

.wd-section-title {
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.4rem;
}

.wd-content {
    font-size: var(--font-sm);
    color: var(--text-primary);
    line-height: 1.55;
    margin: 0 0 0.3rem 0;
}

.wd-item {
    font-size: var(--font-sm);
    color: var(--text-primary);
    line-height: 1.5;
    padding: 0.35rem 0.6rem;
    margin: 0.3rem 0;
    background: rgba(255, 255, 255, 0.03);
    border-left: 2px solid var(--border);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.wd-scale {
    display: flex;
    gap: 0.3rem;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}

.wd-scale-item {
    font-size: var(--font-xs);
    font-weight: 500;
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-lg);
    opacity: 0.5;
}

.wd-scale-active {
    opacity: 1;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
}

.wd-scale-red { background: var(--fail-bg); color: var(--fail-text); }
.wd-scale-amber { background: var(--warn-bg); color: var(--warn); }
.wd-scale-blue { background: var(--primary-subtle); color: var(--primary-light); }
.wd-scale-green { background: var(--pass-bg); color: var(--pass); }

@media (max-width: 640px) {
    .wd-body { padding: 0.75rem 0.85rem; }
}

/* ── Domain Comparison Intelligence (Prompt 14) ──────────── */

/* ── Migration Wizard ─────────────────────────────────────── */

.mw-block {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    margin: 0.85rem 0;
}

.mw-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--border);
}

.mw-title {
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--text-primary);
}

.mw-progress {
    font-size: var(--font-xs);
    color: var(--text-muted);
}

.mw-steps {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.mw-step {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
}

.mw-step-num {
    width: 1.6rem;
    height: 1.6rem;
    background: var(--primary-solid);
    color: var(--text-inverse);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-xs);
    font-weight: 500;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.mw-step-body {
    flex: 1;
    min-width: 0;
}

.mw-step-action {
    font-size: var(--font-sm);
    font-weight: 500;
    color: var(--text-primary);
}

.mw-step-why {
    font-size: var(--font-xs);
    color: var(--text-muted);
    margin-top: 0.15rem;
    line-height: 1.4;
}

.mw-record {
    margin-top: 0.3rem;
    background: var(--bg);
    border-radius: var(--radius-sm);
    padding: 0.35rem 0.6rem;
    overflow-x: auto;
}

.mw-record-text {
    font-family: var(--font-mono);
    font-size: var(--font-xs);
    color: var(--text-primary);
    white-space: nowrap;
}

.mw-target {
    margin-top: 0.75rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--border);
}

.mw-target-label {
    font-size: var(--font-sm);
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 0.3rem;
}

.mw-ready {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--pass-bg);
}

.mw-ready-check {
    color: var(--pass);
    font-size: var(--font-lg);
}

.mw-ready-text {
    font-size: var(--font-sm);
    font-weight: 500;
    color: var(--pass);
}

@media (max-width: 640px) {
    .mw-block { padding: 0.75rem 0.85rem; }
}

/* ── DMARCbis Readiness Block ──────────────────────────────── */

.dbis-readiness-block {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    margin: 0.85rem 0;
}

.dbis-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--border);
}

.dbis-header-left {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.dbis-title {
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--text-primary);
}

.dbis-header-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}


.dbis-check-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0;
    font-size: var(--font-sm);
}

.dbis-check-label {
    flex: 1;
    min-width: 0;
}

.dbis-info-icon { color: var(--text-muted); }

.dbis-dep-details {
    margin: 0.15rem 0 0.3rem 1.5rem;
}

.dbis-dep-item {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.15rem 0;
    font-size: var(--font-xs);
    /* Doc 68: the row is a tag, a source badge, a spec reference and a
       reason sentence. On one unwrapped line at phone width the reason
       started past the right edge and the container clipped rather than
       scrolled, so it could not be read at all. */
    flex-wrap: wrap;
}

/* The reason always starts its own line under the tags. */
.dbis-dep-reason {
    color: var(--text-muted);
    flex-basis: 100%;
}

.dbis-np-chain {
    margin: 0.15rem 0 0.3rem 1.5rem;
    font-size: var(--font-xs);
}

.dbis-chain-label { color: var(--text-muted); margin-bottom: 0.25rem; }

.dbis-chain-links {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-wrap: wrap;
}

.dbis-chain-link {
    font-family: var(--font-mono);
    font-size: var(--font-xs);
    padding: 0.1rem 0.4rem;
    border-radius: var(--radius-sm);
}

.dbis-chain-active { background: var(--pass-bg); color: var(--pass); font-weight: 500; }
.dbis-chain-inactive { background: var(--surface); color: var(--text-muted); border: 1px solid var(--border); text-decoration: line-through; }
.dbis-chain-arrow { color: var(--text-muted); font-size: var(--font-xs); }
.dbis-chain-note { color: var(--text-muted); margin-top: 0.2rem; font-style: italic; }

.dbis-spec-ref {
    font-family: var(--font-mono);
    font-size: var(--font-xs);
    color: var(--text-muted);
    /* No flex-shrink: 0. It kept the reference on the badges' line however
       narrow the row got, which is what pushed the reason off screen. */
}

.dbis-editorial-note {
    margin-top: 0.4rem;
    padding: 0.35rem 0.5rem;
    background: var(--surface);
    border-left: 2px solid var(--border);
    border-radius: var(--radius-sm);
    display: flex;
    gap: 0.4rem;
    align-items: flex-start;
    font-size: var(--font-xs);
}

.dbis-editorial-text {
    color: var(--text-muted);
    line-height: 1.45;
}

.dbis-suggested {
    margin-top: 0.85rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
}

.dbis-suggested-label {
    font-size: var(--font-sm);
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 0.4rem;
}

.dbis-changes { margin-top: 0.5rem; }

.dbis-change {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.25rem 0;
    font-size: var(--font-xs);
}

.dbis-change-reason { color: var(--text-muted); }

@media (max-width: 640px) {
    .dbis-header { flex-direction: column; align-items: flex-start; gap: 0.4rem; }
    .dbis-change { flex-wrap: wrap; }
}

/* ==========================================================================
   Record Builder ("Fix It For Me")
   ========================================================================== */

.rcb-block {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    margin: 0.85rem 0;
}

.rcb-block.rcb-ready {
    border-color: var(--pass-border);
}

.rcb-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--border);
}

.rcb-title {
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--text-primary);
}

.rcb-ready-msg {
    font-size: var(--font-sm);
    color: var(--pass);
    line-height: 1.5;
}

.rcb-first-note {
    font-size: var(--font-sm);
    color: var(--text-secondary);
    line-height: 1.55;
    padding: 0.6rem 0.75rem;
    background: var(--warn-bg);
    border-left: 3px solid var(--warn);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    margin-bottom: 0.85rem;
}

/* ── Diff view ──────────────────────────────────────────── */

.rcb-diff {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
    margin-bottom: 0.85rem;
}

.rcb-diff-side {
    flex: 1;
    min-width: 0;
}

.rcb-diff-arrow {
    display: flex;
    align-items: center;
    color: var(--text-muted);
    font-size: var(--font-lg);
    flex-shrink: 0;
    padding: 0 0.1rem;
}

.rcb-diff-label {
    font-size: var(--font-xs);
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin-bottom: 0.35rem;
}

.rcb-diff-record {
    font-family: var(--font-mono);
    font-size: var(--font-xs);
    line-height: 1.7;
    padding: 0.55rem 0.7rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    word-break: break-all;
    min-height: 3rem;
}

.rcb-diff-sep {
    color: var(--text-muted);
}

.rcb-hl-removed {
    text-decoration: line-through;
}

/* ── Changes list ───────────────────────────────────────── */

.rcb-changes {
    margin-bottom: 0.85rem;
}

.rcb-changes-label {
    font-size: var(--font-xs);
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin-bottom: 0.4rem;
}

.rcb-change {
    padding: 0.45rem 0.65rem;
    border-radius: var(--radius-sm);
    margin-bottom: 0.3rem;
    border-left: 3px solid var(--border);
}

.rcb-change.rcb-added { border-left-color: var(--pass); }
.rcb-change.rcb-removed { border-left-color: var(--fail); }
.rcb-change.rcb-changed { border-left-color: var(--warn); }

.rcb-change-top {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-bottom: 0.2rem;
}

.rcb-val-old {
    font-family: var(--font-mono);
    font-size: var(--font-xs);
    color: var(--fail-text);
    text-decoration: line-through;
}

.rcb-val-new {
    font-family: var(--font-mono);
    font-size: var(--font-xs);
    color: var(--pass);
}

.rcb-arrow {
    color: var(--text-muted);
    font-size: var(--font-xs);
}

.rcb-change-reason {
    font-size: var(--font-sm);
    color: var(--text-muted);
    line-height: 1.45;
}

/* ── Result record ──────────────────────────────────────── */

.rcb-result {
    margin-bottom: 0.75rem;
}

.rcb-result-label {
    font-size: var(--font-xs);
    font-weight: 500;
    color: var(--dmarcbis);
    letter-spacing: 0.03em;
    margin-bottom: 0.25rem;
}

.rcb-result-record {
    border-color: var(--dmarcbis-border);
}

/* ── Deploy instructions ────────────────────────────────── */

.rcb-deploy {
    padding: 0.6rem 0.75rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.rcb-deploy-label {
    font-size: var(--font-xs);
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin-bottom: 0.35rem;
}

.rcb-deploy-item {
    font-size: var(--font-sm);
    color: var(--text-secondary);
    line-height: 1.5;
    padding: 0.15rem 0;
}

.rcb-deploy-item strong {
    color: var(--text-primary);
    font-weight: 600;
}

.rcb-deploy-item code {
    font-family: var(--font-mono);
    font-size: var(--font-sm);
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 0.05rem 0.3rem;
    border-radius: var(--radius-sm);
    color: var(--primary-light);
}

/* ── Suggestions (ready state) ──────────────────────────── */

.rcb-suggestions {
    margin-top: 0.75rem;
}

.rcb-suggestions-label {
    font-size: var(--font-xs);
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin-bottom: 0.35rem;
}

.rcb-suggestion {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: var(--font-sm);
    color: var(--text-secondary);
    padding: 0.3rem 0;
    line-height: 1.45;
}

/* ── Responsive ─────────────────────────────────────────── */

@media (max-width: 640px) {
    .rcb-diff {
        flex-direction: column;
    }
    .rcb-diff-arrow {
        transform: rotate(90deg);
        justify-content: center;
        padding: 0.2rem 0;
    }
    .rcb-block {
        padding: 0.75rem 0.85rem;
    }
}

/* ==========================================================================
   INLINE DOMAIN INPUT ERROR
   ========================================================================== */
.domain-inline-error {
    color: var(--fail-text);
    font-size: var(--font-sm);
    margin-top: 0.4rem;
    display: none;
}
/* Beats .input-unified .domain-input:focus, which clears the border. */
.input-unified .domain-input.input-error {
    border-color: var(--fail);
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
}

/* ==========================================================================
   ADVISORIES BANNER (www subdomain, partial results, etc.)
   ========================================================================== */
.advisories-banner {
    margin-bottom: 1rem;
}
.advisory {
    padding: 0.65rem 1rem;
    border-radius: var(--radius);
    margin-bottom: 0.5rem;
    font-size: var(--font-sm);
    line-height: 1.5;
    display: flex;
    gap: 0.5rem;
    align-items: baseline;
}
.advisory strong {
    white-space: nowrap;
    flex-shrink: 0;
}
.advisory-info {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-secondary);
}
.advisory-warning {
    background: var(--warn-bg);
    border: 1px solid var(--warn-border);
    color: var(--warn);
}

/* ==========================================================================
   RECORD BLOCK LONG VALUE WRAPPING
   ========================================================================== */
.record-text {
    word-break: break-all;
    overflow-wrap: break-word;
}

/* ==========================================================================
   PROMPT 37 — Email Deliverability Callouts
   ========================================================================== */

.deliv-callout {
    margin: 0.7em 0;
    padding: 0.65em 0.9em;
    border-radius: var(--radius);
    border: 1px solid var(--primary-border);
    background: var(--primary-subtle);
}
.deliv-header {
    display: flex;
    align-items: center;
    gap: 0.4em;
    margin-bottom: 0.3em;
}
.deliv-icon {
    font-size: 0.95em;
    color: var(--primary-light);
}
.deliv-label {
    font-size: var(--font-xs);
    font-weight: 500;
    color: var(--primary-light);
}
.deliv-text {
    font-size: var(--font-sm);
    color: var(--text-secondary);
    line-height: 1.55;
}

/* Deliverability line in executive summary */
.es-deliverability {
    display: flex;
    align-items: baseline;
    gap: 0.5em;
    padding: 0.55em 0.85em;
    margin-top: 0.6em;
    border-radius: var(--radius);
    border: 1px solid var(--primary-border);
    background: var(--primary-subtle);
    font-size: var(--font-sm);
    color: var(--text-secondary);
    line-height: 1.5;
}
.es-deliverability .deliv-icon {
    flex-shrink: 0;
}

/* ==========================================================================
   PROMPT 18 — Change Detection, TTL Badges, Consistency Findings
   ========================================================================== */

/* TTL Freshness Badge */
.ttl-note {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5em;
    font-size: var(--font-sm);
    padding: 0.35em 0.7em;
    border-radius: var(--radius);
    margin: 0.5em 0;
    border: 1px solid var(--border-light);
    background: var(--surface);
}
.ttl-value {
    font-weight: 500;
    font-family: var(--font-mono);
    white-space: nowrap;
}
.ttl-detail {
    color: var(--text-secondary);
}
.ttl-very-short {
    border-color: var(--warn-border);
    background: var(--warn-bg);
}
.ttl-very-short .ttl-value { color: var(--warn); }
.ttl-short {
    border-color: var(--primary-border);
    background: var(--primary-subtle);
}
.ttl-short .ttl-value { color: var(--primary-light); }
.ttl-standard .ttl-value { color: var(--text-secondary); }
.ttl-long {
    border-color: var(--ttl-long-border);
    background: var(--ttl-long-bg);
}
.ttl-long .ttl-value { color: var(--ttl-long-text); }

/* Change Detection Section */
.cd-section {
    margin-top: 1rem;
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    overflow: hidden;
}
.cd-header {
    display: flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.6em 0.9em;
    background: var(--surface);
    cursor: pointer;
    user-select: none;
    font-size: var(--font-sm);
}
.cd-header:hover {
    background: var(--surface-hover, rgba(255,255,255,0.04));
}
.cd-header-icon {
    font-size: 1.05em;
    color: var(--text-tertiary);
}
.cd-header-title {
    font-weight: 600;
    color: var(--text-primary);
}
/* The summary wraps inside its own box when the header runs out of room,
   so the whole sentence stays readable; it never ellipsizes. */
.cd-header-count {
    color: var(--text-tertiary);
    font-size: 0.82em;
    margin-left: auto;
    padding-left: var(--space-sm);
    min-width: 0;
    text-align: right;
    overflow-wrap: anywhere;
}
.cd-chevron {
    display: inline-flex;
    color: var(--text-tertiary);
    transition: transform 0.2s ease;
    margin-left: 0.3em;
}
.cd-body {
    padding: 0.5em 0.9em 0.9em;
}

/* Details: what was found sits above the rule, what explains it below.
   16px clear and a border, so the split is visible without reading. */
.card-details-wrap {
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--border);
}
.card-details-wrap .cd-section {
    margin-top: 0;
}
.card-details > .cd-body {
    padding: var(--space-sm);
}
.cd-subsection + .cd-subsection {
    margin-top: var(--space-sm);
}
.cd-subsection > [role="heading"] > .cd-header {
    background: var(--bg);
}
.cd-subsection > [role="heading"] > .cd-header:hover {
    background: var(--surface);
}
.cd-change {
    padding: 0.7em 0;
    border-bottom: 1px solid var(--border-light);
}
.cd-change:last-child {
    border-bottom: none;
}
.cd-change-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.4em;
}
.cd-change-label {
    font-weight: 500;
    font-size: var(--font-sm);
    color: var(--text-primary);
}
.cd-change-date {
    font-size: var(--font-sm);
    color: var(--text-tertiary);
}
.cd-diff {
    font-family: var(--font-mono);
    font-size: var(--font-sm);
    line-height: 1.6;
    margin: 0.3em 0;
    padding: 0.5em 0.7em;
    background: rgba(0,0,0,0.15);
    border-radius: var(--radius-sm);
    overflow-x: auto;
}
.cd-diff-prefix {
    color: var(--text-tertiary);
    font-weight: 500;
    min-width: 4em;
    display: inline-block;
}
.cd-diff-old {
    color: var(--fail-text);
}
.cd-diff-new {
    color: var(--pass);
}
.cd-change-desc {
    font-size: var(--font-sm);
    margin-top: 0.3em;
    display: flex;
    align-items: center;
    gap: 0.3em;
}
.cd-change-icon {
    font-size: 0.9em;
}
.cd-improvement .cd-change-desc {
    color: var(--pass);
}
.cd-regression .cd-change-desc {
    color: var(--fail-text);
}
.cd-neutral .cd-change-desc {
    color: var(--text-secondary);
}
.cd-first-audit {
    display: flex;
    align-items: center;
    gap: 0.5em;
    font-size: var(--font-sm);
    color: var(--text-secondary);
    padding: 0.6em 0;
    margin-top: 0.5em;
}
.cd-first-icon {
    font-size: 1.1em;
}

/* Consistency Findings */
.cf-finding {
    margin-top: 0.7em;
    padding: 0.65em 0.85em;
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    background: var(--surface);
}
.cf-finding-header {
    display: flex;
    align-items: center;
    gap: 0.5em;
    margin-bottom: 0.3em;
}

.cf-finding-title {
    font-weight: 500;
    font-size: var(--font-sm);
    color: var(--text-primary);
}
.cf-finding-detail {
    font-size: var(--font-sm);
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Propagation Warning */
.prop-warning {
    display: flex;
    gap: 0.5em;
    padding: 0.6em 0.85em;
    margin: 0.7em 0;
    border-radius: var(--radius);
    border: 1px solid var(--primary-border);
    background: var(--primary-subtle);
    font-size: var(--font-sm);
    color: var(--text-secondary);
    line-height: 1.5;
}
.prop-warning-icon {
    color: var(--primary);
    font-size: 1em;
    flex-shrink: 0;
    margin-top: 0.1em;
}

/* ==========================================================================
   GLOBAL REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *,
*::before,
*::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==========================================================================
   LIGHT MODE
   Two copies of the same rules. The first applies when the OS asks for light
   and the visitor has not chosen dark; the second applies when the visitor
   chose light regardless of the OS. theme.js sets data-theme on <html>.
   :where() keeps every selector at its original specificity.
   ========================================================================== */
@media (prefers-color-scheme: light) {
    /* Keep in step with the [data-theme="light"] block below; the two must
       carry identical token values. tests/test_palette_contrast.py
       compares them. */
    :root:where(:not([data-theme="dark"])) {
        color-scheme: light;
        --bg: #f4f6f9;
        --bg-raised: #ffffff;
        --surface: #ffffff;
        --surface-hover: #eef1f6;
        --border: #dfe4ec;
        --border-strong: #9aa7b8;
        --border-light: #eef1f6;
        --border-focus: #2f5fcc;
        --radius-sm: 4px;
        --text-primary: #101828;
        --text-secondary: #475467;
        --text-tertiary: #5a6678;
        --text-muted: #5a6678;
        --text-inverse: #ffffff;
        --primary: #2f5fcc;
        --primary-solid: #2f5fcc;
        --primary-solid-hover: #274fa8;
        --primary-hover: #3b6fe0;
        --primary-light: #2f5fcc;
        --primary-subtle: rgba(47, 95, 204, 0.08);
        --primary-border: rgba(47, 95, 204, 0.22);
        --pass: #177245;
        --pass-solid: #177245;
        --pass-bg: rgba(23, 114, 69, 0.07);
        --pass-border: rgba(23, 114, 69, 0.22);
        --warn: #9a5a10;
        --rec-caution: #7d6410;
        --warn-contrast: #ffffff;
        --warn-bg: rgba(154, 90, 16, 0.08);
        --warn-border: rgba(154, 90, 16, 0.22);
        --fail: #c93a3f;
        --fail-text: #b3282d;
        --fail-solid: #c93a3f;
        --fail-bg: rgba(201, 58, 63, 0.07);
        --fail-border: rgba(201, 58, 63, 0.22);
        --fix-bg: rgba(23, 114, 69, 0.06);
        --fix-border: #177245;
        --dmarcbis: #0e7268;
        --dmarcbis-contrast: #ffffff;
        --text-muted-raised: #516073;
        --ttl-long-text: #6d28d9;
        --ttl-long-bg: rgba(109, 40, 217, 0.05);
        --ttl-long-border: rgba(109, 40, 217, 0.22);
        --dmarcbis-bg: rgba(14, 114, 104, 0.08);
        --dmarcbis-border: rgba(14, 114, 104, 0.22);
        --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
        --shadow-md: 0 8px 24px rgba(16, 24, 40, 0.08);
        --shadow-lg: 0 16px 48px rgba(16, 24, 40, 0.10);
    }

    :where(html:not([data-theme="dark"])) .site-header {
        background: rgba(248, 250, 252, 0.9);
    }

    :where(html:not([data-theme="dark"])) .audit-input-card {
        background: var(--surface);
        border-color: var(--border);
        box-shadow: var(--shadow-md);
    }

    :where(html:not([data-theme="dark"])) .input-unified .input-wrapper {
        background: var(--surface-hover);
        border-color: var(--border);
    }

    :where(html:not([data-theme="dark"])) .domain-input::placeholder {
        color: var(--text-secondary);
    }

    :where(html:not([data-theme="dark"])) .audit-btn:hover {
        box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
    }

    :where(html:not([data-theme="dark"])) .record-block {
        background: var(--bg);
        border-color: var(--border);
    }

    :where(html:not([data-theme="dark"])) .rec-keyword {
        color: var(--primary);
    }

    :where(html:not([data-theme="dark"])) .rec-value {
        color: var(--primary-solid-hover);
    }

    /* rec-safe/neutral/warn/muted and copy-btn used to carry their own
       independent hex values instead of the tokens below, so when --pass
       and --warn were darkened for AA these six quietly fell out of sync
       and dropped under 4.5:1 on their own light backgrounds. */
    :where(html:not([data-theme="dark"])) .rec-safe {
        color: var(--pass);
    }

    :where(html:not([data-theme="dark"])) .rec-warn {
        color: var(--warn);
    }

    :where(html:not([data-theme="dark"])) .rec-danger {
        color: var(--fail-text);
    }

    :where(html:not([data-theme="dark"])) .rec-muted {
        color: var(--text-secondary);
    }

    :where(html:not([data-theme="dark"])) .copy-btn {
        background: var(--surface-hover);
        border-color: var(--border);
        color: var(--text-secondary);
    }

    :where(html:not([data-theme="dark"])) .copy-btn:hover {
        background: var(--border);
        color: var(--text-primary);
        border-color: var(--border-strong);
    }

    :where(html:not([data-theme="dark"])) .tree-walk,
:where(html:not([data-theme="dark"])) .spf-execution,
:where(html:not([data-theme="dark"])) .dmarc-eval,
:where(html:not([data-theme="dark"])) .report-chain,
:where(html:not([data-theme="dark"])) .spf-tree {
        background: var(--bg);
    }

    :where(html:not([data-theme="dark"])) .tw-dot {
        background: var(--bg);
    }

    :where(html:not([data-theme="dark"])) .spfd-cost {
        background: var(--surface-hover);
        color: var(--primary);
    }

    :where(html:not([data-theme="dark"])) .spfd-cost-zero {
        background: var(--surface-hover);
        color: var(--text-secondary);
    }

    :where(html:not([data-theme="dark"])) .site-footer {
        background: var(--surface-hover);
        border-top-color: var(--border);
    }

    :where(html:not([data-theme="dark"])) .scope-btn {
        background: #ffffff;
    }

    :where(html:not([data-theme="dark"])) .es-metric {
        background: var(--bg);
    }

    :where(html:not([data-theme="dark"])) .top-progress-bar {
        box-shadow: 0 0 8px rgba(37, 99, 235, 0.2);
    }

    :where(html:not([data-theme="dark"])) ::selection {
        background: rgba(37, 99, 235, 0.15);
    }

    :where(html:not([data-theme="dark"])) .domain-inline-error {
        color: var(--fail-text);
    }

    :where(html:not([data-theme="dark"])) .advisory-info {
        background: var(--primary-subtle);
        border-color: var(--primary-border);
        color: var(--text-secondary);
    }

    :where(html:not([data-theme="dark"])) .cd-diff {
        background: rgba(0,0,0,0.04);
    }

    :where(html:not([data-theme="dark"])) .prop-warning {
        background: var(--primary-subtle);
        border-color: var(--primary-border);
        color: var(--primary-solid-hover);
    }

    :where(html:not([data-theme="dark"])) .deliv-callout {
        background: var(--primary-subtle);
        border-color: var(--primary-border);
    }

    :where(html:not([data-theme="dark"])) .deliv-label {
        color: var(--primary);
    }

    :where(html:not([data-theme="dark"])) .deliv-text {
        color: var(--primary-solid-hover);
    }

    :where(html:not([data-theme="dark"])) .es-deliverability {
        background: var(--primary-subtle);
        border-color: var(--primary-border);
        color: var(--primary-solid-hover);
    }
}

:root:where([data-theme="light"]) {
    color-scheme: light;
    --bg: #f4f6f9;
    --bg-raised: #ffffff;
    --surface: #ffffff;
    --surface-hover: #eef1f6;
    --border: #dfe4ec;
    --border-strong: #9aa7b8;
    --border-light: #eef1f6;
    --border-focus: #2f5fcc;
    --radius-sm: 4px;
    --text-primary: #101828;
    --text-secondary: #475467;
    --text-tertiary: #5a6678;
    --text-muted: #5a6678;
    --text-inverse: #ffffff;
    --primary: #2f5fcc;
    --primary-solid: #2f5fcc;
    --primary-solid-hover: #274fa8;
    --primary-hover: #3b6fe0;
    --primary-light: #2f5fcc;
    --primary-subtle: rgba(47, 95, 204, 0.08);
    --primary-border: rgba(47, 95, 204, 0.22);
    --pass: #177245;
    --pass-solid: #177245;
    --pass-bg: rgba(23, 114, 69, 0.07);
    --pass-border: rgba(23, 114, 69, 0.22);
    --warn: #9a5a10;
    --rec-caution: #7d6410;
    --warn-contrast: #ffffff;
    --warn-bg: rgba(154, 90, 16, 0.08);
    --warn-border: rgba(154, 90, 16, 0.22);
    --fail: #c93a3f;
    --fail-text: #b3282d;
    --fail-solid: #c93a3f;
    --fail-bg: rgba(201, 58, 63, 0.07);
    --fail-border: rgba(201, 58, 63, 0.22);
    --fix-bg: rgba(23, 114, 69, 0.06);
    --fix-border: #177245;
    --dmarcbis: #0e7268;
    --dmarcbis-contrast: #ffffff;
    --text-muted-raised: #516073;
    --ttl-long-text: #6d28d9;
    --ttl-long-bg: rgba(109, 40, 217, 0.05);
    --ttl-long-border: rgba(109, 40, 217, 0.22);
    --dmarcbis-bg: rgba(14, 114, 104, 0.08);
    --dmarcbis-border: rgba(14, 114, 104, 0.22);
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
    --shadow-md: 0 8px 24px rgba(16, 24, 40, 0.08);
    --shadow-lg: 0 16px 48px rgba(16, 24, 40, 0.10);
}

:where(html[data-theme="light"]) .site-header {
    background: rgba(248, 250, 252, 0.9);
}

:where(html[data-theme="light"]) .audit-input-card {
    background: var(--surface);
    border-color: var(--border);
    box-shadow: var(--shadow-md);
}

:where(html[data-theme="light"]) .input-unified .input-wrapper {
    background: var(--surface-hover);
    border-color: var(--border);
}

:where(html[data-theme="light"]) .domain-input::placeholder {
    color: var(--text-secondary);
}

:where(html[data-theme="light"]) .audit-btn:hover {
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

:where(html[data-theme="light"]) .record-block {
    background: var(--bg);
    border-color: var(--border);
}

:where(html[data-theme="light"]) .rec-keyword {
    color: var(--primary);
}

:where(html[data-theme="light"]) .rec-value {
    color: var(--primary-solid-hover);
}

:where(html[data-theme="light"]) .rec-safe {
    color: var(--pass);
}

:where(html[data-theme="light"]) .rec-warn {
    color: var(--warn);
}

:where(html[data-theme="light"]) .rec-danger {
    color: var(--fail-text);
}

:where(html[data-theme="light"]) .rec-muted {
    color: var(--text-secondary);
}

:where(html[data-theme="light"]) .copy-btn {
    background: var(--surface-hover);
    border-color: var(--border);
    color: var(--text-secondary);
}

:where(html[data-theme="light"]) .copy-btn:hover {
    background: var(--border);
    color: var(--text-primary);
    border-color: var(--border-strong);
}

:where(html[data-theme="light"]) .tree-walk,
:where(html[data-theme="light"]) .spf-execution,
:where(html[data-theme="light"]) .dmarc-eval,
:where(html[data-theme="light"]) .report-chain,
:where(html[data-theme="light"]) .spf-tree {
    background: var(--bg);
}

:where(html[data-theme="light"]) .tw-dot {
    background: var(--bg);
}

:where(html[data-theme="light"]) .spfd-cost {
    background: var(--surface-hover);
    color: var(--primary);
}

:where(html[data-theme="light"]) .spfd-cost-zero {
    background: var(--surface-hover);
    color: var(--text-secondary);
}

:where(html[data-theme="light"]) .site-footer {
    background: var(--surface-hover);
    border-top-color: var(--border);
}

:where(html[data-theme="light"]) .scope-btn {
    background: #ffffff;
}

:where(html[data-theme="light"]) .es-metric {
    background: var(--bg);
}

:where(html[data-theme="light"]) .top-progress-bar {
    box-shadow: 0 0 8px rgba(37, 99, 235, 0.2);
}

:where(html[data-theme="light"]) ::selection {
    background: rgba(37, 99, 235, 0.15);
}

:where(html[data-theme="light"]) .domain-inline-error {
    color: var(--fail-text);
}

:where(html[data-theme="light"]) .advisory-info {
    background: var(--primary-subtle);
    border-color: var(--primary-border);
    color: var(--text-secondary);
}

:where(html[data-theme="light"]) .cd-diff {
    background: rgba(0,0,0,0.04);
}

:where(html[data-theme="light"]) .prop-warning {
    background: var(--primary-subtle);
    border-color: var(--primary-border);
    color: var(--primary-solid-hover);
}

:where(html[data-theme="light"]) .deliv-callout {
    background: var(--primary-subtle);
    border-color: var(--primary-border);
}

:where(html[data-theme="light"]) .deliv-label {
    color: var(--primary);
}

:where(html[data-theme="light"]) .deliv-text {
    color: var(--primary-solid-hover);
}

:where(html[data-theme="light"]) .es-deliverability {
    background: var(--primary-subtle);
    border-color: var(--primary-border);
    color: var(--primary-solid-hover);
}

/* ==========================================================================
   Toast Notifications (Prompt 4)
   ========================================================================== */

.toast-container {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 10000;
    display: flex;
    flex-direction: column-reverse;
    gap: 0.5rem;
    pointer-events: none;
}

.toast {
    background: var(--surface);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-left: 3px solid var(--pass);
    padding: 0.75rem 1.25rem;
    border-radius: var(--radius);
    font-size: var(--font-sm);
    font-weight: 500;
    box-shadow: var(--shadow-md);
    opacity: 0;
    transform: translateX(100%);
    transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
    pointer-events: auto;
}

.toast.visible {
    opacity: 1;
    transform: translateX(0);
}

/* ==========================================================================
   Recent Audits (Prompt 2)
   ========================================================================== */

.recent-audits {
    margin-top: 0.75rem;
}

.recent-audits-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.4rem;
}

.recent-audits-label {
    font-size: var(--font-xs);
    font-weight: 500;
    color: var(--text-tertiary);
}

.recent-audits-clear {
    background: none;
    border: none;
    color: var(--text-tertiary);
    font-size: var(--font-xs);
    cursor: pointer;
    padding: 0.15rem 0.35rem;
    border-radius: var(--radius-sm);
    transition: color var(--duration) var(--ease), background var(--duration) var(--ease);
}

.recent-audits-clear:hover {
    color: var(--fail-text);
    background: rgba(239, 68, 68, 0.1);
}

.recent-audits-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

/* ==========================================================================
   Run Another / CSV Export (Prompts 9, 15)
   ========================================================================== */

.run-another-inner {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

/* Two classes, so it outranks every .audit-btn state it restyles. */
.audit-btn.export-csv-btn {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-secondary);
}

.audit-btn.export-csv-btn:hover {
    background: var(--surface-hover);
    color: var(--text-primary);
}

/* Sticky run-another when scrolled past (Prompt 9) */
#run-another-btn.sticky {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-raised);
    border-top: 1px solid var(--border);
    padding: 0.75rem 1rem;
    z-index: 100;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15);
}

/* ==========================================================================
   Additional Responsive (Prompt 7)
   ========================================================================== */

@media (max-width: 768px) {
    .run-another-inner {
        flex-direction: column;
        gap: 0.5rem;
    }
}

@media (max-width: 640px) {
    .toast-container {
        bottom: 1rem;
        right: 1rem;
        left: 1rem;
    }

    .toast {
        font-size: var(--font-xs);
    }

}

/* About page styles */
.about-section {
    padding-top: 3.5rem;
    padding-bottom: 2.25rem;
}
.about-card {
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: 2.85rem 2.85rem 2.6rem;
    max-width: 720px;
    margin: 0 auto;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-light);
    position: relative;
    overflow: hidden;
}
.about-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary) 0%, var(--primary-light) 50%, var(--primary) 100%);
}
.about-card h1 {
    font-size: var(--font-3xl);
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--text-primary);
    margin-bottom: 1.5rem;
}
.about-card h2 {
    font-size: var(--font-lg);
    font-weight: 700;
    color: var(--text-primary);
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
}
.about-card p {
    font-size: var(--font-base);
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 1.25rem;
}
.about-card a {
    color: var(--primary-light);
    text-decoration: none;
    font-weight: 500;
}
.about-card a:hover {
    text-decoration: underline;
}
@media (max-width: 640px) {
    .about-card {
        padding: 2rem 1.35rem 1.8rem;
    }
}

/* Skip to content (accessibility) */
.skip-to-content:not(:focus) {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-to-content:focus {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    padding: 0.75rem 1.5rem;
    background: var(--primary-solid);
    color: var(--text-inverse);
    font-weight: 600;
    border-radius: 0 0 var(--radius) var(--radius);
    text-decoration: none;
}

/* ============================================================
   Prose page enhancements (.dbis-section content)
   Reusable across dmarcbis, dnssec, and future writeup pages
   ============================================================ */

.dbis-section ul,
.dbis-section ol {
    margin: 0.85rem 0 1rem;
    padding-left: 1.4rem;
    color: var(--text-secondary);
    line-height: 1.7;
}
.dbis-section ul li,
.dbis-section ol li {
    margin-bottom: 0.45rem;
    font-size: var(--font-base);
}
.dbis-section ul li::marker {
    color: var(--dmarcbis);
}
.dbis-section ol li::marker {
    color: var(--dmarcbis);
    font-weight: 500;
}
.dbis-section ul li:last-child,
.dbis-section ol li:last-child {
    margin-bottom: 0;
}

.dbis-section h3 {
    font-size: var(--font-lg);
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.015em;
    margin: 1.6rem 0 0.55rem;
}

.dbis-section pre {
    margin: 1rem 0;
    padding: 0.85rem 1rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: var(--font-sm);
    color: var(--text-primary);
    line-height: 1.55;
}
.dbis-section pre code {
    background: none;
    border: none;
    padding: 0;
    color: inherit;
    font-size: inherit;
    white-space: pre;
    overflow-wrap: normal;
}

.dbis-section blockquote {
    margin: 1.25rem 0;
    padding: 0.75rem 1.1rem;
    border-left: 3px solid var(--border-strong);
    background: var(--surface);
    color: var(--text-primary);
    font-style: italic;
    line-height: 1.65;
    border-radius: 0 var(--radius) var(--radius) 0;
}

/* ==========================================================================
   Article pages (dmarcbis, dnssec, about)
   ========================================================================== */

.dbis-page { max-width: 68ch; width: 100%; margin: 0 auto; padding: 3rem 1.25rem 4rem; }
.dbis-article { max-width: 68ch; font-family: var(--font-body); color: var(--text-primary); }
.dbis-article-title { font-size: var(--font-4xl); font-weight: 700; letter-spacing: -0.03em; color: var(--text-primary); margin-bottom: 0.25rem; line-height: 1.2; }
.dbis-article-sub { font-size: var(--font-md); color: var(--text-muted); margin-bottom: 2rem; }
.dbis-article .article-card-meta { margin-bottom: 2rem; }
.dbis-lede { font-size: var(--font-xl); line-height: 1.65; color: var(--text-secondary); margin-bottom: 2rem; font-weight: 400; letter-spacing: -0.01em; }
.dbis-lede strong { color: var(--text-primary); font-weight: 600; }
.dbis-section { margin-top: 3rem; }
.dbis-section h2 { font-size: var(--font-2xl); font-weight: 700; color: var(--text-primary); letter-spacing: -0.025em; margin-bottom: 0.85rem; line-height: 1.3; }
.dbis-section p { font-size: var(--font-md); color: var(--text-secondary); line-height: 1.75; margin-bottom: 1.1rem; }
.dbis-section a,
.dbis-lede a { color: var(--primary-light); text-decoration: underline; font-weight: 500; }
.dbis-section code,
.dbis-lede code { font-family: var(--font-mono); font-size: 0.88em; background: var(--bg); border: 1px solid var(--border); padding: 0.1em 0.4em; border-radius: var(--radius-sm); color: var(--primary-light); white-space: normal; overflow-wrap: anywhere; }
.dbis-section strong { color: var(--text-primary); font-weight: 600; }
.dbis-section a:hover,
.dbis-lede a:hover { text-decoration: underline; }
.dbis-table-wrap {
    overflow-x: auto;
    margin: 1rem 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.dbis-table-fig {
    overflow-x: auto;
    max-width: 100%;
    contain: inline-size;
    margin-bottom: 2rem;
}
.dbis-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-sm);
}
.dbis-table th {
    text-align: left;
    padding: 0.6rem 0.75rem;
    background: var(--surface);
    color: var(--text-primary);
    font-weight: 600;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.dbis-table td {
    padding: 0.55rem 0.75rem;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border);
    line-height: 1.5;
    vertical-align: top;
}
.dbis-table tr:last-child td { border-bottom: none; }
.dbis-table code { white-space: nowrap; overflow-wrap: normal; }
/* Long API constants break at their underscores (<wbr>) so the table fits a phone */
.dbis-table-api th,
.dbis-table-api code { white-space: normal; }

/* Steps list (dmarcbis only) */
.dbis-steps { counter-reset: step; list-style: none; padding: 0; margin: 1.25rem 0; }
.dbis-steps li { counter-increment: step; display: flex; align-items: flex-start; gap: 0.85rem; padding: 0.6rem 0; font-size: var(--font-md); color: var(--text-secondary); line-height: 1.65; }
.dbis-steps li::before { content: counter(step); display: flex; align-items: center; justify-content: center; min-width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--dmarcbis-bg); color: var(--dmarcbis); font-size: var(--font-sm); font-weight: 500; flex-shrink: 0; margin-top: 0.05rem; }

/* Side-by-side comparison: PSL Lookup vs DNS Tree Walk */
.dbis-compare {
    margin: 2rem 0 2.25rem;
    padding: 0;
}
.dbis-compare-kicker {
    font-size: var(--font-xs);
    font-weight: 500;
    color: var(--text-muted);
    text-align: center;
    margin: 0 0 1rem;
}
.dbis-compare-grid {
    display: grid;
    /* minmax(0, ...) so a long code token cannot widen the column past the
       viewport: plain 1fr has a min-content floor, 357px at 320 wide. */
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}
.dbis-compare-col {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.1rem 1.15rem 1.25rem;
    position: relative;
}
.dbis-compare-old {
    background: var(--bg-raised, var(--surface));
    border-color: var(--border);
}
.dbis-compare-new {
    border-color: var(--dmarcbis-border);
    box-shadow: inset 0 2px 0 0 var(--dmarcbis);
    padding-top: 1.2rem;
}
.dbis-compare-head {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.95rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
}

.dbis-compare-title {
    font-size: var(--font-base);
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    margin: 0;
    line-height: 1.3;
}
.dbis-compare-old .dbis-compare-title { color: var(--text-secondary); }
.dbis-compare-steps {
    list-style: none;
    counter-reset: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}
.dbis-compare-step {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.45rem 0.55rem;
    border-radius: var(--radius);
    transition: background 0.15s var(--ease);
}
.dbis-compare-step:hover {
    background: var(--surface-hover);
}
.dbis-compare-num {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: var(--radius);
    background: var(--bg);
    border: 1px solid var(--border);
    font-family: var(--font-mono);
    font-size: var(--font-xs);
    font-weight: 500;
    color: var(--text-tertiary);
    line-height: 1;
    margin-top: 0.1rem;
}
.dbis-compare-new .dbis-compare-num {
    background: var(--dmarcbis-bg);
    border-color: var(--dmarcbis-border);
    color: var(--dmarcbis);
}
.dbis-compare-body {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
    flex: 1;
}
.dbis-compare-action {
    font-family: var(--font-body);
    font-size: var(--font-base);
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.4;
}
.dbis-compare-old .dbis-compare-action { color: var(--text-secondary); font-weight: 500; }
.dbis-compare-detail {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    font-size: var(--font-sm);
    color: var(--text-tertiary);
    line-height: 1.5;
}
.dbis-compare-detail code {
    font-family: var(--font-mono);
    font-size: var(--font-sm);
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    padding: 0.08em 0.4em;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    overflow-wrap: anywhere;
}
.dbis-compare-new .dbis-compare-detail code {
    color: var(--dmarcbis);
    border-color: var(--dmarcbis-border);
}
.dbis-compare-icon {
    flex-shrink: 0;
    vertical-align: -2px;
}
.dbis-compare-icon-ext { color: var(--text-muted); }
.dbis-compare-icon-ok { color: var(--pass); }
.dbis-compare-step-ext .dbis-compare-detail { color: var(--text-muted); font-style: italic; }
.dbis-compare-step-found {
    background: var(--dmarcbis-bg);
    border: 1px solid var(--dmarcbis-border);
}
.dbis-compare-step-found:hover { background: var(--dmarcbis-bg); }
/* .dbis-compare-num already gets its own --dmarcbis-bg fill inside
   .dbis-compare-new; stacked on the row's own --dmarcbis-bg here, the two
   translucent layers compound into a darker tint the num's text color
   was never sized against. Drop to one layer, the row's. */
.dbis-compare-step-found .dbis-compare-num { background: transparent; }
.dbis-compare-step-found .dbis-compare-action { color: var(--text-primary); font-weight: 500; }
.dbis-compare-caption {
    margin: 1.25rem 0 0;
    font-size: var(--font-base);
    line-height: 1.6;
    color: var(--text-muted);
    font-style: italic;
    text-align: center;
}

@media (min-width: 720px) {
    .dbis-compare-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1.1rem;
    }
}

/* CTA and closing */
.dbis-closing { margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid var(--border); text-align: center; }
.dbis-closing p { font-size: var(--font-md); color: var(--text-secondary); line-height: 1.75; margin-bottom: 0.5rem; }

/* About page */
.about-page { max-width: 68ch; margin: 0 auto; padding: 3rem 1.25rem 4rem; }
.about-page h1 { font-size: var(--font-4xl); font-weight: 700; letter-spacing: -0.03em; color: var(--text-primary); margin-bottom: 2rem; line-height: 1.2; }
.about-page p { font-size: var(--font-md); color: var(--text-secondary); }
.about-page a { color: var(--primary-light); text-decoration: underline; font-weight: 500; }
.about-page strong { color: var(--text-primary); font-weight: 600; }
.about-closing { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }
.about-page section > h2:first-child { margin-top: 0; }

/* Articles index page */
.articles-page { padding: 3rem 0 4rem; }
.articles-header { margin-bottom: var(--space-2xl); }
.articles-header h1 { font-family: var(--font-body); font-size: var(--font-4xl); font-weight: 700; letter-spacing: -0.03em; color: var(--text-primary); margin: 0 0 0.5rem; line-height: 1.2; }
.articles-intro { font-family: var(--font-body); font-size: var(--font-md); color: var(--text-muted); line-height: 1.6; margin: 0 0 var(--space-2xl); max-width: 56ch; }

/* Tag filter bar (wrapped in a controls container so a search input can sit above it later) */
.articles-controls { margin-bottom: var(--space-2xl); }
.articles-tag-bar { display: flex; flex-wrap: wrap; gap: var(--space-lg) var(--space-sm); }

/* Article cards */
.articles-list { margin-top: 0; }
.article-card {
    display: flex;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all var(--duration) var(--ease);
    margin-bottom: var(--space-lg);
}
.article-card.is-fading { opacity: 0; transition: opacity 0.2s var(--ease); }
.article-card.is-hidden { display: none; }
.article-card-accent {
    flex-shrink: 0;
    width: 4px;
    background: var(--primary);
    transition: all var(--duration) var(--ease);
}
.article-card-dmarcbis .article-card-accent,
.article-card-p-reject .article-card-accent { background: var(--dmarcbis); }
.article-card-dnssec .article-card-accent { background: var(--primary); }
.article-card-spf .article-card-accent { background: var(--ttl-long-text); }
.article-card-content {
    flex: 1;
    padding: var(--space-xl);
}
.article-card-labels {
    display: flex;
    gap: var(--space-xs);
    margin-bottom: var(--space-sm);
}

.article-card-title {
    font-family: var(--font-body);
    font-size: var(--font-3xl);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.25;
    margin: 0 0 var(--space-sm);
    color: var(--text-primary);
}
.article-card-title a {
    color: inherit;
    text-decoration: none;
    transition: color var(--duration) var(--ease);
}
.article-card-title a:focus-visible { color: var(--primary-light); outline: 2px solid var(--primary); outline-offset: 2px; }
.article-card-description {
    font-family: var(--font-body);
    font-size: var(--font-md);
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0 0 var(--space-md);
    max-width: 60ch;
}
.article-card-meta {
    font-family: var(--font-body);
    font-size: var(--font-sm);
    color: var(--text-muted);
    margin: 0;
    line-height: 1.5;
}
.article-card-meta-dot { margin: 0 var(--space-xs); color: var(--text-muted); }
/* Article byline: the author link reads as part of the meta line */
.article-card-meta a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.article-card-meta a:hover { color: var(--text-secondary); }
/* /about#neil lands below the sticky header */
#neil { scroll-margin-top: 5rem; }
.articles-empty {
    display: none;
    margin: 0;
    padding: var(--space-xl);
    text-align: center;
    font-family: var(--font-body);
    font-size: var(--font-sm);
    color: var(--text-muted);
    border: 1px dashed var(--border);
    border-radius: var(--radius-lg);
}
.articles-empty.is-visible { display: block; }

@media (hover: hover) {
    .article-card:hover {
        border-color: var(--border-strong);
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }
    .article-card:hover .article-card-accent { width: 6px; }
    .article-card:hover .article-card-title a { color: var(--primary-light); }
    .article-card-dmarcbis:hover .article-card-title a,
    .article-card-p-reject:hover .article-card-title a { color: var(--dmarcbis); }
    .article-card-spf:hover .article-card-title a { color: var(--ttl-long-text); }
}

@media (max-width: 719px) {
    .articles-page { padding: 2rem 0 3rem; }
    .articles-header h1 { font-size: var(--font-3xl); }
    .article-card-content { padding: var(--space-lg); }
    .article-card-title { font-size: var(--font-2xl); }
}

/* Prompt 26: quiet contact note under the results, shown only when the
   audit found something. Deliberately not a call-to-action: no border, no
   accent colour, muted text, sized to the
   results column it sits in rather than to its own content. */
.results-contact-note {
    font-size: var(--font-sm);
    color: var(--text-muted);
    line-height: 1.5;
    margin: var(--space-lg) 0 0;
}
.results-contact-note a {
    color: var(--text-muted);
    text-decoration: underline;
}
.results-contact-note a:hover {
    color: var(--text-secondary);
}

/* Responsive */
@media (max-width: 640px) {
    .dbis-page,
.about-page { padding: 2rem 1rem 3rem; }
    .dbis-lede { font-size: var(--font-lg); }
    .dbis-section h2 { font-size: var(--font-xl); }
    .about-page h1 { font-size: var(--font-3xl); }
    .dbis-section p,
.about-page p { font-size: var(--font-md); }
}

/* Dark/light mode toggle button */
.theme-toggle {
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.25rem;
    cursor: pointer;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    transition: color 0.15s, border-color 0.15s;
    margin-left: 0.35rem;
    flex: 0 0 auto;
}
.theme-toggle:hover {
    color: var(--text-primary);
    border-color: var(--border-strong);
}

.theme-toggle svg {
    width: 18px;
    height: 18px;
}

/* Show the icon of the theme a click switches to: sun while dark, moon while light. */
.theme-toggle .theme-icon-moon {
    display: none;
}

@media (prefers-color-scheme: light) {
    :where(html:not([data-theme="dark"])) .theme-toggle .theme-icon-sun { display: none; }
    :where(html:not([data-theme="dark"])) .theme-toggle .theme-icon-moon { display: block; }
}

:where(html[data-theme="light"]) .theme-toggle .theme-icon-sun { display: none; }
:where(html[data-theme="light"]) .theme-toggle .theme-icon-moon { display: block; }

@media (max-width: 640px) {
    .theme-toggle {
        width: 44px;
        height: 44px;
    }
}

/* ==========================================================================
   CSP-SAFE UTILITIES
   The policy is "style-src 'self'" with no unsafe-inline, so a style
   attribute written into markup is refused and silently does nothing.
   Anything that used to ride on one lives here as a class instead.
   Values set through CSSOM (el.style.x = ...) are unaffected and still work.
   ========================================================================== */

/* Collapsed by default. Declared last so it beats the display rule on any
   component that sets one, e.g. .anomalies-section and .pi-section. */
.is-hidden {
    display: none;
}

/* Change History chevron, previously rotated by a JS style write. */
.cd-header[aria-expanded="true"] .cd-chevron {
    transform: rotate(180deg);
}

/* Record blocks that need breathing room inside a surrounding block. */
.record-block.record-block-inset {
    margin: 0.4rem 0;
}
.record-block.record-block-inset-lg {
    margin: 0.5rem 0;
}

/* SPF deep-analysis note sits directly above the record it annotates. */
.rb-bis-note.rb-bis-note-lead {
    margin-bottom: 0.6rem;
}

/* Toolbar action group. */
.results-toolbar-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* ==========================================================================
   MOBILE TOUCH TARGETS
   Everything tappable is at least 44px on the short axis at 640px and below.
   Where a taller box would push the layout around, the hit area grows
   through padding cancelled by a negative margin, or through a pseudo
   element, so the visible size stays the same.
   ========================================================================== */
@media (max-width: 640px) {
    .logo {
        min-height: 44px;
    }

    .logo-text {
        font-size: 1rem;
        white-space: nowrap;
    }

    .nav-link {
        white-space: nowrap;
        flex-shrink: 0;
        font-size: var(--font-xs);
        padding: 0.25rem 0.4rem;
        min-height: 44px;
        display: flex;
        align-items: center;
        min-width: 44px;
        justify-content: center;
    }

    .footer-nav {
        flex-wrap: wrap;
    }

    .footer-nav .footer-link,
    .footer-trust .footer-link {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 0 0.25rem;
    }

    /* Links inside the attribution sentence get their 44px target from an
       ::after box. Padding on an inline-flex link put a visible space
       before the full stop in "message me on LinkedIn." */
    .footer-attribution .footer-link {
        position: relative;
    }

    .footer-attribution .footer-link::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        height: 44px;
        transform: translateY(-50%);
    }

    /* .back-to-top is fixed at bottom:16px, height 44px, so at the true
       bottom of the page (footer visible, scrolled past the button's
       reveal threshold) it can sit on top of footer-nav's rightmost link.
       This clears the whole 60px it can occupy, with a small buffer. */
    .site-footer {
        padding-bottom: calc(var(--space-xl) + 44px);
    }

    .selector-toggle {
        padding: 13px 0.5rem;
        margin: -13px 0;
    }

    .recent-audits-clear {
        min-width: 44px;
        min-height: 44px;
        margin: -12px 0;
    }

    .copy-all-btn {
        min-height: 44px;
    }

    .sua-audit-btn {
        min-height: 44px;
        min-width: 44px;
    }

    .article-card-title a {
        display: inline-block;
        padding: 9px 0;
        margin: -9px 0;
    }

    .pi-guidance-toggle {
        min-height: 44px;
    }

    /* Focusable because it scrolls sideways; give the focus target height too. */
    .mw-record {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    /* Full-width block controls: grow downward, displace nothing below. */
    summary.sua-toggle {
        display: flex;
        align-items: center;
        min-height: 44px;
    }

    /* On a phone the summary takes its own line under the title. The title
       fills the first line, so the chevron stays beside it. */
    .cd-header {
        min-height: 44px;
        flex-wrap: wrap;
    }

    .cd-header-count {
        order: 1;
        flex-basis: 100%;
        margin-left: 0;
        padding-left: 0;
        text-align: left;
    }

    .cd-header-title {
        flex: 1 1 0;
        min-width: 0;
    }
}

/* One prose rule for the About page and the articles (Doc 38): paragraphs
   sit further apart than their lines, and lines stay near 68 characters. */

.about-page p,
.dbis-article p {
    line-height: 1.65;
    margin-bottom: 1.5rem;
}

.about-page h2,
.dbis-article h2 {
    margin-top: 3rem;
    margin-bottom: 1rem;
}

/* Doc 92: article short version */
.short-version {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.1rem 1.25rem 1.2rem;
    margin: 0 0 2rem;
}
.dbis-article .short-version h2 {
    font-size: var(--font-md);
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0;
    line-height: 1.4;
    margin: 0 0 0.5rem;
}
.dbis-article .short-version p {
    font-size: var(--font-md);
    color: var(--text-secondary);
    line-height: 1.65;
    margin: 0;
}
.short-version code {
    font-family: var(--font-mono);
    font-size: 0.88em;
    background: var(--bg);
    border: 1px solid var(--border);
    padding: 0.1em 0.4em;
    border-radius: var(--radius-sm);
    color: var(--primary-light);
}