/* ==========================================================================
   EVPS Knowledgebase presentation layer
   --------------------------------------------------------------------------
   Styles the structure EVPS Knowledgebase Pro emits: language-tagged <pre>
   blocks, .ekp-table-scroll wrappers and stable heading ids.

   Everything is built on the theme's --evps-* tokens so it adapts to light and
   dark automatically. No hardcoded hex values, no external fonts, no CDN.
   ========================================================================== */

/* ---------------------------------------------------------------- layout */

.evps-kb {
  --kb-code-bg: color-mix(in srgb, var(--evps-text) 4%, var(--evps-surface));
  --kb-code-border: var(--evps-border-subtle, var(--evps-border));
  --kb-inline-bg: color-mix(in srgb, var(--evps-primary) 10%, transparent);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--evps-space-5);
}

@media (min-width: 1100px) {
  .evps-kb--with-toc {
    grid-template-columns: minmax(0, 1fr) 260px;
    align-items: start;
  }
}

/* Cap the measure: long lines are physically harder to read. */
.evps-article__body {
  max-width: 78ch;
  font-size: 1.02rem;
  line-height: 1.72;
  color: var(--evps-text);
}

.evps-kb--with-toc .evps-article__body {
  max-width: none;
}

/* ------------------------------------------------------------ typography */

.evps-article__body > * + * { margin-top: var(--evps-space-4); }

.evps-article__body h2,
.evps-article__body h3,
.evps-article__body h4 {
  margin-top: var(--evps-space-6);
  margin-bottom: var(--evps-space-3);
  line-height: 1.3;
  font-weight: var(--evps-fw-bold, 700);
  scroll-margin-top: 90px;            /* anchor links clear the sticky header */
}

.evps-article__body h2 {
  font-size: 1.45rem;
  padding-bottom: var(--evps-space-2);
  border-bottom: 1px solid var(--evps-border-subtle, var(--evps-border));
}

.evps-article__body h3 { font-size: 1.2rem; }
.evps-article__body h4 { font-size: 1.05rem; color: var(--evps-text-muted); }

/* A quiet anchor that only appears on hover. */
.evps-article__body h2[id]:hover .kb-anchor,
.evps-article__body h3[id]:hover .kb-anchor { opacity: 1; }

.kb-anchor {
  opacity: 0;
  margin-left: .4em;
  font-size: .75em;
  color: var(--evps-primary);
  text-decoration: none;
  transition: opacity .15s ease;
}

.evps-article__body ul,
.evps-article__body ol { padding-left: 1.4em; }
.evps-article__body li + li { margin-top: .35em; }
.evps-article__body li > ul,
.evps-article__body li > ol { margin-top: .35em; }

.evps-article__body a {
  color: var(--evps-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.evps-article__body blockquote {
  margin: var(--evps-space-4) 0;
  padding: var(--evps-space-3) var(--evps-space-4);
  border-left: 3px solid var(--evps-primary);
  background: color-mix(in srgb, var(--evps-primary) 6%, transparent);
  border-radius: 0 var(--evps-radius-sm) var(--evps-radius-sm) 0;
  color: var(--evps-text-muted);
}

.evps-article__body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--evps-radius-md);
  border: 1px solid var(--evps-border-subtle, var(--evps-border));
}

/* ------------------------------------------------------------------ code */

.evps-article__body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .9em;
  background: var(--kb-inline-bg);
  padding: .15em .4em;
  border-radius: 4px;
  word-break: break-word;
}

/* A <pre> wrapper carries the language badge and the copy control. */
.kb-code {
  position: relative;
  margin: var(--evps-space-5) 0;
  border: 1px solid var(--kb-code-border);
  border-radius: var(--evps-radius-md);
  background: var(--kb-code-bg);
  overflow: hidden;
}

.kb-code__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--evps-space-3);
  padding: .45rem .75rem;
  background: color-mix(in srgb, var(--evps-text) 6%, transparent);
  border-bottom: 1px solid var(--kb-code-border);
}

.kb-code__lang {
  font-size: .68rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  font-weight: var(--evps-fw-semibold, 600);
  color: var(--evps-text-muted);
}

