/* Policy Explorer — Design System */

:root {
    /* ── Layout tokens ────────────────────────────────────── */
    --sidebar-width: 360px;
    --header-height: 58px;

    /* ── Palette ───────────────────────────────────────────── */
    --color-navy: #1c2b44;
    --color-blue: #2a4a7a;
    --color-blue-light: #c1d5eb;
    --color-surface: #f6f5f2;
    --color-card: #ffffff;
    --color-neutral: #6b6862;
    --color-accent: #8e4840;          /* darkened from #a0524a for WCAG AA */
    --color-text-primary: #2d2a27;
    --color-border: #e0ddd8;

    /* ── Elevation ─────────────────────────────────────────── */
    --shadow-card: 0 1px 3px rgba(0,0,0,0.08);
    --shadow-card-hover: 0 2px 8px rgba(0,0,0,0.12);
    --shadow-nav: 0 1px 4px rgba(0,0,0,0.15);

    /* ── Typography ────────────────────────────────────────── */
    --font-ui: 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-body: 'Newsreader', Georgia, 'Times New Roman', serif;

    /* ── Reserved / utility ────────────────────────────────── */
    --reserved-bg: #fff8e7;
    --tag-bg: #eae8e4;

    /* ── Backward-compatible aliases ───────────────────────── */
    --bg: var(--color-surface);
    --sidebar-bg: var(--color-card);
    --content-bg: var(--color-card);
    --border: var(--color-border);
    --text: var(--color-text-primary);
    --text-muted: var(--color-neutral);
    --text-light: #9a9690;
    --primary: var(--color-blue);
    --primary-light: var(--color-blue-light);
    --accent: var(--color-navy);
    --card-shadow: var(--shadow-card);
    --card-hover-shadow: var(--shadow-card-hover);
}

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

body {
    font-family: var(--font-ui);
    color: var(--color-text-primary);
    background: var(--color-surface);
    line-height: 1.5;
}

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

/* ── Global focus states ──────────────────────────────────── */
:focus-visible {
    outline: 2px solid var(--color-blue);
    outline-offset: 2px;
}
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible {
    outline: 2px solid var(--color-blue);
    outline-offset: 2px;
}

/* ── Smooth scrolling ─────────────────────────────────────── */
html { scroll-behavior: smooth; }

/* ── Header ────────────────────────────────────────────────── */

.site-header {
    height: var(--header-height);
    background: var(--color-navy);
    color: #fff;
    display: flex;
    align-items: center;
    padding: 0 24px;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--shadow-nav);
}

.site-header h1 {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.site-header h1 a { color: #fff; }
.site-header h1 a:hover { text-decoration: none; opacity: 0.9; }

.site-header nav {
    margin-left: 32px;
    display: flex;
    gap: 20px;
}

.site-header nav a {
    color: rgba(255,255,255,0.85);
    font-size: 14px;
    font-weight: 500;
    padding-bottom: 2px;
    border-bottom: 2px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.site-header nav a:hover { color: #fff; text-decoration: none; border-bottom-color: rgba(255,255,255,0.4); }
.site-header nav a.active { color: #fff; border-bottom-color: var(--color-blue-light); }

.header-right {
    margin-left: auto;
    font-size: 11px;
    font-weight: 400;
    color: rgba(255,255,255,0.5);
    letter-spacing: 0.02em;
}

/* ── Home Page — Hero ─────────────────────────────────────── */

.hero {
    background: linear-gradient(135deg, #0f1b2d 0%, #1c2b44 35%, #2a4a7a 100%);
    color: #fff;
    text-align: center;
    padding: 72px 24px 64px;
    position: relative;
    overflow: hidden;
}

/* Layered depth — soft glow and grain */
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 60% at 30% 110%, rgba(42,74,122,0.6) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 85% -10%, rgba(142,72,64,0.15) 0%, transparent 50%),
        radial-gradient(ellipse 50% 80% at 50% 50%, rgba(193,213,235,0.04) 0%, transparent 80%);
    pointer-events: none;
}

/* Subtle grid pattern overlay */
.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 48px 48px;
    pointer-events: none;
}

.hero-inner {
    position: relative;
    max-width: 680px;
    margin: 0 auto;
}

.hero-title {
    font-size: 36px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 12px;
}

.hero-tagline {
    font-size: 19px;
    font-weight: 400;
    color: rgba(255,255,255,0.75);
    line-height: 1.6;
    margin-bottom: 36px;
}

.hero-actions {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

.hero-btn {
    display: inline-block;
    padding: 12px 28px;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s ease, transform 0.1s ease;
}

.hero-btn:hover { text-decoration: none; transform: translateY(-1px); }

.hero-btn-primary {
    background: #fff;
    color: var(--color-navy);
}
.hero-btn-primary:hover { background: rgba(255,255,255,0.92); }

.hero-btn-secondary {
    background: rgba(255,255,255,0.12);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.25);
}
.hero-btn-secondary:hover { background: rgba(255,255,255,0.2); }

/* ── Home Page — Sections ────────────────────────────────── */

.home-section {
    padding: 56px 24px;
}

.home-section-alt {
    background: var(--color-card);
}

.home-section-inner {
    max-width: 880px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start;
}

.home-section-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-navy);
    margin-bottom: 12px;
}

.home-section-desc {
    font-size: 15px;
    color: var(--color-text-primary);
    line-height: 1.65;
    margin-bottom: 16px;
}

.home-feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.home-feature-list li {
    position: relative;
    padding-left: 20px;
    font-size: 14px;
    color: var(--color-neutral);
    line-height: 1.55;
    margin-bottom: 8px;
}

.home-feature-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 7px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-blue);
}

/* Municipality select (browse section) */
.home-section-action {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 28px 24px;
    box-shadow: var(--shadow-card);
}

.home-section-alt .home-section-action {
    background: var(--color-surface);
}

.muni-select-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-navy);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.muni-search-wrapper {
    position: relative;
}

.home-muni-input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-family: var(--font-ui);
    font-size: 15px;
    font-weight: 500;
    color: var(--color-text-primary);
    background: #fff;
    outline: none;
}

