/* Article shell: guides, tools, breed pages, reviews. Tokens only. */

.article-head{padding-block:var(--space-4) var(--space-block)}
.article-head h1{max-width:20ch;margin-bottom:var(--space-7)}
.article-head .byline{margin-top:var(--space-5)}
.draft-banner{background:var(--color-surface-tint);border:2px dashed var(--color-text-primary);border-radius:var(--radius-xs);padding:var(--space-5) var(--space-7);margin-bottom:var(--space-8);font-weight:var(--font-weight-strong)}

.article{display:grid;gap:var(--space-block);padding-bottom:var(--space-section)}
.article>*{min-width:0}
.col{max-width:var(--measure)}

/* answer box and takeaways */
.answer{background:var(--color-surface-strong);border-radius:var(--radius-sm);padding:var(--space-8);max-width:var(--measure)}
.answer-label{margin:0 0 var(--space-3);font-size:var(--font-size-sm);font-weight:var(--font-weight-heavy);letter-spacing:.08em;text-transform:uppercase}
.answer p:last-child{margin:0;font-size:var(--font-size-xl);line-height:var(--line-height-reading)}
.takeaways{border:2px solid var(--color-text-primary);border-radius:var(--radius-sm);padding:var(--space-8);max-width:var(--measure)}
.takeaways h2{font-size:var(--font-size-xl);margin-bottom:var(--space-5)}
.takeaways ul{padding-left:1.2em;margin:0}
.takeaways li{margin-bottom:var(--space-4)}

/* in this article */
.toc{max-width:var(--measure);border-left:var(--space-4) solid var(--color-surface-strong);padding-left:var(--space-8)}
.toc-title{margin:0 0 var(--space-4);font-size:var(--font-size-sm);font-weight:var(--font-weight-heavy);letter-spacing:.08em;text-transform:uppercase}
.toc ol{margin:0;padding-left:1.3em}
.toc li{margin:0}
.toc a{display:inline-flex;align-items:center;min-height:44px}
.toc details summary{display:inline-flex;align-items:center;min-height:44px;cursor:pointer;font-weight:var(--font-weight-heavy);text-decoration:underline}

/* body */
.prose h2{margin-top:var(--space-section);font-size:clamp(var(--font-size-xl),1rem + 1vw,var(--font-size-2xl))}
.prose h2:first-child{margin-top:0}
.prose h3{margin-top:var(--space-block)}
.prose ul,.prose ol{padding-left:1.3em;margin:0 0 var(--space-7)}
.prose li{margin-bottom:var(--space-4)}
.prose .table-scroll{margin-block:var(--space-8);max-width:none}
.prose caption{caption-side:bottom;text-align:left;padding:var(--space-5) var(--space-7);font-size:var(--font-size-sm);color:var(--color-text-muted)}
.table-note{font-size:var(--font-size-sm);color:var(--color-text-muted);max-width:var(--measure)}
.formula{font-family:var(--font-family-stack);font-weight:var(--font-weight-strong);background:var(--color-surface-tint);border-left:var(--space-4) solid var(--color-surface-strong);padding:var(--space-5) var(--space-7);border-radius:var(--radius-xs);margin-block:var(--space-7)}
.prose blockquote{margin:var(--space-8) 0;padding-left:var(--space-8);border-left:var(--space-4) solid var(--color-text-inverse);font-size:var(--font-size-xl)}

/* faq */
.faq{max-width:var(--measure)}
.faq h2{margin-bottom:var(--space-7)}
.faq details{border-bottom:var(--space-1) solid var(--color-border-subtle)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:var(--space-7);min-height:56px;cursor:pointer;list-style:none;font-size:var(--font-size-lg);font-weight:var(--font-weight-heavy)}
.faq summary h3{margin:0;font:inherit}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:9px;height:9px;border-right:3px solid currentColor;border-bottom:3px solid currentColor;transform:rotate(45deg)}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq summary:hover{text-decoration:underline}
.faq details>div{padding-bottom:var(--space-7)}
.faq details>div p:last-child{margin:0}

/* sources, author, helpful */
.sources{max-width:var(--measure)}
.sources h2{font-size:var(--font-size-2xl)}
.sources ol{padding-left:1.3em}
.sources li{margin-bottom:var(--space-5)}
.sources .src-meta{display:block;font-size:var(--font-size-sm);color:var(--color-text-muted)}
.author-card{display:flex;gap:var(--space-8);align-items:flex-start;max-width:var(--measure);padding:var(--space-8);background:var(--color-surface-tint);border-radius:var(--radius-sm)}
.author-mark{flex:none;display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:var(--color-text-primary);color:var(--color-text-secondary);font-weight:var(--font-weight-heavy);font-size:var(--font-size-xl)}
.author-name{margin:0;font-size:var(--font-size-lg);font-weight:var(--font-weight-heavy)}
.author-role{margin:0 0 var(--space-4);color:var(--color-text-muted);font-weight:var(--font-weight-strong)}
.author-card p:last-child{margin:0}
.helpful{display:none;align-items:center;flex-wrap:wrap;gap:var(--space-5)}
.js .helpful{display:flex}
.helpful p{margin:0;font-weight:var(--font-weight-heavy)}
.helpful-thanks{font-weight:var(--font-weight-strong)}

