/* =========================================================
   ZENNIT — Kamus Rumus Excel (/rumus, /rumus/{slug})
   Nuansa lembar kerja Excel: formula bar "fx", sel hasil dengan fill handle, grid data.
   ========================================================= */

.rx-page{background:#f6f8f7}
.rx-wrap{max-width:1120px;margin:0 auto;padding:0 var(--sp-12)}
.rx-eyebrow{font-family:var(--font-display);font-size:var(--fs-xs);font-weight:600;letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--green-600)}
.rx-muted{font-size:var(--fs-sm);color:var(--gray-500);line-height:var(--lh-normal);margin-top:var(--sp-3)}
.rx-page code{font-family:var(--font-body)}
.rx-card-top code,.rx-head h1 code,.rx-pager code{font-family:var(--font-display)}

/* warna sintaks rumus (kelas dari export_web.py, sama dengan e-book) */
.tf{color:var(--green-700);font-weight:600}
.ts{color:#b0531f}
.tr{color:#2f5fb3}
.tn{color:#7a3fb0}
.opt{color:var(--gray-500)}
.rx-page p code,.rx-page td code,.rx-tip code{background:var(--green-50);border:1px solid var(--green-100);border-radius:6px;padding:1px var(--sp-1);font-size:.9em;color:var(--green-800);white-space:nowrap}

.rx-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);background:var(--green-800);color:var(--white);border-radius:12px;padding:var(--sp-3) var(--sp-5);font-family:var(--font-display);font-size:var(--fs-md);font-weight:600;white-space:nowrap;transition:background .2s,transform .2s}
.rx-btn:hover{background:var(--green-700);transform:translateY(-1px)}
.rx-btn.is-light{background:var(--white);color:var(--green-800)}
.rx-btn.is-light:hover{background:var(--green-50)}

/* ─── hero ─── */
.rx-hero{background:var(--white);border-bottom:1px solid var(--gray-200);padding:var(--sp-16) 0 var(--sp-8)}
.rx-hero h1{font-family:var(--font-display);font-size:var(--fs-h1);font-weight:700;line-height:var(--lh-tight);letter-spacing:var(--ls-tight);color:var(--text);margin-top:var(--sp-4);max-width:820px}
.rx-hero h1 span{color:var(--green-500)}
.rx-lead{font-size:var(--fs-lg);line-height:var(--lh-relaxed);color:var(--gray-700);margin-top:var(--sp-4);max-width:680px}

.rx-search{display:flex;align-items:center;gap:var(--sp-3);margin-top:var(--sp-8);max-width:680px;background:var(--white);border:1.5px solid var(--gray-200);border-radius:12px;padding:var(--sp-1) var(--sp-4) var(--sp-1) var(--sp-1);color:var(--gray-400);transition:border-color .2s,box-shadow .2s}
.rx-search:focus-within{border-color:var(--green-500);box-shadow:0 0 0 4px rgba(42,140,90,.12)}
.rx-search input{flex:1;min-width:0;border:0;outline:0;background:none;font-family:var(--font-body);font-size:var(--fs-lg);color:var(--text);padding:var(--sp-3) 0}
.rx-fx{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;min-width:40px;align-self:stretch;border-right:1px solid var(--gray-200);font-family:var(--font-body);font-style:italic;font-size:var(--fs-md);color:var(--gray-500)}

.rx-tabs{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-top:var(--sp-6)}
.rx-tabs a{font-size:var(--fs-sm);font-weight:500;color:var(--gray-700);background:var(--gray-100);border:1px solid var(--gray-200);border-radius:999px;padding:var(--sp-1) var(--sp-3);transition:background .2s,color .2s}
.rx-tabs a:hover{background:var(--green-800);border-color:var(--green-800);color:var(--white)}
.rx-tabs small{font-size:var(--fs-2xs);opacity:.65;margin-left:2px}

/* ─── daftar per bab ─── */
.rx-body{padding-top:var(--sp-10);padding-bottom:var(--sp-16)}
.rx-chapter{margin-top:var(--sp-14);scroll-margin-top:calc(var(--nav-h) + var(--sp-4))}
.rx-chapter-head{display:grid;grid-template-columns:auto 1fr;column-gap:var(--sp-4);align-items:baseline;border-bottom:2px solid var(--text);padding-bottom:var(--sp-3);margin-bottom:var(--sp-5)}
.rx-chapter-no{grid-row:span 2;font-family:var(--font-display);font-weight:600;font-size:var(--fs-sm);color:var(--gray-500)}
.rx-chapter-head h2{font-family:var(--font-display);font-size:var(--fs-h4);font-weight:700;color:var(--text);line-height:var(--lh-snug);letter-spacing:var(--ls-tight)}
.rx-chapter-head p{font-size:var(--fs-md);color:var(--gray-500);margin-top:var(--sp-1)}
.rx-empty{margin-top:var(--sp-10);text-align:center;color:var(--gray-500);font-size:var(--fs-base)}

.rx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--sp-3)}
.rx-card{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);transition:border-color .2s,transform .2s,box-shadow .2s}
.rx-card:hover{border-color:var(--green-400);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.rx-card-top{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2)}
.rx-card-top code{font-size:var(--fs-lg);font-weight:600;color:var(--green-800)}
.rx-card-desc{font-size:var(--fs-sm);line-height:var(--lh-normal);color:var(--gray-700)}
.rx-ver{font-family:var(--font-display);font-size:var(--fs-2xs);font-weight:600;letter-spacing:var(--ls-wide);border-radius:6px;padding:2px var(--sp-2);background:var(--gray-100);color:var(--gray-500)}
.rx-ver.is-365{background:var(--gold-soft);color:#9a5d00}

/* e-book */
.rx-ebook{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-6);background:var(--white);border:1px dashed var(--green-400);border-radius:var(--radius-md);padding:var(--sp-6) var(--sp-8)}
.rx-ebook h2{font-family:var(--font-display);font-size:var(--fs-2xl);font-weight:700;color:var(--text);margin-top:var(--sp-1)}
.rx-ebook-copy p:last-child{font-size:var(--fs-md);color:var(--gray-700);margin-top:var(--sp-1)}
.rx-ebook.is-compact{flex-direction:column;align-items:stretch;padding:var(--sp-5);gap:var(--sp-4)}
.rx-ebook.is-compact h2{font-size:var(--fs-lg)}

