/* ===== DESIGN SYSTEM ===== */
/* Color Theme - Colors are set dynamically from TOML */
:root {
  --max-width: 904px;
  --header-h: 120px; /* header total height on desktop */
  /* Fallback colors until TOML loads */
  --bg-dark: #232626;
  --text-white: #ffffff;
  --scrollbar-size: 8px; /* unified scrollbar thickness */
  --radius-md: 12px; /* unified medium radius */
  --surface-04: rgba(255, 255, 255, 0.04);
  --surface-06: rgba(255, 255, 255, 0.06);
  --border-12: rgba(255, 255, 255, 0.12);
  --border-10: rgba(255, 255, 255, 0.10);
  --surface-08: rgba(255, 255, 255, 0.08);
  --radius-sm: 10px;
  
  /* Font configuration - fallback values until TOML loads */
  --font-family-primary: 'Outfit', sans-serif;
  --font-family-secondary: 'Outfit', sans-serif;
  --font-family-heading: 'Outfit', sans-serif;
  --font-family-mono: 'Courier New', monospace;
  --font-size-base: 1.1rem;
  --font-size-heading: 2.5rem;
  --font-size-small: 0.9rem;
  --font-weight-normal: 400;
  --font-weight-medium: 600;
  --font-weight-bold: 700;
  --line-height-base: 1.6;
  --line-height-heading: 1.2;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.02em;
  --outline-weight: 700;
  --outline-letter-spacing: 0;
  --strong-weight: 700;
  --strong-letter-spacing: 0.03em;
  --letter-spacing-heading: 0.015em;
  }

/* ===== DRY BORDER STYLES ===== */
/* Base border style for all media content */
.media-border, .interactive-border {
  border: none;
  border-radius: var(--radius-sm);
  background: var(--surface-04);
  box-shadow: 0 6px 24px rgba(0,0,0,0.35);
  box-sizing: border-box;
}

/* Enhanced styling for interactive elements */
.interactive-border {
  border-radius: var(--radius-md);
  background: var(--surface-06);
}

body {
  background-color: var(--bg-dark);
  color: var(--text-white) !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-base);
  letter-spacing: var(--letter-spacing-normal);
}

/* Unified text color override (exclude links and strong to allow theme colors) */
*:not(a):not(strong), .card, .card *:not(a):not(strong), p, span, div, .content-container, .content-container *:not(a):not(strong) {
  color: var(--text-white) !important;
}



.content-container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding-top: calc(var(--header-h) + env(safe-area-inset-top));
  padding-inline: clamp(1rem, 4vw, 2rem);
  padding-bottom: 2rem;
  position: relative;
  z-index: 1;
}

/* ===== TYPOGRAPHY ===== */
/* Headings */
h2 {
  color: var(--brand-color, var(--text-white));
  font-family: var(--font-family-heading);
  font-size: var(--font-size-heading);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-heading, var(--letter-spacing-normal));
  margin: 3rem 0 2rem 0;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
}

/* Paragraphs and text */
p {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-base);
  letter-spacing: var(--letter-spacing-normal);
  margin-bottom: 1rem;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

/* Links */
a {
  color: var(--link-color, var(--brand-color, var(--text-white)));
  text-decoration: none;
  text-shadow: none;
  font-weight: 700;
  transition: color 150ms ease, opacity 150ms ease;
}

a:hover, a:focus-visible {
  color: var(--link-color, var(--brand-color, var(--text-white)));
  text-decoration: underline;
  text-shadow: none;
}

/* Themed links - use custom color from JS */
a.themed-link {
  color: var(--link-color, var(--brand-color, var(--text-white)));
}

a.themed-link:hover, a.themed-link:focus-visible {
  color: var(--link-color, var(--brand-color, var(--text-white)));
  opacity: 0.8;
  text-decoration: underline;
}

/* ===== DRY UTILITIES ===== */
/* Shared flex layouts */


/* Shared transitions */


/* ===== COMPONENTS ===== */
/* Button styling */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.55rem 1.1rem;
  text-decoration: none;
  font-family: var(--font-family-secondary);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-wide);
  background: var(--surface-08);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius-md);
  color: var(--text-white) !important;
  box-shadow: 0 0 32px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease, border-color 150ms ease;
}

