/* ============================================================================
   content.css — Styles for rendered Markdown body
   Targets both clean markdown output AND legacy Flare HTML that survived migration.
   ============================================================================ */

.main__content {
  font-size: 1.0625rem; /* 17px — one step up from base for readability */
  line-height: var(--lh-relaxed);
}

.main__content h2 {
  scroll-margin-top: calc(var(--topbar-h) + var(--sp-4));
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--sp-2);
}

.main__content h3,
.main__content h4 {
  scroll-margin-top: calc(var(--topbar-h) + var(--sp-4));
}

.main__content > :first-child { margin-top: 0; }

/* ── Legacy Flare table classes — neutralize ───────────────────────────── */

.main__content .TableStyle-basic,
.main__content table[class*="TableStyle-"] {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.main__content [class*="TableStyle-basic-Head-"] {
  background: var(--color-bg-subtle);
}

.main__content [class*="TableStyle-basic-Head"] th {
  font-weight: 600;
  text-align: left;
}

.main__content [class*="TableStyle-basic-Body"] td {
  vertical-align: top;
}

/* Flare tables often hardcode width with inline styles — let CSS win for narrow screens */
.main__content table[style*="width:"] {
  width: 100% !important;
  max-width: 100% !important;
  display: block;
  overflow-x: auto;
}

/* ── Legacy Flare column widths — discard and re-balance ─────────────────
   Original markup hardcodes <col style="width:150px"> on the first column
   and a similar narrow value on the second, which squashes embedded
   thumbnails (max-width:100% causes the image to shrink to the col width).
   Strategy: ignore the legacy <col> hints, then for tables that contain
   thumbnail images, give the image-bearing column shrink-to-fit width with
   a sensible floor so images render at natural size while the description
   column gets the remainder for legible line lengths. */

.main__content table[class*="TableStyle-"] col,
.main__content table[class*="TableStyle-"] colgroup {
  display: none;
}

.main__content table[class*="TableStyle-"]:has(img[data-thumbnail]) {
  table-layout: auto;
}

.main__content table[class*="TableStyle-"] td:first-child:has(img) {
  width: 1%;
  min-width: 240px;
  white-space: normal;
}

/* Strip Flare layout chrome that survived the migration */
.main__content .defaultPageFrame,
.main__content .defaultPageFrameLists,
.main__content [id="mainBody"],
.main__content [id="microcontent1"] {
  display: contents;
}

/* Flare interactive elements that don't work outside Flare */
.main__content .MCHelpControl,
.main__content .codeSnippetCopyButton {
  display: none;
}

.main__content .mainBodyHeading {
  font-size: var(--fs-xl);
  font-weight: 600;
  margin: var(--sp-8) 0 var(--sp-3);
  color: var(--color-fg);
}

.main__content .rightMenuHeading,
.main__content .rightMenuHeadingFirst {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-fg-subtle);
  margin: var(--sp-6) 0 var(--sp-2);
}

.main__content .bullet-none {
  list-style: none;
  padding-left: 0;
}

/* ── Doc images ────────────────────────────────────────────────────────── */

/*
 * Default presentation for ALL images inside .main__content. The Flare
 * migration produced a mix of <img class="doc-img"> and bare <img> tags
 * (roughly 50/50 split), so styling is scoped to .main__content img to
 * cover both. Doc chrome (border, radius, frame) applies universally.
 */
.main__content img {
  display: block;
  margin: var(--sp-5) auto;
  max-width: 100%;
  max-height: 80vh;
  height: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  /* No box-shadow transition on the img itself — box-shadow can't run on the
     GPU compositor and forces a paint every frame, which Lighthouse flags as
     a non-composited animation. The hover shadow lives on .doc-img-wrap::after
     below as an opacity transition (composited). */
}

/* Zoom affordance once image-zoom.js has wired listeners */
.js-zoom-ready .main__content img:not([data-no-zoom]) {
  cursor: zoom-in;
}
.js-zoom-ready .main__content img:not([data-no-zoom]):focus-visible {
  outline: none;
}

/*
 * Width hint: <img data-width="N"> caps width at N% of the content column.
 * Authors wrote 24 distinct N values across content; rules cover them all.
 * Applies to both .doc-img and bare <img> tags inside .main__content.
 */
