/* ============================================================
   Solaris Knowledge Base — /knowledge-base/, its categories and articles.

   Built from the Knowledge Base handoff (Claude Design). Every value is a
   Solaris Design System token from assets/ds/tokens/, loaded unedited; the
   few literals are the handoff's own measured numbers that have no token
   (36px pill height, 52px row tile, 6px TOC dot …), and they match the
   prototype to the pixel.

   Everything is scoped under .sol-kb, for the reason styles/home.css gives:
   base.css's element defaults would otherwise restyle the site header.

   ONE STRUCTURAL BREAKPOINT, 1024px (--breakpoint-1024), mobile-first, as
   the handoff specifies. Everything else reflows by flex-wrap and auto-fit
   grids. The article's sidebar, contents list and both breadcrumb forms
   are all in the markup; the 1024 query decides which show.

   The site's rules hold here as everywhere: orange type on white is Amber
   Ink (--color-text-accent-ink) only, never white on Princeton Orange, and
   navy is never a section ground (it appears as small marks and the
   webinar card).
   ============================================================ */

/* ---- Page shell -------------------------------------------- */

.sol-kb {
  /* WEB-14, deferred: production ships square buttons. */
  --button-radius: 0px;
  --wrap: calc(var(--layout-max-width) + 2 * var(--layout-gutter));
  --kb-sticky-top: 120px;
  --kb-measure: 68ch;

  background: var(--color-surface-default);
  color: var(--color-text-secondary);
  font: var(--type-body-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* The hero's offset panel bleeds to the gutter; nothing may scroll the
     page sideways. clip, not hidden, so the sticky columns still stick. */
  overflow-x: clip;
}

.sol-kb *,
.sol-kb *::before,
.sol-kb *::after { box-sizing: border-box; }

.sol-kb :where(h1, h2, h3, h4) { margin: 0; color: var(--color-text-primary); }
.sol-kb :where(p, figure, dl, dd) { margin: 0; }
.sol-kb :where(ol, ul) { margin: 0; padding: 0; list-style: none; }
.sol-kb :where(img) { max-width: 100%; display: block; }
.sol-kb :where(a) { color: var(--color-text-link); text-decoration: none; }
.sol-kb :where(a:hover) { color: var(--color-accent-hover); }
.sol-kb :where(strong) { font-weight: 600; color: var(--color-text-primary); }
.sol-kb :where(button) { font: inherit; }
.sol-kb :where(:focus-visible) { outline: 2px solid var(--color-border-strong); outline-offset: 2px; }

.sol-kb .screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* The content column everywhere: 1280 + gutters, centred. */
.sol-kb__wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding-inline: var(--layout-gutter);
}

/* ---- Shared type ------------------------------------------- */

.sol-kb__eyebrow {
  font: var(--type-label-sm);
  letter-spacing: var(--type-label-sm-tracking);
  text-transform: uppercase;
  color: var(--color-text-brand);
}
.sol-kb__eyebrow--amber { color: var(--color-text-accent-ink); }

.sol-kb__label-muted {
  font: var(--type-label-sm);
  letter-spacing: var(--type-label-sm-tracking);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.sol-kb__display {
  font: var(--type-display-xl);
  letter-spacing: var(--type-display-xl-tracking);
  color: var(--color-text-primary);
}

/* Headings are fluid below 1024 and flat above it, as on every designed
   page (CA-2.7); the size tokens keep each style's own line-height. */
.sol-kb__h1 {
  font: var(--type-heading-1);
  font-size: var(--type-heading-1-fluid-size);
  letter-spacing: var(--type-heading-1-tracking);
  color: var(--color-text-primary);
  text-wrap: balance;
}
.sol-kb__h2 {
  font: var(--type-heading-2);
  font-size: var(--type-heading-2-fluid-size);
  letter-spacing: var(--type-heading-2-tracking);
  color: var(--color-text-primary);
}
.sol-kb__h3 {
  font: var(--type-heading-3);
  font-size: var(--type-heading-3-fluid-size);
  letter-spacing: var(--type-heading-3-tracking);
  color: var(--color-text-primary);
}

.sol-kb__lede {
  max-width: 46ch;
  font: var(--type-body-lg);
  color: var(--color-text-secondary);
  text-wrap: pretty;
}
.sol-kb__lede--52 { max-width: 52ch; }
.sol-kb__lede--wide { max-width: 54ch; }

.sol-kb__body { font: var(--type-body-base); color: var(--color-text-secondary); }
.sol-kb__muted { color: var(--color-text-muted); }
.sol-kb__small { font: var(--type-body-sm); }
.sol-kb__strong-link { font-weight: 600; }

/* The icon tile used by list rows, the article header and search results. */
.sol-kb__tile {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
}
.sol-kb__tile img { width: 26px; height: 26px; object-fit: contain; }
.sol-kb__tile--52 { width: 52px; height: 52px; }
.sol-kb__tile--48 { width: 48px; height: 48px; }

/* Pills: "Jump to" and the empty-search category links. */
.sol-kb__pill {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 var(--space-400);
  border-radius: var(--radius-pill);
  background: var(--color-surface-sunken);
  font: var(--type-control-sm);
  color: var(--color-text-primary);
  transition: background-color var(--motion-duration-fast) var(--motion-ease);
}
.sol-kb__pill:hover { background: var(--color-border-default); color: var(--color-text-primary); }

/* The CSS triangle chevron of the toggles and the mobile disclosure. */
.sol-kb__chevron {
  flex: none;
  width: 0;
  height: 0;
  margin: 0 4px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--color-text-primary);
  transition: transform var(--motion-duration-base) var(--motion-ease);
}
details[open] > summary .sol-kb__chevron { transform: rotate(180deg); }