.btn.themed-btn {
  --btn-color: var(--brand-color, #8A66D9);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--btn-color) 26%, transparent),
    color-mix(in srgb, var(--btn-color) 6%, transparent));
  border-color: color-mix(in srgb, var(--btn-color) 45%, transparent);
  box-shadow: 0 0 44px color-mix(in srgb, var(--btn-color) 32%, transparent);
}



.btn.themed-btn:hover,
.btn.themed-btn:focus-visible {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--btn-color) 38%, transparent),
    color-mix(in srgb, var(--btn-color) 12%, transparent));
  border-color: color-mix(in srgb, var(--btn-color) 60%, transparent);
  box-shadow: 0 0 54px color-mix(in srgb, var(--btn-color) 45%, transparent);
  text-decoration: none;
}



.btn:hover {
  transform: translateY(-1px);
}

/* Card styling */
.card {
  background: var(--surface-04);
  border: 1px solid var(--border-12);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  backdrop-filter: blur(10px);
}

.card--compact {
  padding: 1rem;
}

/* Top-left logo header */
.site-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100vw !important;
  z-index: 1000 !important;
  background: var(--bg-dark) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
}

.site-header-content {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0.75rem 1rem;
  padding-top: calc(0.75rem + env(safe-area-inset-top));
}

.site-logo {
  height: 96px;
  width: auto;
  display: block;
}

.research-paper-btn {
  font-size: 0.9rem;
  padding: 0.5rem 1rem;
  white-space: nowrap;
}

/* ===== BACKGROUND ELEMENTS ===== */
/* Convex shapes */
.bg-shapes {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0; /* below header/content */
  overflow: hidden;
}

.bg-shapes .shape {
  position: absolute;
  display: block;
  opacity: 0.05;
  filter: blur(0.15px);
  box-shadow: 0 6px 40px rgba(0,0,0,0.18);
  border-radius: 6px;
  --shape-color: #ffffff;
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--shape-color) 65%, white 35%),
    color-mix(in srgb, var(--shape-color) 80%, black 20%)
  );
}

/* Color classes removed: shapes are always white by default */


/* Shape-specific clip paths */
.bg-shapes .hex { clip-path: polygon(25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0 50%); }
.bg-shapes .pent { clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); }
.bg-shapes .tri { clip-path: polygon(50% 0%, 100% 100%, 0% 100%); }
.bg-shapes .quad { clip-path: polygon(10% 15%, 90% 8%, 85% 90%, 12% 80%); }
.bg-shapes .hept { clip-path: polygon(50% 0%, 84% 18%, 100% 54%, 82% 88%, 50% 100%, 18% 88%, 0% 54%); }
.bg-shapes .oct { clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%); }
.bg-shapes .circle { border-radius: 9999px; }


/* ===== LAYOUT ===== */
/* Section styling */
.section {
  margin-top: 2rem;
}

.section__title {
  margin: 1.5rem 0 1rem;
  text-align: left;
}

.section--intro {
  padding: 0;
  background: transparent;
  margin-top: 0;
}

/* Grid layouts */
.grid {
  display: grid;
  gap: 1rem;
}


.grid--one-col {
  grid-template-columns: 1fr;
}

/* Introduction section overrides */
.intro {
  max-width: var(--max-width);
  margin: 0 auto;
  text-align: left;
  /* Split into two rows: lead (paragraphs) then the usage/media grid */
  display: grid;
  grid-template-rows: auto auto;
  row-gap: 1.25rem;
}

.introduction .intro { 
  max-width: 100%; 
  margin: 0; 
}

.intro p { margin: 0 0 0.75rem 0; }

/* Introduction Parameters subsection */
.intro__params-title { margin: 0 0 0.5rem 0; font-size: 1.25rem; }
.intro__params-list { margin: 0 0 1rem 0; padding-left: 1.2rem; font-size: 0.95rem; }

/* Introduction Usage two-column layout */
.intro__usage-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 44%);
  gap: 1rem;
  align-items: start;
  margin-top: 0;
}
.intro__usage-main { 
  min-width: 0; 
  align-self: start;      /* top aligned */
  justify-self: start;    /* left aligned */
}
.intro__usage-title { margin: 0 0 0.5rem 0; font-size: 1.25rem; }
.intro__usage-list { margin: 0 0 0.75rem 0; padding-left: 1.2rem; font-size: 0.95rem; }
.intro__params-list li,
.intro__usage-list li { margin: 0 0 0.4rem 0; }
.intro__params-list li:last-child,
.intro__usage-list li:last-child { margin-bottom: 0; }
  
