/* WDOIS / Resolution workspace. Semantic palettes shared by every public tool. */
/* Blue is the WDOIS brand and interaction colour; green is reserved for success/secure/valid states. */
:root, html[data-theme="dark"] {
    color-scheme: dark;
    --page: #0f172a;
    --sidebar: #121b30;
    --header: #121b30;
    --surface: #1a2438;
    --surface-elevated: #212d44;
    --surface-subtle: #152034;
    --surface-inset: #0d1526;
    --line: #2a3850;
    --line-strong: #435472;
    --ink: #e2e8f0;
    --ink-strong: #f8fafc;
    --ink-muted: #a9b6cb;
    --ink-faint: #8b9bb4;
    --brand: #60a5fa;
    --brand-hover: #93c5fd;
    --brand-fill: #2563eb;
    --brand-fill-hover: #1d4ed8;
    --brand-soft: #172b4d;
    --hover: #223049;
    --selected: #1c3157;
    --focus: #60a5fa;
    --field: #131d31;
    --placeholder: #8595ae;
    --success-surface: #10301f;
    --success-line: #24713f;
    --success-ink: #4ade80;
    --warning-surface: #33290f;
    --warning-line: #92650f;
    --warning-ink: #fbbf24;
    --danger-surface: #3a1d20;
    --danger-line: #9b3f45;
    --danger-ink: #f87171;
    --info-surface: #10264a;
    --info-line: #2b559a;
    --info-ink: #93c5fd;
    --elevation: 0 4px 16px rgb(2 8 23 / 16%);
    --elevation-high: 0 12px 32px rgb(2 8 23 / 28%);
    --grid-dot: #2f3e58;
}
html[data-theme="light"] {
    color-scheme: light;
    --page: #f1f5f9;
    --sidebar: #eaeff5;
    --header: #ffffff;
    --surface: #ffffff;
    --surface-elevated: #ffffff;
    --surface-subtle: #f8fafc;
    --surface-inset: #eef2f7;
    --line: #dde4ed;
    --line-strong: #a8b5c8;
    --ink: #334155;
    --ink-strong: #0f172a;
    --ink-muted: #526078;
    --ink-faint: #5b6a82;
    --brand: #2563eb;
    --brand-hover: #1d4ed8;
    --brand-fill: #2563eb;
    --brand-fill-hover: #1d4ed8;
    --brand-soft: #e8f0fe;
    --hover: #e5ebf3;
    --selected: #dbe8fd;
    --focus: #2563eb;
    --field: #ffffff;
    --placeholder: #66758d;
    --success-surface: #f0fdf4;
    --success-line: #86d3a1;
    --success-ink: #15803d;
    --warning-surface: #fffbeb;
    --warning-line: #e6c36a;
    --warning-ink: #8a5a06;
    --danger-surface: #fef2f2;
    --danger-line: #f1a5a5;
    --danger-ink: #b91c1c;
    --info-surface: #eff6ff;
    --info-line: #a9c6f5;
    --info-ink: #1e4fa8;
    --elevation: 0 3px 12px rgb(15 23 42 / 5%);
    --elevation-high: 0 12px 32px rgb(15 23 42 / 10%);
    --grid-dot: #d3dbe7;
}
/* Compatibility aliases keep all existing Twig result/status styling semantic. */
:root, html[data-theme] {
    --bg-page: var(--page); --bg-surface: var(--surface); --bg-surface-alt: var(--surface-subtle);
    --bg-inset: var(--surface-inset); --bg-panel: var(--surface-subtle); --bg-hover: var(--hover); --bg-overlay: rgb(10 20 40 / 35%);
    --border: var(--line); --border-strong: var(--line-strong); --border-muted: var(--line); --border-blue: var(--info-line);
    --text-primary: var(--ink); --text-heading: var(--ink-strong); --text-heading2: var(--ink-strong);
    --text-secondary: var(--ink-muted); --text-muted: var(--ink-faint); --text-dimmed: var(--ink-faint); --text-mono: var(--ink);
    --text-link: var(--brand); --text-link-hover: var(--brand-hover);
    --accent-blue: var(--brand); --accent-blue-hover: var(--brand-fill-hover); --accent-blue-light: var(--brand); --accent-blue-dim: var(--brand);
    --accent-green: var(--success-ink); --accent-green2: var(--success-ink);
    --input-bg: var(--field); --input-border: var(--line-strong); --input-text: var(--ink-strong); --input-placeholder: var(--placeholder); --input-focus-border: var(--focus);
    --card-bg: var(--surface); --card-border: var(--line); --card-hover-border: var(--brand); --card-hover-shadow: var(--elevation-high); --card-title: var(--ink-strong); --card-desc: var(--ink-muted);
    --results-bg: var(--surface); --results-border: var(--line); --results-header-bg: var(--surface-subtle); --results-row-alt: var(--surface-subtle);
    --nav-bg: var(--sidebar); --nav-border: var(--line); --nav-link: var(--ink-muted); --nav-link-hover-bg: var(--hover);
    --footer-bg: transparent; --footer-border: var(--line); --footer-text: var(--ink-faint); --footer-ip: var(--ink-muted); --footer-ip-hover: var(--brand); --footer-copy-border: var(--line-strong); --footer-copy-hover-bg: var(--hover); --footer-copy-text: var(--ink-muted);
    --header-bg: var(--header); --header-border: var(--line);
    --brand-w: var(--brand); --brand-w-hover: var(--brand-hover); --brand-rest: var(--ink-strong); --brand-rest-hover: var(--brand); --brand-sub: var(--ink-muted); --brand-sub-hover: var(--brand); --brand-dot: var(--ink-muted); --brand-divider: var(--line);
    --success-bg: var(--success-surface); --success-border: var(--success-line); --success-text: var(--success-ink);
    --warn-bg: var(--warning-surface); --warn-border: var(--warning-line); --warn-text: var(--warning-ink);
    --error-bg: var(--danger-surface); --error-border: var(--danger-line); --error-text: var(--danger-ink);
    --info-bg: var(--info-surface); --info-border: var(--info-line); --info-text: var(--info-ink);
    --btn-primary-bg: var(--brand-fill); --btn-primary-border: transparent; --btn-primary-text: #fff;
    --btn-primary-hover-bg: var(--brand-fill-hover); --btn-primary-hover-border: transparent; --btn-primary-hover-text: #fff;
    --btn-spinner-border: #ffffff55; --btn-spinner-top: #fff;
    --toggle-bg: var(--surface); --toggle-border: var(--line); --toggle-icon: var(--ink-muted); --toggle-icon-hover: var(--brand);
    --toggle-dd-bg: var(--surface-elevated); --toggle-dd-border: var(--line); --toggle-dd-text: var(--ink); --toggle-dd-hover-bg: var(--hover); --toggle-dd-active-bg: var(--selected); --toggle-dd-active-text: var(--brand); --toggle-dd-active-border: var(--brand);
    --code-bg: var(--surface-inset); --shadow-card: var(--elevation); --shadow-hover: var(--elevation-high);
    --font-ui: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-data: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;
}

