:root {
    /* Matches the new Aktriva website's palette (~/projects/website/src/
       styles/global.css: --navy-*/--teal-*/--slate-*/--ink) and its plain
       system-font stack -- no more self-hosted display/mono webfonts.
       Dark values below mirror the website's own dark sections (hero,
       footer, CTA bands use --navy-950/--navy-800 with white/teal text),
       reused directly rather than inventing a separate dark palette the
       website itself has no equivalent for. */
    color-scheme: light dark;
    --bg: #f6f8fb;
    --card: #ffffff;
    --text: #101828;
    --muted: #56637a;
    --border: #dce3ec;
    --accent: #04808a;
    --accent-teal: #059ba4;
    --accent-strong: var(--accent-teal);
    --accent-strong-text: #ffffff;
    --heading-color: #0c1548;
    --heading-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono-font: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
    --radius-md: 10px;
    --radius-lg: 16px;
    --shadow-sm: 0 1px 2px rgba(12, 21, 72, 0.06);
    --shadow-md: 0 8px 24px rgba(12, 21, 72, 0.08);
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #070b2e;
        --card: #142057;
        --text: #eef2f7;
        --muted: rgba(255, 255, 255, 0.7);
        --border: rgba(255, 255, 255, 0.12);
        --accent: #22b8c2;
        --accent-teal: #8fdde2;
        --accent-strong: var(--accent-teal);
        --accent-strong-text: #04211f;
        --heading-color: #ffffff;
    }
}

/* Manual toggle (public/cvss/theme-toggle.js) -- overrides the media query
   above in either direction once the visitor picks an explicit preference,
   persisted in localStorage. No stored preference = no [data-theme]
   attribute at all, so the media query above keeps driving it exactly as
   before. */
:root[data-theme="dark"] {
    --bg: #070b2e;
    --card: #142057;
    --text: #eef2f7;
    --muted: rgba(255, 255, 255, 0.7);
    --border: rgba(255, 255, 255, 0.12);
    --accent: #22b8c2;
    --accent-teal: #8fdde2;
    --accent-strong: var(--accent-teal);
    --accent-strong-text: #04211f;
    --heading-color: #ffffff;
}

:root[data-theme="light"] {
    --bg: #f6f8fb;
    --card: #ffffff;
    --text: #101828;
    --muted: #56637a;
    --border: #dce3ec;
    --accent: #04808a;
    --accent-teal: #059ba4;
    --accent-strong: var(--accent-teal);
    --accent-strong-text: #ffffff;
    --heading-color: #0c1548;
}

* { box-sizing: border-box; }

/* Author rules always beat the browser's default [hidden] { display: none }
   regardless of specificity -- without this, any class that sets its own
   `display` (e.g. .field's flex) silently defeats `hidden` entirely. */
[hidden] { display: none !important; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
}

.wrap {
    /* Matches the new Aktriva website's container width (--max-width in
       ~/projects/website/src/styles/global.css) so the tools don't feel
       narrower/disconnected when navigating from the main site. */
    max-width: 1200px;
    margin: 0 auto;
    padding: 2.5rem 1.25rem 4rem;
}

h1 {
    font-family: var(--heading-font);
    color: var(--heading-color);
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
}

.subtitle {
    color: var(--muted);
    margin-top: 0;
    margin-bottom: 1.5rem;
}

.mode-toggle {
    display: inline-flex;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.25rem;
    margin-bottom: 1.5rem;
    gap: 0.25rem;
}

.toggle-option {
    padding: 0.45rem 1rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--muted);
}

.toggle-option.active {
    background: var(--accent-strong);
    color: var(--accent-strong-text);
}

.card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

fieldset {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1rem 1rem 0.25rem;
    margin: 0 0 1.25rem;
}

legend {
    font-family: var(--heading-font);
    padding: 0 0.5rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 1rem;
}

.field label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--muted);
}

.field input,
.field select,
.field textarea {
    padding: 0.55rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg);
    color: var(--text);
    font-size: 0.95rem;
    font-family: inherit;
    resize: vertical;
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0 1rem;
}