.home-muni-input:focus {
    border-color: var(--color-blue);
    box-shadow: 0 0 0 3px var(--color-blue-light);
}

.muni-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 240px;
    overflow-y: auto;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    box-shadow: var(--shadow-card-hover);
    list-style: none;
    padding: 4px 0;
    margin: 0;
    z-index: 20;
}

.muni-dropdown.open {
    display: block;
}

.muni-dropdown li a {
    display: block;
    padding: 8px 14px;
    font-size: 14px;
    color: var(--color-text-primary);
    text-decoration: none;
    transition: background 0.1s ease;
}

.muni-dropdown li a:hover {
    background: var(--color-blue-light);
    color: var(--color-navy);
    text-decoration: none;
}

.muni-dropdown li.current a {
    font-weight: 600;
    color: var(--color-blue);
}

/* Browse sidebar variant */
.toc-muni-search .home-muni-input {
    font-weight: 600;
    font-size: 14px;
}

.toc-muni-search .muni-dropdown {
    max-height: 320px;
}

.muni-dropdown::-webkit-scrollbar { width: 6px; }
.muni-dropdown::-webkit-scrollbar-track { background: transparent; }
.muni-dropdown::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 3px; }

.muni-select-hint {
    margin-top: 10px;
    font-size: 12px;
    color: var(--color-neutral);
    line-height: 1.5;
}

/* Single-column section variant */
.home-section-single {
    grid-template-columns: 1fr;
}

/* Two-column layout within search section */
.home-search-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: start;
}

/* Search suggestions */
.home-search-suggestions {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.suggestions-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-neutral);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
}

.suggestion-chip {
    display: inline-block;
    padding: 5px 12px;
    margin: 0 6px 6px 0;
    border: 1px solid var(--color-border);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-blue);
    background: var(--color-card);
    text-decoration: none;
    transition: all 0.15s ease;
}

.suggestion-chip:hover {
    background: var(--color-blue-light);
    border-color: var(--color-blue-light);
    color: var(--color-navy);
    text-decoration: none;
}

/* ── Responsive — Home ───────────────────────────────────── */
@media (max-width: 768px) {
    .hero { padding: 40px 20px 36px; }
    .hero-title { font-size: 28px; }
    .hero-actions { flex-direction: column; align-items: center; }
    .home-section-inner {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .home-search-columns {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .home-section { padding: 36px 20px; }
}

/* ── Browse Page — Layout ──────────────────────────────────── */

.browse-layout {
    display: flex;
    height: calc(100vh - var(--header-height));
}

/* ── Browse — Sidebar (TOC) ────────────────────────────────── */

.toc-sidebar {
    width: var(--sidebar-width);
    min-width: var(--sidebar-width);
    background: var(--sidebar-bg);
    border-right: 1px solid var(--border);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.toc-header {
    padding: 16px 16px 12px;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    background: var(--sidebar-bg);
    z-index: 10;
}

.toc-header .toc-meta {
    font-size: 12px;
    color: var(--color-neutral);
    margin-top: 4px;
}

.toc-tree {
    padding: 8px 0;
    flex: 1;
    overflow-y: auto;
}

.toc-node {
    cursor: pointer;
    user-select: none;
}

.toc-node-row {
    display: flex;
    align-items: flex-start;
    padding: 4px 12px 4px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--color-text-primary);
    border-left: 3px solid transparent;
    transition: background 0.15s ease;
}

.toc-node-row:hover {
    background: var(--color-surface);
}

.toc-node-row.active {
    background: var(--color-blue-light);
    border-left-color: var(--color-blue);
    font-weight: 500;
}

.toc-node-row.reserved {
    color: var(--text-light);
    font-style: italic;
}

.toc-toggle {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: var(--text-muted);
    margin-right: 4px;
    transition: transform 0.15s;
}

.toc-toggle.expanded { transform: rotate(90deg); }
.toc-toggle.leaf { visibility: hidden; }

.toc-label {
    flex: 1;
    min-width: 0;
}

.toc-citation {
    font-weight: 500;
    margin-right: 4px;
    white-space: nowrap;
}

.toc-title {
    color: var(--text-muted);
}

.toc-children {
    display: none;
}

.toc-children.open {
    display: block;
}

/* Indent per depth level */
.toc-depth-0 .toc-node-row { padding-left: 12px; }
.toc-depth-1 .toc-node-row { padding-left: 28px; }
.toc-depth-2 .toc-node-row { padding-left: 44px; }
.toc-depth-3 .toc-node-row { padding-left: 60px; }
.toc-depth-4 .toc-node-row { padding-left: 76px; }
.toc-depth-5 .toc-node-row { padding-left: 92px; }
.toc-depth-6 .toc-node-row { padding-left: 108px; }
.toc-depth-7 .toc-node-row { padding-left: 124px; }

/* Container styling */
.toc-node.container > .toc-node-row {
    font-weight: 500;
    color: var(--text);
}

/* ── Browse — Content Wrapper + Persistent Search ─────────── */

.content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.browse-search-bar {
    display: flex;
    gap: 8px;
    padding: 10px 24px;
    border-bottom: 1px solid var(--border);
    background: var(--sidebar-bg);
    flex-shrink: 0;
}

.browse-search-bar input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 14px;
    outline: none;
}

.browse-search-bar input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--primary-light);
}

.browse-search-bar button {
    padding: 8px 18px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}

.browse-search-bar button:hover { background: var(--accent); }

/* ── Browse — Content Area ─────────────────────────────────── */

.content-area {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

.content-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-light);
    font-size: 15px;
}

.section-content {
    max-width: 75ch;
    margin: 0 auto;
    padding: 32px 40px;
}

.section-content .section-header {
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--color-border);
}

.section-meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-content .section-citation {
    font-size: 13px;
    color: var(--color-blue);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 4px;
}

.section-content .section-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--color-navy);
    line-height: 1.3;
}

.section-content .section-body {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.65;
    color: var(--color-text-primary);
}

.section-content .section-body p {
    margin: 0 0 0.75em 0;
}
.section-content .section-body p:last-child {
    margin-bottom: 0;
}

