/* Documentation (knowledgebase): /knowledgebase home, module pages and articles. */

/* search */
.gnc-kb-search { display: flex; gap: .5rem; max-width: 36rem; }
.gnc-kb-search__input {
    flex: 1; min-width: 0; padding: .7rem .9rem; border-radius: var(--gnc-radius-sm);
    background: var(--gnc-field-bg); border: 1px solid var(--gnc-field-border); color: var(--gnc-ink);
}
.gnc-kb-search__input::placeholder { color: var(--gnc-field-placeholder); }
.gnc-kb-search__input:focus { outline: 2px solid var(--gnc-accent); outline-offset: 1px; }
.gnc-kb-search__button { flex: none; }
.gnc-kb__side .gnc-kb-search { margin-bottom: 1rem; }
/* in the sidebar Enter submits; the button would squeeze the field */
.gnc-kb__side .gnc-kb-search__button { display: none; }

/* home: module cards */
.gnc-kb__body { padding-top: 48px; }
.gnc-kb__results-title { font-size: 1.25rem; color: #fff; margin: 0 0 1rem; }
.gnc-kb__results-title + .gnc-kb-list, .gnc-kb__results-title + .gnc-muted { margin-bottom: 3rem; }
.gnc-kb-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.gnc-kb-card { display: flex; flex-direction: column; gap: .5rem; color: var(--gnc-ink); text-decoration: none; transition: border-color .15s; }
.gnc-kb-card:hover, .gnc-kb-card:focus-visible { border-color: var(--gnc-accent); color: var(--gnc-ink); }
.gnc-kb-card__title { font-size: 1.125rem; color: #fff; margin: 0; }
.gnc-kb-card__text { color: var(--gnc-muted); font-size: .95rem; line-height: 1.55; flex: 1; }
.gnc-kb-card__text p { margin: 0; }
.gnc-kb-card__meta { color: var(--gnc-accent); font-size: .875rem; }

/* module and article layout: sidebar | content | on this page */
.gnc-kb__layout { display: grid; gap: 2.5rem; padding-top: 40px; padding-bottom: 72px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 800px) {
    .gnc-kb__layout { grid-template-columns: 240px minmax(0, 1fr); }
}
@media (min-width: 1100px) {
    .gnc-kb__layout { grid-template-columns: 260px minmax(0, 1fr); }
    .gnc-kb__layout--toc { grid-template-columns: 260px minmax(0, 1fr) 200px; }
}
.gnc-kb__main { min-width: 0; }
.gnc-kb__title { font-size: clamp(1.75rem, 4vw, 2.5rem); line-height: 1.15; color: #fff; margin: .5rem 0 1.25rem; letter-spacing: -.01em; }
.gnc-kb__intro { color: var(--gnc-muted); font-size: 1.05rem; line-height: 1.6; margin-bottom: 1.5rem; }

.gnc-kb-crumbs { display: flex; flex-wrap: wrap; gap: .4rem; font-size: .875rem; color: var(--gnc-muted); }
.gnc-kb-crumbs a { color: var(--gnc-muted); }
.gnc-kb-crumbs a:hover { color: var(--gnc-accent); }

/* sidebar */
@media (min-width: 800px) {
    .gnc-kb__side { position: sticky; top: 88px; align-self: start; max-height: calc(100vh - 104px); overflow-y: auto; }
}
.gnc-kb-nav { border: 1px solid var(--gnc-line); border-radius: var(--gnc-radius-sm); background: var(--gnc-surface); }
.gnc-kb-nav__toggle { padding: .75rem 1rem; cursor: pointer; color: #fff; font-weight: 600; }
.gnc-kb-nav[open] .gnc-kb-nav__toggle { border-bottom: 1px solid var(--gnc-line); }
@media (min-width: 1100px) {
    .gnc-kb-nav { border: 0; background: none; }
    .gnc-kb-nav__toggle { display: none; }
}
.gnc-kb-nav ul { list-style: none; margin: 0; padding: 0; }
.gnc-kb-nav__modules { padding: .5rem 0; }
.gnc-kb-nav a { display: block; text-decoration: none; border-radius: 6px; }
.gnc-kb-nav a.gnc-kb-nav__module-link { padding: .4rem .75rem; color: var(--gnc-ink); font-weight: 500; }
.gnc-kb-nav__articles { margin: .15rem 0 .5rem .75rem !important; border-left: 1px solid var(--gnc-line); }
.gnc-kb-nav__articles a { padding: .3rem .75rem; color: var(--gnc-muted); font-size: .9rem; }
.gnc-kb-nav a:hover { color: #fff; background: var(--gnc-surface-2); }
.gnc-kb-nav a[aria-current="page"] { color: var(--gnc-accent); background: var(--gnc-accent-soft); }

/* article and module lists */
.gnc-kb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.gnc-kb-list a {
    display: flex; flex-direction: column; gap: .15rem; padding: .85rem 1rem; text-decoration: none;
    border: 1px solid var(--gnc-line); border-radius: var(--gnc-radius-sm); background: var(--gnc-surface);
}
.gnc-kb-list a:hover, .gnc-kb-list a:focus-visible { border-color: var(--gnc-accent); }
.gnc-kb-list__name { color: #fff; font-weight: 500; }
.gnc-kb-list__path { color: var(--gnc-muted); font-size: .85rem; }
.gnc-kb-list--numbered { counter-reset: kb; }
.gnc-kb-list--numbered a { flex-direction: row; align-items: baseline; gap: .75rem; }
.gnc-kb-list--numbered a::before { counter-increment: kb; content: counter(kb); color: var(--gnc-accent); font-family: var(--gnc-mono); font-size: .85rem; }

/* on this page */
.gnc-kb-toc { display: none; }
@media (min-width: 1100px) {
    .gnc-kb-toc { display: block; position: sticky; top: 88px; align-self: start; font-size: .875rem; }
}
.gnc-kb-toc__title { color: #fff; font-weight: 600; margin: .5rem 0 .75rem; }
.gnc-kb-toc ul { list-style: none; margin: 0; padding: 0 0 0 .75rem; border-left: 1px solid var(--gnc-line); }
.gnc-kb-toc li { margin: 0 0 .5rem; }
.gnc-kb-toc a { color: var(--gnc-muted); text-decoration: none; }
.gnc-kb-toc a:hover { color: var(--gnc-accent); }

/* article body */
/* tables and code blocks scroll inside themselves; clip keeps a transient overflow from widening the page */
.gnc-kb-article { color: var(--gnc-ink); line-height: 1.7; font-size: 1.0125rem; overflow-x: clip; }
.gnc-kb-article > :first-child { margin-top: 0; }
.gnc-kb-article h2 { color: #fff; font-size: 1.5rem; margin: 2.5rem 0 1rem; padding-top: .25rem; scroll-margin-top: 96px; }
.gnc-kb-article h3 { color: #fff; font-size: 1.15rem; margin: 1.75rem 0 .75rem; scroll-margin-top: 96px; }
.gnc-kb-article p, .gnc-kb-article ul, .gnc-kb-article ol { margin: 0 0 1rem; }
.gnc-kb-article ul, .gnc-kb-article ol { padding-left: 1.5rem; }
.gnc-kb-article ul { list-style: disc; }
.gnc-kb-article ol { list-style: decimal; }
.gnc-kb-article li { margin-bottom: .35rem; padding-left: .25rem; }
.gnc-kb-article li::marker { color: var(--gnc-accent); }
.gnc-kb-article li > ul, .gnc-kb-article li > ol { margin: .35rem 0 0; }
.gnc-kb-article strong { color: #fff; }
.gnc-kb-article code { font-family: var(--gnc-mono); font-size: .875em; color: var(--gnc-ink); background: var(--gnc-surface-2); padding: .1rem .35rem; border-radius: 4px; overflow-wrap: anywhere; }
.gnc-kb-article pre { background: var(--gnc-surface); border: 1px solid var(--gnc-line); border-radius: var(--gnc-radius-sm); padding: 1rem; overflow-x: auto; margin: 0 0 1.25rem; }
.gnc-kb-article pre code { background: none; padding: 0; font-size: .85rem; overflow-wrap: normal; }
.gnc-kb-article blockquote { margin: 0 0 1.25rem; padding: .75rem 1rem; border-left: 3px solid var(--gnc-accent); background: var(--gnc-accent-soft); border-radius: 0 var(--gnc-radius-sm) var(--gnc-radius-sm) 0; }
.gnc-kb-article blockquote p:last-child { margin-bottom: 0; }
/* on narrow screens a table scrolls on its own instead of widening the page; from tablet width it fills the
   column and its cells wrap. Cells keep a minimum width, so a 3-4 column table never collapses into a word per line. */
.gnc-kb-article table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: 0 0 1.5rem; font-size: .925rem; }
@media (min-width: 800px) {
    .gnc-kb-article table { display: table; width: 100%; table-layout: auto; }
}
.gnc-kb-article th, .gnc-kb-article td { border: 1px solid var(--gnc-line); padding: .55rem .75rem; text-align: left; vertical-align: top; min-width: 9rem; overflow-wrap: break-word; }
.gnc-kb-article td code, .gnc-kb-article th code { overflow-wrap: anywhere; white-space: normal; }
.gnc-kb-article th { background: var(--gnc-surface-2); color: #fff; font-weight: 600; }
.gnc-kb-article td:first-child { color: #fff; }
.gnc-kb-article figure { margin: 1.5rem 0 2rem; }
.gnc-kb-article img { cursor: zoom-in; display: block; max-width: 100%; height: auto; border: 1px solid var(--gnc-line); border-radius: var(--gnc-radius-sm); background: #fff; }
.gnc-kb-article figcaption { margin-top: .6rem; color: var(--gnc-muted); font-size: .875rem; }

.gnc-kb-related { margin-top: 3rem; }
.gnc-kb-related h2 { color: #fff; font-size: 1.15rem; margin: 0 0 1rem; }
.gnc-kb-help { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--gnc-line); font-size: .925rem; }