/* FR 3 / FR 4: shared chrome for every public reading page (portal directory, portal
   home, space tree and article pages). Standalone stylesheet for _PublicLayout — the
   public shell never chains to the admin _Layout.

   Design language: "Modernist structure, Cardcom colors"
   (docs/design_handoff_public_pages). Flat and architectural: zero border radius,
   structure drawn with 2px rules between major blocks and 1px hairlines between list
   rows, no card shadows, hover = tint or text colour change. Everything flush-start.
   Accent runs as a solid field only in the portal hero (the Ask-AI poster).
   RTL-first: logical properties only — `dir` on <html> flips start/end. */

:root {
    --kb-bg: #FFFFFF; /* page ground */
    --kb-surface: #FFFFFF; /* answer panel / card fill (row hover is --kb-tint) */
    --kb-ink: #1E293B; /* body text */
    --kb-body-muted: #475569; /* lead paragraphs */
    /*--kb-slate: #64748B;*/ /* meta text */
    --kb-slate: black; /* meta text */
    --kb-navy: #20335C; /* headings, dark button */
    --kb-navy-hover: #172554;
    --kb-blue: #20335C; /* accent / primary */
    --kb-blue-hover: #172554;
    --kb-tint: #EFF6FF; /* tag fill, row hover */
    --kb-tint-border: #DBEAFE; /* light text on the blue field */
    --kb-tint-text: #1E3A8A; /* tag text */
    --kb-line: #E2E8F0; /* 1px row hairline */
    --kb-rule: color-mix(in srgb, #20335C 40%, transparent); /* 2px structural rule */
    /* The flat language has no corners anywhere; the token stays so the article
       apparatus below keeps reading as one system rather than sprouting exceptions. */
    --kb-radius: 0;
    --kb-radius-sm: 0;
    --kb-gutter: 40px;
    /* Article side column: the contents list and its gutter (logical, so it sits on the
       start edge — right in Hebrew, left in English). */
    --kb-toc-w: 15rem;
    --kb-toc-gap: 2.75rem;
    --kb-font: "Assistant", "Segoe UI", Tahoma, Arial, sans-serif;
}

body.kb-public {
    font-family: var(--kb-font);
    font-size: 15px;
    line-height: 1.55;
    color: var(--kb-ink);
    background: var(--kb-bg);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.kb-public h1, .kb-public h2, .kb-public h3,
.kb-public h4, .kb-public h5, .kb-public h6 {
    font-family: var(--kb-font);
    color: var(--kb-navy);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.015em;
}

/* `:not(.btn)` mirrors admin.css — an <a> wearing .btn must keep the button's own
   --bs-btn-color, or a primary CTA paints its label the same blue as its fill. */
.kb-public a:not(.btn) {
    color: var(--kb-blue);
    text-underline-offset: 3px;
}

.kb-public a:not(.btn):hover { color: var(--kb-blue-hover); }

.kb-public :focus-visible {
    outline: 2px solid var(--kb-blue);
    outline-offset: 2px;
}

/* 40px page gutter. Full-bleed pages draw their rules edge to edge and pad their own
   contents with this, rather than sitting inside a centred Bootstrap container. */
.kb-gutter { padding-inline: var(--kb-gutter); }

.kb-main { flex: 1; }

/* The article page predates the flat redesign and keeps the centred container. */
.kb-main.container { padding-block: 2rem 4rem; }

/* ---- Primitives ----------------------------------------------------------- */

/* Kicker: the small tracked label that opens a block. */
.kb-kicker {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--kb-slate);
}

.kb-kicker-accent { color: var(--kb-blue); }
.kb-kicker-light { color: var(--kb-tint-border); }

.kb-lead {
    margin: 0;
    font-size: 17px;
    color: var(--kb-body-muted);
}

.kb-meta {
    font-size: 13px;
    color: var(--kb-slate);
}

.kb-meta-sm { font-size: 12px; }

/* 2px structural rule inside a block (between a description and its article list). */
.kb-hr {
    height: 2px;
    border: 0;
    margin: 8px 0;
    background: var(--kb-rule);
}

.kb-tag {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    letter-spacing: 0.02em;
    padding: 3px 10px;
    background: var(--kb-tint);
    color: var(--kb-tint-text);
}

/* Buttons keep Bootstrap's classes (the article page and the language toggle use them)
   but are flattened: square, 800, label flush-start. */
.kb-public .btn {
    --bs-btn-border-radius: 0;
    --bs-btn-font-size: 14px;
    --bs-btn-font-weight: 800;
    --bs-btn-padding-y: 8px;
    --bs-btn-padding-x: 14px;
    border-radius: 0;
    font-family: var(--kb-font);
    font-weight: 800;
    line-height: 1.2;
}

.kb-public .btn-sm {
    --bs-btn-padding-y: 6px;
    --bs-btn-padding-x: 12px;
    --bs-btn-font-size: 14px;
}

.kb-public .btn-primary {
    --bs-btn-bg: var(--kb-blue);
    --bs-btn-border-color: var(--kb-blue);
    --bs-btn-hover-bg: var(--kb-blue-hover);
    --bs-btn-hover-border-color: var(--kb-blue-hover);
    --bs-btn-active-bg: var(--kb-blue-hover);
    --bs-btn-active-border-color: var(--kb-blue-hover);
}

.kb-public .btn-outline-secondary,
.kb-public .btn-outline-primary {
    --bs-btn-color: var(--kb-navy);
    --bs-btn-border-color: var(--kb-rule);
    --bs-btn-bg: transparent;
    --bs-btn-hover-color: var(--kb-navy);
    --bs-btn-hover-bg: color-mix(in srgb, var(--kb-ink) 7%, transparent);
    --bs-btn-hover-border-color: var(--kb-rule);
    --bs-btn-active-color: var(--kb-navy);
    --bs-btn-active-bg: color-mix(in srgb, var(--kb-ink) 14%, transparent);
    --bs-btn-active-border-color: var(--kb-rule);
}

/* Full-width call to action closing a column; the label reads from the flush edge. */
.kb-btn-block {
    display: flex;
    width: 100%;
    justify-content: flex-start;
    text-align: start;
}

/* Hairline row list — the one list shape shared by the directory columns, the featured
   picks, the "recently updated" aside and the category index. */
.kb-rows {
    list-style: none;
    margin: 0;
    padding: 0;
}

.kb-rows > li { border-block-end: 1px solid var(--kb-line); }
.kb-rows > li:last-child { border-block-end: 0; }

.kb-rows a {
    display: block;
    padding-block: 10px;
    font-weight: 600;
    color: var(--kb-ink);
    text-decoration: none;
    transition: color 0.15s ease;
}

.kb-rows a:hover { color: var(--kb-blue); }

/* Variant carrying a second line of meta under the title; the list is a closed block,
   so its final row keeps a hairline. */
.kb-rows-meta > li:last-child { border-block-end: 1px solid var(--kb-line); }
.kb-rows-meta a { padding-block: 12px; }

.kb-metaline {
    display: block;
    font-weight: 400;
    font-size: 12px;
    color: var(--kb-slate);
}

.kb-ruled { border-block-start: 2px solid var(--kb-rule); }

/* Closing "didn't find an answer?" line. */
.kb-support {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    font-size: 14px;
    color: var(--kb-slate);
}

.kb-support a { font-weight: 700; }

.kb-support-stack {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    font-size: 13px;
}

/* ---- Header --------------------------------------------------------------- */

.kb-nav {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px var(--kb-gutter);
    background: var(--kb-bg);
    border-block-end: 2px solid var(--kb-rule);
}

/* "מרכז הידע /" — the way back to the directory, ahead of the portal's own name. */
.kb-nav-up {
    font-size: 13px;
    color: var(--kb-slate);
    text-decoration: none;
}

.kb-nav-up:hover { color: var(--kb-blue); }

.kb-nav-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-inline-end: auto;
    font-size: 18px;
    font-weight: 800;
    color: var(--kb-navy);
    text-decoration: none;
}

