/* ROI3 Step 4 v20: moving-constraint composition and reader graphics. Load AFTER bottleneck-v19.css (shared shell, variables, .readers/.rd/.cols/.conds/.open/.card/.tbl/.decide). */
#bottleneck .bt20-fig{margin:1.25rem 0 0}
#bottleneck .bt20-key{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;margin-bottom:1rem;font-size:.875rem;color:var(--muted)}
#bottleneck .bt20-key li{display:inline-flex;align-items:center;gap:.45rem}
#bottleneck .bt20-key i{flex:none;display:block;height:1.1rem}
#bottleneck .bt20-key .bt20-k1{width:1.1rem;border-inline:5px solid var(--amber)}
#bottleneck .bt20-key .bt20-k2{width:1.5rem;background:linear-gradient(var(--amber),var(--amber)) 0 0/.55rem .45rem space}
#bottleneck .bt20-key .bt20-k3{width:1.4rem;border-inline:4px solid var(--teal)}
#bottleneck .bt20-key .bt20-k4{width:1.5rem;border:1.5px dashed var(--teal);border-radius:.2rem;background:#fff}
#bottleneck .bt20-key .bt20-k5{width:1.6rem;height:0;border-top:5px solid var(--teal)}
#bottleneck .bt20-key .bt20-k6{width:1.6rem;height:0;border-top:2px dashed #7d8da3}

#bottleneck .bt20-states{display:grid;gap:1.4rem}
#bottleneck .bt20-snap{position:relative;display:grid;gap:.7rem;grid-template-columns:minmax(0,1fr);min-width:0;padding:.9rem;background:#fff;border:1px solid var(--line);border-radius:.75rem}
#bottleneck .bt20-snap+.bt20-snap::before{content:"";position:absolute;left:1.9rem;top:-1.4rem;height:1.4rem;border-left:3px solid var(--blue)}
#bottleneck .bt20-sh{display:flex;align-items:center;gap:.6rem}
#bottleneck .bt20-no{flex:none;display:grid;place-items:center;width:2rem;height:2rem;border-radius:50%;background:var(--ink);color:#fff;font-weight:800}
#bottleneck .bt20-sh h3{font-size:1.1rem}
#bottleneck .bt20-cap{font-size:.95rem}
#bottleneck .bt20-body{position:relative;min-width:0}

