/* JMC - 04/14/2026 - Knowledge Base styles */
/* JMC - 04/16/2026 - Header always renders dark regardless of light/dark theme */

/* ── Theme variables ─────────────────────────────────────────────────────── */
:root {
    --kb-bg:           #ffffff;
    --kb-bg-sidebar:   #f8fafc;
    --kb-bg-header:    #ffffff;
    --kb-bg-search:    #f1f5f9;
    --kb-border:       #e2e8f0;
    --kb-text:         #0f172a;
    --kb-text-muted:   #64748b;
    --kb-text-faint:   #94a3b8;
    --kb-nav-active:   #0ea5e9;
    --kb-nav-dot:      #0ea5e9;
    --kb-nav-hover:    #0f172a;
    --kb-ring:         rgba(0,0,0,0.08);
    --kb-shadow:       rgba(0,0,0,0.06);

    /* Header shell — always dark in light mode */
    --kb-header-bg:       #1e293b;
    --kb-header-border:   rgba(255,255,255,0.08);
    --kb-header-text:     #f1f5f9;
    --kb-header-muted:    #94a3b8;
    --kb-header-faint:    #64748b;
    --kb-header-item-bg:  rgba(255,255,255,0.07);
    --kb-header-item-bdr: rgba(255,255,255,0.12);

    /* JMC - 05/01/2026 - Article body code/quote/table tones (light mode) */
    --kb-code-bg:      #f1f5f9;
    --kb-code-text:    #0f172a;
    --kb-quote-border: #cbd5e1;
    --kb-table-stripe: #f8fafc;
    --kb-table-border: #e2e8f0;
}

.dark {
    --kb-bg:           #0f172a;
    --kb-bg-sidebar:   #0f172a;
    --kb-bg-header:    #0f172a;
    --kb-bg-search:    #1e293b;
    --kb-border:       rgba(255,255,255,0.08);
    --kb-text:         #f1f5f9;
    --kb-text-muted:   #94a3b8;
    --kb-text-faint:   #64748b;
    --kb-nav-active:   #38bdf8;
    --kb-nav-dot:      #38bdf8;
    --kb-nav-hover:    #f1f5f9;
    --kb-ring:         rgba(255,255,255,0.08);
    --kb-shadow:       rgba(0,0,0,0.3);

    /* Header shell — preserve existing dark-mode appearance exactly */
    --kb-header-bg:       #0f172a;
    --kb-header-border:   rgba(255,255,255,0.08);
    --kb-header-text:     #f1f5f9;
    --kb-header-muted:    #94a3b8;
    --kb-header-faint:    #64748b;
    --kb-header-item-bg:  #1e293b;
    --kb-header-item-bdr: rgba(255,255,255,0.08);

    /* JMC - 05/01/2026 - Article body code/quote/table tones (dark mode) */
    --kb-code-bg:      #1e293b;
    --kb-code-text:    #e2e8f0;
    --kb-quote-border: #334155;
    --kb-table-stripe: #1e293b;
    --kb-table-border: rgba(255,255,255,0.08);
}

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

/* JMC - 05/01/2026 - Force the HTML `hidden` attribute to win over any
   explicit `display: flex|grid|...` we set on a class. Without this, an
   element with both `class="kb-vote-thanks"` and `hidden` still renders
   because `.kb-vote-thanks { display: flex; }` overrides the user-agent
   default of `[hidden] { display: none }`. */
[hidden] { display: none !important; }

body {
    font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
    background: var(--kb-bg);
    color: var(--kb-text);
    line-height: 1.6;
    transition: background-color 0.2s, color 0.2s;
}

a { color: inherit; text-decoration: none; }

/* ── Header ──────────────────────────────────────────────────────────────── */
#kb-header {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 16px;
    padding: 12px 24px;
    background: var(--kb-header-bg);
    border-bottom: 1px solid var(--kb-header-border);
    box-shadow: 0 1px 3px var(--kb-shadow);
    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.kb-header-left  { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.kb-header-right { display: flex; align-items: center; gap: 8px; }

.kb-wordmark {
    font-size: 1rem;
    font-weight: 600;
    color: var(--kb-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#kb-header .kb-wordmark { color: var(--kb-header-text); }

.kb-nav-logo {
    height: 28px;
    width: auto;
    flex-shrink: 0;
}

/* ── Search button ───────────────────────────────────────────────────────── */
#kb-search-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 14px;
    background: var(--kb-header-item-bg);
    border: 1px solid var(--kb-header-item-bdr);
    border-radius: 8px;
    font-size: 0.875rem;
    color: var(--kb-header-muted);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    width: 260px;
}

#kb-search-btn:hover {
    background: var(--kb-header-item-bdr);
}

#kb-search-btn svg { fill: var(--kb-header-faint); flex-shrink: 0; }

.kb-search-shortcut {
    margin-left: auto;
    font-size: 0.7rem;
    font-family: ui-monospace, monospace;
    color: var(--kb-header-faint);
}

/* ── Theme toggle ────────────────────────────────────────────────────────── */
#kb-theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--kb-header-muted);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

#kb-theme-toggle:hover {
    background: var(--kb-header-item-bg);
    color: var(--kb-header-text);
}


/* ── Hero ────────────────────────────────────────────────────────────────── */
.kb-hero {
    position: relative;
    overflow: hidden;
    background: #0d1e32;
    padding: 80px 24px;
}

.kb-hero-blob-1,
.kb-hero-blob-2 {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
}

.kb-hero-blob-1 {
    width: 45%;
    aspect-ratio: 1;
    background: rgba(71,178,228,0.22);
    top: -30%;
    right: 0%;
}

.kb-hero-blob-2 {
    width: 35%;
    aspect-ratio: 1;
    background: rgba(14,165,233,0.18);
    bottom: -30%;
    left: 5%;
}

.kb-hero-inner {
    position: relative;
    z-index: 1;
    max-width: 680px;
    margin: 0 auto;
    text-align: center;
}

.kb-hero-eyebrow {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(125,211,252,0.8);
    margin-bottom: 14px;
}

.kb-hero h1 {
    font-size: clamp(2.2rem, 5vw, 3.5rem);
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin-bottom: 20px;
}

.kb-hero p {
    font-size: 1.1rem;
    color: rgba(255,255,255,0.65);
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.7;
}

/* ── Layout ──────────────────────────────────────────────────────────────── */
.kb-layout {
    display: flex;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 16px;
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
.kb-sidebar-wrap {
    display: none;
    flex-shrink: 0;
    width: 272px;
    position: relative;
}

.kb-sidebar-wrap::after {
    content: "";
    position: absolute;
    inset-y: 0;
    right: 0;
    width: 50vw;
    background: var(--kb-bg-sidebar);
    z-index: -1;
}

@media (min-width: 1024px) {
    .kb-sidebar-wrap { display: block; }
    #kb-mobile-toggle { display: none; }
}

.kb-sidebar {
    position: sticky;
    top: 73px;
    height: calc(100vh - 73px);
    overflow-y: auto;
    padding: 40px 24px 40px 2px;
    scrollbar-width: thin;
    scrollbar-color: var(--kb-border) transparent;
}

.kb-sidebar::-webkit-scrollbar { width: 4px; }
.kb-sidebar::-webkit-scrollbar-track { background: transparent; }
.kb-sidebar::-webkit-scrollbar-thumb { background: var(--kb-border); border-radius: 4px; }

/* ── Nav ─────────────────────────────────────────────────────────────────── */
.kb-nav { font-size: 0.875rem; }

.kb-nav ul { list-style: none; }

.kb-nav-sections { display: flex; flex-direction: column; gap: 36px; }

.kb-nav-group-title {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--kb-text);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 12px;
}

