/* ─────────────────────────────────────────────────────────────────────────────
   Blog stylesheet. BYTE-IDENTICAL across the fleet; brand values arrive as
   --xb-* tokens in a <style> block that build.mjs writes per page.

   Isolation contract:
     • Loaded ONLY by /blog/** pages, which load nothing from the SPA.
     • Every selector starts with .xb (the <body> class). No bare element
       selectors, no :root, no html{} — so even if this file were ever imported
       by the app, it could not restyle a single app element.
     • Keyframes and custom properties are xb-prefixed.
   ───────────────────────────────────────────────────────────────────────────── */

.xb {
  --xb-s1: 4px; --xb-s2: 8px; --xb-s3: 12px; --xb-s4: 16px; --xb-s5: 24px; --xb-s6: 32px; --xb-s7: 48px; --xb-s8: 72px;
  --xb-radius: 12px;
  --xb-measure: 44rem;
  --xb-wide: 72rem;
  margin: 0;
  background: var(--xb-paper);
  color: var(--xb-ink);
  font-family: var(--xb-font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  color-scheme: light;
}
.xb *, .xb *::before, .xb *::after { box-sizing: border-box; }
.xb img { max-width: 100%; height: auto; display: block; }
.xb a { color: var(--xb-accent); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
.xb a:hover { text-decoration-thickness: 2px; }
.xb :focus-visible { outline: 3px solid var(--xb-accent); outline-offset: 2px; border-radius: 4px; }

.xb-skip { position: absolute; left: -9999px; top: 0; z-index: 10; }
.xb .xb-skip:focus { left: var(--xb-s4); top: var(--xb-s3); background: var(--xb-ink); color: var(--xb-paper); padding: var(--xb-s2) var(--xb-s4); border-radius: 8px; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.xb .xb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--xb-s2);
  min-height: 48px; padding: 0 var(--xb-s5);
  background: var(--xb-accent); color: var(--xb-accent-ink);
  font: 600 1rem/1 var(--xb-font-body); letter-spacing: 0.01em;
  text-decoration: none; border-radius: 999px; border: 0;
  transition: transform 160ms ease-out, background-color 160ms ease-out;
}
.xb .xb-btn:hover { transform: translateY(-1px); }
.xb .xb-btn:active { transform: translateY(0) scale(0.98); }
.xb .xb-btn--sm { min-height: 40px; padding: 0 var(--xb-s4); font-size: 0.9375rem; }

/* ── Top bar ──────────────────────────────────────────────────────────────── */
.xb-top { background: var(--xb-band); color: var(--xb-band-ink); }
.xb-top__in {
  /* + both gutters, so the bar's content edge lines up with the page column */
  max-width: calc(var(--xb-wide) + 2 * var(--xb-s4)); margin: 0 auto; padding: var(--xb-s3) var(--xb-s4);
  display: flex; align-items: center; gap: var(--xb-s4);
}
.xb .xb-brand { display: inline-flex; align-items: center; gap: var(--xb-s3); color: var(--xb-band-ink); text-decoration: none; margin-right: auto; }
.xb-brand__mark { width: 36px; height: 36px; border-radius: 8px; }
.xb-brand__name { font: 700 1.125rem/1 var(--xb-font-display); letter-spacing: 0.01em; }
.xb .xb-top__blog { color: var(--xb-band-ink); text-decoration: none; font-weight: 600; font-size: 0.9375rem; }
.xb .xb-top__blog:hover { text-decoration: underline; }

/* ── Layout ───────────────────────────────────────────────────────────────── */
.xb-main { padding: var(--xb-s6) var(--xb-s4) var(--xb-s8); }
.xb-post, .xb-hub__head { max-width: var(--xb-measure); margin: 0 auto; }
.xb-post__head { margin-bottom: var(--xb-s6); }

.xb-crumbs ol { list-style: none; margin: 0 0 var(--xb-s5); padding: 0; display: flex; flex-wrap: wrap; gap: var(--xb-s2); font-size: 0.875rem; color: var(--xb-muted); }
.xb-crumbs li { display: inline-flex; align-items: center; gap: var(--xb-s2); min-width: 0; }
.xb-crumbs li + li::before { content: "›"; color: var(--xb-muted); }
.xb-crumbs li[aria-current] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 22ch; }
.xb .xb-crumbs a { color: var(--xb-muted); text-decoration: none; }
.xb .xb-crumbs a:hover { color: var(--xb-ink); text-decoration: underline; }