.section-content .section-body table,
.doc-section-body table,
.expanded-body table,
.print-section-body table,
table.body-table {
    border-collapse: collapse;
    margin: 12px 0;
    font-size: 14px;
    width: 100%;
}

table.body-table {
    white-space: normal;
}

table.body-table td {
    border: 1px solid var(--border);
    padding: 6px 10px;
    text-align: left;
    vertical-align: top;
}

table.body-table tr:hover td {
    background: #fafbfd;
}

/* Section divider rows within tables (e.g. "Bulk Standards", "Chapter 4") */
table.body-table .table-divider {
    background: #f5f7fa;
    font-weight: 600;
    font-size: 13px;
    border-left: none;
    border-right: none;
    padding: 8px 10px 6px;
}

.section-content .section-history {
    margin-top: 24px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    font-size: 13px;
    color: var(--text-muted);
}

.section-reserved {
    background: var(--reserved-bg);
    padding: 12px 16px;
    border-radius: 6px;
    font-style: italic;
    color: var(--text-muted);
}

/* Container content (when clicking a container in TOC) */
.container-content {
    max-width: 75ch;
    margin: 0 auto;
    padding: 32px 40px;
}

.container-content h2 {
    font-size: 20px;
    font-weight: 600;
    color: var(--color-navy);
    margin-bottom: 16px;
}

/* ── Container document view (all descendants) ───────────── */

.container-document {
    max-width: 75ch;
    margin: 0 auto;
    padding: 24px 40px 60px;
}

.container-doc-header {
    margin-bottom: 28px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--border);
}

.container-doc-header .section-citation {
    font-size: 13px;
    color: var(--color-blue);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 4px;
}

.container-doc-header .section-title {
    font-size: 24px;
    font-weight: 600;
    color: var(--color-navy);
    line-height: 1.3;
}

.doc-container-heading {
    margin: 28px 0 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}

.doc-container-heading .doc-level-label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-right: 6px;
}

.doc-container-heading .doc-heading-text {
    font-size: 18px;
    font-weight: 600;
    color: var(--text);
}

/* Indent sub-headings slightly */
.doc-depth-2 .doc-heading-text { font-size: 17px; }
.doc-depth-3 .doc-heading-text { font-size: 16px; }
.doc-depth-4 .doc-heading-text { font-size: 15px; }
.doc-depth-5 .doc-heading-text { font-size: 14px; }

.doc-section {
    margin: 0;
    padding: 24px 0;
    border-bottom: 1px solid var(--color-border);
}
.doc-section + .doc-section {
    margin-top: 8px;
}

.doc-section-header {
    margin-bottom: 8px;
}

.doc-section-citation {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-blue);
}

.doc-section-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-navy);
    margin-top: 2px;
}

.doc-section-body {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.65;
    color: var(--color-text-primary);
}

.doc-section-body p {
    margin: 0 0 0.75em 0;
}
.doc-section-body p:last-child {
    margin-bottom: 0;
}

/* Flash highlight when scrolling to a section from TOC */
.doc-highlight {
    animation: highlight-fade 1.5s ease-out;
}

@keyframes highlight-fade {
    0% { background-color: var(--color-blue-light); }
    100% { background-color: transparent; }
}

/* ── Custom scrollbars ────────────────────────────────────── */
.toc-sidebar::-webkit-scrollbar,
.toc-tree::-webkit-scrollbar,
.content-area::-webkit-scrollbar {
    width: 6px;
}
.toc-sidebar::-webkit-scrollbar-track,
.toc-tree::-webkit-scrollbar-track,
.content-area::-webkit-scrollbar-track {
    background: transparent;
}
.toc-sidebar::-webkit-scrollbar-thumb,
.toc-tree::-webkit-scrollbar-thumb,
.content-area::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 3px;
}
.toc-sidebar::-webkit-scrollbar-thumb:hover,
.toc-tree::-webkit-scrollbar-thumb:hover,
.content-area::-webkit-scrollbar-thumb:hover {
    background: var(--color-neutral);
}

/* ── Search Page ───────────────────────────────────────────── */

.search-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 32px 24px;
}

.search-form {
    margin-bottom: 24px;
}

.search-main-row {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.search-main-row input[type="text"] {
    flex: 1;
    min-width: 300px;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 15px;
    outline: none;
}

.search-main-row input[type="text"]:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
}

.search-main-row button[type="submit"] {
    padding: 10px 24px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}

.search-main-row button[type="submit"]:hover { background: var(--accent); }

.filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 14px;
    background: #fff;
    color: var(--text);
    cursor: pointer;
    white-space: nowrap;
}

.filter-btn:hover { border-color: var(--primary); color: var(--primary); }

.filter-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--primary);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
}

/* Active filter chips */
.active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-top: 8px;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    background: var(--tag-bg);
    color: var(--text);
}

.filter-chip.chip-include {
    background: var(--primary-light);
    color: var(--primary);
}

.filter-chip.chip-exclude {
    background: #fef2f2;
    color: #b91c1c;
}

.filter-chip.chip-option {
    background: #f0fdf4;
    color: #166534;
}

.filter-chip button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    color: inherit;
    opacity: 0.6;
    padding: 0 2px;
    line-height: 1;
}

.filter-chip button:hover { opacity: 1; }

.clear-all-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 12px;
    color: var(--text-muted);
    padding: 3px 6px;
}

.clear-all-btn:hover { color: var(--text); text-decoration: underline; }

.search-stats-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    gap: 12px;
}

.search-stats {
    font-size: 14px;
    color: var(--text-muted);
}

.search-export-btns {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.export-btn {
    padding: 4px 12px;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 12px;
    color: var(--text-muted);
    text-decoration: none;
    font-weight: 500;
}

.export-btn:hover {
    background: #f5f5f5;
    color: var(--text);
    text-decoration: none;
}

/* Domain drawer facet counts & greying */
.domain-facet-count {
    margin-left: auto;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-blue);
    background: var(--color-blue-light);
    padding: 1px 7px;
    border-radius: 10px;
    white-space: nowrap;
}

.domain-no-hits .domain-tristate {
    opacity: 0.4;
}

.domain-no-hits .tristate-icon {
    border-color: #ccc;
}