/* one connected business: same four positions in every state */
#bottleneck .bt20-flow{display:grid;gap:.9rem;grid-template-columns:minmax(0,1fr)}
#bottleneck .bt20-d{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"h v" "s v";align-items:center;gap:.2rem .7rem;min-width:0;min-height:4rem;padding:.55rem .7rem;background:var(--blue-t);border:1.5px solid var(--line);border-radius:.6rem}
#bottleneck .bt20-dh{grid-area:h;font-size:1rem;line-height:1.3}
#bottleneck .bt20-st{grid-area:s;font-size:.875rem;line-height:1.35}
#bottleneck .bt20-tag{display:inline-block;padding:0 .5rem;border-radius:999px;background:var(--teal);color:#fff;font-size:.8rem;font-weight:800;white-space:nowrap}
#bottleneck .bt20-hold .bt20-tag{background:var(--amber)}
#bottleneck .bt20-v{grid-area:v;display:flex;align-items:center;gap:.2rem}
#bottleneck .bt20-q,#bottleneck .bt20-o{display:block;width:2.6rem;height:2.2rem;border-radius:.25rem}
#bottleneck .bt20-g{display:block;width:1.6rem;height:2.7rem;border-inline:5px solid var(--blue)}
#bottleneck .bt20-o{background:linear-gradient(var(--blue),var(--blue)) center/.55rem .55rem space no-repeat}
/* constraint: work piles before a narrow amber gate, little gets through */
#bottleneck .bt20-d.bt20-hold{background:var(--amber-t);border:2px solid var(--amber)}
#bottleneck .bt20-hold .bt20-q{background:linear-gradient(var(--amber),var(--amber)) 0 0/.55rem .85rem space}
#bottleneck .bt20-hold .bt20-g{width:1.1rem;border-width:0 6px;border-color:var(--amber)}
#bottleneck .bt20-hold .bt20-o{background:linear-gradient(var(--teal),var(--teal)) 0 50%/.55rem .55rem no-repeat}
#bottleneck .bt20-low .bt20-q{background:#fff;border:1.5px dashed #9aa8ba}
/* improved: open teal gate, work moving through */
#bottleneck .bt20-d.bt20-up,#bottleneck .bt20-d.bt20-room{background:var(--teal-t);border-color:var(--teal)}
#bottleneck .bt20-up .bt20-g,#bottleneck .bt20-room .bt20-g{border-color:var(--teal)}
#bottleneck .bt20-up .bt20-o{background-image:linear-gradient(var(--teal),var(--teal))}
/* idle / spare room: dashed empty capacity */
#bottleneck .bt20-d.bt20-idle{background:#fff;border-style:dashed;border-color:#9aa8ba}
#bottleneck .bt20-d.bt20-room{border-style:dashed}
#bottleneck .bt20-idle .bt20-g{border-color:#9aa8ba}
#bottleneck .bt20-idle .bt20-o,#bottleneck .bt20-room .bt20-o{background:#fff;border:1.5px dashed #9aa8ba}
#bottleneck .bt20-room .bt20-o{border-color:var(--teal)}
/* connectors: line weight = how much work moves to the next team */
#bottleneck .bt20-d:not(:last-child)::after{content:"";position:absolute;left:1.5rem;top:100%;height:.9rem;border-left:5px solid var(--teal)}
#bottleneck .bt20-ok:not(:last-child)::after{border-left-color:var(--blue)}
#bottleneck .bt20-hold:not(:last-child)::after,#bottleneck .bt20-idle:not(:last-child)::after,#bottleneck .bt20-room:not(:last-child)::after{border-left:2px dashed #7d8da3}
/* delivered / invoiced / paid stay separate */
#bottleneck .bt20-m{display:flex;flex-wrap:wrap;gap:.25rem;margin-top:.35rem}
#bottleneck .bt20-m span{padding:0 .45rem;background:#fff;border:1.5px dashed #9aa8ba;border-radius:999px;color:var(--muted);font-size:.8rem;font-weight:700}
#bottleneck .bt20-m .bt20-y{border:1.5px solid var(--teal);color:var(--teal)}
#bottleneck .bt20-m .bt20-w{border:1.5px solid var(--amber);color:var(--amber)}
/* state 4 return to the front (phone: side bracket up to Marketing) */
#bottleneck .bt20-loop .bt20-body{padding-left:1.7rem}
#bottleneck .bt20-back{margin-top:.7rem;padding:.5rem .75rem;background:var(--blue-t);border:2px solid var(--blue);border-radius:.5rem;font-size:.925rem;font-weight:700}
#bottleneck .bt20-back::before{content:"";position:absolute;left:.3rem;top:2rem;bottom:1.3rem;width:1.1rem;border:3px solid var(--blue);border-right:0;border-radius:.6rem 0 0 .6rem}
#bottleneck .bt20-back::after{content:"";position:absolute;left:1.1rem;top:calc(2rem - 5.5px);border:7px solid transparent;border-left-color:var(--blue);border-right:0}

