/* Article-only styles for the server-rendered blog index and article pages (web/blog.html,
   web/article.html). Builds on style.css tokens; no new colours beyond the design palette. The
   class names are the sanitizer allowlist's (server/modules/content/sanitize.ts). */

/* ---- header and meta ---------------------------------------------------------------------- */
.article-head .article-meta{display:flex;flex-wrap:wrap;gap:4px 6px;font-size:12px;margin-top:14px}
.article-head .article-meta time{color:inherit}
.ai-disclosure{margin-top:14px;max-width:720px;padding:10px 14px;border-radius:8px;background:var(--blue-soft);color:#36578d;font-size:12px;line-height:1.6}

/* ---- body blocks -------------------------------------------------------------------------- */
.prose .answer{font-size:16px;line-height:1.75;color:var(--ink);border-left:3px solid var(--blue);padding-left:16px}
.prose h3{margin:24px 0 10px;font-size:18px}
.prose ol li,.prose ul li{padding-left:2px}
.prose a{overflow-wrap:anywhere}
.prose blockquote{margin:0 0 17px;padding:4px 0 4px 16px;border-left:3px solid var(--line);color:var(--muted)}
.prose blockquote cite{display:block;font-style:normal;font-size:12px;margin-top:6px}
.prose .takeaways,.prose .callout{margin:0 0 22px;padding:16px 18px;border-radius:10px;background:var(--canvas);border:1px solid var(--line)}
.prose .takeaways p,.prose .callout p{margin-bottom:6px}
.prose .takeaways ul{margin:0;padding-left:18px}
.prose .callout{background:var(--blue-soft);border-color:transparent}
.prose .source-line{font-size:12px;color:var(--muted);margin-top:-8px}
.prose figure{margin:0 0 20px}
.prose figure img{display:block;width:100%;height:auto;border-radius:10px;background:var(--canvas)}
.prose figure.qr-demo img{max-width:240px;margin:auto;background:#fff}
.prose figcaption{font-size:11px;color:#8591a2;margin-top:7px;text-align:center}
.prose table{width:100%;border-collapse:collapse;font-size:13px;line-height:1.5;margin:0 0 17px;display:block;overflow-x:auto}
.prose table caption{caption-side:top;text-align:left;font-weight:600;color:var(--ink);padding-bottom:8px}
.prose th,.prose td{border-bottom:1px solid var(--line);padding:9px 10px;text-align:left;vertical-align:top}
.prose thead th{background:var(--canvas);font-weight:600}
.prose table.comparison th[scope="row"]{font-weight:600;color:var(--ink)}
.prose .stat-grid{list-style:none;padding:0;margin:0 0 17px;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.prose .stat-grid li{margin:0;padding:14px;border:1px solid var(--line);border-radius:10px;color:var(--muted);font-size:12px;line-height:1.5}
.prose .stat-grid strong{display:block;font-size:22px;color:var(--ink);margin-bottom:4px}
.prose .faq h3{font-size:16px}

/* ---- hero, CTA, sources ------------------------------------------------------------------- */
/* style.css styles the home page's `.hero` section and `.faq` block; neither applies here. */
.prose figure.hero{padding:0;margin:0 0 26px;max-width:none;text-align:left}
.prose section.faq{max-width:none;margin:0}
.article-cta{margin:30px 0;padding:22px;border-radius:12px;border:1px solid var(--line);background:var(--white);box-shadow:var(--shadow)}
.article-cta-title{font-size:17px;font-weight:700;color:var(--ink);margin-bottom:12px}
.article-cta-actions{display:flex;flex-wrap:wrap;gap:10px}
.article-cta-note{font-size:12px;margin:12px 0 0}
.article-sources{margin-top:30px;border-top:1px solid var(--line);padding-top:8px}
.article-sources h2{font-size:18px}
.article-sources ol{padding-left:20px;font-size:13px;line-height:1.6}
.article-sources li{margin:10px 0}
.article-sources .badge{margin-left:4px;white-space:normal}

/* ---- navigation ---------------------------------------------------------------------------- */
.toc a{color:var(--muted);line-height:1.45}
.toc a:hover{color:var(--blue)}
.article-related{padding-top:10px}
.article-related h2{font-size:22px;margin-bottom:18px}
.article-art.has-image{padding:0;background:var(--canvas)}
.article-art.has-image img{width:100%;height:100%;object-fit:cover;display:block}
[data-article-slot][hidden],[data-article-toolbar][hidden]{display:none}

@media (max-width:640px){
  .article-head h1{font-size:30px;letter-spacing:-1px}
  .prose .answer{font-size:15px}
  .article-cta-actions .btn{flex:1 1 100%}
}