/* Chapter 7.1: shared switch before/after. */
#vibecoding .local-system-story {
  --system-ink: #18181b;
  --system-muted: #6b7078;
  --system-line: #e0e2e7;
  --system-paper: #fff;
  --system-fog: #eceef1;
}
#canvo-engineering-61 { scroll-margin-top: 32px; }

/* 7.1 before/after: same layout as the 5.2 comparison (pill tag, grey frame, centered caption). */
#vibecoding .cv-ba-figure { display: flex; gap: 24px; margin: 8px 0; align-items: flex-start; color: var(--system-ink); }
#vibecoding .cv-ba-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
#vibecoding .cv-ba-tag { align-self: flex-start; margin: 0 0 -2px; padding: 4px 8px; border-radius: 100px; background: rgba(11, 19, 27, .3); color: #f2f2f2; font-size: 12px; line-height: 19.2px; }
#vibecoding .cv-ba-col--after .cv-ba-tag { background: rgb(12, 19, 27); color: #fff; }
#vibecoding .cv-plug-list { box-sizing: border-box; min-width: 0; padding: 4px 16px 8px; border: 1px solid var(--system-line); border-radius: 16px; background: var(--system-paper); }
#vibecoding .cv-plug-group { margin: 6px 0 0; color: var(--system-muted); font-size: 11px; line-height: 1.6; }
#vibecoding .cv-plug-row { display: flex; align-items: center; gap: 8px; min-height: 34px; }
#vibecoding .cv-plug-row + .cv-plug-row { border-top: 1px solid #f0f1f4; }
#vibecoding .cv-plug-tile { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: #f5f5f7; color: var(--system-muted); font-size: 11px; font-weight: 500; }
#vibecoding .cv-plug-name { flex: 1; min-width: 0; font-size: 13px; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#vibecoding .cv-plug-connect { flex: none; padding: 3px 11px; border: 1px solid #e4e4e7; border-radius: 6px; background: #fff; font-size: 12.5px; font-weight: 600; line-height: 1.4; }
/* Before: the hand-rolled switch that used to live in pieces.tsx (28x16, ink when on). */
#vibecoding .cv-sw-old { flex: none; box-sizing: border-box; display: inline-flex; align-items: center; width: 28px; height: 16px; padding: 2px; border-radius: 999px; background: #d4d4d8; }
#vibecoding .cv-sw-old i { width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .2); }
#vibecoding .cv-sw-old.is-on { background: #18181b; }
#vibecoding .cv-sw-old.is-on i { transform: translateX(12px); }
/* After: the design-system Switch (40x24, 16px thumb off, 20px thumb on). The plugin
   column maps its accent to success green; while busy it shows the optimistic "on"
   position with a small spinner inside the thumb, and falls back if the action fails. */
#vibecoding .cv-sw { flex: none; box-sizing: border-box; display: flex; align-items: center; width: 40px; height: 24px; padding: 4px; border-radius: 999px; background: #d4d4d8; }
#vibecoding .cv-sw i { display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: #fff; }
#vibecoding .cv-sw.is-on { background: #16a34a; }
#vibecoding .cv-sw.is-on i { width: 20px; height: 20px; transform: translateX(14px); }
#vibecoding .cv-sw b { box-sizing: border-box; width: 14px; height: 14px; border: 2px solid #d4d4d8; border-top-color: #3f3f46; border-radius: 50%; animation: cv-sw-spin 800ms linear infinite; }
@keyframes cv-sw-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { #vibecoding .cv-sw b { animation: none; } }
#vibecoding .cv-ba-col--before .cv-sw-old,
#vibecoding .cv-ba-col--before .cv-plug-connect { outline: 2px dashed #7f6cf6; outline-offset: 3px; }
#vibecoding .cv-ba-caption { margin: 0; text-align: center; color: rgba(12, 19, 27, .6); font-size: 16px; line-height: 25.6px; }
#vibecoding .cv-ba-col--after .cv-ba-caption { color: rgb(12, 19, 27); }
/* Inline glyphs: the controls named in the prose, drawn right after their words. */
#vibecoding .cv-inline-glyph { display: inline-flex; margin: 0 4px; vertical-align: -2px; }
#vibecoding .cv-plug-connect.cv-inline-glyph { vertical-align: 1px; padding: 0 8px; font-size: 12px; line-height: 18px; color: var(--system-ink); }
/* Plain-language reading of the check under the code. */
#vibecoding .cv-rule-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
#vibecoding .cv-rule { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 14px; border-radius: 12px; font-size: 14px; line-height: 1.5; }
#vibecoding .cv-rule--fail { background: #fdecec; color: #a32d2d; }
#vibecoding .cv-rule--pass { background: #e8f5ec; color: #166534; }
#vibecoding .cv-rule-mark { flex: none; font-weight: 600; }
@media (max-width: 809.98px) {
  #vibecoding .cv-ba-figure { flex-direction: column; }
  #vibecoding .cv-ba-col { width: 100%; }
}
@media (max-width: 599.98px) {
  #vibecoding .cv-rule-pair { grid-template-columns: 1fr; }
}

/* Chapter 7.2: Skill structure and task flow, drawn in markup instead of a PNG so
   both languages read at full resolution and the diagram reflows on small screens.
   Palette sampled from the original diagram; the wires reuse the page accent. */
#vibecoding .cv-skill {
  --cv-skill-ink: #18181b;
  --cv-skill-muted: #6b7078;
  --cv-skill-wire: #7f6cf6;
  --cv-skill-gap: 20px;
  box-sizing: border-box;
  width: 100%;
  max-width: 1100px;
  margin: 8px auto;
  padding: 24px 24px 20px;
  border: 1px solid #e0e2e7;
  border-radius: 16px;
  background: #fff;
  color: var(--cv-skill-ink);
}
#vibecoding .cv-skill * { box-sizing: border-box; }
#vibecoding .cv-skill p, #vibecoding .cv-skill ul, #vibecoding .cv-skill ol { margin: 0; }
#vibecoding .cv-skill ul, #vibecoding .cv-skill ol { padding: 0; list-style: none; }
#vibecoding p.cv-skill-label { margin: 0 0 10px; font-size: 16px; font-weight: 600; line-height: 1.4; }

