/* =========================================================
   ZENNIT — Kamus Pandas (/pandas, /pandas/{slug})
   Memakai kerangka rumus.css (rx-*) dan sql.css (editor, tabel, penjelasan),
   ditambah editor yang bisa dijalankan di browser (public/js/pages/pandas-lab.js).
   ========================================================= */

/* kolom index DataFrame */
.pd-table th.is-ix,.pd-table td.is-ix{background:var(--gray-100);color:var(--gray-500);font-family:var(--font-mono);font-size:var(--fs-xs);border-right:1px solid #e3e8e5}

/* editor */
.pd-editor pre[data-pd-view]{cursor:text}
.pd-editor pre[data-pd-view]:hover{background:rgba(255,255,255,.03)}
.pd-editor textarea{display:block;width:100%;min-height:180px;resize:vertical;border:0;outline:0;background:transparent;color:#e6f4ec;padding:var(--sp-4) var(--sp-5);font-family:var(--font-mono);font-size:var(--fs-md);line-height:var(--lh-relaxed);tab-size:4;white-space:pre;overflow-x:auto}
.pd-editor textarea[hidden],.pd-editor pre[hidden]{display:none}
.pd-lab.is-editing .pd-editor{box-shadow:0 0 0 2px var(--green-400)}

/* tombol & status */
.pd-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-3);margin-top:var(--sp-3)}
.pd-run{display:inline-flex;align-items:center;gap:var(--sp-2);border:0;border-radius:var(--radius-sm);background:var(--green-500);color:var(--white);font-family:var(--font-display);font-size:var(--fs-md);font-weight:700;padding:var(--sp-2) var(--sp-4);cursor:pointer;transition:background .2s}
.pd-run:hover{background:var(--green-600)}
.pd-run:disabled{background:var(--gray-400);cursor:progress}
.pd-run-icon{font-size:var(--fs-xs)}
.pd-run kbd{font-family:var(--font-mono);font-size:var(--fs-2xs);font-weight:500;background:rgba(255,255,255,.18);border-radius:5px;padding:1px var(--sp-1)}
.pd-edit{border:1px solid var(--gray-200);background:var(--white);border-radius:var(--radius-sm);font-family:var(--font-display);font-size:var(--fs-sm);font-weight:600;color:var(--green-800);padding:var(--sp-2) var(--sp-3);cursor:pointer}
.pd-edit:hover{border-color:var(--green-400)}
.pd-status{font-size:var(--fs-sm);color:var(--gray-500)}
.pd-status.is-ok{color:var(--green-600)}
.pd-status.is-err{color:#b42318}

/* output */
.pd-out{margin-top:var(--sp-3)}
.pd-out:empty{display:none}
.pd-print{margin:0 0 var(--sp-3);background:var(--white);border:1px solid #d4dbd6;border-radius:var(--radius-sm);padding:var(--sp-3) var(--sp-4);font-family:var(--font-mono);font-size:var(--fs-sm);line-height:var(--lh-normal);color:var(--text);white-space:pre;overflow-x:auto;max-height:320px}
.pd-print.is-err{background:#fffafa;border-color:#f6c9c4;color:#b42318;white-space:pre-wrap}
.pd-print:last-child{margin-bottom:0}
.pd-out .sq-result{margin-top:0}
.pd-out .pd-meta{font-size:var(--fs-xs);color:var(--gray-500);margin-top:var(--sp-2)}
.pd-out.is-live .sq-result .sq-table-wrap{border-color:var(--green-500);box-shadow:0 0 0 1px var(--green-500)}

#coba .pd-editor textarea{min-height:220px}

@media(max-width:600px){
  .pd-editor textarea{padding:var(--sp-3) var(--sp-4);font-size:var(--fs-sm)}
  .pd-run kbd{display:none}
}

/* catatan untuk pemula: kolom index & pesan error yang diterjemahkan */
.pd-ix-note{font-size:var(--fs-sm);line-height:var(--lh-normal);color:var(--gray-700);background:var(--gray-100);border-radius:var(--radius-sm);padding:var(--sp-2) var(--sp-3);margin-top:var(--sp-2)}
.pd-ix-note a{color:var(--green-700);font-weight:600}
.pd-err{background:#fffafa;border:1px solid #f6c9c4;border-radius:var(--radius-sm);padding:var(--sp-3) var(--sp-4);margin-bottom:var(--sp-3)}
.pd-err p{font-size:var(--fs-md);line-height:var(--lh-normal);color:var(--text)}
.pd-err p b{color:#b42318}
.pd-err code{font-family:var(--font-mono);font-size:.9em;background:var(--white);border:1px solid #f6c9c4;border-radius:6px;padding:0 var(--sp-1)}
.pd-err details{margin-top:var(--sp-2)}
.pd-err summary{cursor:pointer;font-size:var(--fs-sm);color:var(--gray-500)}
.pd-err .pd-print{margin:var(--sp-2) 0 0}