/* ---- The kit's Button and Refrain, in CSS ------------------ */

.sol-kb .sds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-200);
  min-height: var(--target-min);
  border: 0;
  padding: var(--space-500) var(--space-700);
  border-radius: var(--button-radius, 0px);
  font: var(--type-control-base);
  letter-spacing: var(--type-control-base-tracking);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--motion-duration-fast) var(--motion-ease),
              color var(--motion-duration-fast) var(--motion-ease),
              border-color var(--motion-duration-fast) var(--motion-ease);
}
.sol-kb .sds-btn--solid { background: var(--color-accent-default); color: var(--color-text-inverse); }
.sol-kb .sds-btn--solid:hover { background: var(--color-accent-hover); color: var(--color-text-inverse); }
/* Outline label is Amber Ink (WEB-12): Flamingo on white fails at this size. */
.sol-kb .sds-btn--outline {
  background: transparent;
  color: var(--color-text-accent-ink);
  border: 2px solid var(--color-accent-default);
  padding: calc(var(--space-500) - 2px) calc(var(--space-700) - 2px);
}
.sol-kb .sds-btn--outline:hover { border-color: var(--color-accent-hover); color: var(--color-accent-hover); }

.sol-kb .sds-refrain {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-500);
  text-align: center;
}
.sol-kb .sds-refrain--panel {
  background: var(--color-surface-offset);
  border-radius: var(--radius-lg);
  padding: var(--space-800) var(--space-700);
}
.sol-kb .sds-refrain__heading {
  max-width: 22ch;
  font: var(--type-heading-2);
  font-size: var(--type-heading-2-fluid-size);
  letter-spacing: var(--type-heading-2-tracking);
  color: var(--color-text-primary);
  text-wrap: balance;
}
.sol-kb .sds-refrain__body {
  max-width: 54ch;
  font: var(--type-body-lg);
  color: var(--color-text-secondary);
  text-wrap: pretty;
}
.sol-kb .sds-refrain__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-400);
}

/* ============================================================
   Search
   ============================================================ */

.sol-kb__search { position: relative; width: 100%; }
.sol-kb__search-form { margin: 0; }

.sol-kb__search-field {
  display: flex;
  align-items: center;
  gap: var(--space-300);
  height: 60px;
  margin: 0;
  padding: 0 var(--space-400);
  border-radius: var(--radius-sm);
  background: var(--color-surface-default);
  border: 1px solid var(--color-border-default);
  box-shadow: var(--elevation-100);
  cursor: text;
  transition: border-color var(--motion-duration-fast) var(--motion-ease);
}
.sol-kb__search--sm .sol-kb__search-field { height: 48px; box-shadow: none; }
.sol-kb__search-field:focus-within {
  border-color: var(--color-border-strong);
  box-shadow: var(--elevation-focus);
}

.sol-kb__search-icon { flex: none; color: var(--color-text-muted); }

.sol-kb__search-input {
  flex: 1;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: var(--type-body-base);
  color: var(--color-text-primary);
  -webkit-appearance: none;
  appearance: none;
}
.sol-kb__search-input::placeholder { color: var(--color-text-muted); opacity: 1; }
.sol-kb__search-input::-webkit-search-cancel-button { display: none; }
.sol-kb .sol-kb__search-input:focus-visible { outline: 0; }

.sol-kb__search-kbd {
  flex: none;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid var(--color-border-default);
  /* Bootstrap's reboot paints <kbd> dark; this is the design's hairline key. */
  background: transparent;
  box-shadow: none;
  font: var(--type-label-sm);
  color: var(--color-text-muted);
}
.sol-kb__search-field:focus-within .sol-kb__search-kbd,
.sol-kb__search.has-query .sol-kb__search-kbd { display: none; }

.sol-kb__search-clear {
  flex: none;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--color-surface-sunken);
  color: var(--color-text-secondary);
  font: var(--type-control-sm);
  cursor: pointer;
}

.sol-kb__search-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: var(--z-overlay);
  border-radius: var(--radius-md);
  background: var(--color-surface-default);
  border: 1px solid var(--color-border-default);
  box-shadow: var(--elevation-300);
  overflow: hidden;
  text-align: left;
}
.sol-kb__search-panel[hidden] { display: none; }