/* resep, error, shortcut */
.rx-recipes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3)}
.rx-recipe{background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius-sm);padding:var(--sp-5)}
.rx-recipe h3{font-family:var(--font-display);font-size:var(--fs-lg);font-weight:600;color:var(--text)}
.rx-recipe .rx-formula{margin-top:var(--sp-3)}
.rx-recipe p{font-size:var(--fs-sm);line-height:var(--lh-normal);color:var(--gray-700);margin-top:var(--sp-3)}

.rx-table-wrap{overflow-x:auto;background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius-sm)}
.rx-table{width:100%;border-collapse:collapse;font-size:var(--fs-md);line-height:var(--lh-normal)}
.rx-table th{text-align:left;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:var(--gray-100);padding:var(--sp-3) var(--sp-4)}
.rx-table td{padding:var(--sp-3) var(--sp-4);border-top:1px solid var(--gray-200);color:var(--gray-700);vertical-align:top}
.rx-page .rx-err-name{color:#b42318;background:#fdecea;border:1px solid #f6c9c4;border-radius:6px;padding:0 var(--sp-2)}
.rx-head h1 .rx-err-name{padding:0 var(--sp-2)}

/* halaman error */
.rx-causes{list-style:none;counter-reset:cause;display:flex;flex-direction:column;gap:var(--sp-4)}
.rx-causes li{counter-increment:cause;background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius-sm);padding:var(--sp-5)}
.rx-causes h3{display:flex;gap:var(--sp-3);font-family:var(--font-display);font-size:var(--fs-lg);font-weight:600;color:var(--text);line-height:var(--lh-snug)}
.rx-causes h3::before{content:counter(cause);flex-shrink:0;width:26px;height:26px;border-radius:8px;background:var(--green-800);color:var(--white);font-size:var(--fs-xs);display:flex;align-items:center;justify-content:center}
.rx-causes .rx-formula{margin-top:var(--sp-3)}
.rx-causes p{font-size:var(--fs-base);line-height:var(--lh-relaxed);color:var(--gray-700);margin-top:var(--sp-3)}
.rx-formula.is-bad{border-color:#f6c9c4;background:#fffafa}
.rx-formula.is-good{border-color:var(--green-400);background:var(--green-50);margin-top:var(--sp-4)}
.rx-practice .rx-error-list{list-style:none;display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-3)}
.rx-error-list a code{display:inline-block;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:8px;padding:var(--sp-1) var(--sp-2);font-size:var(--fs-sm);color:var(--white);white-space:nowrap}
.rx-error-list a:hover code{background:rgba(255,255,255,.2)}

