/* Dark mode for the in-context embeds. The site theme reaches the embed through clip.js, which mirrors the
   parent page's <html class="dark"> onto this document. Only the embed's OWN page layer goes dark (the text,
   rules and connectors drawn straight on the page); the Vee product UI shown inside stays the light product,
   because the product is light-only. Product colours live here, never in the site tokens.
   Ratios are against the dark page (#131318): ink 16.3, secondary 7.2, muted 5.5, accent 7.0, coral 6.8. */

/* 1. The page layer: flip the artifact's base variables inside the panel. */
html.dark :is(.hf-panel, .door2, #ladder .lad-rail, .stats) {
  --c1: #131318; --c2: #1b1b21; --c5: #34343d; --c7: #4a4a55; --c9: #8b8b96; --c11: #a1a1ab; --c12: #f0f0f2;
  --ink: #f0f0f2; --muted: #8b8b96; --secondary: #a1a1ab; --border: #34343d;
  --hf-line: rgba(240, 240, 242, .14); --hf-soft: rgba(240, 240, 242, .06);
  --hf-acc: #8f97f7; --hf-acc-s: rgba(143, 151, 247, .16); --vee: #8f97f7; --mark-coral: #ff7048;
  --text: #f0f0f2; --text-2: #a1a1ab; --text-3: #8b8b96;
  color: var(--ink);
}

/* 2. Product surfaces inside the page layer keep the light product palette. */
html.dark :is(
  .hchip, .h3-core, .h3-ag, span.ava-i, .h3-step.in, .h3-step .n,
  .fc2, .fc2 .ui, .node, .sc, .pl2, .lg2, .ic, .br-card, .tk-img,
  .dl2-chat, .dl2-page, .dl2-u, .dl2-confirm, .dl2-card, .lock, .stk .tg, #ladder .rung .rn, #ladder .rung.on
) {
  --c1: #f7f7f8; --c2: #eeeeef; --c5: #d4d4d9; --c7: #adadb4; --c9: #9e9ea8; --c11: #6e6e79; --c12: #131318;
  --ink: #131318; --muted: #6e6e79; --secondary: #565660; --border: #d4d4d9;
  --hf-line: rgba(19, 19, 24, .12); --hf-soft: rgba(19, 19, 24, .05);
  --hf-acc: #636EF1; --hf-acc-s: rgba(99, 110, 241, .12); --vee: #636EF1; --mark-coral: #e84e2a;
  --text: #0A0A0A; --text-2: #525252; --text-3: #8A8A8A;
  color: var(--ink);
}

/* 3. Hard-coded product indigo (#4F58E0) used as text on the page layer, and a rule drawn in a fixed dark rgba. */
html.dark .pickcheck .decision-check b,
html.dark .dl2[data-lvl="0"] .dl2-ticks [data-l="0"],
html.dark .dl2[data-lvl="1"] .dl2-ticks [data-l="1"],
html.dark .dl2[data-lvl="2"] .dl2-ticks [data-l="2"],
html.dark .stats.s2 .stat .k { color: #8f97f7; }
html.dark .pipe-foot2 { border-top-color: var(--hf-line); }