/* RestfulPicks: categories.html (every shelf, grouped by need). */
.cat-need{display:grid;gap:1.5rem}
@media (min-width:1024px){.cat-need{grid-template-columns:16rem minmax(0,1fr);gap:2.5rem;align-items:start}}
.cat-need__side{position:relative;padding:1.4rem;border-radius:var(--r-xl);background-color:var(--night);color:var(--night-muted);overflow:hidden}
.cat-need__side::before{content:"";position:absolute;inset:0;background-image:var(--stars);background-size:380px 220px;opacity:.6;pointer-events:none}
.cat-need__side>*{position:relative}
.cat-need__ico{display:grid;place-items:center;width:3.2rem;height:3.2rem;border-radius:16px;background:rgb(255 255 255/.08);border:1px solid rgb(205 200 244/.25);color:var(--moon)}
.cat-need__side h2{margin-top:.8rem;color:#fff;font-size:clamp(1.6rem,1.3rem + 1vw,2.1rem)}
.cat-need__side p{margin-top:.4rem}
.cat-need__side .cat-need__n{margin-top:.8rem;font:700 .85rem var(--body);color:var(--moon)}
.cat-need__shelves{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem 1rem}
@media (min-width:768px){
  .cat-need__shelves{grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem 1.5rem}
  .cat-need__shelves--2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:42rem}
  .cat-need__shelves--1{grid-template-columns:minmax(0,1fr)}
  .cat-need__shelves--1 .cat-shelf{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:.75rem 1.75rem;align-items:center}
  .cat-need__shelves--1 .cat-shelf__list{max-width:28rem}
  .cat-need__shelves--1 .cat-shelf__count{text-align:left}
}
/* desktops: a need with two shelves takes the Mornings layout (photo beside its list, the list centered on the photo), so no third of the row sits empty */
@media (min-width:1024px){
  .cat-need__shelves--2{grid-template-columns:minmax(0,1fr);max-width:none}
  .cat-need__shelves--2 .cat-shelf{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:.75rem 1.75rem;align-items:center}
  .cat-need__shelves--2 .cat-shelf__list{max-width:28rem}
  .cat-need__shelves--2 .cat-shelf__count{text-align:left}
}
.cat-shelf{display:flex;flex-direction:column;gap:.75rem;min-width:0}
.cat-shelf__list{display:grid;gap:.35rem;padding:.7rem .8rem;border-radius:var(--r-m);background:#fff;border:1px solid var(--line)}
.rp-sec--white .cat-shelf__list{background:var(--ground)}
.cat-shelf__list li{display:flex;gap:.45rem;align-items:flex-start;font-size:.88rem;line-height:1.35}
.cat-shelf__list .rp-ic{color:var(--act);margin-top:.12rem}
.cat-shelf__list a{color:var(--ink);text-decoration:none;font-weight:600}
.cat-shelf__list a:hover{color:var(--act);text-decoration:underline}
.cat-shelf__count{font-size:.82rem;color:var(--muted);text-align:center}
/* tidy 2026-10-18: one ownership line in the hero; on phones the need box is a short band and each shelf lies in a row */
@media (max-width:639px){
  .cat-need{gap:.9rem}
  .cat-need__side{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.1rem .9rem;align-items:center;padding:.9rem 1.1rem}
  .cat-need__ico{grid-row:1 / span 2;width:2.75rem;height:2.75rem}
  .cat-need__side h2{margin-top:0;font-size:1.45rem}
  .cat-need__side p{margin-top:0;font-size:.92rem;line-height:1.4}
  .cat-need__shelves{grid-template-columns:minmax(0,1fr);gap:.8rem}
  .cat-shelf{display:grid;grid-template-columns:7rem minmax(0,1fr);gap:.85rem;align-items:center}
  .cat-shelf .rp-cat{gap:.35rem}
  .cat-shelf .rp-cat__media{outline-offset:3px}
  .cat-shelf .rp-cat__need{display:none}
  .cat-shelf .rp-cat__name{font-size:.98rem}
  .cat-shelf .rp-cat__count{display:none}
}
/* every shelf link is at least a 24 px target */
.cat-shelf__list a{display:inline-flex;align-items:center;min-height:1.5rem}
.cat-shelf__list li{align-items:center}
.cat-shelf__list .rp-ic{margin-top:0}