/* reader graphics */
#bottleneck .bt20-mini{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1rem}
#bottleneck .bt20-mini li{padding:.3rem .75rem;background:#fff;border:1.5px solid var(--line);border-radius:999px;font-size:.875rem;font-weight:700}
#bottleneck .bt20-mini .bt20-mu{background:var(--teal-t);border-color:var(--teal);color:var(--teal)}
#bottleneck .bt20-mini .bt20-ma{background:var(--amber);border-color:var(--amber);color:#fff}
#bottleneck .bt20-hand{display:grid;gap:1.4rem;grid-template-columns:minmax(0,1fr)}
#bottleneck .bt20-hand>div{position:relative;min-width:0;padding:.8rem .9rem;background:#fff;border:1px solid var(--line);border-radius:.6rem}
#bottleneck .bt20-hand>div+div::before{content:"";position:absolute;left:1.5rem;top:-1.4rem;height:1.4rem;border-left:4px solid var(--teal)}
#bottleneck .bt20-hand>.bt20-hw{border-top:5px solid var(--amber)}
#bottleneck .bt20-hand>.bt20-pk{background:var(--blue-t);border:2px solid var(--blue)}
#bottleneck .bt20-ls li{position:relative;margin-top:.3rem;padding-left:1rem;font-size:.925rem}
#bottleneck .bt20-ls li::before{content:"";position:absolute;left:0;top:.5em;width:.5rem;height:.5rem;border-radius:2px;background:var(--blue)}
#bottleneck .bt20-ls+p{margin-top:.6rem}
#bottleneck .bt20-pkl{display:grid;gap:.35rem;margin:0}
#bottleneck .bt20-pkl div{padding:.35rem .6rem;background:#fff;border:1px solid var(--line);border-radius:.4rem}
#bottleneck .bt20-pkl dt{color:var(--muted);font-size:.8rem;font-weight:800}
#bottleneck .bt20-pkl dd{margin:0;font-size:.925rem}
#bottleneck .rd .cols p+p,#bottleneck .bt20-hand p+p{margin-top:.5rem}
#bottleneck .rd .cols p+.conds{margin-top:.8rem}
#bottleneck .bt20-cyc{display:grid;gap:.9rem;grid-template-columns:minmax(0,1fr)}
#bottleneck .bt20-cyc li{min-width:0;padding:.7rem .85rem;background:#fff;border:1px solid var(--line);border-left:5px solid var(--blue);border-radius:.6rem}
#bottleneck .bt20-cyc li:first-child{border-left-color:var(--amber)}
#bottleneck .bt20-cyc li:last-child{border-left-color:var(--teal)}
#bottleneck .bt20-cyc b{display:block;margin-bottom:.25rem}
#bottleneck .bt20-cyc span{display:block;color:var(--muted);font-size:.9rem}
#bottleneck .bt20-cyc em{display:block;margin-top:.4rem;padding-top:.4rem;border-top:1px solid var(--line);font-size:.9rem;font-style:normal;font-weight:600}
#bottleneck .bt20-again{margin-top:1rem;padding:.6rem .9rem;background:#fff;border:2px solid var(--blue);border-radius:.5rem;font-weight:700}

@media (min-width:760px){
#bottleneck .bt20-flow{grid-template-columns:repeat(4,minmax(0,1fr));gap:1.6rem}
#bottleneck .bt20-d{grid-template-columns:minmax(0,1fr);grid-template-areas:"h" "v" "s";align-content:start;gap:.4rem}
#bottleneck .bt20-d:not(:last-child)::after{left:100%;top:3.6rem;width:1.6rem;height:0;border:0;border-top:5px solid var(--teal)}
#bottleneck .bt20-ok:not(:last-child)::after{border-top-color:var(--blue)}
#bottleneck .bt20-hold:not(:last-child)::after,#bottleneck .bt20-idle:not(:last-child)::after,#bottleneck .bt20-room:not(:last-child)::after{border:0;border-top:2px dashed #7d8da3}
#bottleneck .bt20-loop .bt20-body{padding-left:0}
#bottleneck .bt20-back{position:relative;margin:1rem 12% 0;padding:.55rem 1rem;background:none;border:3px solid var(--blue);border-top:0;border-radius:0 0 .9rem .9rem;text-align:center}
#bottleneck .bt20-back::before{left:-6px;top:-8px;bottom:auto;width:0;height:0;border:7.5px solid transparent;border-bottom-color:var(--blue);border-top:0;border-radius:0}
#bottleneck .bt20-back::after{display:none}
#bottleneck .bt20-hand{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) minmax(0,1fr)}
#bottleneck .bt20-hand>div+div::before{left:-1.4rem;top:50%;width:1.4rem;height:0;border-left:0;border-top:4px solid var(--teal)}
#bottleneck .bt20-cyc{grid-template-columns:repeat(5,minmax(0,1fr))}
}
@media (min-width:1024px){
#bottleneck .bt20-snap{grid-template-columns:14rem minmax(0,1fr);grid-template-rows:auto auto 1fr;grid-template-areas:"h b" "c b" "o b";column-gap:1.4rem;align-items:start}
#bottleneck .bt20-sh{grid-area:h}
#bottleneck .bt20-body{grid-area:b}
#bottleneck .bt20-cap{grid-area:c}
#bottleneck .bt20-act{grid-area:o}
}
@media print{
#bottleneck .bt20-snap,#bottleneck .bt20-hand>div,#bottleneck .bt20-cyc li{break-inside:avoid}
#bottleneck .bt20-act{display:none}
}

/* Four department controls stay readable on narrow screens. */
@media (max-width:759px){
#bottleneck .rd-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
#bottleneck .rd-tabs button{overflow-wrap:normal;word-break:normal}
}