/* ══════════════════════════════════════════════════════════════════════════
   GLOBAL RESET & BASE
   ══════════════════════════════════════════════════════════════════════════ */

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

html {
    background-color: var(--bg-page);
    /* Smooth transition for theme changes — only on color-related props */
    transition: background-color 200ms ease;

    /* Single source of truth for the header's real rendered height.
       It must be tall enough to contain the 34px toggle buttons plus
       the header's own 0.9rem vertical padding (34 + 2*14.4 = 62.8px) —
       .site-header's old hard-coded "min-height: 60px" undershot that,
       and .sidebar/.sidebar-backdrop independently guessed "60px" too,
       so the two never actually lined up. Both now read this one value. */
    --header-height: 64px;
}

@media (max-width: 768px) {
    html {
        /* Mobile padding is 0.75rem and the toggle stays 34px (it doesn't
           shrink the way .theme-toggle__btn does), so real height here is
           34 + 2*12 = 58px. */
        --header-height: 60px;
    }
}

body {
    background-color: var(--bg-page);
    color: var(--text-primary);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    transition: background-color 200ms ease, color 200ms ease;
}

/* ══════════════════════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════════════════════ */

.site-footer {
    margin-top: auto;
    padding: 1.25rem 1.5rem;
    text-align: center;
    font-size: 0.8rem;
    color: var(--footer-text);
    border-top: 1px solid var(--footer-border);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    background: var(--footer-bg);
    transition: border-color 200ms ease, color 200ms ease;
}

/* ── Footer IP block ─────────────────────────────────────── */
.footer-ip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    color: var(--footer-text);
}

.footer-ip__label {
    color: var(--footer-text);
}

.footer-ip__addr {
    color: var(--footer-ip);
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    letter-spacing: 0.02em;
}

.footer-ip__addrs {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
}

.footer-ip__sep {
    color: var(--border-strong);
    font-size: 0.75rem;
    user-select: none;
}

