/* Varial wiki pages */

/* Article pages: the header and its separator run the full content width (so
   the "Back to Docs" link sits hard right and the page doesn't look lopsided),
   while the reading row below is capped and left-aligned to the app content edge
   so it lines up with every other page just inside the sidebar. The index keeps
   its own full-width layout and is unaffected. */
.wiki-article-page .wiki-layout {
  max-width: 72rem;
}

/* Standalone wiki articles fill the reading column: the card spans the full
   width beside the TOC (matching the header), and its content blocks fill the
   card rather than sitting in a narrower inner measure. Scoped to
   .wiki-article-page so the boxed results-report tab keeps its centred measure. */
.wiki-article-page .wiki-article-card.card {
  max-width: none;
}

.wiki-article-page .wiki-section,
.wiki-article-page .wiki-article-card .wiki-cards,
.wiki-article-page .wiki-article-card .wiki-defs,
.wiki-article-page .wiki-article-card .wiki-next {
  max-width: none;
}

/* Public docs (wiki) index — compact in-flow heading, replacing the dark
   page-hero banner (#3776) so the listing starts near the top of the page.
   Bottom border doubles as the divider separating it from the filter bar. */
.wiki-minimal-head {
  padding: 0 0 0.85rem;
  border-bottom: 1px solid var(--varial-border);
}

.wiki-minimal-title {
  margin: 0 0 0.2rem;
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--varial-gray-900);
}

.wiki-minimal-sub {
  margin: 0;
  font-size: 0.875rem;
  color: var(--varial-gray-600);
}

/* Article pages (#3776) reuse the same minimal head, plus a back link and a
   section eyebrow above the title — a bigger title than the index's own.
   The back link sits on the right of the panel, vertically centred against
   the eyebrow/title/sub stack on the left. */
.wiki-minimal-head--article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.wiki-minimal-head-main {
  min-width: 0;
}

.wiki-minimal-back {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--varial-gray-600);
  text-decoration: none;
  white-space: nowrap;
}

.wiki-minimal-back:hover {
  color: var(--varial-primary);
}

.wiki-minimal-title--article {
  font-size: 1.75rem;
}

.wiki-breadcrumb {
  margin-top: 0.25rem;
}

.wiki-breadcrumb .breadcrumb-item,
.wiki-breadcrumb .breadcrumb-item a {
  color: var(--varial-gray-600);
  font-size: 0.875rem;
  text-decoration: none;
}

.wiki-breadcrumb .breadcrumb-item a:hover {
  color: var(--varial-primary);
}

.wiki-index-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.wiki-index-card {
  border-color: var(--varial-border);
  transition: border-color var(--varial-transition-fast, 150ms ease),
              box-shadow var(--varial-transition-fast, 150ms ease);
}

.wiki-index-card:hover {
  border-color: var(--varial-primary);
  box-shadow: var(--varial-shadow-sm);
}

.wiki-quick-links {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.wiki-quick-links a {
  display: block;
  color: var(--varial-primary);
  text-decoration: none;
  font-size: 0.875rem;
}

.wiki-quick-links a:hover {
  text-decoration: underline;
}

.wiki-layout {
  display: flex;
  gap: 2.5rem;
  align-items: flex-start;
}

/* Table-of-contents sidebar sits to the left of the content, in its own
   card (#3776) — DOM order (sidebar markup first) puts it there since
   .wiki-layout is an unreversed row flex. */
.wiki-sidebar-wrapper {
  flex: 0 0 auto;
  width: 264px;
  /* Stretch to the full height of the content column (overriding the row's
     align-items: flex-start) so the sticky card inside has room to travel and
     stays pinned as the page scrolls. */
  align-self: stretch;
}

/* Quiet, borderless table of contents: a plain sticky list with a left accent
   bar on the active/hovered item, rather than a boxed card competing with the
   article surface for attention (#3776 restyle). */
.wiki-sidebar.card {
  position: sticky;
  top: 1.5rem;
  border: none;
  background: transparent;
  box-shadow: none;
}

.wiki-toc-label {
  margin: 0 0 0.75rem;
  padding-left: 0.85rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--varial-gray-500);
}

.wiki-content {
  flex: 1;
  min-width: 0;
}

.wiki-featured img {
  border-radius: var(--varial-card-radius);
}

.wiki-nav a {
  display: block;
  padding: 0.4rem 0 0.4rem 0.85rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--varial-gray-500);
  text-decoration: none;
  border-left: 2px solid var(--varial-border);
  transition: border-color var(--varial-transition-fast, 150ms ease),
              color var(--varial-transition-fast, 150ms ease);
}

