/* ============================================================
   blog.css — research/blog post component kit (scoped to .cs-prose)
   Theme-aware (design tokens), responsive, sharp/industrial.
   All visuals are HTML/SVG/CSS — no images. Animations respect
   prefers-reduced-motion. Loaded only on /research/{slug} pages.
   ============================================================ */

/* --- Long-form readability --- */
.cs-prose{counter-reset:ptfig}
.cs-prose>h2{font-family:var(--display);font-size:23px;font-weight:800;letter-spacing:-.02em;margin:2.2em 0 .55em;padding-top:.7em;border-top:1px solid var(--border-2)}
.cs-prose>h3{font-family:var(--display);font-size:17px;font-weight:700;margin:1.7em 0 .45em}
.cs-prose p{margin:0 0 1.1em;line-height:1.72}
.cs-prose ul,.cs-prose ol{margin:0 0 1.2em;padding-left:1.3em;line-height:1.7}
.cs-prose li{margin:.35em 0}
.cs-prose a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.cs-prose strong{color:var(--text);font-weight:700}
.cs-prose hr{border:none;border-top:1px solid var(--border-2);margin:2em 0}

/* --- Tables: plain markdown tables, made scrollable on narrow screens via
   display:block + overflow-x (no wrapper div needed, so markdown still parses) --- */
.cs-prose table{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border-collapse:collapse;margin:1.4em 0;font-size:14px}
.cs-prose th{text-align:left;font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-dim);background:rgba(127,127,127,.06);padding:9px 12px;border-bottom:2px solid var(--border-3)}
.cs-prose td{padding:9px 12px;border-bottom:1px solid var(--border-2);vertical-align:top}
.cs-prose tbody tr:last-child td{border-bottom:none}

/* --- Key takeaways / TL;DR panel --- */
.pt-tldr{margin:1.6em 0;padding:15px 18px;border:1px solid var(--border-2);border-left:3px solid var(--accent);background:rgba(127,127,127,.03)}
.pt-tldr-h{font-family:var(--mono);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--accent);margin:0 0 8px}
.pt-tldr ul{margin:0;padding-left:1.1em}
.pt-tldr li{margin:.3em 0}

/* --- Callouts (info / key / warn) --- */
.pt-callout{margin:1.4em 0;padding:13px 16px;border:1px solid var(--border-2);border-left:3px solid var(--text-faint);font-size:14.5px;line-height:1.65}
.pt-callout .pt-callout-h{display:block;font-weight:700;margin-bottom:3px}
.pt-callout.info{border-left-color:var(--accent)}
.pt-callout.key{border-left-color:var(--bull)}
.pt-callout.warn{border-left-color:var(--bear)}

/* --- Pull quote --- */
.pt-quote{margin:1.6em 0;padding:4px 0 4px 20px;border-left:3px solid var(--accent);font-family:var(--display);font-size:19px;font-weight:500;font-style:italic;line-height:1.5;color:var(--text)}
.pt-quote cite{display:block;margin-top:8px;font-size:13px;font-style:normal;font-weight:600;color:var(--text-dim)}
.pt-quote cite::before{content:"— "}

/* --- Stat cards --- */
.pt-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1px;background:var(--border-2);border:1px solid var(--border-2);margin:1.6em 0}
.pt-stat{background:var(--bg-1);padding:15px 16px}
.pt-stat-num{font-family:var(--mono);font-size:25px;font-weight:600;letter-spacing:-.02em;line-height:1}
.pt-stat-num.pos{color:var(--bull)}.pt-stat-num.neg{color:var(--bear)}
.pt-stat-lbl{font-size:12px;color:var(--text-dim);margin-top:6px;line-height:1.4}

/* --- Numbered steps --- */
.pt-steps{list-style:none;counter-reset:ptstep;padding:0;margin:1.6em 0}
.pt-steps>li{position:relative;counter-increment:ptstep;padding:0 0 16px 46px;margin:0}
.pt-steps>li::before{content:counter(ptstep);position:absolute;left:0;top:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-weight:600;font-size:13px;color:#fff;background:var(--accent)}
.pt-steps>li:not(:last-child)::after{content:"";position:absolute;left:14px;top:34px;bottom:2px;width:1px;background:var(--border-3)}
.pt-step-h{font-weight:700;display:block;margin-bottom:2px}

/* --- Cause -> effect flow --- */
.pt-flow{display:flex;flex-wrap:wrap;align-items:stretch;margin:1.6em 0}
.pt-flow-step{flex:1 1 120px;min-width:108px;border:1px solid var(--border-2);padding:12px;font-size:13px;line-height:1.45;background:var(--bg-1)}
.pt-flow-step .h{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-faint);display:block;margin-bottom:4px}
.pt-flow-arrow{display:flex;align-items:center;justify-content:center;color:var(--accent);font-size:18px;padding:0 7px;flex:0 0 auto}
@media(max-width:560px){.pt-flow{flex-direction:column}.pt-flow-arrow{transform:rotate(90deg);padding:5px 0}}