.kb-nav-brand:hover { color: var(--kb-blue); }

.kb-nav-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* The shared _LoginPartial is a Bootstrap navbar list; flatten it into the rule row. */
.kb-nav-actions .navbar-nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.kb-nav-actions .nav-link {
    padding: 0;
    font-size: 14px;
    color: var(--kb-navy);
    text-decoration: none;
}

.kb-nav-actions .nav-link:hover { color: var(--kb-blue); }

.kb-portal-logo {
    max-height: 40px;
    max-width: 160px;
    object-fit: contain;
}

/* ---- Footer --------------------------------------------------------------- */

.kb-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 16px var(--kb-gutter);
    border-block-start: 2px solid var(--kb-rule);
    font-size: 13px;
    color: #FFFFFF;
    background-color : var(--kb-blue);
}

.kb-foot a {
    color: inherit;
    text-decoration: none;
}

.kb-foot a:hover { color: var(--kb-blue); }

/* ---- Home: portal directory ------------------------------------------------ */

/* ---- Root page: search first (design option 1a) ---------------------------- */

.kb-root-empty {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: end;
    padding-block: 48px 28px;
}

.kb-root-empty-title {
    margin: 0;
    font-size: 56px;
    line-height: 1.05;
}

.kb-root-hero {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 56px var(--kb-gutter) 40px;
    background: var(--kb-blue);
    color: #fff;
}