.main__content img[data-width="10"]  { max-width: 10%; }
.main__content img[data-width="15"]  { max-width: 15%; }
.main__content img[data-width="20"]  { max-width: 20%; }
.main__content img[data-width="22"]  { max-width: 22%; }
.main__content img[data-width="25"]  { max-width: 25%; }
.main__content img[data-width="28"]  { max-width: 28%; }
.main__content img[data-width="30"]  { max-width: 30%; }
.main__content img[data-width="31"]  { max-width: 31%; }
.main__content img[data-width="33"]  { max-width: 33%; }
.main__content img[data-width="35"]  { max-width: 35%; }
.main__content img[data-width="40"]  { max-width: 40%; }
.main__content img[data-width="45"]  { max-width: 45%; }
.main__content img[data-width="50"]  { max-width: 50%; }
.main__content img[data-width="55"]  { max-width: 55%; }
.main__content img[data-width="60"]  { max-width: 60%; }
.main__content img[data-width="65"]  { max-width: 65%; }
.main__content img[data-width="70"]  { max-width: 70%; }
.main__content img[data-width="75"]  { max-width: 75%; }
.main__content img[data-width="80"]  { max-width: 80%; }
.main__content img[data-width="85"]  { max-width: 85%; }
.main__content img[data-width="90"]  { max-width: 90%; }
.main__content img[data-width="95"]  { max-width: 95%; }
.main__content img[data-width="98"]  { max-width: 98%; }
.main__content img[data-width="100"] { max-width: 100%; }

/*
 * Legacy [data-thumbnail] attribute from Flare migration:
 * was clamped to 200px tall, which is the root cause of "images look tiny."
 * With universal click-to-zoom now standard, we relax this floor so
 * thumbnails are useful in-page while still being modest in size.
 * Authors who want them smaller can add data-width.
 */
.main__content img[data-thumbnail] {
  max-height: 480px;
  width: auto;
}

/*
 * Zoom affordance — image-zoom.js wraps each clickable img in a
 * .doc-img-wrap span and appends a .doc-img-zoom-badge with a magnifying
 * glass icon. The badge is visible at rest (so users discover the zoom
 * without hovering) and intensifies on hover/focus.
 */
.main__content .doc-img-wrap {
  display: block;
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin: var(--sp-5) auto;
}

/* Hover shadow lives on a pseudo-element with an opacity transition
   instead of animating the img's box-shadow directly. Opacity transitions
   run on the GPU compositor (composited animation); box-shadow transitions
   force a repaint every frame and get flagged by Lighthouse. Same visual,
   cheap to animate. */
.main__content .doc-img-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-sm);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}
.main__content .doc-img-wrap:hover::after,
.main__content .doc-img-wrap:focus-within::after {
  opacity: 1;
}
.main__content .doc-img-wrap > img {
  /* spacing now lives on the wrap; width is also fully owned by the wrap so
     the wrap and img render at the same width and the badge lands ON the
     image, not in empty space beside it. The override below neutralizes any
     per-image data-width="N" rule when the img is inside a wrap. */
  margin: 0;
}
.main__content .doc-img-wrap > img[data-width] {
  max-width: 100%;
}

/* Wrap inherits the width hint (transferred by image-zoom.js). These mirror
   the .main__content img[data-width="N"] rules above. */
.main__content .doc-img-wrap[data-width="10"]  { max-width: 10%; }
.main__content .doc-img-wrap[data-width="15"]  { max-width: 15%; }
.main__content .doc-img-wrap[data-width="20"]  { max-width: 20%; }
.main__content .doc-img-wrap[data-width="22"]  { max-width: 22%; }
.main__content .doc-img-wrap[data-width="25"]  { max-width: 25%; }
.main__content .doc-img-wrap[data-width="28"]  { max-width: 28%; }
.main__content .doc-img-wrap[data-width="30"]  { max-width: 30%; }
.main__content .doc-img-wrap[data-width="31"]  { max-width: 31%; }
.main__content .doc-img-wrap[data-width="33"]  { max-width: 33%; }
.main__content .doc-img-wrap[data-width="35"]  { max-width: 35%; }
.main__content .doc-img-wrap[data-width="40"]  { max-width: 40%; }
.main__content .doc-img-wrap[data-width="45"]  { max-width: 45%; }
.main__content .doc-img-wrap[data-width="50"]  { max-width: 50%; }
.main__content .doc-img-wrap[data-width="55"]  { max-width: 55%; }
.main__content .doc-img-wrap[data-width="60"]  { max-width: 60%; }
.main__content .doc-img-wrap[data-width="65"]  { max-width: 65%; }
.main__content .doc-img-wrap[data-width="70"]  { max-width: 70%; }
.main__content .doc-img-wrap[data-width="75"]  { max-width: 75%; }
.main__content .doc-img-wrap[data-width="80"]  { max-width: 80%; }
.main__content .doc-img-wrap[data-width="85"]  { max-width: 85%; }
.main__content .doc-img-wrap[data-width="90"]  { max-width: 90%; }
.main__content .doc-img-wrap[data-width="95"]  { max-width: 95%; }
.main__content .doc-img-wrap[data-width="98"]  { max-width: 98%; }
.main__content .doc-img-wrap[data-width="100"] { max-width: 100%; }
.main__content .doc-img-zoom-badge {
  position: absolute;
  top: var(--sp-2);
  right: var(--sp-2);
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 20, 20, 0.62);
  color: #fff;
  border-radius: 50%;
  pointer-events: none;          /* click passes through to the img */
  opacity: 0.78;
  transition: opacity 0.18s ease, transform 0.18s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.main__content .doc-img-wrap:hover .doc-img-zoom-badge,
