/* ============================================
   Knowledge Base Styling System
   Penguin Support - Guinco Service
   ============================================ */

/* Typography Scale for .page-content and .article-content */
.page-content h2,
.article-content h2 {
    font-family: 'Oswald', sans-serif;
    font-size: 28px;
    font-weight: 600;
    color: #161616;
    margin: 30px 0 15px 0;
    line-height: 1.3;
}

.page-content h3,
.article-content h3 {
    font-family: 'Oswald', sans-serif;
    font-size: 22px;
    font-weight: 500;
    color: #1e1e1e;
    margin: 25px 0 12px 0;
    line-height: 1.3;
}

.page-content h4,
.article-content h4 {
    font-family: 'Oswald', sans-serif;
    font-size: 18px;
    font-weight: 500;
    color: #333;
    margin: 20px 0 10px 0;
    line-height: 1.4;
}

.page-content h5,
.article-content h5 {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #444;
    margin: 15px 0 8px 0;
    line-height: 1.4;
}

.page-content h6,
.article-content h6 {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 12px 0 6px 0;
}

.page-content p,
.article-content p {
    margin-bottom: 12px;
    line-height: 1.7;
    color: #1e1e1e;
    /* [2026-07-07 findability] was inherited ~15px; complaints skew toward
       tenured/older staff, and larger body text is the cheapest fix. */
    font-size: 16.5px;
}
.page-content li,
.article-content li {
    font-size: 16.5px;
}

/* ============================================
   KB Sections
   ============================================ */
.kb-section {
    margin-bottom: 40px;
}

.kb-section:last-child {
    margin-bottom: 0;
}

/* ============================================
   KB Cards
   ============================================ */
.kb-card {
    padding: 20px;
    margin-bottom: 20px;
    border-left: 4px solid #fcb040;
    background: #fafafa;
    border-radius: 4px;
}

/* [2026-07-10 fix] Inside an article, a .kb-card is a plain content box — it
   must NOT inherit the index/tree GRID-card sizing from kb_tree_nav.css's
   colliding `.kb-card` (display:flex; flex-direction:column; min-height:130px),
   which forced content cards (e.g. "TRC Login") to a fixed 130px with a dead
   gap below short content. Fit the content, stack normally. The two-class
   selector outranks the bare `.kb-card`. (Root cause of the same collision that
   broke the vendor-card <details> collapse — see details.kb-vendor-card.) */
.article-content .kb-card {
    display: block;
    min-height: 0;
}

/* [2026-07-10] Inline card: title on the left, a single link/action pushed to
   the right, all on one line. Opt in per card with
   `class="kb-card kb-card--inline"` (e.g. the TRC Login card). Wraps to two
   lines gracefully on narrow screens. */
.article-content .kb-card.kb-card--inline {
    display: flex;
    /* Override kb_tree_nav.css's colliding `.kb-card { flex-direction: column }`
       which otherwise stacks the title over the link. [2026-07-10] */
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px 16px;
}
.kb-card--inline > h4 { margin: 0; }
.kb-card--inline > p { margin: 0; }

.kb-card:last-child {
    margin-bottom: 0;
}

.kb-card h3,
.kb-card h4,
.kb-card h5 {
    margin-top: 0;
}

.kb-card p:last-child {
    margin-bottom: 0;
}

.kb-card + .kb-card {
    margin-top: 20px;
}

/* ============================================
   Callout Boxes
   ============================================ */
.kb-callout-important,
.kb-callout-warning,
.kb-callout-info,
.kb-callout-tip {
    padding: 16px 20px;
    margin: 16px 0;
    border-radius: 4px;
    border-left: 4px solid;
}

.kb-callout-important {
    background: #fff8e1;
    border-color: #fcb040;
}

.kb-callout-warning {
    background: #fde8e8;
    border-color: #e53935;
}

.kb-callout-info {
    background: #e3f2fd;
    border-color: #1a73e8;
}

.kb-callout-tip {
    background: #e8f5e9;
    border-color: #43a047;
}

.kb-callout-important p:last-child,
.kb-callout-warning p:last-child,
.kb-callout-info p:last-child,
.kb-callout-tip p:last-child {
    margin-bottom: 0;
}

/* ============================================
   Process Steps
   ============================================ */
.kb-steps {
    counter-reset: step-counter;
    padding: 0;
    margin: 20px 0;
    list-style: none;
}

.kb-step {
    counter-increment: step-counter;
    position: relative;
    padding-left: 50px;
    margin-bottom: 20px;
    min-height: 36px;
}

.kb-step::before {
    content: counter(step-counter);
    position: absolute;
    left: 0;
    top: 0;
    width: 32px;
    height: 32px;
    background: #fcb040;
    color: #1e1e1e;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    font-size: 14px;
}

.kb-step p:first-child {
    margin-top: 4px;
}

/* ============================================
   Link Grid
   ============================================ */
.kb-link-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin: 20px 0;
}

.kb-link-item {
    padding: 15px;
    background: #f5f5f5;
    border: 1px solid #eee;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.kb-link-item:hover {
    border-color: #fcb040;
    background: #fffbf0;
}

.kb-link-item a {
    color: #1a73e8;
    text-decoration: none;
    font-weight: 500;
}

.kb-link-item a:hover {
    color: #fcb040;
}

.kb-link-item p {
    margin: 6px 0 0 0;
    font-size: 14px;
    color: #666;
}

/* ============================================
   Enhanced Lists inside KB Cards
   ============================================ */
.kb-card ul,
.kb-card ol {
    margin: 15px 0;
    padding-left: 25px;
    line-height: 1.8;
}

.kb-card li {
    margin-bottom: 10px;
}

.kb-card ol {
    list-style: decimal;
}

.page-content > ul,
.page-content > ol,
.article-content > ul,
.article-content > ol {
    margin: 15px 0;
    padding-left: 25px;
    line-height: 1.8;
}

.page-content > ul li,
.page-content > ol li,
.article-content > ul li,
.article-content > ol li {
    margin-bottom: 8px;
}

/* ============================================
   Tables inside KB content
   ============================================ */
.page-content table,
.article-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}

.page-content table th,
.page-content table td,
.article-content table th,
.article-content table td {
    padding: 10px 14px;
    border: 1px solid #ddd;
    text-align: left;
}

.page-content table th,
.article-content table th {
    background: #fcb040;
    color: #1e1e1e;
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
}

.page-content table tr:nth-child(even),
.article-content table tr:nth-child(even) {
    background: #fafafa;
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 768px) {
    .kb-section {
        margin-bottom: 30px;
    }

    .kb-card {
        padding: 15px;
        margin-bottom: 15px;
    }

    .kb-link-grid {
        grid-template-columns: 1fr;
    }

    .kb-step {
        padding-left: 42px;
    }

    .kb-step::before {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }

    .page-content h2 {
        font-size: 24px;
    }

    .page-content h3,
.article-content h3 {
        font-size: 20px;
    }

    .page-content h4,
.article-content h4 {
        font-size: 17px;
    }
}

/* ============================================
   Article Page Layout (knowledge/article.html)
   ============================================ */
.article-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 48px;
    align-items: start;
}

.article-main {
    min-width: 0;
    max-width: 780px;
    background: #fff;
}

.article-hero {
    padding: 32px 0 24px;
    border-bottom: 1px solid #eee;
    margin-bottom: 32px;
}