.kb-root-kicker {
    margin: 0;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #fff;
}

.kb-public .kb-root-title {
    margin: 0;
    max-width: 16ch;
    font-size: 56px;
    font-weight: 800;
    line-height: 1.05;
    color: #fff;
}

.kb-root-search {
    display: flex;
    max-width: 760px;
    background: #fff;
    border: 2px solid #fff;
}

.kb-public .kb-root-search-input,
.kb-public .kb-root-search-input:focus {
    flex: 1;
    min-width: 0;
    padding: 14px 16px;
    font: inherit;
    font-size: 17px;
    color: var(--kb-ink);
    background: transparent;
    border: 0;
    outline: none;
    box-shadow: none;
}

.kb-public .kb-root-search-go {
    flex: none;
    padding: 0 28px;
    font-family: var(--kb-font);
    font-size: 15px;
    font-weight: 800;
    color: #fff;
    background: var(--kb-navy);
    border: 2px solid #fff;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.kb-public .kb-root-search-go:hover { background: var(--kb-navy-hover); }

/* The hero is navy, so the default navy focus ring would vanish: use white inside it.
   The input's own outline stays suppressed; the form carries the single ring. */
.kb-public .kb-root-hero :focus-visible { outline-color: #fff; }

.kb-public .kb-root-search:focus-within {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.kb-root-popular {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    font-size: 13px;
}

.kb-root-popular-label { opacity: 0.9; }

.kb-public .kb-root-popular a,
.kb-public .kb-root-popular a:hover {
    color: #fff;
    text-decoration: underline;
}

.kb-root-portals-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 40px var(--kb-gutter) 8px;
}

.kb-root-portals-head h2 {
    margin: 0;
    font-size: 20px;
}

.kb-root-portals {
    list-style: none;
    margin: 0 var(--kb-gutter);
    padding: 0;
    border-block-start: 2px solid var(--kb-rule);
}

.kb-root-portals li:last-child .kb-root-row { border-block-end: 2px solid var(--kb-rule); }

/* a.kb-root-row, not .kb-root-row: the global .kb-public a:not(.btn) colour rules would
   otherwise outrank this one. */
.kb-public a.kb-root-row {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) 220px 120px 32px;
    gap: 24px;
    align-items: center;
    padding: 24px 0;
    border-block-end: 1px solid var(--kb-line);
    color: inherit;
    text-decoration: none;
}

.kb-public a.kb-root-row:hover { background: var(--kb-surface); color: inherit; }

.kb-root-row-index {
    font-size: 13px;
    color: var(--kb-slate);
}

.kb-root-row-main {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.kb-root-row-name {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 26px;
    font-weight: 800;
    color: var(--kb-navy);
}

.kb-root-row-logo {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.kb-root-row-desc { color: var(--kb-body-muted); }

.kb-root-row-arrow {
    font-size: 22px;
    font-weight: 800;
    color: var(--kb-blue);
}

.kb-root-support {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 20px var(--kb-gutter) 40px;
    font-size: 14px;
    color: var(--kb-slate);
}

.kb-root-support a { font-weight: 700; }

.kb-root-hero-compact { padding-block: 32px 28px; }

.kb-search-head { padding-block: 32px 0; }

.kb-search-title {
    margin: 0;
    font-size: 28px;
}

.kb-search-title q { quotes: "“" "”"; }

/* ---- Ask AI (ids are a test contract — style by class) ---------------------
   Two variants of one widget. On the portal home it is the hero: a solid accent poster
   whose headline poses the question the field answers. Everywhere else it is a compact
   white bar under the header. Both share the answer panel below. */

.kb-ai { display: block; }

.kb-ai-poster {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: end;
    padding: 48px var(--kb-gutter) 40px;
    background: var(--kb-blue);
    color: #fff;
}

.kb-public .kb-ai-headline {
    margin: 0;
    font-size: 56px;
    line-height: 1.05;
    color: #fff;
}

.kb-ai-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* One square field: the textarea loses its own chrome and the Ask button rides flush
   against it. */
.kb-ai-field {
    display: flex;
    background: #fff;
    border: 2px solid #fff;
}

.kb-public .kb-ai-input,
.kb-public .kb-ai-input:focus {
    flex: 1;
    min-width: 0;
    padding: 14px 16px;
    font: inherit;
    font-size: 17px;
    color: var(--kb-ink);
    background: transparent;
    border: 0;
    outline: none;
    box-shadow: none;
    resize: none;
    min-height: 52px;
    max-height: 8rem;
    overflow-y: auto;
}

.kb-public .kb-ai-go {
    flex: none;
    padding: 0 24px;
    font-family: var(--kb-font);
    font-size: 15px;
    font-weight: 800;
    color: #fff;
    background: var(--kb-navy);
    border: 0;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.kb-public .kb-ai-go:hover { background: var(--kb-navy-hover); }
.kb-public .kb-ai-go:disabled { opacity: 0.55; cursor: not-allowed; }

.kb-ai-presets {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    color: var(--kb-tint-border);
}

.kb-ai-preset {
    padding: 0;
    font: inherit;
    font-size: 13px;
    color: #fff;
    background: none;
    border: 0;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

/* Compact bar: category, subcategory and article pages. */
.kb-ai-bar {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 16px var(--kb-gutter);
    background: var(--kb-surface);
    border-block-end: 2px solid var(--kb-rule);
}

.kb-ai-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-weight: 800;
    color: var(--kb-navy);
    white-space: nowrap;
}

.kb-ai-mark { color: var(--kb-blue); }

.kb-ai-bar .kb-ai-form {
    flex: 1;
    max-width: 720px;
}

.kb-ai-bar .kb-ai-field { border: 2px solid var(--kb-navy); }

.kb-public .kb-ai-bar .kb-ai-input {
    padding: 9px 14px;
    font-size: 15px;
    min-height: 0;
}

.kb-public .kb-ai-bar .kb-ai-go {
    padding: 0 20px;
    font-size: 14px;
    background: var(--kb-blue);
}

.kb-public .kb-ai-bar .kb-ai-go:hover { background: var(--kb-blue-hover); }

/* The answer, busy and error states all live in this panel. */
.kb-ai-panel {
    padding-inline: var(--kb-gutter);
    background: var(--kb-surface);
    border-block-end: 2px solid var(--kb-rule);
}

.kb-ai-panel-inner { padding-block: 32px; }

.kb-ai-asked {
    margin: 0 0 8px;
    font-size: 14px;
    color: var(--kb-slate);
}

.kb-ai-answer {
    font-size: 17px;
    line-height: 1.6;
}

.kb-ai-answer > :last-child { margin-block-end: 0; }

/* Focus is moved here only so screen readers land on the answer; it isn't a control. */
.kb-public .kb-ai-answer:focus { outline: none; }

.kb-ai-busy {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--kb-slate);
}

.kb-ai-error {
    border-radius: 0;
    margin-block: 0;
}

.kb-ai-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-block-start: 16px;
}

.kb-public .kb-ai-close {
    margin-inline-start: auto;
    padding: 4px 8px;
    font-family: var(--kb-font);
    font-size: 13px;
    font-weight: 800;
    color: var(--kb-blue);
    background: none;
    border: 0;
    cursor: pointer;
}

.kb-public .kb-ai-close:hover {
    background: color-mix(in srgb, var(--kb-blue) 10%, transparent);
}

/* On the article page the widget still renders inside the centred container, so it must
   not add the page gutter a second time. */
.kb-main.container > .kb-ai .kb-ai-bar,
.kb-main.container > .kb-ai .kb-ai-panel {
    padding-inline: 0;
}

.kb-main.container > .kb-ai { margin-block-end: 1.75rem; }

/* Sources under the AI answer: a ruled list, flush-start, one row per article. */
.kb-ai-sources { margin-block-start: 24px; }

.kb-ai-source-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-block-start: 2px solid var(--kb-rule);
}

.kb-ai-source-list li {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 0;
    border-block-end: 1px solid var(--kb-line);
}

.kb-ai-source-list li:last-child { border-block-end: 2px solid var(--kb-rule); }

.kb-public a.kb-ai-source-title {
    font-size: 17px;
    font-weight: 700;
    text-decoration: none;
    color: var(--kb-navy);
}

.kb-public a.kb-ai-source-title:hover { color: var(--kb-blue); text-decoration: underline; }

.kb-public .kb-ai-source-title:focus-visible {
    outline: 2px solid var(--kb-blue);
    outline-offset: 2px;
}

.kb-ai-source-meta { font-size: 13px; }

/* /search results variant: the panel is the page's main block, open from the start. The
   panel already carries the page gutter, so only the title needs its own. */
.kb-ai-results .kb-ai-results-title {
    padding: 24px var(--kb-gutter) 0;
    margin: 0;
}

/* ---- Portal home: featured strip ------------------------------------------- */

.kb-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding-inline: var(--kb-gutter);
    border-block-end: 2px solid var(--kb-rule);
}