.wiki-nav a:hover {
  color: var(--varial-gray-900);
  border-color: var(--varial-border-interactive, var(--varial-gray-400));
}

.wiki-nav a.active {
  color: var(--varial-primary);
  border-color: var(--varial-primary);
  font-weight: 600;
}

.wiki-nav a.wiki-nav-child {
  color: var(--varial-gray-500);
  font-size: 0.68rem;
  padding-left: 1.6rem;
}

.wiki-nav a.wiki-nav-child:hover {
  color: var(--varial-gray-900);
}

.wiki-nav a.wiki-nav-child.active {
  color: var(--varial-primary);
}

/* Article body — one cohesive reading surface (#2854). Sections flow inside a
   single card, separated by a hairline rule rather than a stack of floating
   cards. Running text is capped to a comfortable measure (~66 characters) so
   lines stay readable even when the content column is wide; the surface panel
   itself keeps its full width. */
/* Cap the reading panel so the surface tracks the content instead of stretching
   the full width of the column (which left the text stranded in a sea of white).
   Card width = measure (42rem) + the card's own lg padding (2 x 3rem). */
.wiki-article-card.card {
  max-width: 48rem;
  border-radius: 14px;
}

.wiki-article-card .card-body {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--varial-gray-800, var(--varial-gray-700));
}

.wiki-article-card p {
  margin-bottom: 1.15rem;
}

.wiki-article-card :where(ul, ol) {
  margin-bottom: 1.15rem;
  padding-left: 1.35rem;
}

.wiki-article-card :where(ul, ol) li + li {
  margin-top: 0.4rem;
}

.wiki-section {
  max-width: 42rem;
  padding-top: 2.4rem;
  border-top: 1px solid var(--varial-border);
  margin-top: 2.4rem;
  scroll-margin-top: 2rem;
}

.wiki-section:first-of-type {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}

/* Lead paragraph: the opening block before the first heading, set larger and
   tighter so the page has a clear "top" (marketing posts especially). */
.wiki-section-lead p {
  font-size: 1.24rem;
  line-height: 1.55;
  letter-spacing: -0.01em;
  color: var(--varial-gray-900);
}

.wiki-section-heading {
  font-size: 1.45rem;
  line-height: 1.2;
  letter-spacing: -0.015em;
  font-weight: 700;
  margin-bottom: 0.85rem;
  color: var(--varial-gray-900);
  text-wrap: balance;
}

/* Category eyebrow above the article title, colour-keyed to the category chip
   group (same scheme as the wiki index dots) so the page announces its kind. */
.wiki-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--varial-gray-500);
}

.wiki-eyebrow::before {
  content: "";
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 999px;
  background-color: currentColor;
}

.wiki-eyebrow[data-chip-group="getting-started"] {
  color: var(--varial-green-dark, var(--varial-green));
}

.wiki-eyebrow[data-chip-group="reports"] {
  color: var(--varial-amber-dark, var(--varial-amber));
}

.wiki-eyebrow[data-chip-group="blogs"] {
  color: var(--varial-fuchsia-dark, var(--varial-fuchsia));
}

/* ── Content blocks for richer posts ─────────────────────────────────────────
   Cards, definition grids and pull-quotes a marketing-style article can lean on
   so prose isn't the only tool. Scoped to the reading surface; all token-based
   so they track light and dark. */
.wiki-article-card .wiki-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem;
  margin: 1.3rem 0 1.15rem;
  max-width: 42rem;
}

.wiki-article-card .wiki-card {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 1.05rem 1.15rem;
  border: 1px solid var(--varial-border);
  border-radius: 11px;
  background-color: var(--varial-bg);
}

.wiki-article-card .wiki-card-kicker {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--varial-primary);
}

.wiki-article-card .wiki-card-name {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--varial-gray-900);
}

.wiki-article-card .wiki-card p {
  margin: 0.15rem 0 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--varial-gray-600);
}

.wiki-article-card .wiki-defs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem 1.6rem;
  margin: 1.3rem 0 1.15rem;
  max-width: 42rem;
}

.wiki-article-card .wiki-def dt {
  font-weight: 700;
  color: var(--varial-gray-900);
  margin-bottom: 0.1rem;
}

.wiki-article-card .wiki-def dd {
  margin: 0;
  font-size: 0.93rem;
  line-height: 1.55;
  color: var(--varial-gray-600);
}