.kb-nav-links {
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-left: 2px solid var(--kb-border);
    padding-left: 0;
}

.kb-nav-link {
    position: relative;
    display: block;
    padding: 3px 0 3px 14px;
    color: var(--kb-text-muted);
    font-size: 0.875rem;
    transition: color 0.15s;
    border-radius: 0;
}

.kb-nav-link::before {
    content: "";
    position: absolute;
    left: -5px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--kb-nav-dot);
    opacity: 0;
    transition: opacity 0.15s;
}

.kb-nav-link:hover { color: var(--kb-nav-hover); }
.kb-nav-link:hover::before { opacity: 0.4; }

.kb-nav-link.active {
    color: var(--kb-nav-active);
    font-weight: 600;
}

.kb-nav-link.active::before { opacity: 1; }

/* ── Main content ────────────────────────────────────────────────────────── */
.kb-main {
    flex: 1;
    min-width: 0;
    padding: 48px 24px 80px;
}

@media (min-width: 1024px) {
    .kb-main { padding: 48px 40px 80px; }
}

.kb-main h2 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--kb-text);
    margin-bottom: 16px;
}

.kb-main p {
    color: var(--kb-text-muted);
    font-size: 0.95rem;
}

/* ── Search dialog ───────────────────────────────────────────────────────── */
#kb-search-dialog {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(15,23,42,0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    padding: 16px;
    overflow-y: auto;
}

#kb-search-dialog.open { display: block; }

.kb-search-panel {
    background: var(--kb-bg-header);
    border-radius: 12px;
    box-shadow: 0 25px 50px rgba(0,0,0,0.25);
    border: 1px solid var(--kb-border);
    max-width: 560px;
    margin: 100px auto 0;
    overflow: hidden;
}

.kb-search-input-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    height: 52px;
    border-bottom: 1px solid var(--kb-border);
}

.kb-search-input-wrap svg { fill: var(--kb-text-faint); flex-shrink: 0; }

#kb-search-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 0.95rem;
    color: var(--kb-text);
    outline: none;
}

#kb-search-input::placeholder { color: var(--kb-text-faint); }

.kb-search-esc {
    font-size: 0.7rem;
    font-family: ui-monospace, monospace;
    color: var(--kb-text-faint);
    background: var(--kb-bg-search);
    border: 1px solid var(--kb-border);
    border-radius: 4px;
    padding: 2px 6px;
    cursor: pointer;
}

.kb-search-body {
    max-height: 420px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--kb-border) transparent;
}

.kb-search-hint,
.kb-search-empty,
.kb-search-loading {
    padding: 40px 24px;
    text-align: center;
    font-size: 0.875rem;
    color: var(--kb-text-muted);
    margin: 0;
}

/* ── Search result items ─────────────────────────────────────────────────── */
.kb-search-result-item {
    display: block;
    padding: 10px 16px;
    border-bottom: 1px solid var(--kb-border);
    text-decoration: none;
    transition: background 0.1s;
}

.kb-search-result-item:last-child { border-bottom: none; }

.kb-search-result-item:hover,
.kb-search-result-item.kb-search-result-active {
    background: var(--kb-bg-search);
}

.kb-search-result-top {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 3px;
}

.kb-search-result-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--kb-text);
    flex: 1;
    min-width: 0;
}

.kb-search-result-cat {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--kb-nav-active);
    background: rgba(14,165,233,0.1);
    border: 1px solid rgba(14,165,233,0.2);
    border-radius: 4px;
    padding: 1px 6px;
    white-space: nowrap;
    flex-shrink: 0;
}

.kb-search-result-excerpt {
    font-size: 0.78rem;
    color: var(--kb-text-muted);
    line-height: 1.5;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.kb-search-result-category {
    background: rgba(14,165,233,0.04);
    border-left: 3px solid var(--kb-nav-active);
}

.kb-search-result-category:hover,
.kb-search-result-category.kb-search-result-active {
    background: rgba(14,165,233,0.1);
}

.kb-search-result-cat-section {
    color: var(--kb-nav-active);
    background: rgba(14,165,233,0.12);
    border-color: rgba(14,165,233,0.25);
}

/* ── Mobile sidebar ──────────────────────────────────────────────────────── */
#kb-mobile-sidebar {
    position: fixed;
    inset-y: 0;
    left: 0;
    z-index: 50;
    width: 280px;
    background: var(--kb-bg-header);
    border-right: 1px solid var(--kb-border);
    padding: 24px;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
}

#kb-mobile-sidebar.open { transform: translateX(0); }

#kb-mobile-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(15,23,42,0.4);
}

#kb-mobile-overlay.open { display: block; }

.kb-mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.kb-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: none;
    background: transparent;
    color: var(--kb-text-muted);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.kb-icon-btn:hover {
    background: var(--kb-bg-search);
    color: var(--kb-text);
}

#kb-header .kb-icon-btn {
    color: var(--kb-header-muted);
}
#kb-header .kb-icon-btn:hover {
    background: var(--kb-header-item-bg);
    color: var(--kb-header-text);
}

/* ── Responsive header ───────────────────────────────────────────────────── */
@media (max-width: 768px) {
    #kb-header {
        padding: 10px 16px;
    }

    .kb-wordmark {
        font-size: 0.9rem;
    }

    /* Edit Mode button (sysadmin only) — wraps to its own centered second row */
    #kb-edit-toggle {
        order: 10;
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 640px) {
    .kb-search-shortcut { display: none; }

    /* Collapse search bar to a bare icon button on small screens */
    #kb-search-btn {
        width: 36px;
        height: 36px;
        padding: 0;
        justify-content: center;
        background: transparent;
        border-color: transparent;
        flex: 0 0 auto;
    }

    #kb-search-btn:hover {
        background: var(--kb-header-item-bg);
        border-color: var(--kb-header-item-bdr);
    }

    #kb-search-btn span { display: none; }

    #kb-search-btn svg {
        width: 18px;
        height: 18px;
        fill: var(--kb-header-muted);
    }
}

/* ── Edit mode toggle button ─────────────────────────────────────────────── */
.kb-edit-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 12px;
    background: transparent;
    border: 1px solid var(--kb-header-item-bdr);
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--kb-header-muted);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.kb-edit-btn:hover {
    background: var(--kb-header-item-bg);
    color: var(--kb-header-text);
}

.kb-edit-btn-active {
    background: #0ea5e9;
    border-color: #0ea5e9;
    color: #fff;
}

.kb-edit-btn-active:hover {
    background: #0284c7;
    border-color: #0284c7;
    color: #fff;
}

/* ── Edit controls (hidden until edit mode) ──────────────────────────────── */
.kb-edit-control { display: none; }

.kb-edit-mode .kb-edit-control { display: flex; }

/* ── Inactive items (sysadmin view) ──────────────────────────────────────── */
.kb-inactive {
    opacity: 0.45;
    text-decoration: line-through;
}

.kb-inactive-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    color: #ef4444;
    background: rgba(239,68,68,0.1);
    border: 1px solid rgba(239,68,68,0.25);
    border-radius: 4px;
    padding: 2px 6px;
}

.kb-public-badge {
    display: inline-block;
    margin-left: 6px;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #0284c7;
    background: rgba(14,165,233,0.12);
    border: 1px solid rgba(14,165,233,0.30);
    border-radius: 4px;
    padding: 1px 5px;
    vertical-align: middle;
    line-height: 1.2;
}
html.dark .kb-public-badge {
    color: #7dd3fc;
    background: rgba(125,211,252,0.10);
    border-color: rgba(125,211,252,0.30);
}

/* JMC - 05/29/2026 - FE User badge — mirrors .kb-public-badge in a violet tone so
   "visible on the logged-in FE KB" reads distinctly from the sky-blue Public pill. */