/* ── Search result cards (v2) ─────────────────────────── */
.result-card {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-blue);
    border-radius: 8px;
    padding: 20px 24px 16px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-card);
    transition: box-shadow 0.15s ease;
}
.result-card:hover {
    box-shadow: var(--shadow-card-hover);
}

/* Eyebrow */
.card-eyebrow {
    font-size: 11px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    margin-bottom: 4px;
    line-height: 1.4;
}
.eyebrow-muni {
    font-weight: 600;
    color: var(--color-accent);
}
.eyebrow-sep {
    color: var(--color-neutral);
    margin: 0 3px;
}
.eyebrow-citation {
    font-weight: 400;
    color: var(--color-neutral);
    letter-spacing: 0.04em;
}

/* Title */
.card-title {
    font-size: 17px;
    font-weight: 600;
    color: var(--color-navy);
    margin: 0 0 14px;
    line-height: 1.3;
}

/* Section labels */
.card-section {
    margin-bottom: 14px;
}
.section-label {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-neutral);
    margin-bottom: 4px;
}

/* Summary */
.card-summary {
    font-size: 14px;
    font-weight: 400;
    color: var(--color-text-primary);
    margin: 0;
    line-height: 1.55;
}

/* Section text: collapsed/expanded with gradient */
.section-text-wrapper {
    position: relative;
    border-left: 3px solid var(--color-blue-light);
    border-radius: 0 6px 6px 0;
    background: var(--color-surface);
    overflow: hidden;
}
.section-text-collapsed,
.section-text-full {
    padding: 12px 16px;
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.65;
    color: var(--color-text-primary);
}
.section-text-collapsed {
    display: block;
}
.section-text-full {
    display: none;
}
.section-text-full p {
    margin: 0 0 10px;
}
.section-text-full p:last-child {
    margin-bottom: 0;
}

/* Subsection indentation — used in body text, search expand, and browse */
p.indent-1 { margin-left: 1.5em; }
p.indent-2 { margin-left: 3em; }
p.indent-3 { margin-left: 4.5em; }

/* Expanded state */
.section-text-wrapper.expanded .section-text-collapsed {
    display: none;
}
.section-text-wrapper.expanded .section-text-full {
    display: block;
}
.section-text-wrapper.expanded .section-text-fade {
    display: none;
}

/* Gradient fade overlay */
.section-text-fade {
    position: absolute;
    bottom: 40px;
    left: 0;
    right: 0;
    height: 40px;
    background: linear-gradient(to bottom, rgba(246,245,242,0), rgba(246,245,242,1));
    pointer-events: none;
}

/* Show more / show less button */
.show-more-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    background: transparent;
    border: none;
    padding: 6px 16px 10px;
    cursor: pointer;
    transition: color 0.15s;
}
.show-more-btn:hover {
    color: #6b7280;
}
.show-more-btn .btn-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-blue);
    transition: color 0.15s;
}
.show-more-btn:hover .btn-label {
    color: var(--color-navy);
}
.show-more-btn .btn-arrow {
    font-size: 16px;
    line-height: 1;
    color: var(--color-blue);
    transition: color 0.15s, transform 0.2s;
    margin-top: -2px;
}
.show-more-btn:hover .btn-arrow {
    color: var(--color-navy);
}
.section-text-wrapper.expanded .btn-arrow {
    transform: rotate(180deg);
}

/* Highlight marks */
.section-text-collapsed mark,
.section-text-full mark,
.result-card mark {
    background: var(--color-blue-light);
    color: inherit;
    padding: 1px 3px;
    border-radius: 3px;
    font-weight: 500;
}

/* Pills */
.card-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 4px;
}
.pill {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 3px;
    white-space: nowrap;
}
.pill-domain {
    background: var(--color-blue-light);
    color: var(--color-navy);
}

/* Card footer */
.card-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-top: 10px;
    margin-top: 10px;
    border-top: 1px solid var(--color-border);
}
.action-link {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-blue);
    text-decoration: none;
}
.action-link:hover {
    text-decoration: underline;
}

/* Loading state */
.section-text-full .loading {
    color: var(--text-muted);
    font-style: italic;
}

/* Legacy tag styles (used by browse page) */
.result-domain-tag, .section-domain-tag {
    font-size: 11px;
    color: var(--color-navy);
    background: var(--color-blue-light);
    padding: 2px 8px;
    border-radius: 3px;
    white-space: nowrap;
    font-weight: 600;
    cursor: default;
}

/* Pagination */
.pagination {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin-top: 24px;
    flex-wrap: wrap;
}

.pagination a, .pagination span {
    padding: 6px 12px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    font-size: 13px;
    color: var(--color-text-primary);
}

.pagination a:hover {
    background: var(--color-surface);
    text-decoration: none;
}

.pagination span.current {
    background: var(--color-blue);
    color: #fff;
    border-color: var(--color-blue);
}

/* ── Browse-scoped Search ─────────────────────────────────── */

/* Landing / search box in content area */
.browse-search-landing {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 300px;
}

.browse-search-box {
    text-align: center;
    max-width: 480px;
    width: 100%;
    padding: 0 24px;
}

.browse-search-prompt {
    font-size: 18px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 12px;
}

.browse-search-row {
    display: flex;
    gap: 8px;
}

.browse-search-row input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 15px;
    outline: none;
}

.browse-search-row input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
}

.browse-search-row button {
    padding: 10px 20px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}

.browse-search-row button:hover { background: var(--accent); }

.browse-search-hint {
    margin-top: 10px;
    font-size: 13px;
    color: var(--text-light);
}

/* Search results (grouped by container) */
.browse-search-results {
    max-width: 75ch;
    margin: 0 auto;
    padding: 24px 40px 60px;
}

.browse-search-results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.browse-search-count {
    font-size: 14px;
    color: var(--text-muted);
}

.browse-back-btn {
    background: none;
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 5px 12px;
    font-size: 13px;
    color: var(--text-muted);
    cursor: pointer;
}

