/* BitWithBite — Live code runner (Run JS / Preview HTML) for course lessons.
   Uses the design-token names already defined in every lesson page's own
   inline :root block (--ff-m, --rim2, --teal, --txt3, --txt), so it needs
   no theme overrides per course. */
.code-run-btn{font-family:var(--ff-m);font-size:.68rem;font-weight:700;letter-spacing:.03em;padding:4px 12px;border-radius:var(--rfull,9999px);border:1px solid var(--rim2);background:rgba(45,232,192,.12);color:var(--teal);cursor:pointer;transition:.15s;margin-left:6px;white-space:nowrap}
.code-run-btn:hover{background:rgba(45,232,192,.22);border-color:var(--teal)}
.code-run-btn:disabled{opacity:.5;cursor:wait}

.code-output{display:none;border-top:1px solid var(--rim2)}
.code-output.open{display:block}
.code-output-head{display:flex;align-items:center;justify-content:space-between;padding:.5rem 1rem;background:#08122a;font-family:var(--ff-m);font-size:.65rem;color:var(--teal);letter-spacing:.05em}
.code-output-close{background:none;border:none;color:var(--txt3);cursor:pointer;font-size:.85rem;padding:2px 6px;line-height:1}
.code-output-close:hover{color:var(--txt)}
.code-output-body{background:#050a1c;color:#4ade80;padding:1rem 1.2rem;margin:0;font-family:var(--ff-m);font-size:.82rem;white-space:pre-wrap;word-break:break-word;line-height:1.6;max-height:280px;overflow-y:auto}
.code-output-body.is-error{color:#f87171}

.code-preview-wrap{display:none;border-top:1px solid var(--rim2)}
.code-preview-wrap.open{display:block}
.code-preview-head{display:flex;align-items:center;justify-content:space-between;padding:.5rem 1rem;background:#08122a;font-family:var(--ff-m);font-size:.65rem;color:var(--teal);letter-spacing:.05em}
.code-preview{width:100%;min-height:220px;border:none;display:block;background:#fff}

.code-sql-body{overflow-x:auto}
.code-sql-table{border-collapse:collapse;font-family:var(--ff-m);font-size:.8rem;white-space:nowrap}
.code-sql-table th{background:rgba(45,232,192,.12);color:var(--teal);text-align:left;padding:.45rem .8rem;border:1px solid var(--rim2);position:sticky;top:0}
.code-sql-table td{padding:.4rem .8rem;border:1px solid var(--rim2);color:var(--txt)}
.code-sql-table tr:nth-child(even) td{background:rgba(255,255,255,.02)}
.code-sql-note{margin-top:.6rem;font-size:.72rem;color:var(--txt3);font-style:italic}

@media (max-width:640px){
  .code-output-body{max-height:200px}
  .code-preview{min-height:180px}
}