/* S2COLS (#64/#65). #64: on phones the step-2 view toggle "1 | 2" is a pill of the same height, border and radius as the
   Filters / Sort / Search pills beside it (40px, 1px #d9e0e2, fully round). #65: a column change fades in (opacity/transform only). */
@media (max-width:760px){
  html body #step2 .p71row>.dens{height:40px!important;padding:3px!important;border:1px solid #d9e0e2!important;border-radius:999px!important}
  html body #step2 .p71row>.dens button{height:32px!important;line-height:32px!important;padding:0 10px!important;border-radius:999px!important}
}
.dgrid.s2c-sw{animation:s2cSw .22s ease-out}
@keyframes s2cSw{from{opacity:.55;transform:scale(.992)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.dgrid.s2c-sw{animation:none}}
/* #69 (Oct 19, TheDekel 9:19): design cards size to their own content at every column count. extras.css set grid-auto-rows:1fr so
   every row took the height of the tallest item - the "It's not the end" tile, whose text is taller in narrow columns - leaving an
   empty band under each card. Rows now follow their content; the tile is at least as tall as a design card (--dk-cardh, measured by
   s2cols.js) and grows only itself when its text needs more room. */
html #dgrid.dgrid.dgrid:has(.xend-card){grid-auto-rows:auto}
html #dgrid.dgrid>.dcard{align-self:start}
html #dgrid.dgrid>.xend-card{min-height:max(220px,var(--dk-cardh,0px))}