.browse-back-btn:hover { color: var(--text); background: #f5f5f5; }

.browse-search-empty {
    text-align: center;
    color: var(--text-light);
    padding: 40px 20px;
    font-size: 15px;
}

/* Container group */
.browse-group {
    margin-bottom: 20px;
}

.browse-group-header {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 8px 0 6px;
    border-bottom: 2px solid var(--border);
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.browse-group-level {
    font-size: 11px;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.browse-group-citation {
    font-weight: 600;
    font-size: 14px;
    color: var(--text);
}

.browse-group-title {
    font-size: 14px;
    color: var(--text-muted);
}

.browse-group-count {
    margin-left: auto;
    font-size: 12px;
    color: var(--text-light);
    background: var(--tag-bg);
    padding: 1px 8px;
    border-radius: 10px;
}

/* Individual result row */
.browse-result {
    padding: 10px 14px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.1s;
    margin-bottom: 2px;
}

.browse-result:hover {
    background: var(--color-surface);
}

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

.browse-result-citation {
    font-weight: 600;
    font-size: 14px;
    color: var(--color-blue);
    white-space: nowrap;
}

.browse-result-title {
    font-size: 13px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.browse-result-snippet {
    font-size: 13px;
    line-height: 1.5;
    color: var(--text);
}

.browse-result-snippet mark {
    background: var(--color-blue-light);
    color: inherit;
    padding: 0 2px;
    border-radius: 2px;
}

/* ── Utilities ─────────────────────────────────────────────── */

.loading {
    color: var(--text-light);
    font-style: italic;
    padding: 20px;
    text-align: center;
}

/* ── Filter Drawer ───────────────────────────────────────── */

/* Shared overlay */
.drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.25);
    z-index: 200;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}
.drawer-overlay.open { opacity: 1; pointer-events: auto; }

/* Drawer panel */
.filter-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 400px;
    height: 100vh;
    background: #fff;
    z-index: 210;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 20px rgba(0,0,0,0.12);
}
.filter-drawer.open { transform: translateX(0); }

/* Drawer sections */
.drawer-section {
    border-bottom: 1px solid var(--border);
}

.drawer-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    user-select: none;
}

.drawer-section-header:hover { background: #fafafa; }

.drawer-section-meta {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-muted);
}

.drawer-section-body {
    display: none;
    padding-bottom: 8px;
}

.drawer-section-body.open { display: block; }

.drawer-checklist {
    max-height: 240px;
    overflow-y: auto;
}

.muni-county {
    margin-left: auto;
    font-size: 11px;
    color: var(--text-light);
    flex-shrink: 0;
}

.drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.drawer-title { font-size: 16px; font-weight: 600; }
.drawer-close {
    background: none; border: none; font-size: 22px;
    color: var(--text-muted); cursor: pointer; padding: 0 4px; line-height: 1;
}
.drawer-close:hover { color: var(--text); }

.drawer-search {
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
}
.drawer-search input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 5px;
    font-size: 13px;
    outline: none;
}
.drawer-search input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--primary-light);
}

/* County chips inside muni drawer */
.county-chips-drawer {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 8px 16px 10px;
    border-bottom: 1px solid var(--border);
}

.county-chip-sm {
    padding: 3px 9px;
    border: 1px solid var(--border);
    border-radius: 14px;
    font-size: 11px;
    background: #fff;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
}

.county-chip-sm:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.county-chip-sm.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

/* Drawer section labels */
.drawer-section-label {
    padding: 10px 20px 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.drawer-legend {
    padding: 8px 20px;
    font-size: 11px;
    color: var(--text-light);
    border-bottom: 1px solid var(--border);
}

.drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0;
}

.drawer-footer {
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}

.drawer-apply {
    width: 100%;
    padding: 8px 0;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}
.drawer-apply:hover { background: var(--accent); }