.kb-strip-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-block: 20px;
    color: inherit;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.kb-strip-cell:hover { background: var(--kb-tint); }

.kb-strip-cell:not(:last-child) {
    padding-inline-end: 24px;
    border-inline-end: 2px solid var(--kb-rule);
}

.kb-strip-cell + .kb-strip-cell { padding-inline-start: 24px; }

.kb-strip-kicker {
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--kb-blue);
}

.kb-strip-title {
    font-weight: 700;
    font-size: 17px;
    color: var(--kb-navy);
}

/* ---- Portal home: body ------------------------------------------------------ */

.kb-home-body {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 48px;
    padding: 40px var(--kb-gutter) 48px;
}

.kb-sec-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    margin-block-end: 8px;
}

.kb-sec-title {
    margin: 0;
    font-size: 20px;
}

.kb-cat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0 32px;
    border-block-start: 2px solid var(--kb-rule);
}

.kb-cat-cell {
    padding-block: 20px;
    border-block-end: 1px solid var(--kb-line);
}

/* The hairline divides rows, so the bottom row carries none: find the first cell of the
   last row (a cell at 3n+1 that is among the final three) and clear it and its siblings. */
.kb-cat-cell:nth-child(3n+1):nth-last-child(-n+3),
.kb-cat-cell:nth-child(3n+1):nth-last-child(-n+3) ~ .kb-cat-cell {
    border-block-end: 0;
}

