/* =====================================================================
   app_version_diff styles. Warm-carbon theme tokens only (var(--bg-0)
   etc.); status colors mirror the existing rvt-version-tab--{same,
   changed,missing} treatment so the report visually agrees with the
   header strip.

   Naming: vd-* (version-diff).
   Layout: .vd-shell wraps everything, .vd-card is one section.
   ===================================================================== */

/* --- Diff-specific tokens, layered on top of theme tokens --- */
:root {
  --vd-add:        #5fb87a;
  --vd-add-soft:   rgba(95, 184, 122, 0.16);
  --vd-add-bg:     rgba(95, 184, 122, 0.08);
  /* Two reds: STRONG red for "obsolete" (the warning semantic — code
     still callable but deprecated), LIGHT PINK for "missing" (the page
     just doesn't exist in that version, neutral fact). */
  --vd-remove:      #d99aab;          /* light pink: MISSING */
  --vd-remove-soft: rgba(217, 154, 171, 0.30);
  --vd-remove-bg:   rgba(217, 154, 171, 0.12);
  --vd-obsolete:      #c54a64;        /* strong red: OBSOLETE */
  --vd-obsolete-soft: rgba(197, 74, 100, 0.20);
  --vd-obsolete-bg:   rgba(197, 74, 100, 0.10);
  --vd-change:     #d4940f;          /* darker yellow for light mode contrast */
  --vd-change-soft:rgba(212, 148, 15, 0.20);
  --vd-change-bg:  rgba(212, 148, 15, 0.08);
  /* "Current" reference frame indicator — BLUE so it reads as a
     distinct semantic from the yellow "changed" hue. */
  --vd-current:     #3b82c4;
  --vd-current-soft:rgba(59, 130, 196, 0.20);
  --vd-current-bg:  rgba(59, 130, 196, 0.10);
  --vd-context:    var(--text-2);
  --vd-current-ring: var(--vd-current);
}
.dark {
  --vd-add:        #5fb87a;
  --vd-add-soft:   rgba(95, 184, 122, 0.22);
  --vd-add-bg:     rgba(95, 184, 122, 0.10);
  --vd-remove:      #e3b3bf;
  --vd-remove-soft: rgba(227, 179, 191, 0.32);
  --vd-remove-bg:   rgba(227, 179, 191, 0.12);
  --vd-obsolete:      #e26079;
  --vd-obsolete-soft: rgba(226, 96, 121, 0.28);
  --vd-obsolete-bg:   rgba(226, 96, 121, 0.12);
  --vd-change:     #ffc14a;
  --vd-change-soft:rgba(255, 193, 74, 0.22);
  --vd-change-bg:  rgba(255, 193, 74, 0.10);
  --vd-current:     #6aa9d9;
  --vd-current-soft:rgba(106, 169, 217, 0.28);
  --vd-current-bg:  rgba(106, 169, 217, 0.12);
  --vd-context:    var(--text-2);
}

/* =============================================================
   Shell + card primitives
   ============================================================= */

.vd-shell {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  /* Cap so the report doesn't sprawl across an ultra-wide monitor, but
     keep cards generously wide so the matrix and per-version diffs have
     room to breathe without needing horizontal scroll. */
  max-width: 1600px;
  margin: 0 auto;
  width: 100%;
  padding: 0.25rem 0;
}

.vd-card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.5rem 1.6rem;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
}

.vd-card-head {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--border);
}
.vd-card-title {
  font-family: var(--font-sans, system-ui);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text-0);
  letter-spacing: -0.01em;
  margin: 0;
}
.vd-card-subtitle {
  color: var(--text-2);
  font-size: 0.88rem;
}

/* Collapsible "Members across versions" card. The header acts as the
   summary bar (title + count pills + chevron), like the API doc-page cards
   and the changed-member cards. Body collapses via native <details>. */
.vd-matrix-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.vd-matrix-summary::-webkit-details-marker { display: none; }
.vd-matrix-summary .vd-card-head {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.vd-matrix-summary:hover .vd-card-title { color: var(--accent); }
.vd-matrix-chev {
  flex: none;
  color: var(--text-3);
  display: flex;
  transition: transform 200ms ease;
}
.vd-matrix-details[open] > .vd-matrix-summary .vd-matrix-chev { transform: rotate(180deg); }
.vd-matrix-details[open] > .vd-matrix-summary {
  margin-bottom: 1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--border);
}

.vd-muted { color: var(--text-2); }
.vd-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* =============================================================
   Section 1 - Header card + timeline
   ============================================================= */

/* The header now reuses the doc-page `.card headline-card` shell + its
   breadcrumb bar / type glyph / title classes, so it matches a regular
   Revit API page. Only the diff-specific tweaks below remain. */

/* Back action sits at the right end of the breadcrumb bar. */
.vd-header-back { margin-left: auto; }

