/* N-Queens visualizer styles */
.nqueens-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); }
.nqueens-visualizer .controls { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:10px; }
.nqueens-visualizer input[type="number"]{ padding:8px; border-radius:6px; border:1px solid #ccc; width:90px; }
.nqueens-visualizer select{ padding:8px; border-radius:6px; }
.nqueens-visualizer button{ padding:8px 12px; border-radius:6px; cursor:pointer; }

/* layout: stack + board side by side (responsive) */
.visual-row { display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap; }
.stack-container { width:280px; 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; }

/* board styles */
.nq-board-container { display:flex; flex-direction:column; gap:8px; align-items:center; }
.nq-board { display:grid; gap:2px; background: rgba(0,0,0,0.06); padding:4px; border-radius:6px; }
.nq-cell { width:40px; height:40px; display:flex; align-items:center; justify-content:center; font-family: monospace; font-weight:700; border-radius:4px; background: #fff; }
.nq-cell.dark { background: #e4e4e4; }
.nq-cell.queen { background: var(--accent, #ff7b72); color: #fff; box-shadow: 0 3px 8px rgba(0,0,0,0.12); transform: scale(1.02); }
.nq-cell.highlight { outline: 3px solid rgba(34,139,230,0.25); }

/* solutions console */
.vis-console { margin-top:8px; font-family: monospace; white-space: pre-wrap; max-height:180px; overflow:auto; background: rgba(0,0,0,0.03); padding:8px; border-radius:6px; width:360px; }

/* small screens */
@media (max-width:900px) {
  .visual-row { flex-direction:column; align-items:center; }
  .stack-container, .vis-console { width:95%; }
}

/* 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; }