/* Clickable IP address link to browser fingerprint page */
.footer-ip__addr--link {
    color: var(--footer-ip);
    text-decoration: none;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    letter-spacing: 0.02em;
    border-bottom: 1px dotted transparent;
    transition: color 150ms ease, border-color 150ms ease;
}

.footer-ip__addr--link:hover {
    color: var(--footer-ip-hover);
    border-bottom-color: var(--footer-ip-hover);
    text-decoration: none;
}

.footer-ip__copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid var(--footer-copy-border);
    border-radius: 4px;
    color: var(--footer-copy-text);
    cursor: pointer;
    padding: 2px 4px;
    margin-left: 2px;
    transition: color 150ms ease, border-color 150ms ease, background-color 150ms ease;
    line-height: 1;
}

.footer-ip__copy:hover {
    color: var(--text-primary);
    border-color: var(--accent-blue-light);
    background-color: var(--footer-copy-hover-bg);
}

.footer-ip__copy--copied {
    color: var(--accent-green2);
    border-color: var(--accent-green2);
}

/* ══════════════════════════════════════════════════════════════════════════
   GLOBAL LINK STYLES
   ══════════════════════════════════════════════════════════════════════════ */

a {
    color: var(--text-link);
    text-decoration: none;
}

a:hover {
    color: var(--text-link-hover);
    text-decoration: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   SITE HEADER
   ══════════════════════════════════════════════════════════════════════════ */

.site-header {
    background-color: var(--header-bg);
    border-bottom: 1px solid var(--header-border);
    display: flex;
    align-items: center;
    padding: 0.9rem 1.5rem;
    min-height: var(--header-height);
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 100;
    transition: background-color 200ms ease, border-color 200ms ease;
}

/* ── Site title link ─────────────────────────────────────── */
.site-title-link {
    text-decoration: none !important;
    user-select: none;
    display: flex;
    align-items: center;
}

.site-title-link:hover {
    text-decoration: none !important;
}

/* ── Brand row: title + divider + subtitle in one line ───── */
.brand-row {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* ── Site title heading ──────────────────────────────────── */
.site-title {
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1;
    margin: 0;
    white-space: nowrap;
    display: flex;
    align-items: baseline;
    gap: 0;
}

.site-title .brand-wdois {
    color: var(--brand-w);
    transition: opacity 180ms ease;
}

.site-title-link:hover .brand-wdois {
    opacity: 0.85;
}

/* .com — clearly subordinate: smaller, lighter, slightly dimmed */
.site-title .brand-dot {
    color: var(--brand-dot);
    font-weight: 400;
    font-size: 0.875rem;
    letter-spacing: -0.01em;
    opacity: 0.8;
    transition: color 180ms ease, opacity 180ms ease;
    /* Optical alignment: sit slightly above baseline to match cap-height midpoint */
    position: relative;
    top: -0.05em;
}

.site-title-link:hover .brand-dot {
    color: var(--brand-sub-hover);
    opacity: 1;
}

/* ── Vertical divider between title and subtitle ─────────── */
.brand-divider {
    display: block;
    width: 1px;
    height: 1.2rem;
    background-color: var(--brand-divider);
    flex-shrink: 0;
    align-self: center;
    opacity: 0.8;
}

/* ── Site subtitle ───────────────────────────────────────── */
.site-subtitle {
    font-size: 0.73rem;
    font-weight: 400;
    color: var(--brand-sub);
    letter-spacing: 0.025em;
    margin: 0;
    white-space: nowrap;
    transition: color 180ms ease;
    line-height: 1;
    opacity: 0.9;
}

.site-title-link:hover .site-subtitle {
    color: var(--brand-sub-hover);
}

/* ── Sidebar toggle button — morphs hamburger ⇄ back arrow ──
   Single source of truth for open/closed is the html.sidebar-open
   class (set pre-paint from localStorage — see base.html.twig).
   No "X" close icon, per design: collapsing reads as "back", not
   "dismiss". ─────────────────────────────────────────────────── */
.sidebar-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    color: var(--toggle-icon);
    cursor: pointer;
    padding: 0;
    margin-right: 1rem;
    align-self: center;
    flex-shrink: 0;
    transition: color 150ms ease;
}

.sidebar-toggle:hover {
    color: var(--toggle-icon-hover);
}

.sidebar-toggle:focus-visible {
    outline: 2px solid var(--accent-blue);
    outline-offset: 2px;
}

.sidebar-toggle__icon {
    position: absolute;
    width: 18px;
    height: 18px;
    pointer-events: none;
    transition: opacity 220ms ease, transform 220ms ease;
}

.sidebar-toggle__icon--back {
    opacity: 0;
    transform: rotate(-90deg) scale(0.6);
}

html.sidebar-open .sidebar-toggle__icon--menu {
    opacity: 0;
    transform: rotate(90deg) scale(0.6);
}

html.sidebar-open .sidebar-toggle__icon--back {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

/* ── Sidebar ──────────────────────────────────────────────
   Fixed column below the sticky header, collapsed off-screen
   by default. Desktop: pushes .app-main right. Mobile: overlays
   content with a backdrop (see @media block below). ─────────── */
.sidebar {
    position: fixed;
    top: var(--header-height);
    left: 0;
    bottom: 0;
    width: 260px;
    max-width: 85vw;
    background-color: var(--nav-bg);
    border-right: 1px solid var(--nav-border);
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 240ms ease;
    z-index: 150;
}

html.sidebar-open .sidebar {
    transform: translateX(0);
}

/* ── Sidebar search launcher ──
   Styled like a real input (matches the site's --input-* tokens used
   everywhere else) but sits outside .sidebar-nav so it reads as a fixed
   piece of sidebar chrome rather than another link in the list. ──────── */
.sidebar-search {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0.75rem 1.2rem 0.5rem;
    padding: 0.6rem 0.9rem;
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 0.5rem;
    cursor: text;
    transition: border-color 150ms ease;
}

.sidebar-search:focus-within {
    border-color: var(--input-focus-border);
}

.sidebar-search__icon {
    width: 16px;
    height: 16px;
    color: var(--text-dimmed);
    flex-shrink: 0;
}

.sidebar-search__input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: none;
    padding: 0;
    color: var(--input-text);
    font-size: 0.925rem;
    font-family: inherit;
}

.sidebar-search__input::placeholder {
    color: var(--input-placeholder);
}

/* ── Sidebar search loading indicator ──
   Fixed height + visibility toggle (not display) so showing/hiding it never
   shifts the nav links below — only the spinner/text fade in and out. ──── */
.sidebar-search-status {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    height: 0.95rem;
    margin: -0.2rem 1.2rem 0.5rem;
    overflow: hidden;
    visibility: hidden;
}

.sidebar-search-status--active {
    visibility: visible;
}

.sidebar-search-status__spinner {
    width: 13px;
    height: 13px;
    border: 2px solid var(--border-strong);
    border-top-color: var(--accent-blue);
    border-radius: 50%;
    flex-shrink: 0;
}

.sidebar-search-status--active .sidebar-search-status__spinner {
    animation: sidebar-search-spin 0.7s linear infinite;
}

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

.sidebar-search-status__text {
    font-size: 0.8rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    padding: 0.75rem 0;
}

.sidebar-section + .sidebar-section {
    border-top: 1px solid var(--nav-border);
    margin-top: 0.5rem;
    padding-top: 0.5rem;
}

.sidebar-section-label {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin: 0.5rem 1.2rem 0.35rem;
}

.nav-menu__link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 1.2rem;
    color: var(--nav-link);
    text-decoration: none;
    font-size: 0.925rem;
    white-space: nowrap;
    transition: background-color 150ms ease, color 150ms ease;
}

