/*
  High-Contrast Code Surfaces V16
  Fixes dark text inherited from white Neon Chaos cards inside black code panels.
*/
#root pre {
  color: #f8fafc !important;
  background: #050507 !important;
  border: 2px solid #52525b !important;
  border-left-color: #39ff14 !important;
  box-shadow:
    inset 0 0 0 1px #000,
    5px 5px 0 rgba(38, 230, 255, .28) !important;
  opacity: 1 !important;
  filter: none !important;
  isolation: isolate;
  overflow-x: auto !important;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
  scrollbar-color: #71717a #18181b;
  white-space: pre !important;
}

#root pre code,
#root pre code.text-foreground,
#root pre .text-foreground,
#root .neon-card pre code,
#root .neon-card pre code.text-foreground,
#root .neon-card pre .text-foreground,
#root [class*="bg-muted"] pre code,
#root [class*="bg-secondary"] pre code {
  color: #f8fafc !important;
  -webkit-text-fill-color: #f8fafc !important;
  background: transparent !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  text-shadow: 0 1px 0 #000 !important;
  font-weight: 650 !important;
  letter-spacing: .01em;
  white-space: inherit !important;
}

/* Keep headings such as “Terminal” clearly readable on their light header strip. */
#root .neon-card:has(pre) [class*="border-b"] {
  color: #18181b !important;
  background: #f4f4f5 !important;
  border-color: #71717a !important;
}

#root .neon-card:has(pre) [class*="border-b"] span,
#root .neon-card:has(pre) [class*="border-b"] .text-muted-foreground {
  color: #27272a !important;
  -webkit-text-fill-color: #27272a !important;
  opacity: 1 !important;
  font-weight: 800 !important;
}

/* Copy control remains visible against the dark code surface. */
#root .neon-card:has(pre) .relative > button,
#root .neon-card:has(pre) button[aria-label*="copy" i] {
  color: #fff !important;
  background: rgba(9, 9, 11, .94) !important;
  border: 1px solid #71717a !important;
  opacity: 1 !important;
}

#root .neon-card:has(pre) .relative > button:hover,
#root .neon-card:has(pre) .relative > button:focus-visible,
#root .neon-card:has(pre) button[aria-label*="copy" i]:hover,
#root .neon-card:has(pre) button[aria-label*="copy" i]:focus-visible {
  color: #050507 !important;
  background: #39ff14 !important;
  border-color: #050507 !important;
  outline: 2px solid #26e6ff !important;
  outline-offset: 2px;
}

/* Selection stays readable. */
#root pre code::selection,
#root pre code *::selection {
  color: #050507 !important;
  -webkit-text-fill-color: #050507 !important;
  background: #39ff14 !important;
}

#root pre::-webkit-scrollbar {
  height: 10px;
}

#root pre::-webkit-scrollbar-track {
  background: #18181b;
}

#root pre::-webkit-scrollbar-thumb {
  background: #71717a;
  border: 2px solid #18181b;
}

#root pre::-webkit-scrollbar-thumb:hover {
  background: #39ff14;
}

@media (max-width: 720px) {
  #root pre {
    padding: .9rem !important;
    font-size: .78rem !important;
    line-height: 1.65 !important;
    max-width: 100% !important;
  }

  #root pre code,
  #root pre code.text-foreground {
    font-weight: 600 !important;
  }
}

@media (prefers-contrast: more) {
  #root pre {
    border-color: #fff !important;
    border-left-color: #39ff14 !important;
  }

  #root pre code,
  #root pre code.text-foreground,
  #root pre .text-foreground {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    text-shadow: none !important;
  }
}

/* --------------------------------------------------------------------------
   V17 Layout Fix — Rust Compiler Studio
   Moves the Compilation Results module down on desktop so it aligns with the
   editor workspace and no longer feels pinned too high on wide screens.
   -------------------------------------------------------------------------- */
body[data-project-key="RUST_COMPILER_STUDIO"] #root .rust-results-column-v17 {
  margin-top: clamp(5.25rem, 8vw, 8.75rem) !important;
  transition: margin-top .22s ease, transform .22s ease !important;
}

body[data-project-key="RUST_COMPILER_STUDIO"] #root .rust-results-column-v17 > .flex,
body[data-project-key="RUST_COMPILER_STUDIO"] #root .rust-results-column-v17 h2 {
  position: relative;
  z-index: 6;
}