.drawer-item {
    padding: 8px 20px;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.1s;
    color: var(--text);
}
.drawer-item:hover { background: #f5f5f5; }

.drawer-clear {
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
    padding-bottom: 10px;
    font-weight: 500;
    color: var(--text-muted);
}

/* Municipality checkboxes */
.drawer-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 20px;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.1s;
}
.drawer-checkbox:hover { background: #f5f5f5; }
.drawer-checkbox input[type="checkbox"] { flex-shrink: 0; }

/* ── Domain Tri-state ────────────────────────────────────── */

.domain-group {
    border-bottom: 1px solid #f0f0f0;
}

.domain-tier1-row {
    display: flex;
    align-items: center;
    padding: 4px 20px 4px 12px;
}

.domain-tier1-expand {
    width: 24px; height: 24px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 10px; color: var(--text-muted);
    cursor: pointer; transition: transform 0.15s; flex-shrink: 0;
}
.domain-tier1-expand.expanded { transform: rotate(90deg); }

.domain-tier2-list { display: none; padding-bottom: 4px; }
.domain-tier2-list.open { display: block; }

.domain-tier2-row {
    display: flex;
    align-items: center;
    padding-left: 36px;
    padding-right: 20px;
}

/* Tri-state toggle element */
.domain-tristate {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 6px;
    font-size: 13px;
    cursor: pointer;
    border-radius: 4px;
    flex: 1;
    transition: background 0.1s;
}
.domain-tristate:hover { background: #f5f5f5; }

.domain-tier1-row .domain-tristate {
    font-size: 14px;
    font-weight: 500;
}

.tristate-icon {
    width: 16px; height: 16px;
    border: 2px solid var(--border);
    border-radius: 3px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700;
    flex-shrink: 0;
    transition: all 0.15s;
}

/* Neutral */
.domain-tristate[data-state="neutral"] .tristate-icon {
    border-color: #ccc; background: #fff;
}
.domain-tristate[data-state="neutral"] .tristate-icon::after { content: ''; }

/* Include */
.domain-tristate[data-state="include"] .tristate-icon {
    border-color: var(--primary); background: var(--primary); color: #fff;
}
.domain-tristate[data-state="include"] .tristate-icon::after { content: '\2713'; }
.domain-tristate[data-state="include"] { color: var(--primary); font-weight: 600; }

/* Exclude */
.domain-tristate[data-state="exclude"] .tristate-icon {
    border-color: #dc2626; background: #dc2626; color: #fff;
}
.domain-tristate[data-state="exclude"] .tristate-icon::after { content: '\2715'; }
.domain-tristate[data-state="exclude"] { color: #dc2626; font-weight: 600; }

/* ── HTMX Transitions ─────────────────────────────────────── */
.htmx-settling {
    opacity: 0;
    transform: translateY(4px);
}
.htmx-added {
    transition: opacity 200ms ease, transform 200ms ease;
    opacity: 1;
    transform: translateY(0);
}

/* ── Skeleton Loading ─────────────────────────────────────── */
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
.skeleton {
    background: linear-gradient(90deg, var(--color-border) 25%, #eae8e4 50%, var(--color-border) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    border-radius: 4px;
}

/* ── Back to Top Button ──────────────────────────────────── */
.back-to-top {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-navy);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 50;
}
.back-to-top.visible {
    opacity: 1;
    visibility: visible;
}
.back-to-top:hover {
    background: var(--color-blue);
}

/* ── Responsive ──────────────────────────────────────────── */

@media (max-width: 768px) {
    .browse-layout { flex-direction: column; }
    .toc-sidebar {
        width: 100%;
        min-width: unset;
        max-height: 40vh;
        border-right: none;
        border-bottom: 1px solid var(--border);
    }
    .filter-drawer { width: 85vw; }
    .home-how { flex-direction: column; gap: 16px; }
    .home-how-item { text-align: center; }
}

/* ==========================================================================
   Subject / Domain browse (real routes: /browse, /subject/<slug>, /domain/<code>)
   Built on the locked tokens — DM Sans UI, Newsreader body, navy->brick palette.
   ========================================================================== */
.browse-page,
.detail-page { max-width: 1080px; margin: 0 auto; padding: 32px 24px 72px; }

.browse-hero { margin-bottom: 32px; }
.browse-hero-title { font-family: var(--font-ui); font-weight: 600; font-size: 2rem;
    color: var(--color-navy); margin: 0 0 8px; }
.browse-hero-tagline { font-family: var(--font-body); font-size: 1.12rem; line-height: 1.6;
    color: var(--color-text-primary); max-width: 68ch; margin: 0; }
.browse-hero-tagline strong { color: var(--color-accent); font-weight: 500; }

.browse-section-head { display: flex; align-items: baseline; gap: 12px;
    border-bottom: 2px solid var(--color-navy); padding-bottom: 8px; margin: 40px 0 20px; }
.browse-section-title { font-family: var(--font-ui); font-weight: 600; font-size: 1.35rem;
    color: var(--color-navy); margin: 0; }
.browse-section-meta { font-family: var(--font-ui); font-size: 0.82rem; color: var(--color-neutral); }

/* filter box (HTMX lateral swap target lives just below it) */
.filter-box { margin-bottom: 20px; }
.filter-input { width: 100%; box-sizing: border-box; font-family: var(--font-ui); font-size: 1rem;
    padding: 12px 16px; border: 1.5px solid var(--color-border); border-radius: 8px;
    background: var(--color-card); color: var(--color-text-primary); }
.filter-input:focus { outline: none; border-color: var(--color-blue);
    box-shadow: 0 0 0 3px var(--color-blue-light); }
.filter-hint { display: block; font-family: var(--font-ui); font-size: 0.78rem;
    color: var(--color-neutral); margin-top: 6px; }

/* subject hierarchy tree */
.subject-group { margin-bottom: 28px; }
.subject-group-head { display: flex; align-items: center; gap: 10px; font-family: var(--font-ui);
    font-weight: 600; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--color-neutral); margin: 0 0 12px; }
.subject-group-count { font-weight: 500; color: var(--color-accent); }
.subject-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }

.subject-card { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px;
    background: var(--color-card); border: 1px solid var(--color-border); border-left: 3px solid var(--color-blue-light);
    border-radius: 8px; text-decoration: none; box-shadow: var(--shadow-card);
    transition: box-shadow 0.15s ease, border-left-color 0.15s ease, transform 0.15s ease; }
.subject-card:hover { box-shadow: var(--shadow-card-hover); border-left-color: var(--color-accent);
    transform: translateY(-1px); }
.subject-card-label { font-family: var(--font-ui); font-weight: 600; font-size: 0.98rem; color: var(--color-navy); }
.subject-card-note { font-family: var(--font-body); font-size: 0.9rem; line-height: 1.45; color: var(--color-neutral); }
.subject-card-count { font-family: var(--font-ui); font-size: 0.76rem; color: var(--color-accent); margin-top: 2px; }

.tree-empty { font-family: var(--font-body); font-size: 1rem; color: var(--color-neutral); padding: 20px 0; }

/* domain grid (secondary entry + subdomains) */
.domain-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.domain-card { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px;
    background: var(--color-navy); border-radius: 8px; text-decoration: none;
    box-shadow: var(--shadow-card); transition: transform 0.15s ease, box-shadow 0.15s ease; }
.domain-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover); }
.domain-card-label { font-family: var(--font-ui); font-weight: 600; font-size: 1rem; color: #fff; }
.domain-card-note { font-family: var(--font-body); font-size: 0.86rem; line-height: 1.4; color: var(--color-blue-light); }
.domain-card-count { font-family: var(--font-ui); font-size: 0.74rem; color: var(--color-blue-light); opacity: 0.85; }
.domain-card-sm { background: var(--color-card); border: 1px solid var(--color-border); border-top: 3px solid var(--color-blue); }
.domain-card-sm .domain-card-label { color: var(--color-navy); }
.domain-card-sm .domain-card-note { color: var(--color-neutral); }

.browse-secondary { margin-top: 12px; }

/* ---- detail pages (/subject, /domain) ---- */
.breadcrumb { font-family: var(--font-ui); font-size: 0.85rem; color: var(--color-neutral); margin-bottom: 20px; }
.breadcrumb a { color: var(--color-accent); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.crumb-sep { margin: 0 8px; color: var(--color-border); }

.detail-head { border-bottom: 1px solid var(--color-border); padding-bottom: 22px; margin-bottom: 26px; }
.detail-kicker { font-family: var(--font-ui); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--color-accent); margin-bottom: 8px; }
.detail-title { font-family: var(--font-ui); font-weight: 600; font-size: 2rem; color: var(--color-navy); margin: 0 0 14px; }
.scope-note { font-family: var(--font-body); font-size: 1.14rem; line-height: 1.65;
    color: var(--color-text-primary); max-width: 70ch; margin: 0 0 16px; }
.detail-meta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.count-badge { font-family: var(--font-ui); font-weight: 600; font-size: 0.82rem; color: var(--color-navy);
    background: var(--color-blue-light); padding: 4px 12px; border-radius: 20px; }
.grounding { font-family: var(--font-ui); font-size: 0.8rem; color: var(--color-neutral); font-style: italic; }
.detail-subhead { font-family: var(--font-ui); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--color-neutral); margin: 8px 0 14px; }
.subdomain-block { margin-bottom: 32px; }