.kb-copy {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  font-size: .72rem;
  padding: .25rem .6rem;
  border-radius: var(--evps-radius-sm);
  border: 1px solid var(--kb-code-border);
  background: var(--evps-surface);
  color: var(--evps-text-muted);
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}

.kb-copy:hover { color: var(--evps-primary); border-color: var(--evps-primary); }
.kb-copy--done { color: var(--evps-success); border-color: var(--evps-success); }

.evps-article__body pre {
  margin: 0;
  padding: var(--evps-space-4);
  overflow-x: auto;
  background: transparent;
  border: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .86rem;
  line-height: 1.6;
  tab-size: 4;
}

.evps-article__body pre code {
  background: none;
  padding: 0;
  font-size: inherit;
  white-space: pre;
  word-break: normal;
}

/* Code token palette.
   Deliberately NOT the semantic UI tokens. Those are chosen to sit on page
   backgrounds and to signal success/warning, and reusing them put --evps-warning
   (an amber meant for a badge) on a near-white code background, which fails WCAG AA
   for body text. These are fixed values measured against the code block's own
   background in both themes, so contrast does not depend on unrelated theming. */
.kb-tok-comment { color: #5c6470; font-style: italic; }   /* 5.6:1 on #f6f7f9 */
.kb-tok-string  { color: #0a6b3d; }                        /* 5.9:1 */
.kb-tok-keyword { color: #0b4fb8; font-weight: var(--evps-fw-semibold, 600); }  /* 7.1:1 */
.kb-tok-number  { color: #8a4b00; }                        /* 5.7:1 */
.kb-tok-var     { color: #7a2f8f; }                        /* 6.4:1 */

[data-theme="dark"] .kb-tok-comment { color: #99a3b3; }    /* 5.4:1 on #101729 */
[data-theme="dark"] .kb-tok-string  { color: #5fd39a; }    /* 8.2:1 */
[data-theme="dark"] .kb-tok-keyword { color: #7fb2ff; }    /* 7.6:1 */
[data-theme="dark"] .kb-tok-number  { color: #f0b366; }    /* 8.4:1 */
[data-theme="dark"] .kb-tok-var     { color: #d9a2ea; }    /* 7.9:1 */

/* The heading anchor is decorative and duplicated by the heading itself, so it is
   hidden from assistive tech - which means it must also be out of the tab order.
   Being aria-hidden AND focusable strands a keyboard user on an element a screen
   reader will not announce. */
.kb-anchor:focus-visible { outline: 2px solid var(--evps-primary); outline-offset: 2px; }

/* ---------------------------------------------------------------- tables */

.ekp-table-scroll,
.evps-article__body .table-responsive {
  margin: var(--evps-space-5) 0;
  overflow-x: auto;
  border: 1px solid var(--evps-border-subtle, var(--evps-border));
  border-radius: var(--evps-radius-md);
}

.evps-article__body table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
  margin: 0;
}

.evps-article__body th,
.evps-article__body td {
  padding: .6rem .8rem;
  border-bottom: 1px solid var(--evps-border-subtle, var(--evps-border));
  text-align: left;
  vertical-align: top;
}

.evps-article__body thead th {
  background: color-mix(in srgb, var(--evps-text) 5%, transparent);
  font-weight: var(--evps-fw-semibold, 600);
  white-space: nowrap;
}

.evps-article__body tbody tr:last-child td { border-bottom: 0; }
.evps-article__body tbody tr:hover td {
  background: color-mix(in srgb, var(--evps-primary) 4%, transparent);
}

/* ------------------------------------------------------- table of contents */

.kb-toc {
  position: sticky;
  top: 88px;
  align-self: start;
  padding: var(--evps-space-4);
  border: 1px solid var(--evps-border-subtle, var(--evps-border));
  border-radius: var(--evps-radius-md);
  background: var(--evps-surface);
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}

.kb-toc__title {
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--evps-text-muted);
  margin: 0 0 var(--evps-space-3);
  font-weight: var(--evps-fw-semibold, 600);
}

.kb-toc ul { list-style: none; margin: 0; padding: 0; }
.kb-toc li { margin: 0; }

.kb-toc a {
  display: block;
  padding: .3rem 0 .3rem .7rem;
  border-left: 2px solid transparent;
  font-size: .84rem;
  line-height: 1.4;
  color: var(--evps-text-muted);
  text-decoration: none;
}

.kb-toc a:hover { color: var(--evps-primary); }
.kb-toc a.is-active {
  color: var(--evps-primary);
  border-left-color: var(--evps-primary);
  font-weight: var(--evps-fw-semibold, 600);
}

.kb-toc li[data-depth="3"] a { padding-left: 1.5rem; font-size: .8rem; }

@media (max-width: 1099px) { .kb-toc { display: none; } }

/* ---------------------------------------------------------- reading meta */

.kb-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--evps-space-4);
  align-items: center;
  font-size: .82rem;
  color: var(--evps-text-muted);
}

.kb-meta__item { display: inline-flex; align-items: center; gap: .4em; }

.kb-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: var(--evps-primary);
  z-index: 9999;
  transition: width .1s linear;
}

/* -------------------------------------------------------- category cards */

.kb-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--evps-space-4);
}

.kb-cat {
  display: block;
  padding: var(--evps-space-5);
  border: 1px solid var(--evps-border-subtle, var(--evps-border));
  border-radius: var(--evps-radius-lg, var(--evps-radius-md));
  background: var(--evps-surface);
  text-decoration: none;
  color: inherit;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.kb-cat:hover {
  transform: translateY(-2px);
  border-color: var(--evps-primary);
  box-shadow: var(--evps-shadow-md, 0 8px 24px rgba(0, 0, 0, .08));
}

.kb-cat__icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--evps-radius-md);
  background: color-mix(in srgb, var(--evps-primary) 12%, transparent);
  color: var(--evps-primary);
  margin-bottom: var(--evps-space-3);
}

.kb-cat__title { font-weight: var(--evps-fw-semibold, 600); margin: 0 0 .25rem; font-size: 1.02rem; }
.kb-cat__sub { color: var(--evps-text-muted); font-size: .86rem; margin: 0 0 var(--evps-space-3); }

.kb-count {
  display: inline-block;
  font-size: .72rem;
  padding: .15rem .55rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--evps-primary) 12%, transparent);
  color: var(--evps-primary);
  font-weight: var(--evps-fw-semibold, 600);
}