.main__content .doc-img-wrap:focus-within .doc-img-zoom-badge {
  opacity: 1;
  transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
  .main__content .doc-img-zoom-badge { transition: none; }
}

/* ── Figure / figcaption ──────────────────────────────────────────────── */

/*
 * When authors wrap an image in <figure>, render the caption beneath in
 * a muted italic style. Captions are optional — see CLAUDE.md > Images.
 */
.main__content figure {
  margin: var(--sp-5) auto;
  text-align: center;
}
.main__content figure img.doc-img {
  margin: 0 auto var(--sp-2);
}
.main__content figcaption {
  font-size: var(--fs-sm);
  color: var(--color-fg-muted);
  font-style: italic;
  line-height: 1.5;
  max-width: 70ch;
  margin: 0 auto;
}

/* ── Lightbox overlay (rendered by /scripts/image-zoom.js) ────────────── */

.doc-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-6);
  background: rgba(0, 0, 0, 0.86);
  cursor: zoom-out;
  /* Fade-in when shown */
  animation: doc-lightbox-fade 120ms ease-out;
}
.doc-lightbox[hidden] {
  display: none;
}

.doc-lightbox__img {
  max-width: 100%;
  max-height: 95vh;
  height: auto;
  width: auto;
  border-radius: var(--radius-md);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.55);
  cursor: default;
  background: var(--color-bg);
}

.doc-lightbox__close {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease;
}
.doc-lightbox__close:hover,
.doc-lightbox__close:focus-visible {
  background: rgba(255, 255, 255, 0.24);
  outline: none;
}

/* Lock page scroll while overlay is open */
body.doc-lightbox-open {
  overflow: hidden;
}

@keyframes doc-lightbox-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .doc-lightbox { animation: none; }
  .main__content img.doc-img { transition: none; }
}

/* ── Tile blocks from eco_help.md and similar ──────────────────────────── */

.main__content .tileImageECO,
.main__content .tileParagraphsECO,
.main__content .applicationTileTitle {
  display: none; /* Flare tile chrome — too noisy without its images */
}

/* ── Details / summary (accordions) ────────────────────────────────────── */

/* Tighten space between a closing accordion and the next section heading */
.main__content .doc-accordion + h2,
.main__content details + h2 {
  margin-top: var(--sp-6);
}

.main__content details,
.main__content .doc-accordion {
  margin: var(--sp-4) 0;
  padding: 0;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  overflow: hidden;
  transition: border-color var(--transition-fast);
}

.main__content details:hover,
.main__content .doc-accordion:hover {
  border-color: var(--gray-300);
}

.main__content details > summary {
  position: relative;
  padding: var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-10);
  background: transparent;
  cursor: pointer;
  font-weight: 600;
  font-size: var(--fs-base);
  color: var(--color-fg);
  list-style: none;
  transition: background var(--transition-fast);
  user-select: none;
}

.main__content details > summary:hover {
  background: var(--gray-50);
}

[data-theme='dark'] .main__content details > summary:hover {
  background: var(--color-bg-subtle);
}

.main__content details > summary::-webkit-details-marker { display: none; }