.sol-kb__results-count {
  display: block;
  padding: var(--space-300) var(--space-400) var(--space-200);
  font: var(--type-label-sm);
  letter-spacing: var(--type-label-sm-tracking);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.sol-kb__results {
  display: flex;
  flex-direction: column;
  padding: 0 var(--space-200) var(--space-200);
}

.sol-kb__result {
  display: flex;
  align-items: center;
  gap: var(--space-300);
  min-height: 52px;
  padding: var(--space-200) var(--space-300);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
}
.sol-kb__result:hover,
.sol-kb__result.is-selected { background: var(--color-surface-sunken); color: var(--color-text-primary); }
.sol-kb__result .sol-kb__tile { width: 36px; height: 36px; border-radius: var(--radius-sm); }
.sol-kb__result .sol-kb__tile img { width: 20px; height: 20px; }
.sol-kb__result-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sol-kb__result-title { font: var(--type-item-sm); color: var(--color-text-primary); }
.sol-kb__result-cat { font: var(--type-body-sm); color: var(--color-text-muted); }
.sol-kb__result-arrow { flex: none; color: var(--color-text-muted); }

.sol-kb__noresults {
  display: flex;
  flex-direction: column;
  gap: var(--space-300);
  padding: var(--space-500);
}
.sol-kb__noresults-title { font: var(--type-item-base); color: var(--color-text-primary); }
.sol-kb__noresults-hint { font: var(--type-body-sm); color: var(--color-text-secondary); }
.sol-kb__noresults-cats { display: flex; flex-wrap: wrap; gap: var(--space-200); }
.sol-kb__noresults-call {
  padding-top: var(--space-300);
  border-top: 1px solid var(--color-border-default);
  font: var(--type-body-sm);
  color: var(--color-text-secondary);
}
.sol-kb__noresults-call a { font-weight: 600; }

/* ============================================================
   Home
   ============================================================ */

/* A. Hero */
.sol-kb__hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-800);
  padding-top: var(--space-800);
  padding-bottom: var(--space-900);
}

.sol-kb__hero-copy {
  position: relative;
  flex: 1 1 440px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-500);
}

.sol-kb__hero-search { max-width: 560px; }

.sol-kb__jump {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-200);
}
.sol-kb__jump-label {
  margin-right: var(--space-100);
  font: var(--type-body-sm);
  color: var(--color-text-muted);
}

.sol-kb__hero-media {
  position: relative;
  flex: 1 1 420px;
  min-width: 0;
  padding-top: var(--layout-offset-step);
}

/* The offset grey panel: the brand's deliberate misalignment. It bleeds to
   the gutter on the right and drops one offset-step below the video. */
.sol-kb__hero-panel {
  position: absolute;
  top: 0;
  right: calc(-1 * var(--layout-gutter));
  bottom: calc(-1 * var(--layout-offset-step));
  left: var(--layout-offset-step);
  border-radius: var(--radius-lg);
  background: var(--color-surface-offset);
}

.sol-kb__hero-doodle {
  position: absolute;
  top: -28px;
  right: 8%;
  z-index: 1;
  width: 88px;
  height: auto;
}

.sol-kb__hero-stack {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-300);
}

.sol-kb__textlink {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-200);
  min-height: var(--target-min);
  font: var(--type-control-sm);
  color: var(--color-text-primary);
}
.sol-kb__textlink:hover { color: var(--color-text-accent-ink); }

/* B. Categories */
.sol-kb__cats {
  display: flex;
  flex-direction: column;
  gap: var(--space-600);
  padding-bottom: var(--layout-section-half);
}

.sol-kb__cats-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-300);
}

.sol-kb__cat-pairs { display: flex; flex-wrap: wrap; gap: var(--space-500); }

.sol-kb__cat-pair {
  flex: 1 1 520px;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: var(--space-500);
}

.sol-kb__cat-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-400);
  padding: var(--space-600);
  border-radius: var(--radius-lg);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-default);
  transition: box-shadow var(--motion-duration-base) var(--motion-ease),
              transform var(--motion-duration-base) var(--motion-ease);
}
.sol-kb__cat-card:hover {
  box-shadow: var(--elevation-200);
  transform: translateY(var(--motion-lift-card));
}

/* Optical bleed: the drawing's shadow sits in the file, so the box is
   pulled out to put the ink on the card's text edge. */
.sol-kb__cat-doodle { width: 96px; height: auto; margin: -8px 0 -16px -6px; }

.sol-kb__cat-name { display: flex; flex-direction: column; gap: var(--space-100); }
.sol-kb__cat-title { font: var(--type-heading-4); color: var(--color-text-primary); }

.sol-kb__cat-top {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-200);
  padding-top: var(--space-400);
  border-top: 1px solid var(--color-border-default);
  font: var(--type-body-sm);
  color: var(--color-text-secondary);
}

.sol-kb__cat-all {
  display: inline-flex;
  align-items: center;
  gap: var(--space-200);
  font: var(--type-control-sm);
  color: var(--color-text-accent-ink);
}

/* C. Support contacts band */
.sol-kb__contacts-band { background: var(--color-surface-sunken); }

.sol-kb__contacts-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-600);
  padding-block: var(--layout-band-inset);
}

.sol-kb__contacts-head { display: flex; flex-direction: column; gap: var(--space-300); }

/* ============================================================
   Contacts grid
   ============================================================ */

.sol-kb__contacts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--space-500);
  align-items: start;
}

.sol-kb__contact-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  background: var(--color-surface-raised);
  box-shadow: var(--elevation-100);
  overflow: hidden;
}

.sol-kb__contact-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-300);
  padding: var(--space-500) var(--space-500) var(--space-300);
}

.sol-kb__contact-group {
  font: var(--type-heading-4);
  letter-spacing: var(--type-heading-4-tracking);
  color: var(--color-text-primary);
}

.sol-kb__contact-label {
  font: var(--type-label-sm);
  letter-spacing: var(--type-label-sm-tracking);
  text-transform: uppercase;
  color: var(--color-text-accent-ink);
}

.sol-kb__people { padding: 0 var(--space-500) var(--space-300); }

.sol-kb__person {
  display: flex;
  flex-direction: column;
  gap: var(--space-200);
  padding: var(--space-400) 0;
  border-top: 1px solid var(--color-border-default);
}