.article-hero h1 {
    font-family: 'Oswald', sans-serif;
    font-size: 36px;
    font-weight: 600;
    color: #161616;
    margin: 0 0 12px;
    line-height: 1.2;
}

.article-hero .article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    font-size: 13px;
    color: #666;
    align-items: center;
}

.article-hero .category-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: #fff8e1;
    color: #b8770e;
    border-radius: 999px;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    text-decoration: none;
}

.article-hero .category-pill:hover {
    background: #fcb040;
    color: #1e1e1e;
}

.article-hero .meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.article-hero .meta-item i {
    color: #999;
}

.article-content {
    font-size: 16px;
    line-height: 1.75;
    color: #1e1e1e;
}

.article-content h2:first-child,
.article-content h3:first-child {
    margin-top: 0;
}

.article-content hr {
    border: 0;
    border-top: 1px solid #eee;
    margin: 32px 0;
}

.article-content ul,
.article-content ol {
    padding-left: 24px;
    margin: 12px 0 20px;
}

.article-content li {
    margin-bottom: 8px;
}

.article-content blockquote {
    border-left: 4px solid #fcb040;
    margin: 20px 0;
    padding: 4px 0 4px 20px;
    color: #444;
    font-style: italic;
}

.article-content a {
    color: #1a73e8;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color .2s ease;
}

.article-content a:hover {
    border-bottom-color: #1a73e8;
}

/* PDF download chips — auto-upgrade any <a href$=".pdf"> link */
.article-content a[href$=".pdf"],
.article-content a[href$=".PDF"] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    margin: 4px 6px 4px 0;
    background: #fff8e1;
    color: #b8770e;
    border: 1px solid #f0c066;
    border-bottom: 1px solid #f0c066;
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none;
    transition: all .2s ease;
}

.article-content a[href$=".pdf"]:hover,
.article-content a[href$=".PDF"]:hover {
    background: #fcb040;
    color: #1e1e1e;
    border-color: #fcb040;
}

.article-content a[href$=".pdf"]::before,
.article-content a[href$=".PDF"]::before {
    content: "\f1c1";  /* fa-file-pdf */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 15px;
}

.article-content a[href$=".pdf"]::after,
.article-content a[href$=".PDF"]::after {
    content: "\f019";  /* fa-download */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 12px;
    opacity: 0.6;
}

/* Links inside list items should not get the chip treatment when they sit
   inside a bullet row — but we DO want the chip for standalone links.
   Subtle heuristic: when a PDF link is the only child of an <li>, it still
   looks fine as a chip because the bullet aligns well. Leave default. */

/* ============================================
   Table of Contents (article sidebar)
   ============================================ */
.article-sidebar {
    /* [2026-06-30] Single sticky SCROLL panel. Previously this was sticky AND
       the BROWSE tree inside it (.kb-tree-nav) was *also* position:sticky — two
       nested sticky contexts, so the BROWSE box detached and floated over the
       widgets below it ("On this page" TOC, Ask, POC) as you scrolled. Making
       only the sidebar sticky, with its own max-height + scroll, keeps every
       widget reachable and stops the overlap. (POC popover is portaled to
       <body>, so the overflow here won't clip it.) */
    position: sticky;
    top: 20px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.toc-widget {
    background: #fafafa;
    border-left: 4px solid #fcb040;
    padding: 18px 20px;
    border-radius: 4px;
}

.toc-widget h4 {
    font-family: 'Oswald', sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #666;
    margin: 0 0 12px;
}

.toc-widget ol {
    list-style: none;
    padding: 0;
    margin: 0;
}

.toc-widget ol li {
    margin: 0 0 8px;
    font-size: 14px;
    line-height: 1.4;
}

.toc-widget ol li.toc-level-3 {
    padding-left: 14px;
    font-size: 13px;
}

.toc-widget ol li a {
    color: #333;
    text-decoration: none;
    border-left: 2px solid transparent;
    padding-left: 10px;
    display: block;
    transition: all .15s ease;
}

.toc-widget ol li a:hover,
.toc-widget ol li a.active {
    color: #b8770e;
    border-left-color: #fcb040;
}

.toc-widget .toc-empty {
    color: #999;
    font-size: 13px;
    font-style: italic;
}

/* ============================================
   Helpful Vote Widget
   ============================================ */
.helpful-widget {
    margin-top: 48px;
    padding: 24px;
    background: #fafafa;
    border: 1px solid #eee;
    border-radius: 6px;
    text-align: center;
}

.helpful-widget h4 {
    font-family: 'Oswald', sans-serif;
    font-size: 18px;
    color: #1e1e1e;
    margin: 0 0 14px;
}

.helpful-buttons {
    display: inline-flex;
    gap: 12px;
    justify-content: center;
}

.helpful-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    background: #fff;
    color: #1e1e1e;
    border: 2px solid #ddd;
    border-radius: 999px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all .2s ease;
}

.helpful-btn:hover {
    border-color: #fcb040;
    background: #fff8e1;
}

.helpful-btn[data-active="true"] {
    background: #fcb040;
    border-color: #fcb040;
    color: #1e1e1e;
}

.helpful-btn[data-active="true"][data-vote="down"] {
    background: #fde8e8;
    border-color: #e53935;
    color: #c62828;
}

.helpful-message {
    margin-top: 12px;
    font-size: 14px;
    color: #43a047;
    min-height: 20px;
}

/* ============================================
   Sidebar Widgets (article page)
   ============================================ */
.article-sidebar .sidebar-widget {
    background: #fff;
    border: 1px solid #eee;
    padding: 18px;
    border-radius: 6px;
}

.article-sidebar .sidebar-widget h4 {
    font-family: 'Oswald', sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #666;
    margin: 0 0 12px;
}

.article-sidebar .sidebar-widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.article-sidebar .sidebar-widget ul li {
    margin-bottom: 10px;
    line-height: 1.4;
    font-size: 14px;
}

.article-sidebar .sidebar-widget ul li a {
    color: #1a73e8;
    text-decoration: none;
}

.article-sidebar .sidebar-widget ul li a:hover {
    color: #b8770e;
}

.article-sidebar .sidebar-widget .ask-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.article-sidebar .sidebar-widget .ask-form input[type="search"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}

.article-sidebar .sidebar-widget .ask-form button {
    width: 100%;
    padding: 10px;
    background: #fcb040;
    color: #1e1e1e;
    border: 0;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
}

/* ============================================
   Article-page responsive
   ============================================ */
@media (max-width: 960px) {
    .article-layout {
        grid-template-columns: 1fr;
    }
    .article-sidebar {
        position: static;
        /* Reset the desktop sticky-scroll cap so the sidebar flows full-height
           below the article on narrow screens. */
        max-height: none;
        overflow: visible;
    }
    .article-main {
        max-width: none;
    }
}

@media (max-width: 768px) {
    .article-hero h1 {
        font-size: 28px;
    }
}

/* ============================================
   [ADDED 2026-06-15] Article readability polish
   --------------------------------------------
   The base typography was already solid (16px / 1.75, 780px measure, Oswald
   headings). These additions make EVERY article scan more like the well-
   structured vehicle article: clearer section breaks, a lead paragraph, real
   note/callout cards, and stronger emphasis on bold action items. Articles
   authored as flat text still read better, but the biggest wins come from
   structuring the content itself (headings, bold, lists).
   ============================================ */

/* Top-level sections get a hairline + extra air so the page chunks into
   scannable blocks (the vehicle article's defining quality). */
