/* ROI3 Step 4 v21: compact moving-constraint main ("one line of work"). Load AFTER bottleneck-v19.css and bottleneck-v20.css. Scoped to #bottleneck; new names bt21-* only. */
#bottleneck .bt21-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#bottleneck .bt21-fig{display:grid;gap:.85rem;margin:1rem 0 0}

/* moment strip: shown only once the controller is running */
#bottleneck .bt21-ctl{display:none}
#bottleneck.bt21-on .bt21-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .9rem}
#bottleneck .bt21-ctl-h{font-size:.8rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
#bottleneck .bt21-phs{display:flex;align-items:center}
#bottleneck .bt21-phs li{display:flex;align-items:center}
#bottleneck .bt21-phs li+li::before{content:"";display:block;width:1rem;height:2px;background:#9aa8ba}
#bottleneck .bt21-ph{display:inline-flex;align-items:center;gap:.45rem;min-height:44px;padding:.25rem .85rem .25rem .35rem;background:#fff;border:1.5px solid var(--line);border-radius:999px;color:var(--ink);font:inherit;font-size:.925rem;font-weight:700;line-height:1.2;cursor:pointer}
#bottleneck .bt21-ph b{display:inline-grid;place-items:center;flex:none;width:1.65rem;height:1.65rem;border-radius:50%;background:var(--bg);font-size:.85rem}
#bottleneck .bt21-ph[data-bt21-done] b{background:var(--teal);color:#fff}
#bottleneck .bt21-ph[aria-pressed="true"]{background:var(--amber-t);border-color:var(--amber);box-shadow:inset 0 0 0 1px var(--amber)}
#bottleneck .bt21-ph[aria-pressed="true"] b{background:var(--amber);color:#fff}
#bottleneck .bt21-next{margin-left:auto;min-height:44px;padding:.45rem 1.1rem;background:var(--blue);border:0;border-radius:.5rem;color:#fff;font:inherit;font-weight:800;cursor:pointer}
#bottleneck .bt21-next:hover{background:var(--ink)}

/* the one business line */
#bottleneck .bt21-map{display:grid;grid-template-columns:minmax(0,1fr) 7.5rem;column-gap:.9rem;padding:.85rem .85rem .75rem;background:#fff;border:1px solid var(--line);border-radius:.75rem}
#bottleneck .bt21-line{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
#bottleneck .bt21-st{display:grid;grid-template-rows:1.75rem 3.25rem auto auto auto;row-gap:.4rem;min-width:0;padding-inline:.55rem}
#bottleneck .bt21-hd{display:flex;align-items:center;gap:.4rem;white-space:nowrap}
#bottleneck .bt21-pill{padding:0 .45rem;border:1.5px solid currentColor;border-radius:999px;color:var(--muted);font-size:.72rem;font-weight:800;line-height:1.5}
#bottleneck .bt21-say{font-size:.9rem;line-height:1.3}
#bottleneck .bt21-out{font-size:.78rem;font-weight:700;line-height:1.3;color:var(--muted);text-align:right}
#bottleneck .bt21-out::before{content:"→ ";content:"→ "/""}
#bottleneck .bt21-op{min-height:44px;padding:.35rem .6rem;font-size:.875rem}

