/* Knowledge Base: the help center's own blocks (CSS.md; kb/plan.md 3.3).
   Search and "Was this helpful?" are global.css's, which every app and the
   help widget's frame draw alike. */

/* A help center is read beside its navigation: every KB page takes the
   wide measure (72rem) so the article's three zones fit at 1280, the
   header and footer included so their edges line up with the page's. Each
   block inside keeps its own measure: the text at 38rem. */
.site .container { max-width: var(--max-width-wide); }

/* The home's heading block: the question and the search box, centred. */
.kb-hero { padding-block: var(--space-16) var(--space-4); text-align: center; }
.kb-hero__title { margin: 0 0 var(--space-6); font-size: clamp(var(--text-3xl), 6vw, var(--text-4xl)); font-weight: 650; letter-spacing: -0.028em; line-height: 1.1; text-wrap: balance; }
.kb-hero .search-form { max-width: 40rem; margin-inline: auto; }

.kb-section { margin-block-start: var(--space-16); }
.kb-section__title { margin: 0 0 var(--space-6); font-size: var(--text-xl); font-weight: var(--weight-semibold); }

/* The categories: quiet tonal cards, name, one line, a count. */
.kb-categories { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: var(--space-4); }
.kb-categories > li { margin: 0; padding: 0; }
.kb-category { display: flex; flex-direction: column; gap: var(--space-2); height: 100%; padding: var(--space-6); background: var(--paper-2); border: 1px solid transparent; border-radius: var(--radius-md); color: var(--color-fg); text-decoration: none; transition: border-color var(--duration) var(--ease); }
.kb-category:hover { border-color: var(--line); }
.kb-category__name { font-size: var(--text-md); font-weight: var(--weight-semibold); }
.kb-category__desc { font-size: var(--text-sm); color: var(--color-fg-muted); }
.kb-category__count { margin-top: auto; padding-top: var(--space-2); font-size: var(--text-xs); color: var(--color-fg-subtle); }

/* A list of articles: the title, then its excerpt or its place. */
.kb-list { list-style: none; margin: 0; padding: 0; }
.kb-list__item { margin: 0; padding-inline: 0; padding-block: var(--space-4); border-bottom: 1px solid var(--line-soft); }
.kb-list__item:first-child { padding-top: 0; }
.kb-list__title { font-weight: var(--weight-medium); color: var(--color-fg); text-decoration: none; }
.kb-list__title:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.kb-list__note { display: block; margin-top: var(--space-1); font-size: var(--text-sm); color: var(--color-fg-muted); }
@media (min-width: 768px) {
  .kb-list--two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-12); }
  .kb-list--two .kb-list__item:nth-child(2) { padding-top: 0; }
}

/* Breadcrumbs: the path above the title, a slash between the steps. */
.kb-breadcrumbs ol { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-fg-muted); }
.kb-breadcrumbs li { margin: 0; padding: 0; }
.kb-breadcrumbs li + li::before { content: "/"; margin-inline-end: var(--space-2); color: var(--color-fg-subtle); }
.kb-breadcrumbs a { color: inherit; text-decoration: none; }
.kb-breadcrumbs a:hover { color: var(--color-fg); text-decoration: underline; }

/* The reading layout: the search on top; the category's articles, the
   text and "On this page" beside each other at 1024 and wider; at a
   phone's width one column, in the order search, title, contents, text,
   then the category's articles. */
.kb-doc { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--space-8); padding-block-start: var(--space-8); grid-template-areas: "search" "head" "aside" "main" "nav"; }
@media (max-width: 1023px) { .kb-doc:not(:has(> .kb-doc__aside)) { grid-template-areas: "search" "head" "main" "nav"; } }
.kb-doc__search { grid-area: search; max-width: 28rem; width: 100%; }
.kb-doc__head { grid-area: head; }
.kb-doc__aside { grid-area: aside; }
.kb-doc__main { grid-area: main; min-width: 0; max-width: var(--max-width-narrow); }
.kb-doc__nav { grid-area: nav; padding-top: var(--space-8); border-top: 1px solid var(--line-soft); font-size: var(--text-sm); }
.kb-doc__head .page__title { margin-bottom: var(--space-3); }
.kb-doc__aside .toc { margin: 0; }
@media (min-width: 1024px) {
  .kb-doc { grid-template-columns: 13rem minmax(0, var(--max-width-narrow)) 11rem; column-gap: var(--space-12); row-gap: var(--space-6); grid-template-areas: "search search search" "nav head aside" "nav main aside"; grid-template-rows: auto auto 1fr; }
  .kb-doc__nav { padding-top: 0; border-top: 0; align-self: start; position: sticky; top: var(--space-8); }
  .kb-doc__aside { align-self: start; position: sticky; top: var(--space-8); }
}
.kb-nav__title { margin: 0 0 var(--space-3); font-weight: var(--weight-medium); }
.kb-nav__title a { color: var(--color-fg); text-decoration: none; }
.kb-nav__group { margin: var(--space-4) 0 var(--space-2); font-size: var(--text-xs); color: var(--color-fg-subtle); }
.kb-nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.kb-nav__list li { margin: 0; padding: 0; }
.kb-nav__link { display: block; padding-block: var(--space-1); padding-inline-start: var(--space-3); border-inline-start: 1px solid var(--line-soft); color: var(--color-fg-muted); text-decoration: none; line-height: 1.4; }
.kb-nav__link:hover { color: var(--color-fg); }
.kb-nav__link[aria-current="page"] { color: var(--color-fg); font-weight: var(--weight-medium); border-inline-start-color: var(--ink); }
@media (max-width: 640px) { .kb-nav__link { min-height: 44px; display: flex; align-items: center; } }

/* A category page: each sub-category a headed section of its own. */
.kb-group { margin-block-start: var(--space-12); scroll-margin-top: var(--space-8); }
.kb-group__title { margin: 0 0 var(--space-4); font-size: var(--text-lg); font-weight: var(--weight-semibold); }

/* Past twelve top-level categories the home lists them as a compact index,
   by name, each with its count, in columns (decision 22). */
.kb-index { list-style: none; margin: 0; padding: 0; columns: 16rem auto; column-gap: var(--space-12); }
.kb-index__item { margin: 0; padding-block: var(--space-2); break-inside: avoid; border-bottom: 1px solid var(--line-soft); }
.kb-index__name { font-weight: var(--weight-medium); color: var(--color-fg); text-decoration: none; }
.kb-index__name:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.kb-index__count { font-size: var(--text-sm); color: var(--color-fg-subtle); }
@media (max-width: 640px) { .kb-index__item { min-height: 44px; display: flex; align-items: center; gap: var(--space-2); } }

/* The search page keeps the reading measure. */
.kb-search { max-width: var(--max-width-narrow); }

/* After a No, "Was this helpful?" says the contact line in its own block;
   the page's line under it goes, so the page never says it twice (the
   server leaves it out when the answer came without JavaScript). */
body:has(#feedback .feedback__note:not(.feedback__error)) .kb-contact {
  display: none;
}