/* single — page-specific fixes (loaded only there, after responsive.css) */

/* meta separator dot (date • read time) in the article meta and the "Similar blogs" cards:
   the mono caps/digits sit high in the line box, so the flex-centred dot rendered ~0.9px below the cap centre */
body.single-post .rs-meta i{transform:translateY(-.083em)}

/* category tag on the "Similar blogs" cards: caps sat 1px above the pill's centre, and the trailing letter-spacing (.12em) pushed them ~0.6px left */
body.single-post .rs-ctag{padding:7px calc(11px - .12em) 5px 11px}

/* "Summarise with AI" buttons sit inside .ar-prose, so the prose link underline ran under
   the button names in wine */
body.single-post .ar-ai-b{text-decoration:none}

/* Listen button: trailing letter-spacing (.12em) made the right side look wider than the 16px drawn */
body.single-post .ar-listen{padding-right:calc(16px - .12em)}

/* FAQ chevron: the pseudo-element is content-box (the global reset skips ::after), so the 10px box grew
   with its border, and the -70% / -30% offsets put the chevron's ink ~1.7px below (closed) / above (open)
   the question's centre. Border-box + an exact offset: a rotated square's open V spans 0.707·side from
   the box centre, so its ink centre is 0.354·side (3.5px) from it. */
body.single-post .ar-faq summary::after{box-sizing:border-box;transform:translateY(calc(-50% - 3.5px)) rotate(45deg)}
body.single-post .ar-faq details[open] summary::after{transform:translateY(calc(-50% + 3.5px)) rotate(225deg)}
body.single-post .ar-faq details.is-closing summary::after{transform:translateY(calc(-50% - 3.5px)) rotate(45deg)}

/* "Summarise this article with AI." left "AI." alone on the second line on narrow phones */
body.single-post .ar-ai h3{text-wrap:balance}

/* "Similar blogs": a fixed 4-track grid above 1240px left two related posts in the left half of the row.
   Size the tracks to the number of cards when there are fewer than four. */
@media(min-width:1241px){
  body.single-post .ar-rel-grid:not(:has(>:nth-child(3))){grid-template-columns:repeat(2,1fr)}
  body.single-post .ar-rel-grid:has(>:nth-child(3)):not(:has(>:nth-child(4))){grid-template-columns:repeat(3,1fr)}
}

/* article copy ran ~110–120 characters a line once the sidebar stacks (≤1080px) and ~105 at 1440; keep a readable measure */
body.single-post .ar-prose{max-width:72ch}

/* "Summarise with AI" — phones: one slim pill (sparkle + label + four round logo buttons) with a
   purple→blue gradient border, instead of the stacked card. The tool names stay in the DOM for screen readers. */
body.single-post .ar-ai-ml{display:none}
@media(max-width:760px){
  body.single-post .ar-ai{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:36px;padding:10px 12px 10px 16px;border-radius:14px;
    border:1.5px solid transparent;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(90deg,#8B5CF6,#3B82F6) border-box}
  body.single-post .ar-ai::before,
  body.single-post .ar-ai-h{display:none}
  body.single-post .ar-ai-ml{display:flex;align-items:center;gap:8px;min-width:0;font-size:14px;font-weight:700;letter-spacing:-.01em;color:var(--ink);white-space:nowrap}
  body.single-post .ar-ai-ml svg{width:20px;height:20px;flex:none}
  body.single-post .ar-ai-row{display:flex;gap:6px;margin:0;flex:none}
  body.single-post .ar-ai-b{padding:0;border:0;background:none;border-radius:50%}
  body.single-post .ar-ai-b:hover{transform:none;box-shadow:none}
  body.single-post .aib-m{width:32px;height:32px;border-radius:50%;background:#fff;border:1px solid var(--line);transition:border-color .25s var(--ease)}
  body.single-post .ar-ai-b:hover .aib-m{border-color:var(--wine-line)}
  body.single-post .aib-m img{width:17px;height:17px}
  body.single-post .aib-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
/* five tools don't fit beside the label under ~420px: label on its own line, icons centred below */
@media(max-width:420px){
  body.single-post .ar-ai{flex-wrap:wrap;justify-content:center;row-gap:10px;padding:12px 12px 14px}
  body.single-post .ar-ai-ml{width:100%;justify-content:center}
}

/* Topics — stacked layout (≤1080px): a collapsible "Table of contents" card (wine bar + chevron, plain
   underlined links) instead of the swipeable chip row from responsive.css */
body.single-post .ar-toc-tg{display:none}
@media(max-width:1080px){
  body.single-post .ar-toc-list{border-radius:14px;overflow:hidden;background:var(--paper-2);border:1px solid var(--line)}
  body.single-post .ar-toc-list h6{display:none}
  body.single-post .ar-toc-tg{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:15px 18px;
    border:0;background:var(--wine);color:#fff;font:inherit;font-size:15px;font-weight:700;letter-spacing:-.01em;text-align:left;cursor:pointer}
  body.single-post .ar-toc-tg svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--ease)}
  body.single-post .ar-toc-list.is-closed .ar-toc-tg svg{transform:rotate(180deg)}
  body.single-post .ar-toc-list.is-closed .ar-toc-links{display:none}
  body.single-post .ar-toc-links{display:flex;flex-direction:column;gap:0;overflow:visible;margin:0;padding:10px 18px 14px;scroll-snap-type:none}
  body.single-post .ar-toc-links a{white-space:normal;border:0;border-radius:0;padding:8px 0;background:none;
    font-size:14.5px;line-height:1.45;font-weight:600;color:var(--ink-2);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
  body.single-post .ar-toc-links a.on{background:none;color:var(--wine);font-weight:700}
}

/* Share — stacked layout (≤1080px): sticks to the bottom of the screen while the article is being read,
   then settles into its own place after the article (sticky is bounded by .ar-body). Full-bleed bar with
   the label on the left and the icons on the right. */
@media(max-width:1080px){
  body.single-post .ar-shareblk{position:sticky;bottom:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px;
    --bleed:clamp(16px,4vw,28px);margin:0 calc(var(--bleed) * -1);padding:10px var(--bleed) calc(10px + env(safe-area-inset-bottom));
    background:#fff;border-top:1px solid var(--line)}
  body.single-post .ar-shareblk h6{margin:0;text-align:left;white-space:nowrap}
  body.single-post .ar-share{flex-wrap:nowrap;justify-content:flex-end;gap:6px}
  body.single-post .ar-share a,body.single-post .ar-copy{width:34px;height:34px}
  body.single-post .ar-share a:hover,body.single-post .ar-copy:hover{transform:none}
}
@media(max-width:359px){
  body.single-post .ar-shareblk h6{font-size:9px;letter-spacing:.1em}
  body.single-post .ar-share{gap:4px}
  body.single-post .ar-share a,body.single-post .ar-copy{width:30px;height:30px}
}

/* stacked layout: the meta row is moved in front of the Table of contents (single.php) — first flex item */
@media(max-width:1080px){
  body.single-post .ar-toc>.ar-meta{order:-1;margin:0;padding-bottom:18px}
}

/* "Summarise with AI" has five tools (Grok added): in the 2-column card a lone last button spans the row */
body.single-post .ar-ai-b:last-child:nth-child(odd){grid-column:1/-1}