:root {
    --kd-radius: 12px;
    --kd-bg: #f6f7f9;
    --kd-surface: #fff;
    --kd-border: #dce0e5;
    --kd-text: #23272e;
    --kd-muted: #59616d;
    --kd-icon-bg: #f0f2f5;
    --kd-hover: #f8f9fb;
    --kd-accent: #b82a20;
    --kd-focus: #b82a20;
}
/* BookStack fills native icons; Lucide uses outlines. Preserve child shape fills. */
.svg-icon[stroke="currentColor"] { fill: none; }
html.dark-mode {
    --kd-bg: #17191d;
    --kd-surface: #22252a;
    --kd-border: #3a3e45;
    --kd-text: #f0f1f3;
    --kd-muted: #b2b8c2;
    --kd-icon-bg: #2e3239;
    --kd-hover: #292d33;
    --kd-accent: #ffaaa0;
    --kd-focus: #ffaaa0;
}
.kolumb-header {
    grid-template-columns: auto minmax(180px, 360px) auto auto;
    grid-template-areas: "brand search nav tools";
    align-items: center;
    gap: 24px;
    border-bottom: 2px solid #ed2b1b;
    min-height: 88px;
}
#header .kolumb-brand { grid-area: brand; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 0; }
#header .kolumb-brand .logo-image { width: 150px; height: 38px; max-height: none; object-fit: contain; }
.kolumb-brand-caption { color: #fff; font-size: 11px; line-height: 1.4; font-weight: 600; letter-spacing: 1.6px; padding-left: 2px; }
.kolumb-header-search { grid-area: search; }
.kolumb-header .header-links { grid-area: nav; justify-self: end; }
.kolumb-header-tools { grid-area: tools; display: flex; align-items: center; gap: 8px; }
.kolumb-theme-form { margin: 0; }
#header .kolumb-theme-button, #header .mobile-menu-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.2);
    border-radius: var(--kd-radius); color: #fff; background: transparent;
    cursor: pointer; padding: 0;
}
#header .kolumb-theme-button:hover, #header .mobile-menu-toggle:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.4); }
#header .kolumb-theme-button .svg-icon, #header .mobile-menu-toggle .svg-icon { width: 20px; height: 20px; margin: 0; }
.kolumb-theme-button .kolumb-theme-label { display: none; }
.kolumb-header a:focus-visible, .kolumb-header button:focus-visible { outline: 2px solid white; outline-offset: 3px; }
.kolumb-portal { background: var(--kd-bg); color: var(--kd-text); }
.kolumb-portal-wrap { max-width: 1120px; margin: 0 auto; padding: 56px 32px 36px; }
.kolumb-portal-hero { max-width: 760px; margin-bottom: 48px; }
.kolumb-eyebrow { color: var(--kd-muted); font-size: 13px; font-weight: 600; margin: 0 0 16px; }
.kolumb-portal h1 { color: var(--kd-text); font-size: clamp(30px, 3.6vw, 44px); line-height: 1.18; font-weight: 700; letter-spacing: -.9px; margin: 0 0 16px; }
.kolumb-portal-intro { color: var(--kd-muted); font-size: 17px; line-height: 1.65; max-width: 650px; margin: 0 0 24px; }
.kolumb-portal-search { display: flex; align-items: center; gap: 12px; background: var(--kd-surface); border: 1px solid var(--kd-border); border-radius: var(--kd-radius); padding: 8px 8px 8px 16px; }
.kolumb-portal-search > span { color: var(--kd-muted); display: flex; }
.kolumb-portal-search .svg-icon { width: 21px; height: 21px; margin: 0; }
.kolumb-portal .kolumb-portal-search input[type="search"] { flex: 1; min-width: 0; width: 100%; margin: 0; border: none; background: transparent; color: var(--kd-text); padding: 10px 0; box-shadow: none; font: inherit; }
.kolumb-portal-search input::placeholder { color: var(--kd-muted); opacity: 1; }
.kolumb-portal-search:focus-within { outline: 2px solid var(--kd-focus); outline-offset: 2px; }
.kolumb-portal-search input:focus { outline: none; }
.kolumb-portal-search button { border: none; border-radius: var(--kd-radius); background: #a9261d; color: #fff; padding: 12px 20px; min-height: 44px; font-weight: 600; cursor: pointer; }
.kolumb-portal-search button:hover { background: #8e211a; }
.kolumb-section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.kolumb-section-heading h2 { font-size: 21px; font-weight: 600; color: var(--kd-text); margin: 0; }
.kolumb-section-heading p { font-size: 13px; color: var(--kd-muted); margin: 0; }
.kolumb-category-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.kolumb-category-card { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 24px; border: 1px solid var(--kd-border); border-radius: var(--kd-radius); background: var(--kd-surface); color: var(--kd-text); text-decoration: none; transition: background-color .15s, border-color .15s, box-shadow .15s; }
.kolumb-category-card:hover { background: var(--kd-hover); color: var(--kd-text); border-color: var(--kd-muted); box-shadow: 0 4px 14px rgba(0,0,0,.08); text-decoration: none; }
.kolumb-category-icon { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: var(--kd-radius); background: var(--kd-icon-bg); color: var(--kd-text); }
.kolumb-category-icon .svg-icon { width: 23px; height: 23px; margin: 0; }
.kolumb-category-card h3 { font-size: 18px; line-height: 1.4; color: inherit; font-weight: 600; margin: 0; }
.kolumb-category-card p { font-size: 14px; line-height: 1.6; color: var(--kd-muted); margin: 0 0 4px; }
.kolumb-category-footer { margin-top: auto; display: flex; align-items: center; justify-content: space-between; width: 100%; color: var(--kd-muted); font-size: 12px; padding-top: 12px; border-top: 1px solid var(--kd-border); }
.kolumb-card-arrow { display: flex; color: var(--kd-text); }
.kolumb-card-arrow .svg-icon { width: 18px; height: 18px; margin: 0; }
.kolumb-category-card:focus-visible, .kolumb-portal button:focus-visible, .kolumb-portal-note a:focus-visible, .kolumb-staff-note a:focus-visible { outline: 2px solid var(--kd-focus); outline-offset: 4px; }
.kolumb-additional { margin-top: 36px; }
.kolumb-portal-note { display: flex; align-items: flex-start; gap: 12px; color: var(--kd-muted); padding-top: 28px; margin-top: 32px; border-top: 1px solid var(--kd-border); }
.kolumb-portal-note p, .kolumb-staff-note { font-size: 13px; line-height: 1.6; margin: 0; }
.kolumb-portal-note .svg-icon { width: 18px; height: 18px; margin: 2px 0 0; }
.kolumb-staff-note { color: var(--kd-muted); margin-top: 12px; }
.kolumb-staff-note a { color: var(--kd-accent); text-decoration: underline; text-underline-offset: 3px; }
.kolumb-entity-icon { color: var(--kd-muted) !important; }
/* Native compact lists replace icons with a 4px type stripe. Show category icons. */
.entity-list-item > .kolumb-entity-icon {
    width: 28px !important; min-width: 28px; flex: 0 0 28px; height: auto;
    align-self: flex-start; align-items: flex-start; justify-content: flex-start;
    margin-inline-end: 12px; padding: 2px 0; border: 0 !important; border-radius: 0;
    background: transparent !important;
}
.entity-list-item > .kolumb-entity-icon > .svg-icon { display: block !important; width: 20px; height: 20px; margin: 0; }
.entity-list-item > .kolumb-entity-icon::after { display: none !important; }
#book-tree .entity-list-item > .kolumb-entity-icon { width: 20px !important; min-width: 20px; flex-basis: 20px; margin-inline-end: 8px; }
#book-tree .entity-list-item > .kolumb-entity-icon > .svg-icon { width: 16px; height: 16px; }
.kolumb-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
/* Fallback for routes whose action block is embedded outside view-blocks. */
body:has(#header[data-kolumb-reader="true"]) .actions { display: none; }
@media (min-width: 1001px) { #header .mobile-menu-toggle { display: none; } }
@media (max-width: 1200px) and (min-width: 1001px) { .kolumb-header { gap: 12px; padding-left: 24px; padding-right: 24px; } .kolumb-header .header-links .links a { padding-left: 8px; padding-right: 8px; } }
@media (max-width: 1000px) {
    .kolumb-header { grid-template-columns: 1fr auto; grid-template-areas: "brand tools" "nav nav"; gap: 0 16px; padding: 0 24px; min-height: 80px; }
    .kolumb-header .header-links { justify-self: stretch; }
    .kolumb-header-search { display: none; }
    .kolumb-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kolumb-portal-wrap { padding-top: 40px; }
}
@media (max-width: 600px) {
    .kolumb-header { padding: 0 16px; }
    #header .kolumb-brand .logo-image { width: 135px; height: 34px; }
    .kolumb-brand-caption { font-size: 10px; letter-spacing: 1.3px; }
    .kolumb-portal-wrap { padding: 32px 20px; }
    .kolumb-portal-hero { margin-bottom: 32px; }
    .kolumb-portal-intro { font-size: 16px; }
    .kolumb-section-heading { display: block; }
    .kolumb-section-heading p { margin-top: 8px; }
    .kolumb-category-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .kolumb-category-card { padding: 20px; }
    .kolumb-portal-search { gap: 8px; padding-left: 12px; }
    .kolumb-portal-search input { font-size: 16px; }
    .kolumb-portal-search button { padding-left: 14px; padding-right: 14px; }
}
@media (prefers-reduced-motion: reduce) { .kolumb-category-card { transition: none; } }

/* Shared portal presentation. Screen-only rules preserve native print/export CSS.
 * Keep BookStack layouts, search refs, permissions and preference handling intact. */
@media screen {
    html:root { background: var(--kd-bg); }
    html:root body {
        background: var(--kd-bg); color: var(--kd-text);
        --color-link: var(--kd-accent);
        --color-primary-light: var(--kd-icon-bg);
        --color-book: var(--kd-muted);
        --color-chapter: var(--kd-muted);
        --color-page: var(--kd-muted);
        --color-bookshelf: var(--kd-muted);
    }
    html:root .card, html:root .grid-card, html:root .dropdown-menu {
        background-color: var(--kd-surface); color: var(--kd-text);
        border: 1px solid var(--kd-border); border-radius: var(--kd-radius);
        box-shadow: none;
    }
    html:root .text-muted { color: var(--kd-muted) !important; }
    html:root .text-dark { color: var(--kd-text) !important; }
    html:root .tri-layout :is(h1, h2, h3, h4), html:root #search-system :is(h1, h4, h5, h6) { color: var(--kd-text); }
    html:root .tri-layout main.content-wrap.card {
        padding: 32px; border-radius: var(--kd-radius);
    }
    .tri-layout main h1, #search-system h1 {
        font-size: clamp(30px, 3.6vw, 44px); line-height: 1.18;
        font-weight: 700; letter-spacing: -.9px; margin: 0 0 24px;
    }
    .tri-layout .page-content { font-size: 16px; line-height: 1.75; }
    .tri-layout .page-content h2 { font-size: 25px; line-height: 1.35; font-weight: 600; }
    .tri-layout .page-content h3 { font-size: 20px; line-height: 1.4; font-weight: 600; }
    .tri-layout .page-content li + li { margin-top: 6px; }
    html:root .tri-layout .page-content :is(blockquote, pre, details) {
        background: var(--kd-icon-bg); color: var(--kd-text);
        border-color: var(--kd-border); border-radius: var(--kd-radius);
    }
    html:root .tri-layout .page-content blockquote { border-inline-start: 3px solid var(--kd-accent); }
    html:root .tri-layout .page-content :is(code, details > summary, th) {
        background-color: var(--kd-icon-bg); color: var(--kd-text);
    }
    html:root .tri-layout .page-content :is(td, th, details[open] > summary) { border-color: var(--kd-border); }
    html:root .tri-layout .page-content hr { border-color: var(--kd-border); }
    /* Category headers sit on the portal background; each article is its own tile. */
    html:root .tri-layout main.card:has(.chapter-content, .book-content) {
        background: transparent; border: 0; padding: 16px 0 0; min-height: 0;
    }
    :is(.chapter-content, .book-content) > .text-muted { font-size: 17px; line-height: 1.65; margin-bottom: 24px; }
    .chapter-content > .entity-list {
        display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 0;
    }
    .chapter-content > .entity-list > .entity-list-item,
    .book-content > .entity-list > .entity-list-item,
    :is(#search-system, .tri-layout .search-results) .book-contents > .entity-list > .entity-list-item {
        display: flex; align-items: flex-start; gap: 16px; padding: 24px;
        background: var(--kd-surface); color: var(--kd-text);
        border: 1px solid var(--kd-border); border-radius: var(--kd-radius);
        margin: 0; text-decoration: none;
        transition: background-color .15s, border-color .15s, box-shadow .15s;
    }
    .chapter-content > .entity-list > .entity-list-item { flex-direction: column; }
    .chapter-content > .entity-list > .entity-list-item:hover,
    .book-content > .entity-list > .entity-list-item:hover,
    :is(#search-system, .tri-layout .search-results) .book-contents > .entity-list > .entity-list-item:hover {
        background: var(--kd-hover); color: var(--kd-text);
        border-color: var(--kd-muted); box-shadow: 0 4px 14px rgba(0,0,0,.08);
    }
    .chapter-content > .entity-list > .entity-list-item > .kolumb-entity-icon,
    .book-content > .entity-list > .entity-list-item > .kolumb-entity-icon,
    :is(#search-system, .tri-layout .search-results) .book-contents > .entity-list > .entity-list-item > .kolumb-entity-icon {
        width: 44px !important; min-width: 44px; height: 44px; flex: 0 0 44px;
        padding: 0; margin: 0; align-items: center; justify-content: center;
        background: var(--kd-icon-bg) !important; border-radius: var(--kd-radius);
        color: var(--kd-text) !important;
    }
    .chapter-content > .entity-list > .entity-list-item > .kolumb-entity-icon > .svg-icon,
    .book-content > .entity-list > .entity-list-item > .kolumb-entity-icon > .svg-icon,
    :is(#search-system, .tri-layout .search-results) .book-contents > .entity-list > .entity-list-item > .kolumb-entity-icon > .svg-icon { width: 23px; height: 23px; }
    :is(.chapter-content, .book-content) .entity-list-item .content, :is(#search-system, .tri-layout .search-results) .entity-list-item .content { min-width: 0; width: 100%; }
    :is(.chapter-content, .book-content) .entity-list-item h4, :is(#search-system, .tri-layout .search-results) .entity-list-item h4 {
        font-size: 18px; font-weight: 600; line-height: 1.4; margin: 0 0 12px;
    }
    :is(.chapter-content, .book-content) .entity-list-item p, :is(#search-system, .tri-layout .search-results) .entity-list-item p { font-size: 14px; line-height: 1.6; }
    /* The book index retains native expandable chapters as connected card footers. */
    .book-content > .entity-list { display: flex; flex-direction: column; gap: 16px; margin: 0; }
    .book-content > .entity-list > .entity-list-item.has-children { border-bottom: 0; border-radius: var(--kd-radius) var(--kd-radius) 0 0; }
    .book-content > .entity-list > .chapter-expansion {
        padding: 0 24px 16px; margin-top: -16px; background: var(--kd-surface);
        border: 1px solid var(--kd-border); border-top: 0;
        border-radius: 0 0 var(--kd-radius) var(--kd-radius);
    }
    .book-content > .entity-list > .chapter-expansion > .icon { display: none; }
    .book-content .chapter-expansion .chapter-contents-toggle { padding: 12px; border-radius: var(--kd-radius); }
    html:root .book-content .chapter-expansion .chapter-contents-toggle:hover { background: var(--kd-hover); }
    .book-content .entity-list-item-children { padding: 16px 0 0; }
    .book-content .inset-list .entity-list-item { padding: 12px 0; border-top: 1px solid var(--kd-border); }
    .book-content .inset-list .entity-list-item h4 { font-size: 16px; }
    /* Native sidebar opacity otherwise dims text below the shared palette contrast. */
    html:root :is(.tri-layout-left-contents, .tri-layout-right-contents) > * { opacity: 1; }
    html:root :is(#book-tree, .tri-layout-right-contents > .mb-xl, #search-system > .grid > div:first-child > div) {
        background: var(--kd-surface); border: 1px solid var(--kd-border);
        border-radius: var(--kd-radius); padding: 16px;
    }
    .tri-layout :is(.tri-layout-left-contents, .tri-layout-right-contents) h5 {
        font-size: 14px; line-height: 1.4; font-weight: 600; color: var(--kd-muted); margin: 0 0 16px;
    }
    #book-tree .entity-list-item { background-clip: border-box; border-radius: 8px; }
    html:root #book-tree .entity-list-item.selected { background: var(--kd-icon-bg); color: var(--kd-text); }
    html:root #book-tree :is(.entity-list-item:hover, .chapter-contents-toggle:hover) { background-color: var(--kd-hover); }
    #book-tree .entity-list-item > .kolumb-entity-icon { align-self: center; padding: 0; opacity: 1; }
    #book-tree .chapter-contents-toggle { color: var(--kd-muted); }
    html:root .sidebar-page-nav-bullet { box-shadow: 0 0 0 6px var(--kd-bg); }
    html:root .scroll-away-from-top::before, html:root .scroll-away-from-bottom::after { color: var(--kd-bg); }
    html:root .breadcrumbs .icon { background-color: var(--kd-icon-bg); }
    html:root .breadcrumbs { opacity: 1; }
    html:root #sibling-navigation { opacity: 1; padding: 0; gap: 16px; align-items: stretch; }
    html:root #sibling-navigation a {
        height: 100%; padding: 8px; background: var(--kd-surface);
        border: 1px solid var(--kd-border) !important; border-radius: var(--kd-radius);
    }
    html:root #sibling-navigation a:hover { background: var(--kd-hover); border-color: var(--kd-muted) !important; }
    html:root .tri-layout-mobile-tabs { background: var(--kd-surface); border-color: var(--kd-border); }
    /* Search uses the existing forms/results and native advanced filter controls. */
    #search-system .content-wrap.card { padding: 16px 0; background: transparent; border: 0; min-height: 0; }
    :is(#search-system, .tri-layout .search-results) .book-contents > .entity-list { display: grid; gap: 16px; margin: 0; }
    :is(#search-system, .tri-layout .search-results) .entity-item-snippet > :is(.text-book, .text-chapter, .text-bookshelf) { font-size: 12px; }
    :is(#search-system, .tri-layout .search-results) .entity-item-snippet p { margin-top: 8px; }
    .tri-layout .search-results h3 { font-size: 21px; font-weight: 600; }
    html:root :is(.tri-layout #content, #search-system, .container.very-small) :is(input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="submit"]), select, textarea):not(.invalid, .neg, .valid, .pos, [disabled], [readonly]) {
        background-color: var(--kd-surface); color: var(--kd-text);
        border-color: var(--kd-border); border-radius: var(--kd-radius);
    }
    :is(.tri-layout #content, #search-system) input::placeholder { color: var(--kd-muted); opacity: 1; }
    :is(.tri-layout, #search-system) :is(a, button, input, select, textarea):focus-visible {
        outline: 2px solid var(--kd-focus); outline-offset: 3px;
    }
    html:root #search-system label { color: var(--kd-muted); }
    #search-system input[type="checkbox"] { accent-color: var(--kd-accent); }
    html:root .dropdown-menu :is(.icon-item, .text-item, .label-item) { color: var(--kd-text); }
    html:root .dropdown-menu :is(.icon-item, .text-item, .label-item):hover { background: var(--kd-hover); }
}
@media screen and (min-width: 1401px) {
    .tri-layout-container, .tri-layout-sides-content {
        grid-template-columns: 280px minmax(0, 1fr) 200px; column-gap: 24px;
    }
    .tri-layout-container { margin-inline: 24px; }
}
@media screen and (min-width: 1001px) and (max-width: 1400px) {
    .tri-layout-container { grid-template-columns: 260px minmax(0, 1fr); }
}
@media screen and (max-width: 1000px) {
    .tri-layout-middle { padding-top: 20px; }
    .chapter-content > .entity-list { gap: 16px; }
}
@media screen and (max-width: 600px) {
    html:root .tri-layout main.content-wrap.card { padding: 24px 20px; }
    html:root .tri-layout main.card:has(.chapter-content, .book-content) { padding: 8px 14px 0; }
    .chapter-content > .entity-list { grid-template-columns: minmax(0, 1fr); }
    .chapter-content > .entity-list > .entity-list-item,
    .book-content > .entity-list > .entity-list-item,
    :is(#search-system, .tri-layout .search-results) .book-contents > .entity-list > .entity-list-item { padding: 20px; }
    :is(#search-system, .tri-layout .search-results) .book-contents > .entity-list > .entity-list-item { flex-direction: column; }
    .tri-layout .page-content { font-size: 16px; }
    .tri-layout main h1 { font-size: 30px; }
    .tri-layout .page-content h2 { font-size: 24px; }
    html:root #sibling-navigation { padding: 0 6px; }
}
@media screen and (prefers-reduced-motion: reduce) {
    .chapter-content > .entity-list > .entity-list-item,
    .book-content > .entity-list > .entity-list-item,
    :is(#search-system, .tri-layout .search-results) .book-contents > .entity-list > .entity-list-item { transition: none; }
}