/* =====================================================================
   cm-reorder.css — "Order the steps" puzzles (see cm-reorder.js).
   Gold on dark, using the interior pages' tokens with homepage fallbacks.
   No green for "correct": right answers go gold, wrong ones dim.
   ===================================================================== */
.cm-ro{
  margin:26px 0; padding:22px;
  border:1px solid var(--line, rgba(227,199,122,.18)); border-radius:16px;
  background:var(--surface, #16110a);
}
.cm-ro-kicker{
  font:600 .7rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent, var(--gold-deep, #C9A24B)); margin:0 0 8px;
}
.cm-ro-q{ font-size:1.05rem; color:var(--ink, #F4EFE6); margin:0 0 6px; font-weight:600; }
.cm-ro-help{ font-size:.82rem; color:var(--muted, rgba(255,255,255,.6)); margin:0 0 14px; line-height:1.5; }

.cm-ro-list{ list-style:decimal; margin:0; padding-left:1.4em; }
.cm-ro-list li{ color:var(--ink, #F4EFE6); line-height:1.5; padding:6px 0; }

/* --- enhanced (JS) --- */
.cm-ro-live .cm-ro-list{ position:relative; list-style:none; padding:0; display:flex; flex-direction:column; gap:8px; }
.cm-ro-live .cm-ro-list li{
  position:relative; display:flex; align-items:center; gap:12px;
  padding:12px 14px; border-radius:12px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.09);
  cursor:grab; user-select:none; -webkit-user-select:none;
  transition:border-color .2s ease, background-color .2s ease, opacity .2s ease, box-shadow .2s ease;
}
.cm-ro-live .cm-ro-list li:hover{ border-color:rgba(227,199,122,.35); }
.cm-ro-live .cm-ro-list li:focus-visible{ outline:2px solid var(--accent-light, var(--gold, #E3C77A)); outline-offset:2px; }
.cm-ro-grip{
  flex:0 0 auto; display:grid; place-items:center; width:22px; height:30px; margin:-6px 0 -6px -4px;
  color:rgba(255,255,255,.35); touch-action:none; cursor:grab;
}
.cm-ro-grip svg{ width:10px; height:16px; }
.cm-ro-num{
  flex:0 0 auto; width:26px; height:26px; border-radius:50%;
  display:grid; place-items:center;
  font:600 .78rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; font-variant-numeric:tabular-nums;
  color:var(--accent-light, var(--gold, #E3C77A));
  border:1px solid rgba(227,199,122,.35);
}
.cm-ro-text{ flex:1; min-width:0; }

.cm-ro-list li.is-dragging{
  z-index:5; cursor:grabbing;
  background:#1c160d; border-color:var(--accent-light, var(--gold, #E3C77A));
  box-shadow:0 14px 34px rgba(0,0,0,.55), 0 0 0 1px rgba(227,199,122,.25);
}
.cm-ro-list li.is-grabbed{
  border-color:var(--accent-light, var(--gold, #E3C77A));
  background:rgba(227,199,122,.08);
  box-shadow:0 0 0 1px rgba(227,199,122,.35);
}
.cm-ro-list li.is-grabbed .cm-ro-grip{ color:var(--accent-light, var(--gold, #E3C77A)); }

/* result marks */
.cm-ro-list li.is-right{ border-color:rgba(227,199,122,.55); }
.cm-ro-list li.is-right .cm-ro-num{ background:var(--accent-light, var(--gold, #E3C77A)); color:#1a1206; border-color:transparent; }
.cm-ro-list li.is-wrong{ opacity:.55; border-style:dashed; }
.cm-ro.is-solved .cm-ro-list li{ cursor:default; }

.cm-ro-bar{ display:flex; align-items:center; flex-wrap:wrap; gap:10px 14px; margin-top:16px; min-height:40px; }
.cm-ro-check{
  font-family:inherit; font-weight:600; font-size:.88rem; line-height:1; padding:11px 18px; border-radius:999px; cursor:pointer;
  color:#1a1206; border:0;
  background:linear-gradient(135deg, var(--accent, #C9A24B), var(--accent-light, #E3C77A));
}
.cm-ro-check:focus-visible{ outline:2px solid var(--accent-light, #E3C77A); outline-offset:3px; }
.cm-ro-result{ font-size:.86rem; color:var(--muted, rgba(255,255,255,.65)); }
.cm-ro.is-solved .cm-ro-result{ color:var(--accent-light, var(--gold, #E3C77A)); font-weight:600; }

.cm-ro-answer{ margin-top:12px; font-size:.88rem; color:var(--muted, rgba(255,255,255,.65)); }
.cm-ro-answer summary{ cursor:pointer; color:var(--accent-light, #E3C77A); }
.cm-ro-sr{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* touch screens: a full-size grip target (drags start only from the grip there) */
@media (pointer:coarse){
  .cm-ro-grip{ width:36px; height:44px; margin:-12px -4px -12px -10px; color:rgba(255,255,255,.5); }
}