/* ============================================================================
   Knowledge Base page styles. SINGLE SOURCE OF TRUTH for every page under the
   Knowledge Base: /knowledge-base, /state-taxes, /state-taxes/:state, /guides.

   Colors come ONLY from /css/odyssey-tokens.css (the same tokens the tax
   calculator and the free tax filing tool read), so these pages match the rest
   of the marketing site in both dark and light themes. The header and footer
   are the shared ones (/js/site-header.js, views/partials/site-footer.html) and
   are never restyled here.

   The cosmos backdrop and hero rules are the same values as the free tax
   filing tool page, so a visitor moving between pages sees one site.
   ============================================================================ */

*{ margin:0; padding:0; box-sizing:border-box; }
html, body{ margin:0; padding:0; }
html{ overflow-x: hidden; overflow-x: clip; }
body{
    font-family:"Inter Tight", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    background: var(--bg-deep);
    color: var(--ink);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
    overflow-x: clip;
}
a{ color: inherit; }

/* Cosmic backdrop, same as the tax calculator and free tax filing tool */
.cosmos{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.cosmos::before{
    content:""; position:absolute; inset:-20%;
    background:
        radial-gradient(ellipse 60% 40% at 20% 0%, oklch(0.30 0.12 295 / .35), transparent 60%),
        radial-gradient(ellipse 50% 35% at 85% 30%, oklch(0.28 0.10 270 / .30), transparent 60%),
        radial-gradient(ellipse 70% 50% at 50% 110%, oklch(0.22 0.08 290 / .40), transparent 60%);
}
.stars{
    position:absolute; inset:0;
    background-image:
        radial-gradient(1px 1px at 13% 22%, white 50%, transparent 100%),
        radial-gradient(1px 1px at 27% 71%, white 50%, transparent 100%),
        radial-gradient(1px 1px at 44% 14%, white 50%, transparent 100%),
        radial-gradient(1px 1px at 58% 48%, white 50%, transparent 100%),
        radial-gradient(1px 1px at 67% 83%, white 50%, transparent 100%),
        radial-gradient(1px 1px at 81% 36%, white 50%, transparent 100%),
        radial-gradient(1px 1px at 92% 67%, white 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 35% 56%, white 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 73% 19%, white 50%, transparent 100%);
    opacity: .5; mix-blend-mode: screen;
}

.kb-container{ max-width: 1080px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; }
.kb-container--narrow{ max-width: 820px; }

/* HERO: same clearance under the fixed nav as the tool pages */
/* z-index 2 lifts the hero, and the search results panel inside it, above .kb-main (z-index 1) */
header.kb-hero{ padding: 124px 0 28px; position: relative; z-index: 2; text-align: center; }
.kb-eyebrow{
    font-family:"JetBrains Mono", ui-monospace, monospace;
    font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
    color: var(--accent); margin-bottom: 12px;
}
.kb-hero-title{ font-size: clamp(28px, 4.5vw, 44px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.kb-hero-sub{ max-width: 640px; margin: 14px auto 0; color: var(--ink-2); font-size: 16.5px; }

.kb-main{ position: relative; z-index: 1; padding-bottom: 90px; }

/* Breadcrumb */
.kb-breadcrumb{
    display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
    font-size: 13.5px; color: var(--ink-3); margin-bottom: 14px;
}
.kb-breadcrumb a{ color: var(--ink-2); text-decoration: none; }
.kb-breadcrumb a:hover{ color: var(--accent); }
.kb-breadcrumb-sep{ color: var(--ink-4); }

/* Search bar (knowledge base home and hub). Markup: views/knowledge-base/knowledge-base-search-bar.html
   The icon, input, "/" hint and clear button sit in .kb-search-field, so the icon centers
   on the input alone. The results panel floats under the field (absolute) and never pushes
   the page down or drags the icon with it. */
.kb-search{ max-width: 640px; margin: 8px auto 0; position: relative; z-index: 5; text-align: left; }
.kb-search-field{ position: relative; }
.kb-search-input{
    width: 100%; font: inherit; font-size: 16px; /* 16px minimum: iOS zooms on anything smaller */
    padding: 15px 52px 15px 48px; /* clears the icon on the left and the "/" hint or clear button on the right */
    border-radius: 14px;
    border: 1px solid var(--line);
    background: var(--bg-elev);
    color: var(--ink);
    outline: none;
    -webkit-appearance: none; appearance: none;
    text-overflow: ellipsis;
    transition: border-color .2s ease, box-shadow .2s ease;
}
/* The native type=search decorations differ per browser and overlap the text on iOS and
   Android; the bar draws its own clear button instead. */
.kb-search-input::-webkit-search-decoration,
.kb-search-input::-webkit-search-cancel-button,
.kb-search-input::-webkit-search-results-button,
.kb-search-input::-webkit-search-results-decoration{ -webkit-appearance: none; appearance: none; display: none; }
.kb-search-input::-ms-clear{ display: none; }
.kb-search-input::placeholder{ color: var(--ink-3); }
.kb-search-input:focus{ border-color: var(--accent); box-shadow: 0 0 0 3px oklch(0.70 0.20 295 / .18); }
.kb-search-icon{
    position: absolute; left: 17px; top: 50%; transform: translateY(-50%);
    width: 18px; height: 18px; color: var(--ink-3); pointer-events: none;
}
.kb-search-shortcut{
    position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
    display: none; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 7px;
    border: 1px solid var(--line); background: var(--bg-elev-2); color: var(--ink-3);
    font: 600 12.5px/22px "JetBrains Mono", ui-monospace, monospace; text-align: center; pointer-events: none;
}
/* The "/" hint only on devices with a real keyboard and pointer, and only while the field is idle */
@media (hover: hover) and (pointer: fine){ .kb-search-shortcut{ display: block; } }
.kb-search-input:focus ~ .kb-search-shortcut,
.kb-search-input:not(:placeholder-shown) ~ .kb-search-shortcut{ display: none; }
.kb-search-clear{
    position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px; border: 0; /* 44px touch target; the input's 52px right padding clears it */ border-radius: 10px; background: transparent;
    color: var(--ink-3); cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.kb-search-clear svg{ width: 16px; height: 16px; }
.kb-search-clear:hover, .kb-search-clear:focus-visible{ color: var(--ink); background: var(--bg-elev-2); outline: none; }
.kb-search-input:placeholder-shown ~ .kb-search-clear{ display: none; }

/* Results panel: floats over the page, scrolls inside itself */
.kb-search-panel{
    position: absolute; top: calc(100% + 8px); left: 0; right: 0;
    max-height: 480px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    border: 1px solid var(--line); border-radius: 14px;
    background: var(--bg-elev);
    box-shadow: 0 24px 60px -24px rgba(0,0,0,.6);
}
.kb-search-panel[hidden]{ display: none; }
.kb-search-status{
    position: sticky; top: 0; z-index: 1;
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
    padding: 11px 16px; border-bottom: 1px solid var(--line-soft);
    background: var(--bg-elev); font-size: 13px; color: var(--ink-3);
}
.kb-search-status:empty{ display: none; }
.kb-search-status-count{ font-weight: 600; color: var(--ink-2); letter-spacing: .01em; }
.kb-search-did-you-mean strong{ color: var(--accent); font-weight: 600; }
.kb-search-chips{ display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px 14px; }
.kb-search-chips[hidden]{ display: none; }
.kb-search-chip{
    font: inherit; font-size: 14px; color: var(--ink-2); cursor: pointer;
    min-height: 44px; padding: 10px 14px; border-radius: 999px;
    border: 1px solid var(--line-soft); background: transparent;
    transition: border-color .15s ease, color .15s ease;
}
.kb-search-chip:hover, .kb-search-chip:focus-visible{ border-color: var(--accent); color: var(--ink); outline: none; }
.kb-search-results{ list-style: none; margin: 0; padding: 0; }
.kb-search-result-link{
    display: block; min-height: 44px; padding: 11px 16px; text-decoration: none; color: inherit;
    border-top: 1px solid var(--line-soft); min-width: 0; overflow-wrap: anywhere;
}
.kb-search-result:first-child .kb-search-result-link{ border-top: 0; }
.kb-search-result.is-active .kb-search-result-link{ background: var(--bg-elev-2); box-shadow: inset 3px 0 0 var(--accent); }
.kb-search-result-title{ display: block; font-weight: 650; color: var(--ink); font-size: 15.5px; line-height: 1.35; }
.kb-search-result-kind{ display: block; font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
.kb-search-result-snippet{
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    margin-top: 4px; font-size: 14px; line-height: 1.45; color: var(--ink-2);
}
.kb-search-result-snippet:empty{ display: none; }
.kb-search-group-label{
    padding: 10px 16px 6px; border-top: 1px solid var(--line-soft);
    font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
}
.kb-search-panel mark{
    background: oklch(0.70 0.20 295 / .26); color: var(--ink);
    border-radius: 4px; padding: 0 2px; box-decoration-break: clone; -webkit-box-decoration-break: clone;
}

/* A state page section reached from a search result flashes once (knowledge-base-search.js) */
@keyframes kbSearchArrivalFlash{
    0%, 25%{ background-color: oklch(0.70 0.20 295 / .16); box-shadow: 0 0 0 12px oklch(0.70 0.20 295 / .16); }
    100%{ background-color: transparent; box-shadow: 0 0 0 12px transparent; }
}
.kb-section.kb-search-arrival-flash{ border-radius: 12px; animation: kbSearchArrivalFlash 2s ease-out; }
@media (prefers-reduced-motion: reduce){
    .kb-section.kb-search-arrival-flash{ animation: none; box-shadow: 0 0 0 12px oklch(0.70 0.20 295 / .12); background-color: oklch(0.70 0.20 295 / .12); }
}

/* Section buttons (knowledge base home) */
.kb-section-buttons{
    display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px; max-width: 820px; margin: 36px auto 0;
}
.kb-section-button{
    display: block; text-decoration: none;
    padding: 26px 24px;
    border-radius: 18px;
    border: 1px solid var(--line-soft);
    background: var(--bg-elev);
    transition: border-color .2s ease, transform .2s ease;
}
.kb-section-button:hover{ border-color: var(--accent); transform: translateY(-2px); }
.kb-section-button-title{ display: block; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.kb-section-button-desc{ display: block; margin-top: 6px; color: var(--ink-2); font-size: 15px; }
.kb-section-button-arrow{ display: inline-block; margin-top: 14px; color: var(--accent); font-weight: 600; font-size: 14.5px; }

/* The selected tab keeps the button design and just holds its hover border. */
.kb-section-button.is-active{ border-color: var(--accent); }

/* Tab panels on the knowledge base home (open below the buttons) */
.kb-tab-panel{ max-width: 820px; margin: 22px auto 0; }
.kb-tab-panel[hidden]{ display: none; }
.kb-tab-panel-head{
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    flex-wrap: wrap; margin-bottom: 14px;
}
.kb-tab-panel-title{ font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; }
.kb-tab-panel-link{ color: var(--accent); font-weight: 600; font-size: 14.5px; text-decoration: none; }
.kb-tab-panel-link:hover{ text-decoration: underline; }
.kb-state-grid{
    list-style: none;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px 14px;
}
.kb-state-grid a{
    display: block; padding: 8px 10px; border-radius: 10px;
    color: var(--ink-2); text-decoration: none; font-size: 15px;
}
.kb-state-grid a:hover{ background: var(--bg-elev-2); color: var(--ink); }

/* Panels, tables, sections */
.kb-panel{
    border: 1px solid var(--line-soft); border-radius: 18px;
    background: var(--bg-elev); padding: 24px;
}
.kb-panel + .kb-panel{ margin-top: 18px; }

.kb-table-wrap{ overflow-x: auto; border: 1px solid var(--line-soft); border-radius: 18px; background: var(--bg-elev); }
.kb-table{ width: 100%; border-collapse: collapse; font-size: 15px; }
.kb-table th, .kb-table td{ padding: 13px 18px; text-align: left; border-top: 1px solid var(--line-soft); vertical-align: top; }
.kb-table thead th{
    border-top: 0; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase;
    color: var(--ink-3); font-weight: 600; background: var(--bg-elev-2);
}
.kb-table td a{ color: var(--ink); font-weight: 600; text-decoration: none; }
.kb-table td a:hover{ color: var(--accent); }
.kb-table td.kb-cell-pending{ color: var(--ink-3); }

.kb-toc{ margin-bottom: 26px; }
.kb-toc-title{ font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; }
.kb-toc ol{ list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.kb-toc a{
    display: inline-block; padding: 7px 13px; border-radius: 999px;
    border: 1px solid var(--line-soft); text-decoration: none; font-size: 14px; color: var(--ink-2);
}
.kb-toc a:hover{ border-color: var(--accent); color: var(--ink); }

.kb-section{ scroll-margin-top: 110px; padding: 26px 0; border-top: 1px solid var(--line-soft); }
.kb-section:first-of-type{ border-top: 0; }
.kb-section h2{ font-size: 1.45rem; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 10px; }
.kb-section p{ color: var(--ink-2); }
.kb-section p + p{ margin-top: 10px; }

/* State page content */
.kb-overview{ font-size: 17px; color: var(--ink) !important; }
.kb-hub-intro{ color: var(--ink-2); }
.kb-hub-intro + .kb-hub-intro{ margin-top: 10px; }

/* Key facts under a section: a two-column list that stacks on small screens */
.kb-facts{ margin-top: 16px; border: 1px solid var(--line-soft); border-radius: 14px; overflow: hidden; }
.kb-fact{ display: grid; grid-template-columns: minmax(150px, 36%) 1fr; gap: 14px; padding: 11px 16px; border-top: 1px solid var(--line-soft); }
.kb-fact:first-child{ border-top: 0; }
.kb-fact dt{ color: var(--ink-3); font-size: 14px; }
.kb-fact dd{ color: var(--ink); font-size: 15px; }

/* State page calculator */
.kb-estimate{
    display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px; align-items: end; margin-top: 14px;
}
.kb-estimate-field{ display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; color: var(--ink-3); }
.kb-estimate-field select,
.kb-estimate-field input{
    font: inherit; font-size: 15.5px; color: var(--ink);
    padding: 11px 12px; border-radius: 12px;
    border: 1px solid var(--line); background: var(--bg-elev-2); outline: none;
}
.kb-estimate-field select:focus,
.kb-estimate-field input:focus{ border-color: var(--accent); }
.kb-estimate-button{ margin-top: 0; border: 0; cursor: pointer; font: inherit; font-weight: 700; padding: 12px 22px; }
.kb-estimate-result{ margin-top: 16px; border: 1px solid var(--line-soft); border-radius: 14px; padding: 16px; background: var(--bg-elev-2); }
.kb-estimate-result[hidden]{ display: none; }
.kb-estimate-line{ display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; color: var(--ink-2); }
.kb-estimate-total{ display: flex; justify-content: space-between; gap: 12px; padding-top: 10px; margin-top: 6px; border-top: 1px solid var(--line-soft); font-weight: 800; color: var(--ink); font-size: 17px; }
.kb-estimate-note{ margin-top: 10px; color: var(--ink-2); font-size: 14.5px; }
.kb-estimate-disclaimer{ margin-top: 10px; font-size: 13px; color: var(--ink-3) !important; }

.kb-sources{ list-style: disc; padding-left: 20px; color: var(--ink-2); }
.kb-sources li + li{ margin-top: 6px; }
.kb-sources a{ color: var(--accent); }
.kb-last-reviewed{ margin-top: 12px; font-size: 14px; color: var(--ink-3) !important; }

@media (max-width: 560px){
    .kb-fact{ grid-template-columns: 1fr; gap: 2px; }
}

/* Visible marker for template slots that are waiting on content. Removed from
   a section as soon as that section is filled in. */
.kb-placeholder{
    border: 1px dashed var(--line); border-radius: 12px;
    padding: 14px 16px; color: var(--ink-3); font-size: 14.5px;
}

.kb-cta{
    margin-top: 30px; text-align: center;
    border: 1px solid var(--line-soft); border-radius: 18px;
    background: var(--bg-elev); padding: 28px 24px;
}
.kb-cta h2{ font-size: 1.3rem; font-weight: 800; letter-spacing: -0.02em; }
.kb-cta p{ color: var(--ink-2); margin-top: 6px; }
.kb-button{
    display: inline-block; margin-top: 16px; padding: 12px 22px; border-radius: 12px;
    background: var(--accent); color: #fff; font-weight: 700; text-decoration: none;
}
.kb-button:hover{ filter: brightness(1.08); }

.kb-back-link{ display: inline-block; margin-top: 24px; color: var(--ink-2); text-decoration: none; font-size: 14.5px; }
.kb-back-link:hover{ color: var(--accent); }

.kb-empty{ text-align: center; color: var(--ink-2); padding: 40px 24px; }

/* ═══════════════════════════════════════════════════════════════
   LIGHT THEME (token values come from /css/odyssey-tokens.css;
   only non-token patches live here, same as the tool pages)
   ═══════════════════════════════════════════════════════════════ */
html[data-theme="light"] body{ background: var(--bg-deep); color: var(--ink); }
html[data-theme="light"] .cosmos::before{
    background:
        radial-gradient(ellipse 60% 40% at 20% 0%, rgba(108,90,224,0.10), transparent 60%),
        radial-gradient(ellipse 50% 35% at 85% 30%, rgba(15,168,144,0.08), transparent 60%),
        radial-gradient(ellipse 70% 50% at 50% 110%, rgba(217,142,43,0.07), transparent 60%);
}
html[data-theme="light"] .stars{ opacity: .14; mix-blend-mode: multiply; }
html[data-theme="light"] .kb-search-input:focus{ box-shadow: 0 0 0 3px rgba(108,90,224,0.16); }
html[data-theme="light"] .kb-search-panel{ box-shadow: 0 24px 60px -30px rgba(40,90,120,.45); }
html[data-theme="light"] .kb-search-panel mark{ background: rgba(108,90,224,0.16); }
html[data-theme="light"] .kb-section.kb-search-arrival-flash{ animation-name: kbSearchArrivalFlashLight; }
@keyframes kbSearchArrivalFlashLight{
    0%, 25%{ background-color: rgba(108,90,224,0.10); box-shadow: 0 0 0 12px rgba(108,90,224,0.10); }
    100%{ background-color: transparent; box-shadow: 0 0 0 12px transparent; }
}
html[data-theme="light"] .kb-section-button,
html[data-theme="light"] .kb-panel,
html[data-theme="light"] .kb-table-wrap,
html[data-theme="light"] .kb-cta{ box-shadow: 0 24px 60px -34px rgba(40,90,120,.45); }

@media (max-width: 640px){
    .kb-table th, .kb-table td{ padding: 11px 12px; }
    .kb-search-panel{ max-height: 60vh; }
    .kb-search-result-link{ padding: 11px 14px; }
    .kb-section-buttons{ margin-top: 26px; }
}