/* /blog/:slug — the article page's own styles (roadmap YATFA-10211, slice 11,
   YATFA-11137). The kit (y.css / ui.css) carries the frame; this file carries
   the article column and the markdown-body styles the article used to inherit
   from application.tailwind.css's `.prose` rules — which layouts/public_site
   does NOT load (it ships only y.css + ui.css + this slot), so without this
   file the body would render unstyled.

   Every rule below ports the app rule it replaces (application.tailwind.css,
   the Markdown prose styles block), translated into the etalon palette:
     base-300 code/pre surfaces        -> var(--surface2)
     primary links / blockquote border -> var(--acc2) / var(--acc)
     base-content borders (20% / 10%)  -> var(--line2) / var(--line)
   Spacing and type sizes are the Tailwind values they replace (my-3 = .75rem,
   text-2xl = 1.5rem, rounded-lg = .5rem, …) so the body reads the same as it
   did on the old chrome. The `.prose` class stays on the body container —
   public_blog_spec pins it — and NO new animation is introduced, so
   prefers-reduced-motion needs nothing extra.

   YATFA-11142 adds the page's "On this page" table of contents (sticky column
   left of the body on wide screens, collapsed block above it on narrow ones),
   the owner-approved article heading look (h2 30px/400, h3 20px/600 — a
   deliberate deviation from the ported Tailwind sizes), image-caption styling
   and the reduced-motion opt-out for the kit's smooth anchor scrolling.

   One addition beyond the ported set: MarkdownRenderer wraps fenced code
   blocks in a `.code-block-wrapper` with a `.code-block-header` label (the
   wrapper's own styling rides Tailwind utilities the etalon frame never
   loads), so the wrapper gets its frame here too — border, radius, header
   label — while the inner <pre> keeps the ported .prose pre treatment. */

  /* article column: the old page's max-w-3xl measure inside the kit's .wrap.
     YATFA-11142: with the "On this page" TOC present the column widens into a
     two-column grid on wide screens — a 240px sticky TOC to the LEFT of the
     ~760px body (the owner-approved look). Without the TOC (fewer than 3 h2,
     or the pre-11142 shape) it stays the single centered 768px measure. */
  .ar-col{max-width:768px;margin:0 auto;text-align:left}
  .ar-col.ar-has-toc{max-width:1064px}
  @media (min-width:1100px){
    .ar-col.ar-has-toc{display:grid;grid-template-columns:240px minmax(0,760px);column-gap:64px;align-items:start}
    .ar-col.ar-has-toc .ar-toc-d{grid-column:1;grid-row:1}
    .ar-col.ar-has-toc .prose{grid-column:2;grid-row:1}
    .ar-col.ar-has-toc .ar-terms,
    .ar-col.ar-has-toc .ar-more,
    .ar-col.ar-has-toc .ar-back{grid-column:2}
  }
  .ar-sec{border-top:1px solid var(--line);margin-top:64px;padding:56px 0 8px}
  .ar-terms{margin-top:44px}
  .ar-terms h2{font:600 13px/1.3 'Plus Jakarta Sans';color:var(--ink3);margin-bottom:12px}
  .ar-terms ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px}
  .ar-terms a{display:inline-block;padding:8px 14px;border:1px solid var(--line);border-radius:999px;font-size:14px;color:var(--ink2);text-decoration:none}
  .ar-terms a:hover{color:var(--ink);border-color:var(--line2)}
  /* "Keep reading" (YATFA-11338): the blog's own .posts grid (3-up, 1300px in
     blog.css) narrowed to the article column — 2-up, 1-up on narrow screens. */
  .ar-more{margin-top:48px}
  .ar-more h2{font:600 13px/1.3 'Plus Jakarta Sans';color:var(--ink3);margin-bottom:12px}
  .ar-more .posts{max-width:none;margin:0;grid-template-columns:repeat(2,minmax(0,1fr))}
  @media (max-width:640px){
    .ar-more .posts{grid-template-columns:1fr}
  }
  .ar-back{margin-top:48px;padding-top:32px;border-top:1px solid var(--line)}
  .ar-back a{font-size:15px;font-weight:600;color:var(--acc2);text-decoration:none}
  .ar-back a:hover{color:var(--ink)}

  /* hero meta row: chip + byline + date under the headline */
  .ar-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 18px;margin-top:30px;font-size:14px;color:var(--ink3)}
  .ar-meta .ar-chip{all:unset;cursor:pointer;font-size:13px;font-weight:600;color:var(--acc2);padding:6px 14px;border:1px solid var(--line2);border-radius:999px;transition:border-color .2s}
  .ar-meta .ar-chip:hover{border-color:rgba(255,255,255,.3)}

  /* ---- markdown body (port of the app's .prose rules; container type rides
     the kit's own .body measure: 16px / 1.65 / --ink2) ---- */
  .prose{overflow-wrap:break-word;line-height:1.65;color:var(--ink2);font-size:16px}
  .prose h1{font-size:1.5rem;font-weight:700;margin:2rem 0 1rem;color:var(--ink);letter-spacing:-.01em}
  /* h2 30px/400 and h3 20px/600 are the OWNER-APPROVED article look
     (YATFA-11142), not the ported Tailwind sizes the other rules keep. */
  .prose h2{font-size:30px;font-weight:400;margin:1.75rem 0 .75rem;color:var(--ink);letter-spacing:-.01em}
  .prose h3{font-size:20px;font-weight:600;margin:1.25rem 0 .5rem;color:var(--ink)}
  /* Anchored headings (blog mode): the fixed 68px header must never sit on a
     heading a TOC link or an anchor jump landed on. */
  .prose h2[id],.prose h3[id]{scroll-margin-top:96px}
  .prose p{margin:.75rem 0}
  .prose ul{list-style:disc inside;margin:.75rem 0}
  .prose ol{list-style:decimal inside;margin:.75rem 0}
  .prose li{margin:.25rem 0}
  .prose code{background:var(--surface2);padding:.125rem .375rem;border-radius:.25rem;font-size:.875em;font-family:ui-monospace,"SF Mono",Menlo,monospace;color:var(--ink)}
  .prose pre{background:var(--surface2);border-radius:.5rem;padding:1rem;overflow-x:auto;margin:1rem 0}
  .prose pre code{background:transparent;padding:0;font-size:.875em}
  .prose table{width:100%;margin:1rem 0;border-collapse:collapse}
  .prose th{text-align:left;font-weight:700;border-bottom:1px solid var(--line2);padding:.5rem .75rem;color:var(--ink)}
  .prose td{padding:.5rem .75rem;border-bottom:1px solid var(--line)}
  .prose blockquote{border-left:4px solid var(--acc);padding-left:1rem;font-style:italic;margin:1rem 0}
  .prose a{color:var(--acc2);text-decoration:underline;text-underline-offset:2px}
  .prose a:hover{opacity:.8}
  .prose strong{font-weight:700}
  .prose em{font-style:italic;font-weight:inherit}
  .prose hr{margin:1.5rem 0;border:0;border-top:1px solid var(--line2)}
  .prose video.blog-video{display:block;max-width:100%;height:auto;margin:1.5rem auto;border-radius:.5rem}

  /* classes the shared renderer emits as Tailwind utilities (inert on this
     frame, so re-stated here): MarkdownRenderer wraps EVERY table in
     <div class="overflow-x-auto"> (YATFA-4550 fence — wide markdown scrolls in
     place). y.css sets body{overflow-x:hidden}, so without this rule a wide
     table is silently CLIPPED instead of scrolling. Task-list checkboxes carry
     "app-check mr-2". */
  .prose .overflow-x-auto{overflow-x:auto;max-width:100%}
  .prose .app-check{margin-right:.5rem;vertical-align:middle}

  /* fenced code blocks (MarkdownRenderer's .code-block-wrapper): the frame the
     wrapper's Tailwind utilities would have given it on the app chrome */
  .prose .code-block-wrapper{border:1px solid var(--line2);border-radius:.5rem;overflow:hidden;margin:1rem 0}
  .prose .code-block-header{display:flex;justify-content:space-between;padding:.5rem 1rem;font-size:.75rem;font-weight:500;color:var(--ink3);border-bottom:1px solid var(--line);background:var(--surface)}
  .prose .code-block-wrapper pre{border-radius:0;margin:0}

  /* ---- "On this page" table of contents (YATFA-11142) ----

     One list, two variants: .ar-toc-d is the wide-screen sticky column the
     grid above places left of the body (>=1100px); .ar-toc-m is the narrow
     collapsed <details> block above the body. The page script toggles .on on
     the entry of the section being read: muted entries, the active one white
     with the 2px accent bar on its left — the owner-approved look. */
  .ar-toc ul,.ar-toc-l{list-style:none;margin:0;padding:0}
  .ar-toc a{display:block;padding:5px 0 5px 14px;border-left:2px solid transparent;font-size:13.5px;line-height:1.5;color:var(--ink2);text-decoration:none;transition:color .15s,border-color .15s}
  .ar-toc a:hover{color:var(--ink)}
  .ar-toc a.on{color:var(--ink);border-left-color:var(--acc)}
  .ar-toc-d .ar-toc-t{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);margin-bottom:10px}
  @media (min-width:1100px){
    /* Sticky under the fixed 68px header; scrollable on its own when a long
       TOC outgrows the viewport, so it never fights the page for scroll. */
    .ar-toc-d{position:sticky;top:96px;align-self:start;max-height:calc(100vh - 120px);overflow:auto;padding-bottom:8px}
    .ar-toc-m{display:none}
  }
  @media (max-width:1099.98px){
    .ar-toc-d{display:none}
  }
  /* The collapsed narrow-screen block: a plain <details>, so it expands with
     no JS at all; the +/– is the only affordance it needs. */
  .ar-toc-m{margin:0 0 28px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
  .ar-toc-m summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;padding:12px 16px;font-size:14px;font-weight:600;color:var(--ink)}
  .ar-toc-m summary::-webkit-details-marker{display:none}
  .ar-toc-m summary::after{content:"+";color:var(--ink3);font-weight:400;font-size:18px}
  .ar-toc-m[open] summary::after{content:"–"}
  .ar-toc-m .ar-toc-l{padding:2px 16px 12px}

  /* ---- image captions (YATFA-11142) ----

     A paragraph made only of an italic run, directly after a paragraph
     holding an image, is that image's caption: smaller, muted, close under
     the image. The CSS sibling rule (an image-only paragraph followed by an
     italic-only one) is the whole detection — no renderer changes. */
  /* YATFA-11228: body images carry their intrinsic width/height attributes so the
     box is reserved before the bytes arrive. With max-width:100% (the kit's img
     rule) a bare height attribute would pin the HEIGHT while the width shrinks and
     stretch the picture — height:auto lets the width/height attribute RATIO
     (aspect-ratio from the attributes) size the box instead. */
  .prose img{height:auto}
  .prose p:has(> img:only-child){margin-bottom:.25rem}
  .prose p:has(> img:only-child) + p:has(> em:only-child){margin-top:.125rem;font-size:13.5px;color:var(--ink3);line-height:1.5}

  /* Smooth anchor scrolling ONLY when the reader has not asked for reduced
     motion: y.css sets html{scroll-behavior:smooth} unconditionally, so this
     page opts back out for readers who asked not to get motion. */
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}