/* Category chips, shared by MacPip and iPip (MacPip: public/cl-home.css, scoped under .clb). Clean, one row with "+N more". */
.cattiles{display:flex;flex-wrap:nowrap;gap:6px;min-width:0;margin:16px 0 24px;padding:0 3px 3px 0;overflow:hidden}
.cattiles.ready{overflow:visible}
.cattiles.open,.cattiles.measuring{flex-wrap:wrap}
.cattile{flex:none;display:inline-flex;align-items:center;gap:7px;max-width:100%;min-width:0;height:38px;padding-block:0;padding-inline:7px 10px;background:var(--paper);border:1.5px solid var(--ink);border-radius:8px;box-shadow:2px 2px 0 var(--ink);color:var(--ink);font:500 14px var(--sans);text-decoration:none;transition:transform .24s var(--spring),box-shadow .2s,background .2s,color .2s,opacity .2s}
.cattiles.ready:not(.open):not(.measuring) .cattile{flex-shrink:1}
.cattiles.ready:not(.open):not(.measuring) .catmore,.cattiles.ready:not(.open):not(.measuring) .cattile:first-child{flex-shrink:0}
.cattile:hover{transform:translateY(-2px)}
.cattile:active{transform:translate(2px,2px);box-shadow:none}
.cattile:focus-visible{outline:0;box-shadow:2px 2px 0 var(--ink),0 0 0 3px rgba(62,143,214,.35)}
.cattile strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.cattile small{flex:none;font:11.5px var(--sans);color:inherit;opacity:.65}
.cattile .icon{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:6px;border:1px solid var(--ink);overflow:hidden;background:var(--box)}
.cattile .icon img{width:100%;height:100%;object-fit:cover;display:block}
.cattile .icon.letter{font:12px var(--pixel);color:var(--ink)}
.cattile .ctall{background:var(--paper)}.cattile .ctall svg{fill:currentColor}
.cattile.on{background:var(--ink);color:var(--paper)}
.cattile.on .icon{border-color:var(--paper)}
.cattile.on .ctall{background:var(--ink);color:var(--paper)}
.catmore{padding-inline:12px;font:600 13px var(--sans);cursor:pointer}
.catmore[hidden]{display:none}
.cattiles .rest{display:none}
.cattiles.open .rest,.cattiles.measuring .rest{display:inline-flex}
.cattiles.open .rest{order:2}.cattiles .catmore{order:1}
/* Open: every chip the same width in a tidy grid, name on the left, count at the end. */
.cattiles.open{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
.cattiles.open .cattile small{margin-inline-start:auto}
.cattiles.open .catmore{order:3;justify-content:center;border-style:dashed;box-shadow:none;background:none}
/* Widths are measured as a plain row, never as grid cells, so the fold is right after closing. */
.cattiles.open.measuring{display:flex;flex-wrap:wrap}
@media (max-width:760px){
  .cattiles{gap:5px;margin:12px 0 20px}
  .cattile{height:44px;gap:6px;padding-inline:6px 8px;font-size:13px}
  .cattile .icon{width:22px;height:22px}
  .catmore{padding-inline:9px}
  .cattiles.open .catmore{order:1}
  .cattiles.open{grid-template-columns:minmax(0,1fr);gap:6px;max-height:min(52vh,420px);overflow-y:auto;overscroll-behavior:contain;scroll-behavior:smooth;padding-bottom:6px}
}
@media (prefers-reduced-motion:reduce){.cattile{transition:none}.cattile:hover{transform:none}}