/* Chevron indicator (Conviva green) */
.main__content details > summary::before {
  content: '';
  position: absolute;
  left: var(--sp-4);
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--conviva-green-accent);
  border-bottom: 2px solid var(--conviva-green-accent);
  transform: translateY(-65%) rotate(-45deg);
  transition: transform var(--transition-fast);
}

.main__content details[open] > summary::before {
  transform: translateY(-35%) rotate(45deg);
}

.main__content details[open] > summary {
  border-bottom: 1px solid var(--color-border);
}

.main__content details > *:not(summary) {
  padding: var(--sp-4);
}

/* Nested accordions: subdue inner border so it doesn't look busy */
.main__content details details {
  margin: var(--sp-3) 0;
  border-color: var(--gray-200);
}

.main__content details details > summary {
  font-size: var(--fs-sm);
}

/* Orphan <summary> at the top of persona pages (artifact of <details> extraction).
   Muted gray border (not accent purple) per the rule that decorative borders
   use neutral tokens; accent colors are reserved for interactive chrome. */
.main__content > summary {
  display: block;
  margin: 0 0 var(--sp-6) 0;
  padding: var(--sp-3) var(--sp-4);
  background: var(--color-bg-subtle);
  border-left: 3px solid var(--color-fg-muted);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  color: var(--color-fg-muted);
  font-style: italic;
}

/* ── Code overflow on small screens ────────────────────────────────────── */

.main__content pre {
  max-width: 100%;
}

/* ── Responsive image override (Item 7) ────────────────────────────────── */

/* Override hardcoded width="N" attributes on migrated Flare images so they
   scale down on narrow viewports. width="N" sets the displayed width
   directly; CSS `width: auto !important` plus `max-width: 100%` lets the
   browser fit the image to its container. */
.main__content img[width] {
  width: auto !important;
  max-width: 100%;
  height: auto;
}

/* ── Horizontal scroll for wide tables (Item 6) ────────────────────────── */

.main__content .doc-scroll-x {
  overflow-x: auto;
  max-width: 100%;
}

/* ── Download button (test plan exports, etc.) ─────────────────────────── */

.main__content .doc-download-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  margin-bottom: var(--sp-2);
  background: var(--color-link);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius-sm);
}

.main__content .doc-download-btn:hover {
  background: var(--color-link-hover);
  color: #fff;
  text-decoration: none;
}

/* ── Lucide icons + inline-icon-note (Batch 7) ─────────────────────────── */

.lucide-icon,
.inline-icon-note__svg {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

/* Inline ☞-replacement icon (used for "important note" prefixes in prose) */
.inline-icon-note {
  display: inline-flex;
  align-items: center;
  color: var(--color-fg-muted);
  margin-right: 0.35em;
  vertical-align: -0.15em;
}

.inline-icon-note__svg {
  color: var(--color-fg-muted);
}

/* ── Feature card grid (Batch 7 — unified component for Issue 1 + Issue X) */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--sp-3);
  margin: var(--sp-4) 0 var(--sp-8) 0;
}

.feature-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-3);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-decoration: none !important;
  color: var(--color-fg);
  transition: border-color var(--transition-fast),
              background var(--transition-fast),
              transform var(--transition-fast),
              box-shadow var(--transition-fast);
}

a.feature-card:hover,
a.feature-card:focus-visible {
  border-color: var(--conviva-green-accent);
  background: var(--color-bg-subtle);
  color: var(--color-fg);
  text-decoration: none !important;
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.feature-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-accent-soft);
  color: var(--conviva-green-accent);
  flex-shrink: 0;
}

.feature-card__icon .lucide-icon {
  width: 24px;
  height: 24px;
}

.feature-card__title {
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: var(--lh-snug);
}

.feature-card__description {
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  color: var(--color-fg-muted);
}

