/* Help view (mockup 06) — three-pane reader. Extends views.css's existing
   .help-layout/.help-category-btn/etc rules (frozen legacy); this file only
   adds the mockup-specific polish that isn't there yet. */

/* Category rows: name left, article count right, like the mockup's
   right-aligned count column. */
.help-category-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.help-category-btn-count {
  color: var(--text-muted);
  font-weight: 400;
  font-size: 0.85rem;
}

.help-category-btn.active .help-category-btn-count {
  color: inherit;
}

/* Article rows: title + optional description stacked, chevron affordance
   on the right — description text comes straight from the KB list
   response (article.description); nothing invented when it's absent. */
.help-article-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 0.6em 1.6em 0.6em 0.75em;
  position: relative;
}

.help-article-btn::after {
  content: "\203A";
  position: absolute;
  right: 0.6em;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
}

.help-article-btn-title {
  font-weight: 600;
}

.help-article-btn-desc {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 400;
}

.help-article-btn.active .help-article-btn-desc {
  color: inherit;
}

/* Tab count badge (Re-verify queue N) */
.help-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4em;
  height: 1.4em;
  padding: 0 0.35em;
  margin-left: 0.35em;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--sunny) 30%, transparent);
  color: var(--sunny-ink);
  font-size: 0.72rem;
  font-weight: 700;
}

/* Article body meta row: badge + last-verified/verified-by as bordered
   pills, applies-to as its own row — matches the mockup's boxed metadata
   strip under the title. */
.help-article-meta {
  align-items: center;
}

.help-article-meta .muted-note {
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 0.2em 0.7em;
  font-size: 0.78rem;
}

.help-footnote {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--border);
  text-align: center;
}

@media (max-width: 900px) {
  .help-layout {
    grid-template-columns: 1fr;
  }
}