/* Title row spacing so the version timeline sits below the title. */
.vd-header-titlerow { margin-bottom: 1.1rem; }

/* "Version comparison" tag beside the title — kept subtle so the title +
   type glyph stay the focal point, exactly like a normal doc page. */
.vd-header-eyebrow {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.12rem 0.55rem;
}

.vd-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-sans, system-ui);
  font-size: 0.85rem;
  font-weight: 500;
  padding: 0.45rem 0.85rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-2);
  color: var(--text-1);
  cursor: pointer;
  text-decoration: none;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.vd-btn:hover {
  background: var(--bg-3);
  border-color: var(--border-strong);
  color: var(--text-0);
}
.vd-btn-ghost {
  background: transparent;
}

/* --- Timeline strip --- */
.vd-timeline {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 0.35rem;
  margin: 0.75rem 0 0.65rem;
}
/* Single-line pill matching .vd-detail-tab's shape — year + status icon
   sit side-by-side, no text label below (icon + color + legend say all). */
.vd-dot {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--bg-2);
  color: var(--text-1);
  border-radius: 6px;
  padding: 0.4rem 0.65rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  cursor: pointer;
  transition: transform 120ms ease, border-color 120ms ease, background 120ms ease;
  position: relative;
  font-family: var(--font-sans, system-ui);
  text-decoration: none;
  line-height: 1;
}
.vd-dot:hover {
  transform: translateY(-1px);
  background: var(--bg-3);
}
.vd-dot.is-current {
  cursor: default;
}
.vd-dot.is-current:hover {
  transform: none;
}
.vd-dot-year {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-1);
  letter-spacing: 0.01em;
}
.vd-dot-mark {
  font-size: 0.95rem;
  line-height: 1;
}

/* Status modifiers. Backgrounds intentionally transparent so the dots
   read as outlined chips; only border + icon + label color carry the
   semantic. Mirrors .rvt-version-tab--{same,changed,missing}. */
.vd-dot--same { border-color: rgba(95, 184, 122, 0.4); }
.vd-dot--same .vd-dot-mark { color: var(--vd-add); }
.vd-dot--same:hover { border-color: var(--vd-add); }

.vd-dot--changed { border-color: rgba(212, 148, 15, 0.5); }
.vd-dot--changed .vd-dot-mark { color: var(--vd-change); }
.vd-dot--changed .vd-dot-label { color: var(--vd-change); font-weight: 600; }

.vd-dot--missing { border-color: rgba(197, 74, 100, 0.45); opacity: 0.78; }
.vd-dot--missing .vd-dot-mark { color: var(--vd-remove); }
.vd-dot--missing .vd-dot-label { color: var(--vd-remove); }

.vd-dot--obsolete { border-color: var(--vd-obsolete-soft); }
.vd-dot--obsolete .vd-dot-mark { color: var(--vd-obsolete); }
.vd-dot--obsolete .vd-dot-label { color: var(--vd-obsolete); font-weight: 600; }

.vd-dot--current { border-color: var(--vd-current); }
.vd-dot--current .vd-dot-mark { color: var(--vd-current); }
.vd-dot--current .vd-dot-label { color: var(--vd-current); font-weight: 600; }
.vd-dot.is-current {
  box-shadow: 0 0 0 2px var(--vd-current-soft);
  border-color: var(--vd-current);
}

/* --- Summary line --- */
.vd-summary {
  margin-top: 0.9rem;
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.8rem 0.95rem;
  background: var(--bg-2);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  color: var(--text-0);
  font-size: 0.95rem;
  line-height: 1.4;
}
.vd-summary-icon {
  font-size: 1.05rem;
  color: var(--accent);
  flex-shrink: 0;
  line-height: 1.3;
}

/* --- Legend (sits between timeline and summary). --- */
.vd-legend {
  margin-top: 0.2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  font-size: 0.74rem;
  color: var(--text-2);
}
.vd-legend-item { display: inline-flex; align-items: center; gap: 0.35rem; }
.vd-legend-swatch {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
}
.vd-swatch--current  { background: var(--vd-current); border-color: var(--vd-current); }
.vd-swatch--same     { background: var(--vd-add); border-color: var(--vd-add); }
.vd-swatch--changed  { background: var(--vd-change); border-color: var(--vd-change); }
.vd-swatch--missing  { background: var(--vd-remove); border-color: var(--vd-remove); }
.vd-swatch--obsolete { background: var(--vd-obsolete); border-color: var(--vd-obsolete); }

/* =============================================================
   Section 2 - Members matrix
   ============================================================= */