/* Wider variant for cards that have description text (Connect APIs grid) */
.feature-grid--wide {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

/* ── Embedded Vimeo / iframe content (Batch 7 — Issue Y) ───────────────── */

.main__content .embeddedContent {
  position: relative;
  width: 100%;
  max-width: 720px;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
  margin: var(--sp-4) 0;
  border-radius: var(--radius-md);
  background: #000;
}

.main__content .embeddedContent iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ── Workflow (converted from MadCap:slideshow) ────────────────────────── */

.main__content .workflow {
  margin: var(--sp-6) 0;
  padding: var(--sp-4) var(--sp-5);
  border-left: 3px solid var(--conviva-green-accent);
  background: var(--color-bg-subtle);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.main__content .workflow > h3:first-child {
  margin-top: 0;
}

.main__content .workflow h3 {
  color: var(--color-fg);
}

.main__content .workflow h3::before {
  content: '';
}

/* ── Release summary + release entry (What's New pages) ─────────────────
   One component, two render shapes:
     - NEW semantic markup: <section class="release-summary">…</section>
     - LEGACY markup: <table class="doc-table doc-table--center"> overridden
       to use the same CSS-grid layout via display:grid/contents.
   See snippets/whats_new_experience_insights.md for the canonical new shape.
   The other 14 whats_new_*.md snippets still use the legacy markup; this
   CSS makes them improve visually without source edits.
   ─────────────────────────────────────────────────────────────────────── */

/* —— Grid container —— */

.main__content .release-summary {
  margin: var(--sp-4) 0 var(--sp-6);
}

.main__content .release-summary__title {
  font-size: var(--fs-xl);          /* Ladder A: H3 banner = 20px / 700 */
  font-weight: 700;
  color: var(--color-fg);
  margin: 0 0 var(--sp-4) 0;
  line-height: var(--lh-snug);
  border-bottom: 0;                 /* override the global h2/h3 border */
  padding-bottom: 0;
}

.main__content .release-summary__grid,
.main__content table.doc-table--center {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--sp-3);
  margin: 0 0 var(--sp-6) 0;
  width: 100%;
}

/* Legacy table needs its layout chrome stripped */
.main__content table.doc-table--center {
  border: 0;
  border-radius: 0;
  font-size: inherit;
  overflow: visible;                /* defeat the base "overflow-x:auto" on width-styled tables */
}
.main__content table.doc-table--center tbody,
.main__content table.doc-table--center tr {
  display: contents;                /* skip table-row layout; td becomes direct grid item */
}
.main__content table.doc-table--center col,
.main__content table.doc-table--center colgroup {
  display: none;                    /* <col style="width:266px"> is meaningless in grid mode */
}

/* —— Category card (works for both new <.release-summary__category> AND
       legacy <td> children of doc-table--center) —— */

.main__content .release-summary__category,
.main__content table.doc-table--center td {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4);
  background: var(--color-bg-subtle);
  border-radius: var(--radius-md);
  border: 0;                        /* override base td border-bottom */
  vertical-align: top;              /* harmless on the flex container; preserves intent */
}

/* —— Category title (NEW: explicit h4 / LEGACY: <p><strong>…</strong></p>) —— */

.main__content .release-summary__category-title,
.main__content table.doc-table--center td > p:first-child:has(> strong:only-child) {
  font-size: var(--fs-lg);          /* Ladder A: H4 category = 18px / 600 */
  font-weight: 600;
  color: var(--color-fg);
  line-height: var(--lh-snug);
  margin: 0;
}

/* Make the inner <strong> in the legacy <p> visually match the new h4
   (the <p> selector above sets size/weight, but <strong> would re-bold
   on top — keep it consistent by stripping <strong>'s own weight) */
.main__content table.doc-table--center td > p:first-child > strong {
  font-weight: inherit;
}

/* —— List of items inside a category —— */

.main__content .release-summary__list,
.main__content .release-summary__category > ul,
.main__content table.doc-table--center td > ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);                 /* between list items */
}

.main__content .release-summary__list > li,
.main__content .release-summary__category > ul > li,
.main__content table.doc-table--center td > ul > li {
  padding: 4px 0;                   /* ≥24px hit area for inline links (touch target) */
  margin: 0;
}

.main__content .release-summary__list > li > p,
.main__content table.doc-table--center td > ul > li > p {
  margin: 0;                        /* marked wraps loose-list items in <p>; collapse the margin */
}

.main__content .release-summary__list a,
.main__content table.doc-table--center td a {
  font-size: var(--fs-sm);          /* Ladder A: list items = 14px / 400 */
  line-height: var(--lh-normal);
}

/* —— Empty state (NEW only — legacy uses :has() detection below) —— */

.main__content .release-summary__empty {
  color: var(--color-fg-muted);     /* 7.0:1 light, 6.4:1 dark — passes AA in both modes */
  font-style: italic;
  font-size: var(--fs-sm);
  margin: 0;
}

/* Legacy empty-cell detection: a <td> with no <ul> or <ol> child (only the
   title <p><strong>…</strong></p>). Inject "No changes this release" via
   pseudo-content. `:has()` requires Chrome 105+ / Safari 15.4+ / Firefox 121+. */