button {
    background: var(--accent-strong);
    color: var(--accent-strong-text);
    border: none;
    border-radius: 6px;
    padding: 0.7rem 1.4rem;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
}

button:hover { opacity: 0.92; }

.alert {
    padding: 0.8rem 1rem;
    border-radius: 8px;
    margin-bottom: 1.25rem;
    font-size: 0.9rem;
}

.alert-error {
    background: #fbe4e4;
    color: #7a1f1f;
    border: 1px solid #e8b4b4;
}

.table-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.table-header h2 {
    font-family: var(--heading-font);
    color: var(--heading-color);
    margin: 0;
    font-size: 1.1rem;
}

.table-actions {
    display: flex;
    gap: 1rem;
}

.btn-link {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font-family: inherit;
    cursor: pointer;
}

.btn-link:hover { text-decoration: underline; }

.btn-danger { color: #a11c1c; }

.table-scroll {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

th, td {
    text-align: left;
    padding: 0.6rem 0.7rem;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

th {
    color: var(--muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.severity-badge {
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.severity-badge.severity-none,
.severity-badge.severity-low { background: #d7f0f1; color: #0f5f65; }
.severity-badge.severity-medium { background: #fff2cc; color: #8a6600; }
.severity-badge.severity-high { background: #ffe1cc; color: #a34a00; }
.severity-badge.severity-critical { background: #fbdada; color: #a11c1c; }

/* The light pastel fills above read as washed-out on the dark navy card
   background, so dark mode gets a translucent glow treatment instead --
   same semantic hues, adapted to sit on --card rather than --bg. */
@media (prefers-color-scheme: dark) {
    .severity-badge.severity-none,
    .severity-badge.severity-low { background: rgba(63, 224, 214, 0.15); color: #6ef0e4; }
    .severity-badge.severity-medium { background: rgba(255, 196, 64, 0.15); color: #ffcf5c; }
    .severity-badge.severity-high { background: rgba(255, 140, 64, 0.16); color: #ff9d5c; }
    .severity-badge.severity-critical { background: rgba(255, 90, 90, 0.18); color: #ff8080; }
}
:root[data-theme="dark"] .severity-badge.severity-none,
:root[data-theme="dark"] .severity-badge.severity-low { background: rgba(63, 224, 214, 0.15); color: #6ef0e4; }
:root[data-theme="dark"] .severity-badge.severity-medium { background: rgba(255, 196, 64, 0.15); color: #ffcf5c; }
:root[data-theme="dark"] .severity-badge.severity-high { background: rgba(255, 140, 64, 0.16); color: #ff9d5c; }
:root[data-theme="dark"] .severity-badge.severity-critical { background: rgba(255, 90, 90, 0.18); color: #ff8080; }
:root[data-theme="light"] .severity-badge.severity-none,
:root[data-theme="light"] .severity-badge.severity-low { background: #d7f0f1; color: #0f5f65; }
:root[data-theme="light"] .severity-badge.severity-medium { background: #fff2cc; color: #8a6600; }
:root[data-theme="light"] .severity-badge.severity-high { background: #ffe1cc; color: #a34a00; }
:root[data-theme="light"] .severity-badge.severity-critical { background: #fbdada; color: #a11c1c; }

code {
    font-family: var(--mono-font);
    font-size: 0.85em;
}

.hint {
    color: var(--muted);
    font-size: 0.85rem;
    margin-top: 0;
}

.wizard-metric {
    margin-bottom: 0.5rem;
}

.wizard-q {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 0.9rem;
    padding-left: 0.75rem;
    border-left: 2px solid var(--border);
}

.wizard-q label {
    font-size: 0.88rem;
}

.wizard-q select {
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg);
    color: var(--text);
    font-size: 0.9rem;
    max-width: 420px;
}

.wizard-result {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent);
    margin: 0 0 1rem;
}

.btn-secondary {
    background: transparent;
    color: var(--accent-strong);
    border: 1px solid var(--accent-strong);
    border-radius: 6px;
    padding: 0.45rem 0.9rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 1rem;
}

.btn-secondary:hover { opacity: 0.85; }

button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

input:disabled,
textarea:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.alert-pips {
    background: #fff2cc;
    color: #8a6600;
    border: 1px solid #f0d98c;
}

.pips-flag {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: #fff2cc;
    color: #8a6600;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: help;
}

.field-hint {
    font-size: 0.78rem;
    color: var(--muted);
}

.field-hint-warning {
    font-size: 0.78rem;
    color: #b3261e;
    font-weight: 600;
}

.kev-badge {
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    margin-top: 0.4rem;
}

.kev-badge-warning {
    background: #fdecea;
    color: #b3261e;
}

@media (prefers-color-scheme: dark) {
    .kev-badge-warning { background: rgba(255, 90, 90, 0.18); color: #ff8080; }
}
:root[data-theme="dark"] .kev-badge-warning { background: rgba(255, 90, 90, 0.18); color: #ff8080; }
:root[data-theme="light"] .kev-badge-warning { background: #fdecea; color: #b3261e; }

.kev-badge-clear {
    background: var(--bg);
    color: var(--muted);
    border: 1px solid var(--border);
    font-weight: 600;
}

.back-link {
    margin: 0 0 1.5rem;
}

.back-link a {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--accent-strong);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--accent-strong);
    border-radius: 6px;
}

.back-link a:hover {
    background: var(--accent-strong);
    color: var(--accent-strong-text);
}

.vuln-id-row {
    display: flex;
    gap: 0.6rem;
}

.vuln-id-row input {
    flex: 1;
    font-family: var(--mono-font);
}

.vuln-id-row .btn-secondary {
    margin-bottom: 0;
    white-space: nowrap;
}

/* Live score preview */
.preview-panel {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.9rem 1.1rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background-color: var(--bg);
    background-image:
        linear-gradient(var(--border) 1px, transparent 1px),
        linear-gradient(90deg, var(--border) 1px, transparent 1px);
    background-size: 18px 18px;
    background-position: -1px -1px;
    margin-bottom: 1.25rem;
    min-height: 2.4rem;
}

.preview-panel.preview-ready {
    border-color: var(--accent-teal);
}

.preview-placeholder {
    color: var(--muted);
    font-size: 0.85rem;
}

.preview-score {
    font-size: 1.6rem;
    font-weight: 700;
}

.preview-vector {
    font-family: var(--mono-font);
    font-size: 0.8rem;
    color: var(--muted);
    overflow-x: auto;
}

/* Wizard progress */
.wizard-progress-track {
    height: 6px;
    border-radius: 999px;
    background: var(--border);
    overflow: hidden;
    margin-bottom: 0.35rem;
}

.wizard-progress-bar {
    height: 100%;
    width: 0%;
    background: var(--accent-strong);
    transition: width 0.2s ease;
}

#wizard-progress-text {
    margin-top: 0;
    margin-bottom: 1.25rem;
}

/* Status pills in fieldset legends */
.status-pill {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    vertical-align: middle;
}

.status-pill.status-pending {
    background: var(--border);
    color: var(--muted);
}

.status-pill.status-resolved {
    background: #d7f0f1;
    color: #0f5f65;
}

/* Used for rubric metrics auto-filled by the CVSS 3.1 estimation feature --
   same amber as severity-medium/KEV warnings, so "needs review" reads
   consistently across the tool rather than looking freshly invented. */
.status-pill.status-estimated {
    background: #fff2cc;
    color: #8a6600;
}

@media (prefers-color-scheme: dark) {
    .status-pill.status-estimated { background: rgba(255, 196, 64, 0.15); color: #ffcf5c; }
}
:root[data-theme="dark"] .status-pill.status-estimated { background: rgba(255, 196, 64, 0.15); color: #ffcf5c; }
:root[data-theme="light"] .status-pill.status-estimated { background: #fff2cc; color: #8a6600; }

/* Used for rubric metrics auto-filled by the AI estimation feature -- a
   distinct teal (matching --accent-teal) rather than the amber used for
   CVSS 3.1-derived estimates above, since an AI guess and a spec-grounded
   mapping are different reliability classes and should read as visually
   distinct at a glance, not just differently worded. */
.status-pill.status-estimated-ai {
    background: #d9f5f4;
    color: #0b6e73;
}

@media (prefers-color-scheme: dark) {
    .status-pill.status-estimated-ai { background: rgba(63, 224, 214, 0.15); color: #3fe0d6; }
}
:root[data-theme="dark"] .status-pill.status-estimated-ai { background: rgba(63, 224, 214, 0.15); color: #3fe0d6; }
:root[data-theme="light"] .status-pill.status-estimated-ai { background: #d9f5f4; color: #0b6e73; }

/* Guidance tooltip next to CIA questions */
.info-tip {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.05rem;
    height: 1.05rem;
    margin-left: 0.35rem;
    border-radius: 50%;
    background: var(--border);
    color: var(--muted);
    font-size: 0.68rem;
    font-style: italic;
    font-weight: 700;
    font-family: Georgia, serif;
    cursor: help;
    vertical-align: middle;
}

.info-tip .tip-content {
    display: none;
    position: absolute;
    left: 50%;
    bottom: calc(100% + 0.4rem);
    transform: translateX(-50%);
    width: 260px;
    padding: 0.6rem 0.75rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    font-size: 0.78rem;
    font-style: normal;
    font-weight: 400;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--muted);
    z-index: 10;
    cursor: default;
}

.info-tip:hover .tip-content,
.info-tip:focus .tip-content,
.info-tip:focus-within .tip-content {
    display: block;
}

.info-tip .tip-content p {
    margin: 0.3rem 0;
}

.info-tip .tip-content strong {
    color: var(--text);
}

/* Collapsible CIA categories, two per row */
#wizard-CIA {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1rem;
    align-items: start;
}

@media (max-width: 680px) {
    #wizard-CIA {
        grid-template-columns: 1fr;
    }
}

#wizard-CIA #cia-result {
    grid-column: 1 / -1;
}

.cia-category {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0 1rem;
    margin-bottom: 1rem;
}

.cia-category summary {
    padding: 0.8rem 0;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
}

.cia-category.resolved summary {
    color: var(--accent-teal);
}

.cia-category.resolved summary::before {
    content: "✓ ";
}

.cia-category-body {
    padding-bottom: 0.8rem;
}

/* Header / branding: full-viewport-width panel with its content
   constrained to the same 1200px column as the rest of the page --
   matches the website's own header treatment (Header.astro renders
   outside its page's .container, with a .container.header-inner div
   inside it for the actual content), not just its colors. */
.site-header {
    background: var(--card);
    border-bottom: 1px solid var(--border);
}

.site-header-inner,
.site-footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding-inline: 1.25rem;
}

.site-header-inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-block: 1.5rem;
}

/* Fixed box + object-fit rather than height:auto-width -- the positive
   (550x660) and negative (375x329) source files have different aspect
   ratios, so auto-width would shift the header's layout when the logo
   swaps between light and dark mode (same fix already used below for the
   landing page's .aktriva-badge). */
.site-header .logo {
    height: 4.25rem;
    width: 5rem;
    object-fit: contain;
    object-position: left center;
    flex-shrink: 0;
}

.site-header .logo-dark {
    display: none;
}

@media (prefers-color-scheme: dark) {
    .site-header .logo-light {
        display: none;
    }
    .site-header .logo-dark {
        display: inline-block;
    }
}
:root[data-theme="dark"] .site-header .logo-light { display: none; }
:root[data-theme="dark"] .site-header .logo-dark { display: inline-block; }
:root[data-theme="light"] .site-header .logo-light { display: inline-block; }
:root[data-theme="light"] .site-header .logo-dark { display: none; }

.site-header-text {
    flex: 1;
    min-width: 0;
    text-align: center;
}

/* Manual light/dark override button, wired up by theme-toggle.js. Uses
   theme tokens (not hardcoded white-on-dark) since the header itself is
   now a themed panel, not always-dark. */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    flex-shrink: 0;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--heading-color);
    cursor: pointer;
    padding: 0;
    margin: 0;
}

.theme-toggle:hover {
    background: var(--border);
}

.theme-toggle svg {
    width: 1.1rem;
    height: 1.1rem;
}

.site-header h1 {
    margin: 0 0 0.2rem;
    color: var(--heading-color);
}

.site-header .subtitle {
    margin: 0;
    color: var(--muted);
}

/* CVSS standard badge -- header background now follows the theme like
   everything else, so this needs the same light/dark swap the tool-card
   badge below already uses, rather than a single fixed logo variant. */
.site-header .cvss-badge {
    margin: 0.5rem 0 0;
}

.site-header .cvss-badge img {
    height: 1.1rem;
    width: auto;
}

.site-header .cvss-badge .cvss-logo-dark {
    display: none;
}

@media (prefers-color-scheme: dark) {
    .site-header .cvss-badge .cvss-logo-light {
        display: none;
    }
    .site-header .cvss-badge .cvss-logo-dark {
        display: inline-block;
    }
}
:root[data-theme="dark"] .site-header .cvss-badge .cvss-logo-light { display: none; }
:root[data-theme="dark"] .site-header .cvss-badge .cvss-logo-dark { display: inline-block; }
:root[data-theme="light"] .site-header .cvss-badge .cvss-logo-light { display: inline-block; }
:root[data-theme="light"] .site-header .cvss-badge .cvss-logo-dark { display: none; }

/* Tool-card badge on the landing page: the card background does follow
   light/dark theme, so swap logo variants accordingly. Sits to the left
   of the description text (see .tool-card-body), so it's sized to fill
   that column rather than read as a small inline icon. */
.tool-card .cvss-badge {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    margin: 0;
}

.tool-card .cvss-badge img {
    height: 2.75rem;
    width: auto;
}

.tool-card .cvss-badge .cvss-logo-dark {
    display: none;
}

@media (prefers-color-scheme: dark) {
    .tool-card .cvss-badge .cvss-logo-light {
        display: none;
    }
    .tool-card .cvss-badge .cvss-logo-dark {
        display: inline-block;
    }
}

/* The media query above only tracks the OS preference -- these mirror it
   for the manual light/dark toggle (public/cvss/theme-toggle.js), which
   overrides the OS preference via [data-theme] and needs the logo swap to
   follow that override too, not just the OS setting underneath it. */
:root[data-theme="dark"] .tool-card .cvss-badge .cvss-logo-light {
    display: none;
}
:root[data-theme="dark"] .tool-card .cvss-badge .cvss-logo-dark {
    display: inline-block;
}
:root[data-theme="light"] .tool-card .cvss-badge .cvss-logo-light {
    display: inline-block;
}
:root[data-theme="light"] .tool-card .cvss-badge .cvss-logo-dark {
    display: none;
}

/* Tool-card badge for tools with no standard-body logo of their own --
   same light/dark swap approach as the CVSS badge above (logo-navy.png for
   light backgrounds, the original white-on-transparent logo.png for dark),
   rather than boxing a single variant in a fixed-color pill. */
.tool-card .aktriva-badge {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

/* Fixed box + object-fit rather than height:auto-width -- the positive
   (550x660) and negative (375x329) source files have different aspect
   ratios, so auto-width made the badge (and the whole card) shift size
   when the logo swapped between light and dark mode. */
.tool-card .aktriva-badge img {
    height: 2.75rem;
    width: 3.2rem;
    object-fit: contain;
    object-position: left center;
}

.tool-card .aktriva-badge .aktriva-logo-dark {
    display: none;
}

@media (prefers-color-scheme: dark) {
    .tool-card .aktriva-badge .aktriva-logo-light {
        display: none;
    }
    .tool-card .aktriva-badge .aktriva-logo-dark {
        display: inline-block;
    }
}

:root[data-theme="dark"] .tool-card .aktriva-badge .aktriva-logo-light {
    display: none;
}
:root[data-theme="dark"] .tool-card .aktriva-badge .aktriva-logo-dark {
    display: inline-block;
}
:root[data-theme="light"] .tool-card .aktriva-badge .aktriva-logo-light {
    display: inline-block;
}
:root[data-theme="light"] .tool-card .aktriva-badge .aktriva-logo-dark {
    display: none;
}

.mode-description {
    margin-bottom: 0.75rem;
}

.mode-description p {
    color: var(--muted);
    font-size: 0.88rem;
    margin: 0;
}

.mode-description a {
    color: var(--accent);
}

/* Footer -- full-viewport-width like the header above, content
   constrained the same way. Always dark navy regardless of page theme
   (the website has no toggle at all, so its footer is never anything but
   dark) -- literal color, not a theme token. */
.site-footer {
    margin-top: 3rem;
    background: #070b2e;
}

.site-footer-inner {
    padding-block: 2rem 1.5rem;
}

/* Shared footer paragraphs (.disclaimer, .field-hint, .footer-meta) all
   render at the same size and span the full content width, justified,
   rather than each keeping its own unrelated width/size defaults. */
.site-footer p {
    text-align: justify;
}

.site-footer .disclaimer,
.site-footer .field-hint,
.site-footer .footer-meta {
    color: rgba(255, 255, 255, 0.7);
}

.site-footer .disclaimer {
    font-size: 0.78rem;
    line-height: 1.5;
    margin: 0 0 0.9rem;
}

.site-footer .disclaimer a,
.site-footer .footer-meta a {
    color: #8fdde2;
}

.site-footer .disclaimer a:hover,
.site-footer .footer-meta a:hover {
    text-decoration: underline;
}

.footer-meta {
    font-size: 0.78rem;
    margin: 0;
}

.footer-meta a {
    text-decoration: none;
}

/* Tools landing page */
.intro {
    color: var(--muted);
    font-size: 1rem;
    margin: 0 0 2rem;
    max-width: 640px;
}

.tools-grid {
    display: grid;
    gap: 1.25rem;
    padding: 1.25rem;
    border-radius: var(--radius-lg);
    background-image:
        linear-gradient(var(--border) 1px, transparent 1px),
        linear-gradient(90deg, var(--border) 1px, transparent 1px);
    background-size: 18px 18px;
    background-position: -1px -1px;
}

.tool-card {
    display: block;
    color: inherit;
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

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

.tool-card h2 {
    font-family: var(--heading-font);
    margin: 0 0 0.75rem;
    font-size: 1.15rem;
    color: var(--heading-color);
}

.tool-card-body {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.tool-card p {
    color: var(--muted);
    margin: 0;
}

/* VEX Generator wizard */
.vex-step h2 {
    font-family: var(--heading-font);
    color: var(--heading-color);
    margin: 0 0 0.5rem;
    font-size: 1.2rem;
}

.wizard-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1.5rem;
    gap: 1rem;
}

.product-row {
    background: var(--bg);
    margin-bottom: 1rem;
    padding: 1.25rem;
}

.product-row .table-header {
    margin-bottom: 0.75rem;
}

.product-row .table-header h3 {
    margin: 0;
    font-size: 0.95rem;
}

.product-override-row {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 1rem;
    padding: 1rem 1.25rem;
}

.product-override-row .table-header {
    margin-bottom: 0.75rem;
    align-items: center;
}

.output-block {
    margin-bottom: 2rem;
}

.output-block h3 {
    font-family: var(--heading-font);
    color: var(--heading-color);
    margin: 0;
    font-size: 1rem;
}

.json-preview {
    font-family: var(--mono-font);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1rem;
    font-size: 0.8rem;
    line-height: 1.5;
    overflow-x: auto;
    max-height: 420px;
    overflow-y: auto;
    white-space: pre;
}

.validation-checklist {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.validation-checklist li {
    font-size: 0.88rem;
    color: var(--muted);
}

.validation-checklist li.done {
    color: var(--accent-teal);
    font-weight: 600;
}

.validation-checklist li::before {
    content: "○ ";
}

.validation-checklist li.done::before {
    content: "✓ ";
}

#html-report-preview {
    background: var(--bg);
    max-height: 480px;
    overflow-y: auto;
}

.review-section {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border);
}

.review-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.review-section ul {
    margin: 0;
    padding-left: 1.2rem;
}