.kb-feuser-badge {
    display: inline-block;
    margin-left: 6px;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #7c3aed;
    background: rgba(124,58,237,0.12);
    border: 1px solid rgba(124,58,237,0.30);
    border-radius: 4px;
    padding: 1px 5px;
    vertical-align: middle;
    line-height: 1.2;
}
html.dark .kb-feuser-badge {
    color: #c4b5fd;
    background: rgba(196,181,253,0.10);
    border-color: rgba(196,181,253,0.30);
}

/* JMC - 05/29/2026 - Audience badges sit on their own line BELOW the title (they
   looked cramped inline with a wrapping title) and run a touch smaller. */
.kb-nav-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}
.kb-nav-badges .kb-public-badge,
.kb-nav-badges .kb-feuser-badge {
    margin-left: 0;
    font-size: 0.6rem;
}

/* JMC - 05/29/2026 - Admin flavor-filter: a pill toggle group atop the edit-mode
   sidebar that focuses the list on one audience (BE Staff / FE Public / FE User). */
.kb-flavor-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 8px 14px 10px;
    border-bottom: 1px solid var(--kb-border);
    margin-bottom: 8px;
}
.kb-flavor-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.2;
    padding: 3px 9px;
    border: 1px solid var(--kb-border);
    border-radius: 999px;
    background: transparent;
    color: var(--kb-text-muted);
    cursor: pointer;
}
/* Colored dot per audience — visible even when inactive, so the three chips are
   distinguishable at a glance (and tied to the sidebar Public / FE User pills). */
.kb-flavor-filter-btn::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--kb-text-faint);
    flex-shrink: 0;
}
.kb-flavor-filter-btn:hover { color: var(--kb-text); }

/* Per-audience palette: BE = slate, FE Public = sky-blue (= .kb-public-badge),
   FE User = violet (= .kb-feuser-badge). Active = soft tinted fill + colored text. */