/* ---- section card (reused component) ---- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.section-card { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px;
    background: var(--color-card); border: 1px solid var(--color-border); border-radius: 8px;
    box-shadow: var(--shadow-card); transition: box-shadow 0.15s ease, transform 0.15s ease; }
.section-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-1px); }
.section-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.section-card-muni { font-family: var(--font-ui); font-weight: 600; font-size: 0.8rem;
    color: var(--color-accent); text-decoration: none; }
.section-card-muni:hover { text-decoration: underline; }
.section-card-cite { font-family: var(--font-ui); font-size: 0.76rem; color: var(--color-neutral); }
.section-card-type { font-family: var(--font-ui); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--color-neutral); background: var(--color-surface); padding: 2px 7px; border-radius: 4px; }
.section-card-title { font-family: var(--font-ui); font-weight: 500; font-size: 1rem; line-height: 1.35;
    color: var(--color-navy); text-decoration: none; }
.section-card-title:hover { color: var(--color-blue); text-decoration: underline; }
.section-card-summary { font-family: var(--font-body); font-size: 0.92rem; line-height: 1.5;
    color: var(--color-neutral); margin: 0;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ---- pagination ---- */
.pagination { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 36px;
    font-family: var(--font-ui); font-size: 0.9rem; }
.pagination a { color: var(--color-accent); text-decoration: none; font-weight: 600; }
.pagination a:hover { text-decoration: underline; }
.pg-disabled { color: var(--color-border); }
.pg-pos { color: var(--color-neutral); }

/* "in development" tag on the landing MCP section */
.soon-tag { font-family: var(--font-ui); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--color-accent); background: var(--color-blue-light);
    padding: 3px 9px; border-radius: 20px; vertical-align: middle; margin-left: 8px; }

/* Download link for the MCP onboarding / connection guide PDF */
.mcp-doc-link { display: inline-flex; align-items: center; gap: 9px; margin-top: 22px;
    font-family: var(--font-ui); font-size: 0.9rem; font-weight: 600; color: var(--color-accent);
    text-decoration: none; padding: 10px 18px; border: 1.5px solid var(--color-accent);
    border-radius: 8px; transition: background 0.15s ease, color 0.15s ease; }
.mcp-doc-link:hover { background: var(--color-accent); color: #fff; }
.mcp-doc-link svg { flex: 0 0 auto; }

@media (max-width: 640px) {
    .browse-page, .detail-page { padding: 20px 16px 56px; }
    .subject-cards, .card-grid, .domain-grid { grid-template-columns: 1fr; }
    .detail-title { font-size: 1.5rem; }
}

/* ==========================================================================
   Browse tabs (subject | domain), domain tree, and the subject/domain results
   (single-column cards + in-page filter + inline section viewer).
   ========================================================================== */
.browse-tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--color-border); margin-bottom: 24px; }
.browse-tab { font-family: var(--font-ui); font-weight: 600; font-size: 1rem; color: var(--color-neutral);
    background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -2px;
    padding: 10px 18px; cursor: pointer; }
.browse-tab:hover { color: var(--color-navy); }
.browse-tab.is-active { color: var(--color-navy); border-bottom-color: var(--color-accent); }
.browse-panel[hidden] { display: none; }

/* domain tree */
.domain-tree-hint { font-family: var(--font-ui); font-size: 0.85rem; color: var(--color-neutral); margin: 0 0 16px; }
.domain-tree { display: flex; flex-direction: column; gap: 8px; }
.domain-node { background: var(--color-card); border: 1px solid var(--color-border); border-radius: 8px;
    box-shadow: var(--shadow-card); overflow: hidden; }
.domain-node-head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 14px 18px; cursor: pointer; list-style: none; font-family: var(--font-ui); }
.domain-node-head::-webkit-details-marker { display: none; }
.domain-node-head::before { content: "\25B8"; color: var(--color-accent); font-size: 0.85rem;
    margin-right: 4px; transition: transform 0.15s ease; display: inline-block; }
.domain-node[open] > .domain-node-head::before { transform: rotate(90deg); }
.domain-node-label { flex: 1; font-weight: 600; font-size: 1.05rem; color: var(--color-navy); }
.domain-node-count { font-size: 0.78rem; color: var(--color-neutral); }
.domain-children { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px;
    padding: 4px 18px 18px 40px; }
.domain-child { display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 9px 12px; border-radius: 6px; text-decoration: none; background: var(--color-surface);
    font-family: var(--font-ui); font-size: 0.9rem; color: var(--color-navy);
    border-left: 3px solid var(--color-blue-light); transition: border-left-color 0.15s ease, background 0.15s ease; }