.sol-kb__person-id { display: flex; flex-direction: column; gap: 2px; }
.sol-kb__person-name { font: var(--type-item-base); color: var(--color-text-primary); }
.sol-kb__person-role { font: var(--type-body-sm); color: var(--color-text-muted); text-wrap: pretty; }

.sol-kb__person-links { display: flex; flex-wrap: wrap; gap: var(--space-100) var(--space-400); }

.sol-kb__person-email,
.sol-kb__person-phone {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  font: var(--type-body-sm);
}
.sol-kb__person-email { font-weight: 500; color: var(--color-text-link); overflow-wrap: anywhere; }
.sol-kb__person-email:hover { color: var(--color-text-link); text-decoration: underline; }
.sol-kb__person-phone { font-weight: 600; color: var(--color-text-primary); font-variant-numeric: tabular-nums; }
.sol-kb__person-phone:hover { color: var(--color-text-accent-ink); }

/* ============================================================
   KB band: breadcrumbs + small search
   ============================================================ */

.sol-kb__band { border-bottom: 1px solid var(--color-border-default); }

.sol-kb__band-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-200) var(--space-500);
  padding-block: var(--space-200);
}

.sol-kb__band-search {
  flex: 0 1 360px;
  min-width: min(100%, 240px);
  padding-block: var(--space-200);
}

.sol-kb__crumbs-full {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-200);
  font: var(--type-body-sm);
}
.sol-kb__crumbs-full li { display: flex; align-items: center; gap: var(--space-200); }
.sol-kb__crumbs-full a {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  color: var(--color-text-secondary);
}
.sol-kb__crumbs-full a:hover { color: var(--color-text-link); text-decoration: underline; }
.sol-kb__crumb-sep { color: var(--color-text-muted); }
.sol-kb__crumbs-full [aria-current] { font-weight: 600; color: var(--color-text-primary); }

.sol-kb__crumbs-back {
  display: none;
  align-items: center;
  gap: var(--space-200);
  min-height: var(--target-min);
  font: var(--type-control-sm);
  color: var(--color-text-primary);
}
.sol-kb__crumbs-back:hover { color: var(--color-text-accent-ink); }

/* Below 1024 an article's trail is one back link to its category. */
@media (max-width: 1023.98px) {
  .sol-kb__crumbs--collapses .sol-kb__crumbs-full { display: none; }
  .sol-kb__crumbs--collapses .sol-kb__crumbs-back { display: inline-flex; }
}

/* ============================================================
   Category
   ============================================================ */

.sol-kb__cat-intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-700);
  padding-top: var(--space-700);
  padding-bottom: var(--space-800);
}

/* Scrolls sideways on a phone, bleeding to the viewport edge. */
.sol-kb__tabs {
  display: flex;
  gap: var(--space-200);
  overflow-x: auto;
  margin: 0 calc(-1 * var(--layout-gutter));
  padding: var(--space-100) var(--layout-gutter);
  scrollbar-width: none;
}
.sol-kb__tabs::-webkit-scrollbar { display: none; }

.sol-kb__tab {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-200);
  min-height: var(--target-min);
  padding: 0 var(--space-500);
  border-radius: var(--radius-pill);
  background: var(--color-surface-sunken);
  font: var(--type-control-base);
  color: var(--color-text-primary);
  transition: background-color var(--motion-duration-fast) var(--motion-ease);
}
.sol-kb__tab:hover { background: var(--color-border-default); color: var(--color-text-primary); }
.sol-kb__tab-count { color: var(--color-text-muted); }

/* Black on Princeton Orange — never white (ruled). */
.sol-kb__tab.is-current,
.sol-kb__tab.is-current:hover {
  background: var(--color-accent-highlight);
  color: var(--color-on-accent-highlight);
  font: var(--type-control-sm);
}
.sol-kb__tab.is-current .sol-kb__tab-count { color: inherit; font-weight: 500; opacity: .7; }

.sol-kb__cat-intro-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-700) var(--space-800);
}

.sol-kb__cat-intro-copy {
  flex: 1 1 440px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-400);
}
.sol-kb__cat-intro-doodle { width: 88px; height: auto; }

.sol-kb__cat-intro-video { flex: 1 1 400px; min-width: 0; }

.sol-kb__list-section { padding-bottom: var(--layout-section-half); }

.sol-kb__list-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-300);
  padding-bottom: var(--space-400);
}

.sol-kb__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 520px), 1fr));
  column-gap: var(--space-600);
  border-top: 1px solid var(--color-border-default);
}
.sol-kb__list > li { border-bottom: 1px solid var(--color-border-default); }

/* The hover tint bleeds 12px past the rule on both sides. */
.sol-kb__row {
  display: flex;
  align-items: center;
  gap: var(--space-400);
  min-height: 96px;
  margin: 0 calc(-1 * var(--space-300));
  padding: var(--space-400) var(--space-300);
  border-radius: var(--radius-md);
  transition: background-color var(--motion-duration-fast) var(--motion-ease);
}
.sol-kb__row:hover { background: var(--color-surface-sunken); }

.sol-kb__row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-100); }
.sol-kb__row-title { font: var(--type-item-lg); color: var(--color-text-primary); }
.sol-kb__row-summary {
  font: var(--type-body-sm);
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sol-kb__row-arrow {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font: var(--type-item-base);
  color: var(--color-text-primary);
}

/* ============================================================
   Article
   ============================================================ */

.sol-kb__article-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-700);
  align-items: start;
  padding-top: var(--space-700);
  padding-bottom: var(--space-900);
}

.sol-kb__aside,
.sol-kb__toc-col { display: none; }