.xb-kicker { display: flex; flex-wrap: wrap; gap: var(--xb-s2) var(--xb-s4); margin: 0 0 var(--xb-s3); font-size: 0.875rem; font-weight: 600; color: var(--xb-muted); }
.xb-kicker__cat { color: var(--xb-accent); text-transform: uppercase; letter-spacing: 0.08em; }

.xb-title {
  margin: 0 0 var(--xb-s4);
  font: 700 clamp(2rem, 1.35rem + 2.6vw, 3.1rem)/1.12 var(--xb-font-display);
  letter-spacing: -0.015em; text-wrap: balance; color: var(--xb-ink);
}
.xb-dek { margin: 0 0 var(--xb-s4); font-size: 1.1875rem; line-height: 1.6; color: var(--xb-muted); text-wrap: pretty; }
.xb-byline { margin: 0 0 var(--xb-s5); font-size: 0.9375rem; color: var(--xb-muted); }
.xb .xb-byline a { color: var(--xb-ink); font-weight: 600; text-decoration: none; }

.xb-hero { margin: 0; }
/* Figures link to the full-size image: a screenshot shrunk to the column is
   often too small to read, and there is no script on these pages for a lightbox. */
.xb .xb-zoom { display: block; cursor: zoom-in; border-radius: var(--xb-radius); }
.xb .xb-zoom:hover img { border-color: var(--xb-accent); }
.xb-hero img, .xb-fig img { border-radius: var(--xb-radius); border: 1px solid var(--xb-rule); background: var(--xb-surface); }
.xb-hero figcaption, .xb-fig figcaption { margin-top: var(--xb-s2); font-size: 0.875rem; line-height: 1.5; color: var(--xb-muted); }

/* ── The short answer (the extraction target) ────────────────────────────── */
.xb-answer {
  margin: 0 0 var(--xb-s6); padding: var(--xb-s5);
  background: var(--xb-highlight); border-radius: var(--xb-radius);
  border-left: 6px solid var(--xb-accent);
}
.xb-answer__h { margin: 0 0 var(--xb-s2); font: 700 0.8125rem/1.2 var(--xb-font-body); text-transform: uppercase; letter-spacing: 0.1em; color: var(--xb-accent); }
.xb-answer__p { margin: 0 0 var(--xb-s4); font-size: 1.125rem; line-height: 1.6; color: var(--xb-ink); }
.xb-answer__h3 { margin: 0 0 var(--xb-s2); font: 700 1rem/1.3 var(--xb-font-body); color: var(--xb-ink); }
.xb-answer__list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--xb-s2); }
.xb-answer__list li { position: relative; padding-left: 28px; }
.xb-answer__list li::before {
  content: ""; position: absolute; left: 0; top: 0.42em; width: 16px; height: 16px; border-radius: 4px;
  background: var(--xb-accent)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;
}

/* ── On this page ─────────────────────────────────────────────────────────── */
.xb-toc { margin: 0 0 var(--xb-s6); padding: var(--xb-s4) var(--xb-s5); border: 1px solid var(--xb-rule); border-radius: var(--xb-radius); background: var(--xb-surface); }
.xb-toc__h { margin: 0 0 var(--xb-s2); font: 700 0.8125rem/1.2 var(--xb-font-body); text-transform: uppercase; letter-spacing: 0.1em; color: var(--xb-muted); }
.xb-toc ol { margin: 0; padding-left: 1.25rem; display: grid; gap: var(--xb-s1); font-size: 0.9688rem; }
.xb .xb-toc a { color: var(--xb-ink); text-decoration: none; }
.xb .xb-toc a:hover { color: var(--xb-accent); text-decoration: underline; }

/* ── Prose ────────────────────────────────────────────────────────────────── */
.xb-prose > * { margin-top: 0; margin-bottom: var(--xb-s4); }
.xb-prose h2 {
  margin: var(--xb-s7) 0 var(--xb-s3);
  font: 700 clamp(1.5rem, 1.2rem + 1.1vw, 2rem)/1.2 var(--xb-font-display);
  letter-spacing: -0.01em; text-wrap: balance; scroll-margin-top: var(--xb-s5);
}
.xb-prose h3 { margin: var(--xb-s6) 0 var(--xb-s2); font: 700 1.25rem/1.3 var(--xb-font-display); scroll-margin-top: var(--xb-s5); }
.xb-prose h4 { margin: var(--xb-s5) 0 var(--xb-s2); font: 700 1.0625rem/1.4 var(--xb-font-body); }
.xb-prose p { text-wrap: pretty; }
.xb-prose ul, .xb-prose ol { padding-left: 1.4rem; }
.xb-prose li { margin-bottom: var(--xb-s2); }
.xb-prose li::marker { color: var(--xb-accent); font-weight: 700; }
.xb-prose strong { font-weight: 700; color: var(--xb-ink); }
.xb-prose hr { border: 0; border-top: 1px solid var(--xb-rule); margin: var(--xb-s6) 0; }
.xb-prose code { font: 0.9em/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--xb-highlight); padding: 0.1em 0.35em; border-radius: 4px; }
.xb-prose blockquote { margin-left: 0; margin-right: 0; padding: var(--xb-s1) 0 var(--xb-s1) var(--xb-s5); border-left: 3px solid var(--xb-rule); font-family: var(--xb-font-display); font-size: 1.1875rem; color: var(--xb-ink); }
.xb-prose blockquote p:last-child { margin-bottom: 0; }
.xb-prose .xb-ext::after {
  content: ""; display: inline-block; width: 0.7em; height: 0.7em; margin-left: 0.2em; vertical-align: baseline;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4 2h6v6M10 2L3 9' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4 2h6v6M10 2L3 9' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") center/contain no-repeat;
}