/* pipe: walls = capacity, bar = work moving, gate = handoff */
#bottleneck .bt21-pipe{--f:1.9rem;--o:2.3rem;--c:var(--blue);position:relative;margin-inline:-.55rem;background:#fff;border-block:2px solid #9aa8ba}
#bottleneck .bt21-fl{position:absolute;left:0;right:6px;top:50%;height:var(--f);transform:translateY(-50%);background:var(--c);transition:height .35s ease,width .35s ease,background-color .35s ease}
#bottleneck .bt21-gt{position:absolute;right:0;top:-2px;bottom:-2px;width:6px;background:linear-gradient(var(--c),var(--c)) top/100% calc(50% - var(--o)/2) no-repeat,linear-gradient(var(--c),var(--c)) bottom/100% calc(50% - var(--o)/2) no-repeat}
#bottleneck .bt21-q{position:absolute;right:14px;top:50%;transform:translateY(-50%);display:none;grid-template-columns:repeat(4,.7rem);gap:3px}
#bottleneck .bt21-q i{display:block;height:.7rem;background:var(--amber);border-radius:2px}
/* statuses */
#bottleneck .bt21-st[data-bt21-s="hold"] .bt21-pipe{--c:var(--amber);--f:.5rem;--o:.7rem;background:var(--amber-t);border-color:var(--amber)}
#bottleneck .bt21-st[data-bt21-s="hold"] .bt21-q{display:grid}
#bottleneck .bt21-st[data-bt21-s="up"] .bt21-pipe{--c:var(--teal);border-color:var(--teal)}
#bottleneck .bt21-st[data-bt21-s="wait"] .bt21-pipe{--c:#9aa8ba;--f:3px;border-style:dashed}
#bottleneck .bt21-st[data-bt21-s="room"] .bt21-pipe{--c:var(--teal);--f:.5rem;background:var(--teal-t);border-color:var(--teal);border-style:dashed}
#bottleneck .bt21-st[data-bt21-s="thin"] .bt21-pipe{--c:var(--amber);--f:.35rem;border-color:var(--amber);border-style:dashed}
#bottleneck .bt21-st[data-bt21-s="feed"] .bt21-pill{color:var(--blue)}
#bottleneck .bt21-st[data-bt21-s="up"] .bt21-pill,#bottleneck .bt21-st[data-bt21-s="room"] .bt21-pill{color:var(--teal)}
#bottleneck .bt21-st[data-bt21-s="hold"] .bt21-pill,#bottleneck .bt21-st[data-bt21-s="thin"] .bt21-pill{background:var(--amber);border-color:var(--amber);color:#fff}
#bottleneck .bt21-st[data-bt21-s="hold"] .bt21-say,#bottleneck .bt21-st[data-bt21-s="thin"] .bt21-say{font-weight:700}

/* payment is a separate, customer-owned event */
#bottleneck .bt21-pay{display:grid;align-content:center;margin-top:2.15rem;min-height:3.25rem;padding:.3rem .55rem;border:1.5px dashed var(--muted);border-radius:.5rem;color:var(--muted);font-size:.78rem;line-height:1.25}
#bottleneck .bt21-pay b{color:var(--ink);font-size:.875rem}

/* return loop */
#bottleneck .bt21-back{grid-column:1/-1;position:relative;margin:.7rem 0 0 1rem;padding:.3rem 1rem .35rem;border:2px dashed #9aa8ba;border-top:0;border-radius:0 0 .7rem .7rem;color:var(--muted);font-size:.875rem;font-weight:700;text-align:center}
#bottleneck .bt21-back::before{content:"";position:absolute;left:-6px;top:-9px;border:7px solid transparent;border-top:0;border-bottom:9px solid #9aa8ba}
#bottleneck .bt21-b4{display:none}
#bottleneck .bt21-fig[data-bt21-state="4"] .bt21-back{border-style:solid;border-color:var(--blue);background:var(--blue-t);color:var(--ink)}
#bottleneck .bt21-fig[data-bt21-state="4"] .bt21-back::before{border-bottom-color:var(--blue)}
#bottleneck .bt21-fig[data-bt21-state="4"] .bt21-b0{display:none}
#bottleneck .bt21-fig[data-bt21-state="4"] .bt21-b4{display:inline}

/* the single active annotation */
#bottleneck .bt21-notes{display:grid;gap:.6rem}
#bottleneck .bt21-note{display:grid;grid-template-columns:13rem repeat(3,minmax(0,1fr));gap:.4rem 1.1rem;align-items:start;padding:.75rem 1rem;background:#fff;border:1px solid var(--line);border-left:5px solid var(--amber);border-radius:.6rem}
#bottleneck .bt21-note[hidden]{display:none}
#bottleneck .bt21-note h3{display:flex;gap:.5rem;font-size:1.02rem}
#bottleneck .bt21-n{display:inline-grid;place-items:center;flex:none;width:1.5rem;height:1.5rem;border-radius:50%;background:var(--amber);color:#fff;font-size:.8rem}
#bottleneck .bt21-note p{font-size:.925rem;line-height:1.4}
#bottleneck .bt21-note p b{color:var(--amber)}
#bottleneck .bt21-cap{color:var(--muted);font-size:.875rem}

