/* Permutations visualizer - small additions */
.perms-visualizer { max-width: 980px; margin: 1.5rem auto; padding: 1rem; border-radius: 8px; background: var(--card,#fff); box-shadow: 0 6px 18px rgba(0,0,0,0.06); }
.perms-visualizer .controls { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:10px; }
.perms-visualizer input[type="text"]{ padding:8px; border-radius:6px; border:1px solid #ccc; min-width:140px; }
.perms-visualizer select{ padding:8px; border-radius:6px; }
.perms-visualizer button{ padding:8px 12px; border-radius:6px; cursor:pointer; }

.visual-row { display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap; }
.stack-container { width:300px; min-height:220px; max-height:420px; overflow:auto; padding:10px; background: var(--stack-bg,#fff); border-radius:6px; border:1px solid rgba(0,0,0,0.06); display:flex; flex-direction: column-reverse; }
.stack-frame { background: var(--stack-frame,#007bff); color: var(--stack-frame-text,#fff); padding:8px 12px; margin:6px 0; border-radius:6px; font-family: monospace; }

.perm-right { display:flex; flex-direction:column; gap:8px; min-width:320px; }
.vis-console { font-family: monospace; white-space: pre-wrap; max-height:240px; overflow:auto; background: rgba(0,0,0,0.03); padding:8px; border-radius:6px; }

/* sr-only helper */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (max-width:900px) {
  .visual-row { flex-direction:column; align-items:center; }
  .stack-container, .perm-right { width:95%; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}