/* Interactive Verse code blocks for Learning Path lessons (UEFN-231).
 *
 * Layered on top of the existing `<pre class="code-block"><code
 * class="language-verse">` markup emitted by markdown_render.py. The client
 * tokenizer (codeblocks.js) wraps tokens in <span class="vt vt-…">; this file
 * colors them and styles the hover tooltip. Token colors follow the same
 * day/dusk palette spirit as the rest of the UI and work on the dark code
 * background that the prose styles give .code-block (bg-zinc-900/950).
 */

/* The code block already gets a dark background from the prose styles. Make
 * sure our enhanced blocks keep comfortable spacing + horizontal scroll. */
pre.code-block.vc-verse {
  position: relative;
  overflow-x: auto;
  line-height: 1.6;
  tab-size: 4;
}

pre.code-block.vc-verse code {
  color: #e4e4e7; /* zinc-200 — default identifier/text color */
  font-feature-settings: "liga" 0;
}

/* ── Static Pygments highlighting for ```verse fences (UEFN-265) ───────────
 * markdown_render.py runs the vendored official Verse Pygments lexer over
 * ```verse blocks and emits Pygments token spans (.c1 .kn .nf .nd …) inside
 * <pre class="code-block highlight"><code class="language-verse">. These
 * overrides recolor those token classes to the SAME palette as the
 * interactive .vt-* tokens below, so server-rendered Verse code matches the
 * client-enhanced version visually.
 *
 * On lesson/doc/guide/symbol pages codeblocks.js replaces the block's
 * innerHTML with its own .vt-* spans, so these Pygments classes only apply to
 * the static (pre-enhancement / no-JS) render — which is precisely the gap
 * this fixes. The base template's monokai pygments_css() is the fallback for
 * any token class not overridden here. */
