/* ===== MarQenti Prépa Bac — algorithm animation engine (black · red · grey) =====
   Layered after deck.css + bac.css. All sizing in cqh/cqw so it scales with the 16:9 stage. */

.anim{ margin-top:2cqh; }

/* ---- controls ---- */
.anim-ctrls{ display:flex; gap:1.4cqw; margin-top:1.8cqh; align-items:center; }
.anim-btn{ font-family:'Space Mono',monospace; font-size:2.05cqh; letter-spacing:.08em; text-transform:uppercase;
  background:var(--ink); color:var(--cream); border:none; padding:1.05cqh 2.2cqw; border-radius:3px; cursor:pointer;
  transition:background .15s ease; }
.anim-btn:hover{ background:var(--accent); }
.anim-btn.on{ background:var(--accent); }
.anim-btn:disabled{ opacity:.35; cursor:default; }
.anim-btn.ghost{ background:transparent; color:var(--grey-d); border:1px solid var(--line); }
.anim-prog{ font-family:'Space Mono',monospace; font-size:1.9cqh; color:var(--grey); margin-left:auto; }
.anim-cap{ font-family:'Space Mono',monospace; font-size:2.15cqh; color:var(--grey-d); margin-top:1.5cqh;
  min-height:3cqh; line-height:1.3; }
.anim-cap b{ color:var(--accent); }

/* ---- trace stepper (the T.R.A.C.E. animator) ---- */
.anim-trace{ display:grid; grid-template-columns:1.05fr 1fr; gap:2.4cqw; align-items:start; }
.anim-code{ font-family:'Space Mono',monospace; font-size:2.15cqh; line-height:1.48;
  background:#fff; border:1px solid rgba(14,14,14,.18); padding:1.5cqh 1.3cqw; overflow:hidden; }
.anim-code .cl{ white-space:pre; padding:.1cqh .5cqw; border-radius:2px; color:var(--ink); transition:background .18s ease; }
.anim-code .cl.hl{ background:rgba(195,0,30,.13); color:var(--accent); font-weight:700; }
.anim-tbl{ border-collapse:collapse; font-family:'Space Mono',monospace; font-size:2.05cqh; width:100%; }
.anim-tbl th{ background:var(--ink); color:var(--cream); font-weight:400; font-size:1.75cqh;
  letter-spacing:.05em; padding:.7cqh 1cqw; }
.anim-tbl td{ border:1px solid rgba(14,14,14,.2); padding:.55cqh 1cqw; text-align:center; background:#fff; color:var(--body); }
.anim-tbl td.n{ background:rgba(14,14,14,.05); color:var(--accent); font-weight:700; }
.anim-tbl tr.cur td{ background:rgba(195,0,30,.09); }
.anim-tbl tr.cur td.n{ background:rgba(195,0,30,.18); }
.anim-ans{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:3cqh; color:var(--accent);
  margin-top:1.4cqh; opacity:0; transition:opacity .25s ease; }
.anim-ans.show{ opacity:1; }

/* ---- bars (sorts) ---- */
.anim-bars{ display:flex; align-items:flex-end; gap:1.4cqw; height:44cqh; margin-top:.5cqh; }
.bar{ flex:1; background:var(--grey-d); border-radius:2px 2px 0 0; display:flex; align-items:flex-start;
  justify-content:center; transition:height .34s ease, background .18s ease; min-width:0; }
.bar .v{ font-family:'Space Mono',monospace; font-size:2cqh; color:var(--cream); padding-top:.6cqh; }
.bar.cmp{ background:var(--accent); }
.bar.done{ background:var(--grey); }
.bar.key{ background:var(--ink); outline:.4cqh solid var(--accent); outline-offset:-.4cqh; }

/* ---- cells (search / pointers) ---- */
.anim-cells{ display:flex; gap:1.1cqw; margin-top:2cqh; }
.cell{ flex:1; border:.28cqh solid var(--ink); display:flex; flex-direction:column; align-items:center;
  padding:1.4cqh 0 .7cqh; background:#fff; transition:.18s; min-width:0; }
.cell .v{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:3cqh; color:var(--ink); }
.cell .ix{ font-family:'Space Mono',monospace; font-size:1.6cqh; color:var(--grey); margin-top:.5cqh; }
.cell.mid{ background:var(--accent); border-color:var(--accent); }
.cell.mid .v, .cell.mid .ix{ color:var(--cream); }
.cell.found{ background:var(--ink); border-color:var(--ink); }
.cell.found .v, .cell.found .ix{ color:var(--cream); }
.cell.lo{ border-color:var(--grey-d); box-shadow:inset 0 .5cqh 0 var(--grey-d); }
.cell.hi2{ border-color:var(--grey-d); box-shadow:inset 0 -.5cqh 0 var(--grey-d); }
.cell.out{ opacity:.3; }

/* pointer bar under cells (deb/fin/m or i/j) */
.anim-ptrs{ display:flex; gap:1.1cqw; margin-top:.6cqh; }
.anim-ptrs .p{ flex:1; text-align:center; font-family:'Space Mono',monospace; font-size:1.9cqh;
  color:var(--accent); font-weight:700; min-height:2.6cqh; min-width:0; }

/* a compact hint chip shown above a widget */
.anim-hint{ display:inline-block; font-family:'Space Mono',monospace; font-size:1.9cqh; letter-spacing:.1em;
  text-transform:uppercase; color:var(--cream); background:var(--accent); padding:.6cqh 1.4cqw; margin-bottom:1.4cqh; }

@media print{ .anim-ctrls{ display:none; } .anim-ans{ opacity:1; } }