/**
 * Bengal SSG Default Theme
 * Code & Syntax Highlighting Styles
 */

/* ============================================
   INLINE CODE
   ============================================ */

/* NOTE: Base inline code styles are defined in base/reset.css
 * This file only contains additional code block and syntax highlighting styles.
 * If you need different inline code styles, use a class like .code-accent
 */

.code-accent {
  color: var(--color-accent);
  border: 1px solid var(--color-border-light);
  font-weight: var(--weight-medium);
}

/* ============================================
   CODE BLOCKS
   ============================================ */

pre {
  position: relative;
  margin: 0;
  margin-block: 1.5rem;
  padding: var(--space-6);
  background-color: var(--color-bg-code);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--radius-2xl);
  /* Increased from --radius-xl (12px → 16px) */
  overflow-x: auto;
  line-height: var(--line-height-relaxed);
  box-shadow: var(--elevation-card);
  transition: box-shadow var(--transition-base);
  /* Peaceful glow animation - signature Bengal top/bottom border pulse */
  animation: code-border-glow 8s ease-in-out infinite;
}

/* Peaceful slow glow animation for code block borders - light mode (subtle) */
@keyframes code-border-glow {

  0%,
  100% {
    box-shadow:
      var(--elevation-card),
      0 -1px 0 0 color-mix(in srgb, var(--color-primary) 0%, transparent),
      0 -2px 6px 0 color-mix(in srgb, var(--color-primary) 3%, transparent),
      0 1px 0 0 color-mix(in srgb, var(--color-primary) 0%, transparent),
      0 2px 6px 0 color-mix(in srgb, var(--color-primary) 3%, transparent);
  }

  50% {
    box-shadow:
      var(--elevation-card),
      0 -1px 0 0 color-mix(in srgb, var(--color-primary) 6%, transparent),
      0 -2px 8px 0 color-mix(in srgb, var(--color-primary) 5%, transparent),
      0 1px 0 0 color-mix(in srgb, var(--color-primary) 6%, transparent),
      0 2px 8px 0 color-mix(in srgb, var(--color-primary) 5%, transparent);
  }
}

pre.gradient-border {
  border: none;
}

pre.fluid-border {
  border: none;
}

/* Show copy button on hover (Supabase pattern) */
pre:hover .code-copy-button,
.code-block-wrapper:hover .code-copy-button,
.highlight:hover .code-copy-button,
td.code:hover .code-copy-button,
.code-copy-button:focus-visible {
  opacity: 1;
  pointer-events: auto;
}

[data-theme="dark"] pre {
  border: 1px solid rgba(255, 255, 255, 0.1);
  animation: code-border-glow-dark 8s ease-in-out infinite;
}

/* Peaceful slow glow animation for code block borders - dark mode (subtle) */
@keyframes code-border-glow-dark {

  0%,
  100% {
    box-shadow:
      var(--elevation-card),
      0 -1px 0 0 color-mix(in srgb, var(--color-primary) 0%, transparent),
      0 -2px 8px 0 color-mix(in srgb, var(--color-primary) 4%, transparent),
      0 1px 0 0 color-mix(in srgb, var(--color-primary) 0%, transparent),
      0 2px 8px 0 color-mix(in srgb, var(--color-primary) 4%, transparent);
  }

  50% {
    box-shadow:
      var(--elevation-card),
      0 -1px 0 0 color-mix(in srgb, var(--color-primary) 10%, transparent),
      0 -2px 10px 0 color-mix(in srgb, var(--color-primary) 8%, transparent),
      0 1px 0 0 color-mix(in srgb, var(--color-primary) 10%, transparent),
      0 2px 10px 0 color-mix(in srgb, var(--color-primary) 8%, transparent);
  }
}