@media (min-width: 1024px) { /* cite: --breakpoint-1024 */
  .sol-kb__article-grid { grid-template-columns: 248px minmax(0, 1fr) 200px; }
  .sol-kb__article-grid--no-toc { grid-template-columns: 248px minmax(0, 1fr); }

  .sol-kb__aside {
    position: sticky;
    top: var(--kb-sticky-top);
    display: flex;
    flex-direction: column;
    gap: var(--space-600);
  }
  .sol-kb__toc-col { display: block; position: sticky; top: var(--kb-sticky-top); }

  .sol-kb__disclosure,
  .sol-kb__promo-narrow { display: none; }
}

.sol-kb__article {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-500);
}

.sol-kb__article-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-400);
  padding-bottom: var(--space-200);
}
.sol-kb__article-kicker { display: flex; align-items: center; gap: var(--space-300); }

.sol-kb__article-foot {
  padding-top: var(--space-600);
  margin-top: var(--space-300);
  border-top: 1px solid var(--color-border-default);
}

/* Sidebar */
.sol-kb__sidebar { display: flex; flex-direction: column; gap: var(--space-600); }
.sol-kb__sidebar-cat { display: flex; flex-direction: column; gap: var(--space-300); }

.sol-kb__sidebar-head { display: flex; align-items: center; gap: var(--space-300); }
.sol-kb__sidebar-doodle { flex: none; width: 56px; height: auto; margin: -4px -8px -12px -4px; }
.sol-kb__sidebar-head-text { display: flex; flex-direction: column; gap: 2px; }
.sol-kb__sidebar-cat-title { font: var(--type-item-base); color: var(--color-text-primary); }

.sol-kb__nav-list { display: flex; flex-direction: column; gap: 2px; }

.sol-kb__nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-300);
  min-height: var(--target-min);
  padding: var(--space-200) var(--space-300);
  border-radius: var(--radius-md);
  font: var(--type-body-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
  transition: background-color var(--motion-duration-fast) var(--motion-ease);
}
.sol-kb__nav-item img { flex: none; width: 20px; height: 20px; object-fit: contain; opacity: .75; }
.sol-kb__nav-item:hover { background: var(--color-surface-sunken); color: var(--color-text-secondary); }
.sol-kb__nav-item.is-current,
.sol-kb__nav-item.is-current:hover {
  background: var(--color-accent-highlight-subtle);
  font: var(--type-item-sm);
  color: var(--color-text-primary);
}
.sol-kb__nav-item.is-current img { opacity: 1; }

.sol-kb__sidebar-others {
  display: flex;
  flex-direction: column;
  gap: var(--space-200);
  padding-top: var(--space-500);
  border-top: 1px solid var(--color-border-default);
}

.sol-kb__other {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 40px;
  font: var(--type-body-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
}
.sol-kb__other:hover { color: var(--color-text-link); }
.sol-kb__other-count { color: var(--color-text-muted); font-variant-numeric: tabular-nums; }

/* Mobile category disclosure */
.sol-kb__disclosure {
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface-default);
}

.sol-kb__disclosure-button {
  display: flex;
  align-items: center;
  gap: var(--space-300);
  min-height: 56px;
  padding: 0 var(--space-400);
  cursor: pointer;
  list-style: none;
}
.sol-kb__disclosure-button::-webkit-details-marker { display: none; }
.sol-kb__disclosure-doodle { flex: none; width: 44px; height: auto; margin: -2px -8px -10px -6px; }
.sol-kb__disclosure-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.sol-kb__disclosure-title { font: var(--type-item-sm); color: var(--color-text-primary); }

.sol-kb__disclosure-list {
  display: flex;
  flex-direction: column;
  padding: var(--space-200);
  border-top: 1px solid var(--color-border-default);
}

.sol-kb__disclosure-item {
  display: flex;
  align-items: center;
  gap: var(--space-300);
  min-height: 48px;
  padding: 0 var(--space-300);
  border-radius: var(--radius-sm);
  font: var(--type-body-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
}
.sol-kb__disclosure-item img { width: 20px; height: 20px; object-fit: contain; opacity: .75; }
.sol-kb__disclosure-item.is-current {
  background: var(--color-accent-highlight-subtle);
  font: var(--type-item-sm);
  color: var(--color-text-primary);
}
.sol-kb__disclosure-item.is-current img { opacity: 1; }

/* On this page */
.sol-kb__toc { display: flex; flex-direction: column; gap: var(--space-300); }
.sol-kb__toc-list { display: flex; flex-direction: column; gap: 2px; }

.sol-kb__toc-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-200);
  padding: 6px 0;
  font: var(--type-body-sm);
  color: var(--color-text-secondary);
}
.sol-kb__toc-item:hover { color: var(--color-text-link); }
.sol-kb__toc-dot { flex: none; width: 6px; height: 6px; margin-top: 8px; border-radius: 50%; }
.sol-kb__toc-item.is-active { font-weight: 600; color: var(--color-text-primary); }
.sol-kb__toc-item.is-active .sol-kb__toc-dot { background: var(--color-accent-highlight); }

.sol-kb__toc-top {
  margin-top: var(--space-300);
  font: var(--type-body-sm);
  color: var(--color-text-muted);
}
.sol-kb__toc-top:hover { color: var(--color-text-link); }

/* Previous / Next */
.sol-kb__prevnext { display: flex; flex-wrap: wrap; gap: var(--space-400); }