/* ------------------------------------------------------------ article list */

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

.kb-list__item {
  display: flex;
  align-items: center;
  gap: var(--evps-space-3);
  padding: .7rem .9rem;
  border-radius: var(--evps-radius-sm);
  text-decoration: none;
  color: var(--evps-text);
  border: 1px solid transparent;
  transition: background .14s ease, border-color .14s ease;
}

.kb-list__item:hover {
  background: color-mix(in srgb, var(--evps-primary) 5%, transparent);
  border-color: var(--evps-border-subtle, var(--evps-border));
}

.kb-list__item i { color: var(--evps-primary); opacity: .75; }
.kb-list__meta { margin-left: auto; font-size: .78rem; color: var(--evps-text-muted); white-space: nowrap; }

/* -------------------------------------------------------------- feedback */

.kb-feedback {
  margin-top: var(--evps-space-7);
  padding: var(--evps-space-5);
  border: 1px solid var(--evps-border-subtle, var(--evps-border));
  border-radius: var(--evps-radius-md);
  background: color-mix(in srgb, var(--evps-primary) 4%, transparent);
  text-align: center;
}

.kb-feedback h3 { margin: 0 0 var(--evps-space-3); font-size: 1.02rem; }
.kb-feedback form { display: inline-flex; gap: var(--evps-space-3); }

@media print {
  .kb-toc, .kb-feedback, .kb-copy, .kb-progress { display: none !important; }
  .evps-article__body { max-width: none; }
  .kb-code { break-inside: avoid; }
}

/* ==========================================================================
   Client-facing polish pass.

   Each rule below fixes something observed on the rendered live pages rather
   than something assumed from reading the markup.
   ========================================================================== */

/* ------------------------------------------------------------------ search */

/* The stock .evps-input-group computes to display:block, so the full-width
   input pushed the Search button onto its own line on all three KB pages.
   Scoped to the KB rather than patching the shared rule, which other pages
   may depend on rendering as a block. */
.kb-search {
  display: flex;
  align-items: stretch;
  gap: var(--evps-space-2);
}

.kb-search .evps-input {
  flex: 1 1 auto;
  min-width: 0; /* without this a flex child refuses to shrink below its content */
}