.wiki-article-card .wiki-pullquote {
  margin: 1.9rem 0;
  padding: 0.1rem 0 0.1rem 1.4rem;
  border-left: 3px solid var(--varial-green);
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 1.4rem;
  line-height: 1.35;
  color: var(--varial-gray-900);
}

.wiki-article-card .wiki-pullquote p {
  margin: 0;
}

/* "What next?" discovery cards: a grid of clickable next-step cards (title +
   one-line description + arrow) so the closing reads as options to explore
   rather than a list of links. */
.wiki-article-card .wiki-next {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem;
  margin: 1.3rem 0 0;
  max-width: 42rem;
}

.wiki-article-card .wiki-next-card {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--varial-border);
  border-radius: 11px;
  background-color: var(--varial-bg);
  text-decoration: none;
  transition: border-color var(--varial-transition-fast, 150ms ease),
              box-shadow var(--varial-transition-fast, 150ms ease),
              transform var(--varial-transition-fast, 150ms ease);
}

.wiki-article-card .wiki-next-card:hover {
  border-color: var(--varial-border-interactive, var(--varial-primary));
  box-shadow: var(--varial-shadow-sm);
  transform: translateY(-2px);
}

.wiki-article-card .wiki-next-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--varial-gray-900);
}

.wiki-article-card .wiki-next-arrow {
  color: var(--varial-primary);
  transition: transform var(--varial-transition-fast, 150ms ease);
}

.wiki-article-card .wiki-next-card:hover .wiki-next-arrow {
  transform: translateX(2px);
}

.wiki-article-card .wiki-next-desc {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--varial-gray-600);
}

@media (prefers-reduced-motion: reduce) {
  .wiki-article-card .wiki-next-card,
  .wiki-article-card .wiki-next-arrow {
    transition: none;
  }
  .wiki-article-card .wiki-next-card:hover {
    transform: none;
  }
}

@media (max-width: 640px) {
  .wiki-article-card .wiki-cards,
  .wiki-article-card .wiki-defs,
  .wiki-article-card .wiki-next {
    grid-template-columns: 1fr;
  }
}

.wiki-diagram {
  background-color: var(--varial-bg-subtle);
  border: 1px solid var(--varial-border);
  border-radius: var(--varial-radius-sm);
  color: var(--varial-gray-700);
  font-family: var(--varial-font-mono);
  font-size: 0.75rem;
  line-height: 1.45;
  margin-bottom: 1rem;
  overflow-x: auto;
  padding: 0.75rem;
  white-space: pre;
}

/* Wiki index — full-width, category tabs + white card rows */

/* Category tabs */
.wiki-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  border-bottom: 1px solid var(--varial-border);
  padding-left: 0;
  margin-bottom: 1.5rem;
  list-style: none;
}

.wiki-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.6rem 1rem;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: transparent;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--varial-gray-600);
  cursor: pointer;
  transition: color var(--varial-transition-fast, 150ms ease),
              border-color var(--varial-transition-fast, 150ms ease);
}

.wiki-tab:hover {
  color: var(--varial-gray-900);
}

.wiki-tab.active {
  color: var(--varial-primary);
  border-bottom-color: var(--varial-accent);
}

.wiki-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.3rem;
  height: 1.3rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  background-color: var(--varial-gray-100);
  color: var(--varial-gray-600);
  font-size: 0.6875rem;
  font-weight: 700;
}

.wiki-tab.active .wiki-tab-count {
  background-color: var(--varial-primary-bg-light);
  color: var(--varial-primary);
}

.wiki-cat-desc {
  margin: 0 0 1.25rem;
  font-size: 0.9375rem;
  color: var(--varial-gray-600);
}

/* Article rows as white cards */
.wiki-article-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.wiki-article-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem 1.35rem;
  background-color: var(--varial-card-bg);
  border: 1px solid var(--varial-card-border);
  border-radius: var(--varial-card-radius);
  box-shadow: var(--varial-card-shadow);
  transition: box-shadow var(--varial-transition-fast, 150ms ease),
              border-color var(--varial-transition-fast, 150ms ease);
}

.wiki-article-row:hover {
  border-color: var(--varial-accent);
  box-shadow: var(--varial-shadow-md);
}

.wiki-article-main {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: 0.4rem;
}

.wiki-article-title {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--varial-gray-900);
  text-decoration: none;
}

.wiki-article-row:hover .wiki-article-title {
  color: var(--varial-primary);
}

