/* ============================================================
   AC-DC v2 — Code block restyle
   Light, branded code panels:
     • Outer: white surface, Persistence Purple stroke
     • Header: Uranium Blue band, deep-purple title + button
     • Body: white with syntax-highlighted ink
   Scoped via body[data-v2="true"] so it only affects v2.
   ============================================================ */

body[data-v2="true"] {
  /* expose the tokens as locals for easy override */
  --v2-code-stroke:        #290042;        /* Persistence Purple */
  --v2-code-header-bg:     #B7D3F2;        /* Uranium Blue */
  --v2-code-header-fg:     #290042;
  --v2-code-body-bg:       #FFFFFF;
  --v2-code-fg:            #1F2933;
  --v2-code-keyword:       #6F2DBD;        /* purple keywords */
  --v2-code-literal:       #D3121D;        /* red literals (true/false/null/numbers) */
  --v2-code-string:        #1B998B;        /* sour-apple green strings */
  --v2-code-comment:       #69809B;        /* muted comments */
  --v2-code-fn:            #126ED3;        /* function calls — qube blue */
  --v2-code-punct:         #3E4C59;
}

/* The code panel root — Stage, Verify, and Blueprints all share the same shell:
   a sectioned container with a header strip + <pre> below. We retarget by
   matching the visual structure rather than each component name. */

body[data-v2="true"] .v2-codeblock {
  background: var(--v2-code-body-bg) !important;
  border: 1.5px solid var(--v2-code-stroke) !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 0 rgba(41,0,66,.04), 0 8px 24px rgba(41,0,66,.06) !important;
  overflow: hidden;
}

body[data-v2="true"] .v2-codeblock__header {
  background: var(--v2-code-header-bg) !important;
  border-bottom: 1.5px solid var(--v2-code-stroke) !important;
  padding: 14px 20px !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

body[data-v2="true"] .v2-codeblock__title {
  font: 600 14px/1 "Space Mono", ui-monospace, Menlo, monospace !important;
  color: var(--v2-code-header-fg) !important;
  letter-spacing: 0.01em;
}

/* Hide the macOS traffic-light dots in v2 — they read 'dark terminal',
   we want a clean branded header. */
body[data-v2="true"] .v2-codeblock__dots { display: none !important; }

body[data-v2="true"] .v2-codeblock__copy {
  background: #FFFFFF !important;
  color: var(--v2-code-header-fg) !important;
  border: 1.5px solid var(--v2-code-stroke) !important;
  font: 600 12px/1 Inter, sans-serif !important;
  padding: 6px 12px !important;
  border-radius: 6px !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: background 200ms, color 200ms;
}
body[data-v2="true"] .v2-codeblock__copy:hover {
  background: var(--v2-code-header-fg) !important;
  color: #FFFFFF !important;
}

body[data-v2="true"] .v2-codeblock__pre {
  margin: 0 !important;
  padding: 24px 28px !important;
  background: var(--v2-code-body-bg) !important;
  color: var(--v2-code-fg) !important;
  font: 400 14px/22px "Space Mono", ui-monospace, Menlo, monospace !important;
  overflow-x: auto;
  white-space: pre;
  max-height: 560px;
}

/* Syntax tokens — applied by a small post-render highlighter */
body[data-v2="true"] .v2-codeblock__pre .tk-kw   { color: var(--v2-code-keyword); font-weight: 600; }
body[data-v2="true"] .v2-codeblock__pre .tk-lit  { color: var(--v2-code-literal); }
body[data-v2="true"] .v2-codeblock__pre .tk-str  { color: var(--v2-code-string); }
body[data-v2="true"] .v2-codeblock__pre .tk-com  { color: var(--v2-code-comment); font-style: italic; }
body[data-v2="true"] .v2-codeblock__pre .tk-fn   { color: var(--v2-code-fn); }
body[data-v2="true"] .v2-codeblock__pre .tk-punct{ color: var(--v2-code-punct); }
body[data-v2="true"] .v2-codeblock__pre .tk-num  { color: var(--v2-code-literal); }

/* Dark-mode adjustments — keep the same intent (purple stroke, dark header,
   bright tokens on near-black body) but lift body & header text contrast. */
body[data-v2="true"][data-theme="dark"] .v2-codeblock {
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.4), 0 8px 28px rgba(0,0,0,.5) !important;
}
body[data-v2="true"][data-theme="dark"] .v2-codeblock__header {
  background: #290042 !important;                   /* Persistence Purple header */
  border-bottom: 1px solid rgba(255,255,255,.18) !important;
  padding: 16px 20px !important;
}
/* Traffic-light dots stay hidden in BOTH light and dark mode — we want a clean
   branded header, not a terminal hint. */