.rx-keys{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-2)}
.rx-keys li{display:flex;align-items:center;gap:var(--sp-4);background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius-sm);padding:var(--sp-3) var(--sp-4);font-size:var(--fs-md);color:var(--gray-700)}
.rx-keys kbd{flex-shrink:0;min-width:150px;font-family:var(--font-display);font-size:var(--fs-sm);font-weight:600;color:var(--text)}

.rx-cta{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-8);margin-top:var(--sp-16);background:var(--green-800);color:var(--white);border-radius:var(--radius-lg);padding:var(--sp-10) var(--sp-12)}
.rx-cta .rx-eyebrow{color:var(--gold)}
.rx-cta h2{font-family:var(--font-display);font-size:var(--fs-h3);font-weight:700;line-height:var(--lh-tight);letter-spacing:var(--ls-tight);margin-top:var(--sp-2)}
.rx-cta h2 span{color:var(--green-400)}
.rx-cta p:last-child{font-size:var(--fs-base);line-height:var(--lh-normal);color:rgba(255,255,255,.8);margin-top:var(--sp-3);max-width:560px}

/* ─── halaman detail ─── */
.rx-detail{padding-top:var(--sp-10);padding-bottom:var(--sp-16)}
.rx-crumbs{display:flex;gap:var(--sp-2);font-size:var(--fs-sm);color:var(--gray-400)}
.rx-crumbs a{color:var(--gray-500);font-weight:500}
.rx-crumbs a:hover{color:var(--green-600)}
.rx-head{margin-top:var(--sp-6);max-width:780px}
.rx-head h1{font-family:var(--font-display);font-size:var(--fs-h1);font-weight:700;line-height:var(--lh-tight);letter-spacing:var(--ls-tight);color:var(--text);margin-top:var(--sp-3)}
.rx-head h1 code{color:var(--green-600);font-weight:700}
.rx-note{margin-top:var(--sp-4);font-size:var(--fs-sm);color:#7a4a00;background:var(--gold-soft);border-radius:var(--radius-sm);padding:var(--sp-3) var(--sp-4)}

.rx-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--sp-10);margin-top:var(--sp-10);align-items:start}
.rx-block+.rx-block{margin-top:var(--sp-10)}
.rx-block h2{font-family:var(--font-display);font-size:var(--fs-2xl);font-weight:700;color:var(--text);margin-bottom:var(--sp-4)}
.rx-syntax{background:var(--green-900);color:#e6f4ec;border-radius:var(--radius-sm);padding:var(--sp-5);white-space:pre-wrap;overflow-wrap:anywhere;font-size:var(--fs-lg);margin-bottom:var(--sp-4)}
.rx-syntax .tf{color:var(--green-400)}
.rx-syntax .opt{color:var(--gray-400)}
.rx-args td:first-child{width:32%}

/* lembar data contoh */
.rx-sheet{overflow-x:auto;background:var(--white);border:1px solid #d4dbd6;border-radius:var(--radius-sm) var(--radius-sm) 0 0}
.rx-sheet .grid{border-collapse:collapse;font-size:var(--fs-sm);font-variant-numeric:tabular-nums;min-width:100%}
.rx-sheet th{background:#f1f3f2;color:var(--gray-500);font-weight:500;font-size:var(--fs-xs);border:1px solid #dfe4e1;padding:2px var(--sp-2);text-align:center;min-width:32px}
.rx-sheet td{border:1px solid #e6eae8;padding:var(--sp-1) var(--sp-3);white-space:nowrap;color:var(--text)}
.rx-sheet td.num{text-align:right}
.rx-sheet td.gap,.rx-sheet th.gap{min-width:16px;padding:0;background:#fafbfa}
.rx-sheet tr.hdr td{font-weight:600;background:var(--green-50)}
.rx-sheet .corner{background:#e8ece9}

.rx-result{display:grid;grid-template-columns:minmax(0,1fr) auto;border:1px solid #d4dbd6;border-radius:0 0 var(--radius-sm) var(--radius-sm);background:var(--white)}
.rx-sheet+.rx-result{border-top:0}
.rx-result:first-child{border-radius:var(--radius-sm)}
.rx-formula{display:flex;align-items:stretch;min-width:0;background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius-sm)}
.rx-result .rx-formula{border:0;border-right:1px solid #d4dbd6;border-radius:0}
.rx-formula code{flex:1;min-width:0;overflow-x:auto;white-space:nowrap;padding:var(--sp-3) var(--sp-4);font-size:var(--fs-base);color:var(--text)}
.rx-copy{flex-shrink:0;border:0;background:none;color:var(--gray-400);padding:0 var(--sp-3);cursor:pointer;transition:color .2s}
.rx-copy:hover{color:var(--green-600)}
.rx-copy.is-done{color:var(--green-500)}
.rx-cell{display:flex;flex-direction:column;justify-content:center;padding:var(--sp-2) var(--sp-5);min-width:150px}
.rx-cell span{font-size:var(--fs-2xs);color:var(--gray-500);text-transform:uppercase;letter-spacing:var(--ls-caps)}
.rx-cell b{position:relative;align-self:flex-start;font-family:var(--font-display);font-size:var(--fs-lg);font-weight:600;color:var(--text);outline:2px solid #217346;outline-offset:2px;padding:0 var(--sp-1);margin-top:var(--sp-1)}
.rx-cell b::after{content:"";position:absolute;right:-6px;bottom:-6px;width:6px;height:6px;background:#217346;border:1px solid var(--white)}
.rx-explain{font-size:var(--fs-base);line-height:var(--lh-relaxed);color:var(--gray-700);margin-top:var(--sp-4)}
.rx-tip{margin-top:var(--sp-8);background:var(--green-50);border-left:3px solid var(--green-500);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:var(--gray-700)}
.rx-tip b{color:var(--green-800)}
.rx-tpl{margin-top:var(--sp-5);font-size:var(--fs-md);color:var(--gray-700)}
.rx-tpl a{color:var(--green-600);font-weight:600;text-decoration:underline;text-underline-offset:3px}

.rx-pager{display:flex;justify-content:space-between;gap:var(--sp-4);margin-top:var(--sp-12);padding-top:var(--sp-6);border-top:1px solid var(--gray-200)}
.rx-pager a{display:flex;flex-direction:column;gap:2px}
.rx-pager a.is-next{text-align:right;margin-left:auto}
.rx-pager small{font-size:var(--fs-xs);color:var(--gray-500)}
.rx-pager code{font-size:var(--fs-lg);font-weight:600;color:var(--green-700)}
.rx-pager a:hover code{text-decoration:underline}

.rx-side{position:sticky;top:calc(var(--nav-h) + var(--sp-6));display:flex;flex-direction:column;gap:var(--sp-4)}
.rx-practice{background:var(--green-800);color:var(--white);border-radius:var(--radius-md);padding:var(--sp-6)}
.rx-practice .rx-eyebrow{color:var(--gold)}
.rx-practice h2{font-family:var(--font-display);font-size:var(--fs-xl);font-weight:700;margin-top:var(--sp-1)}
.rx-practice ul{list-style:none;margin-top:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-2)}
.rx-practice li{display:flex;gap:var(--sp-3);font-size:var(--fs-sm);line-height:var(--lh-snug)}
.rx-practice li span{flex-shrink:0;font-family:var(--font-display);font-weight:600;color:var(--green-400)}
.rx-practice .rx-muted{color:rgba(255,255,255,.7)}
.rx-practice .rx-btn{width:100%;margin-top:var(--sp-5);background:var(--white);color:var(--green-800)}
.rx-practice .rx-btn:hover{background:var(--green-50)}

.rx-related{margin-top:var(--sp-16)}
.rx-related h2{font-family:var(--font-display);font-size:var(--fs-2xl);font-weight:700;color:var(--text);margin-bottom:var(--sp-5)}
.rx-all{display:inline-block;margin-top:var(--sp-5);font-size:var(--fs-md);font-weight:600;color:var(--green-600)}

@media(max-width:960px){
  .rx-wrap{padding-left:var(--sp-5);padding-right:var(--sp-5)}
  .rx-hero{padding-top:var(--sp-10)}
  .rx-layout{grid-template-columns:minmax(0,1fr)}
  .rx-side{position:static}
  .rx-recipes,.rx-keys{grid-template-columns:1fr}
  .rx-cta{flex-direction:column;align-items:flex-start;padding:var(--sp-8) var(--sp-6)}
}
@media(max-width:600px){
  .rx-ebook{flex-direction:column;align-items:stretch;padding:var(--sp-5)}
  .rx-result{grid-template-columns:1fr}
  .rx-result .rx-formula{border-right:0;border-bottom:1px solid #d4dbd6}
  .rx-tabs{flex-wrap:nowrap;overflow-x:auto;margin-right:calc(var(--sp-5) * -1);padding-bottom:var(--sp-1)}
  .rx-tabs a{white-space:nowrap}
  .rx-keys kbd{min-width:110px}
}