.kb-flavor-filter-btn[data-filter="active"]::before { background: #64748b; }
.kb-flavor-filter-btn[data-filter="active"]:hover    { border-color: rgba(100,116,139,0.45); }
.kb-flavor-filter-btn[data-filter="active"].active   { color: #475569; background: rgba(100,116,139,0.12); border-color: rgba(100,116,139,0.35); }

.kb-flavor-filter-btn[data-filter="public"]::before { background: #0ea5e9; }
.kb-flavor-filter-btn[data-filter="public"]:hover    { border-color: rgba(14,165,233,0.45); }
.kb-flavor-filter-btn[data-filter="public"].active   { color: #0284c7; background: rgba(14,165,233,0.12); border-color: rgba(14,165,233,0.35); }

.kb-flavor-filter-btn[data-filter="feuser"]::before { background: #7c3aed; }
.kb-flavor-filter-btn[data-filter="feuser"]:hover    { border-color: rgba(124,58,237,0.45); }
.kb-flavor-filter-btn[data-filter="feuser"].active   { color: #7c3aed; background: rgba(124,58,237,0.12); border-color: rgba(124,58,237,0.35); }

/* Dark mode — lighter active text for contrast on the dark sidebar */
html.dark .kb-flavor-filter-btn[data-filter="active"].active { color: #cbd5e1; }
html.dark .kb-flavor-filter-btn[data-filter="public"].active { color: #7dd3fc; }
html.dark .kb-flavor-filter-btn[data-filter="feuser"].active { color: #c4b5fd; }

/* ── Source select in modals ─────────────────────────────────────────────── */
/* JMC - 04/15/2026 - Source field (webpoint vs client) styling */
#kbc_Source,
#kba_Source {
    max-width: 320px;
}

/* ── Article visibility summary (sysadmin, inactive articles) ───────────── */
/* JMC - 04/15/2026 - Shows per-sport enabled/disabled state below inactive articles */
.kb-vis-summary-block {
    margin-top: 16px;
    padding: 14px 16px;
    border: 1px solid var(--kb-border);
    border-radius: 8px;
    background: var(--kb-bg-search);
    font-size: 0.875rem;
}

.kb-vis-summary-loading {
    color: var(--kb-text-muted);
    font-style: italic;
}

.kb-vis-summary-row {
    margin: 0 0 6px;
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.kb-vis-summary-row:last-of-type { margin-bottom: 0; }

.kb-vis-label-tag {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    border-radius: 4px;
    padding: 2px 7px;
    white-space: nowrap;
    flex-shrink: 0;
}

.kb-vis-on {
    color: #16a34a;
    background: rgba(22,163,74,0.1);
    border: 1px solid rgba(22,163,74,0.25);
}

.kb-vis-off {
    color: #dc2626;
    background: rgba(220,38,38,0.1);
    border: 1px solid rgba(220,38,38,0.25);
}

.kb-vis-summary-hint {
    margin: 10px 0 0;
    font-size: 0.8rem;
    color: var(--kb-text-muted);
}

/* ── Visibility checkbox grid ────────────────────────────────────────────── */
/* JMC - 04/15/2026 - Per-sport visibility checkboxes for webpoint articles */
.kb-visibility-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    padding: 6px 0;
}

.kb-vis-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
    cursor: pointer;
    user-select: none;
}

.kb-vis-label input[type=checkbox] {
    width: 15px;
    height: 15px;
    cursor: pointer;
    flex-shrink: 0;
}

.kb-vis-current {
    font-weight: 500;
}

.kb-vis-current .kb-vis-current-tag {
    font-size: 0.75rem;
    color: var(--kb-text-muted);
    font-weight: 400;
}

/* ── Nav group header (wraps group title + edit icon) ────────────────────── */
.kb-nav-group-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
}

.kb-nav-group-title {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--kb-text);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    flex: 1;
}

.kb-nav-group-actions {
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

/* ── Nav link wrap (link + action icons) ─────────────────────────────────── */
.kb-nav-link-wrap {
    display: flex;
    align-items: center;
    gap: 2px;
}

.kb-nav-link-wrap .kb-nav-link {
    flex: 1;
    min-width: 0;
}

.kb-nav-link-actions {
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

/* ── "Add Article" button in nav ─────────────────────────────────────────── */
.kb-add-article-li {
    padding-left: 14px;
    margin-top: 4px;
}

.kb-add-article-btn {
    font-size: 0.78rem;
    color: var(--kb-nav-active);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 2px 0;
    transition: opacity 0.15s;
}

.kb-add-article-btn:hover { opacity: 0.7; }

/* ── "Add Category" button ───────────────────────────────────────────────── */
.kb-add-cat-wrap {
    margin-top: 32px;
    padding-left: 2px;
}

.kb-add-cat-btn {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--kb-nav-active);
    background: transparent;
    border: 1px dashed var(--kb-nav-active);
    border-radius: 6px;
    padding: 6px 14px;
    cursor: pointer;
    width: 100%;
    text-align: left;
    transition: background 0.15s, opacity 0.15s;
}

.kb-add-cat-btn:hover { background: rgba(14,165,233,0.08); }

/* ── Article header (title + edit button) ────────────────────────────────── */
.kb-article-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
}

.kb-article-header h2 { margin-bottom: 0; flex: 1; }

/* JMC - 04/16/2026 - Article page header: breadcrumb + title row */
.kb-page-header {
    padding-bottom: 18px;
    margin-bottom: 22px;
    border-bottom: 1px solid var(--kb-border);
}

.kb-breadcrumb-mobile { margin-bottom: 6px; }

@media (min-width: 640px) {
    .kb-breadcrumb-mobile { display: none; }
}

.kb-breadcrumb-back {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 0.84rem;
    font-weight: 500;
    color: var(--kb-text-muted);
    text-decoration: none;
    transition: color 0.15s;
}

.kb-breadcrumb-back:hover { color: var(--kb-text); }

.kb-breadcrumb-trail {
    display: none;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

@media (min-width: 640px) { .kb-breadcrumb-trail { display: flex; } }

.kb-breadcrumb-home {
    display: inline-flex;
    align-items: center;
    color: var(--kb-text-muted);
    text-decoration: none;
    transition: color 0.15s;
}

.kb-breadcrumb-home:hover { color: var(--kb-text); }

.kb-breadcrumb-link {
    font-size: 0.84rem;
    font-weight: 500;
    color: var(--kb-text-muted);
    text-decoration: none;
    transition: color 0.15s;
}

.kb-breadcrumb-link:hover { color: var(--kb-text); }

.kb-breadcrumb-plain {
    cursor: default;
    pointer-events: none;
}

.kb-breadcrumb-sep { flex-shrink: 0; color: var(--kb-text-faint); }

.kb-breadcrumb-current {
    font-size: 0.84rem;
    font-weight: 500;
    color: var(--kb-text-muted);
}

.kb-page-title-row {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-top: 6px;
}

.kb-page-title {
    flex: 1;
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--kb-text);
    line-height: 1.25;
    margin: 0;
}

@media (min-width: 640px) { .kb-page-title { font-size: 1.85rem; } }

.kb-article-edit-btn,
.kb-welcome-edit-btn,
.kb-public-welcome-edit-btn {
    display: none; /* shown via .kb-edit-mode .kb-edit-control */
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    height: 32px;
    padding: 0 12px;
    background: transparent;
    border: 1px solid var(--kb-border);
    border-radius: 6px;
    font-size: 0.8rem;
    color: var(--kb-text-muted);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}

.kb-article-edit-btn:hover,
.kb-welcome-edit-btn:hover,
.kb-public-welcome-edit-btn:hover {
    background: var(--kb-bg-search);
    color: var(--kb-text);
}

/* ── Article body ────────────────────────────────────────────────────────── */
.kb-article-body {
    font-size: 0.95rem;
    line-height: 1.75;
    color: var(--kb-text);
}

/* JMC - 04/29/2026 - Restore link styling inside article bodies. The global `a { color: inherit; text-decoration: none; }` rule strips links everywhere, so without this, anchors render indistinguishable from body text. Uses --kb-nav-active so the color tracks light/dark mode the same as the rest of the KB chrome. */
.kb-article-body a {
    color: var(--kb-nav-active);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.kb-article-body a:hover {
    text-decoration: none;
}

/* JMC - 05/18/2026 - Make links visible inside the Froala editor. The global
`a { color: inherit; text-decoration: none }` reset strips link styling everywhere;
`.kb-article-body a` restores it for rendered articles but the editor's
contenteditable surface (`.fr-element`) is not covered, so links there look
identical to body text. This matches the editor to the published-page styling. */
.fr-element a {
    color: var(--kb-nav-active);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* JMC - 05/18/2026 - Match the Froala editor's content surface to the published
article styling so editing is true WYSIWYG. Froala's bundled CSS gives the editing
area its own typography (14px / 1.6 line-height) and the global `* { padding: 0 }`
reset strips list indentation; the published page restores all of this via
`.kb-article-body` rules that never reach the editor surface (`.fr-element`).
Scoped under `.froala-editor-container` and made specific enough to beat Froala's
`.fr-box.fr-basic .fr-element` rule, since Froala CSS loads after kb.css. */

/* Base typography — out-specifies Froala's `.fr-box.fr-basic .fr-element` */
.froala-editor-container .fr-box.fr-basic .fr-element {
    font-size: 0.95rem;
    line-height: 1.75;
}

/* Bulleted / numbered lists — restore the published indent + spacing */
.froala-editor-container .fr-element ul,
.froala-editor-container .fr-element ol {
    padding-left: 26px;
    margin: 6px 0 14px;
}
.froala-editor-container .fr-element ul ul,
.froala-editor-container .fr-element ul ol,
.froala-editor-container .fr-element ol ul,
.froala-editor-container .fr-element ol ol {
    margin: 4px 0 4px;
}
.froala-editor-container .fr-element li {
    margin-bottom: 4px;
}
.froala-editor-container .fr-element li > p {
    margin: 0;
}

/* Section headings — mirror the published `.kb-section` look for the
`<p><b>Title</b></p>` / `<p><strong>Title</strong></p>` pattern the TOC transform
targets. The transform (`kbBuildTOC()` in kb.js) matches a paragraph whose only
child is a `<b>` OR `<strong>`, so both are matched here. `:only-child` is the CSS
equivalent of that exact pattern. Simplified vs `.kb-section` (no flex / anchor-
icon — there is no anchor button in the editor). The look reverts live if the line
is edited so it is no longer bold-only — same matching rule the published transform
uses, so editor and page stay consistent either way. */
.froala-editor-container .fr-element p:has(> b:only-child),
.froala-editor-container .fr-element p:has(> strong:only-child) {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.4;
    margin: 28px 0 10px;
}

/* JMC - 04/29/2026 - Override Froala's .fr-view paragraph color. Froala's bundled CSS styles `.fr-view p` with a muted/faded color intended for the editor's preview chrome, which leaks into our article rendering and makes prose look washed-out next to bullet lists (which Froala styles separately). Force every text element in the article body back to the KB's standard text color. */
.kb-article-body p,
.kb-article-body li,
.kb-article-body span,
.kb-article-body div,
.kb-article-body b,
.kb-article-body strong,
.kb-article-body em,
.kb-article-body i {
    color: var(--kb-text);
}

/* JMC - 05/01/2026 - The global `*, *::before, *::after { padding: 0 }` reset
   near the top of this file zeros out the default <ul>/<ol> padding-left,
   which makes bullets sit flush with body prose. Restore the indent inside
   article bodies (and welcome content) so lists visually break from prose
   and wrapped lines align under the first character, not under the bullet. */
.kb-article-body ul,
.kb-article-body ol {
    padding-left: 26px;
    margin: 6px 0 14px;
}

.kb-article-body ul ul,
.kb-article-body ul ol,
.kb-article-body ol ul,
.kb-article-body ol ol {
    margin: 4px 0 4px;
}

/* JMC - 2026-05-11 - Froala link/image popups land at the viewport's top-left
   when the editor is in a modal. Froala's `popups.show` re-parents popups into
   the configured `scrollableContainer` (here, `.froala-editor-container`) and
   then positions them with deltas from that container's bounding rect, assuming
   the container is the CSS containing block. Without an explicit `position`,
   the container is static and abs-positioned popups fall through to `.kb-modal`
   (the nearest positioned ancestor), so a ~60px delta resolves to ~60px from
   the modal/viewport origin. Pinning the container relative restores the
   intended containing block. */
.froala-editor-container {
    position: relative;
}

.kb-article-body li {
    margin-bottom: 4px;
}

.kb-article-body li > p {
    margin: 0;
}

.kb-no-content {
    font-style: italic;
    color: var(--kb-text-muted);
}

/* ── Article meta (dates, status) ────────────────────────────────────────── */
.kb-article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 32px;
    padding-top: 16px;
    border-top: 1px solid var(--kb-border);
    font-size: 0.78rem;
    color: var(--kb-text-muted);
}

/* ── Modal ───────────────────────────────────────────────────────────────── */
.kb-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgba(15,23,42,0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    padding: 16px;
    overflow-y: auto;
}

.kb-modal.open { display: block; }

.kb-modal-panel {
    background: var(--kb-bg-header);
    border: 1px solid var(--kb-border);
    border-radius: 12px;
    box-shadow: 0 25px 50px rgba(0,0,0,0.2);
    max-width: 520px;
    margin: 80px auto 40px;
    overflow: hidden;
}

.kb-modal-panel-lg {
    max-width: 820px;
}

/* JMC - 05/18/2026 - The Froala link / image-manager popups are absolutely
positioned inside the editor and can extend past the modal panel. The panel's
`overflow: hidden` (set for corner-rounding) was clipping the bottom of those
popups — e.g. the link popup's "Open in new tab" checkbox — with no way to scroll
to them. Allow overflow on just the two editor-bearing modals; `.kb-modal` itself
is `overflow-y: auto`, so a popup taller than the viewport stays reachable. */
#kb-article-modal .kb-modal-panel,
#kb-welcome-modal .kb-modal-panel {
    overflow: visible;
}

.kb-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--kb-border);
}

.kb-modal-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--kb-text);
}

.kb-modal-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.kb-modal-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid var(--kb-border);
    justify-content: flex-end;
}