/* Colored strong (assigned via JS) */
.themed-strong { color: var(--strong-color) !important; }

/* Reduce issues with fonts that lack a proper bold weight */
strong {
  font-weight: var(--strong-weight, 700);
  letter-spacing: var(--strong-letter-spacing, 0.01em);
  font-kerning: normal;
  font-variant-ligatures: none;
}

.intro__usage-media {
  display: grid;
  gap: 0.75rem;
  align-self: start;          /* stick to top of the grid area */
  justify-self: center;       /* center the media block within its column */
  justify-items: center;      /* center children horizontally */
}
.intro__usage-media > * { width: min(100%, 420px); }
.intro__usage-media figure { margin: 0; }
.intro__usage-media img {
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16; /* enforce vertical format */
  object-fit: cover;    /* crop to fill the vertical frame */
  object-position: center center; /* center the crop */
  display: block;
}
.intro__usage-caption {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  opacity: 0.85;
  text-align: center;
}

/* Before/After slider */
.ba-slider {
  --pos: 50%; /* updated by JS */
  --ba-color: var(--brand-color); /* handle color from brand_primary */
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  overflow: hidden;
}

.ba-pane {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--text-white);
  font-weight: 700;
  letter-spacing: 0.5px;
  user-select: none;
  pointer-events: none;
}

.ba-pane img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* Top layer reveals from the left up to --pos */
.ba-pane.before {
  background: rgba(0, 0, 0, 0.15);
  clip-path: polygon(0 0, var(--pos) 0, var(--pos) 100%, 0 100%);
  z-index: 1;
}

.ba-pane.after {
  background: rgba(255, 255, 255, 0.06);
  clip-path: polygon(var(--pos) 0, 100% 0, 100% 100%, var(--pos) 100%);
  z-index: 0;
}

.ba-handle {
  position: absolute;
  top: 50%;
  left: var(--pos);
  transform: translate(-50%, -50%);
  width: 36px;
  height: 36px;
  box-sizing: border-box;
  background: var(--strong-color);
  border: none;
  background-clip: border-box;
  outline: none;
  filter: none;
  box-shadow: none;
  cursor: ew-resize;
  /* Default pentagon shape pointing up */
  clip-path: polygon(50% 0%, 95% 35%, 78% 100%, 22% 100%, 5% 35%);
  -webkit-clip-path: polygon(50% 0%, 95% 35%, 78% 100%, 22% 100%, 5% 35%);
  z-index: 10; /* above line and panes */
  /* Remove transition to prevent lag - only transition non-position properties */
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  will-change: filter;
}

/* Handle shape variants */
.ba-handle.shape-circle {
  clip-path: circle(50%);
  border-radius: 50%;
}

.ba-handle.shape-diamond {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.ba-handle.shape-hexagon {
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

.ba-handle:focus-visible,
.btn:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.6);
  outline-offset: 2px;
}

.ba-handle:focus-visible {
  outline: 3px solid rgba(255,255,255,0.85);
}

.ba-slider::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 3px;
  transform: translateX(-50%);
  background: linear-gradient(to bottom, 
    rgba(255, 255, 255, 0.9) 0%,
    rgba(255, 255, 255, 1) 50%,
    rgba(255, 255, 255, 0.9) 100%);
  box-shadow: 
    0 0 4px rgba(255, 255, 255, 0.5),
    0 0 8px rgba(0, 0, 0, 0.3);
  z-index: 2; /* below handle, above panes */
  pointer-events: none;
}



/* Unified video container styles */
:is(.video-embed, .video-frame) {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: #000;
  display: block;
}
.video-embed {
  width: 100%;
  padding: 0;
  border: none;
}
.video-frame {
  position: relative;
  width: min(100%, 960px);
}
:is(.video-embed iframe, .video-frame iframe) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
  :root { --header-h: 80px; }
  .content-container {
    padding-inline: 1rem;
    padding-bottom: 1rem;
  }
  
  h2 {
    font-size: 1.8rem;
  }
  
  .site-logo {
    height: 64px;
  }
  
  .card--compact {
    padding: 0.5rem;
  }
  
  .section__title {
    margin: 1rem 0 0.5rem;
  }
  .intro__usage-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== UNIFIED CAROUSEL STYLES ===== */