/* Skill structure: three method groups inside one grey panel. */
#vibecoding .cv-skill-panel { padding: 14px 16px 10px; border-radius: 14px; background: #f2efec; }
#vibecoding p.cv-skill-panel-title { margin-bottom: 12px; text-align: center; font-size: 15px; font-weight: 600; line-height: 1.4; }
#vibecoding .cv-skill-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
#vibecoding .cv-skill-group { display: flex; flex-direction: column; gap: 8px; padding: 12px 12px 10px; border-radius: 12px; }
#vibecoding .cv-skill-group--stage { background: #ffc8e1; }
#vibecoding .cv-skill-group--collab { background: #c4e8f9; }
#vibecoding .cv-skill-group--knowledge { background: #d7d0f4; }
#vibecoding .cv-skill-group-title { text-align: center; font-size: 14px; font-weight: 600; line-height: 1.4; }
#vibecoding p.cv-skill-group-ask { margin-top: -4px; text-align: center; font-size: 12px; line-height: 1.5; color: rgba(12, 19, 27, .72); }
#vibecoding .cv-skill-chips { flex: 1; display: grid; gap: 8px; align-content: stretch; }
/* The Chinese stage labels are two characters wide and fit three columns; the English
   ones (Implementation) need two. The switch sets data-ui-language on <html>. */
#vibecoding .cv-skill-chips--stage { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html[data-ui-language="zh"] #vibecoding .cv-skill-chips--stage { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#vibecoding .cv-skill-chips--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#vibecoding .cv-skill-chips li { display: grid; place-items: center; min-height: 34px; padding: 6px 6px; border-radius: 8px; text-align: center; font-size: 12.5px; line-height: 1.35; overflow-wrap: anywhere; }
#vibecoding .cv-skill-group--stage .cv-skill-chips li { background: #ffe8ee; }
#vibecoding .cv-skill-group--collab .cv-skill-chips li { background: #edf7fe; }
#vibecoding .cv-skill-group--knowledge .cv-skill-chips li { background: #f4ecfe; }
#vibecoding .cv-skill-group-foot { text-align: center; font-size: 12px; line-height: 1.5; color: rgba(12, 19, 27, .72); }
#vibecoding p.cv-skill-panel-foot { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(12, 19, 27, .1); font-size: 12px; line-height: 1.6; color: var(--cv-skill-muted); }
#vibecoding .cv-skill-panel-foot span[aria-hidden] { opacity: .5; }

/* The wires between the panel and the flow: read-as-needed, drawn at a fixed height
   with percentage endpoints so the slopes follow the container width without skewing. */
#vibecoding .cv-skill-bridge { position: relative; height: 100px; }
#vibecoding .cv-skill-bridge svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }
#vibecoding .cv-skill-bridge p.cv-skill-label { position: absolute; left: 0; bottom: 4px; margin: 0; }
#vibecoding .cv-skill-bridge line { stroke: var(--cv-skill-wire); stroke-width: 1.5; stroke-dasharray: 5 4; }
#vibecoding .cv-skill-bridge line[data-solid] { stroke-dasharray: none; }
#vibecoding .cv-skill-bridge circle { fill: #fff; stroke: var(--cv-skill-wire); stroke-width: 1.5; }
#vibecoding .cv-skill-wire-note { position: absolute; left: 47%; top: 52px; display: flex; align-items: center; gap: 6px; font-size: 12px; line-height: 1.5; color: var(--cv-skill-muted); }
#vibecoding .cv-skill-wire-note::before { content: ""; width: 26px; height: 0; border-top: 1.5px dashed var(--cv-skill-wire); }