.kb-modal-error {
    flex: 1;
    font-size: 0.82rem;
    color: #ef4444;
}

/* ── Modal form controls ─────────────────────────────────────────────────── */
.kb-form-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.kb-form-row label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--kb-text);
}

.kb-label-hint {
    font-weight: 400;
    font-size: 0.75rem;
    color: var(--kb-text-muted);
}

.kb-form-row input[type="text"],
.kb-form-row input[type="number"],
.kb-form-row select {
    height: 36px;
    padding: 0 10px;
    background: var(--kb-bg-search);
    border: 1px solid var(--kb-border);
    border-radius: 6px;
    font-size: 0.875rem;
    color: var(--kb-text);
    outline: none;
    transition: border-color 0.15s;
    width: 100%;
    box-sizing: border-box;
}

.kb-form-row input:focus,
.kb-form-row select:focus {
    border-color: var(--kb-nav-active);
}

.kb-form-row-split {
    flex-direction: row;
    gap: 20px;
    align-items: flex-end;
}

.kb-form-row-split > div { flex: 1; display: flex; flex-direction: column; gap: 6px; }

.kb-form-check {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 8px;
    padding-bottom: 8px;
}

/* JMC - 04/16/2026 - Toast notifications */
#kb-toast-region {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 20px 16px;
    gap: 10px;
    z-index: 9999;
}

@media (min-width: 640px) {
    #kb-toast-region { padding: 24px; }
}

.kb-toast {
    pointer-events: auto;
    width: 100%;
    max-width: 360px;
    background: #ffffff;
    border: 1px solid var(--kb-border);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.18);
    padding: 14px 14px 14px 16px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    animation: kb-toast-in 0.25s ease-out forwards;
}

[data-theme="dark"] .kb-toast { background: #1e293b; }

.kb-toast.kb-toast-hiding {
    animation: kb-toast-out 0.3s ease-in forwards;
}

@keyframes kb-toast-in {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes kb-toast-out {
    from { opacity: 1; transform: translateX(0); max-height: 120px; margin-bottom: 0; }
    to   { opacity: 0; transform: translateX(20px); max-height: 0; margin-bottom: -10px; }
}

.kb-toast-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    margin-top: 1px;
}

.kb-toast--success .kb-toast-icon { color: #22c55e; }
.kb-toast--error   .kb-toast-icon { color: #ef4444; }

.kb-toast-body { flex: 1; min-width: 0; }

.kb-toast-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--kb-text);
    line-height: 1.3;
}

.kb-toast-message {
    font-size: 0.8125rem;
    color: var(--kb-text-muted);
    margin-top: 3px;
    line-height: 1.4;
}

.kb-toast-close {
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 2px;
    cursor: pointer;
    color: var(--kb-text-muted);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s;
    margin-top: -1px;
}

.kb-toast-close:hover { color: var(--kb-text); }

.kb-form-check input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--kb-nav-active);
}

.kb-form-check label {
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--kb-text);
    cursor: pointer;
}

.kb-form-row-editor {
    gap: 8px;
}

.kb-editor-loading {
    font-size: 0.85rem;
    color: var(--kb-text-muted);
    padding: 40px 0;
    text-align: center;
}

/* ── Modal buttons ───────────────────────────────────────────────────────── */
.kb-btn-primary {
    height: 34px;
    padding: 0 16px;
    background: #0ea5e9;
    border: none;
    border-radius: 7px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
}

.kb-btn-primary:hover { background: #0284c7; }
.kb-btn-primary:disabled { opacity: 0.5; cursor: default; }

.kb-btn-secondary {
    height: 34px;
    padding: 0 14px;
    background: transparent;
    border: 1px solid var(--kb-border);
    border-radius: 7px;
    font-size: 0.85rem;
    color: var(--kb-text-muted);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}

.kb-btn-secondary:hover {
    background: var(--kb-bg-search);
    color: var(--kb-text);
}

/* JMC - 04/15/2026 - Danger/delete button used in cleanup modal */
.kb-btn-danger {
    height: 34px;
    padding: 0 14px;
    background: transparent;
    border: 1px solid #dc2626;
    border-radius: 6px;
    font-size: 0.8rem;
    color: #dc2626;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}

.kb-btn-danger:hover    { background: #dc2626; color: #fff; }
.kb-btn-danger:disabled { opacity: 0.5; cursor: default; }

/* JMC - 04/16/2026 - Confirm dialog (replaces native confirm() prompts) */
.kb-confirm-panel {
    position: relative;
    max-width: 480px;
    padding: 0;
}

.kb-confirm-dismiss {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    border-radius: 6px;
    color: var(--kb-text-muted);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.kb-confirm-dismiss:hover {
    background: var(--kb-ring);
    color: var(--kb-text);
}

.kb-confirm-inner {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 22px 52px 16px 22px;
}

.kb-confirm-icon-wrap {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fee2e2;
    color: #dc2626;
}

.dark .kb-confirm-icon-wrap {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
}

.kb-confirm-content { flex: 1; padding-top: 2px; }

.kb-confirm-title {
    font-size: 0.93rem;
    font-weight: 600;
    color: var(--kb-text);
    margin: 0 0 6px;
}

.kb-confirm-message {
    font-size: 0.83rem;
    color: var(--kb-text-muted);
    margin: 0;
    line-height: 1.55;
}

.kb-confirm-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 4px 22px 20px;
}

/* JMC - 04/15/2026 - Admin Tools sidebar section */
.kb-admin-tools-section {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--kb-border);
}

.kb-admin-tools-header {
    padding: 0 12px 6px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #dc2626;
}

.kb-admin-tool-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
}

/* JMC - 04/15/2026 - Image cleanup modal styles */
.kb-cleanup-intro {
    font-size: 0.875rem;
    color: var(--kb-text-muted);
    margin: 0 0 16px;
}

.kb-cleanup-idle {
    font-size: 0.875rem;
    color: var(--kb-text-muted);
    font-style: italic;
    margin: 0;
}

.kb-cleanup-loading { opacity: 0.7; }

.kb-cleanup-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 420px;
    overflow-y: auto;
}

.kb-cleanup-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border: 1px solid var(--kb-border);
    border-radius: 8px;
    background: var(--kb-bg-body);
}

.kb-cleanup-thumb {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--kb-border);
    flex-shrink: 0;
}

.kb-cleanup-file-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--kb-bg-search);
    color: var(--kb-text-muted);
}

