/* Shared blog chrome — the article + card-grid layer for /blog and every blog post.
 *
 * Extracted from 30 templates (MemberBot's 19 posts + index, AccessBot's 9 posts + index) that
 * each carried a byte-identical copy of it inline. The ONLY thing that ever differed between the
 * two brands was colour, so this file is deliberately brand-NEUTRAL and each template keeps a
 * small inline :root token block instead.
 *
 * ⚠️  Never put a brand colour literal — a hex or an "r,g,b" triple — in here. `common.brand_html`
 * recolours a branded deploy by rewriting those literals in the SERVED HTML; an external
 * stylesheet never passes through it, so a hardcoded colour here would stay MemberBot-blue on
 * AccessBot forever. (This file is kept literal-free so that rule stays greppable.)
 * Colour belongs in the template's :root block (which brand_html does rewrite) or, for the accent
 * pair, in the `#brand-palette` override brand_html injects. Everything here reads it back via
 * var(). See dashboard/common.py.
 *
 * Tokens a template must define (the accent pair is what actually differs per brand):
 *   --accent / --accent-rgb / --accent2-rgb   tinting accent (MemberBot: blue; AccessBot: green)
 *   --chip-ink                                category-chip text
 *   --btn-ink                                 text on the primary gradient button
 *   --avatar-bg / --avatar-pad / --avatar-pad-sm   byline + card-foot avatar (a light logo needs
 *                                                  a white plate; defaults are a no-op)
 * plus the page shell tokens: --bg --panel --panel2 --ink --muted --brand --brand2 --ok --line
 * --radius.
 */

/* Sticky 64px header: offset in-page jumps so a TOC target never lands underneath it. */
html{scroll-padding-top:80px;scroll-behavior:smooth}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.narrow{max-width:760px;margin:0 auto}
.btn{display:inline-block;padding:12px 20px;border-radius:12px;font-weight:600;border:1px solid transparent;cursor:pointer}
.btn-primary{background:linear-gradient(135deg,var(--brand),var(--brand2));color:var(--btn-ink,#fff)}

/* Header / nav */
header{position:sticky;top:0;z-index:10;background:rgba(11,16,32,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;letter-spacing:-.02em} .logo b{color:var(--brand)} .logo img{width:30px;height:30px;border-radius:8px;display:block}
.nav-links{display:flex;gap:24px;align-items:center} .nav-links a{color:var(--muted);font-size:15px} .nav-links a:hover{color:var(--ink)}
@media(max-width:820px){.nav-links a:not(.btn){display:none}}

/* Article head */
h1{font-size:clamp(30px,5vw,44px);line-height:1.12;letter-spacing:-.02em;margin:.2em 0}
h2{font-size:clamp(21px,3vw,27px);letter-spacing:-.01em;margin:0 0 .5em}
.hero{text-align:center;padding:60px 0 24px} .sub{color:var(--muted);font-size:19px;max-width:640px;margin:12px auto 0}
.chip{display:inline-block;padding:5px 12px;border-radius:999px;font-size:12.5px;font-weight:700;letter-spacing:.02em;color:var(--chip-ink);background:rgba(var(--accent-rgb),.13);border:1px solid rgba(var(--accent-rgb),.28)}
.meta-row{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;color:var(--muted);font-size:14px;margin-top:14px}
.byline{display:flex;align-items:center;gap:8px} .byline img{width:26px;height:26px;border-radius:50%;background:var(--avatar-bg,transparent);padding:var(--avatar-pad,0)} .byline b{color:var(--ink);font-weight:600}
.dot{width:3px;height:3px;border-radius:50%;background:var(--muted);opacity:.6;display:inline-block}
.post-fig{margin:26px auto 6px}

/* Table of contents + prose */
.toc{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px 22px;margin:24px 0}
.toc h4{margin:0 0 10px;font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.toc ol{margin:0;padding-left:18px} .toc li{margin:6px 0} .toc a{color:var(--brand)}
.prose h2{margin:36px 0 10px;scroll-margin-top:80px} .prose h3{font-size:19px;margin:24px 0 6px;color:var(--ink)}
.prose p{color:#c7d0e6;margin:13px 0;line-height:1.75} .prose ul{margin:10px 0;padding-left:22px}
.prose li{color:#c7d0e6;margin:8px 0} .prose a{color:var(--brand);text-decoration:underline} .prose b{color:var(--ink)}

/* Key takeaways */
.takeaways{background:linear-gradient(135deg,rgba(var(--accent-rgb),.10),rgba(var(--accent2-rgb),.08));border:1px solid rgba(var(--accent-rgb),.25);border-left:3px solid var(--accent);border-radius:14px;padding:20px 24px;margin:32px 0}
.takeaways h3{margin:0 0 12px;font-size:16px;color:var(--ink)} .takeaways ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.takeaways li{padding-left:28px;position:relative;color:#c7d0e6} .takeaways li::before{content:"\2713";position:absolute;left:0;color:var(--ok);font-weight:800}
.faq .qa{border-bottom:1px solid var(--line);padding:16px 0} .faq h3{margin:0 0 6px;font-size:17px} .faq p{color:var(--muted);margin:0}

/* Card grid (index + related posts) */
.grid{display:grid;gap:20px;grid-template-columns:repeat(3,1fr)} @media(max-width:860px){.grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.grid{grid-template-columns:1fr}}
.card{display:block;background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:border-color .15s,transform .15s}
.card:hover{border-color:var(--brand);transform:translateY(-2px)}
.thumb{display:block;width:100%;aspect-ratio:16/9}
.card-body{padding:16px 18px 18px} .card-body .chip{margin-bottom:10px}
.card-body h3{margin:0 0 8px;font-size:18px;line-height:1.3;color:var(--ink)} .card-body p{color:var(--muted);font-size:14px;margin:0 0 14px}
.card-foot{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12.5px} .card-foot img{width:22px;height:22px;border-radius:50%;background:var(--avatar-bg,transparent);padding:var(--avatar-pad-sm,0)}
.cats{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:24px 0 30px}
.catbtn{padding:8px 15px;border-radius:999px;font-size:13.5px;font-weight:600;color:var(--muted);background:var(--panel);border:1px solid var(--line);cursor:pointer}
.catbtn.active,.catbtn:hover{color:#fff;border-color:var(--brand);background:rgba(var(--accent-rgb),.12)}

/* Sections / CTA / footer */
section.blk{padding:40px 0;border-top:1px solid var(--line)}
.cta{text-align:center;background:var(--panel);border-radius:var(--radius);padding:44px 20px;margin:44px 0}
footer{border-top:1px solid var(--line);padding:34px 0;color:var(--muted);font-size:14px}
.foot{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center} .foot a{color:var(--muted);margin-right:16px} .foot a:hover{color:var(--ink)}