/* ==========================================================================
   BLOG — what the comp's sheets lack (bl.css and blog.css are generated from
   legacy-static/ and never edited). Loaded right after blog.css on every blog
   route. Everything here is written in the comp's own language: the TL;DR
   bullet, the .zr-steps counter chip, the .zr-fig__card frame, Geist Mono
   captions, weight 500 headings.
   ========================================================================== */

/* ── filter row as links ────────────────────────────────────────────────
   The buttons became links to /blog/category/<slug>; as flex items they
   already blockify, they only need the underline gone and the active state
   the legacy gave [aria-pressed="true"]. */
.zr-bl__filter{ text-decoration:none; }
.zr-bl__filter[aria-current="page"]{ background:var(--bl-ink); border-color:var(--bl-ink); color:#fff; }

/* the "All posts" link beside "Keep reading" (blog-post.html:4445–4450; blog.html lacks it) */
.zr-bl__more{
  display:inline-flex; align-items:center; gap:6px;
  font-size:13.5px; color:var(--zr-blue); text-decoration:none;
}
.zr-bl__more svg{ width:14px; height:14px; transition:translate .16s var(--zr-ease-out-quad); }
.zr-bl__more:hover svg{ translate:3px 0; }

/* pagination, in the filter-pill style */
.zr-pager{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:32px; }
.zr-pager__page{
  font-family:'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:12.5px; line-height:18px; color:var(--bl-dim);
}

/* the search form reuses the newsletter input, centred under the lede */
.zr-search__form{ margin-top:6px; }

/* draft preview strip */
.zr-preview{
  padding:10px var(--zr-pad); background:var(--bl-ink); color:#fff;
  font-family:var(--zr-font); font-size:13px; line-height:20px; text-align:center;
}
.zr-preview b{ font-weight:500; margin-right:8px; }

/* ── the rail ───────────────────────────────────────────────────────────── */
.zr-toc ol ol a{ padding-left:26px; font-size:12.5px; }

/* ── the prose: CMS blocks the comp did not draw ───────────────────────── */
.zr-prose h3{
  margin:32px 0 0; font-size:19px; font-weight:500; line-height:28px;
  letter-spacing:-.012em; color:var(--bl-ink); scroll-margin-top:120px;
}
.zr-prose h3 + p{ margin-top:12px; }
.zr-prose h2 + h3{ margin-top:18px; }
/* scroll-margin like h2 (blog.css) and h3 above: live anchors h4 too, and 19 of its own Contents
   links land on one — without it the sticky nav covers the heading they land on. */
.zr-prose h4, .zr-prose h5, .zr-prose h6{
  margin:24px 0 0; font-size:16px; font-weight:500; line-height:24px; color:var(--bl-ink);
  scroll-margin-top:120px;
}
.zr-prose h4 + p{ margin-top:8px; }
.zr-prose strong, .zr-prose b{ font-weight:500; color:var(--bl-ink); }
.zr-prose em{ font-style:italic; }
.zr-prose u{ text-decoration:underline; text-underline-offset:2px; }
.zr-prose sup, .zr-prose sub{ font-size:.75em; line-height:0; }
/* The comp's `.zr-prose p{margin:0}` outranks its own `.zr-prose > * + *` (22px), so consecutive
   paragraphs — and a paragraph after a figure, list or table — touched. Same value, restated for p. */
.zr-prose > * + p{ margin-top:22px; }

/* bullets = the TL;DR dot; numbers = the .zr-steps counter chip */
.zr-prose ul, .zr-prose ol{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px; }
.zr-prose ul li{ position:relative; padding-left:16px; }
.zr-prose ul li::before{
  content:""; position:absolute; left:2px; top:11px;
  width:5px; height:5px; border-radius:50%; background:var(--zr-blue);
}
/* Not the comp's grid: in a grid container an inline child (<strong>) and the text run after it
   become two separate items, so the chip is positioned instead and the item stays one inline flow. */
.zr-prose ol{ counter-reset:s; gap:14px; }
.zr-prose ol li{ position:relative; padding-left:36px; counter-increment:s; }
.zr-prose ol li::before{
  content:counter(s);
  position:absolute; left:0; top:1px;
  display:grid; place-items:center; width:24px; height:24px;
  border-radius:50%; background:#E8F1FF;
  font-family:'Geist Mono', ui-monospace, monospace; font-size:11.5px; color:#1D5FBF;
}
.zr-prose li > ul, .zr-prose li > ol{ margin-top:8px; }
.zr-prose li > p{ margin:0; }

/* inline code and code blocks (plain lines, no highlighter) */
.zr-prose code{
  font-family:'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:.9em; padding:1px 6px; border-radius:6px; background:#F3F4F6; color:var(--bl-ink);
}
.zr-prose pre.zr-code{
  margin:0; padding:16px 18px; overflow-x:auto; overscroll-behavior-inline:contain;
  background:#FBFCFE; border:1px solid var(--bl-hair); border-radius:12px;
  font-family:'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:12.5px; line-height:20px; color:var(--bl-ink);
}
.zr-prose pre.zr-code code{ padding:0; border-radius:0; background:none; font-size:inherit; }

/* images and tables sit in the comp's .zr-fig__card frame */
.zr-prose .zr-fig--img img{
  display:block; max-width:100%; height:auto; margin:0 auto;
  background:#fff; border:1px solid var(--bl-hair); border-radius:12px;
}
.zr-table-wrap{
  max-width:100%; overflow-x:auto; overscroll-behavior-inline:contain;
  background:#fff; border:1px solid var(--bl-hair); border-radius:12px;
}
.zr-table{ width:100%; border-collapse:collapse; font-size:14px; line-height:21px; color:var(--bl-body); }
.zr-table th, .zr-table td{
  padding:10px 14px; border-bottom:1px solid var(--bl-rule);
  text-align:left; vertical-align:top;
}
.zr-table th{ font-size:13.5px; font-weight:500; color:var(--bl-ink); background:#FBFCFE; }
.zr-table th strong, .zr-table td strong{ font-weight:500; }
.zr-table tbody tr:last-child td, .zr-table tbody tr:last-child th{ border-bottom:0; }
.zr-table p{ margin:0; }
/* ADR-24: a Portable Text table cell holds spans, not blocks, so one post's in-cell `<ul>`s survived
   the migration only as lines of literal "\2022 " (7 cells, 23 items). ZrTable.astro renders those
   lines as a real list; this is that list, and it is not the prose one — the stored glyph is the
   marker, so no ::before dot, and the hanging indent keeps a wrapped line clear of its own bullet
   instead of running back under it. */
.zr-table .zr-cell-list{ display:flex; flex-direction:column; gap:5px; margin:0; padding:0; list-style:none; }
.zr-table .zr-cell-list li{ padding-left:1.15em; text-indent:-1.15em; }
.zr-table .zr-cell-list li::before{ content:none; }
.zr-table td[style*="center"], .zr-table th[style*="center"]{ text-align:center; }
.zr-table td[style*="right"], .zr-table th[style*="right"]{ text-align:right; }

/* quotes: the comp draws one paragraph, the CMS may hold several */
.zr-prose blockquote p + p{ margin-top:12px; }

/* dividers (Break) */
.zr-prose hr.zr-hr{ margin:32px 0; height:1px; border:0; background:var(--bl-hair); }
.zr-prose .zr-hr--dots{
  margin:32px 0; text-align:center; letter-spacing:.5em; color:#A5A5A5;
  font-family:'Geist Mono', ui-monospace, monospace; font-size:12px;
}
.zr-prose .zr-hr--space{ height:32px; }

/* the note callout: the caveat's box on the TL;DR palette (Tip:/Note: quotes) */
.zr-note{ padding:16px 18px; border-radius:12px; background:#EEF5FF; border:1px solid #DCE8FF; }
.zr-note b{ display:block; font-size:14px; font-weight:500; line-height:21px; color:#1D5FBF; }
.zr-note p{ margin:4px 0 0; font-size:14px; line-height:21px; color:#2B3A55; }
.zr-note p + p, .zr-warn p + p{ margin-top:8px; }
.zr-note a, .zr-warn a{ color:inherit; }

/* filed-under pills are links now */
.zr-filed a{ text-decoration:none; }

/* the author card: initials on the brand colour when there is no photo, and the links line */
.zr-bio__av--i{
  display:grid; place-items:center; border-color:transparent;
  background:var(--av-bg); color:var(--av-fg);
  font-family:'Inter', var(--zr-font); font-size:17px; font-weight:600; line-height:1; letter-spacing:.01em;
}
.zr-bio__links{ display:flex; flex-wrap:wrap; gap:4px 14px; }
.zr-bio__links a{ color:var(--zr-blue); text-decoration:none; }
.zr-bio__links a:hover{ text-decoration:underline; }

/* ── responsive (the legacy kept these in its CONTACT sub-block) ────────── */
@media (max-width:1100px){
  .zr-art__grid{ grid-template-columns:minmax(0,1fr); gap:0; }
  .zr-art__rail{ position:static; flex-direction:row; flex-wrap:wrap; gap:16px; margin-bottom:28px; }
  .zr-toc{ flex:1 1 260px; }
  .zr-rail-cta{ flex:1 1 260px; }
}
@media (max-width:900px){
  .zr-cards{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .zr-feat{ flex-direction:column; align-items:stretch; gap:20px; }
  .zr-feat .zr-cover{ width:100%; max-width:none; }
  .zr-news{ padding:28px; gap:24px; }
}
@media (max-width:620px){
  .zr-cards{ grid-template-columns:minmax(0,1fr); }
  .zr-news__form{ flex-wrap:wrap; }
  .zr-news__form button{ width:100%; }
  .zr-art__rail{ flex-direction:column; }
}