/* Anpdf article template v3 (proposal, 25 Oct 2026) — changes on top of v2 only.
   Load order: tokens.css → article.css → article-v2.css → site-header.css (approved header) → article-v3.css.
   One column: header and footer of the site on 1120 px; everything inside the article (crumbs, H1, author row, cover, text, final CTA, tags, related, previous / next) on the 740 px text column. */
.site-v3{--article-measure:740px;background:var(--surface)}   /* 1 · white reading area, no sheet */

/* Head (revision 25 Oct 2026, 3rd pass): crumbs, H1, author row, cover and text share ONE column — the text column
   (740 px, centred) — so their left and right edges sit on the same two vertical lines; nothing sticks out.
   Rhythm: header → crumbs 32 · crumbs → H1 16 · H1 → author row 24 · author row → cover 32 · cover → text 32. */
.site-v3 .article{padding-top:32px}
.site-v3 .article-head{max-width:var(--article-measure)}
.site-v3 .crumbs{margin-bottom:16px}
/* H1 36/44 (was 44/52): same as the blog page H1; 2 : 1 to the body text 18. Phone keeps 30/38. */
.site-v3 .article-title{font-size:36px;line-height:44px}

/* Author row: one 40 px row across the column — avatar · two text lines · buttons at the right edge.
   Line 1: name · role. Line 2: Published · Updated · reading time. */
.site-v3 .meta-bar{margin-top:24px;padding-top:0;border-top:0;flex-wrap:nowrap;column-gap:12px}
.site-v3 .author-text{min-width:0}
.site-v3 .author-line{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;font-size:13px;line-height:20px;color:var(--text-secondary)}
.site-v3 .author-line .author-name,.site-v3 .author-line .author-role{display:inline;line-height:20px}
.site-v3 .author-line>span+span::before{content:"·";margin:0 4px}
.site-v3 .dates{display:flex;flex-wrap:wrap;gap:0;padding:0;border:0}
.site-v3 .dates>div{order:0}
.site-v3 .dates>div+div::before{content:"·";margin-left:4px}   /* the 4 px flex gap of each date gives the right side */
.site-v3 .dates>div:nth-child(3) dd::before{content:none}
.site-v3 .dates dd.muted{color:var(--text-secondary)}
.site-v3 .meta-actions .btn{padding:0 8px}

/* Cover: full column width 740 × 320 (37:16), same edges as H1 and text.
   ≈ 101 % of the area of the reference cover at 1440 × 900 (646 × 363). Drawn for this size: nothing cropped or stretched. */
.site-v3 .article-cover{max-width:var(--article-measure);margin:32px auto 0;aspect-ratio:740/320;height:auto}
.site-v3 .article-cover img{object-fit:cover;object-position:50% 50%}

/* Text column without a sheet: no border, shadow or side box */
.site-v3 .article-sheet{max-width:var(--article-measure);margin:32px auto 0;padding:0 0 24px;background:transparent;outline:0;border-radius:0}
.site-v3 .article-body h2{scroll-margin-top:24px}

/* End blocks (final CTA, tags, related articles, previous / next) on the same 740 column as the head and text —
   same left and right edges, nothing sticks out. Related: three cards in a row on desktop, two columns on tablet. */
.site-v3 .end-wrap{max-width:var(--article-measure);margin-top:40px}
.site-v3 .related,.site-v3 .pager{max-width:var(--article-measure)}
.site-v3 .end-wrap .ext-card-final{max-width:none;margin-top:0 !important}

/* Tablet 641–960 */
@media (max-width:960px){
  .site-v3 .article-cover{aspect-ratio:740/320}   /* same shape as desktop (base tablet rule is 3:2) */
  .site-v3 .meta-bar{flex-wrap:wrap}
  .site-v3 .article-sheet{padding:0 0 24px}
  /* fix: on tablet the actions sit on their own line at the left, so the panel opens to the right of the button
     (it used to open to the left and ran 37 px past the window at 800 px) */
  .site-v3 .share-panel{left:0;right:auto;max-width:calc(100vw - 32px)}
  .site-v3 .article-body .collection{grid-template-columns:repeat(2,minmax(0,1fr))}   /* fix: two columns as documented */
}

/* Intro paragraph: its own element (first paragraph, full text colour), set in the body size 18/30. */
.site-v3 .article-intro{font-size:18px;line-height:30px}

/* Trust line in the install cards: when it wraps on the 740 column, a line must not start with "·".
   The dot sits in the 16 px gap before each item; at the start of a line it falls outside the box and is clipped. */
.site-v3 .ext-trust{gap:4px 16px;overflow:hidden}
.site-v3 .ext-trust span{position:relative}
.site-v3 .ext-trust span::before,.site-v3 .ext-trust span+span::before{content:"·";position:absolute;left:-10px;margin:0}

/* Phone ≤ 640 (no separate phone design — only keeps the page inside the window): the Share panel spans the author row
   instead of opening to the right of the button, so the closed panel does not widen the page. */
@media (max-width:640px){
  .site-v3 .share{position:static}
  .site-v3 .share-panel{left:0;right:0;max-width:none;width:auto}
}

/* ---------- Revision 25 Oct 2026, evening ---------- */
/* Share: brand logos in their own colours (Simple Icons, CC0); they keep their colour on hover, the label turns coral.
   Copy confirmation is shown on the Copy button only; the live region stays visually hidden (screen readers). */