.vd-matrix-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.85rem;
}
.vd-chip-group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: center;
}
.vd-chip-group--right { margin-left: auto; }
.vd-chip-label {
  color: var(--text-2);
  font-size: 0.78rem;
  margin-right: 0.2rem;
}
.vd-chip {
  appearance: none;
  font-family: var(--font-sans, system-ui);
  font-size: 0.78rem;
  font-weight: 500;
  padding: 0.32rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-2);
  color: var(--text-1);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.vd-chip:hover {
  background: var(--bg-3);
  color: var(--text-0);
  border-color: var(--border-strong);
}
.vd-chip.is-active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.dark .vd-chip.is-active {
  color: var(--bg-0);
}

.vd-pill {
  display: inline-block;
  font-size: 0.72rem;
  padding: 0.12rem 0.55rem;
  border-radius: 999px;
  border: 1px solid currentColor;
  margin-left: 0.1rem;
  vertical-align: middle;
}
.vd-pill--add     { color: var(--vd-add); background: var(--vd-add-bg); }
.vd-pill--remove  { color: var(--vd-remove); background: var(--vd-remove-bg); }
.vd-pill--change  { color: var(--vd-change); background: var(--vd-change-bg); }
.vd-pill--obsolete{ color: var(--vd-obsolete); background: var(--vd-obsolete-bg); }

.vd-matrix-scroll {
  /* No inner scroll — the table flows naturally and the page handles
     vertical scrolling. This avoids the double-scrollbar UX where the
     user scrolled the matrix while also scrolling the page. */
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-1);
  overflow-x: auto;  /* horizontal fallback if the viewport is genuinely too narrow */
}
.vd-matrix {
  /* Fill the card width; Member col uses width:1% (shrink to content) so
     the year cells absorb the leftover and spread evenly. */
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans, system-ui);
  font-size: 0.86rem;
  table-layout: auto;
}
.vd-matrix th,
.vd-matrix td {
  padding: 0.55rem 0.7rem;
  border-bottom: 1px solid var(--border);
  text-align: center;
  vertical-align: middle;
}
.vd-matrix thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--bg-2);
  color: var(--text-1);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border-strong);
}
.vd-matrix-year-col.is-current {
  color: var(--accent);
  background: var(--bg-3);
}

.vd-matrix-name-col,
.vd-matrix-name {
  text-align: left !important;
  position: sticky; left: 0; z-index: 1;
  background: var(--bg-1);
  border-right: 1px solid var(--border);
  /* Auto-size to the longest member name + signature. width:1% with
     white-space:nowrap on the inner row is the table-layout trick for
     "shrink to widest entry". Year cells claim the leftover width. */
  width: 1%;
  max-width: 880px;
  padding-right: 0.85rem;
  overflow: hidden;
}
.vd-matrix thead .vd-matrix-name-col {
  background: var(--bg-2);
  z-index: 3;
}

.vd-matrix-row:hover .vd-matrix-name,
.vd-matrix-row:hover .vd-matrix-cell {
  background: var(--bg-2);
}

/* The name cell holds the type-pill + name link + inline (muted) signature
   on ONE row. Never wraps — if it overflows the cell width, truncate
   with an ellipsis and show the full content via the cell's title hover.
   This keeps every row a single, scannable line. */