.article-content h2 {
    margin-top: 40px;
    padding-bottom: 6px;
    border-bottom: 1px solid #ececec;
}

/* h3/h4 get a touch more space above so subsections breathe. */
.article-content h3 { margin-top: 30px; }
.article-content h4 { margin-top: 22px; }

/* Lead paragraph — the first paragraph reads as an intro. */
.article-content > p:first-of-type {
    font-size: 17px;
    line-height: 1.7;
    color: #2b2b2b;
}

/* Bold action items pop a little harder (the vehicle page leans on these). */
.article-content strong,
.article-content b {
    font-weight: 600;
    color: #161616;
}

/* Note / callout cards. Works on a plain <blockquote> AND on author-added
   .note / .callout / .tip wrappers, so structured articles get a clean,
   consistent highlight box instead of an italic ledge. */
.article-content blockquote,
.article-content .note,
.article-content .callout,
.article-content .tip {
    background: #fffaf0;
    border-left: 4px solid #fcb040;
    border-radius: 0 8px 8px 0;
    margin: 22px 0;
    padding: 14px 18px;
    color: #3a3a3a;
    font-style: normal;
}
.article-content blockquote p:last-child,
.article-content .note p:last-child,
.article-content .callout p:last-child,
.article-content .tip p:last-child {
    margin-bottom: 0;
}

/* Tighter, even rhythm between stacked list items + paragraphs. */
.article-content li > p { margin-bottom: 6px; }

/* ============================================
   [ADDED 2026-06-15] Mobile/tablet "On this page" contents menu
   --------------------------------------------
   The sticky sidebar TOC stacks BELOW the whole article ≤960px, so it can't
   help navigate a long article while reading. This collapsible <details> sits
   at the TOP of the article on narrow screens (hidden on desktop, where the
   sidebar TOC shows). Populated by kb-article.js; stays `hidden` until it has
   items. Smooth-scroll + header offset make the jumps land cleanly.
   ============================================ */
.toc-mobile { display: none; }

@media (max-width: 960px) {
    .toc-mobile {
        display: block;
        background: #fafafa;
        border-left: 4px solid #fcb040;
        border-radius: 4px;
        margin: 0 0 28px;
        overflow: hidden;
    }
    .toc-mobile > summary {
        list-style: none;
        cursor: pointer;
        padding: 14px 18px;
        font-family: 'Oswald', sans-serif;
        font-size: 14px;
        text-transform: uppercase;
        letter-spacing: 0.8px;
        color: #555;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .toc-mobile > summary::-webkit-details-marker { display: none; }
    /* Plain Unicode caret (no Font-Awesome dependency, can't render empty). */
    .toc-mobile > summary::after {
        content: '\25BE';
        margin-left: auto;
        color: #999;
        transition: transform .2s ease;
    }
    .toc-mobile[open] > summary::after { transform: rotate(180deg); }
    .toc-mobile ol {
        list-style: none;
        margin: 0;
        padding: 0 18px 14px;
    }
    .toc-mobile ol li { margin: 0 0 8px; font-size: 14px; line-height: 1.4; }
    .toc-mobile ol li.toc-level-3 { padding-left: 14px; font-size: 13px; }
    .toc-mobile ol li a {
        color: #333;
        text-decoration: none;
        display: block;
        border-left: 2px solid transparent;
        padding-left: 10px;
    }
    .toc-mobile ol li a:hover,
    .toc-mobile ol li a.active {
        color: #b8770e;
        border-left-color: #fcb040;
    }
    /* The sidebar's own TOC widget is redundant on mobile (sidebar stacks at
       the very bottom) — the top menu replaces it. */
    .article-sidebar .toc-widget { display: none; }
}

/* Anchored jumps clear the fixed site header; animate unless reduced-motion. */
.article-content h2,
.article-content h3 { scroll-margin-top: 90px; }
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

/* ============================================
   [ADDED 2026-06-15] The Repair Club (TRC) contact callout
   Prominent, scannable call line auto-shown on TRC articles. Navy card with a
   gold phone badge so it stands out at the top of the article on any device.
   ============================================ */
.trc-contact {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--nx-navy-2, #0a2c45);
    color: #fff;
    border-radius: 10px;
    padding: 14px 18px;
    margin: 0 0 28px;
}
.trc-contact__icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--nx-gold, #fcb040);
    color: var(--nx-on-accent, #0a2c45);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
}
.trc-contact__body {
    display: flex;
    flex-direction: column;
    line-height: 1.35;
}
.trc-contact__label {
    font-family: 'Oswald', sans-serif;
    font-size: 14px; /* [2026-07-06] one navy-header label spec across KB cards */
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 600;
    color: #fff;
}
.trc-contact__line {
    font-size: 15px;
    color: #f3f6f9;
}
.trc-contact__line a {
    color: #fff;
    font-weight: 700;
    font-size: 18px;
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 2px solid rgba(252, 176, 64, 0.7);
}
.trc-contact__line a:hover {
    border-bottom-color: #fcb040;
}

/* ============================================
   Price Guide callout — [2026-06-17] render-time replacement for "how much to
   charge" rate blocks. One consistent container across every KB article; links
   to the live Price Guide + MyPartsHelp.com instead of hardcoded amounts.
   ============================================ */
.kb-price-guide {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: #f6f9fc;
    border: 1px solid #d7e2ec;
    /* [2026-07-06 design swarm] Nautilus tokens, not classic literals: the
       --nx-* vars only exist under [data-palette="house"], so every
       var(--nx-*, fallback) below renders brass/navy for house users and
       falls through pixel-identical for the classic palette. */
    border-left: 4px solid var(--nx-gold, #fcb040);
    border-radius: 10px;
    padding: 16px 18px;
    margin: 20px 0;
}
.kb-price-guide__icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--nx-navy-2, #0a2c45);
    color: var(--nx-gold-bright, #fcb040);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
}
.kb-price-guide__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    line-height: 1.4;
}
.kb-price-guide__label {
    font-family: 'Oswald', sans-serif;
    font-size: 14px; /* [2026-07-06] one label size across compact + live */
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--nx-navy-2, #0a2c45);
    font-weight: 600;
}
.kb-price-guide__text {
    font-size: 14px;
    color: #44566b;
}
.kb-price-guide__links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 2px;
}
/* Two-class descendant so these outrank the global article-link rule at
   :437 (same pattern documented on .kb-contact-directory__title). Covers
   both variants — the live card root also carries .kb-price-guide. */
