/* =========================================================
   ZENNIT — Kamus SQL (/sql, /sql/{slug})
   Memakai kerangka rumus.css (rx-*), ditambah editor query gelap dan tabel hasil.
   ========================================================= */

.sq-page code{font-family:var(--font-mono)}
.sq-page .rx-card-top code,.sq-page .rx-head h1 code,.sq-page .rx-pager code{font-family:var(--font-mono);letter-spacing:var(--ls-tight)}
.sq-prompt{font-family:var(--font-mono);font-style:normal;font-weight:600;color:var(--green-600)}

/* warna sintaks SQL (kelas dari kamus-sql/build.py) */
.sk{color:#7ee0a8;font-weight:600}
.sf{color:#8ab4ff}
.ss{color:#ffc58a}
.sn{color:#d6a8ff}
.sc{color:#7c8f85;font-style:italic}
.sq-syntax .opt{color:#9fb3a8}

/* editor query */
.sq-editor{background:var(--green-900);border-radius:var(--radius-sm);overflow:hidden}
.sq-editor-bar{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-4);border-bottom:1px solid rgba(255,255,255,.08)}
.sq-dots{display:flex;gap:var(--sp-1)}
.sq-dots i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.18)}
.sq-file{flex:1;font-family:var(--font-mono);font-size:var(--fs-xs);color:rgba(255,255,255,.5)}
.sq-copy{display:inline-flex;align-items:center;gap:var(--sp-1);border:0;background:none;color:rgba(255,255,255,.6);font-family:var(--font-body);font-size:var(--fs-xs);cursor:pointer;padding:var(--sp-1) var(--sp-2);border-radius:6px;transition:color .2s,background .2s}
.sq-copy:hover{color:var(--white);background:rgba(255,255,255,.08)}
.sq-copy.is-done{color:var(--green-400)}
.sq-copy.is-done span{display:none}
.sq-editor pre{margin:0;padding:var(--sp-4) var(--sp-5);overflow-x:auto}
.sq-editor code{font-size:var(--fs-md);line-height:var(--lh-relaxed);color:#e6f4ec;white-space:pre}
.rx-recipe .sq-editor{margin-top:var(--sp-3)}
.rx-recipe .sq-editor code{font-size:var(--fs-sm)}

/* tabel data & hasil */
.sq-table-wrap{background:var(--white);border:1px solid #d4dbd6;border-radius:var(--radius-sm);overflow:hidden}
.sq-table-wrap+.sq-table-wrap{margin-top:var(--sp-3)}
.sq-table-name{font-family:var(--font-display);font-size:var(--fs-xs);font-weight:600;letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--gray-500);background:#f1f3f2;border-bottom:1px solid #dfe4e1;padding:var(--sp-2) var(--sp-4)}
.sq-table-name code{text-transform:none;letter-spacing:0;color:var(--green-800);font-size:var(--fs-sm)}
.sq-table-name span{text-transform:none;letter-spacing:0;font-weight:500;color:var(--gray-400);margin-left:var(--sp-1)}
.sq-scroll{overflow-x:auto}
.sq-table{width:100%;border-collapse:collapse;font-size:var(--fs-sm);font-variant-numeric:tabular-nums}
.sq-table th{text-align:left;font-family:var(--font-mono);font-size:var(--fs-xs);font-weight:600;color:var(--green-800);background:var(--green-50);border-bottom:1px solid #dfe4e1;padding:var(--sp-2) var(--sp-4);white-space:nowrap}
.sq-table td{padding:var(--sp-2) var(--sp-4);border-top:1px solid #eef1ef;color:var(--text);white-space:nowrap}
.sq-table td.is-num{text-align:right;font-family:var(--font-mono);font-size:var(--fs-sm)}
.sq-null{font-family:var(--font-mono);font-size:var(--fs-xs);font-style:italic;color:var(--gray-400)}

.sq-result{margin-top:var(--sp-3)}
.sq-result .sq-table-wrap{border-color:#217346;box-shadow:0 0 0 1px #217346}
.sq-result .sq-table-name{background:#e8f3ec;color:var(--green-800)}

/* data contoh (bisa dilipat) */
.sq-sample{background:var(--white);border:1px dashed var(--green-400);border-radius:var(--radius-md)}
.sq-sample summary{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);padding:var(--sp-5) var(--sp-6);cursor:pointer;list-style:none}
.sq-sample summary::-webkit-details-marker{display:none}
.sq-sample summary>span{display:flex;flex-direction:column;gap:var(--sp-1)}
.sq-sample summary b{font-family:var(--font-display);font-size:var(--fs-lg);font-weight:600;color:var(--text)}
.sq-chev{flex-shrink:0;width:10px;height:10px;border-right:2px solid var(--gray-500);border-bottom:2px solid var(--gray-500);transform:rotate(45deg);margin-top:-3px;transition:transform .2s}
.sq-sample[open] .sq-chev{transform:rotate(-135deg);margin-top:3px}
.sq-sample-body{padding:0 var(--sp-6) var(--sp-6)}
.sq-sample.is-inline{border:0;background:none;border-radius:0;margin-bottom:var(--sp-4)}
.sq-sample.is-inline summary{padding:0 0 var(--sp-3)}
.sq-sample.is-inline summary b{font-family:var(--font-body);font-size:var(--fs-sm);font-weight:500;color:var(--gray-500)}
.sq-sample.is-inline .sq-sample-body{padding:0}

/* urutan eksekusi */
.sq-steps{list-style:none;counter-reset:step;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-3)}
.sq-steps li{counter-increment:step;position:relative;display:flex;flex-direction:column;gap:var(--sp-2);background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius-sm);padding:var(--sp-4)}
.sq-steps li::before{content:counter(step);position:absolute;top:var(--sp-3);right:var(--sp-4);font-family:var(--font-display);font-size:var(--fs-2xl);font-weight:700;color:var(--green-100)}
.sq-steps code{font-size:var(--fs-lg);font-weight:600;color:var(--green-800)}
.sq-steps span{font-size:var(--fs-sm);color:var(--gray-700);line-height:var(--lh-normal)}

.sq-dialect td:first-child{font-weight:500;color:var(--text);white-space:nowrap}
.sq-dialect td code{font-size:var(--fs-sm);color:var(--green-800);white-space:nowrap}

.sq-dialect-note{margin-top:var(--sp-8);background:var(--gold-soft);border-left:3px solid #d99a1e;border-radius:0 var(--radius-sm) var(--radius-sm) 0;padding:var(--sp-4) var(--sp-5);font-size:var(--fs-base);line-height:var(--lh-relaxed);color:#5c3d00}
.sq-dialect-note+.rx-tip{margin-top:var(--sp-4)}

/* sidebar */
.sq-chapter-list a{display:block;color:rgba(255,255,255,.8);border-radius:6px;padding:2px var(--sp-2);margin-left:calc(var(--sp-2) * -1)}
.sq-chapter-list a:hover{color:var(--white);background:rgba(255,255,255,.08)}
.sq-chapter-list code{font-size:var(--fs-sm)}
.sq-chapter-list .is-current a{color:var(--white);background:rgba(255,255,255,.14)}
.sq-side-link{display:flex;flex-direction:column;gap:var(--sp-1);background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius-md);padding:var(--sp-5);transition:border-color .2s}
.sq-side-link:hover{border-color:var(--green-400)}
.sq-side-link b{font-family:var(--font-display);font-size:var(--fs-md);font-weight:600;line-height:var(--lh-snug);color:var(--text)}

@media(max-width:960px){
  .sq-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px){
  .sq-sample summary{padding:var(--sp-4)}
  .sq-sample-body{padding:0 var(--sp-4) var(--sp-4)}
  .sq-editor pre{padding:var(--sp-3) var(--sp-4)}
}