.nav-menu__link:hover {
    background-color: var(--nav-link-hover-bg);
    color: var(--text-heading2);
    text-decoration: none;
}

.nav-menu__icon {
    font-size: 1rem;
    line-height: 1;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/* ── Icon sizing and consistency ─────────────────────────── */
/* Pure-outline SVGs work on both dark and light backgrounds natively.
   No filter or mix-blend-mode needed. */
.nav-menu__icon img,
.tool-icon-img,
h1 img,
h2 img,
.icon img,
.ssl-tool-btn img {
    transition: opacity 200ms ease;
}

/* ── Main content column — shifts right when the sidebar pushes it open ── */
.app-main {
    display: flex;
    flex-direction: column;
    flex: 1;
    margin-left: 0;
    transition: margin-left 240ms ease;
}

@media (min-width: 769px) {
    html.sidebar-open .app-main {
        margin-left: 260px;
    }
}

/* Mobile-only backdrop — sits behind the overlay sidebar, closes it on click */
.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: var(--header-height) 0 0 0;
    background-color: rgba(0, 0, 0, 0.45);
    z-index: 140;
    opacity: 0;
    pointer-events: none;
    transition: opacity 240ms ease;
}

/* ── Header right area (holds theme toggle) ──────────────── */
.header-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    align-self: center;
    flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   THEME TOGGLE
   ══════════════════════════════════════════════════════════════════════════ */