/* Break out of container padding on mobile for better scrolling */
@media (max-width: 639px) {
  pre {
    margin-inline: calc(-1 * var(--space-3));
    padding-inline: var(--space-4);
    border-radius: var(--radius-md);
    /* Smooth scrolling on iOS */
    -webkit-overflow-scrolling: touch;
    /* Better scrollbar */
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
  }

  /* Hide line numbers on very small screens if present */
  .highlight .linenos:not(td),
  .highlight td.linenos {
    display: none;
  }

  /* Better copy button positioning */
  .code-header-inline {
    inset-block-start: 0.375rem;
    inset-inline-end: 0.375rem;
  }

  .code-copy-button {
    padding: 0.25rem 0.5rem;
    font-size: 0.6875rem;
  }
}

@media (min-width: 400px) and (max-width: 639px) {
  pre {
    margin-inline: calc(-1 * var(--space-4));
  }
}

pre code {
  padding: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-primary);
  background: none;
  border: none;
  border-radius: 0;
}

/* ============================================
   CODE BLOCK HEADER
   ============================================ */

.code-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-bg-tertiary);
  border-bottom: 1px solid var(--color-border);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

/* ============================================
   CODE BLOCK WITH TITLE
   Usage: ```python title="filename.py"
   ============================================ */

.code-block-titled {
  margin-block: 1.5rem;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: var(--elevation-card);
  /* Peaceful glow animation - signature Bengal top/bottom border pulse */
  animation: code-border-glow 8s ease-in-out infinite;
}

[data-theme="dark"] .code-block-titled {
  border-color: rgba(255, 255, 255, 0.1);
  animation: code-border-glow-dark 8s ease-in-out infinite;
}

.code-block-title {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  padding: var(--space-2) var(--space-4);
  background-color: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
  border-bottom: 1px solid var(--color-border-light);
  /* Subtle file icon */
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.code-block-title::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  flex-shrink: 0;
  opacity: 0.7;
}

[data-theme="dark"] .code-block-title::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3C/svg%3E");
}

/* Reset styles for nested highlight/pre elements */
.code-block-titled .highlight,
.code-block-titled pre {
  margin: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  animation: none;
}

/* Reset table styles inside titled blocks */
.code-block-titled .highlighttable {
  margin: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  animation: none;
}

/* Restore bottom border-radius on last element */
.code-block-titled> :last-child,
.code-block-titled> :last-child pre,
.code-block-titled> :last-child .highlighttable {
  border-radius: 0 0 calc(var(--radius-2xl) - 1px) calc(var(--radius-2xl) - 1px);
}

/* Mobile adjustments */
@media (max-width: 639px) {
  .code-block-titled {
    margin-inline: calc(-1 * var(--space-3));
    border-radius: var(--radius-md);
  }

  .code-block-title {
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-xxs);
  }
}

@media (min-width: 400px) and (max-width: 639px) {
  .code-block-titled {
    margin-inline: calc(-1 * var(--space-4));
  }
}

@media (prefers-reduced-motion: reduce) {

  .code-block-titled,
  [data-theme="dark"] .code-block-titled {
    animation: none;
    box-shadow:
      var(--elevation-card),
      0 -1px 0 0 color-mix(in srgb, var(--color-primary) 4%, transparent),
      0 1px 0 0 color-mix(in srgb, var(--color-primary) 4%, transparent);
  }
}

/* Code block wrapper - contains pre and button */
.code-block-wrapper {
  position: relative;
  margin: var(--space-6) 0;
  border-radius: var(--radius-2xl);
  border: 1px solid rgba(0, 0, 0, 0.1);
  background-color: var(--color-bg-code);
  box-shadow: var(--elevation-card);
  overflow: visible;
  /* Allow tooltip to overflow */
  transition: box-shadow var(--transition-base);
  /* Peaceful glow animation - signature Bengal top/bottom border pulse */
  animation: code-border-glow 8s ease-in-out infinite;
}


[data-theme="dark"] .code-block-wrapper {
  border: 1px solid rgba(255, 255, 255, 0.1);
  animation: code-border-glow-dark 8s ease-in-out infinite;
}