/* Task flow: five equal steps, an arrow in every gap, and the loop back to the start. */
#vibecoding .cv-skill-steps { display: flex; gap: var(--cv-skill-gap); align-items: center; }
#vibecoding .cv-skill-steps li { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 68px; padding: 10px 8px; border: 1.5px solid transparent; border-radius: 10px; background: #dfdbfa; text-align: center; font-size: 13.5px; font-weight: 500; line-height: 1.35; color: #2f2a72; }
#vibecoding .cv-skill-steps li + li::before,
#vibecoding .cv-skill-steps li + li::after { content: ""; position: absolute; top: 50%; }
#vibecoding .cv-skill-steps li + li::before { left: calc(-1 * var(--cv-skill-gap) + 2px); width: calc(var(--cv-skill-gap) - 10px); height: 2px; margin-top: -1px; background: var(--cv-skill-wire); }
#vibecoding .cv-skill-steps li + li::after { left: -9px; margin-top: -5px; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid var(--cv-skill-wire); }
#vibecoding .cv-skill-steps .cv-skill-step--docs { background: #e3f3fe; border-color: #8bcce5; color: #10457c; }
#vibecoding .cv-skill-step-title { font-size: 13.5px; font-weight: 600; line-height: 1.4; }
#vibecoding .cv-skill-step-lines { display: flex; flex-direction: column; font-size: 12px; font-weight: 400; line-height: 1.5; }
#vibecoding p.cv-skill-flow-note { margin-top: 6px; padding-left: calc((100% - 4 * var(--cv-skill-gap)) / 5 + var(--cv-skill-gap)); font-size: 12px; line-height: 1.5; color: var(--cv-skill-muted); }
#vibecoding .cv-skill-loop {
  position: relative;
  height: 42px;
  /* Half a step on each side, so the loop starts and ends under the step centres. */
  margin: 4px calc((100% - 4 * var(--cv-skill-gap)) / 10) 0;
  border: 1.5px solid var(--cv-skill-wire);
  border-top: 0;
  border-radius: 0 0 14px 14px;
}
#vibecoding .cv-skill-loop::before { content: ""; position: absolute; left: -6px; top: -9px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid var(--cv-skill-wire); }
#vibecoding .cv-skill-loop span { position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 50%); padding: 0 10px; background: #fff; font-size: 12.5px; line-height: 1.5; color: var(--cv-skill-wire); }
#vibecoding .cv-skill figcaption { margin-top: 14px; text-align: center; font-size: 14px; line-height: 1.6; color: rgba(12, 19, 27, .6); }

/* Narrow desktops and tablets: the diagram still fits in one row, but only with
   tighter padding and a step down in type, otherwise every chip wraps. */
@media (min-width: 810px) and (max-width: 1099.98px) {
  #vibecoding .cv-skill { --cv-skill-gap: 14px; padding: 20px 16px 16px; }
  #vibecoding .cv-skill-panel { padding: 12px 12px 8px; }
  #vibecoding .cv-skill-groups { gap: 8px; }
  #vibecoding .cv-skill-group { padding: 10px 8px 8px; }
  #vibecoding .cv-skill-chips { gap: 6px; }
  #vibecoding .cv-skill-chips li { min-height: 32px; padding: 5px 4px; font-size: 12px; }
  #vibecoding .cv-skill-steps li { padding: 8px 6px; font-size: 12.5px; }
}

/* Narrow screens: stack the groups and the steps, and drop the drawn wires. */
@media (max-width: 809.98px) {
  #vibecoding .cv-skill { padding: 18px 16px 16px; }
  #vibecoding .cv-skill-groups { grid-template-columns: 1fr; }
  #vibecoding .cv-skill-bridge { height: auto; padding: 14px 0 0; text-align: center; }
  #vibecoding .cv-skill-bridge svg { display: none; }
  #vibecoding .cv-skill-bridge p.cv-skill-label { position: static; margin: 14px 0 10px; text-align: left; }
  #vibecoding .cv-skill-wire-note { position: static; justify-content: center; }
  #vibecoding .cv-skill-wire-note::after { content: "↓"; color: var(--cv-skill-wire); }
  #vibecoding .cv-skill-steps { flex-direction: column; gap: 22px; align-items: stretch; }
  #vibecoding .cv-skill-steps li { flex: none; min-height: 0; }
  #vibecoding .cv-skill-steps li + li::before { left: 50%; top: -20px; width: 2px; height: 12px; margin: 0 0 0 -1px; }
  #vibecoding .cv-skill-steps li + li::after { left: 50%; top: -9px; margin: 0 0 0 -5px; border-top: 8px solid var(--cv-skill-wire); border-bottom: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; }
  #vibecoding p.cv-skill-flow-note { padding-left: 0; text-align: center; }
  #vibecoding .cv-skill-loop { margin-left: 0; margin-right: 0; height: 34px; }
}