.kb-cat-name {
    margin: 0 0 4px;
    font-size: 20px;
}

.kb-cat-name a {
    color: inherit;
    text-decoration: none;
}

.kb-cat-name a:hover { color: var(--kb-blue); }

.kb-cat-desc {
    margin: 0 0 10px;
    font-size: 14px;
    color: var(--kb-slate);
}

.kb-cat-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 14px;
}

.kb-cat-links a {
    color: var(--kb-ink);
    text-decoration: none;
}

.kb-cat-links a:hover { color: var(--kb-blue); }

.kb-cat-more {
    display: inline-block;
    margin-block-start: 10px;
    font-size: 13px;
    font-weight: 700;
}

/* The aside's own heading needs the gap the section head supplies in the main column. */
.kb-home-aside > .kb-sec-title { margin-block-end: 8px; }

.kb-aside-block { margin-block-start: 32px; }
.kb-aside-block.kb-ruled { padding-block-start: 16px; }

/* ---- Category / browse page -------------------------------------------------- */

.kb-browse {
    flex: 1;
    display: grid;
    grid-template-columns: 300px 1fr;
}

.kb-browse-side {
    border-inline-end: 2px solid var(--kb-rule);
    padding-block: 40px;
    padding-inline: var(--kb-gutter) 32px;
}

