/* Market liquidity lesson. All rules scoped under .mlq-* */
.mlq-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.mlq-hero img { width: min(300px, 100%); max-height: 34vh; object-fit: contain; display: block; filter: drop-shadow(0 16px 28px rgba(123,92,253,.3)); }
.mlq-note { font-size: 12px; color: var(--faint); text-align: center; }

/* the desk */
.mlq-desk { position: relative; width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 8px; }
.mlq-board { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: stretch; }
.mlq-q { border-radius: 12px; padding: 7px 10px; background: var(--surface); border: 1.5px solid var(--line); display: flex; flex-direction: column; align-items: center; }
.mlq-q span { font: 600 12px var(--sans); color: var(--dim); }
.mlq-q b { font: 800 19px var(--sans); color: var(--text); font-variant-numeric: tabular-nums; }
.mlq-q.bid { border-color: rgba(216,85,85,.55); }
.mlq-q.ask { border-color: rgba(63,214,154,.55); }
.mlq-gap { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 52px; }
.mlq-gap span { font: 600 12px var(--sans); color: var(--faint); }
.mlq-gap b { font: 800 16px var(--sans); color: var(--gold); transition: transform .2s; }
.mlq-gap.wide b { color: var(--red); transform: scale(1.2); }
.mlq-shelfrow { display: flex; justify-content: space-between; align-items: baseline; padding: 0 2px; }
.mlq-lab { font: 700 12.5px var(--sans); color: var(--dim); }
.mlq-lab.warn { color: var(--red); }
.mlq-cnt { font: 600 12.5px var(--sans); color: var(--faint); }
.mlq-shelf { display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px; padding: 7px; border-radius: 12px; background: rgba(123,92,253,.08); border: 1.5px solid rgba(169,155,255,.35); transition: border-color .3s, background .3s; }
.mlq-shelf.max { border-color: var(--red); background: rgba(216,85,85,.1); }
.mlq-slot { height: 40px; border-radius: 6px; border: 1.5px dashed rgba(169,155,255,.3); }
.mlq-slot.full { border: none; background: linear-gradient(160deg, #FCD98A, var(--gold) 55%, #C98E22); box-shadow: inset 0 -3px 0 rgba(0,0,0,.18); }
.mlq-slot.pop { animation: mlqPop .3s ease-out; }
@keyframes mlqPop { 40% { transform: scale(1.2); } }
.mlq-linelab { margin-top: 4px; }
.mlq-line { display: flex; gap: 8px; min-height: 66px; align-items: center; flex-wrap: nowrap; overflow: hidden; }
.mlq-cust { flex: 0 0 auto; min-width: 62px; height: 62px; border-radius: 14px; border: 2px solid; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font: 800 12.5px var(--sans); color: var(--text); background: var(--raised); box-shadow: 0 3px 0 var(--ledge); cursor: pointer; opacity: 0; transform: translateX(24px); transition: opacity .25s, transform .25s; padding: 0 6px; }
.mlq-cust.in { opacity: 1; transform: none; }
.mlq-cust.out { opacity: 0; transform: translateY(-18px) scale(.8); }
.mlq-cust i { width: 16px; height: 16px; border-radius: 50%; }
.mlq-cust.sell { border-color: var(--red); }
.mlq-cust.sell i { background: var(--red); }
.mlq-cust.buy { border-color: var(--mint); }
.mlq-cust.buy i { background: var(--mint); }
.mlq-cust.shake { animation: mlqShake .3s; }
.mlq-shelf.shake { animation: mlqShake .3s; }
@keyframes mlqShake { 25% { translate: -4px 0; } 75% { translate: 4px 0; } }


/* two IOUs */
.mlq-ious { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; max-width: 340px; }
.mlq-iou { border-radius: 16px; padding: 14px 10px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; background: linear-gradient(170deg, #F4EAD2, #DCCBA4); color: #2A2418; }
.mlq-iou b { font: 800 16px var(--serif); }
.mlq-iou span { font: 600 12.5px var(--sans); color: #5B4E36; }
.mlq-seal { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font: 800 15px var(--serif); color: #fff; background: #3B4E8C; box-shadow: 0 0 0 3px #C9A64A; }
.mlq-iou.busy { box-shadow: 0 0 0 3px var(--mint), 0 0 24px rgba(63,214,154,.35); }
.mlq-iou.quiet { opacity: .8; }

@media (max-height: 700px) {
  .mlq-hero img { max-height: 28vh; }
  .mlq-slot { height: 30px; }
  .mlq-cust { height: 54px; }
  .mlq-q b { font-size: 17px; }
}