/* Guide pages: scroll-driven wiring diagrams, connector step sequences and installation content.
   Loaded only on pages that list it in site.json/articles.json ("styles").

   Two layouts share one markup:
   - Static (no JavaScript, or prefers-reduced-motion: reduce): every diagram is complete and
     lit, followed by its steps as a numbered list; connector steps are a grid of photos.
   - Scroll (.js and motion allowed): each diagram pins beside (wide) or above (narrow) its
     steps, and guides.js scrubs it from scroll position. Pinned stages use svh so mobile
     toolbars showing and hiding don't resize them mid-scroll. */

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

:root { --pin-top: calc(var(--header-height) + 16px); }
.guide-wiring { --pin-top: calc(var(--header-height) + 68px); }

/* On-this-page links */
.guide-toc ul, .chapter-nav ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.guide-toc a, .chapter-nav a {
  display: inline-block; padding: 6px 14px; border: 1px solid var(--line-strong); border-radius: 999px;
  font-size: 0.9rem; text-decoration: none; color: var(--charcoal); background: #fff;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.guide-toc a:hover, .chapter-nav a:hover { border-color: var(--ink); }

/* Hero scroll cue */
.scroll-cue {
  display: inline-flex; align-items: center; gap: 12px; margin-top: 1.25rem;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); text-decoration: none;
}
.scroll-cue:hover { color: var(--black); }
.scroll-cue__line { position: relative; flex: none; width: 1px; height: 34px; overflow: hidden; background: var(--line-strong); }
.scroll-cue__line::after {
  content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 12px;
  background: linear-gradient(#f4d79f, #c9862c); opacity: 0;
}

/* Strip-type chapters and their nav */
.chapter-nav ul { margin: 0 0 1.5rem; }
.chapter-nav a[aria-current="true"] { background: var(--black); border-color: var(--black); color: #fff; }
.chapter { scroll-margin-top: 56px; }
.chapter + .chapter { margin-top: clamp(48px, 7vw, 88px); }
.chapter__title { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.55rem); margin-bottom: 0.25rem; }

/* Wiring diagram */
.wiring { margin: 1.25rem 0 0; }
.wiring__frame {
  overflow-x: auto; overscroll-behavior-x: contain; padding: clamp(8px, 2vw, 20px);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: radial-gradient(120% 90% at 85% 10%, rgba(246, 226, 184, 0.28), rgba(255, 255, 255, 0) 60%), #fff;
}
.wiring__svg { width: 100%; min-width: 720px; height: auto; overflow: visible; }
.wiring__svg--dali { min-width: 460px; }
.wiring__caption { margin-top: 0.6rem; font-size: 0.9rem; color: var(--muted); }
.wiring__hint { display: none; }
@media (max-width: 799px) { .wiring__hint { display: inline; } }

.wiring__svg text, .cable-swatch text { font-family: var(--font); fill: var(--ink); }
.device__body { fill: #fff; stroke: var(--charcoal); stroke-width: 2; }
.device__detail, .device__detail rect, .device__detail circle { fill: none; stroke: var(--line-strong); stroke-width: 1.5; }
.device__port { fill: var(--stone); stroke: var(--charcoal); stroke-width: 1.3; }
.device-label { font-size: 16px; font-style: italic; }
.device-label--in { font-style: normal; font-weight: 500; font-size: 15px; }
.terminal rect { fill: var(--stone); stroke: var(--charcoal); stroke-width: 1.3; }
.terminal text { font-size: 13px; font-weight: 600; }
.terminal--idle { opacity: 0.55; }
.supply-label { font-size: 13px; fill: var(--muted) !important; }
.supply__joint { fill: #a7a7a7; }
.supply-label__sub { font-weight: 600; fill: var(--ink); }
.bus-labels text { font-size: 13px; font-style: italic; fill: var(--muted); }
.junction { fill: var(--charcoal); }

.strip { fill: #fff; stroke: #8e8a82; stroke-width: 1.5; }
.pad { fill: #d39a5c; }
.pad-label { font-size: 11px; fill: var(--muted) !important; font-weight: 600; }
.load-label { font-size: 15px; font-style: italic; }
.neon-body { fill: #fbf8f0; stroke: #b9b4aa; stroke-width: 1.5; }
.neon-feed { fill: #dedbd4; stroke: #8e8a82; stroke-width: 1.3; }
.break { fill: none; stroke: #fff; stroke-width: 5; }
.led-glow { opacity: 0.6; }
/* Highlight rings and the per-channel light layers only show while scrubbing. */
.halo { fill: rgba(246, 226, 184, 0.35); stroke: var(--amber); stroke-width: 2; opacity: 0; }
.led-anim { display: none; }
.is-scrub .led-anim { display: inline; }
.is-scrub .led-base { display: none; }

.wire path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.wire__casing { stroke-width: 6.5; }
.wire__core { stroke-width: 4; }
/* "Live" highlight: a thin bright line along the core once the circuit is powered. Static on
   purpose; mains is AC and DALI is data, so moving dots would suggest a direction that isn't real.
   Hidden unless scrubbed (or on a cable swatch on screen). */
.wire__flow { stroke: #fff; stroke-width: 1.4; opacity: 0; }
.cable-swatch .wire__flow { transition: opacity 0.6s ease; }
.wire--white .wire__flow, .wire--yellow .wire__flow, .wire--grey .wire__flow { stroke: var(--amber); }
.cable-swatch.is-live .wire__flow { opacity: 0.8; }

/* Connections table under each diagram */
.connections { margin-top: 1rem; }
.connections__table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.connections__table caption { text-align: left; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); padding-bottom: 6px; }
.connections__table th, .connections__table td { padding: 8px 14px 8px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.connections__table thead th { font-size: 0.82rem; color: var(--muted); font-weight: 600; border-bottom-color: var(--line-strong); }
.connections__table tbody th { font-weight: 600; white-space: nowrap; }
.connections__table tbody td:nth-child(2) { white-space: nowrap; }
.wire-dot {
  display: inline-block; width: 0.8em; height: 0.8em; margin-right: 0.45em; border-radius: 50%;
  background: var(--wire); box-shadow: inset 0 0 0 1px rgba(15, 15, 16, 0.35); vertical-align: -0.05em;
}

/* Diagram steps (static: a numbered list of cards under the diagram) */
.story { margin-top: 1.25rem; }
.story .wiring { margin-top: 0; }
.prose .story__steps, .story__steps {
  display: grid; gap: 12px; margin: 1rem 0 0; padding: 0; list-style: none; counter-reset: story;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
}
.prose .story__step, .story__step { counter-increment: story; margin: 0; }
.story__card { height: 100%; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; }
.story__card p { margin: 0 0 0.5rem; color: var(--charcoal); font-size: 0.97rem; line-height: 1.5; }
.story__card > :last-child { margin-bottom: 0; }
.story__card .story__kicker { margin-bottom: 2px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.story__kicker::before { content: counter(story, decimal-leading-zero) "  ·  "; white-space: pre; color: var(--amber-ink); }
.story__card .story__title { margin-bottom: 0.3rem; font-size: 1.08rem; font-weight: 500; color: var(--black); }
.story__row {
  display: grid; grid-template-columns: auto 1fr; gap: 3px 14px; margin: 0.6rem 0 0; padding: 10px 12px;
  border-left: 3px solid var(--amber); border-radius: 0 var(--radius) var(--radius) 0; background: var(--cream); font-size: 0.88rem;
}
.story__row div { display: contents; }
.story__row dt { color: var(--muted); }
.story__row dd { margin: 0; font-weight: 600; color: var(--ink); white-space: nowrap; }
.prose .story__pads, .story__pads { margin: 0; padding: 0; list-style: none; font-size: 0.95rem; }
.prose .story__pads li, .story__pads li { margin: 0 0 4px; color: var(--ink); font-weight: 600; }
.story__pads span { display: block; font-weight: 400; font-size: 0.86rem; color: var(--muted); }
.story__scrub, .story__chips { display: none; }
.prose .story__chips, .story__chips { gap: 6px; flex-wrap: wrap; margin: 0.6rem 0 0; padding: 0; list-style: none; }
.prose .story__chips li, .story__chips li {
  display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 3px 10px 3px 7px; border: 1px solid var(--line-strong); border-radius: 999px;
  font-size: 0.8rem; color: var(--muted); transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}
.story__chips li::before { content: ""; width: 0.75em; height: 0.75em; border-radius: 50%; background: var(--chip); box-shadow: inset 0 0 0 1px rgba(15, 15, 16, 0.2); }
.story__chips li.is-on { border-color: var(--ink); background: var(--stone); color: var(--black); }

/* Steps with photos (static: a grid of photo cards) */
.steps-title { margin: 2.25rem 0 1rem; font-size: 1.1rem; font-weight: 600; }
.steps {
  display: grid; gap: 28px 24px; margin: 0; padding: 0; list-style: none; counter-reset: step;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}
.step { counter-increment: step; }
.step__media { margin: 0 0 0.8rem; overflow: hidden; border-radius: var(--radius-lg); background: var(--stone); }
.step__media img { width: 100%; aspect-ratio: 1.85; object-fit: cover; }
.step__media--plain { background: #fff; border: 1px solid var(--line); }
.step__media--plain img { object-fit: contain; padding: 8px; }
.step__caption { display: flex; gap: 12px; margin: 0; color: var(--charcoal); font-size: 0.98rem; line-height: 1.5; }
.step__caption::before {
  content: counter(step); flex: none; display: grid; place-items: center; width: 30px; height: 30px; margin-top: -2px;
  border-radius: 50%; background: var(--glow); color: var(--black); font-size: 0.85rem; font-weight: 700;
}
.seq__stage { display: none; }
.stage__title { display: none; }

/* ---------- Scroll layout: JavaScript on and motion allowed ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .scroll-cue__line::after { animation: cue-drop 2.4s cubic-bezier(0.5, 0, 0.3, 1) infinite; }

  /* Sticky chapter nav */
  .js .chapter-nav {
    position: sticky; top: var(--header-height); z-index: 20; margin: 0 calc(-1 * var(--gutter)) 1.5rem; padding: 10px var(--gutter);
    background: rgba(255, 255, 255, 0.94); border-bottom: 1px solid var(--line);
    backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px);
  }
  .js .chapter-nav ul { flex-wrap: nowrap; margin: 0; overflow-x: auto; scrollbar-width: none; }
  .js .chapter-nav li { flex: none; }

  /* Pinned diagram beside (wide) or above (narrow) its steps */
  .js .story__stage { position: sticky; top: var(--pin-top); z-index: 2; }
  .js .stage__title {
    display: block; margin: 0 0 8px; padding: 6px 0; background: var(--paper);
    font-size: clamp(1rem, 0.9rem + 0.6vw, 1.25rem); font-weight: 500; line-height: 1.3; color: var(--ink);
  }
  /* Title and diagram stay together, centred in the pinned stage. */
  .js .story__stage { display: flex; flex-direction: column; justify-content: center; }
  .js .story .story__stage > .wiring { flex: 0 1 auto; min-height: 0; height: auto; justify-content: flex-start; }
  /* Shown once the section's own heading has scrolled up under the header. */
  .js .stage__title { opacity: 0; transition: opacity 0.25s ease; }
  .js .has-title > .stage__title { opacity: 1; }
  .js .story .wiring { display: flex; flex-direction: column; justify-content: center; height: 100%; }
  .js .story .wiring__frame { overflow: hidden; min-height: 0; }
  .js .story .wiring__svg { display: block; min-width: 0; overflow: hidden; }
  .js .story .wiring__caption { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .js .story__steps { display: block; margin: 0; }
  .js .story__step { position: relative; }
  .js .story__card { position: sticky; height: auto; opacity: 0.38; transition: opacity 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; }
  .js .story__step.is-active .story__card { opacity: 1; border-color: var(--line-strong); box-shadow: 0 18px 40px -28px rgba(15, 15, 16, 0.35); }
  .js .story__step:focus { outline: none; }
  .js .story__step:focus-visible .story__card { outline: 2px solid var(--focus); outline-offset: 3px; }
  .js .story__static { display: none; }
  .js .story__scrub { display: inline; }
  .js .story__chips { display: flex; }

  /* Connector steps: pinned photo stage, captions scroll past */
  .js .seq__stage { display: block; position: sticky; top: var(--pin-top); z-index: 2; }
  .js .seq__media { position: relative; aspect-ratio: 1.85; overflow: hidden; border-radius: var(--radius-lg); background: var(--stone); }
  .js .seq__frame { position: absolute; inset: 0; margin: 0; opacity: 0; }
  .js .seq__frame:first-child { opacity: 1; }
  .js .seq__frame img { width: 100%; height: 100%; object-fit: cover; }
  .js .seq__frame.step__media--plain img { object-fit: contain; }
  .js .seq__meta { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
  .js .seq__count { flex: none; margin: 0; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
  .js .seq__bar { flex: 1; height: 2px; overflow: hidden; border-radius: 2px; background: var(--line); }
  .js .seq__bar span { display: block; height: 100%; background: linear-gradient(90deg, #f4d79f, var(--amber)); transform: scaleX(0); transform-origin: 0 50%; }
  .js .seq__steps { display: block; }
  .js .seq__steps .step__media { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); }
  .js .seq__steps .step { position: relative; }
  .js .seq__steps .step__caption { position: sticky; opacity: 0.38; transition: opacity 0.3s ease; }
  .js .seq__steps .step.is-active .step__caption { opacity: 1; }
  .js .seq__steps .step:focus { outline: none; }
  .js .seq__steps .step:focus-visible .step__caption { outline: 2px solid var(--focus); outline-offset: 4px; }

  @supports (animation-timeline: scroll()) {
    /* Progressive enhancement: the cue fades as the page starts to move. */
    .js .scroll-cue { animation: cue-out linear both; animation-timeline: scroll(root); animation-range: 0 220px; }
  }
}

@media (prefers-reduced-motion: no-preference) and (min-width: 960px) {
  .js .story { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 0 clamp(32px, 4vw, 64px); align-items: start; }
  .js .story__stage { height: calc(100vh - var(--pin-top) - 24px); height: calc(100svh - var(--pin-top) - 24px); }
  .js .story .wiring__svg { width: 100%; height: auto; max-height: calc(100svh - var(--pin-top) - 120px); }
  .js .story__steps { padding: 22svh 0 40svh; }
  .js .story__step { min-height: 50svh; }
  .js .story__step--wire { min-height: 40svh; }
  .js .story__step--light { min-height: 60svh; }
  .js .story--rgbw .story__step--light, .js .story--tw .story__step--light, .js .story--dali .story__step--light { min-height: 110svh; }
  .js .story__card { top: 40svh; }
  /* The DALI article sits in a narrow prose column: let its stories use the page width. */
  .js .prose .story { margin-inline: calc(50% - min(600px, 50vw - var(--gutter) - 12px)); }

  .js .seq { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 0 clamp(32px, 4vw, 64px); align-items: start; }
  .js .seq__stage { top: calc(var(--pin-top) + 6svh); }
  .js .seq__steps { padding: 14svh 0 34svh; }
  .js .seq__steps .step { min-height: 36svh; }
  .js .seq__steps .step__caption { top: 46svh; font-size: 1.05rem; }
}

@media (prefers-reduced-motion: no-preference) and (max-width: 959px) {
  /* On small screens the site header scrolls away on guide pages, so the pinned diagram and its
     steps get the height. The chapter nav stays at the top. */
  :root { --pin-top: 0px; }
  .js { scroll-padding-top: 12px; }
  .js .site-header { position: relative; }
  .js .guide-wiring { --pin-top: 52px; }
  .js .chapter-nav { top: 0; padding-block: 8px; }
  .js .chapter-nav a { padding: 5px 12px; font-size: 0.85rem; }

  .js .story__stage {
    height: 45vh; height: 45svh; margin-inline: calc(-1 * var(--gutter)); padding: 8px var(--gutter);
    background: #fff; box-shadow: 0 12px 16px -14px rgba(15, 15, 16, 0.25);
  }
  .js .story .story__stage > .wiring { flex: 1; }
  .js .story .wiring__frame { flex: 1; padding: 4px; }
  .js .stage__title { margin-bottom: 2px; padding: 0; font-size: 0.92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .js .story .wiring__svg { width: 100%; height: 100%; }
  .js .story__steps { padding: 3svh 0 6svh; }
  .js .story__step { min-height: 50svh; }
  .js .story__step--wire { min-height: 62svh; }
  .js .story__row { font-size: 0.82rem; gap: 2px 10px; }
  .js .story--rgbw .story__step--light, .js .story--tw .story__step--light, .js .story--dali .story__step--light { min-height: 90svh; }
  .js .story__card { top: calc(var(--pin-top) + 45svh + 12px); }

  .js .seq { margin-top: 0.5rem; }
  .js .seq__stage { margin-inline: calc(-1 * var(--gutter)); padding: 8px var(--gutter) 10px; background: #fff; box-shadow: 0 12px 16px -14px rgba(15, 15, 16, 0.25); }
  .js .seq__steps { padding: 4svh 0 10svh; }
  .js .seq__steps .step { min-height: 34svh; }
  .js .seq__steps .step__caption { top: calc(var(--pin-top) + (100vw - 2 * var(--gutter)) / 1.85 + 64px); }
}

@keyframes cue-drop {
  0% { transform: translateY(-12px); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translateY(34px); opacity: 0; }
}
@keyframes cue-out { to { opacity: 0; transform: translateY(-6px); } }

/* Do and don't */
.dos { display: grid; gap: 20px; margin: 0 0 2.5rem; }
@media (min-width: 640px) { .dos { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) {
  .dos { grid-template-columns: 1fr 1fr 0.9fr; align-items: center; }
  .dos--four { grid-template-columns: repeat(4, 1fr); }
}
.dos__text { grid-column: 1 / -1; margin: 0; max-width: 40rem; color: var(--charcoal); }
@media (min-width: 960px) { .dos:not(.dos--four) .dos__text { grid-column: auto; } }
.do { margin: 0; padding: 10px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.do img { width: 100%; border-radius: var(--radius); }
.do figcaption { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 0.92rem; color: var(--charcoal); }
.do__badge {
  padding: 2px 10px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  background: #fbe9e7; color: #9b2a1c;
}
.do--right .do__badge { background: #e7f4ea; color: #24683a; }

/* Neon: bends, install roles, callout */
.bends { display: grid; gap: 24px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 760px) { .bends { grid-template-columns: repeat(3, 1fr); align-items: end; } }
.bend figure { margin: 0; }
.bend img { width: 100%; max-height: 220px; object-fit: contain; }
.bend figcaption { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.bend figcaption strong { font-weight: 500; }
.install-figure { margin: 0 0 1.5rem; padding: 10px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.install-figure img { width: 100%; }
.roles { display: grid; gap: 20px; }
@media (min-width: 760px) { .roles { grid-template-columns: 1fr 1fr; } }
.role h4 { margin-bottom: 0.3rem; font-size: 1rem; font-weight: 600; }
.role p { margin: 0; color: var(--charcoal); }
.callout { margin: 2rem 0 0; padding: 12px 16px; border-left: 3px solid var(--amber); background: var(--cream); color: var(--charcoal); }

/* Cable information */
.cable-table { width: 100%; border-collapse: collapse; }
.cable-table th, .cable-table td { padding: 18px 20px 18px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.cable-table thead th { font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-weight: 600; border-bottom-color: var(--line-strong); }
.cable-table tbody th { font-weight: 500; }
.cable-swatch { width: 140px; height: auto; }
.cable-jacket { fill: #dedad2; stroke: #8d8a84; stroke-width: 1.2; }
.cable-tip { stroke: #b8763e; stroke-width: 3; stroke-linecap: round; }
.core-list { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 4px 16px; }
@media (max-width: 639px) {
  .cable-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .cable-table tr { display: grid; gap: 8px; padding: 16px 0; border-bottom: 1px solid var(--line); }
  .cable-table th, .cable-table td { display: block; padding: 0; border: 0; }
}

/* Footer links and the secondary printable PDF link */
.guide-footer .guide-links { margin-bottom: 1.5rem; }
.guide-pdf { font-size: 0.9rem; }
.guide-pdf a { color: var(--charcoal); }

/* Entrance effect for the content below the diagrams, armed by guides.js only when motion is allowed. */
[data-reveal].is-armed > * { opacity: 0; transform: translateY(18px); }
[data-reveal].is-armed.is-visible > * {
  opacity: 1; transform: none;
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: calc(var(--i, 0) * 110ms);
}

@media (prefers-reduced-motion: reduce) {
  .wire__flow { display: none; }
  [data-reveal] > * { opacity: 1 !important; transform: none !important; transition: none !important; }
}

@media print {
  .chapter-nav, .guide-toc, .scroll-cue, .seq__stage, .stage__title { display: none !important; }
  .story, .seq { display: block !important; }
  .story__stage { position: static !important; height: auto !important; }
  .wiring__frame { overflow: visible; }
  .wiring__svg { min-width: 0; }
}

/* Version switch on the drawn "B" guides (/lab/*-wiring-diagrams). */
.ab-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 1.25rem; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--stone); font-size: 0.9rem; color: var(--muted); }
.ab-switch__tag { padding: 2px 8px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.ab-switch a { color: var(--ink); font-weight: 600; }

/* The real photo of the finished joint after each drawn step sequence (B guides). */
.proof { max-width: 520px; margin: 1.75rem 0 0; }
.proof img { width: 100%; aspect-ratio: 1.85; object-fit: cover; border-radius: var(--radius-lg); background: var(--stone); }
.proof figcaption { display: flex; align-items: center; gap: 10px; margin-top: 0.6rem; font-size: 0.9rem; color: var(--muted); }
.proof__tag { padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line-strong); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); }