.site-v3 .share-item svg.brand{width:20px;height:20px}
.site-v3 [data-copy-status]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Related articles (approved 25 Oct 2026, variant B): three in a row, compact text block — card 233 × 245, nearly square.
   Image 16:9 (233 × 131); title 15/22 (card title scales with card width: blog cards 357 px → 18/26, related 233 px → 15/22);
   format and reading time on one line under the title. */
.site-v3 .rcard-img{aspect-ratio:16/9}
.site-v3 .rcard-body{display:grid;grid-template-columns:auto 1fr;column-gap:0;row-gap:6px;padding:12px 16px 14px;align-content:start}
.site-v3 .rcard a{grid-column:1 / -1;grid-row:1;font-size:15px;line-height:22px}
.site-v3 .rcard-format{grid-row:2;grid-column:1}
.site-v3 .rcard-meta{grid-row:2;grid-column:2;font-size:12px;line-height:16px}
.site-v3 .rcard-meta::before{content:"·";margin:0 6px;color:var(--text-secondary)}

/* Without Previous / Next the related block is the last one; the footer keeps its approved 56 px top margin. */
.site-v3 .related{margin-bottom:0}

/* Tags and step numbers are toggle buttons (aria-pressed): hover as before; a press keeps the selected state,
   a second press removes it. Same pattern as the blog category pills. */
.site-v3 .tags .tag{height:28px;padding:0 10px;display:inline-flex;align-items:center;gap:4px;border:0;border-radius:var(--radius-full);background:var(--surface);outline:1px solid var(--border);outline-offset:-1px;color:var(--text);font:500 13px/18px var(--font-ui);cursor:pointer;transition:background-color 120ms cubic-bezier(.2,0,0,1),color 120ms cubic-bezier(.2,0,0,1)}
.site-v3 .tags .tag svg{width:14px;height:14px;display:none}
.site-v3 .tags .tag:hover,.site-v3 .tags .tag.is-hover{background:var(--hover);color:var(--primary)}
.site-v3 .tags .tag:focus-visible,.site-v3 .tags .tag.is-focus{outline:2px solid var(--focus);outline-offset:2px}
.site-v3 .tags .tag[aria-pressed="true"]{background:var(--selected);color:var(--primary);outline-color:transparent;font-weight:600}
.site-v3 .tags .tag[aria-pressed="true"] svg{display:block}
.site-v3 .tags .tag[aria-pressed="true"]:focus-visible{outline-color:var(--focus)}

.site-v3 .steps>li::before{content:none}
.site-v3 .step-num{position:absolute;left:0;top:0;width:28px;height:28px;padding:0;border:0;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;background:var(--selected);color:var(--primary);font:600 14px/1 var(--font-ui);font-variant-numeric:tabular-nums;cursor:pointer;transition:background-color 120ms cubic-bezier(.2,0,0,1),color 120ms cubic-bezier(.2,0,0,1)}
.site-v3 .step-num:hover,.site-v3 .step-num.is-hover{background:var(--hover)}
.site-v3 .step-num:focus-visible,.site-v3 .step-num.is-focus{outline:2px solid var(--focus);outline-offset:2px}
.site-v3 .step-num[aria-pressed="true"]{background:var(--primary);color:var(--surface)}
@media (prefers-reduced-motion:reduce){.site-v3 .tags .tag,.site-v3 .step-num{transition:none}}

/* Settings table: column headings a little more visible — 14/20, text colour, weight 600 (same as the row labels),
   12 px vertical padding; the panel background still separates them from the rows. */
.site-v3 .article-body th{font-size:14px;line-height:20px;color:var(--text);padding:12px 14px}

/* Share panel (revision 25 Oct 2026, brand rules):
   row 1 — official logos where use on a share button is allowed: WhatsApp (glyph, #25D366), Facebook (#0866FF), Telegram (blue gradient);
   the logos keep their colours in every state — only the tile background and the label react to hover;
   row 2 — text buttons without logos: LinkedIn, X, Reddit (X and Reddit until permission for our styling is confirmed).
   Both rows: three equal columns, centred content. Every item opens the network's share URL in a new tab. */
.site-v3 .share-logos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
.site-v3 .share-tile{height:68px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border-radius:var(--radius-8);color:var(--text);text-decoration:none;font:500 13px/18px var(--font-ui)}
.site-v3 .share-tile svg.brand{width:24px;height:24px;flex:none}
.site-v3 .share-tile:hover,.site-v3 .share-tile.is-hover{background:var(--hover);color:var(--primary)}
.site-v3 .share-tile:focus-visible,.site-v3 .share-tile.is-focus{outline:2px solid var(--focus);outline-offset:-2px}
.site-v3 .share-text{margin-top:4px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
.site-v3 .share-link{height:36px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-8);outline:1px solid var(--border);outline-offset:-1px;color:var(--text);text-decoration:none;font:500 13px/18px var(--font-ui)}
.site-v3 .share-link:hover,.site-v3 .share-link.is-hover{background:var(--hover);color:var(--primary)}
.site-v3 .share-link:focus-visible,.site-v3 .share-link.is-focus{outline:2px solid var(--focus);outline-offset:-2px}