.theme-toggle__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: var(--toggle-bg);
    border: 1px solid var(--toggle-border);
    border-radius: 8px;
    color: var(--toggle-icon);
    cursor: pointer;
    transition: color 150ms ease, border-color 150ms ease, background-color 150ms ease;
    flex-shrink: 0;
    padding: 0;
}

.theme-toggle__btn:hover {
    color: var(--toggle-icon-hover);
    border-color: var(--accent-blue-light);
    background-color: var(--bg-hover);
}

.theme-toggle__btn:focus-visible {
    outline: 2px solid var(--accent-blue);
    outline-offset: 2px;
}

.theme-toggle__btn svg {
    width: 16px;
    height: 16px;
    pointer-events: none;
}

.theme-icon-sun  { display: none; }
.theme-icon-moon { display: block; }

html[data-theme="light"] .theme-icon-sun  { display: block; }
html[data-theme="light"] .theme-icon-moon { display: none; }

/* ══════════════════════════════════════════════════════════════════════════
   PAGE BODY & CONTENT WRAPPER
   ══════════════════════════════════════════════════════════════════════════ */

.page-body {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    flex: 1;
}

/* Tool pages and home use .page-wrapper to add top spacing */
.page-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2.5rem 1rem 1.5rem;
    width: 100%;
    flex: 1;
}

.page-wrapper > .container {
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVENESS
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    /* Prevent any horizontal overflow */
    html, body {
        overflow-x: hidden;
    }

    .page-wrapper {
        padding: 1.5rem 0.75rem 1rem;
    }

    /* Container fills full width on mobile */
    .container {
        width: 100%;
        max-width: 100%;
    }

    /* Stack search forms vertically — applies to WHOIS, NS, Dig */
    .search-form {
        flex-direction: column;
        gap: 0.6rem;
    }

    .search-form input[type="text"],
    .search-form select,
    .search-form button {
        width: 100%;
        min-width: 0;
        flex: unset;
    }

    /* SOA details: single column on mobile */
    .soa-details {
        grid-template-columns: 1fr;
    }

    /* Home page: single column card grid */
    .tools-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem;
    }

    /* Tables: allow horizontal scroll inside results card */
    .results-card {
        overflow-x: auto;
    }

    .results-table {
        min-width: 480px;
    }

    /* Header: tighten padding on small screens.
       (min-height comes from --header-height, redeclared above for this breakpoint —
       .sidebar and .sidebar-backdrop read the same variable, so they stay aligned
       automatically without needing their own copies of this number.) */
    .site-header {
        padding: 0.75rem 1rem;
    }

    /* Sidebar: overlays content instead of pushing it on mobile */
    html.sidebar-open .sidebar-backdrop {
        display: block;
        opacity: 1;
        pointer-events: auto;
    }

    /* Brand: hide subtitle + divider on very small screens to save space */
    .brand-divider,
    .site-subtitle {
        display: none;
    }

    /* Footer: stack vertically on mobile */
    .site-footer {
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
        padding: 1rem 1rem;
        text-align: center;
    }

    /* IP block: stack label + addresses + copy button vertically */
    .footer-ip {
        flex-direction: column;
        align-items: center;
        gap: 0.25rem;
    }

    /* Address group: allow wrapping so IPv4 | IPv6 wraps on very small screens */
    .footer-ip__addrs {
        justify-content: center;
        flex-wrap: wrap;
    }

    /* Smaller font + word-break for long IPv6 addresses */
    .footer-ip__addr,
    .footer-ip__addr--link {
        font-size: 0.72rem;
        word-break: break-all;
        overflow-wrap: anywhere;
        text-align: center;
    }

    /* Copy button gets a bit more tap target on mobile */
    .footer-ip__copy {
        padding: 3px 8px;
        margin-left: 0;
        margin-top: 2px;
    }

    .theme-toggle__btn {
        width: 30px;
        height: 30px;
    }
}

/* ── Learn article: anchor scroll offset ───────────────────────────────────── */
.article-body h2,
.article-body h3,
.article-body h4 {
    scroll-margin-top: 100px;
}

/* Shared visually-hidden utility: stays in the accessibility tree (never display:none / visibility:hidden)
   and takes no layout space. Used by the #result-announcement live region and screen-reader-only text. */
.sr-only,
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
}