body[data-v2="true"][data-theme="dark"] .v2-codeblock__dots {
  display: none !important;
}
body[data-v2="true"][data-theme="dark"] .v2-codeblock__title {
  color: #BFB1CE !important;                        /* muted purple-grey — matches reference */
  font-weight: 500 !important;
  opacity: 1;
}
body[data-v2="true"][data-theme="dark"] .v2-codeblock__copy {
  background: rgba(255,255,255,.10) !important;
  color: #F4ECFF !important;                        /* high-contrast label */
  border-color: rgba(255,255,255,.45) !important;   /* visible stroke */
}
body[data-v2="true"][data-theme="dark"] .v2-codeblock__copy:hover {
  background: #F4ECFF !important;
  color: #290042 !important;
}
body[data-v2="true"][data-theme="dark"] .v2-codeblock__pre {
  background: #170822 !important;                   /* matches the header — single dark surface */
  color: #F4ECFF !important;
}
body[data-v2="true"][data-theme="dark"] .v2-codeblock__pre .tk-kw   { color: #D4B0FF; font-weight: 600; }
body[data-v2="true"][data-theme="dark"] .v2-codeblock__pre .tk-lit,
body[data-v2="true"][data-theme="dark"] .v2-codeblock__pre .tk-num  { color: #FF9AA1; }
body[data-v2="true"][data-theme="dark"] .v2-codeblock__pre .tk-str  { color: #7CE8D4; }
body[data-v2="true"][data-theme="dark"] .v2-codeblock__pre .tk-com  { color: #B8A6CC; }   /* was #998BAB — lifted for AA */
body[data-v2="true"][data-theme="dark"] .v2-codeblock__pre .tk-fn   { color: #7BB6F2; }
body[data-v2="true"][data-theme="dark"] .v2-codeblock__pre .tk-punct{ color: #D4C7E0; }

/* ---------------------------------------------------------------
   Always-dark panels (Blueprints lives in a deep-purple section,
   so its code panel must use the dark treatment in BOTH themes).
   These mirror the [data-theme="dark"] rules above, scoped to any
   code panel that lives inside [data-v2-always-dark="1"].
   --------------------------------------------------------------- */
body[data-v2="true"] [data-v2-always-dark="1"] .v2-codeblock {
  background: #170822 !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.4), 0 8px 28px rgba(0,0,0,.5) !important;
}
body[data-v2="true"] [data-v2-always-dark="1"] .v2-codeblock__header {
  background: #290042 !important;
  border-bottom: 1px solid rgba(255,255,255,.18) !important;
  padding: 16px 20px !important;
}
body[data-v2="true"] [data-v2-always-dark="1"] .v2-codeblock__dots {
  display: none !important;
}
body[data-v2="true"] [data-v2-always-dark="1"] .v2-codeblock__title {
  color: #BFB1CE !important;
  font-weight: 500 !important;
}
body[data-v2="true"] [data-v2-always-dark="1"] .v2-codeblock__copy {
  background: rgba(255,255,255,.10) !important;
  color: #F4ECFF !important;
  border-color: rgba(255,255,255,.45) !important;
}
body[data-v2="true"] [data-v2-always-dark="1"] .v2-codeblock__copy:hover {
  background: #F4ECFF !important;
  color: #290042 !important;
}
body[data-v2="true"] [data-v2-always-dark="1"] .v2-codeblock__pre {
  background: #170822 !important;
  color: #F4ECFF !important;
}
body[data-v2="true"] [data-v2-always-dark="1"] .v2-codeblock__pre .tk-kw   { color: #D4B0FF; font-weight: 600; }
body[data-v2="true"] [data-v2-always-dark="1"] .v2-codeblock__pre .tk-lit,
body[data-v2="true"] [data-v2-always-dark="1"] .v2-codeblock__pre .tk-num  { color: #FF9AA1; }
body[data-v2="true"] [data-v2-always-dark="1"] .v2-codeblock__pre .tk-str  { color: #7CE8D4; }
body[data-v2="true"] [data-v2-always-dark="1"] .v2-codeblock__pre .tk-com  { color: #B8A6CC; }
body[data-v2="true"] [data-v2-always-dark="1"] .v2-codeblock__pre .tk-fn   { color: #7BB6F2; }
body[data-v2="true"] [data-v2-always-dark="1"] .v2-codeblock__pre .tk-punct{ color: #D4C7E0; }