.sol-kb__pn {
  flex: 1 1 240px;
  display: flex;
  align-items: center;
  gap: var(--space-400);
  min-height: 88px;
  padding: var(--space-400) var(--space-500);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  background: var(--color-surface-raised);
  transition: box-shadow var(--motion-duration-base) var(--motion-ease),
              transform var(--motion-duration-base) var(--motion-ease);
}
.sol-kb__pn:hover { box-shadow: var(--elevation-200); transform: translateY(var(--motion-lift-card)); }
.sol-kb__pn--next { flex-direction: row-reverse; text-align: right; }

.sol-kb__pn-arrow {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-surface-sunken);
  display: flex;
  align-items: center;
  justify-content: center;
  font: var(--type-item-base);
  color: var(--color-text-primary);
}
.sol-kb__pn-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sol-kb__pn-title { font: var(--type-item-lg); color: var(--color-text-primary); }

/* "Still stuck" */
.sol-kb__stuck {
  display: flex;
  flex-direction: column;
  gap: var(--space-600);
  padding-bottom: var(--layout-section-half);
}

/* ============================================================
   Content blocks (the handoff's table, 1–20)
   ============================================================ */

.sol-kb__block { min-width: 0; scroll-margin-top: var(--kb-sticky-top); }

/* Rich text runs */
.sol-kb__block strong,
.sol-kb__in-p strong,
.sol-kb__li-text strong { font-weight: 600; color: var(--color-text-primary); }
.sol-kb__p a,
.sol-kb__in-p a,
.sol-kb__li-text a,
.sol-kb__table a {
  color: var(--color-text-link);
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
.sol-kb__code {
  font-family: var(--font-family-mono);
  font-size: .9em;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: var(--color-surface-sunken);
  color: var(--color-text-primary);
  overflow-wrap: anywhere;
}

/* 1, 2. Headings: one step down inside articles (ruled for this project). */
.sol-kb__bh2 {
  margin-top: var(--space-500);
  font: var(--type-heading-3);
  font-size: var(--type-heading-3-fluid-size);
  letter-spacing: var(--type-heading-3-tracking);
  color: var(--color-text-primary);
  text-wrap: balance;
}
.sol-kb__bh3 {
  margin-top: var(--space-300);
  font: var(--type-heading-4);
  letter-spacing: var(--type-heading-4-tracking);
  color: var(--color-text-primary);
  text-wrap: balance;
}

/* 3. Paragraph */
.sol-kb__p {
  max-width: var(--kb-measure);
  font: var(--type-body-base);
  color: var(--color-text-secondary);
  text-wrap: pretty;
}

/* 4, 5. Lists */
.sol-kb__list-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-300);
  max-width: var(--kb-measure);
}
.sol-kb__li { display: flex; gap: var(--space-300); align-items: flex-start; }
.sol-kb__li-dot {
  flex: none;
  width: 7px;
  height: 7px;
  margin: 10px 4px 0 2px;
  border-radius: 50%;
  background: var(--color-accent-highlight);
}
.sol-kb__li-n {
  flex: none;
  min-width: 20px;
  padding-top: 2px;
  font: var(--type-item-base);
  color: var(--color-text-accent-ink);
  font-variant-numeric: tabular-nums;
}
.sol-kb__li-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-300); }
.sol-kb__li-text { font: var(--type-body-base); color: var(--color-text-secondary); text-wrap: pretty; }
.sol-kb__li-body > .sol-kb__list-block { margin-top: 0; }

/* Paragraphs inside containers */
.sol-kb__in-p { font: var(--type-body-base); color: var(--color-text-secondary); text-wrap: pretty; }

/* 6, 7. Callouts */
.sol-kb__callout {
  display: flex;
  gap: var(--space-400);
  padding: var(--space-500);
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
}
.sol-kb__callout-mark {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-invert);
  color: var(--color-on-invert);
  font: var(--type-control-sm);
  font-family: var(--font-family-display);
}
.sol-kb__callout-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-300); }
.sol-kb__callout .sol-kb__code { background: var(--color-surface-default); }

.sol-kb__callout--important {
  background: var(--color-accent-subtle);
  border: 1px solid var(--color-accent-default);
}
.sol-kb__callout--important .sol-kb__callout-mark { background: var(--color-accent-default); color: var(--color-on-accent); }
.sol-kb__callout--important .sol-kb__in-p,
.sol-kb__callout--important .sol-kb__li-text { color: var(--color-text-primary); }
.sol-kb__callout--important .sol-kb__in-p a { color: var(--color-text-primary); }
.sol-kb__callout-label {
  padding-top: 6px;
  font: var(--type-label-sm);
  letter-spacing: var(--type-label-sm-tracking);
  text-transform: uppercase;
  color: var(--color-text-accent-ink);
}

/* 8. Tip / promo: the navy card. */
.sol-kb__tip {
  display: flex;
  flex-direction: column;
  gap: var(--space-400);
  padding: var(--space-600);
  border-radius: var(--radius-lg);
  background: var(--color-surface-invert);
  overflow: hidden;
}
.sol-kb__tip-eyebrow {
  font: var(--type-label-sm);
  letter-spacing: var(--type-label-sm-tracking);
  text-transform: uppercase;
  color: var(--color-accent-highlight);
}
.sol-kb__tip-text,
.sol-kb__tip .sol-kb__in-p {
  max-width: 40ch;
  font: var(--type-item-lg);
  color: var(--color-on-invert);
  text-wrap: pretty;
}
.sol-kb__tip .sol-kb__in-p strong { color: inherit; }
.sol-kb__tip-actions { display: flex; }