.kb-index a {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-block: 11px;
    font-size: 15px;
    font-weight: 600;
    color: var(--kb-ink);
    text-decoration: none;
}

.kb-index a:hover { color: var(--kb-blue); }

.kb-index-count {
    font-weight: 400;
    color: var(--kb-slate);
}

.kb-index > li.kb-index-current { border-inline-start: 3px solid var(--kb-blue); }

.kb-index-current a {
    padding-inline: 12px;
    font-weight: 800;
    color: var(--kb-blue);
    background: var(--kb-tint);
}

.kb-index-current .kb-index-count { color: inherit; }

.kb-browse-main {
    padding: 40px var(--kb-gutter) 56px;
    max-width: 900px;
}

.kb-crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 13px;
    color: var(--kb-slate);
    margin-block-end: 20px;
}

.kb-crumbs a {
    color: var(--kb-slate);
    text-decoration: none;
}

.kb-crumbs a:hover { color: var(--kb-blue); }

.kb-crumb-current {
    color: var(--kb-navy);
    font-weight: 700;
}

.kb-title-row {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 24px;
    margin-block-end: 8px;
}

.kb-browse-title {
    margin: 0;
    font-size: 44px;
    line-height: 1.05;
}

.kb-browse-main .kb-lead {
    margin-block-end: 28px;
    max-width: 56ch;
}

/* Article rows: title and date on one line, summary beneath. */
.kb-docs a {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 24px;
    padding-block: 16px;
    color: inherit;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.kb-docs a:hover { background: var(--kb-tint); }

.kb-docs > li:last-child { border-block-end: 1px solid var(--kb-line); }

.kb-doc-title {
    font-weight: 700;
    font-size: 18px;
    color: var(--kb-navy);
}

.kb-doc-date {
    font-size: 12px;
    color: var(--kb-slate);
    white-space: nowrap;
}

.kb-doc-flag { justify-self: end; }

.kb-doc-summary {
    grid-column: 1;
    font-size: 14px;
    color: var(--kb-slate);
}

.kb-group-title {
    margin: 40px 0 8px;
    font-size: 20px;
}

.kb-group-title a {
    color: inherit;
    text-decoration: none;
}

.kb-group-title a:hover { color: var(--kb-blue); }

.kb-group-meta {
    margin: 0 0 8px;
    font-size: 14px;
    color: var(--kb-slate);
}

.kb-browse-close {
    margin-block-start: 40px;
    padding-block-start: 16px;
}

/* ---- Article page ------------------------------------------------------------ */

.kb-article,
.kb-attachments,
.kb-related,
.kb-feedback {
    max-width: 52rem;
}

.kb-article h1 {
    font-weight: 800;
    font-size: clamp(1.75rem, 4vw, 2.4rem);
}

.kb-article .lead {
    color: var(--kb-body-muted);
    font-size: 1.15rem;
}

.kb-article-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-block-end: 1.5rem;
}

/* Table of contents. Narrow screens keep it as a tinted block above the text, where it
   works as a jump menu; from 62em it moves into a sticky side column (below). */