.kb-price-guide .kb-price-guide__link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 44px; /* iPad touch target */
    background: var(--nx-navy, #0a2c45);
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    border-bottom: none;
    padding: 8px 14px;
    border-radius: 8px;
    transition: background 0.15s ease;
}
.kb-price-guide .kb-price-guide__link:hover {
    background: var(--nx-gold, #fcb040);
    color: var(--nx-on-accent, #0a2c45);
    border-bottom: none;
}
.kb-price-guide .kb-price-guide__link:focus-visible {
    outline: 2px solid #0a2c45;
    outline-offset: 2px;
}

/* ============================================
   Live Price Guide card — [2026-06-18] expanded from {{price-guide}}. Real
   per-call-type rates with one collapsible <details> per market (DFW / OKC/KS /
   AZ), all collapsed by default. Native <details> => no JS, CSP-safe.
   ============================================ */
.kb-price-guide--live {
    display: block;
    padding: 0;
    overflow: hidden;
    /* [2026-07-06 design swarm] the navy header already carries the brand
       accent — drop the base rule's gold stripe so the live card matches
       .kb-contact-directory (the stripe stays the compact-callout idiom).
       Bottom margin asymmetric like .trc-contact: header block, not inline
       callout. */
    border: 1px solid #e7e7ea;
    margin: 0 0 28px;
}
.kb-price-guide--live .kb-price-guide__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: #0a2c45;
}
.kb-price-guide--live .kb-price-guide__head .kb-price-guide__icon {
    background: var(--nx-gold, #fcb040);
    color: var(--nx-on-accent, #0a2c45);
}
.kb-price-guide--live .kb-price-guide__label {
    color: #fff;
    font-size: 14px;
}
/* [2026-07-07 Shane] Market selector tabs — pick your market once; the card
   opens that market and collapses the others. var(--nx-*) + classic
   fallbacks, legible in both palettes; 44px touch targets. */
.kb-pg-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 14px 0;
}
.kb-pg-tab {
    min-height: 40px;
    padding: 8px 16px;
    border: 1px solid var(--nx-gold, #d7c08a);
    border-radius: 999px;
    background: transparent;
    color: var(--nx-navy-2, #0a2c45);
    font-family: 'Oswald', sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 0.3px;
    cursor: pointer;
}
.kb-pg-tab:hover { background: var(--nx-paper, #fff8e1); }
.kb-pg-tab:focus-visible {
    outline: 2px solid var(--nx-navy-2, #0a2c45);
    outline-offset: 2px;
}
.kb-pg-tab.is-active {
    background: var(--nx-navy, #0a2c45);
    color: #fff;
    border-color: var(--nx-navy, #0a2c45);
}

.kb-pg-markets {
    display: block;
}
.kb-pg-market {
    border-top: 1px solid #d7e2ec;
}
.kb-pg-market > summary {
    list-style: none;
    cursor: pointer;
    padding: 12px 18px;
    min-height: 44px; /* iPad touch target */
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--nx-navy-2, #0a2c45);
    background: #f6f9fc;
    display: flex;
    align-items: center;
}
.kb-pg-market > summary:hover { background: #eef4f9; }
.kb-pg-market > summary:focus-visible {
    outline: 2px solid #0a2c45;
    outline-offset: -2px; /* inset — the card's overflow:hidden can't clip it */
}
.kb-pg-market > summary::-webkit-details-marker { display: none; }
.kb-pg-market > summary::after {
    content: '\25BE';
    content: '\25BE' / ''; /* alt-text form silences it for screen readers */
    margin-left: auto;
    color: var(--nx-navy-2, #0a2c45);
    transition: transform 0.2s ease;
}
.kb-pg-market[open] > summary { background: #eef4f9; }
.kb-pg-market[open] > summary::after { transform: rotate(180deg); }
.kb-pg-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
}
.kb-pg-table td,
.kb-pg-table th {
    padding: 8px 18px;
    font-size: 14px;
    border-top: 1px solid #eef2f6;
    vertical-align: top;
}
.kb-pg-table th.kb-pg-ct { font-weight: 400; text-align: left; }
.kb-pg-ct { color: #2b3a4a; }
.kb-pg-amt {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--nx-navy-2, #0a2c45);
}
/* [2026-06-19] Tax line at the bottom of each market's list. */
.kb-pg-tax {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    padding: 9px 18px;
    font-size: 12.5px;
    color: #5a6b7c;
    background: #fafcfe;
    border-top: 1px solid #eef2f6;
}
.kb-pg-tax strong { color: var(--nx-navy-2, #0a2c45); font-weight: 700; }
.kb-price-guide--live .kb-price-guide__note {
    margin: 0;
    padding: 10px 18px;
    font-size: 13px;
    /* [2026-07-06 Shane] program notes carry autho limits — bold, on the
       stylesheet's warm note surface so it reads as a callout, not another
       summary row. */
    font-weight: 700;
    color: var(--nx-navy-2, #0a2c45);
    background: #fffaf0;
    border-top: 1px solid #d7e2ec;
}
.kb-price-guide--live .kb-price-guide__links {
    margin: 0;
    padding: 14px 18px;
    border-top: 1px solid #d7e2ec;
}

/* ============================================
   Vendor directory — [2026-06-18] flat "second way to navigate" hub at
   /knowledge/vendors. Cards link straight to each vendor's article/category.
   ============================================ */
.vendor-directory__intro {
    color: #55636f;
    font-size: 15px;
    line-height: 1.5;
    margin: 0 0 28px;
}
.vendor-group { margin-bottom: 34px; }
.vendor-group__title {
    font-family: 'Oswald', sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #0a2c45;
    border-bottom: 2px solid #fcb040;
    padding-bottom: 8px;
    margin: 0 0 16px;
}
.vendor-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 12px;
}
.vendor-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid #e2e8ee;
    border-left: 4px solid #0a2c45;
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}
.vendor-card:hover {
    border-left-color: #fcb040;
    box-shadow: 0 3px 12px rgba(10, 44, 69, 0.1);
}
.vendor-card:active { transform: translateY(1px); }
.vendor-card__icon {
    flex: 0 0 auto;
    width: 38px; height: 38px;
    border-radius: 50%;
    background: #f1f6fa;
    color: #0a2c45;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}
.vendor-card__text { flex: 1; min-width: 0; line-height: 1.3; }
.vendor-card__name {
    display: block;
    font-weight: 600;
    color: #1e2a36;
}
.vendor-card__sub {
    display: block;
    font-size: 12px;
    color: #7a8794;
    margin-top: 1px;
}
.vendor-card__chev { color: #c2ccd6; font-size: 13px; }

/* "Browse all vendors" banner on the KB landing page.
   [2026-07-10] Compacted to a single slim bar (was a tall two-line banner) so
   it reads as a peer of the "Where did it go?" strip; the descriptive subline
   is hidden here — the title + CTA say enough, and the walkthrough still
   explains it. */
.kb-vendors-banner {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 11px 18px;
    margin: 0 0 26px;
    background: linear-gradient(100deg, #0a2c45, #14405f);
    border-radius: 10px;
    text-decoration: none;
    color: #fff;
}
.kb-vendors-banner:hover { box-shadow: 0 4px 16px rgba(10, 44, 69, 0.25); }
.kb-vendors-banner__icon {
    flex: 0 0 auto;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: #fcb040;
    color: #0a2c45;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px;
}
.kb-vendors-banner__text { flex: 1; }
.kb-vendors-banner__text strong { display: block; font-size: 14.5px; }
/* Subline hidden in the compact bar (kept in markup for the walkthrough/SEO). */
.kb-vendors-banner__text span { display: none; }
.kb-vendors-banner__cta {
    flex: 0 0 auto;
    font-weight: 600;
    font-size: 13px;
    background: rgba(255, 255, 255, 0.14);
    padding: 6px 12px;
    border-radius: 8px;
}

/* ============================================
   "Where did it go?" — old-site crosswalk
   (/knowledge/where-did-it-go) plus the KB
   index link pointing at it. [2026-07-07]
   ============================================ */
/* Compact companion link below the vendors banner. */
.kb-oldsite-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: -14px 0 26px;
    padding: 8px 14px;
    background: #f1f6fa;
    border: 1px solid #e2e8ee;
    border-radius: 8px;
    font-size: 13px;
    color: #0a2c45;
    text-decoration: none;
}
.kb-oldsite-link:hover {
    border-color: #fcb040;
    box-shadow: 0 2px 8px rgba(10, 44, 69, 0.12);
}
.kb-oldsite-link i { color: #fcb040; }
.kb-oldsite-link strong { font-weight: 600; }

.kb-crosswalk__intro {
    font-size: 15px;
    color: #4a5764;
    margin: 0 0 28px;
    max-width: 720px;
}
.kb-crosswalk__outro { font-size: 14px; color: #4a5764; margin-top: 30px; }
.kb-crosswalk-group { margin-bottom: 34px; }
.kb-crosswalk-group__title {
    font-size: 18px;
    color: #0a2c45;
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid #fcb040;
}
.kb-crosswalk-group__title i { color: #fcb040; margin-right: 8px; }
/* Wide tables scroll inside their own container — never the page body. */
.kb-crosswalk-scroll {
    overflow-x: auto;
    border: 1px solid #e2e8ee;
    border-radius: 10px;
    background: #fff;
}
.kb-crosswalk-table {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    font-size: 14px;
}
.kb-crosswalk-table th {
    text-align: left;
    background: #f1f6fa;
    color: #0a2c45;
    padding: 10px 14px;
    border-bottom: 2px solid #e2e8ee;
    white-space: nowrap;
}
.kb-crosswalk-table td {
    padding: 10px 14px;
    border-bottom: 1px solid #eef2f6;
    vertical-align: top;
}
.kb-crosswalk-table tr:last-child td { border-bottom: none; }
.kb-crosswalk-table__old { font-weight: 600; color: #1e2a36; }
.kb-crosswalk-table__path {
    display: block;
    font-weight: 400;
    font-size: 12px;
    color: #7a8794;
    margin-top: 1px;
}
.kb-crosswalk-table__new a { font-weight: 600; }
.kb-crosswalk-table__retired { color: #8a8a90; font-style: italic; }
.kb-crosswalk-table__note { color: #4a5764; }

/* ============================================
   Profile-tag rosters (live, render-time)
   {{tag:key}} inline + {{tag-card:key}} block.
   See app/services/tag_rosters.py
   ============================================ */
/* Inline: reads as part of the sentence — no box, just linked names. */
.kb-roster-inline { /* inline flow, inherits surrounding text styling */ }
.kb-roster-name {
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(252, 176, 64, 0.5);
}
.kb-roster-name:hover { border-bottom-color: #fcb040; }
.kb-roster-empty { color: #8a8a90; font-style: italic; }

/* Loud marker for an unknown tag key (author typo). */
.kb-roster-missing {
    display: inline-block;
    background: #fde8e8;
    color: #b42318;
    border: 1px solid #f3b4b4;
    border-radius: 4px;
    padding: 1px 7px;
    font-size: 0.92em;
    font-weight: 600;
}

/* Block roster card. --kb-roster-accent is set inline from ProfileTag.color. */
.kb-roster-card {
    --kb-roster-accent: #c2a25a;
    margin: 20px 0;
    padding: 16px 18px;
    border: 1px solid #e7e7ea;
    border-left: 4px solid var(--kb-roster-accent);
    border-radius: 6px;
    background: #fafafa;
}
.kb-roster-card:last-child { margin-bottom: 0; }
.kb-roster-card__head {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 8px;
}
.kb-roster-card__head i { color: var(--kb-roster-accent); }
.kb-roster-card__title {
    font-weight: 700;
    font-size: 16px;
}
.kb-roster-card__count {
    margin-left: auto;
    min-width: 22px;
    text-align: center;
    background: var(--kb-roster-accent);
    color: #fff;
    border-radius: 999px;
    padding: 1px 9px;
    font-size: 12px;
    font-weight: 700;
}
.kb-roster-card__desc {
    margin: 0 0 10px;
    color: #555;
    font-size: 13.5px;
}
.kb-roster-card__body { line-height: 1.9; }

/* ============================================
   Vendor contact directory card (e.g. Electrolux)
   ============================================ */
.kb-contact-directory {
    border: 1px solid #e7e7ea;
    border-radius: 10px;
    overflow: hidden;
    margin: 0 0 28px;
    background: #fff;
}
.kb-contact-directory__head {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #0a2c45;
    color: #fff;
    padding: 14px 18px;
}
/* [2026-07-08] Collapsed-by-default: <summary> head. Strip the native
   disclosure triangle (both engines) and make the whole bar the toggle. */
summary.kb-contact-directory__head {
    cursor: pointer;
    list-style: none;
    user-select: none;
}
summary.kb-contact-directory__head::-webkit-details-marker { display: none; }
.kb-contact-directory__chevron {
    margin-left: auto;
    flex: 0 0 auto;
    transition: transform 0.18s ease;
    opacity: 0.85;
    font-size: 14px;
}
.kb-contact-directory[open] .kb-contact-directory__chevron { transform: rotate(180deg); }
.kb-contact-directory__icon {
    flex: 0 0 auto;
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    /* [2026-07-06] one gold-badge spec across the three KB cards */
    background: var(--nx-gold, #fcb040);
    color: var(--nx-on-accent, #0a2c45);
    border-radius: 50%;
    font-size: 17px;
}
/* Descendant form (two classes) so it outranks [data-palette="house"] main h2,
   which would otherwise add a gold underline under this white-on-navy title. */
.kb-contact-directory .kb-contact-directory__title {
    margin: 0;
    font-family: 'Oswald', sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 600;
    color: #fff;
    border: none;
    padding: 0;
}
.kb-contact-directory__sub {
    margin: 2px 0 0;
    font-size: 12.5px;
    opacity: 0.85;
}
.kb-contact-directory__scroll { overflow-x: auto; }

.kb-contact-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.kb-contact-table th {
    text-align: left;
    background: #faf7f0;
    color: #1e1e1e;
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 12px;
    padding: 10px 14px;
    border-bottom: 2px solid #fcb040;
    white-space: nowrap;
}
.kb-contact-table td {
    padding: 11px 14px;
    border-bottom: 1px solid #eee;
    vertical-align: top;
    line-height: 1.5;
}
.kb-contact-table tbody tr:nth-child(even) { background: #fcfbf9; }
.kb-contact-table tbody tr:last-child td { border-bottom: none; }
.kb-contact-table td:first-child { width: 26%; }
.kb-contact-table td:nth-child(2) { width: 34%; color: #555; }
.kb-contact-table a { font-weight: 600; }
.kb-contact-hours { color: #888; font-size: 12.5px; }

.kb-contact-directory__source {
    margin: 0;
    padding: 9px 18px;
    font-size: 11.5px;
    color: #9a9aa2;
    background: #fafafa;
    border-top: 1px solid #eee;
}

@media (max-width: 600px) {
    .kb-contact-table td:first-child,
    .kb-contact-table td:nth-child(2) { width: auto; }
    .kb-contact-table { min-width: 520px; } /* let it scroll rather than crush */

    /* [2026-07-06] Price Guide card compaction on phones/split-view iPads. */
    .kb-pg-table td,
    .kb-pg-table th { padding: 8px 12px; }
    .kb-pg-market > summary,
    .kb-pg-tax,
    .kb-price-guide--live .kb-price-guide__note,
    .kb-price-guide--live .kb-price-guide__links { padding-left: 14px; padding-right: 14px; }
    .kb-price-guide--live .kb-price-guide__head { padding: 14px; }
    .kb-pg-amt { white-space: normal; overflow-wrap: anywhere; }
}

/* ============================================
   [2026-07-07] KB classic mode — A–Z index + category long view
   Two read-only surfaces restoring old-WordPress muscle memory: the flat
   all-pages A–Z list and the "everything on one page" category view.
   Zero JS (anchors only); Nautilus tokens with classic fallbacks — same
   var(--nx-*, fallback) idiom as the Price Guide card above.
   ============================================ */

/* "Browse A–Z" banner on the KB landing (sister to .kb-vendors-banner,
   lighter so the two flat entries read as a family, not twins).
   [2026-07-10] Compacted to match the slim vendors bar — smaller icon/padding,
   subline hidden. */
.kb-az-banner {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 11px 18px;
    margin: 0 0 26px;
    background: #f6f9fc;
    border: 1px solid #d7e2ec;
    border-left: 4px solid var(--nx-gold, #fcb040);
    border-radius: 10px;
    text-decoration: none;
    color: var(--nx-navy-2, #0a2c45);
}
.kb-az-banner:hover { box-shadow: 0 4px 16px rgba(10, 44, 69, 0.15); }
.kb-az-banner__icon {
    flex: 0 0 auto;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--nx-navy-2, #0a2c45);
    color: var(--nx-gold-bright, #fcb040);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px;
}
.kb-az-banner__text { flex: 1; }
.kb-az-banner__text strong { display: block; font-size: 14.5px; }
/* Subline hidden in the compact bar (kept in markup for the walkthrough/SEO). */
.kb-az-banner__text span { display: none; }
.kb-az-banner__cta {
    flex: 0 0 auto;
    font-weight: 600;
    font-size: 13px;
    background: var(--nx-navy, #0a2c45);
    color: #fff;
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 8px;
}
/* Slot the banner beside the vendors banner in the index flex order
   (kb_tree_nav.css orders the landing's main children; vendors is 1). */
.kb-page-layout .kb-az-banner { order: 1; }

/* Intro line shared by both classic surfaces — 16.5px findability floor. */
.kb-az-intro {
    max-width: 760px;
    font-size: 16.5px;
    line-height: 1.6;
    color: #44566b;
    margin: 0 0 22px;
}

/* Letter jump bar — pure anchor links, 44px touch targets. */
.kb-az-jumpbar {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0 0 10px;
    padding: 8px;
    background: #f6f9fc;
    border: 1px solid #d7e2ec;
    border-radius: 10px;
}
.kb-az-jumpbar a,
.kb-az-jumpbar span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    border-radius: 8px;
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    font-size: 16.5px;
    text-decoration: none;
}
.kb-az-jumpbar a {
    color: var(--nx-navy-2, #0a2c45);
    background: #fff;
    border: 1px solid #e2e8ee;
}
.kb-az-jumpbar a:hover {
    background: var(--nx-gold, #fcb040);
    color: var(--nx-on-accent, #0a2c45);
    border-color: var(--nx-gold, #fcb040);
}
.kb-az-jumpbar a:focus-visible {
    outline: 2px solid var(--nx-navy-2, #0a2c45);
    outline-offset: 2px;
}
.kb-az-jumpbar span { color: #c2ccd6; } /* letter with no articles — inert */

/* Letter group heading; scroll-margin clears the fixed site header (same
   value as .article-content h2/h3 at :854). */
.kb-az-group__title {
    font-family: 'Oswald', sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: var(--nx-navy-2, #0a2c45);
    border-bottom: 2px solid var(--nx-gold, #fcb040);
    padding-bottom: 6px;
    margin: 30px 0 6px;
    scroll-margin-top: 90px;
}

/* Dense rows by design — this list mirrors the old flat home page. */
.kb-az-list { list-style: none; margin: 0; padding: 0; }
.kb-az-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 2px;
    border-bottom: 1px solid #eee;
}
.kb-az-row:last-child { border-bottom: none; }
.kb-az-row__title {
    font-size: 16.5px; /* findability floor */
    font-weight: 500;
    color: var(--nx-navy-2, #0a2c45);
    text-decoration: none;
    border-bottom: 1px solid rgba(252, 176, 64, 0.5);
}
.kb-az-row__title:hover { border-bottom-color: var(--nx-gold, #fcb040); }
.kb-az-row__cat {
    font-size: 13px;
    color: #7a8794;
    text-decoration: none;
}
.kb-az-row__cat:hover {
    color: var(--nx-navy-2, #0a2c45);
    text-decoration: underline;
}

/* ---- Category long view ("everything on one page") ---- */

/* "View all as one page" button on the category page — 44px touch target.
   [2026-07-07 Shane] Explicit label colors: the house palette's .btn navy
   plus the KB link-color rules left navy-on-navy (unreadable). Two-class
   selector wins the specificity ties either way. */
.btn.kb-longview-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    background: var(--nx-navy, #0a2c45);
    color: #fff;
    border-bottom: none;
}
.btn.kb-longview-cta:hover {
    background: var(--nx-gold, #fcb040);
    color: var(--nx-on-accent, #0a2c45);
    border-bottom: none;
}

/* Long-view body copy — 16.5px findability floor (the standalone article
   page gets its size from .article-content defaults; the long view pins
   the floor explicitly since it's a marathon-read surface). */
.kb-longview .article-content { font-size: 16.5px; }

/* Anchor-only in-page TOC. */
.kb-longview-toc {
    background: #f6f9fc;
    border: 1px solid #d7e2ec;
    border-left: 4px solid var(--nx-gold, #fcb040);
    border-radius: 10px;
    padding: 16px 18px;
    margin: 0 0 30px;
}
.kb-longview-toc__title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Oswald', sans-serif;
    font-size: 14px; /* one navy-header label spec across KB cards */
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 600;
    color: var(--nx-navy-2, #0a2c45);
}
.kb-longview-toc ol { margin: 10px 0 0; padding-left: 22px; }
.kb-longview-toc li { margin: 0 0 6px; font-size: 16.5px; line-height: 1.5; }
.kb-longview-toc a {
    color: var(--nx-navy-2, #0a2c45);
    text-decoration: none;
    border-bottom: 1px solid rgba(252, 176, 64, 0.5);
}
.kb-longview-toc a:hover { border-bottom-color: var(--nx-gold, #fcb040); }
.kb-longview-toc__cat { font-size: 13px; color: #7a8794; margin-left: 8px; }

/* One article section per published article. */
.kb-longview-article {
    border-top: 2px solid var(--nx-gold, #fcb040);
    margin: 34px 0 0;
    padding-top: 20px;
}
.kb-longview-article__title {
    font-family: 'Oswald', sans-serif;
    font-size: 28px;
    font-weight: 600;
    color: var(--nx-navy-2, #0a2c45);
    line-height: 1.3;
    margin: 0 0 8px;
    scroll-margin-top: 90px; /* jump target clears the fixed header */
}
.kb-longview-article__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    font-size: 13.5px;
    color: #7a8794;
    margin: 0 0 16px;
}
.kb-longview-article__meta a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--nx-navy-2, #0a2c45);
    text-decoration: none;
    border-bottom: 1px solid rgba(252, 176, 64, 0.5);
    font-weight: 500;
}
.kb-longview-article__meta a:hover { border-bottom-color: var(--nx-gold, #fcb040); }
.kb-longview-article__meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Honest "too large" fallback — navy note, no partial render. */
.kb-longview-toolarge {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: #f6f9fc;
    border: 1px solid #d7e2ec;
    border-left: 4px solid var(--nx-gold, #fcb040);
    border-radius: 10px;
    padding: 18px 20px;
    font-size: 16.5px;
    color: var(--nx-navy-2, #0a2c45);
}
.kb-longview-toolarge > i {
    flex: 0 0 auto;
    margin-top: 3px;
    color: var(--nx-gold, #fcb040);
    font-size: 20px;
}
.kb-longview-toolarge p { margin: 6px 0 0; color: #44566b; line-height: 1.6; }
.kb-longview-toolarge a {
    color: var(--nx-navy-2, #0a2c45);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(252, 176, 64, 0.5);
}
.kb-longview-toolarge a:hover { border-bottom-color: var(--nx-gold, #fcb040); }

/* ============================================================
   KB search results upgrades — facets, pager, did-you-mean,
   typeahead dropdown. [2026-07-07 kb-findability]
   Nautilus tokens (--nx-*) with classic-palette fallbacks, same
   convention as the Price Guide card block above.
   ============================================================ */

/* --- Did-you-mean ------------------------------------------------ */
.kb-didyoumean {
    max-width: 860px;
    margin: 0 auto 16px;
    padding: 12px 18px;
    background: var(--nx-paper, #fff8e1);
    border: 1px solid var(--nx-gold, #f0c066);
    border-radius: 8px;
    font-size: 16.5px;
    color: #444;
}
.kb-didyoumean i { color: var(--nx-gold, #b8770e); margin-right: 6px; }
.kb-didyoumean a {
    color: var(--nx-navy-2, #0a2c45);
    font-weight: 700;
    font-style: italic;
    text-decoration: underline;
}
.kb-didyoumean a:hover { color: var(--nx-gold, #b8770e); }

/* --- Category facet chips ---------------------------------------- */
.kb-facets {
    max-width: 860px;
    margin: 0 auto 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    /* [2026-07-07 Shane] center the chip strip under the centered search box */
    justify-content: center;
}
.kb-facet {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 40px;
    padding: 8px 16px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 999px;
    color: #444;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    transition: border-color .15s ease, background .15s ease;
}
.kb-facet:hover {
    border-color: var(--nx-gold, #fcb040);
    background: var(--nx-paper, #fff8e1);
}
.kb-facet.is-active {
    background: var(--nx-navy-2, #0a2c45);
    border-color: var(--nx-navy-2, #0a2c45);
    color: #fff;
}
.kb-facet.is-active .kb-facet__count {
    background: var(--nx-gold, #fcb040);
    color: var(--nx-on-accent, #0a2c45);
}
.kb-facet__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    padding: 1px 7px;
    border-radius: 999px;
    background: #f0f0f2;
    color: #555;
    font-size: 12px;
    font-weight: 700;
}

/* --- Pagination --------------------------------------------------- */
.kb-pager {
    max-width: 860px;
    margin: 26px auto 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.kb-pager__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 20px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    color: var(--nx-navy-2, #1e1e1e);
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
}
.kb-pager__link:hover {
    border-color: var(--nx-gold, #fcb040);
    background: var(--nx-paper, #fff8e1);
}
.kb-pager__link.is-disabled {
    opacity: 0.4;
    pointer-events: none;
}
.kb-pager__status {
    font-size: 14px;
    color: #666;
    white-space: nowrap;
}

/* --- Typeahead dropdown ------------------------------------------- */
/* Wrapper is the positioning context; the input flexes to fill it so the
   existing .kb-search-box input / inline index-page styles keep working. */
.kb-typeahead {
    position: relative;
    display: flex;
}
.kb-typeahead > input { flex: 1; min-width: 0; }
.kb-search-box .kb-typeahead { flex: 1; }

.kb-typeahead__menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 80;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(10, 44, 69, 0.16);
    max-height: 420px;
    overflow-y: auto;
    text-align: left;
}
.kb-typeahead__menu.is-open { display: block; }

.kb-typeahead__label {
    padding: 10px 16px 4px;
    font-family: 'Oswald', sans-serif;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--nx-gold, #b8770e);
}
.kb-typeahead__item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;       /* touch target — iPads in the field */
    padding: 8px 16px;
    color: inherit;
    text-decoration: none;
}
.kb-typeahead__item i {
    flex: 0 0 18px;
    text-align: center;
    color: var(--nx-navy-2, #0a2c45);
    opacity: 0.75;
}
.kb-typeahead__item.is-active {
    background: var(--nx-paper, #fff8e1);
}
.kb-typeahead__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.kb-typeahead__text strong {
    font-size: 15px;
    font-weight: 600;
    color: #1e1e1e;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.kb-typeahead__sub {
    font-size: 12.5px;
    color: #888;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 600px) {
    .kb-pager { flex-wrap: wrap; justify-content: center; }
    .kb-facet { min-height: 44px; }   /* full touch size on phones */
}

/* [2026-07-07 Shane] Long-view payer/section banners — a tech scanning the
   Claims one-pager must see WHICH vendor a rate belongs to without reading
   rates. Rendered between article groups whenever the long view spans more
   than one (sub)category. */
.kb-longview-group {
    font-family: 'Oswald', sans-serif;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    background: var(--nx-navy, #0a2c45);
    color: #fff;
    border-left: 4px solid var(--nx-gold, #fcb040);
    border-radius: 8px;
    padding: 12px 18px;
    margin: 44px 0 4px;
    scroll-margin-top: 90px;
}
.kb-longview-group:first-of-type { margin-top: 24px; }
.kb-longview-toc__group {
    font-family: 'Oswald', sans-serif;
    font-size: 13px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--nx-navy-2, #0a2c45);
    margin: 10px 0 2px;
    list-style: none;
}
.kb-longview-toc ol ol { margin: 2px 0 0; padding-left: 20px; }

/* [2026-07-07 claims-second-pass] Payer chip — a small "Applies to: <payer>"
   pill rendered near an article title (and per-article in the long view) so a
   tech knows WHICH warranty payer a procedure/rate belongs to. Label derived
   at render time from category ancestry (app/services/payer_context.py) — no
   content mutation. Light pill, gold hairline, navy text: legible in both the
   house (navy/gold) and classic (orange) palettes via the var() fallbacks. */
.kb-payer-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    max-width: 100%;
    margin: 12px 0 0;
    padding: 5px 13px;
    border-radius: 999px;
    background: var(--nx-paper, #fff8e1);
    border: 1px solid var(--nx-gold, #fcb040);
    line-height: 1.35;
}
.kb-payer-chip__label {
    font-family: 'Oswald', sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--nx-navy-2, #0a2c45);
    opacity: 0.8;
    white-space: nowrap;
}
.kb-payer-chip__label::after { content: ':'; }
.kb-payer-chip__value {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--nx-navy-2, #0a2c45);
    overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------ *
 * Embedded form card — {{form:slug}} shortcode in an article body.
 * [2026-07-09] Wraps the reused /forms wizard (forms/_form_body.html) in
 * the same navy-head / gold-badge card idiom as the KB contact directory
 * and price card so an in-article form reads as one of the KB card family.
 * ------------------------------------------------------------------ */
.kb-form-embed {
    border: 1px solid #e7e7ea;
    border-radius: 10px;
    overflow: hidden;
    margin: 24px 0;
    background: #fff;
}
.kb-form-embed__head {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #0a2c45;
    color: #fff;
    padding: 14px 18px;
}
/* [2026-07-10] Collapsible: the head is a <summary>. Strip the native
   disclosure triangle (both engines) and make the whole bar the toggle —
   same idiom as .kb-contact-directory__head. */
summary.kb-form-embed__head {
    cursor: pointer;
    list-style: none;
    user-select: none;
}
summary.kb-form-embed__head::-webkit-details-marker { display: none; }
.kb-form-embed__chevron {
    margin-left: auto;
    flex: 0 0 auto;
    transition: transform 0.18s ease;
    opacity: 0.85;
    font-size: 14px;
}
.kb-form-embed[open] .kb-form-embed__chevron { transform: rotate(180deg); }
.kb-form-embed__icon {
    flex: 0 0 auto;
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    background: var(--nx-gold, #fcb040);
    color: var(--nx-on-accent, #0a2c45);
    border-radius: 50%;
    font-size: 17px;
}
.kb-form-embed .kb-form-embed__title {
    margin: 0;
    font-family: 'Oswald', sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 600;
    color: #fff;
    border: none;
    padding: 0;
}
/* Two classes on purpose (like __title above): this <p> renders inside
   .article-content, whose `.article-content p { color:#1e1e1e }` (specificity
   0,1,1) outranks a single-class `.kb-form-embed__sub` (0,1,0) and kept the
   text dark-on-navy. `.kb-form-embed .kb-form-embed__sub` (0,2,0) wins. [2026-07-10] */
.kb-form-embed .kb-form-embed__sub {
    margin: 2px 0 0;
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.85);
}
.kb-form-embed__body { padding: 18px; }
/* The reused wizard sets its own max-width for the standalone page; inside a
   card it should fill the card width. */
.kb-form-embed__body .ef-form,
.kb-form-embed__body .ef-unavailable { max-width: none; }

.kb-form-embed--missing {
    margin: 16px 0;
    padding: 10px 14px;
    border: 1px dashed #e0a800;
    border-radius: 8px;
    background: #fff8e6;
    color: #7a5b00;
    font-size: 13.5px;
}
.kb-form-embed--missing code {
    background: rgba(0,0,0,.06);
    padding: 1px 5px;
    border-radius: 4px;
}

/* ------------------------------------------------------------------ *
 * Vendor / TPA card — {{card:vendor:type}} shortcode. Built on .kb-card
 * (inherits the gold-stripe card + compact density automatically).
 * [2026-07-10] Collapsible <details>: the summary carries the title + TPA
 * chips + chevron; collapsed in compact (default) = less scrolling, open in
 * comfortable (density-driven `open` set in the partial).
 * ------------------------------------------------------------------ */
/* [2026-07-10 fix] CRITICAL: kb_tree_nav.css ALSO defines `.kb-card` (for the
   index/tree grid cards) with `display:flex; flex-direction:column;
   min-height:130px`. Because this vendor card is a `<details class="kb-card">`,
   that rule (a) forced 130px of empty space when collapsed, and (b) broke
   native <details> collapse entirely — Chromium only hides a closed details'
   content when it renders as `block`, not `flex`. Force block + no min-height
   (the element+class selector outranks the bare `.kb-card`) so the card
   collapses to just its summary. Verified live: 130px -> 44px collapsed. */
details.kb-vendor-card {
    display: block;
    min-height: 0;
}
/* The card is a <details> using .kb-card padding; the summary is the header. */
summary.kb-vendor-card__summary {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
summary.kb-vendor-card__summary::-webkit-details-marker { display: none; }
.kb-vendor-card__title {
    margin: 0;
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    font-size: 16px;
}
.kb-vendor-card__codes {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 5px;
}
.kb-vendor-card__chev {
    margin-left: auto;
    align-self: center;
    color: #99a3ad;
    transition: transform 0.18s ease;
    font-size: 13px;
}
.kb-vendor-card[open] .kb-vendor-card__chev { transform: rotate(180deg); }
/* Body/warning appear only when expanded — space them off the summary. */
.kb-vendor-card__body { margin-top: 12px; }
.kb-vendor-card__body > :first-child { margin-top: 0; }
.kb-vendor-card__body > :last-child { margin-bottom: 0; }
/* The warning box already carries its own styling via .kb-callout-warning;
   just space it off the body. */
.kb-vendor-card__callout { margin: 12px 0 0; }

.kb-vendor-card--missing {
    margin: 16px 0;
    padding: 10px 14px;
    border: 1px dashed #e0a800;
    border-radius: 8px;
    background: #fff8e6;
    color: #7a5b00;
    font-size: 13.5px;
}
.kb-vendor-card--missing code {
    background: rgba(0,0,0,.06);
    padding: 1px 5px;
    border-radius: 4px;
}

/* ------------------------------------------------------------------ *
 * TRC sales cards — {{trc:training}} / {{trc:estimator}} shortcodes (and the
 * legacy landing auto-include). Palette mirrors the TRC teal brand.
 * [2026-07-10] Moved here from the partial's inline <style> so either card can
 * render on its own via a shortcode and still be styled.
 * ------------------------------------------------------------------ */
.trc-card {
    margin: 16px 0; border: 1.5px solid #0d9488; border-radius: 12px;
    background: #f0fdfa; overflow: hidden;
}
/* The header is the disclosure toggle. */
summary.trc-card__head {
    display: flex; align-items: center; gap: 10px;
    padding: 13px 16px; background: #ccfbf1; cursor: pointer;
    list-style: none; /* hide the default triangle (Firefox) */
}
summary.trc-card__head::-webkit-details-marker { display: none; } /* Safari/Chrome */
summary.trc-card__head:focus-visible { outline: 3px solid #0d9488; outline-offset: -3px; }
.trc-card[open] > summary.trc-card__head { border-bottom: 1.5px solid #99f6e4; }
.trc-card__icon { color: #0a7a70; font-size: 18px; }
.trc-card__title { font-weight: 700; color: #0a7a70; font-size: 15.5px; flex: 1; }
.trc-card__caret { color: #0a7a70; font-size: 13px; transition: transform 0.15s ease; }
.trc-card[open] > summary .trc-card__caret { transform: rotate(180deg); }

/* Content indents inside the card; collapsed = just the header bar. */
.trc-card > *:not(summary) { margin-left: 16px; margin-right: 16px; }
.trc-card > *:last-child { margin-bottom: 16px; }
.trc-card > h4 { color: #0a7a70; margin-top: 16px; margin-bottom: 6px; }
.trc-card > ul, .trc-card > ol { margin-top: 4px; padding-left: 22px; }
.trc-card li { margin: 4px 0; font-size: 14.5px; }
.trc-card__p { font-size: 14.5px; }
.trc-training__doors { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
@media (max-width: 640px) { .trc-training__doors { grid-template-columns: 1fr; } }
.trc-training__door { border-radius: 10px; padding: 10px 13px; font-size: 13px; border: 1.5px solid; }
.trc-training__door b { display: block; margin-bottom: 2px; }
.trc-training__door--sell { background: #ccfbf1; border-color: #0d9488; color: #0f3f3a; }
.trc-training__door--stop { background: #fef2f2; border-color: #fecaca; color: #7f1d1d; }
.trc-training__demo-cta { margin-top: 14px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.trc-training__demo-btn {
    display: inline-block; padding: 11px 18px; border-radius: 10px;
    background: #0d9488; color: #ffffff !important; font-weight: 700;
    font-size: 14px; text-decoration: none;
}
.trc-training__demo-btn:focus-visible { outline: 3px solid #0a2c45; outline-offset: 2px; }
.trc-training__demo-note { font-size: 12.5px; color: #6b7280; max-width: 380px; }
.trc-card__closing { padding-top: 4px; }