.vd-matrix-name-row {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.4rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.vd-matrix-name-row .vd-type-pill {
  flex-shrink: 0;
}
.vd-matrix-name-row .vd-matrix-name-link {
  flex-shrink: 0;
}
.vd-matrix-name-row .vd-matrix-sig {
  /* Allow the signature to shrink + ellipsis when the row is too long.
     min-width:0 + overflow:hidden lets a flex child clip instead of
     forcing the parent to scroll horizontally. */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vd-matrix-name-link {
  font-family: var(--font-mono, monospace);
  color: var(--text-0);
  text-decoration: none;
  font-size: 0.86rem;
}
.vd-matrix-name-link:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* Per-row subtle color coding so a reader can spot stable / changed /
   removed / obsolete members at a glance. Colors mirror the matrix
   cell tokens but applied to the name LINK only (not the whole row)
   so the rest of the table stays readable. Hover always falls back
   to the accent so the active hover state is consistent. */
.vd-row--stable   .vd-matrix-name-link { color: var(--vd-add); }
.vd-row--changed  .vd-matrix-name-link { color: var(--vd-change); }
.vd-row--removed  .vd-matrix-name-link { color: var(--vd-remove); }
.vd-row--obsolete .vd-matrix-name-link { color: var(--vd-obsolete); }
/* 'added' rows use default text color (no special tint) - they're
   neutral "new but unchanged since" entries. */

.vd-matrix-legend {
  font-size: 0.74rem;
  color: var(--text-2);
  margin: 0.2rem 0 0.7rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}
.vd-rl {
  font-family: var(--font-mono, monospace);
  font-weight: 600;
}
.vd-rl--stable   { color: var(--vd-add); }
.vd-rl--changed  { color: var(--vd-change); }
.vd-rl--removed  { color: var(--vd-remove); }
.vd-rl--obsolete { color: var(--vd-obsolete); }
.vd-rl--added    { color: var(--text-0); }
/* Inline signature next to the member name. Smaller font + muted color
   so the focus stays on the name itself; the parens are intentionally
   included in the muted text so they're not visually noisy. Never wraps —
   the parent row clips with ellipsis if everything doesn't fit. */
.vd-matrix-sig {
  font-family: var(--font-mono, monospace);
  color: var(--text-3);
  font-size: 0.72rem;
  white-space: nowrap;
}

/* Type pills aligned with the existing type-color scheme */
.vd-type-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  font-family: var(--font-mono, monospace);
  color: #fff;
  flex-shrink: 0;
}
.vd-type-pill--class       { background: #3b82c4; }
.vd-type-pill--method      { background: #4a9d6e; }
.vd-type-pill--property    { background: #b85f5f; }
.vd-type-pill--event       { background: #e08540; }
.vd-type-pill--constructor { background: #e08540; }
.vd-type-pill--field       { background: #8a7fb8; }
.vd-type-pill--operator    { background: #7a8589; }
.vd-type-pill--interface   { background: #a06bc4; }
.vd-type-pill--enumeration { background: #5fa5b8; }

/* Year cells. width:auto + min-width lets them absorb the leftover table
   width (after the Member col has shrunk to content) and spread evenly. */
.vd-matrix-cell,
.vd-matrix-year-col {
  font-size: 0.88rem;
  color: var(--text-2);
  min-width: 44px;
  padding: 0.4rem 0.3rem;
  position: relative;
}
.vd-matrix-year-col {
  font-size: 0.72rem;
}
.vd-matrix-cell.is-current {
  background: var(--bg-2);
}
.vd-cell--same    { color: var(--vd-add); background: var(--vd-add-bg); }
.vd-cell--added   { color: var(--vd-add); background: var(--vd-add-bg); font-weight: 700; }
.vd-cell--changed { color: var(--vd-change); background: var(--vd-change-bg); font-weight: 700; }
.vd-cell--removed { color: var(--vd-remove); background: var(--vd-remove-bg); }
.vd-cell--pre-add { color: var(--text-3); }
.vd-pre-add { opacity: 0.5; }
.vd-cell-obs {
  /* Strong red, distinct from the light-pink "missing" cells. */
  position: absolute;
  top: 2px; right: 4px;
  font-size: 0.75rem;
  color: var(--vd-obsolete);
}

.vd-matrix-empty {
  text-align: center;
  padding: 1.5rem;
  color: var(--text-2);
  font-style: italic;
}

/* =============================================================
   Section 3 - Per-version side-by-side
   ============================================================= */

.vd-version-block {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: 8px;
  padding: 0.85rem 1rem;
  margin-bottom: 0.85rem;
}
.vd-version-block--changed  { border-left-color: var(--vd-change); }
.vd-version-block--missing  { border-left-color: var(--vd-remove); }
.vd-version-block--obsolete { border-left-color: var(--vd-obsolete); }

/* Compact "identical to current" strip — replaces the per-version <details> #}
   rows for any 'same' year, so the report leads with what's actually different. */
.vd-same-strip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.85rem;
  background: var(--vd-add-bg);
  border: 1px solid var(--vd-add-soft);
  border-left: 3px solid var(--vd-add);
  border-radius: 6px;
  margin-bottom: 0.9rem;
  font-size: 0.86rem;
  color: var(--text-1);
}
.vd-same-mark {
  color: var(--vd-add);
  font-size: 0.95rem;
  flex-shrink: 0;
}
.vd-same-text {
  line-height: 1.45;
}
.vd-same-year {
  font-family: var(--font-mono, monospace);
  color: var(--vd-add);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px dashed transparent;
  padding: 0 0.05rem;
}
.vd-same-year:hover {
  border-bottom-color: var(--vd-add);
}

/* Compact "page not in these versions" strip — sibling of vd-same-strip. */
.vd-missing-strip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.85rem;
  background: var(--vd-remove-bg);
  border: 1px solid var(--vd-remove-soft);
  border-left: 3px solid var(--vd-remove);
  border-radius: 6px;
  margin-bottom: 0.9rem;
  font-size: 0.86rem;
  color: var(--text-1);
}
.vd-missing-mark {
  color: var(--vd-remove);
  font-size: 0.95rem;
  flex-shrink: 0;
}
.vd-missing-year {
  font-family: var(--font-mono, monospace);
  color: var(--vd-remove);
  font-weight: 600;
}

/* =============================================================
   Per-version tab strip + panel container.
   Tabs let users pick ONE version's detail card to view at a time
   instead of scrolling through all of them stacked.
   ============================================================= */
.vd-detail-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0.9rem 0 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--border);
}
.vd-detail-tab {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-sans, system-ui);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.4rem 0.75rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-2);
  color: var(--text-1);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
  line-height: 1;
}
.vd-detail-tab:hover {
  background: var(--bg-3);
  border-color: var(--border-strong);
  color: var(--text-0);
}
.vd-detail-tab.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.dark .vd-detail-tab.is-active { color: var(--bg-0); }
/* Current-version chip: pinned at the start of the strip, non-clickable.
   Blue so it visually says "this is the anchor" — different semantic
   from the orange "active comparison target" tabs to its right. */
.vd-detail-tab--current {
  background: var(--vd-current-bg);
  border-color: var(--vd-current);
  color: var(--vd-current);
  cursor: default;
}
.vd-detail-tab--current:hover {
  background: var(--vd-current-bg);
  border-color: var(--vd-current);
  color: var(--vd-current);
  transform: none;
}
.vd-detail-tab-tag {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vd-current);
  opacity: 0.85;
  margin-left: 0.15rem;
}
.vd-detail-tab-year {
  font-family: var(--font-mono, monospace);
}
.vd-detail-tab-count {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.06rem 0.4rem;
  border-radius: 999px;
  background: var(--bg-1);
  color: var(--text-2);
  border: 1px solid var(--border);
  line-height: 1.25;
}
.vd-detail-tab.is-active .vd-detail-tab-count {
  background: #fff;
  color: var(--accent);
  border-color: #fff;
}
.dark .vd-detail-tab.is-active .vd-detail-tab-count {
  background: var(--bg-0);
  color: var(--accent);
  border-color: var(--bg-0);
}

/* Only the SELECTED comparison tab carries its cross-version status color
   (changed = yellow, missing = pink, obsolete = red); inactive tabs stay
   neutral so the strip isn't a wall of color. The current-frame chip stays
   blue (above). */
.vd-detail-tab--changed.is-active {
  background: var(--vd-change-bg);
  border-color: var(--vd-change);
  color: var(--vd-change);
}
.vd-detail-tab--missing.is-active {
  background: var(--vd-remove-bg);
  border-color: var(--vd-remove);
  color: var(--vd-remove);
}
.vd-detail-tab--obsolete.is-active {
  background: var(--vd-obsolete-bg);
  border-color: var(--vd-obsolete);
  color: var(--vd-obsolete);
}
.dark .vd-detail-tab--changed.is-active  { color: var(--vd-change); }
.dark .vd-detail-tab--missing.is-active  { color: var(--vd-remove); }
.dark .vd-detail-tab--obsolete.is-active { color: var(--vd-obsolete); }

/* Count pill stays neutral inside a status-tinted active tab (the bright
   white-on-accent treatment only suits the old orange active state). */
.vd-detail-tab--changed.is-active .vd-detail-tab-count,
.vd-detail-tab--missing.is-active .vd-detail-tab-count,
.vd-detail-tab--obsolete.is-active .vd-detail-tab-count,
.dark .vd-detail-tab--changed.is-active .vd-detail-tab-count,
.dark .vd-detail-tab--missing.is-active .vd-detail-tab-count,
.dark .vd-detail-tab--obsolete.is-active .vd-detail-tab-count {
  background: var(--bg-1);
  color: var(--text-1);
  border-color: var(--border);
}

.vd-detail-panel { display: none; }
.vd-detail-panel.is-active { display: block; }

/* =============================================================
   Per-version class detail card (replaces the old members strip).
   Lists added / removed / changed members with per-member side-by-
   side diffs inside collapsible <details> elements.
   ============================================================= */
/* The per-version detail "card" is no longer a card visually — it flows
   flush inside the outer "Per-version detail" section so there's no
   card-in-card nesting. Just a top divider to separate one detail panel
   from the section header. */
.vd-class-detail-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin-bottom: 0;
}

.vd-class-detail-head {
  margin-bottom: 1.1rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px dashed var(--border);
}
.vd-class-detail-head-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.vd-class-detail-title {
  font-family: var(--font-sans, system-ui);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-1);
  margin: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  flex-wrap: wrap;
}
/* The comparison year in the per-version detail card heading
   ("Changes in 2023 vs 2027"). Orange = "the version being compared",
   complementing the blue current-version span. */
.vd-cd-year {
  font-family: var(--font-mono, monospace);
  color: var(--accent);
}
.vd-cd-vs {
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--text-2);
}
/* The current frame is highlighted so the reader can lock onto it at a
   glance. Single accent color across all per-version cards keeps the
   chrome quiet — count pills do the per-version coloring. */