.main__content table.doc-table--center td:not(:has(ul, ol))::after {
  content: "No changes this release";
  color: var(--color-fg-muted);
  font-style: italic;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}

/* —— Release entry (timeline log under the summary) —— */

.main__content .release-entry {
  margin: 0 0 var(--sp-6) 0;
  padding: 0;
}

.main__content .release-entry__header {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: baseline;
  margin: var(--sp-6) 0 var(--sp-3) 0;
  padding-top: var(--sp-6);
  border-top: 1px solid var(--color-border);
}

/* No divider above the very first release — it sits right under the summary. */
.main__content .release-entry:first-of-type .release-entry__header {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* Indent the entry body (Feature Update, Use Case, images, captions, lists)
   so the details read as nested under the date and title. */
.main__content .release-entry > p,
.main__content .release-entry > ul,
.main__content .release-entry > ol,
.main__content .release-entry > img,
.main__content .release-entry > table,
.main__content .release-entry > .doc-callout {
  padding-left: var(--sp-4);
}

.main__content .release-entry__date {
  font-size: var(--fs-base);        /* Ladder A: H3 date = 16px / 700 uppercase 0.02em */
  font-weight: 700;
  letter-spacing: 0.02em;           /* literal — no token for letter-spacing; only used here */
  text-transform: uppercase;
  color: var(--color-fg);
  margin: 0;
  border-bottom: 0;
  padding-bottom: 0;
}

.main__content .release-entry__title {
  font-size: var(--fs-base);        /* Ladder A: H4 item title = 16px / 600 */
  font-weight: 600;
  color: var(--color-fg);
  margin: 0 0 var(--sp-2) 0;
  line-height: var(--lh-snug);
}

/* —— Tag — generic system primitive ——
   Neutral-only. Reserved tokens (--conviva-green-accent, --color-callout-warn-*)
   are NOT used here — they're scoped to interactive chrome and broken-link
   markers respectively. If semantic variants are needed in the future
   (success / info / warn), add tokens then variants — don't reuse the
   sanctioned ones for static labels. */

.main__content .tag {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  background: var(--color-bg-emphasis);
  color: var(--color-fg-muted);
  padding: 2px 8px;                 /* literal — no token below --sp-1 (4px); only used here */
  border-radius: var(--radius-sm);
  line-height: 1.4;
  vertical-align: middle;
}

/* Conviva-green "New" badge for the latest release entry. Fixed dark text on the
   brand lime works in both light and dark themes (the background is fixed). */
.main__content .tag--new {
  background: var(--conviva-green-primary);
  color: #14210a;
}

/* ── Video modal ────────────────────────────────────────────────────────────
   Click-to-play Vimeo overlay. Driven by scripts/video-modal.js.
   Mirrors the .doc-lightbox and .search-modal conventions.
   ─────────────────────────────────────────────────────────────────────────── */
.doc-video-modal[hidden] { display: none; }

.doc-video-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-6);
  background: rgba(0, 0, 0, 0.72);
  animation: doc-video-modal-fade 120ms ease-out;
}

@keyframes doc-video-modal-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.doc-video-modal__frame {
  position: relative;
  width: 100%;
  max-width: min(1100px, 90vw);
  max-height: 90vh;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.doc-video-modal__frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.doc-video-modal__close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--color-border-strong);
  background: var(--color-bg);
  color: var(--color-fg);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  box-shadow: var(--shadow-md);
}

.doc-video-modal__close:hover {
  background: var(--color-bg-emphasis);
}

.doc-video-modal__close:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

body.doc-video-modal-open {
  overflow: hidden;
}

/* Respect users who've asked to reduce motion — skip the fade animation. */
@media (prefers-reduced-motion: reduce) {
  .doc-video-modal {
    animation: none;
  }
}

/* Trigger affordance: small play glyph before the "Watch video" text.
   \FE0E is the Unicode text-presentation variation selector — forces the
   monochrome triangle glyph and prevents systems (iOS, macOS Safari) from
   rendering the character as a colored emoji. `/ ""` marks the glyph as
   decorative for screen readers so they don't announce it. */
.doc-video::before {
  content: "▶\FE0E" / "";
  display: inline-block;
  margin-right: 6px;
  font-size: 0.85em;
  color: var(--color-accent);
}