/* Base carousel container */
.media-carousel {
  position: relative;
}

/* Carousel inner styling */
.media-carousel .carousel {
  border-radius: 8px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.1);
}

/* Carousel item images - reserve aspect ratio to prevent layout shift during loading */
/* Vertical layout (9:16) for intro usage media */
.intro__usage-media .media-carousel .carousel-item {
  aspect-ratio: 9 / 16;
  background: rgba(0, 0, 0, 0.2);
}

/* Wide layout (16:9) for comparisons, wide intro, and documentation pages */
.intro__usage-media-wide .media-carousel .carousel-item,
.comparisons .media-carousel .carousel-item,
.documentation-page .media-carousel .carousel-item {
  aspect-ratio: 16 / 9;
  background: rgba(0, 0, 0, 0.2);
}

/* Unified image sizing for all carousel items */
.media-carousel .carousel-item img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Unified carousel indicators */
.media-carousel .carousel-indicators {
  position: absolute;
  bottom: 15px;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  margin: 0;
  padding: 2px 6px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 20px;
  backdrop-filter: blur(4px);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: fit-content;
  max-width: none;
  min-width: auto;
  gap: 6px;
  line-height: 0;
}

/* Unified indicator buttons */
.media-carousel .carousel-indicators button,
.media-carousel .carousel-indicators [data-bs-target] {
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  margin: 0;
  background-color: rgba(255, 255, 255, 0.5);
  border: none;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

/* Active and hover states */
.media-carousel .carousel-indicators button.active {
  background-color: #ffffff;
  transform: scale(1.2);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
}

.media-carousel .carousel-indicators button:hover {
  background-color: rgba(255, 255, 255, 0.8);
}

/* Unified figure and caption styling */
.media-carousel figure {
  margin: 0;
  position: relative;
}

.media-carousel .intro__usage-caption,
.usage-carousel-caption {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  opacity: 0.85;
  position: static;
  background: none;
  color: inherit;
  padding: 0;
  text-align: center;
}

/* Responsive video embed */
/* unified above in :is(.video-embed, .video-frame) */

/* Single image card within comparisons */
.image-card { margin: 0; }
.image-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

/* ===== CHANGELOG SECTION ===== */
.changelog-content {
  padding: 0;
}

.changelog-scroll-container {
  max-height: 500px;
  overflow-y: auto;
  padding-right: 0.5rem;
  border: 1px solid var(--border-10);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.2);
}

.changelog-version {
  margin-bottom: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.changelog-version:last-child {
  border-bottom: none;
}

.changelog-version-header {
  padding: 1rem;
  cursor: pointer;
  user-select: none;
}

.changelog-version-header:hover {
  background: rgba(255, 255, 255, 0.05);
}

.changelog-version-title-container {
  flex: 1;
}


.changelog-version-date {
  font-size: var(--font-size-small);
  color: rgba(255, 255, 255, 0.7);
  background: rgba(0, 0, 0, 0.3);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-family: var(--font-family-mono);
  white-space: nowrap;
}

.changelog-version-title {
  font-size: 1.1rem;
  margin: 0;
  color: var(--text-white) !important;
  font-weight: 600;
}

.changelog-version-badge {
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
}

.changelog-toggle-icon {
  font-size: 0.8rem;
  transition: transform 0.2s ease;
  color: var(--brand-color); /* fallback - will be overridden by inline styles */
}

.changelog-version-content {
  padding: 0 1rem 1rem 1rem;
}

.changelog-changes {
  margin: 0;
  padding-left: 1.2rem;
  list-style-type: none;
}

.changelog-change-item {
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  line-height: 1.4;
  position: relative;
  padding-left: 1rem;
}

.changelog-change-item:before {
  content: "•";
  color: var(--bullet-color, var(--brand-color));
  position: absolute;
  left: 0;
  font-weight: bold;
}

.changelog-change-item:last-child {
  margin-bottom: 0;
}

/* Version type styling - Base styles (colors are set dynamically via inline styles) */
.changelog-version-header {
  border-left: 4px solid var(--brand-color); /* fallback */
}

/* DRY: Unified themed scrollbar styles for changelog, code blocks, and tables */
.changelog-scroll-container,
#doc-page-rich-content pre,
.documentation-page pre,
#doc-page-rich-content table,
.documentation-page table {
  scrollbar-color: var(--brand-color) rgba(255, 255, 255, 0.1);
  scrollbar-width: thin;
}

.changelog-scroll-container::-webkit-scrollbar,
#doc-page-rich-content pre::-webkit-scrollbar,
.documentation-page pre::-webkit-scrollbar,
#doc-page-rich-content table::-webkit-scrollbar,
.documentation-page table::-webkit-scrollbar {
  height: var(--scrollbar-size);
  width: var(--scrollbar-size);
}

.changelog-scroll-container::-webkit-scrollbar-track,
#doc-page-rich-content pre::-webkit-scrollbar-track,
.documentation-page pre::-webkit-scrollbar-track,
#doc-page-rich-content table::-webkit-scrollbar-track,
.documentation-page table::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: calc(var(--scrollbar-size) / 2);
}