/* Keep animated borders outside the scrolling <pre> */
.code-block-wrapper.gradient-border,
.code-block-wrapper.gradient-border-subtle,
.code-block-wrapper.gradient-border-strong,
.code-block-wrapper.fluid-border,
.code-block-wrapper.fluid-combined {
  border: none;
  isolation: isolate;
}

.code-block-wrapper pre {
  margin: 0;
  border: none;
  border-radius: inherit;
  box-shadow: none;
  overflow: hidden;
  /* Clip content to border-radius */
  /* Disable glow on inner pre - wrapper handles it */
  animation: none;
  width: 100%;
  /* Ensure pre fills wrapper width */
}

/* Inline code header (positioned absolutely relative to wrapper, not inside scrolling pre) */
.code-header-inline {
  position: absolute;
  inset-block-start: 0.5rem;
  inset-inline-end: 0.5rem;
  z-index: 1;
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: flex-end;
  pointer-events: none;
}

.code-language {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  /* Ghost/frosted glass effect with neumorphic shadow */
  padding: 0.25rem 0.5rem;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px) saturate(180%);
  -webkit-backdrop-filter: blur(8px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-sm);
  /* Neumorphic shadow - refined depth */
  box-shadow:
    inset 0.5px 0.5px 1px rgba(255, 255, 255, 0.4),
    inset -0.5px -0.5px 1px rgba(0, 0, 0, 0.15),
    1px 1px 2px rgba(0, 0, 0, 0.08),
    -0.5px -0.5px 1px rgba(255, 255, 255, 0.3);
  pointer-events: auto;
  /* Allow interaction */
}

/* Dark mode for code language label */
[data-theme="dark"] .code-language {
  background: rgba(0, 0, 0, 0.2);
  border-color: rgba(255, 255, 255, 0.1);
  /* Neumorphic shadow for dark mode - refined */
  box-shadow:
    inset 0.5px 0.5px 1px rgba(255, 255, 255, 0.08),
    inset -0.5px -0.5px 1px rgba(0, 0, 0, 0.4),
    1px 1px 3px rgba(0, 0, 0, 0.25),
    -0.5px -0.5px 1px rgba(255, 255, 255, 0.05);
}

/* Fallback */
@supports not (backdrop-filter: blur(8px)) {
  .code-language {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--color-border);
  }

  [data-theme="dark"] .code-language {
    background: rgba(26, 26, 26, 0.9);
    border-color: var(--color-border);
  }
}

.code-copy-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  /* Ghost/frosted glass effect - neumorphic shadow */
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast), box-shadow 0.2s ease, opacity 0.15s ease;
  /* Neumorphic shadow - refined depth with better balance */
  box-shadow:
    inset 0.5px 0.5px 1px rgba(255, 255, 255, 0.4),
    inset -0.5px -0.5px 1px rgba(0, 0, 0, 0.15),
    1px 1px 2px rgba(0, 0, 0, 0.08),
    -0.5px -0.5px 1px rgba(255, 255, 255, 0.3);
  flex-shrink: 0;
  touch-action: manipulation;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  /* For tooltip */
  /* Hidden by default, shows on hover (Supabase pattern) */
  opacity: 0;
  pointer-events: none;
}

/* Hide text span */
.code-copy-button>span {
  display: none;
}

/* Tooltip */
.code-copy-button::after {
  content: attr(aria-label);
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 50%;
  transform: translateX(-50%);
  padding: 0.375rem 0.625rem;
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-size: var(--text-xs);
  white-space: nowrap;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--elevation-card);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition-fast), visibility var(--transition-fast), transform var(--transition-fast);
  z-index: 1000;
}

/* Tooltip arrow */
.code-copy-button::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 0.25rem);
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid var(--color-border);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition-fast), visibility var(--transition-fast);
  z-index: 1001;
}

.code-copy-button:hover::after,
.code-copy-button:hover::before,
.code-copy-button:focus-visible::after,
.code-copy-button:focus-visible::before {
  opacity: 1;
  visibility: visible;
}

