/* How we think · the tube demo. */
.demo-tube{--tube-order:#49a7ff;--tube-fulfil:#58bd79;--tube-invoice:#b890ff;--tube-except:#a7b0b8;--tube-station:var(--paper);--tube-ring:var(--ink);color:var(--paper);font-family:var(--sans)}
:root[data-theme="light"] .demo-tube{--tube-order:#0067b9;--tube-fulfil:#16763a;--tube-invoice:#6f3caf;--tube-except:#5d6670;--tube-station:var(--ink);--tube-ring:var(--paper)}
.demo-tube *{box-sizing:border-box}
.demo-tube__root{border:1px solid var(--line);background:var(--ink-1);padding:20px;overflow:hidden;max-width:100%;isolation:isolate}
.demo-tube__tools{display:flex;align-items:end;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.demo-tube__search{display:grid;grid-template-columns:minmax(130px,210px) auto;gap:8px;align-items:end;margin-right:auto;max-width:100%}
.demo-tube__search-label{grid-column:1/-1;display:block;color:var(--paper-dim);font:400 12px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.08em}
.demo-tube__input{width:100%;min-height:42px;border:1px solid var(--line);border-radius:0;background:var(--ink);color:var(--paper);padding:9px 11px;font:16px/1.3 var(--mono);appearance:none;caret-color:var(--signal)}
.demo-tube__input::placeholder{color:var(--paper-faint)}
.demo-tube__button{min-height:42px;border:1px solid var(--line);border-radius:0;background:transparent;color:var(--paper);padding:8px 13px;font:700 13px/1 var(--sans);cursor:pointer;white-space:nowrap;appearance:none}
.demo-tube__button--solid{background:var(--signal);border-color:var(--signal);color:var(--ink-on-sig)}
.demo-tube__button:hover{border-color:var(--signal)}
.demo-tube__button--solid:hover{background:var(--signal-text)}
.demo-tube__input:focus-visible,.demo-tube__button:focus-visible,.demo-tube__station:focus-visible,.demo-tube__line-hit:focus-visible,.demo-tube__viewport:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.demo-tube__live{min-height:20px;margin:0 0 8px;color:var(--signal-text);font:13px/1.4 var(--mono);overflow-wrap:anywhere}
.demo-tube__live:empty::before{content:"\00a0"}
.demo-tube__layout{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:18px;align-items:start;min-width:0}
.demo-tube__viewport{max-width:100%;min-width:0;overflow-x:auto;overflow-y:hidden;border:1px solid var(--line-soft);background:var(--ink);overscroll-behavior-x:contain;scrollbar-color:var(--line) var(--ink-1);scrollbar-width:thin}
.demo-tube__map{position:relative;width:820px;min-width:820px;height:500px;background:var(--ink);isolation:isolate}
.demo-tube__map svg{position:absolute;inset:0;display:block;width:100%;height:500px;overflow:visible}
.demo-tube__zone{stroke:none;opacity:.68}
.demo-tube__zone--a{fill:var(--ink-1)}
.demo-tube__zone--b{fill:var(--ink-2)}
.demo-tube__zone--c{fill:var(--ink-3)}
.demo-tube__zone-name{fill:var(--paper-dim);font:700 14px var(--display);letter-spacing:.1em;text-transform:uppercase}
.demo-tube__track{fill:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;transition:opacity .18s,stroke-width .18s;pointer-events:none}
.demo-tube__track--order{stroke:var(--tube-order)}
.demo-tube__track--fulfil{stroke:var(--tube-fulfil)}
.demo-tube__track--invoice{stroke:var(--tube-invoice)}
.demo-tube__track--except{stroke:var(--tube-except)}
.demo-tube__arrow{pointer-events:none;transition:opacity .18s}
.demo-tube__arrow--order{fill:var(--tube-order)}
.demo-tube__arrow--fulfil{fill:var(--tube-fulfil)}
.demo-tube__arrow--invoice{fill:var(--tube-invoice)}
.demo-tube__arrow--except{fill:var(--tube-except)}
.demo-tube__line-hit{position:absolute;z-index:2;height:40px;min-height:40px;border:0;background:transparent;padding:0;transform-origin:0 50%;cursor:pointer;color:transparent;font-size:0;appearance:none}
.demo-tube__line-hit:hover,.demo-tube__line-hit:focus-visible{background:color-mix(in srgb,var(--signal) 18%,transparent)}
.demo-tube__station{position:absolute;z-index:5;width:44px;min-width:44px;height:44px;min-height:44px;border:0;border-radius:50%;background:transparent;padding:9px;cursor:pointer;appearance:none}
.demo-tube__station::before{content:"";display:block;width:26px;height:26px;border:5px solid var(--tube-ring);border-radius:50%;background:var(--tube-station);box-shadow:0 0 0 1px var(--tube-station);transition:background .16s,box-shadow .16s,border-color .16s}
.demo-tube__station--needs::before{border-color:var(--neg);box-shadow:0 0 0 2px var(--tube-station)}
.demo-tube__station:hover::before,.demo-tube__station.demo-tube__selected::before{background:var(--signal);border-color:var(--paper);box-shadow:0 0 0 3px var(--signal)}
.demo-tube__station-label{position:absolute;z-index:4;max-width:105px;color:var(--paper);font:700 12px/16px var(--mono);white-space:nowrap;pointer-events:none;transition:opacity .18s;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.demo-tube__dim{opacity:.14}
.demo-tube__station.demo-tube__dim,.demo-tube__station-label.demo-tube__dim{opacity:.14}
.demo-tube__track.demo-tube__dim{opacity:.1}
.demo-tube__arrow.demo-tube__dim{opacity:.1}
.demo-tube__track.demo-tube__selected{opacity:1;stroke-width:14}
.demo-tube__panel{min-height:500px;max-height:500px;border-top:3px solid var(--signal);border-bottom:1px solid var(--line-soft);background:var(--ink);padding:18px;overflow:auto;overscroll-behavior:contain;scrollbar-color:var(--line) var(--ink-1);scrollbar-width:thin}
.demo-tube__panel-title{margin:0 0 8px;color:var(--paper);font:700 28px/1 var(--display);text-transform:uppercase;letter-spacing:.02em;overflow-wrap:anywhere}
.demo-tube__panel-text{min-height:42px;margin:0 0 18px;color:var(--paper-dim);font:14px/1.5 var(--sans);overflow-wrap:anywhere}
.demo-tube__panel-body{display:grid;gap:8px;align-content:start;min-width:0;color:var(--paper)}
.demo-tube__order{position:relative;border-top:1px solid var(--line-soft);padding:9px 0 2px;font:13px/1.4 var(--sans)}
.demo-tube__order:first-child,.demo-tube__line-row:first-child{border-top:0}
.demo-tube__order--found{margin:0 -8px;padding:9px 8px 4px;background:var(--signal-dim);border-color:var(--signal);outline:1px solid var(--signal);outline-offset:-1px}
.demo-tube__order-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-family:var(--mono);font-variant-numeric:tabular-nums}
.demo-tube__order-top span{color:var(--paper-faint)}
.demo-tube__customer{color:var(--paper-dim);overflow-wrap:anywhere}
.demo-tube__needs{margin-top:4px;color:var(--neg);font-weight:800}
.demo-tube__needs::before{content:"• "}
.demo-tube__empty{color:var(--paper-faint)}
.demo-tube__line-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;border-top:1px solid var(--line-soft);padding:9px 0;font:13px/1.4 var(--mono);font-variant-numeric:tabular-nums}
.demo-tube__line-row span{color:var(--paper-dim)}
.demo-tube__line-row strong{color:var(--signal-text)}
.demo-tube__pulse::before{animation:tube-pulse .8s ease-out}
.demo-tube__button,.demo-tube__station,.demo-tube__line-hit{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.demo-tube__viewport::-webkit-scrollbar,.demo-tube__panel::-webkit-scrollbar{height:9px;width:9px}
.demo-tube__viewport::-webkit-scrollbar-thumb,.demo-tube__panel::-webkit-scrollbar-thumb{background:var(--line)}
.demo-tube__viewport::-webkit-scrollbar-track,.demo-tube__panel::-webkit-scrollbar-track{background:var(--ink-1)}
@keyframes tube-pulse{0%{box-shadow:0 0 0 3px var(--signal)}100%{box-shadow:0 0 0 16px transparent}}
@media(max-width:960px){.demo-tube__layout{grid-template-columns:1fr}.demo-tube__panel{min-height:0;max-height:none}.demo-tube__map{width:820px}}
@media(max-width:639px){.demo-tube__root{padding:12px}.demo-tube__tools{align-items:stretch}.demo-tube__search{grid-template-columns:minmax(0,1fr) auto;width:100%;margin:0}.demo-tube__button{flex:1}.demo-tube__layout{gap:12px}.demo-tube__panel-title{font-size:24px}.demo-tube__panel{padding:15px}.demo-tube__viewport{width:100%}}
@media(prefers-reduced-motion:reduce){.demo-tube__pulse::before{animation:none}.demo-tube__track,.demo-tube__arrow,.demo-tube__station::before,.demo-tube__station-label,.demo-tube__button{transition:none}}
.demo-tube .demo-tube__arrow{fill:var(--ink)}