.changelog-scroll-container::-webkit-scrollbar-thumb,
#doc-page-rich-content pre::-webkit-scrollbar-thumb,
.documentation-page pre::-webkit-scrollbar-thumb,
#doc-page-rich-content table::-webkit-scrollbar-thumb,
.documentation-page table::-webkit-scrollbar-thumb {
  background: var(--brand-color);
  border-radius: calc(var(--scrollbar-size) / 2);
}

.changelog-scroll-container::-webkit-scrollbar-thumb:hover,
#doc-page-rich-content pre::-webkit-scrollbar-thumb:hover,
.documentation-page pre::-webkit-scrollbar-thumb:hover,
#doc-page-rich-content table::-webkit-scrollbar-thumb:hover,
.documentation-page table::-webkit-scrollbar-thumb:hover {
  background: var(--brand-color);
}

.changelog-scroll-container::-webkit-scrollbar-corner,
#doc-page-rich-content pre::-webkit-scrollbar-corner,
.documentation-page pre::-webkit-scrollbar-corner,
#doc-page-rich-content table::-webkit-scrollbar-corner,
.documentation-page table::-webkit-scrollbar-corner {
  background: transparent;
}

/* Very small devices */
@media (max-width: 480px) {
  :root { --header-h: 80px; }
  .site-logo {
    height: 56px;
  }
  
  .changelog-scroll-container {
    max-height: 350px;
  }
  
  .changelog-version-header {
    padding: 0.75rem;
  }
  
  .changelog-version-title-container {
    gap: 0.5rem;
  }
  
  .changelog-version-meta {
    gap: 0.5rem;
  }
  
  .changelog-version-title {
    font-size: 1rem;
  }
  
  .changelog-version-badge {
    font-size: 0.7rem;
    padding: 0.2rem 0.4rem;
  }
  
  .changelog-version-date {
    font-size: 0.7rem;
    padding: 0.2rem 0.4rem;
  }
  
  .changelog-version-content {
    padding: 0 0.75rem 0.75rem 0.75rem;
  }
  
  .changelog-changes {
    padding-left: 1rem;
  }
  
  .changelog-change-item {
    font-size: 0.85rem;
  }
  
  .media-carousel .carousel-indicators {
    bottom: 10px;
    padding: 4px 6px;
    gap: 6px;
  }
  
  .media-carousel .carousel-indicators button {
    width: 10px !important;
    height: 10px !important;
    margin: 0;
  }
  
  .media-carousel .intro__usage-caption,
  .usage-carousel-caption {
    margin-top: 0.4rem;
    font-size: 0.8rem;
  }
}

/* ===== IMAGE ALIGNMENT CLASSES ===== */
/* Object position classes for image alignment */
.object-position-top-left {
  object-position: top left !important;
}

.object-position-top-right {
  object-position: top right !important;
}

.object-position-center {
  object-position: center !important;
}

/* ===== DOCUMENTATION STYLES ===== */
/* Apply shared utility classes */
.site-header-content,
.changelog-version-header,
.header-buttons,
.changelog-version-title-container,
.changelog-version-meta {
  display: flex;
  align-items: center;
}

.site-header-content,
.changelog-version-header {
  justify-content: space-between;
}

.header-buttons,
.changelog-version-title-container,
.changelog-version-meta {
  gap: 0.75rem;
}