/* 9. Key facts panel */
.sol-kb__facts {
  border-radius: var(--radius-lg);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-default);
  box-shadow: var(--elevation-100);
  overflow: hidden;
}
.sol-kb__facts-body {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-500) var(--space-700);
  padding: var(--space-600);
}
.sol-kb__facts-lead { flex: 1 1 200px; display: flex; flex-direction: column; gap: var(--space-100); }
.sol-kb__facts-value {
  font: var(--type-display-lg);
  letter-spacing: var(--type-display-lg-tracking);
  color: var(--color-text-accent-ink);
  font-variant-numeric: tabular-nums;
}
.sol-kb__facts-sub { font: var(--type-item-base); color: var(--color-text-primary); }
.sol-kb__facts-rows { flex: 1 1 240px; display: flex; flex-direction: column; align-self: center; }
.sol-kb__facts-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-400);
  padding: var(--space-300) 0;
  border-bottom: 1px solid var(--color-border-default);
}
.sol-kb__facts-row dt { font: var(--type-body-base); color: var(--color-text-secondary); }
.sol-kb__facts-row dd { text-align: right; font: var(--type-item-base); color: var(--color-text-primary); }
.sol-kb__facts-foot {
  display: flex;
  align-items: center;
  gap: var(--space-300);
  padding: var(--space-400) var(--space-600);
  background: var(--color-surface-sunken);
}
.sol-kb__facts-foot + .sol-kb__facts-foot { padding-top: 0; }
.sol-kb__facts-check {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent-highlight);
  color: var(--color-on-accent-highlight);
  font: var(--type-control-sm);
}
.sol-kb__facts-foot-text { font: var(--type-item-base); color: var(--color-text-primary); }
.sol-kb__facts-foot-text a { color: var(--color-text-link); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }

/* 10. Step + screenshot */
.sol-kb__step {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  column-gap: var(--space-400);
  padding-bottom: var(--space-500);
}
.sol-kb__step-rail { position: relative; display: flex; justify-content: center; }
.sol-kb__step-n {
  position: relative;
  z-index: 1;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-invert);
  color: var(--color-on-invert);
  font: var(--type-control-sm);
  font-variant-numeric: tabular-nums;
}
/* The connector runs from this circle down to the next step's. */
.sol-kb__step:not(.is-last) .sol-kb__step-rail::after {
  content: "";
  position: absolute;
  top: 36px;
  bottom: calc(-1 * var(--space-700));
  left: 17px;
  width: 2px;
  background: var(--color-border-default);
}
.sol-kb__step-body { display: flex; flex-direction: column; gap: var(--space-400); min-width: 0; }
.sol-kb__step-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 36px;
  justify-content: center;
}
.sol-kb__step-head .sol-kb__bh3 { margin-top: 0; }
.sol-kb__step-kicker {
  font: var(--type-label-sm);
  letter-spacing: var(--type-label-sm-tracking);
  text-transform: uppercase;
  color: var(--color-text-accent-ink);
}

/* 11. Collapsible step */
.sol-kb__toggle {
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: var(--color-surface-default);
  overflow: hidden;
}
.sol-kb__toggle-button {
  display: flex;
  align-items: center;
  gap: var(--space-300);
  min-height: 64px;
  padding: var(--space-300) var(--space-500);
  cursor: pointer;
  list-style: none;
  transition: background-color var(--motion-duration-fast) var(--motion-ease);
}
.sol-kb__toggle-button::-webkit-details-marker { display: none; }
.sol-kb__toggle-button:hover { background: var(--color-surface-sunken); }
.sol-kb__toggle-n {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-invert);
  color: var(--color-on-invert);
  font: var(--type-control-sm);
}
.sol-kb__toggle-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sol-kb__toggle-title { font: var(--type-item-base); color: var(--color-text-primary); text-wrap: pretty; }
.sol-kb__toggle-count { flex: none; font: var(--type-label-sm); color: var(--color-text-muted); }
.sol-kb__toggle-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-400);
  padding: var(--space-500);
  border-top: 1px solid var(--color-border-default);
}
.sol-kb__toggle-body > .sol-kb__in-p { max-width: var(--kb-measure); }

/* 12. Image, and every enlargeable screenshot */
.sol-kb__figure { display: flex; flex-direction: column; gap: var(--space-200); }

.sol-kb__zoom {
  position: relative;
  display: block;
  width: 100%;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface-sunken);
  cursor: zoom-in;
  transition: box-shadow var(--motion-duration-base) var(--motion-ease);
}
.sol-kb__zoom:hover { box-shadow: var(--elevation-200); }
.sol-kb__zoom img { display: block; width: 100%; height: auto; }
.sol-kb__zoom--sm { margin-top: var(--space-200); border-radius: var(--radius-sm); }
.sol-kb__zoom--white { background: var(--color-surface-default); }
.sol-kb__zoom-pill {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-default);
  box-shadow: var(--elevation-100);
  font: var(--type-label-sm);
  color: var(--color-text-primary);
}

.sol-kb__caption { font: var(--type-body-sm); color: var(--color-text-muted); }
.sol-kb__caption--video { display: flex; gap: var(--space-200); }
.sol-kb__caption-title { font-weight: 600; color: var(--color-text-primary); }