/* Coming-soon row in the tag-filter / staff-hub listing (#3965): the title is
   plain muted text, not a link, and never recolours on hover. */
.wiki-article-title-comingsoon {
  color: var(--varial-gray-600);
  cursor: default;
}

.wiki-article-row-comingsoon:hover .wiki-article-title-comingsoon {
  color: var(--varial-gray-600);
}

.wiki-article-summary {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--varial-gray-600);
}

.wiki-article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.2rem;
}

/* Meta badges (date · reading time · tags) */
.wiki-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
}

.wiki-badge-date,
.wiki-badge-read {
  background-color: var(--varial-gray-100);
  color: var(--varial-gray-600);
}

.wiki-badge-comingsoon {
  position: relative;
  z-index: 1;
  background-color: var(--varial-gray-100);
  color: var(--varial-gray-600);
}

.wiki-badge-tag {
  position: relative;
  z-index: 1;
  background-color: var(--varial-amber-bg-light, var(--varial-primary-bg-light));
  color: var(--varial-accent-dark, var(--varial-accent));
  text-decoration: none;
}

.wiki-badge-tag:hover {
  background-color: var(--varial-amber-bg, var(--varial-primary-bg-light));
}

.wiki-article-chev {
  flex: 0 0 auto;
  font-size: 1.35rem;
  line-height: 1;
  color: var(--varial-gray-400);
  transition: transform var(--varial-transition-fast, 150ms ease),
              color var(--varial-transition-fast, 150ms ease);
}

.wiki-article-row:hover .wiki-article-chev {
  color: var(--varial-accent);
  transform: translateX(3px);
}

@media (max-width: 1200px) {
  .wiki-index-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .wiki-index-grid,
  .wiki-quick-links {
    grid-template-columns: 1fr;
  }

  .wiki-layout {
    display: block;
  }

  .wiki-content .card-body {
    padding: 1rem;
  }
}

/* ── Public wiki: filterable listing (#2460) ─────────────────────────────── */

/* .wiki-pinned-link is also the base style shared by the .wiki-chip filter
   buttons below — the standalone pinned Get Started row it was originally
   named for was removed in #3776. */
.wiki-pinned-link {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--varial-border);
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--varial-primary);
  background-color: var(--varial-primary-bg-light);
  text-decoration: none;
  transition: border-color var(--varial-transition-fast, 150ms ease),
              background-color var(--varial-transition-fast, 150ms ease);
}

.wiki-pinned-link:hover {
  border-color: var(--varial-primary);
  background-color: var(--varial-primary-bg-light);
}

.wiki-listing-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.wiki-filter {
  position: relative;
  flex: 0 1 20rem;
  min-width: 12rem;
}

.wiki-filter-icon {
  position: absolute;
  top: 50%;
  left: 0.7rem;
  transform: translateY(-50%);
  font-size: 0.8rem;
  color: var(--varial-gray-400);
  pointer-events: none;
}

.wiki-filter-input {
  padding-left: 2rem;
}

/* ── Public docs (wiki) filter chips ─────────────────────────────────────── */

.wiki-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.wiki-chip {
  cursor: pointer;
  border: 1px solid transparent;
  background-color: transparent;
  color: var(--varial-gray-600);
}

.wiki-chip.active {
  border-color: var(--varial-primary);
  background-color: var(--varial-primary-bg-light);
  color: var(--varial-primary);
}

/* ── Public docs (wiki) index listing (#3776) ────────────────────────────
   Dense, text-first rows — no thumbnail imagery — inspired by a competitor's
   reference/reports index but kept plainer: a coloured dot per category type
   (green Getting started, amber Reports, pink Blogs) instead of thumbnails,
   and reading-time instead of location (we don't have geography on
   articles). Divided by hairline rules rather than boxed cards. */
.wiki-index-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}

.wiki-row {
  position: relative;
}

/* Boxed card: a filled surface with a full border so each article reads as a
   distinct card rather than a hairline-divided text row (white on cream in
   light, a raised panel in dark — both via theme-aware --varial-card-* tokens).
   Fixed-height flex column so every card matches regardless of how much the
   title/summary text wraps — meta is pinned to the bottom via margin-top: auto
   on .wiki-row-meta, and title/summary are both line-clamped so neither can grow
   past what min-height budgets for. Grid gap owns the spacing between cards. */
