/* Shared stylesheet for /blog/* and /playbooks/* article pages.
   Mirrors the guide-page look (measure-ai-agent-pilots.html) so every
   long-form page reads as one family. */
:root { --teal: #0E5E56; --cyan: #2E9E8F; --ink: #0f1120; --text: #1f2937; --muted: #6b7280; --border: #e5e7eb; --soft: #f6f7fb; --mint: #EAF6F1; --amber: #A16207; }
* { box-sizing: border-box; margin: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: var(--text); font-size: 15.5px; line-height: 1.65; background: #fff; }
.wrap { max-width: 860px; margin: 0 auto; padding: 0 24px; }
header.nav { position: sticky; top: 0; background: rgba(255,255,255,.9); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); z-index: 50; }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 60px; max-width: 860px; margin: 0 auto; padding: 0 24px; }
.logo { font-weight: 800; font-size: 20px; color: var(--teal); text-decoration: none; letter-spacing: -.5px; }
.logo img { width: 24px; height: 24px; vertical-align: -5px; }
.nav-links { display: flex; gap: 22px; font-size: 14px; }
.nav-links a { color: var(--muted); text-decoration: none; font-weight: 500; }
.nav-links a:hover { color: var(--ink); }
.crumb { font-size: 13px; color: var(--muted); margin: 28px 0 0; }
.crumb a { color: var(--teal); text-decoration: none; }
.tag-row { margin: 26px 0 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tag { display: inline-block; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--teal); background: var(--mint); border-radius: 12px; padding: 3px 11px; }
.tag.amber { color: #92610a; background: rgba(245,158,11,.14); }
h1 { font-size: 32px; letter-spacing: -1px; color: var(--ink); margin: 12px 0 10px; line-height: 1.15; }
.lede { color: var(--muted); font-size: 17px; margin-bottom: 18px; }
.byline { color: var(--muted); font-size: 13px; margin-bottom: 20px; }
.cover { width: 100%; border-radius: 14px; border: 1px solid var(--border); margin: 6px 0 26px; display: block; }
h2 { font-size: 22px; letter-spacing: -.5px; color: var(--ink); margin: 40px 0 12px; padding-top: 12px; border-top: 1px solid var(--border); }
h3 { font-size: 16.5px; color: var(--ink); margin: 24px 0 8px; }
p, li { color: var(--text); } ul, ol { padding-left: 22px; margin: 10px 0; } li { margin: 5px 0; }
a { color: var(--teal); }
code { background: var(--soft); border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px; font-size: 13px; font-family: ui-monospace, Menlo, monospace; }
pre { background: #171a2b; color: #d7e3f4; border-radius: 12px; padding: 16px 18px; overflow-x: auto; font-size: 13px; line-height: 1.55; margin: 14px 0; }
pre code { background: none; border: none; color: inherit; padding: 0; }
.callout { background: var(--mint); border: 1px solid #BFE0D8; border-radius: 10px; padding: 14px 18px; font-size: 14.5px; margin: 16px 0; }
.callout.amber { background: #FDF6E7; border-color: #EAD8AC; }
table { border-collapse: collapse; width: 100%; font-size: 14px; margin: 12px 0; }
th, td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
th { color: var(--muted); font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; }
.muted { color: var(--muted); font-size: 13.5px; }
.doc-footer { color: var(--muted); font-size: 13.5px; padding: 40px 0 56px; border-top: 1px solid var(--border); margin-top: 56px; }

/* Social share bar — populated by /blog/share.js from the page's canonical
   link and data-share-text. Also usable on the landing page. */
.share-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 18px 0; }
.share-bar .share-label { font-size: 13px; font-weight: 700; color: var(--muted); margin-right: 2px; }
.share-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--teal); text-decoration: none; border: 1px solid var(--border); border-radius: 18px; padding: 5px 13px; background: #fff; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.share-btn:hover { border-color: var(--cyan); background: var(--mint); }
.share-btn svg { width: 14px; height: 14px; fill: currentColor; display: block; }
.share-bar.bottom { border-top: 1px solid var(--border); padding-top: 20px; margin-top: 40px; }