/* Order tasks (js/order-tasks.js): task list, pieces to place, answer list, check result. Built from ui-kit tokens; made for 390 px first. */
.or-page { display: grid; gap: var(--sp-3); max-width: 40rem; margin-inline: auto; min-width: 0; }
.or-page h2, .or-page h3, .or-page p { margin: 0; }
.or-page h3 { font-size: var(--fs-h3); }
.or-page [hidden] { display: none !important; } /* .btn and .ds-card set display, which would beat the hidden attribute */
.or-bar { display: flex; }
.or-head > div { min-width: 0; }
.or-head .eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.or-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.or-list, .or-pool, .or-slots, .or-keys { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.or-lv { display: flex; align-items: center; gap: var(--sp-2); }
.or-card { display: flex; align-items: center; gap: var(--sp-3); width: 100%; min-height: 56px; padding: var(--sp-3); border: 1px solid var(--hairline-strong); border-radius: var(--r-sm); background: var(--surface); color: inherit; font: inherit; text-align: start; cursor: pointer; }
.or-card:hover { border-color: var(--accent-line); }
.or-card-t { display: grid; gap: 2px; flex: 1; min-width: 0; overflow-wrap: anywhere; }

.or-piece { display: block; width: 100%; min-height: 48px; padding: var(--sp-3); border: 1px solid var(--hairline-strong); border-radius: var(--r-sm); background: var(--surface); color: inherit; font: inherit; text-align: start; cursor: pointer; min-width: 0; }
.or-piece:hover:not(:disabled) { border-color: var(--accent-line); background: var(--accent-soft); }
.or-piece:disabled { cursor: default; opacity: 1; }
.or-t { display: block; line-height: 1.5; overflow-wrap: anywhere; text-align: left; }
.or-cue { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: var(--accent); font-weight: 600; }

.or-slot, .or-key { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--sp-2); align-items: start; margin: 0; padding: var(--sp-2); border: 1px solid var(--hairline); border-radius: var(--r-sm); background: var(--surface); }
.or-slot-b, .or-key-b { display: grid; gap: var(--sp-2); min-width: 0; }
.or-slot[draggable="true"] { cursor: grab; }
.or-slot.ok { border-color: var(--ok); }
.or-slot.bad { border-color: var(--bad, var(--warn)); }
.or-n { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--surface-2); font-weight: 600; }
.or-tools { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.or-tools .btn { min-height: 44px; }
.or-mark { font-weight: 600; }
.or-slot.ok .or-mark { color: var(--ok); }
.or-slot.bad .or-mark { color: var(--bad, var(--warn)); }
.or-empty { padding: var(--sp-3); border: 1px dashed var(--hairline-strong); border-radius: var(--r-sm); }
.or-cues { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-1, 4px); }
.or-cues li { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2); }
.or-cuebtn { justify-self: start; min-height: 44px; }
.or-why { color: var(--ink-2); line-height: 1.5; }
.or-result p { margin: 0; }
.or-result:focus-visible { outline: 2px solid var(--accent); }
.or-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.or-actions .btn { flex: 1 1 auto; min-height: 48px; }
@media (prefers-reduced-motion: reduce) { .or-card, .or-piece { transition: none; } }