/* ---------------- Drag-to-Order Blocks — student UI (แผนงาน-โจทย์เรียงลำดับ.md §4) ----------------
   Styles for js/order-block-ui.js's .ob-* markup. Kept in its own file (like question-editor.css,
   rich-content.css, exam.css each own their own feature) rather than folded into exam.css, since
   this component is shared by exam-player.js AND practice-player.js (Topic 7), not exam-only. */

.ob-wrap{ margin:10px 0; }

/* flex-wrap (§4: "รองรับบล็อกเนื้อหายาว (ประโยคยาว) โดยไม่ทำ layout พัง") — a long sentence-block
   wraps onto its own full-width line naturally instead of forcing a fixed-width box to either
   overflow or clip; short blocks (single numbers, short expressions) sit side by side. */
.ob-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:stretch;
}

.ob-block{
  display:flex;
  align-items:center;
  gap:6px;
  background:var(--card);
  border:1.5px solid var(--line);
  border-radius:12px;
  padding:8px 10px;
  min-height:40px;
  max-width:100%;
  cursor:grab;
  user-select:none;
  -webkit-user-select:none;
  touch-action:none; /* this element owns its own touch gestures (see order-block-ui.js's touchmove handler) — without this, the browser's default touch-scroll/zoom handling competes with tracking the drag */
}
.ob-block:active{ cursor:grabbing; }
.ob-block:focus-visible{ outline:2px solid var(--coral); outline-offset:2px; }

.ob-handle{
  color:var(--muted);
  font-size:var(--fs-sm);
  flex-shrink:0;
  line-height:1;
}

.ob-order-num{
  display:flex; align-items:center; justify-content:center;
  width:20px; height:20px; flex-shrink:0;
  border-radius:999px;
  background:var(--paper);
  color:var(--muted);
  font-size:var(--fs-2xs);
  font-weight:700;
}

.ob-content{
  flex:1 1 auto;
  min-width:0;
  font-size:var(--fs-base);
  color:var(--ink);
  /* long content wraps inside its own block instead of stretching the block to one endless line */
  overflow-wrap:anywhere;
}

.ob-actions{
  display:flex;
  gap:4px;
  flex-shrink:0;
  margin-left:auto;
}

.ob-up, .ob-down, .ob-tap-select{
  border:1.5px solid var(--line);
  background:var(--paper);
  border-radius:8px;
  color:var(--ink);
  font-size:var(--fs-xs);
  cursor:pointer;
  /* Touch-friendly hit target (roughly 32px) even though the visible box is smaller — small
     buttons packed next to each other are exactly where a mis-tap on a phone is most likely. */
  min-width:30px; min-height:30px;
  padding:2px 6px;
}
.ob-up:disabled, .ob-down:disabled{ opacity:.35; cursor:default; }
.ob-tap-select{ padding:2px 10px; }

/* Drag/drop + touch-drag visual feedback */
.ob-block.ob-dragging{ opacity:.45; }
.ob-block.ob-dragover{ border-color:var(--coral); box-shadow: inset 0 0 0 1.5px var(--coral); }