/* related */
.related h2{margin-bottom:var(--space-block)}
.card--text{padding:var(--space-8);border:2px solid var(--color-text-primary);border-radius:var(--radius-sm);gap:var(--space-4);justify-content:space-between;min-height:9rem}
.card--text:hover{background:var(--color-surface-tint)}

/* verdict (can puppies eat), quick facts, draft markers */
.verdict{display:flex;gap:var(--space-8);align-items:flex-start;border:2px solid var(--color-text-primary);border-radius:var(--radius-sm);padding:var(--space-8);max-width:var(--measure)}
.verdict svg{flex:none;width:48px;height:48px}
.verdict-word{display:block;margin:0 0 var(--space-3);font-size:var(--font-size-3xl);font-weight:var(--font-weight-heavy);line-height:1.05}
.verdict p:last-child{margin:0;font-size:var(--font-size-lg)}
.verdict--yes{background:var(--color-surface-strong)}
.verdict--care{background:var(--color-surface-tint);border-style:dashed}
.verdict--no{background:var(--color-status-danger-surface);border-color:var(--color-status-danger);color:var(--color-status-danger)}
.facts{max-width:var(--measure);border:2px solid var(--color-text-primary);border-radius:var(--radius-sm);overflow:hidden}
.facts-title{margin:0;padding:var(--space-5) var(--space-8);background:var(--color-surface-strong);font-weight:var(--font-weight-heavy)}
.facts dl{display:grid;grid-template-columns:minmax(8rem,1fr) 2fr;margin:0}
.facts dt,.facts dd{margin:0;padding:var(--space-5) var(--space-8);border-top:var(--space-1) solid var(--color-border-subtle)}
.facts dt{font-weight:var(--font-weight-strong)}
.todo{display:inline-block;padding:0 var(--space-3);border-radius:var(--space-3);background:var(--color-surface-strong);font-weight:var(--font-weight-heavy);font-size:.9em}
.status-tag{display:inline-block;padding:var(--space-2) var(--space-4);border:2px dashed var(--color-text-primary);border-radius:var(--radius-md);font-size:var(--font-size-sm);font-weight:var(--font-weight-heavy)}

/* legacy post bodies: hero, figures, embeds, buttons, converted accordions */
.article-hero{margin:0 0 var(--space-block);border-radius:var(--radius-sm);overflow:hidden;background:var(--color-surface-tint)}
.article-hero img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.prose figure{margin:var(--space-8) 0}
.prose figure img,.prose p>picture img{display:block;max-width:100%;height:auto;border-radius:var(--radius-xs)}
.prose figcaption{font-size:var(--font-size-sm);color:var(--color-text-muted);margin-top:var(--space-4)}
.prose .embed{position:relative;aspect-ratio:16/9;margin:var(--space-8) 0;background:var(--color-surface-strong);border-radius:var(--radius-xs);overflow:hidden}
.prose .embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.prose .btn-row{margin:var(--space-7) 0}
.prose .table-scroll{max-width:none}
.prose .table-scroll img{width:auto;max-width:120px;height:auto}
.prose .table td p{margin:0 0 var(--space-4)}
.prose .table td ul{margin:0;padding-left:1.1em}
.prose .qa-list{margin:var(--space-8) 0}
.prose .qa{border-bottom:var(--space-1) solid var(--color-border-subtle)}
.prose .qa summary{display:flex;align-items:center;justify-content:space-between;gap:var(--space-7);min-height:56px;cursor:pointer;list-style:none;font-weight:var(--font-weight-heavy)}
.prose .qa summary::-webkit-details-marker{display:none}
.prose .qa summary::after{content:"";flex:none;width:9px;height:9px;border-right:3px solid currentColor;border-bottom:3px solid currentColor;transform:rotate(45deg)}
.prose .qa[open] summary::after{transform:rotate(-135deg)}
.prose .qa>div{padding-bottom:var(--space-7)}

/* wide tables inside long reads: text keeps the reading measure, tables use the full column */
.prose.col{max-width:none}
.prose.col>*{max-width:var(--measure)}
.prose.col>.table-scroll,.prose.col>.embed{max-width:none}
.prose.col .table-scroll+.table-note{max-width:var(--measure)}

/* sticky "Top picks" bar on money pages (mobile only) and the reserved ad slot (rendered only when SITE.ads is true) */
.sticky-picks{display:none}
@media (max-width:767px){
  main:has(.sticky-picks){padding-bottom:calc(var(--space-section) + var(--space-block))}
  .sticky-picks{display:flex;justify-content:center;position:fixed;inset:auto 0 0 0;z-index:30;padding:var(--space-5) var(--gutter);background:var(--color-surface-page);border-top:var(--space-1) solid var(--color-border-subtle)}
  .sticky-picks .btn{width:100%;max-width:24rem}
}
.ad-slot{min-height:280px;display:grid;place-items:center;background:var(--color-surface-tint);border:var(--space-1) dashed var(--color-border-subtle);border-radius:var(--radius-xs)}
.ad-label{margin:0;font-size:var(--font-size-xs);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.08em}