/* Code editor with guardrails (includes/visuals/code.php) */
.cd2 { --cd2-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, "Liberation Mono", monospace; container-type: inline-size; position: relative; }
/* a second sheet behind the window, like a stacked editor */
.cd2::before { content: ""; position: absolute; inset: 18px -10px -12px 18px; border-radius: 16px; background: var(--forest); opacity: .14; }
.cd2-win { position: relative; overflow: hidden; border-radius: 14px; background: var(--panel); color: #dfe5e0; box-shadow: 0 26px 60px rgba(5, 7, 5, .3); }
.cd2-i { flex: none; width: 13px; height: 13px; }

/* title bar */
.cd2-top { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: #151b16; border-bottom: 1px solid rgba(255, 255, 255, .06); font-family: var(--font-sans); }
.cd2-dots { display: inline-flex; gap: 6px; margin-right: 8px; }
.cd2-dots i { width: 10px; height: 10px; border-radius: 50%; background: #3a463d; }
.cd2-tab { padding: 5px 11px; border-radius: 6px; font-size: 12.5px; color: #aab6ae; }
.cd2-tab--on { background: var(--panel); color: var(--white); box-shadow: inset 0 -2px 0 var(--green); }
.cd2-layer { margin-left: auto; padding: 3px 10px; border-radius: 999px; border: 1px solid rgba(150, 248, 120, .35); font-size: 12px; color: var(--green); white-space: nowrap; }

/* source: line number | code | guardrail note */
.cd2-src { display: grid; grid-template-columns: auto max-content minmax(0, 1fr); align-items: center; padding: 14px 16px 16px 0; font-family: var(--cd2-mono); font-size: 13px; line-height: 1.8; }
.cd2-row { display: contents; }
.cd2-ln { grid-column: 1; padding: 0 16px 0 14px; text-align: right; color: #7d8a80; font-variant-numeric: tabular-nums; }
.cd2-code { grid-column: 2; font: inherit; white-space: pre; color: #dfe5e0; background: none; padding: 0; }
.cd2-note { grid-column: 3; display: flex; align-items: center; min-width: 0; padding-left: 12px; }
.cd2-note::before { content: ""; flex: 1 1 auto; min-width: 10px; margin-right: 8px; border-top: 1px dashed rgba(150, 248, 120, .32); }
.cd2-pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px 2px 7px; border-radius: 6px; background: rgba(150, 248, 120, .1); font-family: var(--font-sans); font-size: 12px; font-weight: 600; line-height: 1.4; color: var(--green); }

/* syntax colours */
.cd2-k { color: var(--green); }
.cd2-f { color: var(--white); font-weight: 600; }
.cd2-p { color: var(--sage); }
.cd2-s { color: var(--mint); }
.cd2-n { color: var(--green); }
.cd2-c { color: #7d8a80; font-style: italic; }

/* response */
.cd2-sep { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 16px; background: #151b16; border-block: 1px solid rgba(255, 255, 255, .06); font-family: var(--font-sans); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #aab6ae; }
.cd2-live { display: inline-flex; align-items: center; gap: 7px; color: var(--green); }
.cd2-pulse { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.cd2-pulse::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid var(--green); opacity: 0; }
.cd2-out { padding: 12px 16px 14px; font-family: var(--cd2-mono); font-size: 13px; line-height: 1.7; }
.cd2-status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0 0 8px; }
.cd2-status code { font: inherit; color: #aab6ae; }
.cd2-arrow { color: var(--green); }
.cd2-json code { display: block; font: inherit; white-space: pre-wrap; overflow-wrap: anywhere; color: #dfe5e0; }
.cd2-ind1 { padding-left: 4ch; text-indent: -2ch; }
.cd2-ind2 { padding-left: 6ch; text-indent: -2ch; }
.cd2-caret { display: inline-block; width: .55em; height: 1.15em; margin-left: 3px; vertical-align: text-bottom; background: var(--green); }
.cd2-checks { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 12px 0 0; padding: 10px 0 0; border-top: 1px dashed rgba(255, 255, 255, .12); font-family: var(--font-sans); }
.cd2-checks li { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--white); }
.cd2-checks .cd2-i { color: var(--green); }

/* status bar */
.cd2-foot { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 0; padding: 8px 16px; background: var(--forest); font-family: var(--font-sans); font-size: 12px; color: rgba(255, 255, 255, .88); }
.cd2-foot li { display: inline-flex; align-items: center; gap: 7px; }
.cd2-foot li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }

/* medium: tighter type so the notes stay beside their line */
@container (max-width: 640px) {
  .cd2-src, .cd2-out { font-size: 12px; }
  .cd2-ln { padding: 0 10px 0 10px; }
  .cd2-note { padding-left: 8px; }
  .cd2-note::before { margin-right: 6px; }
  .cd2-pill { font-size: 11.5px; padding-inline: 6px 7px; gap: 5px; }
}
/* narrow: the notes go under their line */
@container (max-width: 469px) {
  .cd2-src { grid-template-columns: auto minmax(0, 1fr); font-size: 12.5px; padding-right: 12px; }
  .cd2-ln { padding: 0 12px 0 10px; }
  .cd2-note { grid-column: 2; padding: 0 0 6px 2ch; }
  .cd2-note::before { display: none; }
  .cd2-out { font-size: 12.5px; padding-inline: 12px; }
  .cd2-layer { display: none; }
}

/* animation: the request is written line by line, the guardrails light up, then the response streams in */
.js .vz-figure .cd2-row > *, .js .vz-figure .cd2-json code, .js .vz-figure .cd2-status, .js .vz-figure .cd2-checks li { opacity: 0; transition: opacity .25s ease; }
.js .vz-figure .cd2-note { transform: translateX(-8px); transition: opacity .4s ease, transform .4s cubic-bezier(.2, .7, .2, 1); }
.js .vz-figure.is-visible .cd2-row > *, .js .vz-figure.is-visible .cd2-json code, .js .vz-figure.is-visible .cd2-status, .js .vz-figure.is-visible .cd2-checks li { opacity: 1; }
.js .vz-figure.is-visible .cd2-note { transform: none; }
.js .vz-figure.is-visible .cd2-l2 > * { transition-delay: .07s; }
.js .vz-figure.is-visible .cd2-l3 > * { transition-delay: .14s; }
.js .vz-figure.is-visible .cd2-l4 > * { transition-delay: .21s; }
.js .vz-figure.is-visible .cd2-l5 > * { transition-delay: .28s; }
.js .vz-figure.is-visible .cd2-l6 > * { transition-delay: .35s; }
.js .vz-figure.is-visible .cd2-l7 > * { transition-delay: .42s; }
.js .vz-figure.is-visible .cd2-l8 > * { transition-delay: .49s; }
.js .vz-figure.is-visible .cd2-l9 > * { transition-delay: .56s; }
.js .vz-figure.is-visible .cd2-l10 > * { transition-delay: .63s; }
.js .vz-figure.is-visible .cd2-l11 > * { transition-delay: .7s; }
.js .vz-figure.is-visible .cd2-g1 .cd2-note { transition-delay: .95s; }
.js .vz-figure.is-visible .cd2-g2 .cd2-note { transition-delay: 1.07s; }
.js .vz-figure.is-visible .cd2-g3 .cd2-note { transition-delay: 1.19s; }
.js .vz-figure.is-visible .cd2-g4 .cd2-note { transition-delay: 1.31s; }
.js .vz-figure.is-visible .cd2-g5 .cd2-note { transition-delay: 1.43s; }
.js .vz-figure.is-visible .cd2-g6 .cd2-note { transition-delay: 1.55s; }
.js .vz-figure.is-visible .cd2-g7 .cd2-note { transition-delay: 1.67s; }
.js .vz-figure.is-visible .cd2-status { transition-delay: 1.85s; }
.js .vz-figure.is-visible .cd2-o1 { transition-delay: 2s; }
.js .vz-figure.is-visible .cd2-o2 { transition-delay: 2.1s; }
.js .vz-figure.is-visible .cd2-o3 { transition-delay: 2.2s; }
.js .vz-figure.is-visible .cd2-o4 { transition-delay: 2.28s; }
.js .vz-figure.is-visible .cd2-o5 { transition-delay: 2.36s; }
.js .vz-figure.is-visible .cd2-o6 { transition-delay: 2.44s; }
.js .vz-figure.is-visible .cd2-o7 { transition-delay: 2.52s; }
.js .vz-figure.is-visible .cd2-o8 { transition-delay: 2.6s; }
.js .vz-figure.is-visible .cd2-o9 { transition-delay: 2.68s; }
.js .vz-figure.is-visible .cd2-o10 { transition-delay: 2.76s; }
.js .vz-figure.is-visible .cd2-checks li { transition-delay: 2.95s; }
.js .vz-figure.is-visible .cd2-checks li + li { transition-delay: 3.1s; }
.js .vz-figure.is-visible .cd2-caret { animation: cd2-blink 1.1s steps(1) 3s infinite; }
.js .vz-figure.is-visible .cd2-pulse::after { animation: cd2-ping 2s ease-out 1.8s infinite; }
@keyframes cd2-blink { 50% { opacity: 0; } }
@keyframes cd2-ping { 0% { opacity: .8; transform: scale(.6); } 80%, 100% { opacity: 0; transform: scale(1.6); } }
@media (max-width: 600px) { .cd2::before { inset: 12px -5px -9px 12px; } }