.vd-cd-current {
  font-family: var(--font-mono, monospace);
  color: var(--vd-current);
  font-weight: 600;
}
.vd-cd-frame-link {
  font-size: 0.82rem;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px dashed transparent;
  transition: border-color 120ms ease;
}
.vd-cd-frame-link:hover { border-bottom-color: var(--accent); }
.vd-cd-pill {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.12rem 0.55rem;
  border-radius: 999px;
  border: 1px solid currentColor;
  margin-left: 0.25rem;
}
.vd-cd-pill--add    { color: var(--vd-add);    background: var(--vd-add-bg); }
.vd-cd-pill--remove { color: var(--vd-remove); background: var(--vd-remove-bg); }
.vd-cd-pill--change { color: var(--vd-change); background: var(--vd-change-bg); }

.vd-cd-section {
  /* Generous top margin between Added / Missing / Changed buckets so
     each one reads as its own block, not as a continuation. */
  margin-top: 2.4rem;
  padding-bottom: 0.4rem;
}
.vd-cd-section:first-of-type { margin-top: 1rem; }
/* Section title reads as a true H3-style heading: larger, accent
   underline to make it pop without being garish, real vertical breath
   between it and the content above/below. */
.vd-cd-section-title {
  font-family: var(--font-sans, system-ui);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-0);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1.1rem;
  padding: 0 0 0.5rem 0;
  background: transparent;
  border-bottom: 2px solid var(--border-strong);
}
.vd-cd-section--add    .vd-cd-section-title { border-bottom-color: var(--vd-add-soft); }
.vd-cd-section--remove .vd-cd-section-title { border-bottom-color: var(--vd-remove-soft); }
.vd-cd-section--change .vd-cd-section-title { border-bottom-color: var(--vd-change-soft); }
.vd-cd-section--add    .vd-cd-mark { color: var(--vd-add); }
.vd-cd-section--remove .vd-cd-mark { color: var(--vd-remove); }
.vd-cd-section--change .vd-cd-mark { color: var(--vd-change); }