.kb-search .evps-btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

@media (max-width: 560px) {
  .kb-search { flex-wrap: wrap; }
  .kb-search .evps-btn { width: 100%; justify-content: center; }
}

/* ------------------------------------------------------------- article list */

/* Reads as one list rather than a column of floating links. */
.kb-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--evps-border-subtle, var(--evps-border));
  border-radius: var(--evps-radius-md, 10px);
  overflow: hidden;
  background: var(--evps-surface);
}

.kb-list__item {
  display: flex;
  align-items: center;
  gap: var(--evps-space-3);
  padding: 0.72rem 0.95rem;
  border-radius: 0;
  border: 0;
  border-bottom: 1px solid var(--evps-border-subtle, var(--evps-border));
  text-decoration: none;
  /* A category page can list 200 articles. Rendering every title in link-blue
     turns the page into noise, so the title carries text colour and earns the
     accent on hover - the affordance is the interaction, not the ink. */
  color: var(--evps-text);
  transition: background-color .12s ease, padding-left .12s ease;
}

.kb-list__item:last-child { border-bottom: 0; }

.kb-list__item:hover,
.kb-list__item:focus-visible {
  background: color-mix(in srgb, var(--evps-primary) 6%, transparent);
  padding-left: 1.15rem;
}

/* The base theme colours every anchor via
     .evps-app a:not(.evps-btn):not(.btn):not(.pmx-btn)
   which scores (0,4,1) - :not() contributes its argument's specificity - so a plain
   .kb-list__item at (0,1,0) loses no matter how late this file loads. Cascade order
   only breaks ties. Mirroring the pattern with the class added takes it to (0,5,1),
   which is the smallest change that actually wins. */
.evps-app a.kb-list__item:not(.evps-btn):not(.btn):not(.pmx-btn),
.evps-skin a.kb-list__item:not(.evps-btn):not(.btn):not(.pmx-btn) {
  color: var(--evps-text);
}

.evps-app a.kb-list__item:not(.evps-btn):not(.btn):not(.pmx-btn):hover,
.evps-app a.kb-list__item:not(.evps-btn):not(.btn):not(.pmx-btn):focus-visible,
.evps-skin a.kb-list__item:not(.evps-btn):not(.btn):not(.pmx-btn):hover,
.evps-skin a.kb-list__item:not(.evps-btn):not(.btn):not(.pmx-btn):focus-visible {
  color: var(--evps-primary);
}

.kb-list__item > i {
  flex: 0 0 auto;
  color: var(--evps-primary);
  opacity: .6;
}

/* Take the free space so the meta can sit right without space-between, which
   is what pinned the icon and the title to opposite edges on the article page. */
.kb-list__title,
.kb-list__item > span:not(.kb-list__meta) {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

.kb-list__meta {
  flex: 0 0 auto;
  margin-left: auto;
  padding: .12rem .5rem;
  font-size: .78rem;
  line-height: 1.6;
  color: var(--evps-text-muted);
  background: color-mix(in srgb, var(--evps-text) 5%, transparent);
  border-radius: 999px;
}

/* Injected by evps-kb.js only when a list is long enough to be worth filtering. */
.kb-filter {
  display: flex;
  align-items: center;
  gap: var(--evps-space-2);
  margin-bottom: var(--evps-space-3);
}

.kb-filter__count {
  font-size: .82rem;
  color: var(--evps-text-muted);
  white-space: nowrap;
}

.kb-list__item[hidden] { display: none; }

.kb-list__empty {
  padding: 1rem .95rem;
  color: var(--evps-text-muted);
  font-size: .92rem;
}

/* -------------------------------------------------------- category cards */

/* Was a fixed 302px x 4 track, so a fifth card orphaned onto its own row and
   sized independently - measured heights were 216/216/216/216/154. auto-fill
   plus a 1fr auto-row keeps every card the same height on every row. */
.kb-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  grid-auto-rows: 1fr;
  gap: var(--evps-space-4);
}

.kb-cat {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: var(--evps-space-2);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.kb-cat:hover,
.kb-cat:focus-visible {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--evps-primary) 40%, var(--evps-border));
  box-shadow: 0 6px 18px color-mix(in srgb, var(--evps-text) 8%, transparent);
}

