/* learn-order.css - the put-in-order part (learn-order.js). One soft panel (owner, 25 Oct 2026: "In a container
   better?"): the slot numbers 1 to N in a gutter that stays put, the rows beside them on a raised surface with no
   border of their own, 8 px apart. A lifted row has a shadow and the place it will land shows as an empty slot.
   After Check the numbers turn green or red by place. Width capped at 640 px, on the content column's left edge.
   Colours from the player's own tokens, so dark and light follow the page. */
.lq-in.lq-ord-wrap,.lq-ord-wrap .lq-ord,.lq-ord-wrap .lq-ord-help{max-width:640px;box-sizing:border-box}
.lq-in.lq-ord-wrap{width:100%}
.lq-ord{position:relative;display:grid;grid-template-columns:32px minmax(0,1fr);column-gap:8px;row-gap:8px;margin:0;padding:8px 8px 8px 6px;
  border-radius:20px;background:color-mix(in srgb,var(--ink-3) 9%,var(--surface))}   /* a neutral blue-grey: no green or red before Check */
:root[data-theme="dark"] .lq-ord{background:color-mix(in srgb,#fff 5%,var(--surface))}
.lq-ord.is-h{display:flex;flex-wrap:wrap;gap:8px}
.lq-ord-n{grid-column:1;align-self:center;justify-self:center;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;
  font:700 15px/1 var(--f-body);color:var(--ink-3);font-variant-numeric:tabular-nums;transition:background-color .2s var(--ln-ease),color .2s var(--ln-ease)}
.lq-ord-n.is-ok{background:var(--ln-right);color:#fff}
.lq-ord-n.is-no{background:var(--ln-wrong);color:#fff}
:root[data-theme="dark"] .lq-ord-n.is-ok,:root[data-theme="dark"] .lq-ord-n.is-no{color:#0b1626}
.lq-ord-it{grid-column:2;display:flex;align-items:center;gap:6px;min-height:52px;padding:0 4px 0 2px;
  font:500 17px/1.3 var(--f-body);color:var(--ink);background:var(--surface);border-radius:14px;
  box-shadow:0 1px 2px rgba(15,30,50,.08),0 1px 1px rgba(15,30,50,.04);
  cursor:grab;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;position:relative;z-index:1;
  transition:background-color .15s var(--ln-ease),box-shadow .15s var(--ln-ease)}
:root[data-theme="dark"] .lq-ord-it{background:color-mix(in srgb,#fff 7%,var(--surface));box-shadow:0 1px 2px rgba(0,0,0,.35)}
.lq-ord.is-h .lq-ord-it{flex:0 1 auto}
.lq-ord-it:hover{box-shadow:0 2px 6px rgba(15,30,50,.12)}
.lq-ord-it:focus-visible{outline:3px solid var(--ln-self);outline-offset:2px}
.lq-ord-it .g{flex:none;display:grid;place-items:center;width:36px;height:44px;color:var(--ink-3);touch-action:none;cursor:grab}
.lq-ord-it .t{flex:1 1 auto;min-width:0;padding:8px 0;text-wrap:balance}
.lq-ord-it .b{flex:none;display:flex}
.lq-ord-mv{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:12px;background:transparent;color:var(--ink-3);cursor:pointer}
.lq-ord-mv:hover:not(:disabled){background:color-mix(in srgb,var(--ink-3) 14%,transparent);color:var(--ink)}
.lq-ord-mv:focus-visible{outline:3px solid var(--ln-self);outline-offset:-3px}
.lq-ord-mv:disabled{opacity:.25;cursor:default}   /* the first row's up and the last row's down: shown, clearly off, every time (nothing moves when a row changes place) */
.lq-ord-it.is-fixed{cursor:default;box-shadow:none;background:transparent}
.lq-ord-it.is-fixed .g{cursor:default}
.lq-ord-it.is-picked,.lq-ord-it.is-grab{background:var(--ln-self-bg);box-shadow:0 0 0 2px var(--ln-self)}
.lq-ord.is-dragging .lq-ord-it{cursor:grabbing}
.lq-ord-it.is-drag{z-index:3;box-shadow:0 12px 28px rgba(15,30,50,.22),0 2px 6px rgba(15,30,50,.12);cursor:grabbing;transition:box-shadow .12s var(--ln-ease)}
:root[data-theme="dark"] .lq-ord-it.is-drag{box-shadow:0 12px 28px rgba(0,0,0,.55)}
.lq-ord-slot{position:absolute;z-index:0;border-radius:14px;background:color-mix(in srgb,var(--ink-3) 12%,transparent);box-shadow:inset 0 1px 3px rgba(15,30,50,.16);pointer-events:none}
:root[data-theme="dark"] .lq-ord-slot{background:rgba(0,0,0,.22);box-shadow:inset 0 1px 3px rgba(0,0,0,.5)}
.lq-ord-it.is-moved{background:var(--ln-self-bg);box-shadow:0 0 0 2px var(--ln-self)}   /* (the answer: the rows that had to move, in a neutral blue)*/
.lq-ord.is-locked .lq-ord-it,.lq-ord.is-locked .g{cursor:default}
.lq-ord.is-locked .lq-ord-it:hover{box-shadow:0 1px 2px rgba(15,30,50,.08)}
.lq-ord.is-revealed .lq-ord-mv,.lq-ord.is-locked .lq-ord-mv{visibility:hidden}   /* (marked: nothing to move)*/
.lq-ord-help{margin:8px 0 0;font-size:15px;line-height:1.45;color:var(--ink-3)}
.lq-ord-help .kb{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.lq-ord-wrap:has(.lq-ord-it:focus-visible) .lq-ord-help .kb{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto;white-space:normal}
.lq-ord-live{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (max-width:520px){
  .lq-ord{grid-template-columns:26px minmax(0,1fr);column-gap:6px;padding:8px 6px 8px 4px}
  .lq-ord-it{min-height:52px;font-size:16.5px}
  .lq-ord-it .g{width:32px}
  .lq-ord-help{font-size:14px}
}
@media (prefers-reduced-motion:reduce){.lq-ord-it,.lq-ord-it.is-drag,.lq-ord-n{transition:none}}