/* InFLOW routing scene, sorting restore (2026-10-18). Loaded after inflow-routing.css.
   Every named output stays visible: disordered pile → under each check → settled in its lane deck. */

/* Travelling items: compact, readable chips. The explained examples travel the same way, then open on landing. */
.has-motion #asymmetry .asym-art.is-sorting .asym-slips li:not(.is-routed){width:auto;max-width:27%;min-height:0!important;padding:6px 10px;font:500 13px/1.25 Jost,Arial,sans-serif;color:var(--ink);background:#fff;border:1px solid rgba(130,113,78,.38);border-radius:7px;box-shadow:0 6px 14px -12px rgba(4,0,30,.45);white-space:normal}
.development-page #asymmetry .asym-art.is-sorting .asym-slips li[data-route-example]:not(.is-routed){width:auto!important;max-width:27%!important;min-height:0!important;padding:6px 10px}
.development-page #asymmetry .asym-art.is-sorting .asym-slips li:not(.is-routed) .slip-stamps{display:none!important}
#asymmetry .asym-art.is-sorting .asym-slips li:not(.is-routed) .slip-title{font:inherit}

/* Under a check: the item is being read, so it gets the check's highlight. */
.has-motion #asymmetry .asym-art.is-sorting .asym-slips li.is-checking{border-color:#82714e;background:#fbffe9;box-shadow:0 0 0 2px rgba(200,255,124,.75),0 8px 16px -12px rgba(4,0,30,.5)}

/* Landed items stay visible in their lane deck, marked with the lane's colour. */
html.has-motion #asymmetry .asym-art.is-sorting .asym-slips li.is-routed:not([data-route-example]){opacity:1!important;width:150px;max-width:150px;padding:5px 9px 5px 22px;font:500 12.5px/1.2 Jost,Arial,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:#fff;border:1px solid rgba(130,113,78,.4);border-radius:6px;box-shadow:0 3px 8px -6px rgba(4,0,30,.5)}
#asymmetry .asym-art.is-sorting .asym-slips li.is-routed[data-lane="0"]:not([data-route-example])::before{background:var(--signal);box-shadow:0 0 0 1px var(--ink)}
#asymmetry .asym-art.is-sorting .asym-slips li.is-routed[data-lane="1"]:not([data-route-example]){background:#fff7e0;border-color:var(--champagne)}
#asymmetry .asym-art.is-sorting .asym-slips li.is-routed[data-lane="1"]:not([data-route-example])::before{background:var(--champagne)}
html.has-motion #asymmetry .asym-art.is-sorting .asym-slips li.is-routed[data-lane="2"]:not([data-route-example]){background:#efede6;color:#8a8170}
#asymmetry .asym-art.is-sorting .asym-slips li.is-routed[data-lane="2"]:not([data-route-example])::before{background:#b9ae9c}

/* The explained example opens on top of its deck, with its check marks. */
.has-motion #asymmetry .asym-art.is-sorting .asym-slips li[data-route-example].is-routed{width:168px!important;max-width:168px!important;min-height:0!important}

/* Lane counts: thirty in, three reach the person. */
#asymmetry .lane-count{display:inline-block;min-width:22px;margin-left:8px;padding:1px 7px;border-radius:11px;background:var(--ink);color:var(--signal);font:600 12px/1.4 Jost,Arial,sans-serif;text-align:center;vertical-align:1px}
#asymmetry .lane-count:empty{display:none}
#asymmetry .lane.is-human .lane-count{color:var(--champagne)}

/* Final beat: owned and held work recede so the human decision stands out. */
html.has-motion #asymmetry .asym-art.is-decided .asym-slips li.is-routed[data-lane="0"]:not([data-route-example]){color:rgba(4,0,30,.45);background:#f7f6f1}
html.has-motion #asymmetry .asym-art.is-decided .asym-slips li.is-routed[data-lane="2"]:not([data-route-example]){color:rgba(4,0,30,.3)}
#asymmetry .asym-art.is-decided .lane.is-human{box-shadow:0 0 0 3px var(--champagne)}

@media(max-width:600px){
  .has-motion #asymmetry .asym-art.is-sorting .asym-slips li:not(.is-routed){max-width:31%;padding:4px 7px;font-size:12.5px;line-height:1.15}
  html.has-motion #asymmetry .asym-art.is-sorting .asym-slips li.is-absorbed,html.has-motion #asymmetry .asym-art.is-sorting .asym-slips li.is-routed.is-absorbed:not([data-route-example]){opacity:0!important}
  .development-page #asymmetry .asym-art.is-sorting .asym-slips li[data-route-example]:not(.is-routed){max-width:31%!important;padding:5px 7px}
  html.has-motion #asymmetry .asym-art.is-sorting .asym-slips li.is-routed:not([data-route-example]){width:96px;max-width:96px;font-size:11.5px;padding:4px 6px 4px 18px}
  #asymmetry .asym-art.is-sorting .asym-slips li.is-routed:not([data-route-example])::before{left:7px}
  .has-motion #asymmetry .asym-art.is-sorting .asym-slips li[data-route-example].is-routed{width:104px!important;max-width:104px!important}
  #asymmetry .lane-count{margin-left:4px;padding:0 6px;font-size:11.5px}
}

/* Reduced motion: the finished sort, one column per lane under its own heading. */
.is-static #asymmetry .asym-gates{display:none}
.is-static #asymmetry .asym-lanes{position:static;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:22px 0 12px}
.is-static #asymmetry .asym-lanes .lane{position:static;inset:auto;width:auto;max-width:none;min-height:0!important;opacity:1}
.is-static #asymmetry .asym-slips{grid-template-columns:repeat(3,minmax(0,1fr))!important;grid-auto-flow:row dense;gap:8px 12px}
.is-static #asymmetry .asym-slips li{grid-column:1;min-height:0!important;padding:7px 10px 7px 24px}
.is-static #asymmetry .asym-slips li[data-lane="1"]{grid-column:2}
.is-static #asymmetry .asym-slips li[data-lane="2"]{grid-column:3;opacity:.7}
.is-static #asymmetry .asym-slips li[data-route-example]{grid-column:auto;padding:7px 10px}
.is-static #asymmetry .asym-slips li[data-route-example][data-lane="0"]{grid-column:1}
.is-static #asymmetry .asym-slips li[data-route-example][data-lane="1"]{grid-column:2}
.is-static #asymmetry .asym-slips li[data-route-example][data-lane="2"]{grid-column:3;opacity:1}
@media(max-width:600px){.is-static #asymmetry .asym-lanes,.is-static #asymmetry .asym-slips{gap:6px}.is-static #asymmetry .asym-slips li{font-size:13px;padding:6px 6px 6px 18px}.is-static #asymmetry .asym-slips li::before{left:6px}}