.kb-cat__sub {
  /* Clamp so one long description cannot set the height of an entire row. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}

/* Pushes the count to the bottom so counts line up across cards whether or not
   the card has a description. */
.kb-cat .kb-count {
  margin-top: auto;
  align-self: flex-start;
}

/* An empty category is still worth showing - it tells you the topic exists -
   but it should not compete with categories that have something to read. */
.kb-count--empty {
  opacity: .55;
  font-style: italic;
}

/* ------------------------------------------------------------ article page */

/* The measure is capped at 78ch inside a ~980px card, which left the whole
   right third of the card empty and made code blocks stop short of its edge.
   Centre the column when there is no table of contents to fill that side. */
.evps-kb:not(.evps-kb--with-toc) .evps-article__body {
  margin-inline: auto;
}

.evps-article {
  padding-block: var(--evps-space-6);
}

/* Feedback block: a quiet footer to the article, not a competing card. */
.kb-feedback {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--evps-space-3);
  margin-top: var(--evps-space-5);
  padding: var(--evps-space-4);
  border: 1px dashed var(--evps-border-subtle, var(--evps-border));
  border-radius: var(--evps-radius-md, 10px);
  background: transparent;
}

.kb-feedback__q {
  margin: 0;
  font-weight: 600;
  font-size: .98rem;
}

.kb-feedback form {
  display: flex;
  gap: var(--evps-space-2);
  margin: 0;
}

.kb-section-title {
  margin: var(--evps-space-7) 0 var(--evps-space-3);
  font-size: 1.15rem;
  font-weight: 650;
}

/* ==========================================================================
   Listing rows with summaries, pagination, search results and print.
   ========================================================================== */

/* ------------------------------------------------------------- list rows */

.kb-list__item {
  align-items: flex-start;   /* a two-line row must not centre against its icon */
  padding: 0.85rem 1rem;
  gap: var(--evps-space-3);
}

.kb-list__item > i:first-child {
  margin-top: .18rem;        /* optically align the glyph with the title's cap height */
}

.kb-list__body {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  flex: 1 1 auto;
  min-width: 0;
}

.kb-list__title {
  font-weight: 570;
  line-height: 1.4;
}

.kb-list__excerpt {
  font-size: .88rem;
  line-height: 1.55;
  color: var(--evps-text-muted);
  /* Two lines: enough to judge relevance, not so much that scanning becomes reading. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.kb-list__meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: .1rem 1rem;
  margin-top: .15rem;
}

.kb-meta {
  display: inline-flex;
  align-items: center;
  gap: .32rem;
  font-size: .76rem;
  color: var(--evps-text-muted);
}

.kb-meta i { opacity: .7; }

/* The affordance appears on hover rather than sitting on every row. */
.kb-list__chev {
  flex: 0 0 auto;
  align-self: center;
  font-size: .72rem;
  opacity: 0;
  color: var(--evps-primary);
  transition: opacity .12s ease, transform .12s ease;
}

.kb-list__item:hover .kb-list__chev,
.kb-list__item:focus-visible .kb-list__chev {
  opacity: .8;
  transform: translateX(2px);
}

/* Keyboard users must get at least as clear a signal as mouse users. */
.kb-list__item:focus-visible {
  outline: 2px solid var(--evps-primary);
  outline-offset: -2px;
}

/* --------------------------------------------------------- search results */

.kb-searchhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--evps-space-3);
  margin-bottom: var(--evps-space-3);
}

/* Applied by script to the matched words. <mark> is the correct element - it carries
   meaning for assistive tech, where a coloured <span> would carry none. */
.kb-list mark {
  background: color-mix(in srgb, var(--evps-warning, #f5a524) 34%, transparent);
  color: inherit;
  padding: 0 .1em;
  border-radius: 3px;
}

/* ------------------------------------------------------------ empty state */

.kb-empty {
  padding: var(--evps-space-7) var(--evps-space-5);
  text-align: center;
  color: var(--evps-text-muted);
  border: 1px dashed var(--evps-border-subtle, var(--evps-border));
  border-radius: var(--evps-radius-md, 10px);
}

.kb-empty > i {
  font-size: 1.9rem;
  opacity: .35;
  display: block;
  margin-bottom: var(--evps-space-3);
}

.kb-empty p { margin: 0 0 .4rem; }

.kb-empty__hint {
  font-size: .87rem;
  max-width: 46ch;
  margin-inline: auto;
}

/* -------------------------------------------------------------- pagination */

.kb-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--evps-space-3);
  margin-top: var(--evps-space-4);
}