.xb-fig { margin: var(--xb-s6) 0; }

/* Tables scroll inside their own box; the page never scrolls sideways. */
.xb-table { margin: var(--xb-s5) 0 var(--xb-s6); overflow-x: auto; border: 1px solid var(--xb-rule); border-radius: var(--xb-radius); background: var(--xb-surface); }
.xb-table table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.5; }
.xb-table th, .xb-table td { padding: var(--xb-s3) var(--xb-s4); text-align: left; vertical-align: top; border-bottom: 1px solid var(--xb-rule); }
.xb-table th { background: var(--xb-band); color: var(--xb-band-ink); font-weight: 700; white-space: nowrap; }
.xb-table tr:last-child td { border-bottom: 0; }
.xb-table tbody tr:nth-child(even) td { background: var(--xb-paper); }
.xb-table td:first-child { font-weight: 600; }

.xb-callout { margin: var(--xb-s5) 0; padding: var(--xb-s4) var(--xb-s5); border-radius: var(--xb-radius); background: var(--xb-surface); border: 1px solid var(--xb-rule); border-left: 6px solid var(--xb-accent); }
.xb-callout > :last-child { margin-bottom: 0; }
.xb-callout p { margin: 0 0 var(--xb-s2); }
.xb-callout__label { font: 700 0.8125rem/1.2 var(--xb-font-body); text-transform: uppercase; letter-spacing: 0.1em; color: var(--xb-accent); }
.xb-callout--warning { border-left-color: #B45309; }
.xb-callout--warning .xb-callout__label { color: #92400E; }
.xb-callout--important { border-left-color: var(--xb-ink); }
.xb-callout--important .xb-callout__label { color: var(--xb-ink); }

/* ── Product box ──────────────────────────────────────────────────────────── */
.xb-product { margin: var(--xb-s7) 0 var(--xb-s6); padding: var(--xb-s6) var(--xb-s5); border-radius: calc(var(--xb-radius) + 4px); background: var(--xb-band); color: var(--xb-band-ink); }
.xb-main > .xb-product { max-width: var(--xb-wide); margin-left: auto; margin-right: auto; }
.xb-product__kicker { margin: 0 0 var(--xb-s2); font: 700 0.8125rem/1.2 var(--xb-font-body); text-transform: uppercase; letter-spacing: 0.1em; color: var(--xb-accent-soft); }
.xb-product h2 { margin: 0 0 var(--xb-s3); font: 700 clamp(1.5rem, 1.25rem + 1vw, 1.9rem)/1.2 var(--xb-font-display); color: var(--xb-band-ink); text-wrap: balance; }
.xb-product p { margin: 0 0 var(--xb-s4); color: var(--xb-band-ink); }
.xb-product__facts { margin: 0 0 var(--xb-s5); padding: 0; list-style: none; display: grid; gap: var(--xb-s2); }
.xb-product__facts li { position: relative; padding-left: 24px; }
.xb-product__facts li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 10px; height: 10px; border-radius: 3px; background: var(--xb-accent-soft); }
.xb-product__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--xb-s3) var(--xb-s4); margin: 0; }
.xb-product__note { font-size: 0.9375rem; color: var(--xb-accent-soft); }

/* ── About this article ───────────────────────────────────────────────────── */
.xb-about { padding-top: var(--xb-s5); border-top: 1px solid var(--xb-rule); font-size: 0.9688rem; color: var(--xb-muted); }
.xb-about h2 { margin: 0 0 var(--xb-s2); font: 700 1.0625rem/1.3 var(--xb-font-body); color: var(--xb-ink); }
.xb-about p { margin: 0 0 var(--xb-s2); }