/* phone and tablet: the same line, running down the page */
@media (max-width:1023px){
#bottleneck .bt21-ctl-h{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#bottleneck .bt21-phs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.3rem;width:100%}
#bottleneck .bt21-phs li+li::before{display:none}
#bottleneck .bt21-ph{flex-direction:column;justify-content:center;gap:.1rem;width:100%;padding:.3rem .15rem;border-radius:.55rem;font-size:.8rem}
#bottleneck .bt21-ph b{width:1.35rem;height:1.35rem;font-size:.75rem}
#bottleneck .bt21-next{width:100%;margin-left:0}
#bottleneck .bt21-map{grid-template-columns:minmax(0,1fr);padding:.75rem}
#bottleneck .bt21-line{grid-template-columns:minmax(0,1fr)}
#bottleneck .bt21-st{grid-template-columns:2.5rem minmax(0,1fr) 7.5rem;grid-template-rows:auto auto auto;grid-template-areas:"p h o" "p s o" "p t t";column-gap:.65rem;row-gap:.1rem;padding:0}
#bottleneck .bt21-st>.bt21-pipe{--o:1.9rem;grid-area:p;margin:0;border-block:0;border-inline:2px solid #9aa8ba}
#bottleneck .bt21-hd{grid-area:h;flex-wrap:wrap;white-space:normal;padding-top:.35rem}
#bottleneck .bt21-say{grid-area:s}
#bottleneck .bt21-out{grid-area:t;padding:.15rem 0 .6rem;text-align:left}
#bottleneck .bt21-out::before{content:"↓ ";content:"↓ "/""}
#bottleneck .bt21-op{grid-area:o;align-self:center;margin-top:.35rem}
#bottleneck .bt21-fl{left:50%;right:auto;top:0;bottom:6px;width:var(--f);height:auto;transform:translateX(-50%)}
#bottleneck .bt21-gt{left:-2px;right:-2px;top:auto;bottom:0;width:auto;height:6px;background:linear-gradient(var(--c),var(--c)) left/calc(50% - var(--o)/2) 100% no-repeat,linear-gradient(var(--c),var(--c)) right/calc(50% - var(--o)/2) 100% no-repeat}
#bottleneck .bt21-q{right:auto;left:50%;top:auto;bottom:12px;transform:translateX(-50%);grid-template-columns:repeat(2,.6rem)}
#bottleneck .bt21-q i{height:.6rem}
#bottleneck .bt21-pay{display:block;min-height:0;margin:.5rem 0 0 3.15rem}
#bottleneck .bt21-pay span::before{content:" · "}
#bottleneck .bt21-back{margin:.6rem 0 0 1.2rem;text-align:left}
#bottleneck .bt21-note{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
#bottleneck .bt21-fl{transition:none}
}
@media (forced-colors:active){
#bottleneck .bt21-pipe{forced-color-adjust:none}
}
@media print{
#bottleneck .bt21-ctl{display:none!important}
#bottleneck .bt21-note[hidden]{display:grid!important}
#bottleneck .bt21-map,#bottleneck .bt21-note{break-inside:avoid}
}

/* Observed phone density correction; preserve readable labels and 44px controls. */
@media (max-width:759px){
#bottleneck{padding-block:1.75rem}
#bottleneck .bt21-fig{gap:.55rem}
#bottleneck .bt21-map{padding:.6rem}
#bottleneck .bt21-st{column-gap:.45rem}
#bottleneck .bt21-hd{padding-top:.1rem}
#bottleneck .bt21-out{padding:.1rem 0 .3rem}
#bottleneck .bt21-op{font-size:.8rem;line-height:1.2;padding:.25rem .4rem;min-height:44px;gap:.35rem}
#bottleneck .bt21-op .plus{width:1.2rem;height:1.2rem;font-size:.9rem}
}