body[data-project-key="RUST_COMPILER_STUDIO"] #root .rust-results-card-v17,
body[data-project-key="RUST_COMPILER_STUDIO"] #root .rust-results-column-v17 .neon-card {
  min-height: 500px !important;
  box-shadow: 11px 11px 0 var(--neon-pink) !important;
}

body[data-project-key="RUST_COMPILER_STUDIO"] #root .rust-results-column-v17 .neon-card:hover,
body[data-project-key="RUST_COMPILER_STUDIO"] #root .rust-results-column-v17 .neon-card:focus-within {
  box-shadow: 16px 16px 0 var(--neon-pink) !important;
}

@media (max-width: 1024px) {
  body[data-project-key="RUST_COMPILER_STUDIO"] #root .rust-results-column-v17 {
    margin-top: 1.25rem !important;
  }
}

@media (max-width: 640px) {
  body[data-project-key="RUST_COMPILER_STUDIO"] #root .rust-results-column-v17 {
    margin-top: .75rem !important;
  }

  body[data-project-key="RUST_COMPILER_STUDIO"] #root .rust-results-card-v17,
  body[data-project-key="RUST_COMPILER_STUDIO"] #root .rust-results-column-v17 .neon-card {
    min-height: 420px !important;
  }
}


/* --------------------------------------------------------------------------
   V18 Expected Output Readability Fix — Rust lesson cards
   The expected-output preview panels use Tailwind muted text on a black surface.
   Force a bright foreground, stronger font weight, and a clear terminal surface.
   -------------------------------------------------------------------------- */
body[data-project-key="RUST_COMPILER_STUDIO"] #root .expected-output-box-v18,
body[data-project-key="RUST_COMPILER_STUDIO"] #root [class*="bg-success"]:has(.expected-output-value-v18) {
  background: #f3fff5 !important;
  border: 2px solid #7cf58d !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .92),
    6px 6px 0 rgba(38, 230, 255, .25) !important;
  overflow: visible !important;
}

body[data-project-key="RUST_COMPILER_STUDIO"] #root .expected-output-label-v18 {
  color: #101010 !important;
  -webkit-text-fill-color: #101010 !important;
  opacity: 1 !important;
  font-weight: 900 !important;
  letter-spacing: .02em !important;
  text-shadow: none !important;
}

body[data-project-key="RUST_COMPILER_STUDIO"] #root .expected-output-value-v18,
body[data-project-key="RUST_COMPILER_STUDIO"] #root pre.expected-output-value-v18,
body[data-project-key="RUST_COMPILER_STUDIO"] #root pre[class*="text-muted-foreground"][class*="whitespace-pre-wrap"][class*="line-clamp-2"] {
  display: block !important;
  width: 100% !important;
  min-height: 1.7rem !important;
  padding: .42rem .6rem !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: #050507 !important;
  border: 2px solid #d4d4d8 !important;
  border-left: 4px solid #39ff14 !important;
  box-shadow:
    inset 0 0 0 1px #000,
    0 0 0 1px rgba(57, 255, 20, .22),
    4px 4px 0 rgba(38, 230, 255, .32) !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  text-shadow: 0 1px 0 #000, 0 0 7px rgba(255, 255, 255, .32) !important;
  font-weight: 900 !important;
  font-size: .84rem !important;
  line-height: 1.45 !important;
  letter-spacing: .015em !important;
  white-space: pre-wrap !important;
  overflow: visible !important;
  overflow-wrap: anywhere !important;
  -webkit-font-smoothing: antialiased !important;
}

body[data-project-key="RUST_COMPILER_STUDIO"] #root .expected-output-value-v18::selection,
body[data-project-key="RUST_COMPILER_STUDIO"] #root pre.expected-output-value-v18::selection {
  color: #050507 !important;
  -webkit-text-fill-color: #050507 !important;
  background: #39ff14 !important;
}

@media (max-width: 720px) {
  body[data-project-key="RUST_COMPILER_STUDIO"] #root .expected-output-value-v18,
  body[data-project-key="RUST_COMPILER_STUDIO"] #root pre.expected-output-value-v18 {
    font-size: .8rem !important;
    line-height: 1.55 !important;
    padding: .48rem .55rem !important;
  }
}