/* Smart Tubing scene (templates/_smart_tubing_demo.html). One 16 s loop:
   run 1 draws 6-22% (stage 1 from 23%), run 2 30-40% (stage 2 from 41%), run 3 48-58%
   (stage 3 from 59%), hold, reset 93-97%. tb-wAB = visible from stage A to stage B
   (0 = before anything is drawn). The un-animated state is the FINAL ledger, so reduced
   motion, print and a stalled animation all show the finished route. */
.tb-demo{--tb-paper:#fbfcfc;--tb-grid:#d8e3e0;--tb-run:#b4531a;--tb-ink:var(--ink,#0f172a);--tb-muted:var(--muted,#5b6b68);
  --tb-line:var(--line,#dbe4e1);--tb-card:var(--card,#fff);--tb-accent:var(--teal,#11806f);
  display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:0;min-width:0;width:100%;
  border:1px solid var(--tb-line);border-radius:12px;overflow:hidden;background:var(--tb-card)}
.tb-demo-home{--tb-ink:var(--lp-ink,#0f172a);--tb-muted:var(--lp-muted,#5b6b68);--tb-line:var(--lp-line,#dbe4e1);
  --tb-card:var(--lp-bg,#fff);border:0;border-radius:0}
.tb-stage{position:relative;min-width:0;aspect-ratio:4/3;background:var(--tb-paper);border-right:1px solid var(--tb-line)}
.tb-svg{position:absolute;inset:0;display:block;width:100%;height:100%}
.tb-paper{fill:var(--tb-paper)}
.tb-grid-line{fill:none;stroke:var(--tb-grid);stroke-width:1;vector-effect:non-scaling-stroke}
.tb-scale-bar path{fill:none;stroke:#3f4d4a;stroke-width:2;vector-effect:non-scaling-stroke}
.tb-run{fill:none;stroke:var(--tb-run);stroke-width:4;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:0}
.tb-mark{stroke:#fff;stroke-width:2;vector-effect:non-scaling-stroke}
.tb-m-coupling{fill:#d97706}
.tb-m-elbow{fill:#11806f}
.tb-m-elbow45{fill:#7c3aed}
.tb-m-cap{fill:#1f2937}
.tb-pen{opacity:0;pointer-events:none}
.tb-pen-ring{fill:rgba(17,128,111,.14);stroke:#11806f;stroke-width:2;vector-effect:non-scaling-stroke}
.tb-pen-dot{fill:#11806f}
.tb-chip{position:absolute;left:10px;top:10px;border:1px solid var(--tb-grid);border-radius:6px;padding:3px 8px;background:#fff;
  color:#2d3a38;font-size:12px;font-weight:800;line-height:1.3}
.tb-ledger{display:grid;align-content:start;gap:2px;min-width:0;padding:14px 16px;font-variant-numeric:tabular-nums;color:var(--tb-ink)}
.tb-ledger-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;padding-bottom:10px;margin-bottom:4px;border-bottom:1px solid var(--tb-line)}
.tb-ledger-head strong{font-size:15px}
.tb-ledger-head small{flex-basis:100%;color:var(--tb-muted);font-size:13px}
.tb-tag{border-radius:999px;padding:2px 8px;background:var(--tb-accent);color:#fff;font-size:11px;font-weight:900;letter-spacing:.04em;text-transform:uppercase}
.tb-row{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:36px;border-bottom:1px solid var(--tb-line);font-size:14px}
.tb-row:last-child{border-bottom:0}
.tb-name{display:inline-flex;align-items:center;gap:8px;min-width:0}
.tb-val{font-weight:900;white-space:nowrap}
.tb-stack{display:inline-grid;justify-items:end}
.tb-stack>span{grid-area:1/1}
.tb-swatch{width:18px;height:18px;flex:0 0 18px}
.tb-w00,.tb-w11,.tb-w22{opacity:0}

@media(prefers-reduced-motion:no-preference){
  .tb-demo .tb-run-1{animation:tb-d1 16s linear infinite}
  .tb-demo .tb-run-2{animation:tb-d2 16s linear infinite}
  .tb-demo .tb-run-3{animation:tb-d3 16s linear infinite}
  .tb-demo .tb-pen{animation:tb-pen 16s linear infinite}
  .tb-demo .tb-w00{animation:tb-w00 16s linear infinite}
  .tb-demo .tb-w11{animation:tb-w11 16s linear infinite}
  .tb-demo .tb-w22{animation:tb-w22 16s linear infinite}
  .tb-demo .tb-w13{animation:tb-w13 16s linear infinite}
  .tb-demo .tb-w23{animation:tb-w23 16s linear infinite}
  .tb-demo .tb-w33{animation:tb-w33 16s linear infinite}
  /* On the homepage the scene starts with the other scenes when it scrolls into view. */
  .lp-takeoff-demo.is-enhanced:not(.is-running) .tb-demo *{animation:none}
}
@keyframes tb-d1{0%,6%{stroke-dashoffset:1}22%,93%{stroke-dashoffset:0}96%,100%{stroke-dashoffset:1}}
@keyframes tb-d2{0%,30%{stroke-dashoffset:1}40%,93%{stroke-dashoffset:0}96%,100%{stroke-dashoffset:1}}
@keyframes tb-d3{0%,48%{stroke-dashoffset:1}58%,93%{stroke-dashoffset:0}96%,100%{stroke-dashoffset:1}}
@keyframes tb-pen{0%{opacity:0;transform:translate(90px,120px)}4%,6%{opacity:1;transform:translate(90px,120px)}
  22%,30%{opacity:1;transform:translate(870px,120px)}40%,48%{opacity:1;transform:translate(870px,440px)}
  58%{opacity:1;transform:translate(657.868px,652.132px)}62%,100%{opacity:0;transform:translate(657.868px,652.132px)}}
@keyframes tb-w00{0%,21.5%{opacity:1}23%,95%{opacity:0}97%,100%{opacity:1}}
@keyframes tb-w11{0%,22%{opacity:0}23.5%,39.5%{opacity:1}41%,100%{opacity:0}}
@keyframes tb-w22{0%,40%{opacity:0}41.5%,57.5%{opacity:1}59%,100%{opacity:0}}
@keyframes tb-w13{0%,22%{opacity:0}23.5%,93%{opacity:1}95%,100%{opacity:0}}
@keyframes tb-w23{0%,40%{opacity:0}41.5%,93%{opacity:1}95%,100%{opacity:0}}
@keyframes tb-w33{0%,58%{opacity:0}59.5%,93%{opacity:1}95%,100%{opacity:0}}

/* The ledger follows the site theme through its tokens; the drawing sheet stays paper-white
   like a real plan in both themes. */
@media(max-width:860px){
  .tb-demo{grid-template-columns:minmax(0,1fr)}
  .tb-stage{border-right:0;border-bottom:1px solid var(--tb-line)}
}
@media print{.tb-demo *{animation:none!important}}