.vcf-control-step{position:relative;box-sizing:border-box;border:1px solid rgba(122,74,8,.22);border-radius:20px;background:#fffefa;box-shadow:0 12px 30px rgba(82,57,23,.075);color:#211d18;font-family:var(--mono,"JetBrains Mono",ui-monospace,monospace);transition:width .28s cubic-bezier(.22,1,.36,1),min-height .28s cubic-bezier(.22,1,.36,1),border-color .2s ease,box-shadow .2s ease}
.vcf-control-step[data-result]:not([data-result="unknown"]){border-color:rgba(238,150,20,.52);box-shadow:0 17px 38px rgba(238,150,20,.12)}
.vcf-control-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:16px 18px 10px}.vcf-control-head>div{display:grid;gap:5px}.vcf-control-head>div:last-child{display:flex;align-items:center;justify-content:flex-end;gap:9px}.vcf-control-head small,.vcf-control-head span{color:#897e70;font:700 7px/1 var(--mono,"JetBrains Mono",ui-monospace,monospace);letter-spacing:.11em;text-transform:uppercase}.vcf-control-head strong{font:650 17px/1.15 var(--serif,"Playfair Display",serif)}.vcf-expand{min-height:26px;padding:0 8px;border:0;border-radius:999px;background:#fff6dd;color:#7a4a08;cursor:pointer;font:700 7px/1 var(--mono,"JetBrains Mono",ui-monospace,monospace)}
.vcf-condition{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;margin:4px 18px 20px;padding:11px 12px;border:1px dashed rgba(238,150,20,.38);border-radius:15px;background:rgba(255,250,238,.72)}.vcf-condition-source{display:grid;gap:5px;min-width:0}.vcf-condition-source small{color:#9b6415;font:700 6px/1 var(--mono,"JetBrains Mono",ui-monospace,monospace);letter-spacing:.1em}.vcf-condition-source code{overflow:hidden;color:#4f463c;font:700 9px/1.25 var(--mono,"JetBrains Mono",ui-monospace,monospace);text-overflow:ellipsis;white-space:nowrap}.vcf-condition-evaluation{min-width:92px;padding:7px 9px;border:1px solid #e3d7c9;border-radius:999px;background:#fff;color:#8a8176;font:700 6.5px/1 var(--mono,"JetBrains Mono",ui-monospace,monospace);text-align:center}.vcf-condition-evaluation[data-state="true"],.vcf-condition-evaluation[data-state="body"]{border-color:rgba(152,95,11,.35);color:#985f0b}.vcf-condition-evaluation[data-state="false"],.vcf-condition-evaluation[data-state="done"]{border-color:rgba(169,79,59,.3);color:#944c3b}
.vcf-port{position:absolute;z-index:4;display:grid;place-items:center}.vcf-port-mouth{display:block;box-sizing:border-box;width:14px;height:14px;border:2px solid #fff;border-radius:50%;background:#cdbfae;box-shadow:0 0 0 1px rgba(122,74,8,.3)}.vcf-port-label{position:absolute;padding:3px 7px;border:1px solid #ded4c7;border-radius:999px;background:#fff;color:#7c7267;font:700 6px/1 var(--mono,"JetBrains Mono",ui-monospace,monospace);font-style:normal;letter-spacing:.08em;white-space:nowrap}.vcf-port-entry{left:50%;top:-7px;transform:translateX(-50%)}.vcf-port-entry .vcf-port-mouth{border-style:dashed;background:#fff}.vcf-port-true,.vcf-port-body{left:31%;bottom:-7px}.vcf-port-false,.vcf-port-done{right:31%;bottom:-7px}.vcf-port-true .vcf-port-label,.vcf-port-false .vcf-port-label,.vcf-port-body .vcf-port-label,.vcf-port-done .vcf-port-label{bottom:20px}.vcf-port-true .vcf-port-label,.vcf-port-body .vcf-port-label{color:#985f0b}.vcf-port-false .vcf-port-label,.vcf-port-done .vcf-port-label{color:#944c3b}.vcf-port[data-state="selected"] .vcf-port-mouth,.vcf-if-path[data-state="selected"] .vcf-port-mouth{background:#ee9614;box-shadow:0 0 0 1px #c67d11,0 0 14px rgba(238,150,20,.38)}
.vcf-if-control{width:100%;min-height:168px}.vcf-if-paths{position:relative;height:0}.vcf-if-path{position:absolute;bottom:0}.vcf-if-path-true{left:31%}.vcf-if-path-false{right:31%}.vcf-if-path>.vcf-port{position:absolute;left:0;right:auto;bottom:-7px;transform:translateX(-50%)}.vcf-if-path-role{position:absolute;top:13px;width:120px;color:#8c8276;font:700 6px/1.2 var(--mono,"JetBrains Mono",ui-monospace,monospace);letter-spacing:.06em;text-align:center;transform:translateX(-50%)}
.vcf-loop-control{width:100%;min-height:174px}.vcf-loop-counter{display:flex;align-items:center;gap:6px;padding:5px 8px;border:1px solid rgba(238,150,20,.34);border-radius:999px;background:#fffaf0}.vcf-loop-counter small{font-size:5.5px}.vcf-loop-counter b{color:#7a4a08;font:750 8px/1 var(--mono,"JetBrains Mono",ui-monospace,monospace)}.vcf-loop-paths{position:relative;height:0}
@media(max-width:700px){.vcf-control-head{padding-inline:13px}.vcf-control-head>div:last-child>span{display:none}.vcf-condition{grid-template-columns:1fr;margin-inline:13px}.vcf-condition-evaluation{justify-self:center}.vcf-port-true,.vcf-port-body{left:28%}.vcf-port-false,.vcf-port-done{right:28%}}
@media(prefers-reduced-motion:reduce){.vcf-control-step{transition-duration:.01ms!important}}

/* L2 IF cover — the IF as a peer of the L2 Function covers, not a band.
 * Same anatomy, ports and datasets as .vcf-if-control; only the chrome joins
 * the cover grammar (vinci-function-cover-primitives.css is the specimen). */
.vcf-if-cover{width:min(280px,100%);min-height:132px;margin-inline:auto;padding-bottom:16px;border:1.5px solid rgba(122,74,8,.38);border-radius:22px;background:rgba(255,254,250,.98);box-shadow:0 13px 28px rgba(92,58,12,.09)}
.vcf-if-cover .vcf-control-head{padding:14px 14px 8px}
.vcf-if-cover .vcf-control-head>div:first-child{grid-template-columns:13px minmax(0,1fr);grid-template-rows:auto auto;align-items:center;column-gap:4px;row-gap:3px}
.vcf-if-cover .vcf-control-head>div:first-child::before{content:"?";grid-row:1/3;display:grid;place-items:center;width:13px;height:13px;border-radius:9px;color:#fff;background:#211d18;box-shadow:0 6px 14px rgba(33,29,24,.16);font:700 9px/1 var(--mono,"IBM Plex Mono",ui-monospace,monospace)}
.vcf-if-cover .vcf-control-head small{color:var(--gold-deep,#7a4a08);font:700 5.5px/1 var(--mono,"IBM Plex Mono",ui-monospace,monospace);letter-spacing:.1em;text-transform:uppercase}
.vcf-if-cover .vcf-control-head strong{overflow:hidden;color:var(--ink,#211d18);font:500 16px/1 var(--serif,"Playfair Display",Georgia,serif);letter-spacing:-.035em;text-overflow:ellipsis;white-space:nowrap}
.vcf-if-cover .vcf-control-head span{font-size:5px}
.vcf-if-cover .vcf-condition{margin-inline:14px}
.vcf-if-cover[data-result]:not([data-result="unknown"]){border-color:rgba(238,150,20,.58);box-shadow:0 18px 42px rgba(238,150,20,.15),0 0 0 4px rgba(238,150,20,.05)}

/* Loop-border notation — the border IS the loop (VINCI-LOOP-DESIGN-DECISIONS D6,
 * projected to L2): it encloses what the loop repeats, the tab names the loop,
 * the witnessed ROUND counter rides the border. Anatomy, datasets and port
 * anchors match .vcf-loop-control so runtime reconciliation is shared. */
.vcf-loop-border{display:grid;gap:26px;padding:38px clamp(14px,2.5vw,26px) 32px;border:2px solid rgba(238,150,20,.82);border-radius:15px;background:transparent;box-shadow:0 0 0 4px rgba(238,150,20,.07)}
.vcf-loop-border[data-result]:not([data-result="unknown"]){border-color:rgba(238,150,20,.95);box-shadow:0 0 0 4px rgba(238,150,20,.12)}
.vcf-loop-border[data-result="done"]{border-style:dashed;border-color:rgba(238,150,20,.45);box-shadow:none}
.vcf-loop-border-tab{position:absolute;top:-11px;left:16px;z-index:5;display:flex;align-items:center;gap:7px;padding:3px 10px;border-radius:999px;background:var(--gold,#ee9614);color:#fff}
.vcf-loop-border-tab small{color:#fff3da;font:700 6px/1.4 var(--mono,"JetBrains Mono",ui-monospace,monospace);letter-spacing:.11em}
.vcf-loop-border-tab code{font:750 8.5px/1.4 var(--mono,"JetBrains Mono",ui-monospace,monospace);letter-spacing:.04em}
.vcf-loop-border[data-result="done"] .vcf-loop-border-tab{opacity:.55}
.vcf-loop-border-crest{position:absolute;top:-13px;right:16px;z-index:5;display:flex;align-items:center;gap:8px}
.vcf-loop-border-crest .vcf-loop-counter{background:#fff8eb;box-shadow:0 4px 12px rgba(122,74,8,.08)}
.vcf-loop-border-truth{background:#fff;box-shadow:0 4px 12px rgba(122,74,8,.08)}
.vcf-loop-border-body{display:grid;gap:26px;min-width:0}
.vcf-loop-border>.vcf-loop-paths{position:static;height:0}
/* CONTINUE joins the loop's update/test on the RIGHT (the retry side), so its
   route never crosses the TRUE return heading for the centered playbook exit. */
/* The loop's update/test is a PASS-THROUGH on the one retry arc, not a
   terminus: the waypoint keeps its anchor rect (the Ball may pause here) but
   paints no ring or label — the facts live on the tab and the truth pill. */
/* Every border port is a pass-through waypoint, not a station: rings and
   chips are invisible (the painted routes and the walking Ball tell the
   story); anchors keep their rects for carrier seats and edge endpoints. */
.vcf-loop-border>.vcf-port-entry{left:auto;right:-8px;top:56%;bottom:auto;transform:none}
.vcf-loop-border>.vcf-port-entry .vcf-port-mouth,
.vcf-loop-border .vcf-port-body .vcf-port-mouth,
.vcf-loop-border .vcf-port-done .vcf-port-mouth{border-color:transparent;background:transparent;box-shadow:none}
.vcf-loop-border>.vcf-port-entry .vcf-port-label,
.vcf-loop-border .vcf-port-body .vcf-port-label,
.vcf-loop-border .vcf-port-done .vcf-port-label{display:none}
.vcf-loop-border .vcf-port-body{left:auto;right:-8px;top:34%;bottom:auto}
/* DONE owns a legible route: from the border's far corner it travels into
   the one centered playbook exit instead of a stubby hop. */
.vcf-loop-border .vcf-port-done{right:8%;bottom:-8px}
@media(max-width:700px){.vcf-loop-border{padding-inline:10px;padding-top:46px}.vcf-loop-border-tab code{overflow:hidden;max-width:118px;text-overflow:ellipsis;white-space:nowrap}.vcf-loop-border-truth{min-width:0;padding:5px 7px}
/* Narrow width: the crest steps INSIDE below the tab instead of colliding
   with it on the border's top edge. */
.vcf-loop-border-crest{top:10px;right:10px}}

/* L2 IF cover, pass 2 — true L2 grammar: the condition is a compact chip
 * (WRITER BRIEF's language), TRUE/FALSE are plain outcome ports on the cover
 * boundary carrying only their role labels, and Expand in Vinci discloses the
 * exact L1 IF atoms. No dashed TEST strip survives at L2. */
.vcf-if-cover{min-height:104px;padding-bottom:22px}
.vcf-if-cover .vcf-condition{display:inline-flex;align-items:center;gap:7px;width:auto;max-width:calc(100% - 28px);margin:2px auto 14px;padding:6px 7px 6px 11px;border:1.5px solid rgba(238,150,20,.5);border-style:solid;border-radius:999px;background:#fffdf5;box-shadow:0 4px 10px rgba(122,74,8,.06)}
.vcf-if-cover .vcf-condition-source{display:inline-flex;align-items:baseline;gap:6px}
.vcf-if-cover .vcf-condition-source small{color:var(--gold-deep,#7a4a08);font-size:5.5px}
.vcf-if-cover .vcf-condition-source code{font-size:8px}
.vcf-if-cover .vcf-condition-evaluation{min-width:0;padding:4px 7px;font-size:5.5px}
.vcf-if-cover .vcf-port-true .vcf-port-label,.vcf-if-cover .vcf-port-false .vcf-port-label{display:none}
.vcf-if-cover .vcf-if-path-role{top:11px;color:var(--gold-deep,#7a4a08)}
.vcf-if-cover .vcf-expand{min-height:19px;padding:0 4px;background:transparent;color:var(--gold-deep,#7a4a08);font:700 6.5px/1 var(--mono,"IBM Plex Mono",ui-monospace,monospace)}
.vcf-if-cover .vcf-expand:hover{background:#fff5dd}
.vcf-if-cover .vcf-expand:focus-visible{outline:2px solid var(--gold-deep,#7a4a08);outline-offset:2px}

/* L2 IF cover, pass 3 — the exits live ON the cover boundary, exactly like a
 * Function cover's RETURN: mouths straddle the bottom edge, role labels sit
 * just inside, one lowercase word each. No mid-card ports, no dead space. */
.vcf-if-cover .vcf-if-paths{position:static;height:0}
.vcf-if-cover .vcf-if-path{position:absolute;bottom:0}
.vcf-if-cover .vcf-if-path-role{top:auto;bottom:14px;color:var(--gold-deep,#7a4a08);text-transform:lowercase}

/* L2 IF cover, pass 4 — reference proportions (l2-joke-qc-graph's STEP · IF):
 * a wide card so the authored question reads in full, ports spread with it. */
.vcf-if-cover{width:min(100%,560px)}
.vcf-if-cover .vcf-control-head strong{white-space:normal;overflow:visible;text-overflow:clip}
.vcf-if-cover .vcf-if-path-true{left:24%}
.vcf-if-cover .vcf-if-path-false{right:24%}

/* L2 IF cover, pass 5 — a regular L2 cover, apart from its two exits.
 * Sibling width (280px), content-hugging height, title wraps instead of the
 * card widening; the SOURCE-AUTHORED CHOICE aside yields — the eyebrow
 * already says L2 IF. Exits stay on the bottom boundary, spread wide. */
.vcf-if-cover{width:min(280px,100%)}
.vcf-if-cover .vcf-control-head span{display:none}
.vcf-if-cover .vcf-control-head strong{white-space:normal;line-height:1.1}
.vcf-if-cover .vcf-if-path-true{left:22%}
.vcf-if-cover .vcf-if-path-false{right:22%}