/* Adjust tooltip position on mobile */
@media (max-width: 640px) {
  .code-copy-button::after {
    bottom: auto;
    top: calc(100% + 0.5rem);
  }

  .code-copy-button::before {
    bottom: auto;
    top: calc(100% + 0.25rem);
    border-top: none;
    border-bottom: 4px solid var(--color-border);
  }
}

.code-copy-button:hover {
  color: var(--color-text-primary);
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.35);
  /* Neumorphic hover - refined raised effect with better depth */
  box-shadow:
    inset 0.5px 0.5px 1.5px rgba(255, 255, 255, 0.5),
    inset -0.5px -0.5px 1.5px rgba(0, 0, 0, 0.12),
    2px 2px 6px rgba(0, 0, 0, 0.1),
    -1px -1px 3px rgba(255, 255, 255, 0.4);
  transform: translate3d(0, -0.5px, 0);
}

.code-copy-button:active {
  /* Neumorphic pressed state - subtle inset effect */
  box-shadow:
    inset 1px 1px 2px rgba(0, 0, 0, 0.15),
    inset -0.5px -0.5px 1px rgba(255, 255, 255, 0.2),
    1px 1px 2px rgba(0, 0, 0, 0.05);
  transform: translate3d(0, 0, 0);
  background: rgba(255, 255, 255, 0.15);
}

.code-copy-button.copied {
  color: var(--color-success);
  background: rgba(34, 197, 94, 0.15);
  /* Success color with transparency */
  border-color: rgba(34, 197, 94, 0.3);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  /* Neumorphic shadow with success tint */
  box-shadow:
    inset 0.5px 0.5px 1px rgba(34, 197, 94, 0.3),
    inset -0.5px -0.5px 1px rgba(0, 0, 0, 0.1),
    1px 1px 3px rgba(34, 197, 94, 0.2),
    -0.5px -0.5px 1px rgba(34, 197, 94, 0.15);
  /* Satisfying bounce animation on success */
  animation: copy-button-burst 0.5s var(--ease-bounce, cubic-bezier(0.34, 1.56, 0.64, 1));
}

/* Burst ring animation on copy success */
.code-copy-button.copied::before {
  content: '' !important;
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  border: 2px solid var(--color-success);
  opacity: 0;
  pointer-events: none;
  animation: copy-burst-ring 0.6s var(--ease-overshoot, cubic-bezier(0.175, 0.885, 0.32, 1.275)) forwards;
}

@keyframes copy-button-burst {
  0% {
    transform: scale(1);
  }
  15% {
    transform: scale(0.88);
  }
  35% {
    transform: scale(1.18);
  }
  55% {
    transform: scale(0.96);
  }
  75%, 100% {
    transform: scale(1);
  }
}

@keyframes copy-burst-ring {
  0% {
    opacity: 0.9;
    transform: scale(1);
    border-width: 3px;
  }
  100% {
    opacity: 0;
    transform: scale(1.6);
    border-width: 1px;
  }
}

/* Reduced motion: disable burst animations */
@media (prefers-reduced-motion: reduce) {
  .code-copy-button.copied {
    animation: none;
  }
  .code-copy-button.copied::before {
    animation: none;
  }
}

/* Update tooltip text when copied */
.code-copy-button.copied::after {
  content: 'Copied!';
}

.code-copy-button:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

/* Dark mode adjustments for ghost effect */
[data-theme="dark"] .code-copy-button {
  background: rgba(0, 0, 0, 0.2);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--color-text-secondary);
  /* Neumorphic shadow for dark mode */
  box-shadow:
    inset 1px 1px 2px rgba(255, 255, 255, 0.05),
    inset -1px -1px 2px rgba(0, 0, 0, 0.3),
    2px 2px 4px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .code-copy-button:hover {
  background: rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--color-text-primary);
  /* Neumorphic hover for dark mode - refined raised effect */
  box-shadow:
    inset 0.5px 0.5px 1.5px rgba(255, 255, 255, 0.12),
    inset -0.5px -0.5px 1.5px rgba(0, 0, 0, 0.5),
    2px 2px 6px rgba(0, 0, 0, 0.35),
    -1px -1px 3px rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .code-copy-button.copied {
  background: rgba(34, 197, 94, 0.2);
  border-color: rgba(34, 197, 94, 0.4);
}