.changelog-version-header,
.view-toggle-btn,
.documentation-toc-item {
  transition: all 0.3s ease;
}

.documentation-toc-grid,
.documentation-toc-content {
  display: flex;
  flex-direction: column;
}

/* View toggle button */

.view-toggle-btn:hover {
  transform: translateY(-1px);
}

/* View containers */
.view-container {
  transition: opacity 0.3s ease;
}

/* Documentation Table of Contents */
.documentation-toc-grid {
  gap: 1rem;
  margin-top: 1.5rem;
}

.documentation-toc-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.5rem;
  align-items: center;
  padding: 1.5rem;
  background: var(--surface-04);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-10);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

.documentation-toc-item:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  color: inherit;
  text-decoration: none;
}

.documentation-toc-item.under-construction {
  pointer-events: none;
  filter: grayscale(0.5);
}

.documentation-toc-item.under-construction:hover {
  transform: none;
  box-shadow: none;
  background: var(--surface-04);
  border-color: var(--border-10);
}

.documentation-toc-content {
  gap: 0.5rem;
}

.documentation-toc-title {
  font-weight: var(--font-weight-bold);
  margin: 0;
  font-size: 1.5rem;
  color: var(--text-white);
}

.documentation-toc-description {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.95rem;
  margin: 0;
  line-height: 1.5;
}

.documentation-toc-image {
  width: 200px;
  height: 150px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-10);
}

.documentation-subtitle {
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 0;
  font-size: 1rem;
}

/* Documentation navigation */
.documentation-nav {
  margin: 1rem 0 2rem; /* add top margin to push away from header */
}

.documentation-page {
  animation: fadeIn 0.3s ease;
  padding-top: 0.5rem; /* extra breathing room under fixed header */
}

/* Hide empty intro card in documentation pages to avoid blank space */
.documentation-page .intro:empty { display: none; }

/* Never show the rich-content section title (we already show the page title above) */
#doc-page-rich-title { display: none; }

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive adjustments for documentation */
@media (max-width: 768px) {
  .header-buttons {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .documentation-toc-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  
  .documentation-toc-item {
    padding: 0.75rem;
  }
  
  .documentation-toc-title {
    font-size: 0.9rem;
  }
}

/* ===== DOCUMENTATION EMBED ===== */
.doc-embed-container {
  width: 100%;
  height: 70vh;
  overflow: hidden;
  border-radius: var(--radius-md);
}

.doc-embed-frame {
  width: 100%;
  height: 100%;
  border: none;
  background: #ffffff;
  border-radius: var(--radius-md);
}

.doc-embed-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin: 0.75rem 0.5rem 0.25rem 0.5rem;
}

@media (max-width: 768px) {
  .doc-embed-container { height: 65vh; }
}

/* ===== DOCUMENTATION CODE STYLES (Prism + inline) ===== */
/* Container scoping for inline docs */
#doc-page-rich-content,
.documentation-page {
  --code-bg: rgba(255, 255, 255, 0.06);
  --code-border: rgba(255, 255, 255, 0.12);
  --code-fg: var(--text-white);
}

/* Scale tables within inline docs by 25% (0.75x) without affecting global docs */
#doc-page-rich-content { --table-scale: 0.75; }