pre.code-block.highlight,
pre.code-block.highlight code {
  color: #e4e4e7;                                      /* zinc-200 default text */
}
pre.code-block.highlight .c,
pre.code-block.highlight .c1,
pre.code-block.highlight .cm,
pre.code-block.highlight .cs,
pre.code-block.highlight .ch,
pre.code-block.highlight .cp,
pre.code-block.highlight .cpf { color: #71717a; font-style: italic; }   /* comments incl. <# #> */
pre.code-block.highlight .k,
pre.code-block.highlight .kn,
pre.code-block.highlight .kp  { color: #c084fc; font-weight: 600; }     /* keywords / using */
pre.code-block.highlight .kd  { color: #c084fc; font-weight: 600; }     /* var / set */
pre.code-block.highlight .kr  { color: #fb923c; font-weight: 600; }     /* spawn/sync/race/return */
pre.code-block.highlight .kc  { color: #fdba74; }                       /* true / false */
pre.code-block.highlight .kt  { color: #5eead4; }                       /* int/float/logic/void… */
pre.code-block.highlight .nc  { color: #5eead4; font-weight: 600; }     /* class/struct/enum name */
pre.code-block.highlight .nf,
pre.code-block.highlight .fm  { color: #93c5fd; }                       /* function decl / calls */
pre.code-block.highlight .nd  { color: #fbbf24; }                       /* @editable / <override>… */
pre.code-block.highlight .nn  { color: #67e8f9; }                       /* using{} namespaces */
pre.code-block.highlight .nb,
pre.code-block.highlight .bp  { color: #cbd5e1; }                       /* builtins / (super:) */
pre.code-block.highlight .n   { color: #e4e4e7; }                       /* plain identifiers */
pre.code-block.highlight .s,
pre.code-block.highlight .s1,
pre.code-block.highlight .s2,
pre.code-block.highlight .sd,
pre.code-block.highlight .se  { color: #86efac; }                       /* strings */
pre.code-block.highlight .si  { color: #fbbf24; font-weight: 600; }     /* {…} interpolation */
pre.code-block.highlight .m,
pre.code-block.highlight .mi,
pre.code-block.highlight .mf,
pre.code-block.highlight .mh,
pre.code-block.highlight .mo,
pre.code-block.highlight .mb  { color: #fca5a5; }                       /* numbers */
pre.code-block.highlight .o,
pre.code-block.highlight .ow  { color: #a1a1aa; }                       /* operators (:= -> => ..) */
pre.code-block.highlight .p   { color: #a1a1aa; }                       /* punctuation */
pre.code-block.highlight .w   { color: inherit; background: none; }     /* whitespace */

/* ── Token colors ───────────────────────────────────────────────────────── */
.vt-keyword   { color: #c084fc; font-weight: 600; }  /* purple-400 */
.vt-control   { color: #f472b6; font-weight: 600; }  /* pink-400  — if/for/loop/return */
.vt-concurrency { color: #fb923c; font-weight: 600; } /* orange-400 — spawn/sync/race */
.vt-type      { color: #5eead4; }                    /* teal-300  — types/devices */
.vt-string    { color: #86efac; }                    /* green-300 */
.vt-number    { color: #fca5a5; }                    /* red-300   */
.vt-comment   { color: #71717a; font-style: italic; } /* zinc-500 */
.vt-specifier { color: #fbbf24; }                    /* amber-400 — @editable <override> */
.vt-call      { color: #93c5fd; }                    /* blue-300  — function calls */
.vt-var       { color: #a5b4fc; }                    /* indigo-300 — declared variables */
.vt-member    { color: #67e8f9; }                    /* cyan-300  — .member access */
.vt-symbol    { color: #cbd5e1; }                    /* slate-300 — other API-ish identifiers */
.vt-operator  { color: #a1a1aa; }                    /* zinc-400 */
.vt-bool      { color: #fdba74; }                    /* orange-300 */

/* A token that GROUNDS in the API/KB becomes a dotted-underlined link. */
.vt-api       { text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 2px; text-decoration-color: rgba(255,255,255,0.45); }
.vt-api:hover { text-decoration-style: solid; filter: brightness(1.18); }

/* ── Digest-grounded kind coloring (UEFN-265) ───────────────────────────────
 * Applied by codeblocks.js after it classifies tokens against the API digests.
 * These override the tokenizer's heuristic colors (later + more specific). */
.vt-kind-creative_object { color: #fbbf24; font-weight: 600; }  /* amber — devices */
.vt-kind-item            { color: #fcd34d; font-weight: 600; }  /* amber-300 — items */
.vt-kind-class           { color: #5eead4; }                    /* teal-300 — classes */
.vt-kind-struct          { color: #2dd4bf; }                    /* teal-400 — structs */
.vt-kind-interface       { color: #67e8f9; }                    /* cyan-300 — interfaces */
.vt-kind-module          { color: #c084fc; }                    /* purple-400 — modules */
.vt-kind-enum            { color: #f9a8d4; }                    /* pink-300 — enums */
.vt-kind-event           { color: #fb923c; font-weight: 600; }  /* orange-400 — events */
.vt-kind-method          { color: #93c5fd; }                    /* blue-300 — methods/functions */
.vt-kind-type            { color: #a7f3d0; }                    /* emerald-200 — types */

/* Hoverable symbols get a subtle dotted underline + pointer affordance. */
.vt-hover {
  cursor: help;
  border-bottom: 1px dotted currentColor;
  border-bottom-color: rgba(255, 255, 255, 0.25);
}
.vt-hover:hover {
  border-bottom-style: solid;
  border-bottom-color: currentColor;
}

/* ── Tooltip ────────────────────────────────────────────────────────────── */
#vc-code-tooltip {
  position: fixed;
  z-index: 60;
  max-width: 22rem;
  pointer-events: auto;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.12s ease, transform 0.12s ease;
  visibility: hidden;
}
#vc-code-tooltip.vc-show {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

#vc-code-tooltip .vc-tip-card {
  background: #18181b;             /* zinc-900 */
  color: #e4e4e7;
  border: 1px solid #3f3f46;      /* zinc-700 */
  border-radius: 0.6rem;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.6);
  padding: 0.75rem 0.85rem;
  font-size: 0.8125rem;
  line-height: 1.45;
}

#vc-code-tooltip .vc-tip-symbol {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 600;
  color: #c084fc;
  font-size: 0.875rem;
}

#vc-code-tooltip .vc-tip-kind {
  display: inline-block;
  margin-left: 0.4rem;
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #a1a1aa;
  border: 1px solid #3f3f46;
  border-radius: 999px;
  padding: 0.05rem 0.4rem;
  vertical-align: middle;
}

#vc-code-tooltip .vc-tip-desc {
  margin-top: 0.4rem;
  color: #d4d4d8;
}

/* Digest signature block + module path (UEFN-265). */
#vc-code-tooltip .vc-tip-sig {
  margin-top: 0.45rem;
  padding: 0.4rem 0.5rem;
  background: #0f0f12;
  border: 1px solid #27272a;
  border-radius: 0.4rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.72rem;
  line-height: 1.4;
  color: #cbd5e1;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
}
#vc-code-tooltip .vc-tip-module {
  margin-top: 0.4rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.68rem;
  color: #71717a;
  word-break: break-all;
}

/* Kind badge colors mirror the in-code token coloring. */
#vc-code-tooltip .vc-tip-kind.vc-kind-creative_object,
#vc-code-tooltip .vc-tip-kind.vc-kind-item   { color: #fbbf24; border-color: #92660a; }
#vc-code-tooltip .vc-tip-kind.vc-kind-class,
#vc-code-tooltip .vc-tip-kind.vc-kind-struct { color: #5eead4; border-color: #115e59; }
#vc-code-tooltip .vc-tip-kind.vc-kind-interface { color: #67e8f9; border-color: #155e75; }
#vc-code-tooltip .vc-tip-kind.vc-kind-module { color: #c084fc; border-color: #6b21a8; }
#vc-code-tooltip .vc-tip-kind.vc-kind-enum   { color: #f9a8d4; border-color: #9d174d; }
#vc-code-tooltip .vc-tip-kind.vc-kind-event  { color: #fb923c; border-color: #9a3412; }
#vc-code-tooltip .vc-tip-kind.vc-kind-method { color: #93c5fd; border-color: #1e40af; }
#vc-code-tooltip .vc-tip-kind.vc-kind-type   { color: #a7f3d0; border-color: #047857; }

/* "Show usages" button + the loaded usages list. */
#vc-code-tooltip .vc-tip-usages-btn {
  margin-top: 0.6rem;
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  color: #93c5fd;
  background: transparent;
  border: 1px solid #3f3f46;
  border-radius: 0.4rem;
  padding: 0.18rem 0.5rem;
  cursor: pointer;
}
#vc-code-tooltip .vc-tip-usages-btn:hover {
  border-color: #60a5fa;
  background: rgba(96, 165, 250, 0.08);
}
#vc-code-tooltip .vc-usages-list .vc-u-corpus { color: #71717a; font-size: 0.7rem; }
#vc-code-tooltip .vc-usages-list a { display: inline; color: #93c5fd; }

#vc-code-tooltip .vc-tip-related-h {
  margin-top: 0.6rem;
  margin-bottom: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #a1a1aa;
}
#vc-code-tooltip .vc-tip-symlink {
  color: #c4b5fd;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
}
#vc-code-tooltip .vc-tip-symlink:hover { text-decoration: underline; }

#vc-code-tooltip .vc-tip-related {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

#vc-code-tooltip .vc-tip-related a {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: #93c5fd;            /* blue-300 */
  text-decoration: none;
  padding: 0.15rem 0;
  font-size: 0.78rem;
}
#vc-code-tooltip .vc-tip-related a:hover {
  text-decoration: underline;
}

#vc-code-tooltip .vc-tip-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  flex: 0 0 auto;
}

#vc-code-tooltip .vc-tip-loading,
#vc-code-tooltip .vc-tip-empty {
  margin-top: 0.45rem;
  color: #71717a;
  font-size: 0.75rem;
  font-style: italic;
}

/* Light theme adjustments — lesson pages support a light mode via Tailwind's
 * `dark:` variants. The code block itself stays dark (prose-pre:bg-zinc-900),
 * so token colors are unchanged; only the tooltip card needs a light variant
 * when the document is NOT in dark mode. */
html:not(.dark) #vc-code-tooltip .vc-tip-card {
  background: #ffffff;
  color: #27272a;
  border-color: #e4e4e7;
}
html:not(.dark) #vc-code-tooltip .vc-tip-desc { color: #3f3f46; }
html:not(.dark) #vc-code-tooltip .vc-tip-symbol { color: #7c3aed; }
html:not(.dark) #vc-code-tooltip .vc-tip-related a { color: #2563eb; }