/* How we pick. Shared components come from site.css, listing.css and article.css; this file adds the
   six-step grid, the read / leave-out pair and the three safety check cards. */
.sec-tight+.sec-tight{padding-top:0}
.step .more-link{display:inline-flex;align-items:center;min-height:2.75rem;margin-top:.25rem;font-size:.88rem;white-space:normal}
.hwp-note{margin-top:1rem}
.hwp-small{font-size:.92rem;color:var(--muted)}

/* read / leave out */
.hwp-pair{display:grid;gap:1rem}
.hwp-panel{padding:1.25rem 1.3rem;border-radius:var(--r-l);background:#fff;box-shadow:var(--sh-1)}
.hwp-panel h3{display:flex;align-items:center;gap:.6rem;font-size:1.2rem}
.hwp-panel h3>span{display:grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:12px}
.hwp-panel--yes h3>span{background:var(--ok-tint);color:var(--ok)}
.hwp-panel--no h3>span{background:var(--bad-tint);color:var(--bad)}
.hwp-panel ul{display:grid;margin-top:.75rem}
.hwp-panel li{padding:.7rem 0;border-top:1px solid var(--line)}
.hwp-panel li:first-child{border-top:0}
.hwp-panel li b{display:block;color:var(--ink);font-size:.96rem;line-height:1.3}
.hwp-panel li small{display:block;margin-top:.15rem;font-size:.86rem;line-height:1.45;color:var(--muted)}

/* safety check cards */
.hwp-checks{display:grid;gap:1rem;margin-top:1.5rem}
.hwp-check{padding:1.25rem 1.3rem;border-radius:var(--r-l);background:#fff;box-shadow:var(--sh-1);scroll-margin-top:6rem}
.hwp-check__ico{display:grid;place-items:center;width:3.2rem;height:3.2rem;border-radius:16px;background:var(--ink);color:var(--glow)}
.hwp-check h3{margin-top:.9rem;font-size:1.15rem}
.hwp-check p{margin-top:.4rem;font-size:.92rem;line-height:1.6;color:var(--text)}
#recalls{border:2px solid var(--ok-tint)}

@media (min-width:48rem){
  .hwp-pair{grid-template-columns:1fr 1fr}
  .hwp-checks{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:64rem){
  .hwp-steps{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hwp-steps::before{display:none}
  .icards.hwp-grid3{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* tidy pass 2026-10-18: the long detail of each safety check sits in a closed native <details>
   (own class name: article.css also loads here and has its own .fold) */
.hwp-fold{margin-top:.8rem;border-top:1px solid var(--line)}
.hwp-fold>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:.75rem;min-height:2.75rem;padding:.35rem 0;font-weight:750;font-size:.9rem;color:var(--ember-text);cursor:pointer}
.hwp-fold>summary::-webkit-details-marker{display:none}
.hwp-fold>summary .ic{flex:none;transition:transform .2s}
.hwp-fold[open]>summary .ic{transform:rotate(180deg)}
.hwp-fold>p{margin-top:.1rem;padding-bottom:.25rem}
.hwp-check{display:flex;flex-direction:column}
.hwp-check .hwp-fold{margin-top:auto;padding-top:0}
.hwp-check>p{margin-bottom:.8rem}
/* the safety split carries one short line, so its photo is a wide strip, not a tall card */
#safety .split__media{aspect-ratio:16/9}
/* "What we never do" holds five cards since 2026-10-18: the last row is filled, never left with a hole
   (phones and tablets: two columns, the fifth card full width; desktop: three on top, two below) */
.hwp-never>.icard:last-child{grid-column:1/-1}
@media (min-width:64rem){
  .icards.hwp-never{grid-template-columns:repeat(6,minmax(0,1fr))}
  .hwp-never>.icard{grid-column:span 2}
  .hwp-never>.icard:nth-child(n+4){grid-column:span 3}
}