/* Block code */
:is(#doc-page-rich-content, .documentation-page) pre,
:is(#doc-page-rich-content, .documentation-page) pre[class*="language-"] {
  background: var(--code-bg) !important;
  color: var(--code-fg) !important;
  border: 1px solid var(--code-border) !important;
  border-radius: var(--radius-md) !important;
  padding: 1rem 1.25rem !important;
  overflow: auto !important;
  box-shadow: 0 6px 24px rgba(0,0,0,0.35) !important;
  font-family: var(--font-family-mono) !important;
  line-height: 1.5 !important;
  font-size: 0.75em !important; /* 25% smaller */
}

/* Scrollbar styles unified above with DRY group */

/* Firefox scrollbar styles unified with DRY group */

/* Inline code */
:is(#doc-page-rich-content, .documentation-page) code:not([class*="language-"]) {
  background: var(--surface-08) !important;
  color: var(--text-white) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 6px !important;
  padding: 0.1rem 0.35rem !important;
  font-family: var(--font-family-mono) !important;
  font-size: 0.75em !important; /* 25% smaller */
}

/* Prism base */
:is(#doc-page-rich-content, .documentation-page) code[class*="language-"] {
  text-shadow: none !important;
  color: var(--text-white) !important;
  font-family: var(--font-family-mono) !important;
}

/* ===== DOCUMENTATION TABLE STYLES ===== */
/* Tables are self-contained with border and radius (no wrapper needed) */
:is(#doc-page-rich-content, .documentation-page) table {
  margin: 0.75rem 0 1rem;
  width: 100%;
  border: 1px solid var(--code-border);
  border-radius: var(--radius-md);
  background: var(--surface-04);
  scrollbar-gutter: stable;
  font-size: calc(1em * var(--table-scale, 1));
  box-sizing: border-box;
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
  min-width: calc(640px * var(--table-scale, 1));
}

/* Cell sizing: include borders in width to keep columns aligned */
:is(#doc-page-rich-content, .documentation-page) thead th,
:is(#doc-page-rich-content, .documentation-page) tbody td {
  box-sizing: border-box;
}

/* Table scrollbar styles unified with DRY group */

/* Firefox table scrollbar styles unified with DRY group */

/* DRY: Unified cell padding and alignment */
:is(#doc-page-rich-content, .documentation-page) thead th,
:is(#doc-page-rich-content, .documentation-page) tbody td {
  padding: calc(0.75rem * var(--table-scale, 1)) calc(0.9rem * var(--table-scale, 1));
  text-align: left;
  vertical-align: middle;
}

/* Header-specific styles */
:is(#doc-page-rich-content, .documentation-page) thead th {
  background: rgba(255, 255, 255, 0.06);
  font-weight: 700;
  border-bottom: 1px solid var(--code-border);
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
}

/* Body cell-specific styles */
:is(#doc-page-rich-content, .documentation-page) tbody td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}


/* Guarantee rows/cells expand to fit content */
:is(#doc-page-rich-content, .documentation-page) table.api-table tr,
:is(#doc-page-rich-content, .documentation-page) table.api-table th,
:is(#doc-page-rich-content, .documentation-page) table.api-table td {
  height: auto;
}
:is(#doc-page-rich-content, .documentation-page) table.api-table td {
  overflow: visible;
}

/* Column separators */
:is(#doc-page-rich-content, .documentation-page) thead th,
:is(#doc-page-rich-content, .documentation-page) tbody td {
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

:is(#doc-page-rich-content, .documentation-page) thead th:last-child,
:is(#doc-page-rich-content, .documentation-page) tbody td:last-child {
  /* Avoid an extra right-side border which can cause a 1px overflow and look like the edge is cut off */
  border-right: none;
}

/* Last column alignment for compact values (e.g., Default Value) */
:is(#doc-page-rich-content, .documentation-page) table td:last-child {
  text-align: left; /* left-align values */
  white-space: nowrap;
}

:is(#doc-page-rich-content, .documentation-page) table th:last-child {
  text-align: left; /* left-align header */
  /* Allow header to wrap if needed */
}

/* Column widths and wrapping - enforce the same widths on header and body (scoped to .api-table) */
:is(#doc-page-rich-content, .documentation-page) table.api-table thead th:nth-child(1),
:is(#doc-page-rich-content, .documentation-page) table.api-table tbody td:nth-child(1) { width: 26%; }
:is(#doc-page-rich-content, .documentation-page) table.api-table thead th:nth-child(2),
:is(#doc-page-rich-content, .documentation-page) table.api-table tbody td:nth-child(2) { width: 62%; }
:is(#doc-page-rich-content, .documentation-page) table.api-table thead th:nth-child(3),
:is(#doc-page-rich-content, .documentation-page) table.api-table tbody td:nth-child(3) { width: 12%; }

:is(#doc-page-rich-content, .documentation-page) table.api-table td:nth-child(1),
:is(#doc-page-rich-content, .documentation-page) table.api-table td:nth-child(3) {
  white-space: nowrap; /* keep name and default on one line */
}

:is(#doc-page-rich-content, .documentation-page) table.api-table td:nth-child(2) {
  white-space: normal;        /* allow wrapping only at natural points */
  word-break: normal;         /* do not cut words */
  overflow-wrap: normal;      /* break only at spaces/punctuation */
  text-wrap: pretty;          /* nicer line breaks where supported */
  hyphens: none;              /* never hyphenate */
}

/* Zebra striping for readability */
:is(#doc-page-rich-content, .documentation-page) tbody tr:nth-child(odd) td {
  background: rgba(255, 255, 255, 0.02);
}

/* Code elements inside table cells */
:is(#doc-page-rich-content, .documentation-page) td code,
:is(#doc-page-rich-content, .documentation-page) th code {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 6px !important;
  padding: 0.05rem 0.35rem !important;
  word-break: keep-all; /* keep tokens intact */
  overflow-wrap: normal; /* wrap only at natural points */
  white-space: normal;  /* allow wrapping */
}

/* In API tables, keep code tokens intact (no cutting) */
:is(#doc-page-rich-content, .documentation-page) table.api-table td code {
  word-break: keep-all;
  overflow-wrap: normal;
}

/* Token colors mapped to TOML theme */
#doc-page-rich-content .token.comment,
.documentation-page .token.comment,
#doc-page-rich-content .token.prolog,
.documentation-page .token.prolog,
#doc-page-rich-content .token.doctype,
.documentation-page .token.doctype,
#doc-page-rich-content .token.cdata,
.documentation-page .token.cdata {
  color: rgba(255,255,255,0.58) !important; /* darker than main code */
  font-style: italic;
}

#doc-page-rich-content .token.punctuation,
.documentation-page .token.punctuation,
#doc-page-rich-content .token.operator,
.documentation-page .token.operator {
  color: rgba(255,255,255,0.9) !important;
  background: transparent !important; /* avoid white pill backgrounds on '=' etc. */
  box-shadow: none !important;
  border: none !important;
}

#doc-page-rich-content .token.keyword,
.documentation-page .token.keyword,
#doc-page-rich-content .token.atrule,
.documentation-page .token.atrule {
  color: var(--brand-color) !important;
}

/* Additional mappings for completeness */
#doc-page-rich-content .token.tag,
.documentation-page .token.tag,
#doc-page-rich-content .token.selector,
.documentation-page .token.selector,
#doc-page-rich-content .token.property,
.documentation-page .token.property,
#doc-page-rich-content .token.attr-name,
.documentation-page .token.attr-name {
  color: var(--brand-color) !important;
}

#doc-page-rich-content .token.boolean,
.documentation-page .token.boolean,
#doc-page-rich-content .token.number,
.documentation-page .token.number,
#doc-page-rich-content .token.constant,
.documentation-page .token.constant {
  color: var(--brand-color) !important;
}

#doc-page-rich-content .token.string,
.documentation-page .token.string,
#doc-page-rich-content .token.char,
.documentation-page .token.char {
  color: var(--brand-color) !important;
}

#doc-page-rich-content .token.function,
.documentation-page .token.function,
#doc-page-rich-content .token.class-name,
.documentation-page .token.class-name,
#doc-page-rich-content .token.builtin,
.documentation-page .token.builtin {
  color: var(--brand-color) !important;
  font-weight: 600;
}

/* Treat dotted-call property before '(' as a function (modern browsers) */
#doc-page-rich-content .token.property:has(+ .token.punctuation),
.documentation-page .token.property:has(+ .token.punctuation) {
  color: var(--brand-color) !important;
  font-weight: 600;
}

/* Fallback: class added via JS after Prism highlighting */
#doc-page-rich-content .token-func-call,
.documentation-page .token-func-call {
  color: var(--brand-color) !important;
  font-weight: 600 !important;
}

/* Avoid double backgrounds on nested code */
#doc-page-rich-content pre[class*="language-"] > code,
.documentation-page pre[class*="language-"] > code {
  background: transparent !important;
}

/* Selection in code blocks */
#doc-page-rich-content pre ::selection,
.documentation-page pre ::selection,
#doc-page-rich-content code ::selection,
.documentation-page code ::selection {
  background: color-mix(in srgb, var(--brand-color) 35%, transparent) !important;
}

/* ===== SUPPORT SECTION BUTTONS ===== */
.support-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  margin-top: 1rem;
}

@media (max-width: 768px) {
  .support-buttons {
    flex-direction: column;
    align-items: stretch;
  }
  
  .support-buttons .btn {
    width: 100%;
  }
}