.kb-toc {
    background: var(--kb-tint);
    border: 1px solid var(--kb-tint-border);
    padding: 1rem 1.25rem;
    margin-block-end: 1.5rem;
    font-size: 0.9rem;
}

.kb-toc > strong {
    color: var(--kb-navy);
    font-weight: 700;
    display: block;
    margin-block-end: 0.35rem;
}

.kb-toc a {
    display: block;
    padding-block: 0.15rem;
    text-decoration: none;
    color: var(--kb-ink);
}

.kb-toc a:hover {
    color: var(--kb-blue);
    text-decoration: underline;
}

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

.kb-toc-l3 { padding-inline-start: 0.75rem; }
.kb-toc-l4 { padding-inline-start: 1.5rem; }
.kb-toc-l5 { padding-inline-start: 2.25rem; }
.kb-toc-l6 { padding-inline-start: 3rem; }

/* The apparatus block: last-updated, access facts, actions, contents. Stacked above the
   text on narrow screens; the side column from 62em (below). */

.kb-art-facts {
    margin-block: 0 1.25rem;
    font-size: 0.875rem;
}

.kb-art-facts dt {
    margin-block-start: 0.85rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--kb-slate);
}

.kb-art-facts dt:first-child { margin-block-start: 0; }

.kb-art-facts dd {
    margin: 0.1rem 0 0;
    color: var(--kb-ink);
}

/* Bootstrap's breadcrumb divider is physical (float: left, padding-right) and the public
   shell serves both directions from the LTR build, so in Hebrew every "/" floated to the
   end of its own crumb. Restate it with logical properties, and drop the pill. */
.kb-public .breadcrumb {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    font-size: 13px;
    margin-block-end: 20px;
}

.kb-public .breadcrumb-item,
.kb-public .breadcrumb-item a {
    color: var(--kb-slate);
    text-decoration: none;
}

.kb-public .breadcrumb-item a:hover { color: var(--kb-blue); }

.kb-public .breadcrumb-item.active { color: var(--kb-navy); font-weight: 700; }

.kb-public .breadcrumb-item + .breadcrumb-item {
    padding-inline: 0.5rem 0;
}

.kb-public .breadcrumb-item + .breadcrumb-item::before {
    float: none;
    padding-inline: 0 0.5rem;
}

/* From 62em the article is two columns. The start edge carries the apparatus and the
   prose column holds the title, summary and text on one shared edge. Everything is
   logical, so `dir` does the flipping. */
@media (min-width: 62em) {
    .kb-article:has(.kb-toc) {
        position: relative;
        display: grid;
        grid-template-columns: var(--kb-toc-w) minmax(0, 1fr);
        grid-template-rows: auto auto auto;
        column-gap: var(--kb-toc-gap);
        align-items: start;
        max-width: calc(52rem + var(--kb-toc-w) + var(--kb-toc-gap));
    }

    /* One rail down the whole page divides apparatus from prose. */
    .kb-article:has(.kb-toc)::before {
        content: "";
        position: absolute;
        inset-block: 0.4rem 0;
        inset-inline-start: var(--kb-toc-w);
        width: 2px;
        background: var(--kb-line);
    }

    /* The aside spans every row, so its own blocks stack freely — the prose column is not
       dragged down by however many facts the side column happens to carry. */
    .kb-article:has(.kb-toc) > .kb-art-side {
        grid-area: 1 / 1 / -1 / 2;
        position: sticky;
        top: 1.5rem;
        max-height: calc(100vh - 3rem);
        overflow-y: auto;
        padding-inline-end: 1.25rem;
    }

    .kb-article:has(.kb-toc) > h1 { grid-area: 1 / 2; }
    .kb-article:has(.kb-toc) > .lead { grid-area: 2 / 2; }
    .kb-article:has(.kb-toc) > .kb-content { grid-area: 3 / 2; }

    /* Optical alignment: the small type needs a nudge to sit level with the h1's cap. */
    .kb-art-side .kb-art-meta { margin-block-start: 0.5rem; }

    .kb-art-side .kb-article-actions { gap: 0.4rem; }

    /* Beside the text the list needs no slab of its own — the rail already frames it. */
    .kb-art-side .kb-toc {
        margin-block-end: 0;
        padding: 0;
        background: none;
        border: 0;
    }

    .kb-article:has(.kb-toc) ~ .kb-attachments,
    .kb-article:has(.kb-toc) ~ .kb-related,
    .kb-article:has(.kb-toc) ~ .kb-feedback {
        margin-inline-start: calc(var(--kb-toc-w) + var(--kb-toc-gap));
    }
}

