.sorter-root { display: grid; gap: var(--s4); }
.sorter-root .w-note { margin: var(--s3) 0 0; font-size: var(--fs-small); line-height: 1.5; }
.sorter-root .sorter-top { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--s3); }
.sorter-root .sorter-count { font: 700 var(--fs-small)/1.2 var(--font-ui); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sorter-root .sorter-tray { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); min-height: var(--tap); }
.sorter-root .sorter-chip { position: relative; max-width: 100%; white-space: normal; text-align: left; }
.sorter-root .sorter-chip.sorter-lift { z-index: 5; border-color: var(--brand); outline: 1px solid var(--brand); cursor: grabbing; }
/* feedback: plain text; after an answer, a rule on the left (green right, red wrong), no panel */
.sorter-root .sorter-fb { margin: 0; min-height: 3em; border-left: 2px solid transparent; font: 400 var(--fs-ui)/1.45 var(--font-ui); color: var(--ink); overflow-wrap: anywhere; }
.sorter-root .sorter-fb[data-tone] { padding: 2px 0 2px var(--s3); }
.sorter-root .sorter-fb[data-tone="up"] { border-left-color: var(--up); }
.sorter-root .sorter-fb[data-tone="down"] { border-left-color: var(--down); }
.sorter-root .sorter-bins { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 7rem), 1fr)); }
.sorter-root .sorter-bin { display: grid; align-content: start; gap: var(--s2); cursor: pointer; transition: border-color .15s, background-color .15s; }
.sorter-root .sorter-bin.sorter-over { border-style: solid; border-color: var(--brand); background: var(--brand-wash); }
.sorter-root .sorter-bin-btn { appearance: none; min-height: var(--tap); padding: 6px 8px; border: 0; border-radius: var(--r-sm); background: none; color: var(--ink); font: 700 var(--fs-small)/1.25 var(--font-ui); text-align: center; cursor: pointer; overflow-wrap: anywhere; }
.sorter-root .sorter-bin-btn:focus-visible { outline: none; box-shadow: var(--focus); }
.sorter-root .sorter-list { display: flex; flex-wrap: wrap; gap: 6px; }
.sorter-root .sorter-placed { display: inline-flex; align-items: center; max-width: 100%; min-height: 32px; padding: 4px 10px; border: 1px solid var(--up); border-radius: var(--r-sm); background: var(--up-wash); color: var(--ink); font: 400 var(--fs-small)/1.25 var(--font-ui); overflow-wrap: anywhere; }
.sorter-root .sorter-done { margin: 0; font: 700 var(--fs-ui)/1.3 var(--font-ui); }
/* long sentences: one box per row on phones, so placed items stay readable */
@media (max-width: 40rem) { .sorter-root .sorter-bins.sorter-long { grid-template-columns: 1fr; } .sorter-root .sorter-long .sorter-bin { min-height: 88px; } }