/* Inline badge list — used for Added / Removed member groups so 20+ entries
   stay on a few wrapped lines instead of consuming 20 rows. */
/* The "(only available in 2025)" / "(new since 2025)" qualifier in a section
   title. Dimmer + lighter + normal-case so it recedes behind the loud
   uppercase heading instead of competing with it. */
.vd-cd-section-sub {
  color: var(--text-3);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}

/* Tidy responsive grid so the added/missing members line up in even columns
   instead of a ragged flex-wrap row. Each cell is a flat card (not a pill) so
   longer names + their type sig can wrap cleanly inside the cell. */
.vd-cd-badge-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 0.45rem;
}
.vd-cd-badge {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--border);
  background: var(--bg-1);
  border-radius: 8px;
  font-family: var(--font-mono, monospace);
  font-size: 0.78rem;
  text-decoration: none;
  color: var(--text-1);
  line-height: 1.35;
  transition: border-color 120ms ease, background 120ms ease;
  min-width: 0;
}
.vd-cd-badge .vd-type-pill { flex: none; margin-top: 0.05rem; }
/* Take the remaining width and wrap inside the cell. overflow-wrap:anywhere
   breaks the long unspaced type tokens (e.g. FilterableValueProvider) so the
   signature can't spill past the card's right edge. */
.vd-cd-badge-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.vd-cd-badge--add    { border-color: var(--vd-add-soft);    background: var(--vd-add-bg); }
.vd-cd-badge--remove { border-color: var(--vd-remove-soft); background: var(--vd-remove-bg); }
.vd-cd-badge:hover {
  border-color: var(--accent);
  background: var(--bg-2);
}
.vd-cd-badge-name {
  color: var(--text-0);
  font-weight: 600;
}
.vd-cd-badge--remove .vd-cd-badge-name { color: var(--vd-remove); }
.vd-cd-badge--add    .vd-cd-badge-name { color: var(--vd-add); }
.vd-cd-badge-sig {
  color: var(--text-3);
  font-size: 0.72rem;
}

/* Inline-diff member card (single column, one card per row). Each card shows
   one changed member or page: signature on top with old (red strike) then an
   arrow then new (green), a parameter table where the changed row is washed
   amber, then a returns row. Collapsible via native <details>; mimics the API
   doc-page card (header bar + body). No left accent line. */
.vd-mcard-list { display: flex; flex-direction: column; gap: 1.75rem; }

