/* Ordering exercises: chunky step cards you drag (grip on phones) or move with the arrows. */
.order,.order-list{max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.ord-intro{margin:0;color:#4C5560;font-size:15px}
.rot-left{rotate:-90deg}.rot-right{rotate:-90deg}
.ord-kicker{margin:6px 0 0}
#main .ord-title{margin:0;font:800 clamp(22px,6.4vw,28px)/1.15 var(--font-display)!important}
.ord-hint{display:flex;align-items:center;gap:4px;margin:0;color:var(--muted);font:700 13px var(--font-display)}
.ord-hint .ui-ico{width:16px;height:16px}
.ord-items{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;row-gap:10px;position:relative}
.ord-item{position:relative;display:grid;grid-template-columns:34px 1fr auto 40px;align-items:center;gap:8px;min-height:62px;padding:8px 6px 8px 10px;border-radius:18px;
  background:#fff;border:2px solid var(--line);box-shadow:0 4px 0 var(--line);user-select:none;-webkit-user-select:none;
  transition:translate .22s var(--spring,ease),box-shadow .2s ease,border-color .2s ease,background-color .2s ease,rotate .2s ease}
@media (pointer:fine){.ord-item{cursor:grab}}
.ord-n{display:grid;place-items:center;width:30px;height:30px;border-radius:10px;background:#F3F5F7;font:800 15px var(--font-display);color:#3E454D}
.ord-text{font:700 16px/1.3 var(--font-display);color:var(--ink)}
.ord-move{display:flex;gap:4px}
.ord-move button{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;border:2px solid var(--line);background:#fff;color:#4C5560;cursor:pointer}
.ord-move button:active{translate:0 2px}
.ord-move .ui-ico{width:18px;height:18px}
.ord-grip{display:grid;place-items:center;align-self:stretch;margin:-8px -6px -8px 0;border-radius:0 16px 16px 0;color:#8A9199;touch-action:none;cursor:grab}
.ord-grip .ui-ico{width:22px;height:22px}
.ord-items.is-sorting .ord-item:not(.is-drag){transition:translate .22s var(--spring,ease)}
.ord-item.is-drag{z-index:5;transition:box-shadow .2s ease,rotate .2s ease;border-color:#1CB0F6;background:#F4FBFF;box-shadow:0 14px 30px -10px rgba(31,35,40,.35),0 4px 0 #1899D6;rotate:-1.2deg;cursor:grabbing}
.ord-item.is-drag .ord-n{background:#1CB0F6;color:#fff}
.ord-item.is-right{border-color:#58CC02;box-shadow:0 4px 0 #46A302;background:#F2FCE8}
.ord-item.is-right .ord-n{background:#58CC02;color:#fff}
.ord-item.is-wrong{border-color:#FF4B4B;box-shadow:0 4px 0 #E03A3A;background:#FFF1F1;animation:nope .4s ease-in-out}
.ord-item.is-wrong .ord-n{background:#FF4B4B;color:#fff}
.ord-item.is-right .ord-grip,.ord-item.is-wrong .ord-grip{visibility:hidden}
.ord-mark .ui-ico{width:22px;height:22px;color:#2F7D00}
.ord-should{font:800 12px var(--font-display);color:#A3150C;white-space:nowrap}
.ord-dock{margin-top:6px}
.ord-result{padding:16px;border-radius:20px;display:flex;flex-direction:column;gap:10px;animation:tray-up .45s var(--spring,ease) both}
.ord-result.is-right{background:#D7FFB8}.ord-result.is-near{background:#FFE3D6}
.ord-result strong{font:800 22px var(--font-display)}
.ord-result.is-right strong{color:#2F6F00}.ord-result.is-near strong{color:#A3300F}
.ord-result p{margin:0;font-size:15px;line-height:1.45}
.ord-answer{margin:0;padding-left:22px;font:700 15px/1.5 var(--font-display)}
.ord-src{align-self:flex-start;font:700 13px var(--font-display);color:#0A4F8F;text-decoration:none}
.ord-actions{display:flex;flex-direction:column;gap:10px}
@media (max-width:360px){.ord-item{grid-template-columns:28px 1fr auto 34px}.ord-move button{width:32px;height:32px}.ord-text{font-size:15px}}
/* Øv hub: the new section's icon tint */
.row-ico .ui-ico{color:#1F2328}