.kb-cleanup-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.kb-cleanup-name {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--kb-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kb-cleanup-size {
    font-size: 0.73rem;
    color: var(--kb-text-muted);
}

.kb-cleanup-badge {
    flex-shrink: 0;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 20px;
    white-space: nowrap;
}

.kb-cleanup-used {
    color: #16a34a;
    background: rgba(22,163,74,0.1);
    border: 1px solid rgba(22,163,74,0.25);
}

.kb-cleanup-unused {
    color: #dc2626;
    background: rgba(220,38,38,0.1);
    border: 1px solid rgba(220,38,38,0.25);
}

.kb-cleanup-status {
    flex: 1;
    font-size: 0.8rem;
    color: var(--kb-text-muted);
}

/* JMC - 04/17/2026 - Quick hide/show all buttons in visibility grid */
.kb-vis-quick-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.kb-vis-quick-btn {
    background: none;
    border: none;
    padding: 0;
    font-size: 0.78rem;
    color: var(--kb-nav-active);
    cursor: pointer;
    transition: opacity 0.15s;
}

.kb-vis-quick-btn:hover { opacity: 0.7; }

.kb-vis-quick-sep {
    font-size: 0.78rem;
    color: var(--kb-text-faint);
}

/* JMC - 04/17/2026 - Footer */
#kb-footer {
    border-top: 1px solid var(--kb-border);
    background: var(--kb-bg-sidebar);
    padding: 32px 24px;
}

.kb-footer-inner {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.kb-footer-brand {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.kb-footer-logo {
    display: block;
    height: 30px;
    width: auto;
    max-width: 200px;
    align-self: flex-start;
}

.dark .kb-footer-logo {
    filter: brightness(0) invert(1);
}

.kb-footer-copy {
    font-size: 0.8rem;
    color: var(--kb-text-muted);
    margin: 0;
}

.kb-footer-help {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

.kb-footer-help-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--kb-text);
    margin: 0;
}

.kb-footer-help-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 16px;
    background: #0ea5e9;
    border: none;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    transition: background 0.15s;
    cursor: pointer;
    white-space: nowrap;
}

.kb-footer-help-btn:hover { background: #0284c7; }

@media (max-width: 640px) {
    .kb-footer-inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .kb-footer-help { align-items: center; }
}

/* JMC - 05/01/2026 - Article + TOC layout. The TOC is hidden on narrow viewports
   so the article body uses the full main column. At 1100px+ the TOC sits as a
   sticky right rail next to .kb-article-main. */
.kb-article-with-toc {
    display: block;
}

.kb-toc-slot { display: none; }

@media (min-width: 1100px) {
    .kb-article-with-toc {
        display: flex;
        gap: 36px;
        /* No align-items here — flex items default to stretch, which gives the
           TOC slot the full height of the article body so position: sticky on
           .kb-toc has room to stay pinned as the user scrolls. */
    }
    .kb-article-main { flex: 1; min-width: 0; }
    .kb-toc-slot {
        display: block;
        flex: 0 0 220px;
    }
}

.kb-toc {
    position: sticky;
    top: 84px;
    padding-left: 16px;
    border-left: 2px solid var(--kb-border);
    max-height: calc(100vh - 100px);
    overflow-y: auto;
}

.kb-toc-heading {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--kb-text-faint);
    margin-bottom: 12px;
}

.kb-toc ul { list-style: none; padding: 0; margin: 0; }

.kb-toc li { margin: 0; }

.kb-toc a {
    display: block;
    padding: 5px 10px;
    margin-left: -12px;
    border-left: 2px solid transparent;
    font-size: 0.83rem;
    line-height: 1.4;
    color: var(--kb-text-muted);
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.kb-toc a:hover {
    color: var(--kb-text);
    background: var(--kb-bg-search);
}

.kb-toc a.active {
    color: var(--kb-nav-active);
    border-left-color: var(--kb-nav-active);
    font-weight: 600;
}

/* JMC - 05/18/2026 - Section heading appearance, shared by: the published body
   (also covers the brief pre-JS paint and the welcome page, which has no TOC JS),
   the Froala editor surface, and the JS-generated `.kb-section`. Real <h3>
   elements now come from the Froala "Section Heading" format as well as the
   legacy `<p><b|strong>` pattern the TOC builder converts. scroll-margin-top
   accounts for the sticky header so anchored deep-links don't land under it. */
.kb-section,
.kb-article-body h3,
.froala-editor-container .fr-element h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--kb-text);
    margin: 28px 0 10px;
    line-height: 1.4;
    scroll-margin-top: 80px;
}

/* JMC - 05/18/2026 - The JS-generated heading additionally hosts the hover
anchor-copy icon, laid out inline with the heading text. */
.kb-section {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
}

.kb-anchor-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 4px;
    color: var(--kb-text-faint);
    opacity: 0;
    cursor: pointer;
    transition: opacity 0.15s, color 0.15s, background 0.15s;
}

.kb-section:hover .kb-anchor-icon,
.kb-anchor-icon:focus { opacity: 1; }

.kb-anchor-icon:hover {
    color: var(--kb-nav-active);
    background: var(--kb-bg-search);
}

/* Print button — sits next to the Edit button in .kb-page-title-row.
   Uses the same shape as .kb-article-edit-btn but is visible to all users. */
.kb-print-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    height: 32px;
    padding: 0 12px;
    background: transparent;
    border: 1px solid var(--kb-border);
    border-radius: 6px;
    font-size: 0.8rem;
    color: var(--kb-text-muted);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}

.kb-print-btn:hover {
    background: var(--kb-bg-search);
    color: var(--kb-text);
}

/* JMC - 05/01/2026 - Article body — extend existing dark-mode coverage to
   code blocks, blockquotes, tables, and horizontal rules. Most prose colour
   is already handled by the older `.kb-article-body p, li, span...` rule,
   but Froala's bundled styles for these specific elements escape that and
   render with bright defaults that look wrong in dark mode. */
.kb-article-body code,
.kb-article-body kbd,
.kb-article-body samp {
    background: var(--kb-code-bg);
    color: var(--kb-code-text);
    padding: 1px 6px;
    border-radius: 4px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.88em;
}

.kb-article-body pre {
    background: var(--kb-code-bg);
    color: var(--kb-code-text);
    padding: 12px 14px;
    border-radius: 6px;
    overflow-x: auto;
    margin: 14px 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.85rem;
    line-height: 1.55;
}

.kb-article-body pre code {
    background: transparent;
    padding: 0;
}

.kb-article-body blockquote {
    margin: 16px 0;
    padding: 8px 16px;
    border-left: 3px solid var(--kb-quote-border);
    color: var(--kb-text-muted);
    background: var(--kb-bg-search);
    border-radius: 0 6px 6px 0;
}

.kb-article-body table {
    border-collapse: collapse;
    margin: 16px 0;
    width: 100%;
    font-size: 0.9rem;
}

.kb-article-body th,
.kb-article-body td {
    border: 1px solid var(--kb-table-border);
    padding: 8px 12px;
    color: var(--kb-text);
}

.kb-article-body th {
    background: var(--kb-bg-search);
    font-weight: 600;
    text-align: left;
}

.kb-article-body tr:nth-child(even) td {
    background: var(--kb-table-stripe);
}

.kb-article-body hr {
    border: 0;
    border-top: 1px solid var(--kb-border);
    margin: 24px 0;
}

/* ── Article Feedback Dashboard (sysadmin admin tool) ─────────────────────
   JMC - 05/01/2026 - Cross-article view of all helpful-vote activity. One
   row per article that has received feedback; click to expand inline
   comment list. Sortable column headers. */
.kb-fbdash-intro {
    color: var(--kb-text-muted);
    font-size: 0.86rem;
    margin-bottom: 14px;
}

.kb-fbdash-loading,
.kb-fbdash-empty {
    color: var(--kb-text-muted);
    font-size: 0.9rem;
    padding: 16px 0;
    text-align: center;
}

.kb-fbdash-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.kb-fbdash-th {
    padding: 8px 10px;
    text-align: left;
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--kb-text-faint);
    background: var(--kb-bg-sidebar);
    border-bottom: 1px solid var(--kb-border);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: background 0.1s, color 0.1s;
}