.domain-child:hover { border-left-color: var(--color-accent); background: #fff; }
.domain-child-count { font-size: 0.74rem; color: var(--color-neutral); }
.domain-child-all { background: var(--color-navy); color: #fff; border-left-color: var(--color-accent);
    font-weight: 600; grid-column: 1 / -1; }
.domain-child-all:hover { background: var(--color-blue); }

/* in-page filter bar (subject/domain results) */
.result-filter { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 18px; }
.filter-select { font-family: var(--font-ui); font-size: 0.9rem; padding: 9px 12px; border-radius: 8px;
    border: 1.5px solid var(--color-border); background: var(--color-card); color: var(--color-text-primary); cursor: pointer; }
.filter-select:focus { outline: none; border-color: var(--color-blue); box-shadow: 0 0 0 3px var(--color-blue-light); }
.filter-input-inline { flex: 1; min-width: 220px; font-size: 0.9rem; padding: 9px 14px; }

/* results list */
.result-count { font-family: var(--font-ui); font-size: 0.82rem; color: var(--color-neutral); margin-bottom: 12px; }
.result-filtered { color: var(--color-accent); font-weight: 600; }
.result-list { display: flex; flex-direction: column; gap: 10px; max-width: 820px; }

/* single-column result card with an inline "opening section viewer" */
.result-section { background: var(--color-card); border: 1px solid var(--color-border); border-radius: 8px;
    box-shadow: var(--shadow-card); overflow: hidden; transition: box-shadow 0.15s ease; }
.result-section:hover { box-shadow: var(--shadow-card-hover); }
.result-section.open { border-color: var(--color-blue-light); }
.result-toggle { display: block; width: 100%; text-align: left; background: none; border: none; cursor: pointer;
    padding: 16px 18px; font-family: var(--font-ui); }
.result-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 5px; }
.result-muni { font-weight: 600; font-size: 0.82rem; color: var(--color-accent); }
.result-cite { font-size: 0.78rem; color: var(--color-neutral); }
.result-type { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-neutral);
    background: var(--color-surface); padding: 2px 7px; border-radius: 4px; }
.result-title { display: block; font-weight: 500; font-size: 1.05rem; line-height: 1.35; color: var(--color-navy); }
.result-summary { display: block; font-family: var(--font-body); font-size: 0.94rem; line-height: 1.5;
    color: var(--color-neutral); margin-top: 5px; }
.result-hint { display: inline-block; font-size: 0.8rem; font-weight: 600; color: var(--color-accent); margin-top: 8px; }
.result-hint::after { content: "Read section \2193"; }
.result-section.open .result-hint::after { content: "Hide \2191"; }
.result-toggle:hover .result-title { color: var(--color-blue); }

.result-reveal { display: none; padding: 0 18px 16px; border-top: 1px solid var(--color-border); }
.result-section.open .result-reveal { display: block; }
.result-body { font-family: var(--font-body); font-size: 1rem; line-height: 1.62; color: var(--color-text-primary);
    padding-top: 14px; }
.result-body p { margin: 0 0 0.7em; }
.result-body .indent-1 { margin-left: 1.6em; }
.result-body .indent-2 { margin-left: 3.2em; }
.result-body .indent-3 { margin-left: 4.8em; }
.result-body .body-table { border-collapse: collapse; width: 100%; margin: 0.8em 0; font-family: var(--font-ui); font-size: 0.9rem; }
.result-body .body-table td { border: 1px solid var(--color-border); padding: 5px 9px; vertical-align: top; }
.result-foot { margin-top: 12px; }
.result-fullcode { font-family: var(--font-ui); font-weight: 600; font-size: 0.86rem;
    color: var(--color-accent); text-decoration: none; }
.result-fullcode:hover { text-decoration: underline; }

@media (max-width: 640px) {
    .domain-children { grid-template-columns: 1fr; padding-left: 24px; }
    .result-filter { flex-direction: column; }
    .filter-input-inline { min-width: 0; }
}

/* ==========================================================================
   Homepage revamp — hero network graphic, two-way browse cards, domain chip.
   ========================================================================== */
.hero-grid { max-width: 980px; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 44px;
    align-items: center; text-align: left; }
.hero-grid .hero-tagline { margin-bottom: 28px; }
.hero-grid .hero-actions { justify-content: flex-start; }
.hero-visual { display: flex; justify-content: center; }
.hero-net { width: 100%; max-width: 420px; height: auto; }
.hero-net .net-edges line { stroke: rgba(193,213,235,0.30); stroke-width: 1; }
.hero-net .node { fill: var(--color-blue-light); opacity: 0.85; }
.hero-net .node-hub { fill: #ffffff; }
.hero-net .node-accent { fill: #cf8f88; }
.hero-net .node-pulse { animation: netpulse 3.2s ease-in-out infinite; }
@keyframes netpulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }

/* two-way browse (Topic Browser | Domain Browser) */
.browse-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 22px; }
.browse-mode { display: flex; flex-direction: column; gap: 12px; padding: 26px; border-radius: 12px;
    text-decoration: none; background: var(--color-card); border: 1px solid var(--color-border);
    box-shadow: var(--shadow-card); transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease; }
.browse-mode:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }
.browse-mode-topic { border-top: 4px solid var(--color-blue); }
.browse-mode-topic:hover { border-color: var(--color-blue); }
.browse-mode-domain { border-top: 4px solid var(--color-accent); }
.browse-mode-domain:hover { border-color: var(--color-accent); }
.browse-mode-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px;
    border-radius: 12px; background: var(--color-surface); }
.browse-mode-topic .browse-mode-icon { color: var(--color-blue); }
.browse-mode-domain .browse-mode-icon { color: var(--color-accent); }
.browse-mode-title { font-family: var(--font-ui); font-weight: 600; font-size: 1.25rem; color: var(--color-navy); margin: 0; }
.browse-mode-desc { font-family: var(--font-body); font-size: 1rem; line-height: 1.55; color: var(--color-text-primary); margin: 0; }
.browse-mode-desc strong { color: var(--color-navy); font-weight: 600; }
.browse-mode-eg { font-family: var(--font-ui); font-size: 0.8rem; color: var(--color-neutral); }
.browse-mode-cta { font-family: var(--font-ui); font-weight: 600; font-size: 0.92rem; margin-top: auto; }
.browse-mode-topic .browse-mode-cta { color: var(--color-blue); }
.browse-mode-domain .browse-mode-cta { color: var(--color-accent); }

/* domain ("parent") chip on result cards */
.result-domain { font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em;
    color: var(--color-blue); background: var(--color-blue-light); padding: 2px 8px; border-radius: 4px; }

@media (max-width: 760px) {
    .hero-grid { grid-template-columns: 1fr; text-align: center; max-width: 560px; }
    .hero-grid .hero-actions { justify-content: center; }
    .hero-visual { order: -1; max-width: 300px; margin: 0 auto 8px; }
    .browse-modes { grid-template-columns: 1fr; }
}