/* 13, 14. Video: Loom and MP4, 16:9 on navy */
.sol-kb__video {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface-invert);
}
.sol-kb__video iframe,
.sol-kb__video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.sol-kb__video video { object-fit: contain; background: var(--color-surface-invert); }

/* 15. Link card */
.sol-kb__linkcard {
  display: flex;
  align-items: center;
  gap: var(--space-400);
  min-height: 72px;
  padding: var(--space-300) var(--space-500);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
  transition: box-shadow var(--motion-duration-base) var(--motion-ease),
              transform var(--motion-duration-base) var(--motion-ease);
}
.sol-kb__linkcard:hover { box-shadow: var(--elevation-200); transform: translateY(var(--motion-lift-card)); }
.sol-kb__linkcard-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sol-kb__linkcard-label { font: var(--type-item-lg); color: var(--color-text-primary); }
.sol-kb__linkcard-sub { font: var(--type-body-sm); color: var(--color-text-muted); overflow-wrap: anywhere; }
.sol-kb__linkcard-go {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent-default);
  color: var(--color-on-accent);
  font: var(--type-item-lg);
}

/* 16. Menu path */
.sol-kb__path {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-300);
  padding: var(--space-300) var(--space-400);
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
}
.sol-kb__path-parts { flex: 1 1 auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-200); }
.sol-kb__path-chip {
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  background: var(--color-surface-default);
  border: 1px solid var(--color-border-default);
  font-family: var(--font-family-mono);
  font-size: 14px;
  color: var(--color-text-primary);
}
.sol-kb__path-sep { color: var(--color-text-muted); }
.sol-kb__path-copy {
  flex: none;
  min-height: var(--target-min);
  padding: 0 var(--space-400);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  font: var(--type-control-sm);
  color: var(--color-text-accent-ink);
  cursor: pointer;
}
.sol-kb__path-copy:hover { background: var(--color-surface-default); }

/* 17. Quote / Note */
.sol-kb__note {
  display: flex;
  flex-direction: column;
  gap: var(--space-200);
  padding: var(--space-400) var(--space-500);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
}
.sol-kb__note-label {
  font: var(--type-label-sm);
  letter-spacing: var(--type-label-sm-tracking);
  text-transform: uppercase;
  color: var(--color-text-accent-ink);
}
.sol-kb__note .sol-kb__in-p { font-style: italic; }
.sol-kb__note .sol-kb__in-p em { font-style: normal; }

/* 18. Footnote / disclaimer */
.sol-kb__footnote {
  display: flex;
  flex-direction: column;
  gap: var(--space-200);
  margin-top: var(--space-400);
  padding-top: var(--space-500);
  border-top: 1px solid var(--color-border-default);
}
.sol-kb__footnote .sol-kb__in-p { max-width: var(--kb-measure); font: var(--type-body-sm); }
.sol-kb__footnote strong { font-weight: 700; }

/* 19. Table */
.sol-kb__table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
}
.sol-kb__table { min-width: 560px; width: 100%; border-collapse: collapse; }
.sol-kb__table th {
  padding: var(--space-300) var(--space-400);
  background: var(--color-surface-sunken);
  font: var(--type-label-base);
  color: var(--color-text-primary);
  text-align: left;
  white-space: nowrap;
}
.sol-kb__table td {
  padding: var(--space-300) var(--space-400);
  border-top: 1px solid var(--color-border-default);
  font: var(--type-body-sm);
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
}

/* 20. Badges */
.sol-kb__badges { display: flex; flex-wrap: wrap; gap: var(--space-300); }
.sol-kb__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-200);
  min-height: 40px;
  padding: 0 var(--space-400);
  border-radius: var(--radius-pill);
  background: var(--color-surface-sunken);
}
.sol-kb__badge--good { background: var(--color-accent-highlight-subtle); }
.sol-kb__badge-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent-highlight); }
.sol-kb__badge-label { font: var(--type-body-sm); color: var(--color-text-secondary); }
.sol-kb__badge-value { font: var(--type-item-sm); color: var(--color-text-primary); }

/* ============================================================
   Lightbox
   ============================================================ */

.sol-kb-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000; /* above the sticky site header, whose own z sits above --z-overlay */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-400);
  padding: var(--space-500);
  background: var(--color-surface-invert);
  cursor: zoom-out;
}
.sol-kb-lightbox[hidden] { display: none; }
.sol-kb-lightbox img {
  max-width: 100%;
  max-height: calc(100% - 96px);
  object-fit: contain;
  border-radius: var(--radius-sm);
  box-shadow: var(--elevation-300);
  background: var(--color-surface-default);
}
.sol-kb-lightbox__close {
  position: absolute;
  top: var(--space-400);
  right: var(--space-400);
  min-height: var(--target-min);
  padding: 0 var(--space-500);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-surface-on-invert);
  color: var(--color-on-invert);
  font: var(--type-control-sm);
  cursor: pointer;
}
.sol-kb-lightbox__close:hover { background: var(--color-surface-on-invert-hover); }
.sol-kb-lightbox__hint { font: var(--type-body-sm); color: var(--color-on-invert-muted); }
.sol-kb-lightbox :focus-visible { outline: 2px solid var(--color-on-invert); outline-offset: 2px; }

/* ============================================================
   Motion
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .sol-kb *,
  .sol-kb *::before,
  .sol-kb *::after,
  .sol-kb-lightbox * {
    transition: none !important;
    animation: none !important;
  }
  .sol-kb__cat-card:hover,
  .sol-kb__pn:hover,
  .sol-kb__linkcard:hover { transform: none; }
}