/* RestfulPicks: shared components of every article page (top list, single review, comparison, how-to, blog
   post, gift guide). Load after site.css:  <link rel="stylesheet" href="assets/article.css">
   Page-only tweaks go in assets/pages/<page>.css. Vocabulary (see styleguide.html):
   rp-crumbs, rp-ahero, rp-acover, rp-alayout / rp-amain / rp-arail, rp-toc (phones) + rp-toc-rail (desktop),
   rp-prose, rp-callout(--tip|--caution|--note|--safety|--avoid), rp-quick (+ rp-picks / rp-pickrow from site.css),
   rp-pick(--top), rp-proscons, rp-specs, rp-facts, rp-tablebox / rp-table, rp-verdictbox, rp-say--inline,
   rp-steps, rp-checks / rp-xlist, rp-ab, rp-rounds, rp-tier, rp-related, rp-howmini, rp-teambox.
   Tidy kit (2026-10-18, at the end of this file): rp-asec, rp-cq, rp-expand, rp-qpicks, rp-compare, rp-itiles,
   rp-pcard, rp-pc, rp-qline, rp-safeline, rp-srcline, rp-cited, rp-gcards, rp-acover--art. */

/* ---------- breadcrumb (every page except home; BreadcrumbList JSON-LD beside it) ---------- */
.rp-crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:.2rem .35rem;font-size:.875rem;color:var(--muted)}
.rp-crumbs li{display:inline-flex;align-items:center;gap:.35rem}
.rp-crumbs li+li::before{content:"";width:.45rem;height:.45rem;border-right:1.6px solid var(--lilac-2);border-top:1.6px solid var(--lilac-2);transform:rotate(45deg);margin-right:.15rem}
.rp-crumbs a{display:inline-flex;align-items:center;gap:.3rem;min-height:1.75rem;color:var(--chip-text);font-weight:600;text-decoration:none}
.rp-crumbs a:hover{text-decoration:underline}
.rp-crumbs [aria-current]{color:var(--muted)}
.rp-crumbs--night ol{color:var(--night-muted)}
.rp-crumbs--night a{color:#fff}
.rp-crumbs--night li+li::before{border-color:var(--lilac)}
.rp-crumbs--night [aria-current]{color:var(--night-muted)}

/* ---------- article hero ---------- */
.rp-ahero{position:relative;background:linear-gradient(180deg,var(--lav),var(--ground));padding:clamp(1.25rem,1rem + 1vw,2rem) 0 clamp(1.75rem,1.2rem + 2vw,3rem);overflow:hidden}
.rp-ahero::after{content:"";position:absolute;right:-6rem;top:-6rem;width:18rem;height:18rem;border-radius:999px;background:radial-gradient(circle,rgb(185 176 245/.45),transparent 70%);pointer-events:none}
.rp-ahero__grid{position:relative;z-index:1;display:grid;gap:1.75rem;align-items:center;margin-top:1rem}
.rp-ahero__tags{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center}
/* the kind chip gets a white fill so it does not melt into the lavender hero */
.rp-ahero .rp-kind{background:#fff;box-shadow:inset 0 0 0 1px var(--line-2)}
.rp-ahero__h1{font-family:var(--display);font-weight:700;color:var(--ink)}
.rp-ahero h1,.rp-ahero__h1{margin-top:.8rem;font-size:clamp(1.85rem,1.3rem + 2.2vw,2.9rem);line-height:1.12;letter-spacing:-.02em;max-width:46rem}
.rp-ahero__dek{margin-top:.8rem;max-width:42rem;font-size:clamp(1.02rem,.96rem + .3vw,1.15rem);color:var(--text)}
.rp-ahero .rp-byline{margin-top:1.1rem}
.rp-ahero .rp-disclose{margin-top:.9rem;padding:.6rem .8rem;border-radius:12px;background:#fff;border:1px solid var(--line);max-width:42rem}
@media (min-width:1024px){.rp-ahero__grid--media{grid-template-columns:1.15fr .85fr;gap:3rem}}
/* cover image of an article */
.rp-acover{position:relative}
.rp-acover img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--r-xl);box-shadow:var(--sh-2)}
.rp-acover--arch img{aspect-ratio:4/3.6;border-radius:999px 999px var(--r-l) var(--r-l)}
.rp-acover figcaption{margin-top:.5rem;font-size:.8rem;color:var(--muted)}
.rp-acover__moon{position:absolute;top:-.8rem;right:1.2rem;width:3.5rem;height:3.5rem;border-radius:999px;background:radial-gradient(circle at 36% 34%,#fff8de,var(--moon) 64%,#d4a03a);box-shadow:0 0 40px 8px rgb(232 184 74/.35)}

/* ---------- layout: main column + sticky rail ---------- */
.rp-alayout{display:grid;gap:2rem;padding-block:clamp(1.5rem,1rem + 2vw,2.75rem) var(--sec)}
.rp-amain{min-width:0}
.rp-amain>*+*{margin-top:clamp(1.75rem,1.4rem + 1.2vw,2.5rem)}
.rp-arail{display:none}
/* the rail turns on at 1200 px: from 1024 it left the column narrower than at 768 */
@media (min-width:1200px){
  .rp-alayout{grid-template-columns:minmax(0,1fr) 17.5rem;gap:3rem}
  .rp-arail{display:block}
  .rp-arail__sticky{position:sticky;top:6rem;display:grid;gap:1rem}
}
/* "On this page": a collapsible box on phones and tablets, a sticky rail list on desktop */
.rp-toc{border-radius:var(--r-m);background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1)}
.rp-toc>summary{display:flex;align-items:center;justify-content:space-between;gap:.75rem;min-height:3rem;padding:.7rem 1rem;cursor:pointer;list-style:none;font:700 1rem var(--display);color:var(--ink)}
.rp-toc>summary::-webkit-details-marker{display:none}
.rp-toc>summary>span{display:inline-flex;align-items:center;gap:.5rem}
.rp-toc>summary .rp-ic{color:var(--act)}
.rp-toc[open]>summary>.rp-ic{transform:rotate(180deg)}
.rp-toc .rp-toc__list{padding:0 .6rem .7rem}
@media (min-width:1200px){.rp-toc{display:none}}
.rp-toc-rail{padding:1rem;border-radius:var(--r-m);background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1)}
.rp-toc-rail__title{display:flex;align-items:center;gap:.45rem;margin:0 .4rem .5rem;font:700 1rem var(--display);color:var(--ink)}
.rp-toc-rail__title .rp-ic{color:var(--moon-text)}
.rp-toc__list{display:grid;gap:.1rem;counter-reset:toc}
.rp-toc__list a{position:relative;display:flex;align-items:center;gap:.6rem;min-height:2.4rem;padding:.35rem .5rem;border-radius:10px;color:var(--text);font-size:.92rem;font-weight:600;line-height:1.3;text-decoration:none}
.rp-toc__list a::before{counter-increment:toc;content:counter(toc);display:grid;place-items:center;flex:none;width:1.5rem;height:1.5rem;border-radius:999px;background:var(--lav);color:var(--chip-text);font:800 .78rem var(--display)}
.rp-toc__list a:hover{background:var(--ground);color:var(--act)}
.rp-toc__list a[aria-current]{background:var(--act-tint);color:var(--act)}

/* ---------- prose ---------- */
.rp-prose{color:var(--text);font-size:1.0625rem;line-height:1.72}
.rp-prose>*+*{margin-top:1rem}
.rp-prose h2{margin-top:2.5rem;font-size:clamp(1.5rem,1.25rem + 1vw,2rem)}
.rp-prose h3{margin-top:1.9rem;font-size:clamp(1.2rem,1.1rem + .45vw,1.4rem)}
.rp-prose h2:first-child,.rp-prose h3:first-child{margin-top:0}
.rp-prose a{color:var(--act);font-weight:600;text-underline-offset:3px}
.rp-prose strong{color:var(--ink)}
.rp-prose ul{display:grid;gap:.45rem}
.rp-prose ul>li{position:relative;padding-left:1.5rem}
.rp-prose ul>li::before{content:"";position:absolute;left:.15rem;top:.62em;width:.6rem;height:.6rem;border-radius:999px;background:radial-gradient(circle at 70% 40%,var(--ground) 0 42%,transparent 44%),var(--lilac-2)}
.rp-prose ol{display:grid;gap:.55rem;counter-reset:pr}
.rp-prose ol>li{position:relative;padding-left:2.2rem}
.rp-prose ol>li::before{counter-increment:pr;content:counter(pr);position:absolute;left:0;top:.1em;display:grid;place-items:center;width:1.6rem;height:1.6rem;border-radius:999px;background:var(--lav);color:var(--chip-text);font:800 .85rem/1 var(--display)}
.rp-prose blockquote{position:relative;padding:1rem 1.2rem 1rem 3.2rem;border-radius:var(--r-m);background:var(--lav);color:var(--ink);font:600 1.08rem/1.55 var(--display)}
.rp-prose blockquote::before{content:"\201C";position:absolute;left:1rem;top:.35rem;font:800 2.6rem/1 var(--display);color:var(--lilac-2)}
.rp-prose blockquote cite{display:block;margin-top:.4rem;font:500 .875rem var(--body);color:var(--muted);font-style:normal}
.rp-prose figure img{border-radius:var(--r-l);width:100%}
.rp-prose figcaption{margin-top:.45rem;font-size:.85rem;color:var(--muted)}
.rp-prose table{width:100%;border-collapse:collapse;font-size:.95rem}
.rp-prose th,.rp-prose td{padding:.6rem .7rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.rp-prose th{color:var(--ink);font-weight:700;background:var(--lav)}
.rp-prose hr{border:0;height:14px;margin-block:2rem;background:radial-gradient(circle,var(--lilac) 2px,transparent 2.5px) center/22px 14px repeat-x}
.rp-lead{font-size:1.15rem;color:var(--ink)}

/* ---------- callouts ---------- */
.rp-callout{display:grid;grid-template-columns:2.6rem minmax(0,1fr);gap:.85rem;align-items:start;padding:1rem 1.15rem;border-radius:var(--r-m);background:var(--lav);border:1px solid var(--line-2);color:var(--text);font-size:.98rem}
.rp-callout__ico{display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:12px;background:#fff;color:var(--act)}
.rp-callout__title{font:700 1.05rem/1.3 var(--display);color:var(--ink);margin-bottom:.2rem}
.rp-callout p+p,.rp-callout ul{margin-top:.4rem}
.rp-callout__src{display:block;margin-top:.45rem;font-size:.84rem;color:var(--muted)}
.rp-callout--tip{background:var(--lav)}
.rp-callout--caution{background:var(--warn-tint);border-color:#f1dc9f}
.rp-callout--caution .rp-callout__ico{color:var(--moon-text)}
.rp-callout--note{background:#fff;border-color:var(--line)}
.rp-callout--note .rp-callout__ico{background:var(--lav);color:var(--night)}
.rp-callout--safety{background:var(--bad-tint);border-color:#f6c9d1}
.rp-callout--safety .rp-callout__ico{color:var(--bad)}
.rp-callout--avoid{background:#fff;border-color:#f6c9d1;border-left:5px solid var(--bad)}
.rp-callout--avoid .rp-callout__ico{background:var(--bad-tint);color:var(--bad)}
/* tick / cross lists */
.rp-checks,.rp-xlist{display:grid;gap:.45rem}
.rp-checks li,.rp-xlist li{position:relative;padding-left:1.75rem}
.rp-checks li::before,.rp-xlist li::before{content:"";position:absolute;left:0;top:.2em;width:1.2rem;height:1.2rem;border-radius:999px;background-repeat:no-repeat;background-position:center;background-size:.75rem}
.rp-checks li::before{background-color:var(--ok-tint);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316794a' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
.rp-xlist li::before{background-color:var(--bad-tint);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b4233c' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E")}

/* ---------- quick picks summary (uses rp-picks / rp-pickrow from site.css) ---------- */
.rp-quick{padding:clamp(1rem,.8rem + 1vw,1.5rem);border-radius:var(--r-xl);background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1)}
.rp-quick__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1rem;margin-bottom:1rem}
.rp-quick__head h2{display:flex;align-items:center;gap:.55rem;font-size:clamp(1.35rem,1.15rem + .8vw,1.7rem)}
.rp-quick__head h2 .rp-ic{color:var(--moon-text)}
.rp-quick__note{margin-top:.9rem;font-size:.875rem;color:var(--muted)}

/* ---------- product pick block ---------- */
.rp-pick{position:relative;padding:clamp(1.1rem,.8rem + 1.2vw,1.75rem);border-radius:var(--r-xl);background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1)}
.rp-pick--top{border-color:#f1dc9f;box-shadow:0 0 0 4px rgb(251 239 201/.7),var(--sh-1)}
.rp-pick__head{display:flex;gap:.9rem;align-items:center;margin-bottom:1.1rem}
.rp-pick__award{display:inline-flex;align-items:center;gap:.35rem;padding:.22rem .65rem;border-radius:999px;background:var(--moon-soft);color:var(--moon-text);font:700 .82rem/1.35 var(--body)}
.rp-pick__name{margin-top:.3rem;font-size:clamp(1.35rem,1.15rem + .9vw,1.8rem)}
.rp-pick__type{margin-top:.1rem;color:var(--muted);font-size:.92rem}
.rp-pick__grid{display:grid;gap:1.25rem}
.rp-pick__media img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-l)}
.rp-pick__body{container-type:inline-size}
.rp-pick__media .rp-feats{margin-top:.75rem}
.rp-pick__body>*+*{margin-top:1rem}
.rp-pick__verdict{color:var(--ink);font-size:1.05rem}
.rp-pick__cta{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.2rem;padding-top:1rem;border-top:1px dashed var(--line-2)}
@media (max-width:479px){.rp-pick__cta{flex-direction:column;align-items:flex-start}}
/* the pick block lays itself out by its own width: one column (photo on top) when narrow, photo beside the body
   once the block is 44rem wide (an article column with the rail is about 47rem inside the pick) */
.rp-pick{container-type:inline-size}
@container (min-width:30rem){.rp-pick__media img{aspect-ratio:2/1}}
@container (min-width:44rem){.rp-pick__grid{grid-template-columns:.8fr 1.2fr;gap:1.75rem;align-items:start}.rp-pick__media{position:sticky;top:6rem}.rp-pick__media img{aspect-ratio:1/1}}
/* pros and cons */
.rp-proscons{display:grid;gap:.75rem}
.rp-proscons>div{padding:.9rem 1rem;border-radius:var(--r-m)}
.rp-pros{background:var(--ok-tint)}
.rp-cons{background:var(--bad-tint)}
.rp-proscons__title{display:flex;align-items:center;gap:.45rem;margin-bottom:.5rem;font:700 1rem var(--display)}
.rp-pros .rp-proscons__title{color:var(--ok)}
.rp-cons .rp-proscons__title{color:var(--bad)}
.rp-proscons ul{display:grid;gap:.35rem;font-size:.95rem;color:var(--ink)}
.rp-proscons li{position:relative;padding-left:1.1rem}
.rp-proscons li::before{content:"";position:absolute;left:0;top:.6em;width:.45rem;height:.45rem;border-radius:999px;background:currentColor;opacity:.45}
.rp-pros li::before{background:var(--ok);opacity:1}
.rp-cons li::before{background:var(--bad);opacity:1}
/* pros and cons sit side by side only when the pick body is wide enough (560 px) */
@container (min-width:35rem){.rp-proscons{grid-template-columns:1fr 1fr}}
/* key specs: every value names its source (the maker) */
.rp-specs{display:grid;border-radius:14px;background:var(--ground);border:1px solid var(--line);overflow:hidden}
.rp-specs>div{display:grid;grid-template-columns:2rem minmax(0,1fr);gap:.05rem .65rem;align-items:center;padding:.55rem .75rem}
.rp-specs>div+div{border-top:1px solid var(--line)}
.rp-specs dt{grid-column:2;font-size:.8rem;color:var(--muted);line-height:1.3}
.rp-specs dd{grid-column:2;font:700 .95rem/1.3 var(--display);color:var(--ink)}
.rp-specs dd small{font:500 .8rem var(--body);color:var(--muted)}
.rp-specs .rp-ic{grid-row:1 / span 2;grid-column:1;width:2rem;height:2rem;padding:.4rem;border-radius:10px;background:#fff;color:var(--act)}
@container (min-width:30rem){.rp-specs>div{grid-template-columns:2rem minmax(0,.9fr) minmax(0,1.1fr)}.rp-specs dt,.rp-specs dd{grid-column:auto;grid-row:1}.rp-specs dd{text-align:right}}
/* key facts strip (review / comparison top) */
.rp-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
.rp-fact{display:flex;flex-direction:column;gap:.35rem;padding:.9rem;border-radius:var(--r-m);background:#fff;border:1px solid var(--line);box-shadow:0 8px 20px -18px rgb(46 42 110/.5)}
.rp-fact__ico{display:grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:12px;background:var(--lav);color:var(--act)}
.rp-fact:nth-child(4n+2) .rp-fact__ico{background:var(--moon-soft);color:var(--moon-text)}
.rp-fact:nth-child(4n+3) .rp-fact__ico{background:var(--block-tint);color:var(--night)}
.rp-fact:nth-child(4n) .rp-fact__ico{background:var(--ok-tint);color:var(--ok)}
.rp-fact b{font:800 1.15rem/1.2 var(--display);color:var(--ink)}
.rp-fact span{font-size:.84rem;color:var(--muted);line-height:1.35}
@media (min-width:900px){.rp-facts{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ---------- spec / comparison table: scrolls inside its own box on phones ---------- */
.rp-tablebox{container-type:inline-size;border-radius:var(--r-l);background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1);overflow:hidden}
.rp-tablebox__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.4rem 1rem;padding:.9rem 1.1rem;border-bottom:1px solid var(--line)}
.rp-tablebox__head h2,.rp-tablebox__head h3{font-size:1.2rem}
.rp-tablebox__hint{display:inline-flex;align-items:center;gap:.35rem;font-size:.84rem;color:var(--muted)}
/* "Swipe to see more" only while the table (min-width 40rem) is wider than its box */
@container (min-width:40rem){.rp-tablebox__hint{display:none}}
.rp-tablebox__scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.rp-tablebox__scroll:focus-visible{outline-offset:-3px}
.rp-table{width:100%;min-width:40rem;border-collapse:separate;border-spacing:0;font-size:.93rem}
.rp-table th,.rp-table td{padding:.75rem .9rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.rp-table th:last-child,.rp-table td:last-child{padding-right:1.25rem}
.rp-table thead th{background:var(--lav);color:var(--ink);font:700 .92rem/1.3 var(--display);white-space:nowrap}
.rp-table tbody th{color:var(--ink);font-weight:700}
.rp-table th:first-child,.rp-table td:first-child{position:sticky;left:0;z-index:1;background:#fff;min-width:9rem;box-shadow:1px 0 0 var(--line)}
.rp-table thead th:first-child{background:var(--lav)}
.rp-table tbody tr:nth-child(even) td,.rp-table tbody tr:nth-child(even) th{background:var(--ground)}
.rp-table tbody tr:last-child>*{border-bottom:0}
.rp-table small{display:block;color:var(--muted);font-size:.8rem}
.rp-table .rp-yes{color:var(--ok);font-weight:700}
.rp-table .rp-no{color:var(--bad);font-weight:700}
.rp-tablebox__foot{padding:.65rem 1.1rem;font-size:.82rem;color:var(--muted);border-top:1px solid var(--line);background:var(--ground)}

/* ---------- verdict box ---------- */
.rp-verdictbox{position:relative;padding:clamp(1.2rem,.9rem + 1.2vw,1.9rem);border-radius:var(--r-xl);background:#fff;border:1px solid var(--line);box-shadow:var(--sh-2);overflow:hidden}
.rp-verdictbox::before{content:"";position:absolute;inset:0 0 auto;height:6px;background:linear-gradient(90deg,var(--lilac),var(--act),var(--moon))}
.rp-verdictbox__top{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1rem}
.rp-verdictbox .rp-verdict{font-size:1rem;padding:.45rem 1rem .45rem .5rem;box-shadow:none;border:1px solid var(--line-2)}
.rp-verdictbox .rp-verdict .rp-ic{width:1.8rem;height:1.8rem}
.rp-verdictbox h2{font-size:clamp(1.4rem,1.2rem + .8vw,1.8rem)}
.rp-verdictbox__sum{margin-top:.9rem;font-size:1.05rem;color:var(--ink)}
.rp-verdictbox__split{display:grid;gap:.75rem;margin-top:1.1rem}
.rp-verdictbox__split>div{padding:.9rem 1rem;border-radius:var(--r-m);background:var(--ground);border:1px solid var(--line)}
.rp-verdictbox__split h3{font-size:1rem;margin-bottom:.5rem}
.rp-verdictbox__cta{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.2rem;margin-top:1.2rem}
@media (min-width:640px){.rp-verdictbox__split{grid-template-columns:1fr 1fr}}

/* ---------- owner quote inside an article (rp-say from site.css) ---------- */
.rp-say--inline{background:var(--lav);border-color:var(--line-2);box-shadow:none}
.rp-says{display:grid;gap:.9rem}
@media (min-width:768px){.rp-says{grid-template-columns:1fr 1fr}}

/* ---------- how-to steps ---------- */
.rp-steps{display:grid;gap:0;counter-reset:st}
.rp-steps__item{position:relative;display:grid;grid-template-columns:3rem minmax(0,1fr);gap:1rem;padding-bottom:1.6rem}
.rp-steps__item::before{counter-increment:st;content:counter(st);position:relative;z-index:1;display:grid;place-items:center;width:3rem;height:3rem;border-radius:999px;background:var(--night);color:var(--moon);font:800 1.15rem/1 var(--display);box-shadow:0 0 0 5px var(--lav)}
.rp-steps__item::after{content:"";position:absolute;left:calc(1.5rem - 1px);top:3.4rem;bottom:.3rem;width:2px;background:repeating-linear-gradient(180deg,var(--lilac) 0 6px,transparent 6px 11px)}
.rp-steps__item:last-child::after{display:none}
.rp-steps__item h3{font-size:clamp(1.15rem,1.05rem + .4vw,1.35rem);margin-top:.55rem}
.rp-steps__item p{margin-top:.4rem;color:var(--text)}
.rp-steps__item figure{margin-top:.8rem}
.rp-steps__item figure img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-l)}
.rp-steps__meta{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.6rem}
.rp-steps__src{display:block;margin-top:.45rem;font-size:.84rem;color:var(--muted)}
/* "what you need" box */
.rp-need{display:flex;flex-wrap:wrap;gap:.5rem}
.rp-need li{display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .75rem;border-radius:12px;background:#fff;border:1px solid var(--line);font-weight:600;font-size:.92rem;color:var(--ink)}
.rp-need .rp-ic{color:var(--act)}

/* ---------- comparison: A vs B header and rounds ---------- */
.rp-ab{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.6rem;max-width:40rem;margin-inline:auto}
.rp-ab__side{display:flex;flex-direction:column;align-items:center;gap:.6rem;text-align:center}
.rp-ab__side img{width:100%;aspect-ratio:1/1.1;object-fit:cover;border-radius:999px 999px var(--r-l) var(--r-l);box-shadow:var(--sh-1)}
.rp-ab__side b{font:800 1.15rem/1.2 var(--display);color:var(--ink)}
.rp-ab__side span{font-size:.85rem;color:var(--muted)}
.rp-ab .rp-duel__vs{width:3.4rem;height:3.4rem;font-size:1.05rem}
@media (min-width:768px){.rp-ab{gap:1.5rem}.rp-ab .rp-duel__vs{width:4.2rem;height:4.2rem;font-size:1.25rem}}
.rp-rounds{display:grid;gap:.9rem}
@media (min-width:768px){.rp-rounds{grid-template-columns:1fr 1fr}}
.rp-round{display:flex;flex-direction:column;gap:.6rem;padding:1.1rem;border-radius:var(--r-l);background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1)}
.rp-round__head{display:flex;align-items:center;gap:.6rem}
.rp-round__ico{display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:12px;background:var(--lav);color:var(--act);flex:none}
.rp-round h3{font-size:1.1rem}
.rp-round__ab{display:grid;gap:.4rem;font-size:.93rem}
.rp-round__ab p{padding:.5rem .7rem;border-radius:12px;background:var(--ground)}
.rp-round__ab b{color:var(--ink)}
.rp-round__win{align-self:flex-start;display:inline-flex;align-items:center;gap:.35rem;padding:.25rem .7rem;border-radius:999px;background:var(--act-tint);color:var(--act);font:700 .84rem/1.3 var(--body)}
.rp-round__win--tie{background:var(--moon-soft);color:var(--moon-text)}

/* ---------- gift guide: bands as labels (never prices) + the one store card ---------- */
.rp-tier{display:inline-flex;align-items:center;gap:.35rem;padding:.22rem .65rem;border-radius:999px;font:700 .8rem/1.35 var(--body);background:var(--lav);color:var(--chip-text)}
.rp-tier--small{background:var(--ok-tint);color:var(--ok)}
.rp-tier--mid{background:var(--moon-soft);color:var(--moon-text)}
.rp-tier--big{background:var(--block-tint);color:var(--night)}

/* ---------- end-of-article boxes ---------- */
.rp-related__head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem}
.rp-related__head h2{font-size:clamp(1.35rem,1.15rem + .8vw,1.7rem)}
.rp-howmini{display:grid;gap:.75rem;padding:1.1rem 1.2rem;border-radius:var(--r-l);background:var(--lav);border:1px solid var(--line-2)}
.rp-howmini__title{display:flex;align-items:center;gap:.5rem;font:700 1.1rem var(--display);color:var(--ink)}
.rp-howmini__title .rp-ic{color:var(--act)}
.rp-howmini ul{display:grid;gap:.4rem;font-size:.93rem}
.rp-howmini li{display:flex;gap:.5rem;align-items:flex-start}
.rp-howmini li .rp-ic{color:var(--act);margin-top:.2rem}
.rp-teambox{position:relative;display:grid;grid-template-columns:3.5rem minmax(0,1fr);gap:1rem;align-items:start;padding:1.25rem;border-radius:var(--r-l);background-color:var(--night);color:var(--night-muted);overflow:hidden}
.rp-teambox::before{content:"";position:absolute;inset:0;background-image:var(--stars);background-size:380px 200px;opacity:.55}
.rp-teambox>*{position:relative}
.rp-teambox__mark{width:3.5rem;height:3.5rem}
.rp-teambox h2,.rp-teambox__by{font:700 1.15rem/1.3 var(--display);color:#fff}
.rp-teambox p{margin-top:.35rem;font-size:.95rem}
.rp-teambox__links{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;margin-top:.7rem}
.rp-teambox__links a{display:inline-flex;align-items:center;gap:.25rem;min-height:1.75rem;color:var(--moon);font-weight:700;text-decoration:none}
.rp-teambox__links a:hover{text-decoration:underline}
/* rail widgets */
.rp-railcard{padding:1rem;border-radius:var(--r-m);background:#fff;border:1px solid var(--line)}
.rp-railcard__title{font:700 1rem var(--display);color:var(--ink);margin-bottom:.5rem}
/* team box on phones: the mark sits above the text, so the text keeps the full width (review Kit-5) */
@media (max-width:599px){.rp-teambox{grid-template-columns:minmax(0,1fr);gap:.6rem}.rp-teambox__mark{width:2.75rem;height:2.75rem}}

/* =====================================================================================================
   TIDY KIT (2026-10-18). Fewer words in a richer structure. Everything below is new and additive: no class
   above was renamed, so pages on the older components keep working until they move. How to use each one:
   _review/tidy-articles-A.md (top). Components:
   rp-asec (section) · rp-cq (container) · rp-expand (closed details row) · rp-qpicks / rp-qpick (3 quick-pick
   cards) · rp-compare (one comparison table, row cards on phones) · rp-itiles / rp-itile (icon tiles) ·
   rp-pcard (product card) · rp-pc (pros + cons in one card) · rp-qline (compact quote) ·
   rp-safeline (one-line safety warning) · rp-srcline (one source line per block) · rp-cited (attributed
   notes) · rp-gcards / rp-gcard (buying-guide cards) · rp-acover--art (a drawn cover)
   ===================================================================================================== */

/* article section: heading + one line of dek (rp-head a size down), then one component */
/* rp-asec: no scroll-margin; html{scroll-padding-top} in site.css sets the jump offset alone */
.rp-asec>.rp-head{margin-bottom:1rem;gap:.5rem 1.5rem}
.rp-asec>.rp-head h2{font-size:clamp(1.4rem,1.2rem + .9vw,1.85rem)}
.rp-asec>.rp-head .rp-head__ico{width:2.75rem;height:2.75rem;border-radius:14px;background:#fff}
.rp-asec>.rp-head .rp-head__lede{margin-top:.25rem;font-size:.98rem}
.rp-asec>*+*{margin-top:1rem}
.rp-asec>.rp-head+*{margin-top:0}
/* any block that should lay its children out by its own width */
.rp-cq{container-type:inline-size}

/* a closed native <details> styled as a row button with a chevron (>= 48 px tall): "More about this pick",
   long spec notes, "what we could not confirm", sources. Never put the deciding facts or a safety warning in it. */
.rp-expand{border-radius:var(--r-m);background:#fff;border:1px solid var(--line)}
.rp-expand>summary{display:flex;align-items:center;justify-content:space-between;gap:.75rem;min-height:3rem;padding:.6rem .7rem .6rem 1rem;border-radius:inherit;cursor:pointer;list-style:none;font:700 .98rem/1.3 var(--display);color:var(--act)}
.rp-expand>summary::-webkit-details-marker{display:none}
.rp-expand>summary:hover{background:var(--ground)}
.rp-expand>summary>.rp-ic{flex:none;width:1.9rem;height:1.9rem;padding:.35rem;border-radius:999px;background:var(--lav);color:var(--act);transition:transform .2s}
.rp-expand[open]>summary{border-bottom:1px solid var(--line);border-radius:var(--r-m) var(--r-m) 0 0}
.rp-expand[open]>summary>.rp-ic{transform:rotate(180deg)}
.rp-expand__body{display:grid;gap:.9rem;padding:1rem;color:var(--text);font-size:.95rem}
.rp-expand__body h4{font-size:1rem}
.rp-expand--soft{background:var(--ground)}

/* quick picks: 3 cards (award on the image, name, one line, Check price); a swipe rail on phones */
.rp-qpicks{display:grid;gap:.9rem}
@media (min-width:640px){.rp-qpicks{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:639px){
  .rp-qpicks{grid-auto-flow:column;grid-auto-columns:78%;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--gut) * -1);padding:.25rem var(--gut) 1rem;scroll-padding-inline:var(--gut);scrollbar-width:thin}
  .rp-qpick{scroll-snap-align:start}
}
.rp-qpick{position:relative;display:flex;flex-direction:column;gap:.5rem;padding:.7rem .7rem .9rem;border-radius:var(--r-l);background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1)}
.rp-qpick--top{border-color:#f1dc9f;box-shadow:0 0 0 3px rgb(251 239 201/.75),var(--sh-1)}
.rp-qpick__img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-m);background:var(--lav)}
.rp-qpick__award{display:inline-flex;align-items:center;gap:.3rem;width:max-content;max-width:100%;margin:.15rem .25rem 0;padding:.24rem .6rem;border-radius:999px;background:var(--moon-soft);color:var(--moon-text);font:700 .78rem/1.3 var(--body)}
.rp-qpick__no{position:absolute;left:1.2rem;top:1.2rem;display:grid;place-items:center;width:2rem;height:2rem;border-radius:999px;background:var(--night);color:var(--moon);font:800 .9rem/1 var(--display)}
.rp-qpick__name{margin-top:.2rem;padding-inline:.25rem;font-size:1.12rem;line-height:1.25}
.rp-qpick__name a{color:var(--ink);text-decoration:none}
.rp-qpick__name a:hover{color:var(--act);text-decoration:underline}
.rp-qpick__line{padding-inline:.25rem;color:var(--muted);font-size:.9rem;line-height:1.45}
.rp-qpick .rp-btn{margin-top:auto}

/* one comparison component: a table in a card when its box is >= 42rem, one small card per row below that */
.rp-compare{container-type:inline-size}
.rp-compare__table{width:100%;border-collapse:separate;border-spacing:0;font-size:.92rem;color:var(--ink)}
.rp-compare__table small{display:block;color:var(--muted);font-size:.78rem;font-weight:500}
.rp-compare__item{display:flex;align-items:center;gap:.65rem;min-height:2.75rem;color:var(--ink);font:700 .98rem/1.25 var(--display);text-decoration:none}
.rp-compare__item:hover{color:var(--act);text-decoration:underline}
.rp-compare__item img{flex:none;width:2.75rem;height:2.75rem;object-fit:cover;border-radius:12px;background:var(--lav);border:1px solid var(--line)}
.rp-compare__no{display:inline-grid;place-items:center;flex:none;width:1.45rem;height:1.45rem;border-radius:999px;background:var(--night);color:var(--moon);font:800 .78rem/1 var(--display)}
.rp-compare__foot{margin-top:.6rem;font-size:.82rem;color:var(--muted)}
@container (min-width:42rem){
  .rp-compare__table{background:#fff;border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--sh-1);overflow:hidden}
  .rp-compare__table th,.rp-compare__table td{padding:.65rem .75rem;text-align:left;vertical-align:middle;border-bottom:1px solid var(--line)}
  .rp-compare__table thead th{background:var(--lav);font:700 .86rem/1.3 var(--display);white-space:nowrap}
  .rp-compare__table tbody tr:nth-child(even)>*{background:var(--ground)}
  .rp-compare__table tbody tr:last-child>*{border-bottom:0}
  .rp-compare__table td:last-child{text-align:right;padding-right:1rem}
  .rp-compare__table td:last-child .rp-btn{white-space:nowrap;padding-inline:.9rem}
}
@container (max-width:41.99rem){
  .rp-compare__table,.rp-compare__table tbody{display:block}
  .rp-compare__table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .rp-compare__table tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem .9rem;padding:.75rem .85rem .85rem;border-radius:var(--r-m);background:#fff;border:1px solid var(--line);box-shadow:0 8px 20px -18px rgb(46 42 110/.5)}
  .rp-compare__table tr+tr{margin-top:.6rem}
  .rp-compare__table th[scope="row"]{grid-column:1 / -1;text-align:left}
  .rp-compare__table td{display:block;line-height:1.35}
  .rp-compare__table td[data-label]::before{content:attr(data-label);display:block;margin-bottom:.1rem;font:600 .75rem/1.3 var(--body);color:var(--muted)}
  .rp-compare__table td:last-child{align-self:end}
  .rp-compare__table td:last-child .rp-btn{width:100%;white-space:nowrap}
}

/* icon tiles: icon, a title and one line each (method, what owners report, differences) */
.rp-itiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,9.5rem),1fr));gap:.7rem}
.rp-itile{display:flex;flex-direction:column;gap:.3rem;padding:.9rem;border-radius:var(--r-m);background:#fff;border:1px solid var(--line);box-shadow:0 8px 20px -18px rgb(46 42 110/.5)}
.rp-itile__ico{display:grid;place-items:center;width:2.5rem;height:2.5rem;margin-bottom:.2rem;border-radius:12px;background:var(--lav);color:var(--act)}
.rp-itile:nth-child(4n+2) .rp-itile__ico{background:var(--moon-soft);color:var(--moon-text)}
.rp-itile:nth-child(4n+3) .rp-itile__ico{background:var(--block-tint);color:var(--night)}
.rp-itile:nth-child(4n) .rp-itile__ico{background:var(--ok-tint);color:var(--ok)}
.rp-itile__title,.rp-itile h3{font:700 1rem/1.25 var(--display);color:var(--ink)}
.rp-itile__line{font-size:.88rem;line-height:1.45;color:var(--muted)}
.rp-itiles+.rp-more{margin-top:.75rem}
/* rp-itiles--3: three tiles with a longer line; rows (icon left) on phones, three columns from 640 px */
.rp-itiles--3{grid-template-columns:minmax(0,1fr)}
@media (max-width:639px){.rp-itiles--3>.rp-itile{display:grid;grid-template-columns:2.5rem minmax(0,1fr);gap:.1rem .8rem;align-items:start}.rp-itiles--3 .rp-itile__ico{grid-row:1 / span 2;margin:0}}
@media (min-width:640px){.rp-itiles--3{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* product card: rank + type tag + name, then image | one line, spec chips, one source line, safety line,
   buttons; then pros/cons (rp-pc), one quote (rp-qline) and "More about this pick" (rp-expand).
   The image stretches to the height of the info column, so the two columns always end together. */
.rp-pcard{position:relative;container-type:inline-size;display:grid;gap:1rem;padding:clamp(1rem,.8rem + 1vw,1.5rem);border-radius:var(--r-xl);background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1)}
.rp-pcard--top{border-color:#f1dc9f;box-shadow:0 0 0 4px rgb(251 239 201/.7),var(--sh-1)}
.rp-pcard__head{display:flex;gap:.8rem;align-items:center}
.rp-pcard__tag{display:inline-flex;align-items:center;gap:.35rem;padding:.2rem .6rem;border-radius:999px;background:var(--moon-soft);color:var(--moon-text);font:700 .8rem/1.35 var(--body)}
.rp-pcard__name{margin-top:.25rem;font-size:clamp(1.25rem,1.1rem + .7vw,1.6rem)}
.rp-pcard__top{display:grid;gap:1rem}
.rp-pcard__media{position:relative;margin:0}
.rp-pcard__media img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-l);background:var(--lav)}
.rp-pcard__info{display:flex;flex-direction:column;gap:.75rem;min-width:0}
.rp-pcard__line{color:var(--ink);font-size:1.02rem;line-height:1.55}
.rp-pcard__chips{display:flex;flex-wrap:wrap;gap:.4rem}
.rp-pcard__chips li{display:inline-flex;align-items:center;gap:.35rem;padding:.28rem .65rem .28rem .3rem;border-radius:999px;background:var(--ground);border:1px solid var(--line);font:600 .84rem/1.3 var(--body);color:var(--ink)}
.rp-pcard__chips .rp-ic{width:1.45rem;height:1.45rem;padding:.24rem;border-radius:999px;background:#fff;color:var(--act);stroke-width:2.2}
.rp-pcard__chips li:first-child{background:var(--moon-soft);border-color:#f1dc9f;color:var(--moon-text)}
.rp-pcard__chips li:first-child .rp-ic{color:var(--moon-text)}
.rp-pcard__cta{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.1rem;margin-top:auto;padding-top:.25rem}
@container (min-width:36rem){
  .rp-pcard__top{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:1.25rem;align-items:stretch}
  .rp-pcard__media img{height:100%;min-height:13rem;aspect-ratio:auto}
}
@container (max-width:29.99rem){.rp-pcard__cta{flex-direction:column;align-items:stretch}.rp-pcard__cta .rp-more{justify-content:center;min-height:2.75rem}}

/* one source line per block, instead of a source chip on every value */
.rp-srcline{display:flex;gap:.4rem;align-items:flex-start;font-size:.82rem;line-height:1.45;color:var(--muted)}
.rp-srcline .rp-ic{width:.95rem;height:.95rem;margin-top:.15rem;color:var(--lilac-2)}
/* one-line safety warning that applies to the product: stays visible, never inside a <details> */
.rp-safeline{display:flex;gap:.5rem;align-items:flex-start;padding:.55rem .75rem;border-radius:12px;background:var(--warn-tint);border:1px solid #f1dc9f;font-size:.88rem;line-height:1.45;color:var(--ink)}
.rp-safeline .rp-ic{margin-top:.12rem;color:var(--moon-text)}
.rp-safeline--alert{background:var(--bad-tint);border-color:#f6c9d1}
.rp-safeline--alert .rp-ic{color:var(--bad)}

/* pros and cons: ONE card, two halves (side by side once its container is 34rem). Show the first 3 of each;
   put the rest in <details class="rp-pc__more"> ("Show all {n}") only when it hides 2 or more lines.
   Needs a container ancestor: rp-pcard, or add rp-cq to a wrapper. */
.rp-pc{display:grid;border-radius:var(--r-l);background:#fff;border:1px solid var(--line);overflow:hidden}
.rp-pc__half{padding:.85rem 1rem .95rem}
.rp-pc__half--pro{background:linear-gradient(180deg,var(--ok-tint),#fff 3.25rem)}
.rp-pc__half--con{background:linear-gradient(180deg,var(--bad-tint),#fff 3.25rem)}
.rp-pc__half+.rp-pc__half{border-top:1px solid var(--line)}
.rp-pc__title{display:flex;align-items:center;gap:.45rem;margin-bottom:.45rem;font:700 .98rem/1.3 var(--display)}
.rp-pc__title .rp-ic{width:1.5rem;height:1.5rem;padding:.25rem;border-radius:999px;background:#fff;stroke-width:2.6}
.rp-pc__half--pro .rp-pc__title{color:var(--ok)}
.rp-pc__half--con .rp-pc__title{color:var(--bad)}
.rp-pc ul{display:grid;gap:.3rem;font-size:.93rem;line-height:1.45;color:var(--ink)}
.rp-pc li{position:relative;padding-left:1.15rem}
.rp-pc li::before{content:"";position:absolute;left:.1rem;top:.55em;width:.42rem;height:.42rem;border-radius:999px;background:var(--ok)}
.rp-pc__half--con li::before{background:var(--bad)}
.rp-pc__more{margin-top:.3rem}
.rp-pc__more>summary{display:inline-flex;align-items:center;gap:.3rem;min-height:2.75rem;cursor:pointer;list-style:none;font:700 .88rem var(--body);color:var(--act)}
.rp-pc__more>summary::-webkit-details-marker{display:none}
.rp-pc__more>summary .rp-ic{width:1rem;height:1rem;transition:transform .2s}
.rp-pc__more[open]>summary .rp-ic{transform:rotate(180deg)}
.rp-pc__more>ul{margin-top:.1rem}
@container (min-width:34rem){.rp-pc{grid-template-columns:1fr 1fr}.rp-pc__half+.rp-pc__half{border-top:0;border-left:1px solid var(--line)}}

/* compact quote: words, who. A sample quote carries the hidden data-sample-quote marker (no visible chip). */
.rp-qline{position:relative;display:grid;gap:.35rem;padding:.8rem 1rem .85rem 1.1rem;border-radius:var(--r-m);background:var(--lav);border-left:4px solid var(--lilac)}
.rp-qline blockquote{font:600 1rem/1.5 var(--display);color:var(--ink)}
.rp-qline blockquote::before{content:"\201C"}
.rp-qline blockquote::after{content:"\201D"}
.rp-qline figcaption{font-size:.84rem;color:var(--muted)}
.rp-qline figcaption b{color:var(--ink);font-weight:700}

/* attributed notes (health / safety / maker advice): icon + one sentence that names its source */
.rp-cited{display:grid;gap:.6rem}
.rp-cited>li{display:grid;grid-template-columns:2.5rem minmax(0,1fr);gap:.75rem;align-items:center;padding:.75rem .95rem;border-radius:var(--r-m);background:#fff;border:1px solid var(--line)}
.rp-cited__ico{display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:12px;background:var(--lav);color:var(--act)}
.rp-cited__ico--warn{background:var(--warn-tint);color:var(--moon-text)}
.rp-cited__ico--alert{background:var(--bad-tint);color:var(--bad)}
.rp-cited p{font-size:.94rem;line-height:1.5;color:var(--ink)}
.rp-cited__src{display:inline-block;margin-left:.3rem;padding:.05rem .5rem;border-radius:999px;background:var(--ground);border:1px solid var(--line);font:600 .75rem/1.4 var(--body);color:var(--muted);white-space:nowrap}
@media (min-width:768px){.rp-cited--2{grid-template-columns:repeat(2,minmax(0,1fr))}.rp-cited--2>.rp-cited__wide{grid-column:1 / -1}}

/* buying-guide cards: icon or drawn tile, title, one line, one trade-off line, links to the picks;
   longer detail goes in an rp-expand under the line */
.rp-gcards{display:grid;gap:.8rem}
@media (min-width:640px){.rp-gcards{grid-template-columns:repeat(2,minmax(0,1fr))}}
.rp-gcard{display:flex;flex-direction:column;gap:.55rem;padding:1rem 1.05rem;border-radius:var(--r-l);background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1)}
.rp-gcard__head{display:flex;align-items:center;gap:.75rem}
.rp-gcard__head .rp-thumb,.rp-gcard__head .rp-itile__ico{flex:none;width:3rem;height:3rem;margin:0}
.rp-gcard h3{font-size:1.12rem}
.rp-gcard__meta{font-size:.82rem;color:var(--muted)}
.rp-gcard>p{font-size:.94rem;line-height:1.5}
.rp-gcard__trade{display:flex;gap:.45rem;align-items:flex-start;padding:.5rem .65rem;border-radius:12px;background:var(--ground);font-size:.88rem;line-height:1.45;color:var(--ink)}
.rp-gcard__trade .rp-ic{margin-top:.12rem;color:var(--moon-text)}
.rp-gcard__in{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:auto;padding-top:.15rem}
.rp-gcard__in a{display:inline-flex;align-items:center;min-height:2.25rem;padding:.25rem .75rem;border-radius:999px;background:var(--lav);color:var(--chip-text);font-weight:700;font-size:.85rem;text-decoration:none}
.rp-gcard__in a:hover{background:var(--act-tint);color:var(--act)}

/* a drawn cover (SVG art) in the hero: a hairline instead of the photo shadow */
.rp-acover--art img{box-shadow:var(--sh-1);border:1px solid var(--line);background:var(--lav)}