.wiki-row-link {
  display: flex;
  flex-direction: column;
  min-height: 12.5rem;
  padding: 1rem 1.15rem 1.1rem;
  border-radius: var(--varial-card-radius, 0.6rem);
  border: 1px solid var(--varial-card-border, var(--varial-border));
  background-color: var(--varial-card-bg, var(--varial-white));
  box-shadow: var(--varial-shadow-sm);
  color: inherit;
  text-decoration: none;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.wiki-row:hover .wiki-row-link {
  border-color: var(--varial-border-interactive, var(--varial-primary));
  box-shadow: var(--varial-shadow-md);
  transform: translateY(-2px);
}

.wiki-row-badge-paid {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-bottom: 0.5rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
  background-color: var(--varial-warning-soft, #fdf0dc);
  color: var(--varial-warning-fg, #7a4a12);
}

/* Coming-soon row (#3965): the copy isn't written yet, so the card is a
   non-clickable placeholder — muted, no hover lift, no click affordance —
   with a compact chip on the eyebrow row and a hover tooltip explaining why. */
.wiki-row-badge-comingsoon {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-left: auto; /* sit at the far end of the eyebrow row */
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none; /* the eyebrow is uppercase; keep the chip sentence-case */
  background-color: var(--varial-gray-100);
  color: var(--varial-gray-500);
}

/* The whole card reads as clearly inactive: dimmed well below the clickable
   cards so the live ones read as the primary action at a glance, plain cursor,
   muted title that never picks up the accent colour on hover. */
.wiki-row-link-comingsoon {
  cursor: default;
  opacity: 0.55;
}

.wiki-row-link-comingsoon .wiki-row-title {
  color: var(--varial-gray-600);
}

/* No hover lift, shadow, or accent recolour on a coming-soon card — it isn't a
   link, and the hover state would read as clickable. */
.wiki-row:hover .wiki-row-link-comingsoon {
  border-color: var(--varial-card-border, var(--varial-border));
  box-shadow: var(--varial-shadow-sm);
  transform: none;
}

.wiki-row:hover .wiki-row-link-comingsoon .wiki-row-title {
  color: var(--varial-gray-600);
}

.wiki-row-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.4rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--varial-gray-500);
}

.wiki-row-dot {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 999px;
  background-color: var(--varial-accent, var(--varial-primary));
  flex: none;
}

/* Per-category colour coding, keyed off the same chip_group used to filter
   the listing (#3776) — a quick visual scan by article type. */
.wiki-row[data-wiki-chip-group="getting-started"] .wiki-row-dot {
  background-color: var(--varial-green);
}

.wiki-row[data-wiki-chip-group="getting-started"] .wiki-row-eyebrow {
  color: var(--varial-green-dark, var(--varial-green));
}

.wiki-row[data-wiki-chip-group="reports"] .wiki-row-dot {
  background-color: var(--varial-amber);
}

.wiki-row[data-wiki-chip-group="reports"] .wiki-row-eyebrow {
  color: var(--varial-amber-dark, var(--varial-amber));
}

.wiki-row[data-wiki-chip-group="blogs"] .wiki-row-dot {
  background-color: var(--varial-fuchsia);
}

.wiki-row[data-wiki-chip-group="blogs"] .wiki-row-eyebrow {
  color: var(--varial-fuchsia-dark, var(--varial-fuchsia));
}

.wiki-row-title {
  margin: 0 0 0.4rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--varial-gray-900);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.wiki-row:hover .wiki-row-title {
  color: var(--varial-primary);
}

.wiki-row-arrow {
  display: inline-block;
  margin-left: 0.3rem;
  opacity: 0;
  transform: translateX(-3px);
  transition: opacity 150ms ease, transform 150ms ease;
}

.wiki-row:hover .wiki-row-arrow {
  opacity: 1;
  transform: translateX(0);
}

.wiki-row-summary {
  margin: 0 0 0.7rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--varial-gray-600);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.wiki-row-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0 0 0.6rem;
  max-height: 1.6rem;
  overflow: hidden;
}

.wiki-row-tag-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background-color: var(--varial-gray-100);
  color: var(--varial-gray-600);
  font-size: 0.6875rem;
  font-weight: 600;
}

.wiki-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: auto;
  padding-top: 0.6rem;
}

@media (prefers-reduced-motion: reduce) {
  .wiki-row-link,
  .wiki-row-arrow {
    transition: none;
  }
  .wiki-row:hover .wiki-row-link {
    transform: none;
  }
}

.wiki-row-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  color: var(--varial-gray-500);
}

@media (max-width: 1200px) {
  .wiki-index-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .wiki-index-list {
    grid-template-columns: 1fr;
  }

  .wiki-minimal-head--article {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
}