.kb-pager__status {
  font-size: .84rem;
  color: var(--evps-text-muted);
}

.kb-pager__controls {
  display: flex;
  align-items: center;
  gap: .3rem;
  flex-wrap: wrap;
}

.kb-pager__btn {
  min-width: 2.1rem;
  padding: .34rem .6rem;
  font-size: .85rem;
  line-height: 1.4;
  text-align: center;
  color: var(--evps-text);
  background: var(--evps-surface);
  border: 1px solid var(--evps-border-subtle, var(--evps-border));
  border-radius: var(--evps-radius-sm, 6px);
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}

.kb-pager__btn:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--evps-primary) 45%, var(--evps-border));
  color: var(--evps-primary);
}

.kb-pager__btn[aria-current="page"] {
  background: var(--evps-primary);
  border-color: var(--evps-primary);
  color: #fff;
  font-weight: 600;
}

.kb-pager__btn:disabled {
  opacity: .4;
  cursor: default;
}

.kb-pager__gap {
  padding: 0 .2rem;
  color: var(--evps-text-muted);
}

/* --------------------------------------------------------- article header */

.kb-article__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .2rem 1.1rem;
}

.kb-print {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-left: auto;
  padding: .2rem .55rem;
  font: inherit;
  font-size: .78rem;
  color: var(--evps-text-muted);
  background: transparent;
  border: 1px solid var(--evps-border-subtle, var(--evps-border));
  border-radius: var(--evps-radius-sm, 6px);
  cursor: pointer;
}

.kb-print:hover {
  color: var(--evps-primary);
  border-color: color-mix(in srgb, var(--evps-primary) 45%, var(--evps-border));
}

/* -------------------------------------------------------------- responsive */

@media (max-width: 620px) {
  .kb-list__item { padding: .75rem .8rem; }
  .kb-list__excerpt { -webkit-line-clamp: 3; }
  .kb-list__chev { display: none; }        /* no hover on touch; it would sit on always */
  .kb-filter { flex-wrap: wrap; }
  .kb-filter__count { width: 100%; }
  .kb-pager { justify-content: center; }
  .kb-pager__status { width: 100%; text-align: center; }
  .kb-print { margin-left: 0; }
}

/* ------------------------------------------------------------------- print */

/* People print knowledgebase articles and take them to the machine they are fixing.
   The default print output carried the sidebar, the chat widget and every control,
   and broke code blocks across pages mid-line. */
@media print {
  .kb-filter,
  .kb-pager,
  .kb-print,
  .kb-search,
  .kb-list__chev,
  .evps-kb__toc,
  .evps-link--back { display: none !important; }

  .evps-article,
  .evps-card {
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
  }

  .evps-article__body {
    max-width: none !important;
    font-size: 11.5pt;
    line-height: 1.5;
    color: #000;
  }

  /* Never split a code sample or a table row across a page break. */
  .evps-article__body pre,
  .evps-article__body table,
  .evps-article__body img { break-inside: avoid; page-break-inside: avoid; }

  .evps-article__body h2,
  .evps-article__body h3 { break-after: avoid; page-break-after: avoid; }

  .evps-article__body pre {
    white-space: pre-wrap;      /* otherwise long lines are simply cut off at the margin */
    word-break: break-word;
    border: 1px solid #ccc;
    background: #fafafa !important;
  }

  /* A printed page loses every href, so spell the destination out. */
  .evps-article__body a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #444;
    word-break: break-all;
  }
}

/* Feedback comment: present but quiet. A reader who has already decided to click a
   button should not be confronted with a form. */
.kb-feedback__label {
  font-size: .78rem;
  color: var(--evps-text-muted);
  width: 100%;
}

.kb-feedback__input {
  flex: 1 1 16rem;
  min-width: 0;
  padding: .4rem .6rem;
  font-size: .88rem;
}

@media (max-width: 620px) {
  .kb-feedback__input { flex-basis: 100%; }
}