/* Tossed & Topped branch route rail */
.branch-route-shell{position:relative;margin:0 0 18px;padding:16px 18px 12px;border:2px solid rgba(33,21,18,.16);border-radius:24px 24px 12px 12px;background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,241,216,.72));box-shadow:0 10px 28px rgba(65,32,15,.08);overflow:visible}
.branch-route-top{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:10px}
.branch-route-top>span:first-child{display:flex;align-items:baseline;gap:9px}
.branch-route-top b{font-size:9px;letter-spacing:.15em}
.branch-route-top small{color:var(--m2);font-size:10px;font-weight:700}
#branchRouteStatus{color:var(--m);font-size:10px;font-weight:900}
.branch-route{display:grid;grid-template-columns:38px minmax(0,1fr) 38px;gap:8px;align-items:center}
.branch-route-track{position:relative;display:flex;align-items:flex-start;gap:0;width:100%;margin:0!important;padding:9px 7px 14px!important;overflow-x:auto;overflow-y:visible;scroll-snap-type:x proximity;scrollbar-width:none;-ms-overflow-style:none;isolation:isolate;mask-image:linear-gradient(90deg,transparent 0,#000 18px,#000 calc(100% - 18px),transparent 100%)}
.branch-route-track::-webkit-scrollbar{display:none}
.branch-route-track:before{content:"";position:absolute;z-index:-1;left:34px;right:34px;top:22px;height:3px;border-radius:999px;background:repeating-linear-gradient(90deg,var(--d) 0 9px,transparent 9px 15px);opacity:.28}
.branch-route-track .tab{position:relative;flex:0 0 auto;display:grid;justify-items:center;gap:8px;min-width:92px;padding:0 8px 4px;border:0;border-radius:0;background:transparent;color:var(--d);box-shadow:none;scroll-snap-align:center;transition:transform .18s ease,color .18s ease}
.branch-route-track .tab:hover{transform:translateY(-2px);color:var(--m)}
.branch-route-dot{position:relative;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--c);border:3px solid var(--d);box-shadow:0 0 0 4px rgba(255,241,216,.92);transition:.2s ease}
.branch-route-dot i{width:7px;height:7px!important;margin:0!important;border:0!important;border-radius:50%!important;background:var(--m)!important;box-shadow:none!important}
.branch-route-name{max-width:110px;font-size:11px;font-weight:900;line-height:1.08;text-align:center;white-space:nowrap}
.branch-route-track .tab.active{z-index:3;color:var(--m);background:transparent}
.branch-route-track .tab.active .branch-route-dot{width:38px;height:38px;margin-top:-5px;border-color:var(--d);background:var(--y);box-shadow:0 0 0 4px var(--c),0 0 0 7px var(--y),0 8px 16px rgba(126,30,29,.18)}
.branch-route-track .tab.active .branch-route-dot i{width:14px;height:14px!important;background:var(--m)!important;clip-path:polygon(50% 100%,8% 28%,8% 18%,15% 8%,26% 2%,74% 2%,85% 8%,92% 18%,92% 28%);border-radius:7px 7px 10px 10px!important}
.branch-route-track .tab.active .branch-route-name{display:inline-flex;align-items:center;min-height:28px;padding:6px 10px;border-radius:999px;background:var(--m);color:var(--c);box-shadow:0 4px 0 var(--d)}
.branch-route-track .tab.active:after{content:"";position:absolute;left:50%;top:67px;width:2px;height:24px;background:linear-gradient(var(--y),var(--m));transform:translateX(-50%);opacity:.7}
.branch-route-nav{display:grid;place-items:center;width:38px;height:38px;padding:0;border:2px solid var(--d);border-radius:50%;background:var(--c);color:var(--d);font-size:24px;font-weight:900;line-height:1;box-shadow:0 4px 0 rgba(33,21,18,.18);transition:.16s ease}
.branch-route-nav:hover:not(:disabled){transform:translateY(-2px);background:var(--y)}
.branch-route-nav:disabled{opacity:.28;cursor:default;box-shadow:none}
.branch-route-shell+.branch-box{position:relative;margin-top:0}
@media(max-width:820px){
 .branch-route-shell{margin-inline:-2px;padding:13px 12px 9px;border-radius:20px}
 .branch-route-top{margin-bottom:6px}
 .branch-route-top>span:first-child small{display:none}
 .branch-route{display:block}
 .branch-route-nav{display:none}
 .branch-route-track{margin-inline:-4px!important;width:calc(100% + 8px);padding-inline:12px!important;mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 12px),transparent 100%)}
 .branch-route-track .tab{min-width:82px;padding-inline:6px}
 .branch-route-name{font-size:10px}
}
@media(max-width:600px){
 .branch-route-top{align-items:flex-start}
 #branchRouteStatus{max-width:120px;text-align:right;line-height:1.2}
 .branch-route-track .tab.active:after{display:none}
}

/* Branch interaction hit-area hardening */
.branch-route-track:before,
.branch-route-track .tab:after,
.branch-route-dot,
.branch-route-dot *,
.branch-route-name{
  pointer-events:none!important;
}
.branch-route-track .tab,
#pins .pin{
  pointer-events:auto!important;
  cursor:pointer!important;
}
.branch-route-track .tab:focus-visible{
  outline:3px solid var(--y)!important;
  outline-offset:4px!important;
}