/* ============================================================
   SQLISM BLOG — ARTICLE STYLES (reusable for all posts)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  --violet:#7c5cff; --cyan:#22d3ee; --lime:#a3e635; --lime-deep:#86c40f; --coral:#ff6b57; --amber:#f59e0b;
  --bg:#f3f1ea; --surface:#ffffff; --surface-2:#faf8f2;
  --line:rgba(10,13,26,.10); --line-strong:rgba(10,13,26,.16);
  --text:#12172a; --text-soft:#3f4763; --text-faint:#6b7288;
  --ink:#0a0d1a;
  --shadow-sm:0 2px 8px rgba(10,13,26,.06);
  --shadow-md:0 18px 44px -20px rgba(10,13,26,.28);
  --ease:cubic-bezier(.22,1,.36,1);
  --navbar-bg:#ffffff; --border:#e5e7eb; --bg-card:#ffffff; --text-primary:#1f2937; --text-secondary:#6b7280;
}
[data-theme="dark"]{
  --bg:#05060d; --surface:#0e1324; --surface-2:#0a0f1e;
  --line:rgba(255,255,255,.09); --line-strong:rgba(255,255,255,.16);
  --text:#eef1f8; --text-soft:#c3cadb; --text-faint:#8b93ab;
  --shadow-md:0 20px 50px -24px rgba(0,0,0,.7);
  --navbar-bg:#111827; --border:#374151; --bg-card:#1f2937; --text-primary:#f9fafb; --text-secondary:#d1d5db;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{
  font-family:'Plus Jakarta Sans',sans-serif; color:var(--text); background:var(--bg);
  min-height:100vh; overflow-x:clip; line-height:1.7;
  transition:background-color .3s ease,color .3s ease;
  background-image:
    radial-gradient(circle at 100% 0%, rgba(124,92,255,.08), transparent 34rem),
    radial-gradient(circle at 0% 100%, rgba(34,211,238,.06), transparent 32rem);
  background-attachment:fixed;
}

/* ---------- READING COLUMN ---------- */
.article-wrap{max-width:820px;margin:0 auto;padding:clamp(18px,3vw,34px) clamp(16px,4vw,28px) 60px;}

/* ---------- BREADCRUMB ---------- */
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:.82rem;color:var(--text-faint);margin:8px 0 22px;}
.crumb a{color:var(--text-faint);text-decoration:none;transition:color .2s ease;}
.crumb a:hover{color:var(--violet);}
.crumb i{font-size:.62rem;opacity:.7;}
.crumb .current{color:var(--text-soft);font-weight:600;}

/* ---------- HEADER ---------- */
.article-tag{
  display:inline-flex;align-items:center;gap:7px;margin-bottom:16px;padding:6px 13px;border-radius:999px;
  background:rgba(124,92,255,.10);color:var(--violet);border:1px solid rgba(124,92,255,.24);
  font-family:'JetBrains Mono',monospace;font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
}
.article-title{font-size:clamp(1.9rem,4.4vw,3rem);font-weight:800;letter-spacing:-.03em;line-height:1.12;color:var(--text);margin-bottom:16px;text-wrap:balance;}
.article-deck{font-size:clamp(1.05rem,1.7vw,1.28rem);color:var(--text-soft);line-height:1.6;margin-bottom:24px;}
.article-meta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);color:var(--text-faint);font-size:.86rem;}
.article-meta .avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--violet),#5b3ee0);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:.82rem;flex-shrink:0;}
.article-meta strong{color:var(--text);font-weight:700;}
.article-meta .dot{width:4px;height:4px;border-radius:50%;background:var(--text-faint);}

/* ---------- QUICK ANSWER BOX (LLM/snippet friendly) ---------- */
.answer-box{
  margin:30px 0;padding:22px 24px;border-radius:16px;position:relative;
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
  border:1px solid var(--line);border-left:4px solid var(--lime-deep);box-shadow:var(--shadow-sm);
}
.answer-box h2{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--lime-deep);font-family:'JetBrains Mono',monospace;margin-bottom:10px;display:flex;align-items:center;gap:8px;}
.answer-box p{font-size:1.05rem;color:var(--text);margin:0;}
.answer-box p+p{margin-top:10px;}

/* ---------- TABLE OF CONTENTS ---------- */
.toc{margin:30px 0;padding:20px 24px;border:1px solid var(--line);border-radius:14px;background:var(--surface);box-shadow:var(--shadow-sm);}
.toc h2{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint);font-family:'JetBrains Mono',monospace;margin-bottom:12px;}
.toc ol{list-style:none;counter-reset:toc;display:grid;gap:8px;}
.toc li{counter-increment:toc;}
.toc a{display:flex;gap:10px;text-decoration:none;color:var(--text-soft);font-weight:500;transition:color .2s ease;}
.toc a::before{content:counter(toc,decimal-leading-zero);color:var(--violet);font-family:'JetBrains Mono',monospace;font-size:.82rem;font-weight:600;}
.toc a:hover{color:var(--violet);}