/* ── Cards (related + hub) ────────────────────────────────────────────────── */
.xb-related, .xb-group { max-width: var(--xb-wide); margin: var(--xb-s7) auto 0; }
.xb-related > h2, .xb-group__h { margin: 0 0 var(--xb-s4); font: 700 1.5rem/1.2 var(--xb-font-display); }
.xb-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--xb-s4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
.xb-card { min-width: 0; }
.xb .xb-card__link {
  height: 100%; display: flex; flex-direction: column; gap: var(--xb-s2); padding: var(--xb-s5);
  background: var(--xb-surface); border: 1px solid var(--xb-rule); border-radius: var(--xb-radius);
  color: var(--xb-ink); text-decoration: none;
  transition: transform 180ms ease-out, border-color 180ms ease-out, box-shadow 180ms ease-out;
}
.xb .xb-card__link:hover { transform: translateY(-2px); border-color: var(--xb-accent); box-shadow: 0 8px 24px -12px rgba(15, 23, 42, 0.28); }
.xb-card__cat { font: 700 0.75rem/1.2 var(--xb-font-body); text-transform: uppercase; letter-spacing: 0.1em; color: var(--xb-accent); }
.xb-card__title { margin: 0; font: 700 1.1875rem/1.3 var(--xb-font-display); text-wrap: balance; color: var(--xb-ink); }
.xb-card__desc { font-size: 0.9375rem; line-height: 1.55; color: var(--xb-muted); flex: 1; }
.xb-card__meta { font-size: 0.8125rem; font-weight: 600; color: var(--xb-muted); }

/* ── Hub ──────────────────────────────────────────────────────────────────── */
.xb-hub__head { max-width: var(--xb-wide); }
.xb-hub__head .xb-dek { max-width: 46rem; }
.xb-feature { max-width: var(--xb-wide); margin: var(--xb-s6) auto 0; }
.xb .xb-feature__link {
  display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: var(--xb-s6);
  padding: var(--xb-s5); background: var(--xb-surface); border: 1px solid var(--xb-rule); border-radius: calc(var(--xb-radius) + 4px);
  color: var(--xb-ink); text-decoration: none; transition: border-color 180ms ease-out, box-shadow 180ms ease-out;
}
.xb .xb-feature__link:hover { border-color: var(--xb-accent); box-shadow: 0 12px 32px -16px rgba(15, 23, 42, 0.3); }
.xb-feature__link img { border-radius: var(--xb-radius); border: 1px solid var(--xb-rule); }
.xb-feature__copy { display: flex; flex-direction: column; gap: var(--xb-s3); min-width: 0; }
.xb-feature__title { margin: 0; color: var(--xb-ink); font: 700 clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem)/1.15 var(--xb-font-display); text-wrap: balance; }

/* ── Footer ───────────────────────────────────────────────────────────────── */
.xb-foot { background: var(--xb-band); color: var(--xb-band-ink); }
.xb-foot__in { max-width: calc(var(--xb-wide) + 2 * var(--xb-s4)); margin: 0 auto; padding: var(--xb-s6) var(--xb-s4); display: grid; gap: var(--xb-s4); }
.xb-foot__brand { margin: 0; display: flex; align-items: center; gap: var(--xb-s3); }
.xb-foot__brand img { width: 28px; height: 28px; border-radius: 6px; }
.xb-foot__nav { display: flex; flex-wrap: wrap; gap: var(--xb-s2) var(--xb-s5); }
.xb .xb-foot__nav a { color: var(--xb-band-ink); text-decoration: none; font-size: 0.9375rem; }
.xb .xb-foot__nav a:hover { text-decoration: underline; }
.xb-foot__fine { margin: 0; font-size: 0.8125rem; color: var(--xb-accent-soft); }

/* ── Small screens ────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .xb { font-size: 1.03rem; }
  .xb-main { padding: var(--xb-s5) var(--xb-s4) var(--xb-s7); }
  .xb-brand__name { display: none; }
  .xb .xb-top__blog { margin-left: auto; }
  .xb .xb-brand { margin-right: 0; }
  .xb-answer { padding: var(--xb-s4); }
  .xb-product { padding: var(--xb-s5) var(--xb-s4); }
  .xb .xb-feature__link { grid-template-columns: 1fr; gap: var(--xb-s4); padding: var(--xb-s4); }
  .xb-table th { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  .xb *, .xb *::before, .xb *::after { transition: none !important; }
}

@media print {
  .xb-top, .xb-foot, .xb-product, .xb-related, .xb-toc { display: none; }
  .xb { background: #fff; }
}