/* --- Timeline (case studies) --- */
.pt-timeline{position:relative;margin:1.6em 0;padding-left:8px;border-left:2px solid var(--border-3)}
.pt-tl{position:relative;padding:0 0 18px 18px}
.pt-tl::before{content:"";position:absolute;left:-7px;top:4px;width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px var(--bg-1)}
.pt-tl-date{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--accent)}
.pt-tl-h{font-weight:700;margin:1px 0 2px}

/* --- Figure wrapper + auto-numbered caption --- */
.pt-fig{margin:1.6em 0;border:1px solid var(--border-2);background:var(--bg-1);padding:16px}
.pt-fig svg{display:block;width:100%;height:auto}
.pt-fig-cap{font-size:12px;color:var(--text-faint);margin-top:10px;font-family:var(--mono)}
.pt-fig-cap::before{counter-increment:ptfig;content:"Fig. " counter(ptfig) " — "}

/* --- CSS bar chart (animated grow) --- */
.pt-bars{margin:1.6em 0}
.pt-bar-row{display:grid;grid-template-columns:96px 1fr 54px;align-items:center;gap:10px;margin:7px 0;font-size:13px}
.pt-bar-lbl{color:var(--text-dim)}
.pt-bar-track{position:relative;height:18px;background:rgba(127,127,127,.12)}
.pt-bar-fill{position:absolute;left:0;top:0;bottom:0;width:100%;background:var(--accent);transform-origin:left;animation:ptgrow .9s ease-out both}
.pt-bar-fill.pos{background:var(--bull)}.pt-bar-fill.neg{background:var(--bear)}
.pt-bar-val{font-family:var(--mono);text-align:right;color:var(--text-dim)}
@keyframes ptgrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* --- SVG line-draw helper (add pathLength="1" to the animated path) --- */
.pt-draw{stroke-dasharray:1;stroke-dashoffset:1;animation:ptdraw 1.7s ease-out forwards}
@keyframes ptdraw{to{stroke-dashoffset:0}}
/* SVG text/stroke that should follow the theme */
.pt-fig .ax{stroke:var(--border-3)}
.pt-fig .gl{stroke:var(--border-2)}
.pt-fig .tx{fill:var(--text-faint);font-family:var(--mono);font-size:10px}

/* --- FAQ (rendered from front-matter `faq:`) --- */
.pt-faq{margin:2.2em 0 0;border-top:1px solid var(--border-2);padding-top:1.3em}
.pt-faq-h{font-family:var(--display);font-size:20px;font-weight:800;margin:0 0 .6em}
.pt-faq details{border:1px solid var(--border-2);margin:8px 0}
.pt-faq summary{cursor:pointer;padding:12px 14px;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:10px}
.pt-faq summary::-webkit-details-marker{display:none}
.pt-faq summary::after{content:"+";color:var(--accent);font-family:var(--mono);font-weight:700}
.pt-faq details[open] summary::after{content:"\2013"}
.pt-faq details>div{padding:0 14px 12px;color:var(--text-dim);line-height:1.65}

/* --- "See it live on the meter" CTA --- */
.pt-cta{margin:2em 0;padding:17px 20px;border:1px solid var(--accent);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.pt-cta-txt{font-weight:600}
.pt-cta a{display:inline-block;background:var(--accent);color:#fff;padding:10px 18px;text-decoration:none;font-weight:600;white-space:nowrap}
.pt-cta a:hover{filter:brightness(1.06)}

/* --- Declarative charts (blog.js renders into figure.pt-chart) --- */
figure.pt-chart{margin:1.6em 0;border:1px solid var(--border-2);background:var(--bg-1);padding:16px}
.pt-chart-svg svg{display:block;width:100%;height:auto}
.pt-chart-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:12px}
.pt-chart-key{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--text-dim);font-family:var(--mono)}
.pt-chart-dot{width:10px;height:10px;border-radius:50%;display:inline-block;flex-shrink:0}
figure.pt-chart figcaption{font-size:12px;color:var(--text-faint);margin-top:12px;font-family:var(--mono);line-height:1.5}
.pt-cdraw{stroke-dasharray:1;stroke-dashoffset:1;animation:ptdraw 1.6s ease-out forwards}

/* --- reduced motion --- */
@media(prefers-reduced-motion:reduce){
  .pt-bar-fill{animation:none}
  .pt-draw,.pt-cdraw{animation:none;stroke-dashoffset:0}
}