/* ============================================================
   AA — week 12 animation styles (anim-w12.js). Theme tokens only.
   ============================================================ */
.w12 .seg { flex-wrap: wrap; max-width: 100%; }
.w12 .anim-opts select { min-width: 5.5rem; }

/* window drawn to scale */
.w12-win { position: relative; height: 22px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; margin-top: .3rem;
  background-image: repeating-linear-gradient(-45deg, var(--border) 0 2px, transparent 2px 7px); }
.w12-win-in { position: absolute; top: 0; bottom: 0; background: var(--green-soft); border-left: 2px solid var(--green); border-right: 2px solid var(--green); box-sizing: border-box; transition: left .3s ease, width .3s ease; }
.w12-win-mid { position: absolute; top: 2px; bottom: 2px; width: 3px; margin-left: -1px; background: var(--accent); border-radius: 2px; transition: left .3s ease; }
.w12-scale { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: .6rem; color: var(--muted); margin: .2rem 0 .3rem; }
.w12-pat { font-size: .86rem; margin: .6rem 0 0; color: var(--text); }
.w12-pat:empty { display: none; }
.anim-table b.w12-win-c { color: var(--green); }

/* arrays */
.w12-arr { margin-top: 1.4rem; }
.w12-arr.w12-bag { margin-top: .5rem; }
.w12-arr.w12-bag .cell:nth-child(3n+1) { transform: translateY(3px); }
.w12-arr.w12-bag .cell:nth-child(3n+2) { transform: translateY(-3px); }
.anim .arr button.cell { min-height: 0; font-size: .75rem; padding: 0 .3rem; border-radius: 6px; }
.anim .arr .cell.w12-pick { cursor: pointer; }
.anim .arr .cell.w12-pick:hover { border-color: var(--accent); }
.arr .cell.w12-tgt { box-shadow: 0 0 0 2px var(--accent); }
.arr .cell.w12-seen { border-style: dashed; border-color: var(--blue); }
.w12-mk { position: absolute; top: -1.15rem; left: 50%; transform: translateX(-50%); font-style: normal; font-family: var(--font-mono); font-size: .55rem; color: var(--accent); white-space: nowrap; }
.w12-sv { min-width: 2rem; }

/* crossover explorer bars */
.w12-explore { margin-top: .9rem; }
.w12-hb { display: grid; grid-template-columns: 7.5rem 1fr 4.8rem; gap: .5rem; align-items: center; margin: .25rem 0; font-family: var(--font-mono); font-size: .7rem; color: var(--muted); }
.w12-hb-t { height: 14px; border-radius: 4px; background: var(--bg-soft); border: 1px solid var(--border); overflow: hidden; }
.w12-hb-f { height: 100%; transition: width .2s ease; opacity: .75; }
.w12-hb-v { text-align: right; color: var(--text); }
.w12-hb.best .w12-hb-l, .w12-hb.best .w12-hb-v { color: var(--heading); font-weight: 700; }
.w12-hb.best .w12-hb-f { opacity: 1; }

/* you-trace form */
.w12-form { margin-top: .7rem; margin-bottom: 0; }
.anim .w12-form input[type=number] { width: 4.6rem; }
.anim input.w12-bad { border-color: var(--red); background: var(--red-soft); }

/* six tests */
.w12-tests { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; margin-bottom: .6rem; }
.anim button.w12-chip { display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; text-align: left; padding: .4rem .55rem; min-width: 0; }
.w12-chip span { color: var(--heading); }
.w12-chip code { font-size: .62rem; color: var(--muted); background: none; border: 0; padding: 0; white-space: normal; overflow-wrap: anywhere; }
.w12-chip em { font-style: normal; font-size: .62rem; color: var(--muted); }
.anim button.w12-chip.sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.w12-chip.pass em { color: var(--green); }
.w12-chip.fail em { color: var(--red); font-weight: 700; }
.w12-ok { color: var(--green); }
.w12-no { color: var(--red); font-weight: 700; }

@media (max-width: 560px) {
  .w12-tests { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .w12-hb { grid-template-columns: 5.6rem 1fr 4.2rem; }
}

.w12-arr { row-gap: 1.35rem; }
.w12-arr.w12-arr-mk { row-gap: 2.4rem; }
.w12 .anim-table { min-width: 0; }
.w12 .anim-table td { white-space: nowrap; }
.w12 .anim-table td:last-child { white-space: normal; }
@media (max-width: 560px) {
  .w12 .anim-table { font-size: .64rem; }
  .w12 .anim-table th, .w12 .anim-table td { padding: .3rem .25rem; }
}
@media (max-width: 560px) {
  .w12-hide-last th:last-child, .w12-hide-last td:last-child { display: none; }
  .w12-hide-5 th:nth-child(5), .w12-hide-5 td:nth-child(5) { display: none; }
}