/* Public knowledge base — docs-style reading surface */

.kb-public {
    --kb-prose-measure: 42rem;
    --kb-radius: var(--sb-radius-md, 0.5rem);
    --kb-border: var(--sb-color-border, rgba(127, 127, 127, 0.28));
    --kb-surface: var(--sb-color-surface, transparent);
    --kb-muted: var(--sb-color-muted, #6b7280);
    --kb-fg: var(--sb-color-fg, inherit);
    --kb-accent: var(--sb-color-primary, #0f766e);
    --kb-accent-soft: color-mix(in srgb, var(--kb-accent) 12%, transparent);

    max-width: 48rem;
    margin-inline: auto;
    padding: 1.5rem 1.25rem 3rem;
    color: var(--kb-fg);
}

.kb-public[dir="rtl"] {
    direction: rtl;
    text-align: right;
}

.kb-public-article,
.kb-public-category {
    display: block;
}

/* —— Article body —— */

.kb-public-article-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.kb-public-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8125rem;
    color: var(--kb-muted);
}

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

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

.kb-public-breadcrumb__sep {
    opacity: 0.55;
}

.kb-public-article-header {
    display: grid;
    gap: 0.65rem;
    padding-block-end: 0.25rem;
    border-block-end: 1px solid var(--kb-border);
    margin-block-end: 0.25rem;
}

.kb-public-article-header .sb-heading,
.kb-public-article-header h1 {
    margin: 0;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.kb-public-article-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

/* —— Language switch —— */

.kb-public-lang-switch {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.15rem;
    border-radius: 999px;
    border: 1px solid var(--kb-border);
    background: var(--kb-surface);
}

.kb-public-lang-switch__btn {
    appearance: none;
    border: 0;
    background: transparent;
    cursor: pointer;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    font: inherit;
    font-size: 0.75rem;
    line-height: 1.3;
    color: var(--kb-muted);
    text-decoration: none;
}

.kb-public-lang-switch__btn:hover:not(:disabled):not(.is-active) {
    color: var(--kb-fg);
    background: var(--kb-accent-soft);
}

.kb-public-lang-switch__btn.is-active,
.kb-public-lang-switch__btn:disabled {
    color: var(--kb-accent);
    background: var(--kb-accent-soft);
    font-weight: 600;
    cursor: default;
}

/* —— Markdown prose —— */

.kb-public-markdown {
    max-width: var(--kb-prose-measure);
    line-height: 1.75;
    font-size: 1.0125rem;
}

.kb-public-markdown > :first-child {
    margin-block-start: 0;
}

.kb-public-markdown h2,
.kb-public-markdown h3,
.kb-public-markdown h4 {
    margin-block: 1.75rem 0.65rem;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.kb-public-markdown p,
.kb-public-markdown ul,
.kb-public-markdown ol {
    margin-block: 0.85rem;
}

.kb-public-markdown li + li {
    margin-block-start: 0.35rem;
}

.kb-public-markdown img {
    max-width: 100%;
    height: auto;
    border-radius: var(--kb-radius);
}

.kb-public-markdown table {
    width: 100%;
    border-collapse: collapse;
    margin-block: 1rem;
    font-size: 0.9375rem;
}

.kb-public-markdown th,
.kb-public-markdown td {
    border: 1px solid var(--kb-border);
    padding: 0.5rem 0.65rem;
    text-align: start;
}

.kb-public-markdown th {
    background: var(--kb-accent-soft);
    font-weight: 600;
}

.kb-public-markdown pre {
    overflow-x: auto;
    padding: 0.9rem 1rem;
    border-radius: var(--kb-radius);
    border: 1px solid var(--kb-border);
    font-size: 0.875rem;
    line-height: 1.55;
}

.kb-public-markdown code {
    font-family: var(--sb-font-family-mono, ui-monospace, monospace);
    font-size: 0.9em;
}

.kb-public-markdown :not(pre) > code {
    padding: 0.1em 0.35em;
    border-radius: 0.25rem;
    background: var(--kb-accent-soft);
}

.kb-public-markdown pre,
.kb-public-markdown code,
.kb-public-markdown a[href] {
    direction: ltr;
    unicode-bidi: plaintext;
}

.kb-public-markdown[dir="rtl"] {
    font-family: var(--sb-font-family-farsi, var(--sb-font-family, system-ui)), "Vazirmatn", "Noto Naskh Arabic", Tahoma, sans-serif;
}

.kb-public-markdown blockquote {
    margin-inline: 0;
    padding-inline-start: 1rem;
    border-inline-start: 3px solid var(--kb-accent);
    color: var(--kb-muted);
}

/* —— Footer: feedback / pager / related —— */

.kb-public-article-footer {
    display: grid;
    gap: 1.75rem;
    margin-block-start: 1.5rem;
    padding-block-start: 1.5rem;
    border-block-start: 1px solid var(--kb-border);
    max-width: var(--kb-prose-measure);
}

.kb-public-feedback {
    display: grid;
    gap: 0.75rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--kb-border);
    border-radius: var(--kb-radius);
}

.kb-public-feedback__title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
}

.kb-public-feedback__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.kb-public-pager {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

@media (max-width: 640px) {
    .kb-public-pager {
        grid-template-columns: 1fr;
    }
}

.kb-public-pager__link {
    display: grid;
    gap: 0.2rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--kb-border);
    border-radius: var(--kb-radius);
    text-decoration: none;
    color: inherit;
    transition: border-color 120ms ease, background-color 120ms ease;
}

.kb-public-pager__link:hover {
    border-color: var(--kb-accent);
    background: var(--kb-accent-soft);
}

.kb-public-pager__link--next {
    text-align: end;
}

.kb-public-pager__label {
    font-size: 0.75rem;
    color: var(--kb-muted);
}

.kb-public-pager__title {
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.35;
}

.kb-public-section-title {
    margin: 0 0 0.75rem;
    font-size: 1rem;
    font-weight: 650;
}

.kb-public-related__list,
.kb-public-article-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.kb-public-related__list li + li,
.kb-public-article-list .kb-public-list-item + .kb-public-list-item {
    border-block-start: 1px solid var(--kb-border);
}

.kb-public-related__list a,
.kb-public-list-item__title {
    display: block;
    padding: 0.7rem 0;
    color: inherit;
    text-decoration: none;
    font-weight: 500;
}

.kb-public-related__list a:hover,
.kb-public-list-item__title:hover {
    color: var(--kb-accent);
}

.kb-public-list-item {
    padding: 0;
}

/* —— Home —— */

.kb-public-home {
    max-width: 64rem;
}

.kb-public-hero {
    display: grid;
    gap: 0.85rem;
    margin-block-end: 2.25rem;
    max-width: 40rem;
}

.kb-public-search-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: flex-end;
}

.kb-public-home-categories,
.kb-public-home-recent {
    margin-block-start: 2rem;
}

.kb-public-category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: 0.75rem;
}

.kb-public-category-card {
    display: grid;
    gap: 0.35rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--kb-border);
    border-radius: var(--kb-radius);
    text-decoration: none;
    color: inherit;
    transition: border-color 120ms ease, background-color 120ms ease;
}

.kb-public-category-card:hover {
    border-color: var(--kb-accent);
    background: var(--kb-accent-soft);
}

.kb-public-category-card__title {
    font-weight: 650;
    font-size: 0.975rem;
}

.kb-public-category-card__desc {
    font-size: 0.8125rem;
    color: var(--kb-muted);
    line-height: 1.45;
}

/* —— Search —— */

.kb-public-search {
    display: grid;
    gap: 1rem;
    max-width: 48rem;
}

.kb-search-facets {
    display: grid;
    gap: 0.35rem;
}

@media (prefers-reduced-motion: reduce) {
    .kb-public-pager__link,
    .kb-public-category-card {
        transition: none;
    }
}