.vd-mcard {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.vd-mcard > summary { list-style: none; cursor: pointer; }
.vd-mcard > summary::-webkit-details-marker { display: none; }

.vd-mcard-summary {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: var(--bg-2);
  padding: 0.7rem 0.9rem;
  transition: background 120ms ease;
}
.vd-mcard-summary:hover { background: var(--bg-3); }
.vd-mcard[open] > .vd-mcard-summary { border-bottom: 1px solid var(--border); }

.vd-mcard-tick {
  width: 3px; height: 18px;
  border-radius: 2px;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
  flex: none;
}
.vd-mcard-sig {
  flex: 1; min-width: 0;
  font-family: var(--font-mono, monospace);
  font-size: 0.85rem;
  line-height: 1.4;
  white-space: nowrap;
  overflow-x: auto;
}
.vd-mcard-sig::-webkit-scrollbar { height: 0; }
.vd-mcard-fn  { color: var(--text-1); font-weight: 600; }
.vd-mcard-dim { color: var(--text-3); }
.vd-mcard-old { color: var(--vd-obsolete); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.vd-mcard-new { color: var(--vd-add); font-weight: 600; }
.vd-mcard-arr { color: var(--text-3); margin: 0 5px; }

.vd-mcard-chev { color: var(--text-3); flex: none; display: flex; transition: transform 200ms ease; }
.vd-mcard[open] > .vd-mcard-summary .vd-mcard-chev { transform: rotate(180deg); }

.vd-mcard-obsolete {
  display: flex; align-items: center; gap: 0.45rem;
  padding: 0.6rem 0.9rem;
  font-size: 0.8rem;
  color: var(--vd-obsolete);
  background: var(--vd-obsolete-bg);
  border-bottom: 1px solid var(--border);
}

.vd-mcard-table { width: 100%; border-collapse: collapse; }
.vd-mcard-table td {
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  font-size: 0.82rem;
}
.vd-mcard-table tr:last-child td { border-bottom: none; }
.vd-mcard-pname {
  font-family: var(--font-mono, monospace);
  font-weight: 600;
  color: var(--text-2);
  width: 130px;
  white-space: nowrap;
}
.vd-mcard-ptype {
  font-family: var(--font-mono, monospace);
  color: var(--text-3);
  white-space: nowrap;
}
.vd-mcard-pdesc { color: var(--text-2); }

/* Changed row: amber wash so the eye lands on the actual change. Flat, no
   left accent line. */
.vd-mcard-row-changed td { background: var(--accent-glow); }
.vd-mcard-row-changed .vd-mcard-pname { color: var(--accent); }
.vd-mcard-row-added td { background: var(--vd-add-bg); }
.vd-mcard-row-added .vd-mcard-pname { color: var(--vd-add); }
.vd-mcard-row-removed td { background: var(--vd-remove-bg); }
.vd-mcard-row-removed .vd-mcard-pname { color: var(--vd-remove); text-decoration: line-through; }

/* Return row: neutral, NOT green. Green is reserved for the "new" side of a
   change; a green return type read as "changed" even when it wasn't. The row
   tint + a lighter-gray type set it apart from the parameter rows instead. */
.vd-mcard-ret td { background: var(--bg-2); }
.vd-mcard-ret .vd-mcard-pname { color: var(--text-2); }
.vd-mcard-ret .vd-mcard-ptype { color: var(--text-1); font-weight: 600; }

@media (max-width: 520px) {
  .vd-mcard-pname { width: auto; }
  .vd-mcard-table td { padding: 0.6rem 0.7rem; }
}

/* Compact "class-only member-set change" strip — used in place of a full
   side-by-side for class pages whose only delta is in their member set. */
.vd-members-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.9rem;
  padding: 0.55rem 0.85rem;
  background: var(--vd-change-bg);
  border: 1px solid var(--vd-change-soft);
  border-left: 3px solid var(--vd-change);
  border-radius: 6px;
  margin-bottom: 0.9rem;
  font-size: 0.86rem;
  color: var(--text-1);
}
.vd-members-mark {
  color: var(--vd-change);
  font-size: 0.78rem;
  flex-shrink: 0;
}
.vd-members-text {
  flex: 1 1 auto;
}
.vd-members-year {
  font-family: var(--font-mono, monospace);
  color: var(--vd-change);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px dashed transparent;
  padding: 0 0.05rem;
}
.vd-members-year:hover {
  border-bottom-color: var(--vd-change);
}
.vd-members-reasons {
  color: var(--text-2);
  font-size: 0.78rem;
  margin-left: 0.15rem;
}
.vd-members-hint {
  color: var(--text-2);
  font-size: 0.78rem;
  font-style: italic;
  flex: 0 0 auto;
}


/* =============================================================
   Doc-page mini card
   ============================================================= */

.vd-doc-card {
  background: var(--bg-1) !important;
  border: 1px solid var(--border) !important;
  border-left: 3px solid var(--accent) !important;
  border-radius: 8px !important;
  padding: 0.95rem 1.1rem !important;
}
.vd-doc-card-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}
.vd-doc-card-icon {
  font-size: 1.05rem;
  color: var(--accent);
}
.vd-doc-card-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-0);
  margin: 0;
  font-family: var(--font-sans, system-ui);
}
.vd-doc-card-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 0.25rem;
  margin-bottom: 0.55rem;
}
.vd-doc-card-dot {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.3rem 0.2rem;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--bg-2);
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--text-2);
}
.vd-doc-card-dot.is-current { border-color: var(--accent); color: var(--accent); }
.vd-doc-card-dot--changed   { background: var(--vd-change-bg); color: var(--vd-change); border-color: var(--vd-change-soft); }
.vd-doc-card-dot--missing   { background: var(--vd-remove-bg); color: var(--vd-remove); border-color: var(--vd-remove-soft); }
.vd-doc-card-dot--obsolete  { background: var(--vd-obsolete-bg); color: var(--vd-obsolete); border-color: var(--vd-obsolete-soft); }
.vd-doc-card-dot--same      { background: var(--vd-add-bg); color: var(--vd-add); border-color: var(--vd-add-soft); }