.kb-fbdash-th[data-sort]:hover { color: var(--kb-text); background: var(--kb-bg-search); }
.kb-fbdash-th-right { text-align: right; }
.kb-fbdash-th-static { cursor: default; }
.kb-fbdash-th-static:hover { background: var(--kb-bg-sidebar); color: var(--kb-text-faint); }

.kb-fbdash-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--kb-nav-active);
    white-space: nowrap;
}

.kb-fbdash-row:hover .kb-fbdash-toggle { text-decoration: underline; }

.kb-fbdash-chev {
    font-size: 0.75rem;
    transition: transform 0.15s;
}

.kb-fbdash-row-open { background: var(--kb-bg-search); }
.kb-fbdash-row-open .kb-fbdash-toggle { color: var(--kb-text); }

.kb-fbdash-row {
    cursor: pointer;
    transition: background 0.1s;
}

.kb-fbdash-row:hover { background: var(--kb-bg-search); }

.kb-fbdash-row td {
    padding: 10px;
    border-bottom: 1px solid var(--kb-border);
    color: var(--kb-text);
    vertical-align: top;
}

.kb-fbdash-td-left  { text-align: left; }
.kb-fbdash-td-right { text-align: right; font-variant-numeric: tabular-nums; }

.kb-fbdash-up   { color: #16a34a; font-weight: 600; }
.kb-fbdash-down { color: #dc2626; font-weight: 600; }
.dark .kb-fbdash-up   { color: #4ade80; }
.dark .kb-fbdash-down { color: #f87171; }

.kb-fbdash-article-link {
    color: var(--kb-nav-active);
    font-weight: 600;
    text-decoration: none;
}
.kb-fbdash-article-link:hover { text-decoration: underline; }

.kb-fbdash-cat {
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--kb-text-faint);
    margin-top: 2px;
}

.kb-fbdash-inactive-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    background: var(--kb-bg-search);
    border: 1px solid var(--kb-border);
    border-radius: 3px;
    font-size: 0.7rem;
    color: var(--kb-text-faint);
    vertical-align: middle;
}

.kb-fbdash-detail-row td {
    background: var(--kb-bg-sidebar);
    border-bottom: 1px solid var(--kb-border);
    padding: 12px 14px;
}

.kb-fbdash-detail-loading,
.kb-fbdash-no-comments {
    color: var(--kb-text-muted);
    font-size: 0.86rem;
    font-style: italic;
}

.kb-fbdash-comment-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.kb-fbdash-comment-list li {
    padding: 10px 12px;
    margin-bottom: 8px;
    background: var(--kb-bg);
    border: 1px solid var(--kb-border);
    border-radius: 6px;
}

.kb-fbdash-comment-list li:last-child { margin-bottom: 0; }

.kb-fbdash-comment-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 0.78rem;
    color: var(--kb-text-faint);
    margin-bottom: 4px;
}

.kb-fbdash-comment-icon { font-size: 1rem; }

.kb-fbdash-comment-who {
    color: var(--kb-text);
    font-weight: 600;
}

.kb-fbdash-comment-email {
    color: var(--kb-nav-active);
    text-decoration: none;
}

.kb-fbdash-comment-email:hover { text-decoration: underline; }

.kb-fbdash-comment-sep { color: var(--kb-text-faint); }

.kb-fbdash-comment-text {
    color: var(--kb-text);
    font-size: 0.9rem;
    white-space: pre-wrap;
}

.kb-fbdash-status {
    color: var(--kb-text-muted);
    font-size: 0.82rem;
    flex: 1;
}

/* ── Drag-to-reorder articles (edit mode + sysadmin) ───────────────────────
   JMC - 05/01/2026 - SortableJS turns each `.kb-nav-links` into a drop zone
   when `body.kb-edit-mode` is on. Cursor + ghost styles below; the underlying
   instance is enabled/disabled by kb.js in lockstep with the edit-mode class. */
.kb-edit-mode .kb-nav-link-wrap {
    cursor: grab;
}

.kb-edit-mode .kb-nav-link-wrap:active {
    cursor: grabbing;
}

.kb-sortable-ghost {
    opacity: 0.4;
    background: var(--kb-bg-search);
    border-radius: 4px;
}

.kb-sortable-chosen {
    background: var(--kb-bg-search);
    border-radius: 4px;
}

.kb-sortable-drag {
    opacity: 0.95;
    box-shadow: 0 6px 20px var(--kb-shadow);
    background: var(--kb-bg);
    border-radius: 4px;
}

/* ── Related articles block (reader view) ──────────────────────────────────
   JMC - 05/01/2026 - Renders below the article body when KbArticleRelations
   has at least one row. Card-grid layout, two columns at >= 720px. */
.kb-related {
    margin-top: 36px;
    padding-top: 20px;
    border-top: 1px solid var(--kb-border);
}

.kb-related-heading {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--kb-text-faint);
    margin-bottom: 12px;
}

.kb-related-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

@media (min-width: 720px) {
    .kb-related-list { grid-template-columns: 1fr 1fr; }
}

.kb-related-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border: 1px solid var(--kb-border);
    border-radius: 8px;
    background: var(--kb-bg);
    color: var(--kb-text);
    text-decoration: none;
    transition: border-color 0.15s, background 0.15s;
}

.kb-related-card:hover {
    border-color: var(--kb-nav-active);
    background: var(--kb-bg-sidebar);
    text-decoration: none;
}

.kb-related-cat {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--kb-text-faint);
}

.kb-related-title {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--kb-text);
    line-height: 1.35;
}

/* Related-articles editor (article modal) — typeahead + chips list */
.kb-relations-editor {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.kb-relations-chips {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 32px;
}

.kb-relations-empty {
    font-size: 0.83rem;
    color: var(--kb-text-faint);
    font-style: italic;
}

.kb-relations-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 12px;
    background: var(--kb-bg-search);
    border: 1px solid var(--kb-border);
    border-radius: 999px;
    font-size: 0.82rem;
    color: var(--kb-text);
}

.kb-relations-chip-label { font-weight: 500; }

.kb-relations-chip-remove {
    width: 18px;
    height: 18px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 50%;
    color: var(--kb-text-faint);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
}

.kb-relations-chip-remove:hover {
    color: #fff;
    background: #dc2626;
}

.kb-relations-typeahead { position: relative; }

.kb-relations-input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--kb-border);
    border-radius: 6px;
    background: var(--kb-bg);
    color: var(--kb-text);
    font-family: inherit;
    font-size: 0.88rem;
}

.kb-relations-input:focus {
    outline: none;
    border-color: var(--kb-nav-active);
}

.kb-relations-suggestions {
    list-style: none;
    margin: 4px 0 0;
    padding: 4px 0;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 10;
    max-height: 240px;
    overflow-y: auto;
    background: var(--kb-bg);
    border: 1px solid var(--kb-border);
    border-radius: 6px;
    box-shadow: 0 6px 18px var(--kb-shadow);
}

.kb-relations-suggestion {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 12px;
    cursor: pointer;
    transition: background 0.1s;
}

.kb-relations-suggestion:hover { background: var(--kb-bg-search); }

.kb-relations-suggestion-title {
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--kb-text);
}