/* ---------- BODY TYPOGRAPHY ---------- */
.article-body{font-size:1.06rem;color:var(--text-soft);}
.article-body h2{font-size:clamp(1.4rem,2.6vw,1.9rem);font-weight:800;letter-spacing:-.02em;color:var(--text);margin:44px 0 14px;line-height:1.25;scroll-margin-top:90px;}
.article-body h3{font-size:1.2rem;font-weight:700;color:var(--text);margin:28px 0 10px;}
.article-body p{margin:0 0 16px;}
.article-body a{color:var(--violet);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;}
.article-body strong{color:var(--text);font-weight:700;}
.article-body ul,.article-body ol{margin:0 0 16px 1.2em;display:grid;gap:8px;}
.article-body li{padding-left:4px;}
.article-body code{
  font-family:'JetBrains Mono',monospace;font-size:.88em;background:rgba(124,92,255,.10);
  color:var(--violet);padding:2px 6px;border-radius:6px;border:1px solid rgba(124,92,255,.18);
}
[data-theme="dark"] .article-body code{color:#c9bcff;}

/* ---------- EXECUTION ORDER STEPS ---------- */
.exec-steps{list-style:none;margin:24px 0;display:grid;gap:10px;counter-reset:step;}
.exec-steps li{
  counter-increment:step;display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;
  padding:14px 18px;border:1px solid var(--line);border-radius:12px;background:var(--surface);box-shadow:var(--shadow-sm);
}
.exec-steps li::before{
  content:counter(step);width:34px;height:34px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;
  font-family:'JetBrains Mono',monospace;font-weight:700;color:#0a0d1a;
  background:linear-gradient(135deg,var(--lime),var(--cyan));
  grid-row:1 / span 2;align-self:start;
}
.exec-steps b{color:var(--text);font-family:'JetBrains Mono',monospace;letter-spacing:.02em;}
.exec-steps span{color:var(--text-faint);font-size:.92rem;}

/* ---------- CODE BLOCKS ---------- */
.code{margin:20px 0;border-radius:12px;overflow:hidden;border:1px solid var(--line-strong);box-shadow:var(--shadow-sm);}
.code-head{display:flex;align-items:center;gap:8px;padding:9px 14px;background:var(--ink);border-bottom:1px solid rgba(255,255,255,.08);}
.code-head .dots{display:flex;gap:6px;}
.code-head .dots i{width:10px;height:10px;border-radius:50%;display:inline-block;}
.code-head .dots i:nth-child(1){background:#fb7185;}
.code-head .dots i:nth-child(2){background:#facc15;}
.code-head .dots i:nth-child(3){background:#22c55e;}
.code-head span{margin-left:6px;color:rgba(226,232,240,.6);font-family:'JetBrains Mono',monospace;font-size:.74rem;}
.code pre{margin:0;padding:16px 18px;background:#070a15;overflow-x:auto;}
.code code{
  font-family:'JetBrains Mono',monospace;font-size:.9rem;line-height:1.65;color:#d9e0f5;
  background:none;border:none;padding:0;border-radius:0;white-space:pre;
}
.code .k{color:#c8f65f;}   /* keyword */
.code .fn{color:#67e8f9;}  /* function */
.code .s{color:#fca5a5;}   /* string */
.code .n{color:#fbbf24;}   /* number */
.code .c{color:#7c86a3;font-style:italic;} /* comment */
.code .al{color:#c9bcff;}  /* alias / column */

/* ---------- COMPARISON TABLE ---------- */
.tbl-wrap{margin:20px 0;overflow-x:auto;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-sm);}
table.cmp{width:100%;border-collapse:collapse;font-size:.95rem;background:var(--surface);}
table.cmp th,table.cmp td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--line);}
table.cmp thead th{background:var(--ink);color:#e7eaf5;font-weight:700;font-size:.85rem;letter-spacing:.03em;}
table.cmp tbody tr:last-child td{border-bottom:none;}
table.cmp tbody tr:hover td{background:rgba(124,92,255,.05);}
table.cmp td:first-child{font-weight:600;color:var(--text);}

/* ---------- CALLOUTS ---------- */
.callout{margin:22px 0;padding:16px 18px 16px 46px;border-radius:12px;position:relative;font-size:.98rem;line-height:1.6;}
.callout::before{position:absolute;left:16px;top:16px;font-family:'Font Awesome 6 Free';font-weight:900;}
.callout.tip{background:rgba(34,211,238,.08);border:1px solid rgba(34,211,238,.28);color:var(--text-soft);}
.callout.tip::before{content:'\f0eb';color:#0891b2;}
.callout.warn{background:rgba(245,158,11,.10);border:1px solid rgba(245,158,11,.3);color:var(--text-soft);}
.callout.warn::before{content:'\f071';color:#b45309;}
.callout strong{color:var(--text);}

/* ---------- KEY TAKEAWAYS ---------- */
.takeaways{margin:34px 0;padding:22px 24px;border-radius:16px;border:1px solid var(--line);
  background:radial-gradient(120% 140% at 100% 0%,rgba(124,92,255,.10),transparent 55%),var(--surface);box-shadow:var(--shadow-sm);}
.takeaways h2{margin:0 0 14px;font-size:1.15rem;color:var(--text);display:flex;align-items:center;gap:10px;}
.takeaways h2 i{color:var(--lime-deep);}
.takeaways ul{list-style:none;margin:0;display:grid;gap:10px;}
.takeaways li{position:relative;padding-left:26px;color:var(--text-soft);line-height:1.6;}
.takeaways li::before{content:'\f00c';position:absolute;left:0;top:.25em;font-family:'Font Awesome 6 Free';font-weight:900;color:var(--lime-deep);font-size:.85rem;}

/* ---------- FAQ ---------- */
.faq{margin:36px 0;}
.faq h2{font-size:clamp(1.4rem,2.6vw,1.9rem);font-weight:800;letter-spacing:-.02em;color:var(--text);margin-bottom:16px;}
.faq details{border:1px solid var(--line);border-radius:12px;background:var(--surface);margin-bottom:10px;overflow:hidden;box-shadow:var(--shadow-sm);}
.faq summary{list-style:none;cursor:pointer;padding:16px 18px;font-weight:700;color:var(--text);display:flex;align-items:center;justify-content:space-between;gap:12px;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:'\f067';font-family:'Font Awesome 6 Free';font-weight:900;color:var(--violet);font-size:.8rem;transition:transform .2s ease;}
.faq details[open] summary::after{content:'\f068';}
.faq details p{padding:0 18px 16px;color:var(--text-soft);margin:0;}

/* ---------- RELATED / CTA ---------- */
.related{margin:40px 0 0;padding:24px;border-radius:18px;border:1px solid var(--line);
  background:linear-gradient(158deg,#0c1024,#0a0d1a 70%);color:#fff;box-shadow:var(--shadow-md);}
.related h2{font-size:1.2rem;font-weight:800;color:#fff;margin-bottom:6px;}
.related p{color:rgba(226,232,240,.75);font-size:.95rem;margin-bottom:16px;}
.related .rel-links{display:flex;flex-wrap:wrap;gap:12px;}
.related a{display:inline-flex;align-items:center;gap:9px;padding:11px 18px;border-radius:11px;text-decoration:none;font-weight:700;font-size:.92rem;transition:transform .2s var(--ease);}
.related a.primary{background:linear-gradient(180deg,#c8f65f,#a3e635);color:#10210a;}
.related a.ghost{background:rgba(255,255,255,.07);color:#f4f6ff;border:1px solid rgba(255,255,255,.16);}
.related a:hover{transform:translateY(-2px);}

/* ---------- AUTHOR / UPDATED ---------- */
.article-foot{margin-top:34px;padding-top:20px;border-top:1px solid var(--line);color:var(--text-faint);font-size:.86rem;display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.article-foot i{color:var(--violet);}

/* ---------- JOIN / VENN VISUALS (reusable) ---------- */
.viz-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:26px 0;}
.viz-card{border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:18px 14px;text-align:center;box-shadow:var(--shadow-sm);transition:transform .3s var(--ease),box-shadow .3s var(--ease);}
.viz-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);}
.viz-card h4{font-family:'JetBrains Mono',monospace;font-size:.82rem;letter-spacing:.04em;color:var(--text);margin:10px 0 4px;}
.viz-card p{font-size:.83rem;color:var(--text-faint);margin:0;line-height:1.45;}
.venn{width:168px;max-width:100%;height:auto;margin:0 auto;display:block;}
.venn .vc{fill:rgba(124,92,255,.05);stroke:#7c5cff;stroke-width:2;}
.venn .vfill{fill:rgba(124,92,255,.5);}
.venn text{fill:var(--text-faint);font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:600;}
[data-theme="dark"] .venn .vc{fill:rgba(124,92,255,.08);}
@media (max-width:640px){.viz-grid{grid-template-columns:1fr;max-width:320px;margin-left:auto;margin-right:auto;}}

/* small caption under a table/figure */
.figcap{font-size:.82rem;color:var(--text-faint);margin:-6px 0 20px;text-align:center;}
.null-cell{color:var(--coral);font-family:'JetBrains Mono',monospace;font-size:.85rem;}

/* ---------- BEFORE/AFTER QUERY TIMING SCREENSHOTS ---------- */
.timing-compare{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:22px 0 6px;}
.timing-card{border-radius:12px;overflow:hidden;border:1px solid var(--line-strong);box-shadow:var(--shadow-sm);background:#070a15;}
.timing-card .code-head{display:flex;align-items:center;gap:8px;padding:9px 14px;background:var(--ink);border-bottom:1px solid rgba(255,255,255,.08);}
.timing-card .code-head .dots{display:flex;gap:6px;}
.timing-card .code-head .dots i{width:10px;height:10px;border-radius:50%;display:inline-block;}
.timing-card .code-head .dots i:nth-child(1){background:#fb7185;}
.timing-card .code-head .dots i:nth-child(2){background:#facc15;}
.timing-card .code-head .dots i:nth-child(3){background:#22c55e;}
.timing-card .code-head span{margin-left:6px;color:rgba(226,232,240,.6);font-family:'JetBrains Mono',monospace;font-size:.74rem;}
.timing-card .timing-badge{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:.66rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:999px;}
.timing-card.before .timing-badge,.timing-card.slow .timing-badge{background:rgba(255,107,87,.16);color:#ff9a8b;border:1px solid rgba(255,107,87,.35);}
.timing-card.after .timing-badge,.timing-card.fast .timing-badge{background:rgba(163,230,53,.16);color:#c8f65f;border:1px solid rgba(163,230,53,.35);}
.timing-card pre{margin:0;padding:16px 18px 6px;background:#070a15;overflow-x:auto;}
.timing-card code{font-family:'JetBrains Mono',monospace;font-size:.86rem;line-height:1.6;color:#d9e0f5;background:none;border:none;padding:0;white-space:pre;}
.timing-card .k{color:#c8f65f;} .timing-card .fn{color:#67e8f9;} .timing-card .s{color:#fca5a5;} .timing-card .n{color:#fbbf24;} .timing-card .c{color:#7c86a3;font-style:italic;}
.timing-card .timing-readout{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:12px 18px 16px;border-top:1px dashed rgba(255,255,255,.1);}
.timing-card .timing-label{font-family:'JetBrains Mono',monospace;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(226,232,240,.55);}
.timing-card .timing-ms{font-family:'JetBrains Mono',monospace;font-weight:800;font-size:1.55rem;}
.timing-card.before .timing-ms,.timing-card.slow .timing-ms{color:#ff8a75;}
.timing-card.after .timing-ms,.timing-card.fast .timing-ms{color:#a3e635;}
.timing-compare-caption{display:flex;align-items:center;justify-content:center;gap:10px;margin:12px 0 20px;font-family:'JetBrains Mono',monospace;font-size:.82rem;color:var(--text-faint);flex-wrap:wrap;text-align:center;}
.timing-compare-caption .speedup{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;background:rgba(163,230,53,.14);color:var(--lime-deep);border:1px solid rgba(163,230,53,.32);font-weight:700;}
[data-theme="dark"] .timing-compare-caption .speedup{color:#c8f65f;}
.timing-compare-caption .regression{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;background:rgba(255,107,87,.14);color:#c2410c;border:1px solid rgba(255,107,87,.32);font-weight:700;}
[data-theme="dark"] .timing-compare-caption .regression{color:#ff9a8b;}
@media (max-width:640px){.timing-compare{grid-template-columns:1fr;}}

/* ---------- WRONG VS CORRECT OUTPUT TABLES ---------- */
.output-compare{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:20px 0 26px;}
.output-panel{border-radius:12px;overflow:hidden;border:1px solid var(--line-strong);box-shadow:var(--shadow-sm);background:var(--surface);}
.output-panel .output-head{display:flex;align-items:center;gap:8px;padding:10px 14px;font-family:'JetBrains Mono',monospace;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;}
.output-panel.wrong .output-head{background:rgba(255,107,87,.12);color:#c2410c;border-bottom:1px solid rgba(255,107,87,.3);}
.output-panel.correct .output-head{background:rgba(163,230,53,.12);color:var(--lime-deep);border-bottom:1px solid rgba(163,230,53,.3);}
[data-theme="dark"] .output-panel.wrong .output-head{color:#ff9a8b;}
[data-theme="dark"] .output-panel.correct .output-head{color:#c8f65f;}
.output-panel table{width:100%;border-collapse:collapse;font-size:.88rem;}
.output-panel th,.output-panel td{padding:8px 12px;text-align:left;border-bottom:1px solid var(--line);}
.output-panel thead th{background:var(--surface-2);color:var(--text-faint);font-weight:700;font-size:.76rem;letter-spacing:.02em;text-transform:uppercase;}
.output-panel tbody tr:last-child td{border-bottom:none;}
.output-panel.wrong td{color:var(--text-soft);}
.output-panel.wrong tbody tr td:first-child{position:relative;}
@media (max-width:640px){.output-compare{grid-template-columns:1fr;}}