.vd-doc-card-summary {
  color: var(--text-1);
  font-size: 0.86rem;
  margin: 0.4rem 0 0.65rem;
}
.vd-doc-card-cta {
  display: flex;
  justify-content: flex-end;
}
.vd-doc-card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--accent);
  font-weight: 600;
  font-size: 0.88rem;
  text-decoration: none;
}
.vd-doc-card-link:hover { text-decoration: underline; }

/* =============================================================
   Header-area entry-point button.
   Lives at the right end of the .card-breadcrumb-bar in card_headline.
   Pushed to the right with margin-left:auto so the breadcrumb itself
   stays left-aligned and the button hugs the bar's right edge (in front
   of the reserved bookmark zone). Uses --bg-1 so it stands out against
   the bar's --bg-2 background instead of camouflaging into it.
   ============================================================= */
.vd-entry-strip {
  display: inline-flex;
  align-items: center;
  /* Push to the right end of the bar; the bookmark button sits as the
     next sibling, snug against the Changes button via the bar's gap. */
  margin-left: auto;
}
.vd-entry-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--font-sans, system-ui);
  font-size: 0.74rem;
  font-weight: 600;
  padding: 0.3rem 0.6rem;
  border-radius: 5px;
  border: 1px solid var(--border-strong);
  background: var(--bg-1);
  color: var(--text-0);
  cursor: pointer;
  text-decoration: none;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
  line-height: 1;
}
.vd-entry-btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.dark .vd-entry-btn:hover { color: var(--bg-0); }
.vd-entry-btn-icon { font-size: 0.85rem; line-height: 1; color: var(--accent); }
.vd-entry-btn:hover .vd-entry-btn-icon { color: inherit; }

/* "No changes" state: same dimensions as the active button so the bar's
   right edge stays put (and the bookmark sibling doesn't slide left),
   but visually muted + non-interactive. Rendered as a <span>, no hover. */
.vd-entry-btn--empty {
  color: var(--text-3);
  border-color: var(--border);
  background: transparent;
  cursor: default;
}
.vd-entry-btn--empty:hover {
  background: transparent;
  border-color: var(--border);
  color: var(--text-3);
}
.vd-entry-btn--empty .vd-entry-btn-icon { color: var(--text-3); }
.vd-entry-btn--empty:hover .vd-entry-btn-icon { color: var(--text-3); }
/* Empty-state badge: keep the shape but mute the color so it reads as
   "no changes" at a glance instead of competing with real diff counts. */
.vd-entry-btn-badge--empty {
  background: var(--bg-3);
  color: var(--text-3);
}
.dark .vd-entry-btn-badge--empty { color: var(--text-3); }
.vd-entry-btn-badge {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 700;
  padding: 0.06rem 0.35rem;
  border-radius: 999px;
  min-width: 16px;
  text-align: center;
  line-height: 1.25;
}
.dark .vd-entry-btn-badge { color: var(--bg-0); }
.vd-entry-btn:hover .vd-entry-btn-badge {
  background: #fff;
  color: var(--accent);
}

/* =============================================================
   Mobile
   ============================================================= */
@media (max-width: 768px) {
  .vd-header-back { margin-left: 0; }
  .vd-timeline {
    grid-auto-flow: row;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: auto;
  }
  .vd-matrix-name-col,
  .vd-matrix-name { min-width: 160px; }
  .vd-card { padding: 1rem 0.9rem; }
}

@media (max-width: 480px) {
  .vd-timeline { grid-template-columns: repeat(3, 1fr); }
  .vd-matrix-toolbar { gap: 0.4rem; }
  .vd-chip { font-size: 0.72rem; padding: 0.28rem 0.55rem; }
}

/* =============================================================
   Pre-AJAX render guard: hide raw markup until the JS hydrates.
   ============================================================= */
.vd-shell[data-vd-uninit] { opacity: 0; }

/* Flash animation when a per-version block is scrolled to from a click. */
.vd-version-block.is-flash {
  animation: vd-flash 1500ms ease-out;
}
@keyframes vd-flash {
  0%   { box-shadow: 0 0 0 2px var(--accent), 0 0 0 8px var(--accent-glow); }
  100% { box-shadow: 0 0 0 0  transparent,   0 0 0 0  transparent; }
}