/* Premium Sort It! — tactile two-method / four-destination comparison.
   Semantic text labels always supplement the muted green / amber distinction. */
.sort-page{--sort-forest:#135a52;--sort-deep:#173f49;--sort-soft:#ecf6f0;--sort-gold:#a66524}
.sort-page .sort-pair-settings{display:flex;align-items:center;flex-wrap:wrap;gap:12px 22px}
.sort-page .sort-pair-setting{display:flex;flex-direction:column;gap:8px;flex:1 1 270px;min-width:0}
.sort-page #sort-set{width:100%;max-width:420px}
.sort-page .sort-setting-note{margin:0;color:#536f65;font-size:.8rem;max-width:420px;line-height:1.55}
.sort-page .sort-progress-row{display:flex;align-items:center;gap:15px;margin:18px 0 10px}
.sort-page .sort-progress-row .round-progress{flex:1;min-width:0;margin:0}
.sort-page .sort-progress-count{white-space:nowrap;border:1px solid #c3dacd;background:#eff8f1;color:#285b4a;border-radius:11px;padding:8px 12px;font-size:.78rem;font-weight:800;font-variant-numeric:tabular-nums}
.sort-page .sort-selection-bar{position:sticky;top:8px;z-index:11;display:flex;align-items:center;gap:10px;flex-wrap:wrap;border:1px solid #9bbcaf;border-radius:15px;background:#f0f8f3;padding:12px 15px;margin:14px 0;box-shadow:0 4px 13px rgba(15,55,48,.075)}
.sort-page .sort-selection-bar:has(.sort-selection-label:first-child){min-width:0}
.sort-page .sort-selection-copy{flex:1 1 290px;min-width:0}
.sort-page .sort-selection-label{display:block;font-size:.65rem;letter-spacing:.1em;font-weight:850;color:#235d4a}
.sort-page .sort-selection-message{margin:3px 0 0;color:#23463b;font-size:.84rem;line-height:1.5;overflow-wrap:anywhere}
.sort-page .sort-selection-bar:has([data-action="sort-deselect"]){background:#164f4c;border-color:#164f4c;box-shadow:0 7px 20px rgba(10,54,47,.2)}
.sort-page .sort-selection-bar:has([data-action="sort-deselect"]) .sort-selection-label{color:#aee6ca}
.sort-page .sort-selection-bar:has([data-action="sort-deselect"]) .sort-selection-message{color:#fff}
.sort-page .sort-selection-bar .btn{font-size:.75rem;min-height:42px;padding:8px 12px}
.sort-page .sort-workspace{display:grid;grid-template-columns:minmax(240px,.30fr) minmax(0,.70fr);gap:17px;align-items:start}
.sort-page .sort-tray,.sort-page .sort-board{min-width:0;border:1px solid #bad4c5;background:white;border-radius:19px;box-shadow:0 5px 18px rgba(20,60,49,.05)}
.sort-page .sort-tray{position:sticky;top:16px;padding:19px;max-height:calc(100vh - 35px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:#9ab9a7 transparent}
.sort-page .sort-tray-header,.sort-page .sort-board-heading{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:9px}
.sort-page .sort-tray-titlegroup,.sort-page .sort-board-titlegroup{min-width:0}
.sort-page .sort-tray-eyebrow,.sort-page .sort-board-eyebrow,.sort-page .sort-method-eyebrow{display:block;font-size:.63rem;font-weight:880;letter-spacing:.12em;color:#2d795b}
.sort-page .sort-tray-title,.sort-page .sort-board-title{font-size:clamp(1.2rem,2.5vw,1.44rem);letter-spacing:-.04em;line-height:1.28;margin:5px 0 0;color:#183c3e}
.sort-page .sort-tray-count{color:#215d4e;background:#e1f0e7;border-radius:10px;padding:6px 9px;font-size:.71rem;font-weight:790;white-space:nowrap}
.sort-page .sort-tray-hint,.sort-page .sort-board-subtitle{font-size:.77rem;color:#516d61;line-height:1.55;margin:12px 0 15px}
.sort-page .sort-tray-grid{display:grid;grid-template-columns:1fr;gap:9px;min-width:0}
.sort-page .sort-tray-empty{background:#edf8f0;border:1px dashed #80b49b;color:#315f4a;padding:20px 14px;border-radius:13px;font-size:.83rem;line-height:1.6;margin:0}
.sort-page .sort-card{position:relative;display:flex;align-items:flex-start;gap:9px;width:100%;text-align:left;border-radius:13px;border:1px solid #bad2c5;background:#fff;color:#234941;min-height:61px;padding:13px 12px;line-height:1.47;box-shadow:0 3px 0 rgba(17,60,48,.06);font-size:.8rem;font-weight:680;overflow-wrap:anywhere;transition:transform .17s,border-color .17s,box-shadow .17s,background .17s;animation:sort-enter .24s ease both;cursor:grab;touch-action:pan-y}
.sort-page .sort-card:hover:not(:disabled){border-color:#31846c;background:#f3faf5;transform:translateY(-1px)}
.sort-page .sort-card:active:not(:disabled){cursor:grabbing}
.sort-page .sort-card:focus-visible,.sort-page .sort-drop-button:focus-visible{outline:3px solid #b47719;outline-offset:2px}
.sort-page .sort-card.is-selected{border-color:#236e5c;background:#d9f2e5;box-shadow:inset 0 0 0 2px #237a60,0 5px 14px rgba(24,84,62,.14);color:#174e3d}
.sort-page .sort-card.is-dragging{opacity:.5}
.sort-page .sort-grab{flex:0 0 21px;display:grid;place-items:center;min-width:21px;height:25px;border-radius:6px;background:#e9f2ec;color:#3c7b67;font-size:1.12rem;font-weight:800;line-height:1;touch-action:none;user-select:none}
.sort-page .sort-card-text{flex:1;min-width:0}
.sort-page .sort-card-result{color:#155e47;font-size:1.1rem;font-weight:900}
.sort-page .sort-card.is-incorrect{border-color:#d49b65;background:#fff9ef;box-shadow:inset 0 0 0 1px #d2a477}
.sort-page .sort-card.is-incorrect .sort-card-result{color:#945d21}
.sort-page .sort-card.is-correct{border-color:#6eb298;background:#ebf8ef}
.sort-page .sort-card-solution,.sort-page .sort-card-explanation{width:100%;flex-basis:100%;display:block;margin-top:4px;font-size:.75rem;color:#38644f;line-height:1.55}
.sort-page .sort-card-solution{font-weight:820;color:#174f41}
.sort-page .sort-board{padding:18px}
.sort-page .sort-board-heading{margin-bottom:14px}
.sort-page .sort-board-subtitle{margin:0;max-width:245px}
.sort-page .sort-method-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.sort-page .sort-method{min-width:0;overflow:hidden;border:1px solid #c0d6c9;border-radius:17px;background:#f5f9f6}
.sort-page .sort-method-header{padding:14px 14px 12px;background:linear-gradient(125deg,#164b50,#236b5a);color:#fff}
.sort-page .sort-method:nth-child(2) .sort-method-header{background:linear-gradient(125deg,#294c65,#3e6e72)}
.sort-page .sort-method-eyebrow{color:#afdcca}
.sort-page .sort-method-title{font-size:clamp(.96rem,1.7vw,1.22rem);color:#fff;line-height:1.25;letter-spacing:-.025em;margin:5px 0 4px}
.sort-page .sort-method-count{display:block;font-size:.68rem;font-weight:750;color:#d7eee2}
.sort-page .sort-method-bins{display:grid;grid-template-columns:1fr;gap:10px;padding:10px}
.sort-page .sort-drop-zone{position:relative;min-width:0;border:1px solid #c7dccc;border-radius:13px;background:#fafffb;padding:10px;transition:border-color .14s,background-color .14s,box-shadow .14s;min-height:123px}
.sort-page .sort-drop-zone.is-disadvantage{border-color:#e0c4a1;background:#fffdfa}
.sort-page .sort-zone-head{display:flex;justify-content:space-between;gap:8px;align-items:center;margin-bottom:8px}
.sort-page .sort-zone-name{font-size:.83rem;font-weight:860;margin:0;color:#225c45}
.sort-page .sort-drop-zone.is-disadvantage .sort-zone-name{color:#81511d}
.sort-page .sort-zone-count{font-size:.72rem;font-weight:850;color:#37684e;background:#e3f3e9;min-width:24px;padding:3px 6px;text-align:center;border-radius:8px}
.sort-page .sort-drop-zone.is-disadvantage .sort-zone-count{color:#81511d;background:#fff0d9}
.sort-page .sort-drop-button{display:flex;align-items:center;justify-content:center;min-height:50px;width:100%;border:1px dashed #8bb9a3;color:#326b55;background:#eff9f2;border-radius:9px;padding:8px 10px;line-height:1.45;font-size:.73rem;font-weight:730;text-align:center}
.sort-page .is-disadvantage .sort-drop-button{border-color:#cfa878;background:#fff6e9;color:#815426}
.sort-page .has-selection .sort-drop-button{border-style:solid;border-width:2px;box-shadow:0 2px 6px rgba(30,89,61,.065)}
.sort-page .sort-drop-zone.is-drop-over,.sort-page .sort-tray.is-drop-over{background:#dbf3e6;border-color:#318467;box-shadow:inset 0 0 0 2px #34836a}
.sort-page .sort-drop-zone.is-drop-over .sort-drop-button{background:#d0eddd;border-color:#2e795f}
.sort-page .sort-zone-cards{display:grid;gap:7px;margin-top:9px}
.sort-page .sort-zone-cards:empty{display:none}
.sort-page .sort-zone-cards .sort-card{min-height:54px;padding:10px 9px;font-size:.75rem;box-shadow:0 2px 0 rgba(29,81,61,.04)}
.sort-page .sort-board-feedback{margin:17px 0 0}
.sort-page .sort-board-actions{position:sticky;bottom:0;z-index:8;display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:9px;padding:13px 14px;background:rgba(250,253,250,.98);border:1px solid #c0d7c8;border-radius:14px;margin-top:15px;box-shadow:0 -5px 17px rgba(14,59,47,.075)}
.sort-page .sort-board-actions .btn{min-height:46px}
.sort-page .sort-check-button:disabled{background:#dae3de;border-color:#c8d4cb;color:#60776a;opacity:1}
.sort-page .sort-scoring-note{font-size:.78rem;color:#4d695c;line-height:1.55;margin:10px 4px}
.sort-drag-ghost{position:fixed;z-index:9999;pointer-events:none;max-width:min(270px,72vw);min-width:140px;padding:12px 14px;background:#164f47;border:2px solid #79c3a6;border-radius:13px;box-shadow:0 15px 35px rgba(7,50,39,.25);color:#fff;font-size:.82rem;font-weight:700;line-height:1.45;transform:rotate(-2deg)}
@keyframes sort-enter{from{opacity:.67;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
 @media(max-width:1030px){
 .sort-page .sort-workspace{grid-template-columns:minmax(210px,.35fr) minmax(0,.65fr)}
 .sort-page .sort-method-grid{grid-template-columns:1fr}
 .sort-page .sort-method-bins{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
 .sort-page .sort-workspace{grid-template-columns:1fr}
 .sort-page .sort-tray{position:static;max-height:clamp(265px,43vh,390px);overflow-y:auto}
 .sort-page .sort-tray-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .sort-page .sort-method-grid{grid-template-columns:1fr}
 .sort-page .sort-selection-bar{top:4px}
}
@media(max-width:580px){
 .sort-page .sort-pair-settings{align-items:stretch;flex-direction:column}
 .sort-page .sort-pair-setting,.sort-page #sort-set{width:100%;max-width:100%;flex-basis:auto}
 .sort-page .sort-tray-grid{grid-template-columns:1fr}
 .sort-page .sort-method-bins{grid-template-columns:1fr}
 .sort-page .sort-progress-row{gap:8px}
 .sort-page .sort-progress-count{font-size:.7rem;padding:7px 8px}
 .sort-page .sort-tray,.sort-page .sort-board{padding:13px}
 .sort-page .sort-board-actions .btn{flex:1 1 auto}
 .sort-page .sort-selection-bar{padding:11px}
 .sort-page .sort-selection-bar .btn{flex:1 1 120px}
}
@media(prefers-reduced-motion:reduce){
 .sort-page .sort-card{animation:none!important;transition:none!important;transform:none!important}
 .sort-page .sort-drop-zone{transition:none!important}
 .sort-drag-ghost{transform:none!important}
}
@media print{
 .sort-page .sort-tray{position:static;max-height:none;overflow:visible}
 .sort-page .sort-board-actions,.sort-page .sort-drop-button{display:none!important}
 .sort-page .sort-selection-bar{position:static}
 .sort-page .sort-card,.sort-page .sort-method{break-inside:avoid;animation:none}
}