/* "เลือก" tap-to-swap accessibility fallback — the currently-armed block, waiting for its swap partner */
.ob-block.ob-selected{ border-color:var(--coral); background:rgba(255,90,54,0.06); }
.ob-block.ob-selected .ob-tap-select{ background:var(--coral); border-color:var(--coral); color:#fff; }

/* Review (§6) — per-position correctness on "your order"'s block list only (see
   renderOrderReviewHtml() in order-block-ui.js — the "correct order" list underneath is shown
   plain, marking it up would be meaningless since it's correct by definition). */
.ob-block.ob-correct-pos{ border-color:var(--success); background:rgba(var(--success-rgb),0.08); }
.ob-block.ob-wrong-pos{ border-color:var(--danger); background:rgba(var(--danger-rgb),0.06); }
.ob-mark{ flex-shrink:0; font-weight:700; font-size:var(--fs-sm); }
.ob-block.ob-correct-pos .ob-mark{ color:var(--success); }
.ob-block.ob-wrong-pos .ob-mark{ color:var(--danger); }

.ob-review-label{ font-size:var(--fs-xs); font-weight:700; color:var(--muted); margin-bottom:4px; }

.ob-hint{
  font-size:var(--fs-xs);
  color:var(--muted);
  margin-top:6px;
}

/* Narrow phones: give blocks a bit more breathing room and stack actions if content is long */
@media (max-width:420px){
  .ob-block{ padding:9px 8px; }
  .ob-content{ font-size:var(--fs-sm); }
}

/* ---------------- Slot + bank layout (js/order-block-ui.js's renderOrderSlotsHtml/wireOrderSlots)
   ---------------- Reuses .ob-block/.ob-content/.ob-order-num/.ob-selected/.ob-dragging/.ob-hint
   above for the pieces themselves (both a placed slot-piece and a bank-piece are plain .ob-block
   elements, just tagged .obs-piece for this component's own event wiring) — only the slot/bank
   scaffolding around them is new here. */

.obs-slots{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  margin-bottom:16px;
}

.obs-sep{
  font-size:var(--fs-lg);
  font-weight:800;
  color:var(--muted);
  flex-shrink:0;
  user-select:none;
}
/* Admin chose "ไม่มีสัญลักษณ์" (no symbol) — collapse the separator to just its own gap so slots
   still sit apart, without the symbol's own inline space when there's nothing to draw. */
.obs-sep-none{ width:2px; }

.obs-slot{
  display:flex;
  align-items:center;
  gap:6px;
  min-height:44px;
  min-width:64px;
  padding:6px 8px;
  border-radius:12px;
  border:1.5px dashed var(--line);
  background:transparent;
}
/* A filled slot's .ob-block piece already carries the solid card look — the slot itself just
   drops its own dashed border/padding so it doesn't look like two nested boxes. */
.obs-slot:not(.obs-slot-empty){
  border-style:solid;
  border-color:transparent;
  padding:0;
  gap:6px;
}
.obs-slot:not(.obs-slot-empty) .ob-order-num{ margin-left:2px; }

.obs-slot-placeholder{
  color:var(--muted);
  font-size:var(--fs-xs);
}

.obs-bank{
  border:1.5px solid var(--line);
  border-radius:14px;
  padding:12px;
}
.obs-bank-label{
  font-size:var(--fs-xs);
  font-weight:700;
  color:var(--muted);
  margin-bottom:8px;
}
.obs-bank-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.obs-bank-empty{
  font-size:var(--fs-sm);
  color:var(--muted);
}

/* Both a slot and the bank light up as a valid drop target while something is dragged over them
   (see wireOrderSlots()'s updateDropHighlight()). */
.obs-slot.obs-drop-target{ border-color:var(--coral); background:rgba(255,90,54,0.06); }
.obs-bank.obs-drop-target{ border-color:var(--coral); box-shadow: inset 0 0 0 1.5px var(--coral); }

/* The floating clone that follows the pointer/finger during a drag (see wireOrderSlots()'s
   createGhost()/positionGhost()) — position/transform are set inline per-frame in JS, this only
   supplies the fixed visual chrome. pointer-events:none so it never steals the elementFromPoint()
   hit-test wireOrderSlots() uses to figure out what's under the pointer. */
.obs-ghost{
  pointer-events:none;
  z-index:9999;
  box-shadow:0 8px 24px rgba(18,18,18,0.22);
  cursor:grabbing;
}

.obs-piece{ touch-action:none; } /* redundant with .ob-block's own touch-action:none, kept explicit since this is the selector wireOrderSlots() actually queries by */

@media (max-width:420px){
  .obs-slot{ min-width:52px; min-height:40px; }
  .obs-bank{ padding:10px; }
}