/* Related articles / feedback (FR §22-24). */

.kb-attachments,
.kb-related {
    margin-block-start: 2.5rem;
    padding-block-start: 1.5rem;
    border-block-start: 2px solid var(--kb-rule);
}

/* FR §21.6: the published version's files. Stays in print -- it is article content. */
.kb-attachments-list li { padding-block: .35rem; }
.kb-attachments-list a { font-weight: 600; }
.kb-attachment-size { color: var(--kb-slate); font-size: .85rem; }

.kb-related ul { padding-inline-start: 1.25rem; }

.kb-feedback {
    margin-block-start: 2rem;
    background: var(--kb-surface);
    border: 1px solid var(--kb-line);
    padding: 1.5rem;
}

/* ---- Responsive ---------------------------------------------------------------- */

@media (max-width: 62em) {
    :root { --kb-gutter: 20px; }

    .kb-root-empty,
    .kb-ai-poster {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .kb-root-empty-title,
    .kb-public .kb-ai-headline { font-size: 40px; }

    .kb-ai-bar {
        flex-wrap: wrap;
        gap: 12px;
    }

    .kb-ai-bar .kb-ai-form { max-width: none; }

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

    .kb-strip-cell:not(:last-child) {
        padding-inline-end: 0;
        border-inline-end: 0;
        border-block-end: 1px solid var(--kb-line);
    }

    .kb-strip-cell + .kb-strip-cell { padding-inline-start: 0; }

    .kb-home-body {
        grid-template-columns: 1fr;
        gap: 32px;
    }

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

    .kb-cat-cell:nth-child(3n+1):nth-last-child(-n+3),
    .kb-cat-cell:nth-child(3n+1):nth-last-child(-n+3) ~ .kb-cat-cell {
        border-block-end: 1px solid var(--kb-line);
    }

    .kb-cat-cell:last-child { border-block-end: 0; }

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

    .kb-browse-side {
        border-inline-end: 0;
        border-block-end: 2px solid var(--kb-rule);
        padding-block: 24px;
        padding-inline: var(--kb-gutter);
    }

    .kb-browse-title { font-size: 32px; }

    .kb-title-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

@media (max-width: 760px) {
    .kb-public .kb-root-title { font-size: 36px; }

    .kb-public a.kb-root-row {
        grid-template-columns: 40px minmax(0, 1fr) 24px;
        gap: 16px;
        padding: 18px 0;
    }

    /* Tag and count fold under the description as one meta line. */
    .kb-root-row-tag,
    .kb-root-row-count {
        grid-column: 2;
        justify-self: start;
    }

    .kb-root-row-arrow { grid-row: 1; grid-column: 3; }
    .kb-root-row-index { grid-row: 1; }
    .kb-root-row-main { grid-row: 1; }
    .kb-root-row-name { font-size: 22px; }
}

/* ---- Quality floor --------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    /* Spinners are exempt: Bootstrap already slows them for reduced motion, and a
       frozen spinner reads as a hang. */
    .kb-public *:not(.spinner-border),
    .kb-public *::before,
    .kb-public *::after {
        animation: none !important;
        transition: none !important;
    }
}

@media print {
    .kb-nav, .kb-foot, .kb-toc, .kb-feedback, .kb-related, .kb-article-actions,
    .breadcrumb, #kb-ai-chat, .kb-browse-side, .kb-home-aside, .kb-root-support,
    .kb-support { display: none !important; }
    body.kb-public { background: #fff; }
    main { padding: 0 !important; }
    .kb-browse, .kb-home-body { display: block; }
}