.kb-relations-suggestion-cat {
    font-size: 0.74rem;
    color: var(--kb-text-faint);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.kb-relations-no-match {
    padding: 10px 12px;
    color: var(--kb-text-faint);
    font-size: 0.85rem;
    font-style: italic;
}

/* ── "Was this helpful?" vote block ────────────────────────────────────────
   JMC - 05/01/2026 - Sits below .kb-article-meta. Visible to every reader.
   Three states (mutually exclusive): prompt row, prompt + comment row,
   thanks confirmation. */
.kb-vote-block {
    margin-top: 12px;
    padding: 14px 16px;
    border: 1px solid var(--kb-border);
    border-radius: 8px;
    background: var(--kb-bg-sidebar);
    font-size: 0.88rem;
}

.kb-vote-prompt-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.kb-vote-prompt {
    font-weight: 600;
    color: var(--kb-text);
    margin-right: 6px;
}

.kb-vote-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 12px;
    background: var(--kb-bg);
    border: 1px solid var(--kb-border);
    border-radius: 6px;
    color: var(--kb-text-muted);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.kb-vote-btn:hover {
    color: var(--kb-text);
    border-color: var(--kb-text-faint);
}

.kb-vote-btn.active {
    color: var(--kb-nav-active);
    border-color: var(--kb-nav-active);
    background: var(--kb-bg);
}

.kb-vote-comment-row {
    margin-top: 10px;
}

.kb-vote-comment-input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--kb-border);
    border-radius: 6px;
    background: var(--kb-bg);
    color: var(--kb-text);
    font-family: inherit;
    font-size: 0.88rem;
    resize: vertical;
}

.kb-vote-comment-input:focus {
    outline: none;
    border-color: var(--kb-nav-active);
}

.kb-vote-comment-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.kb-vote-spacer { flex: 1; }

.kb-vote-delete {
    background: transparent;
    border: 1px solid var(--kb-border);
    color: #b91c1c;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.kb-vote-delete:hover {
    background: #b91c1c;
    color: #fff;
    border-color: #b91c1c;
}

.dark .kb-vote-delete         { color: #f87171; }
.dark .kb-vote-delete:hover   { background: #dc2626; color: #fff; border-color: #dc2626; }

.kb-vote-thanks {
    display: flex;
    align-items: center;
    gap: 12px;
}

.kb-vote-thanks-text {
    font-weight: 500;
    color: var(--kb-text);
}

.kb-vote-edit-btn {
    background: transparent;
    border: 0;
    padding: 0;
    color: var(--kb-nav-active);
    font-size: 0.85rem;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.kb-vote-edit-btn:hover { text-decoration: none; }

/* Sysadmin summary badge — clickable, opens modal with comments. Lives inside
   .kb-article-meta and is gated by .kb-edit-control / .kb-edit-mode. */
.kb-vote-summary-btn {
    display: none;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 8px;
    background: transparent;
    border: 1px dashed var(--kb-border);
    border-radius: 4px;
    color: var(--kb-text-muted);
    font-size: 0.78rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.kb-edit-mode .kb-vote-summary-btn { display: inline-flex; }

.kb-vote-summary-btn:hover {
    color: var(--kb-text);
    border-color: var(--kb-text-faint);
    border-style: solid;
}

.kb-vote-summary-counts {
    font-variant-numeric: tabular-nums;
}

/* Vote summary modal — counts grid + scrollable comment list */
.kb-vote-summary-counts-block {
    display: flex;
    gap: 24px;
    padding: 12px 0;
    border-bottom: 1px solid var(--kb-border);
    margin-bottom: 16px;
}

.kb-vote-summary-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.kb-vote-summary-num {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--kb-text);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.kb-vote-summary-stat-up   .kb-vote-summary-num { color: #16a34a; }
.kb-vote-summary-stat-down .kb-vote-summary-num { color: #dc2626; }
.dark .kb-vote-summary-stat-up   .kb-vote-summary-num { color: #4ade80; }
.dark .kb-vote-summary-stat-down .kb-vote-summary-num { color: #f87171; }

.kb-vote-summary-lbl {
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--kb-text-faint);
    font-weight: 600;
}

.kb-vote-summary-loading,
.kb-vote-summary-empty {
    color: var(--kb-text-muted);
    font-size: 0.88rem;
    padding: 12px 0;
}

.kb-vote-summary-heading {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--kb-text-faint);
    font-weight: 700;
    margin-bottom: 10px;
}

.kb-vote-summary-comment-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 340px;
    overflow-y: auto;
}

.kb-vote-summary-comment-list li {
    padding: 10px 12px;
    margin-bottom: 8px;
    border: 1px solid var(--kb-border);
    border-radius: 6px;
    background: var(--kb-bg);
}

.kb-vote-comment-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 0.78rem;
    color: var(--kb-text-faint);
    margin-bottom: 4px;
}

.kb-vote-comment-icon { font-size: 1rem; }

.kb-vote-comment-who {
    color: var(--kb-text);
    font-weight: 600;
}

.kb-vote-comment-sep { color: var(--kb-text-faint); }

.kb-vote-comment-text {
    color: var(--kb-text);
    font-size: 0.9rem;
    white-space: pre-wrap;
}

/* ── Print stylesheet ─────────────────────────────────────────────────────
   JMC - 05/01/2026 - Hide chrome (header, sidebar, footer, search, modals,
   TOC, edit/print controls), force the article body to full width, and
   render link URLs inline so paper copies are still self-contained. */
@media print {
    #kb-header,
    #kb-mobile-toggle,
    #kb-mobile-sidebar,
    #kb-mobile-overlay,
    .kb-sidebar-wrap,
    .kb-toc-slot,
    .kb-anchor-icon,
    .kb-print-btn,
    .kb-edit-control,
    .kb-article-edit-btn,
    .kb-welcome-edit-btn,
    .kb-edit-mode-toggle,
    #kb-search-dialog,
    .kb-modal,
    #kb-toast-region,
    #kb-footer,
    #kb-vis-summary,
    .kb-inactive-badge,
    .kb-public-badge,
    .kb-vote-block,
    .kb-vote-summary-btn,
    .kb-relations-suggestions {
        display: none !important;
    }

    .kb-related {
        page-break-inside: avoid;
        break-inside: avoid;
        margin-top: 24px !important;
    }

    body {
        background: #fff !important;
        color: #000 !important;
    }

    .kb-layout {
        display: block !important;
        max-width: 100% !important;
        padding: 0 !important;
    }

    .kb-main { padding: 0 !important; }

    .kb-article-with-toc {
        display: block !important;
        gap: 0 !important;
    }

    .kb-article-main { width: 100% !important; }

    .kb-page-header {
        border-bottom: 1px solid #999 !important;
        padding-bottom: 8px !important;
        margin-bottom: 14px !important;
    }

    .kb-breadcrumb-trail { display: flex !important; }
    .kb-breadcrumb-mobile { display: none !important; }

    .kb-page-title { color: #000 !important; }

    .kb-article-body,
    .kb-article-body p,
    .kb-article-body li,
    .kb-article-body span,
    .kb-article-body div,
    .kb-article-body b,
    .kb-article-body strong,
    .kb-article-body em,
    .kb-article-body i {
        color: #000 !important;
    }

    /* JMC - 05/18/2026 - Include real <h3> headings (Froala "Section Heading"
    format) alongside the JS-generated .kb-section in print styling. */
    .kb-section,
    .kb-article-body h3 {
        color: #000 !important;
        page-break-after: avoid;
        break-after: avoid;
    }

    .kb-article-body a {
        color: #000 !important;
        text-decoration: underline !important;
    }

    /* Inline URL after non-anchor links so printed copies retain destinations */
    .kb-article-body a[href]:not([href^="#"])::after {
        content: " (" attr(href) ")";
        font-size: 0.85em;
        color: #555;
        word-break: break-all;
    }

    .kb-article-body img {
        max-width: 100% !important;
        page-break-inside: avoid;
    }

    .kb-article-body table {
        page-break-inside: avoid;
    }

    .kb-article-meta {
        color: #555 !important;
        border-top: 1px solid #999 !important;
        margin-top: 24px !important;
    }
}