/* Fallback for browsers without backdrop-filter */
@supports not (backdrop-filter: blur(12px)) {
  .code-copy-button {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--color-border);
  }

  [data-theme="dark"] .code-copy-button {
    background: rgba(26, 26, 26, 0.9);
    border-color: var(--color-border);
  }
}

/* Duplicate styles removed - already defined above */

/* ============================================
   XXS adjustments (<= --breakpoint-xxs): keep toolbar compact
   Use 399px to avoid overlap with min-width queries
   ============================================ */
@media (max-width: 399px) {
  .code-header {
    padding: var(--space-2) var(--space-3);
    gap: 0.5rem;
  }

  .code-language {
    font-size: var(--text-xxs);
  }

  .code-copy-button {
    width: 1.75rem;
    height: 1.75rem;
  }
}

/* ============================================
   ROSETTES SYNTAX HIGHLIGHTING VARIABLES
   RFC-0003: Semantic Token System
   ============================================ */

/* Rosettes syntax theme variables - inherits from Bengal design tokens */
:root {
  /* Syntax highlighting semantic tokens */
  --syntax-bg: var(--color-bg-code);
  --syntax-bg-highlight: color-mix(in srgb, var(--color-primary) 12%, var(--color-bg-code));
  --syntax-control: var(--color-code-keyword, #e74c3c);
  --syntax-declaration: var(--color-code-keyword, #e74c3c);
  --syntax-import: var(--color-code-keyword, #e74c3c);
  --syntax-string: var(--color-code-string, #2ecc71);
  --syntax-number: var(--color-code-number, #e67e22);
  --syntax-boolean: var(--color-code-number, #e67e22);
  --syntax-type: var(--color-code-type, #9b59b6);
  --syntax-function: var(--color-secondary, #3498db);
  --syntax-variable: var(--color-code-text, var(--color-text-primary));
  --syntax-constant: var(--color-code-number, #e67e22);
  --syntax-comment: var(--color-text-muted, #6c757d);
  --syntax-docstring: var(--color-text-muted, #6c757d);
  --syntax-error: var(--color-error, #e74c3c);
  --syntax-warning: var(--color-warning, #f39c12);
  --syntax-added: var(--color-success, #2ecc71);
  --syntax-removed: var(--color-error, #e74c3c);
  --syntax-text: var(--color-text-primary);
  --syntax-muted: var(--color-text-muted, #6c757d);
  --syntax-punctuation: var(--color-text-secondary);
  --syntax-operator: var(--color-code-keyword, #e74c3c);
  --syntax-attribute: var(--color-code-type, #9b59b6);
  --syntax-namespace: var(--color-code-type, #9b59b6);
  --syntax-tag: var(--color-code-keyword, #e74c3c);
  --syntax-regex: var(--color-code-string, #2ecc71);
  --syntax-escape: var(--color-code-number, #e67e22);
}

/* Dark mode overrides for syntax highlighting */
[data-theme="dark"] {
  --syntax-comment: var(--color-text-muted, #adb5bd);
  --syntax-docstring: var(--color-text-secondary, #9e9e9e);
}

/* ============================================
   ROSETTES SEMANTIC CLASSES (NEW - RFC-0003)
   Self-documenting class names for modern output
   ============================================ */

/* Base container for Rosettes semantic output */
.rosettes {
  background: var(--syntax-bg);
  color: var(--syntax-text);
}

/* Control & Structure */
.rosettes .syntax-control {
  color: var(--syntax-control);
  font-weight: 600;
}

.rosettes .syntax-declaration {
  color: var(--syntax-declaration);
  font-weight: 600;
}

.rosettes .syntax-import {
  color: var(--syntax-import);
}

/* Data & Literals */
.rosettes .syntax-string {
  color: var(--syntax-string);
}

.rosettes .syntax-docstring {
  color: var(--syntax-docstring);
  font-style: italic;
}

.rosettes .syntax-number {
  color: var(--syntax-number);
}

.rosettes .syntax-boolean {
  color: var(--syntax-boolean);
}

/* Identifiers */
.rosettes .syntax-type {
  color: var(--syntax-type);
}

.rosettes .syntax-function {
  color: var(--syntax-function);
  font-weight: 600;
}

.rosettes .syntax-variable {
  color: var(--syntax-variable);
}

.rosettes .syntax-constant {
  color: var(--syntax-constant);
}

/* Documentation */
.rosettes .syntax-comment {
  color: var(--syntax-comment);
  font-style: italic;
}

/* Feedback */
.rosettes .syntax-error {
  color: var(--syntax-error);
  text-decoration: wavy underline var(--syntax-error);
}

.rosettes .syntax-warning {
  color: var(--syntax-warning);
}

.rosettes .syntax-added {
  color: var(--syntax-added);
}

.rosettes .syntax-removed {
  color: var(--syntax-removed);
}

/* Additional */
.rosettes .syntax-punctuation {
  color: var(--syntax-punctuation);
}

.rosettes .syntax-operator {
  color: var(--syntax-operator);
}

.rosettes .syntax-attribute {
  color: var(--syntax-attribute);
}

.rosettes .syntax-namespace {
  color: var(--syntax-namespace);
}

.rosettes .syntax-tag {
  color: var(--syntax-tag);
}

.rosettes .syntax-regex {
  color: var(--syntax-regex);
}

.rosettes .syntax-escape {
  color: var(--syntax-escape);
}

.rosettes .syntax-muted {
  color: var(--syntax-muted);
}

/* Line highlight for Rosettes output */
.rosettes .line-highlight,
.rosettes .hll {
  display: block;
  background: var(--syntax-bg-highlight);
  margin-left: calc(-1 * var(--space-4));
  margin-right: calc(-1 * var(--space-6));
  padding-left: calc(var(--space-4) - 3px);
  padding-right: var(--space-6);
  border-left: 3px solid var(--color-primary);
}

/* ============================================
   PYGMENTS-COMPATIBLE CLASSES (LEGACY FALLBACK)
   Uses CSS variables for consistent theming
   ============================================ */

/* Comments */
.highlight .c,
.highlight .cm,
.highlight .c1,
.highlight .cs {
  color: var(--syntax-comment);
  font-style: italic;
}

/* Keywords */
.highlight .k,
.highlight .kp,
.highlight .kr,
.highlight .kt {
  color: var(--syntax-control);
  font-weight: bold;
}

.highlight .kd {
  color: var(--syntax-declaration);
  font-weight: bold;
}

.highlight .kn {
  color: var(--syntax-import);
}

.highlight .kc {
  color: var(--syntax-boolean);
}

/* Strings */
.highlight .s,
.highlight .s1,
.highlight .s2,
.highlight .sb,
.highlight .sc,
.highlight .sh,
.highlight .sx {
  color: var(--syntax-string);
}

.highlight .sd {
  color: var(--syntax-docstring);
  font-style: italic;
}

.highlight .se,
.highlight .si {
  color: var(--syntax-escape);
}

/* Numbers */
.highlight .m,
.highlight .mf,
.highlight .mh,
.highlight .mi,
.highlight .mo {
  color: var(--syntax-number);
}

/* Functions */
.highlight .nf,
.highlight .fm {
  color: var(--syntax-function);
  font-weight: bold;
}

/* Classes/Types */
.highlight .nc,
.highlight .ne {
  color: var(--syntax-type);
  font-weight: bold;
}

/* Namespaces */
.highlight .nn {
  color: var(--syntax-namespace);
  font-weight: bold;
}

/* Variables */
.highlight .nv,
.highlight .vc,
.highlight .vg,
.highlight .vi {
  color: var(--syntax-variable);
}

/* Operators */
.highlight .o,
.highlight .ow {
  color: var(--syntax-operator);
}

/* Punctuation */
.highlight .p {
  color: var(--syntax-punctuation);
}

/* Built-ins */
.highlight .nb,
.highlight .bp {
  color: var(--syntax-function);
}

/* Constants */
.highlight .no {
  color: var(--syntax-constant);
}

/* Decorators/Attributes */
.highlight .nd {
  color: var(--syntax-attribute);
}

/* Tags */
.highlight .nt {
  color: var(--syntax-tag);
}

/* Regex */
.highlight .sr {
  color: var(--syntax-regex);
}

/* Errors */
.highlight .err {
  color: var(--syntax-error);
  background-color: color-mix(in srgb, var(--syntax-error) 15%, transparent);
}

/* Generic insertions/deletions (diff) */
.highlight .gi {
  color: var(--syntax-added);
}

.highlight .gd {
  color: var(--syntax-removed);
}

/* ============================================
   LINE NUMBERS (Pygments table-based)
   ============================================ */

/* Pygments structure:
   .highlight > table.highlighttable > tbody > tr >
     td.linenos > div.linenodiv > pre
     td.code > pre
*/

/* Container for copy button in table layout */
.highlight.has-copy-button {
  position: relative;
}

/* Absolute positioned copy button (for table layout) */
.code-copy-button--absolute {
  position: absolute;
  /* Offset by table's margin-block-start (1.5rem) plus padding inside */
  top: calc(1.5rem + var(--space-2));
  right: var(--space-2);
  z-index: 10;
}

/* Table wrapper - takes over styling from pre */
.highlight .highlighttable {
  width: 100%;
  margin-block: 1.5rem;
  border-collapse: collapse;
  border-spacing: 0;
  background: var(--color-bg-code);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: var(--elevation-card);
  /* Fixed layout prevents table from expanding beyond container width */
  table-layout: fixed;
  /* Peaceful glow animation - signature Bengal top/bottom border pulse */
  animation: code-border-glow 8s ease-in-out infinite;
}

/* Reset ALL pre styles inside highlighttable */
.highlight .highlighttable pre {
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  /* Disable glow on inner pre - table handles it */
  animation: none;
}

/* Line numbers cell */
.highlight td.linenos {
  width: 3.5rem;
  min-width: 3.5rem;
  max-width: 3.5rem;
  padding: 0;
  /* Use inset box-shadow instead of border so it clips at border-radius */
  box-shadow: inset -1px 0 0 0 var(--color-border-light);
  background: var(--color-bg-code);
  vertical-align: top;
}

/* Keep table-based gutters as table cells so they stretch with the code column */
.highlight .highlighttable td.linenos {
  display: table-cell;
}

/* Line numbers inner div and pre */
.highlight .linenodiv {
  padding: 0;
}

.highlight .linenodiv pre {
  padding: var(--space-6) var(--space-3) var(--space-6) var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-muted);
  text-align: right;
  user-select: none;
}

/* Code cell */
.highlight td.code {
  width: 100%;
  padding: 0;
  vertical-align: top;
}

/* Pygments wraps pre in a div - ensure it fills the cell and scrolls */
.highlight td.code>div {
  width: 100%;
  overflow-x: auto;
}

/* Code pre inside table */
.highlight td.code pre {
  width: 100%;
  padding: var(--space-6);
  padding-left: var(--space-4);
  overflow-x: auto;
}

/* Disable table row hover effect (from typography.css) */
.highlight .highlighttable tr:hover {
  background-color: transparent;
}

/* Dark mode adjustments */
[data-theme="dark"] .highlight td.linenos {
  box-shadow: inset -1px 0 0 0 var(--color-border);
}

[data-theme="dark"] .highlight .highlighttable {
  border-color: var(--color-border);
  animation: code-border-glow-dark 8s ease-in-out infinite;
}

/* Hide line numbers on mobile */
@media (max-width: 639px) {
  .highlight td.linenos {
    display: none;
  }

  .highlight td.code pre {
    padding-left: var(--space-6);
  }
}

/* ============================================
   LINE HIGHLIGHTING (Pygments hl_lines)
   Usage: ```python {5} or ```python {1,3,5-7}
   ============================================ */

/* Position context for absolutely-positioned copy button */
div.highlight {
  position: relative;
  /* Prevent code blocks from expanding page width */
  max-width: 100%;
  overflow: hidden;
}

/* Clip negative margins on .hll to prevent page overflow.
   Applied to the code cell, not div.highlight, so copy button isn't clipped.
   Use overflow-y: hidden to allow horizontal scrolling of long lines. */
div.highlight>pre {
  overflow-x: auto;
  overflow-y: hidden;
}

.highlight td.code {
  overflow-y: hidden;
}

/* Highlighted line from Pygments hl_lines
   The parser post-processes to move newlines outside .hll spans,
   allowing display:block without double line spacing. */
.highlight .hll {
  display: block;
  background: linear-gradient(90deg,
      var(--color-primary) 3px,
      color-mix(in srgb, var(--color-primary) 12%, transparent) 3px);
  /* Extend highlight beyond code cell padding */
  margin-left: calc(-1 * var(--space-4));
  margin-right: calc(-1 * var(--space-6));
  padding-left: calc(var(--space-4) - 3px);
  padding-right: var(--space-6);
}

/* Table layout: same treatment */
.highlight td.code .hll {
  margin-left: calc(-1 * var(--space-4));
  margin-right: calc(-1 * var(--space-6));
  padding-left: calc(var(--space-4) - 3px);
  padding-right: var(--space-6);
}

/* Dark mode: more visible highlight */
[data-theme="dark"] .highlight .hll {
  background: linear-gradient(90deg,
      var(--color-primary) 3px,
      color-mix(in srgb, var(--color-primary) 18%, transparent) 3px);
}

/* Legacy Pygments linenos support */
.highlight .linenos:not(td) {
  display: inline-block;
  padding-right: var(--space-4);
  margin-right: var(--space-4);
  border-right: 1px solid var(--color-border);
  color: var(--color-text-muted);
  user-select: none;
}

/* ============================================
   DARK MODE ADJUSTMENTS
   ============================================ */

/* Dark mode error background uses CSS variable for consistency */
[data-theme="dark"] .highlight .err {
  background-color: color-mix(in srgb, var(--syntax-error) 20%, transparent);
}

/* ============================================
   SCROLLBAR FOR CODE BLOCKS
   ============================================ */

pre::-webkit-scrollbar {
  height: 8px;
}

pre::-webkit-scrollbar-track {
  background: var(--color-bg-secondary);
  border-radius: var(--radius-sm);
}

pre::-webkit-scrollbar-thumb {
  background: var(--color-border-dark);
  border-radius: var(--radius-sm);
}

pre::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-muted);
}

/* ============================================
   REDUCED MOTION PREFERENCES
   ============================================ */

@media (prefers-reduced-motion: reduce) {

  pre,
  [data-theme="dark"] pre,
  .code-block-wrapper,
  [data-theme="dark"] .code-block-wrapper,
  .highlight .highlighttable,
  [data-theme="dark"] .highlight .highlighttable {
    animation: none;
    /* Static subtle glow for reduced motion users */
    box-shadow:
      var(--elevation-card),
      0 -1px 0 0 color-mix(in srgb, var(--color-primary) 4%, transparent),
      0 1px 0 0 color-mix(in srgb, var(--color-primary) 4%, transparent);
  }
}
