/* ItemGrid (Components/ItemGrid.razor). Theme tokens only. Columns: 2 phone, 3-4 tablet, 5-6 landscape tablet, 6-8 desktop. */
.igrid{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))}
@media (min-width:600px){.igrid.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:800px){.igrid.grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1024px){.igrid.grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}}
@media (min-width:1160px){.igrid.grid{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media (min-width:1400px){.igrid.grid{grid-template-columns:repeat(7,minmax(0,1fr));gap:16px}}
@media (min-width:1680px){.igrid.grid{grid-template-columns:repeat(8,minmax(0,1fr))}}
.igrid.list{grid-template-columns:minmax(0,1fr);gap:8px}
@media (min-width:1024px){.igrid.list{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Off-screen tiles skip layout and paint; the intrinsic size keeps the scrollbar honest. Rows never clip (no fixed height). */
.igrid-cell{min-width:0;content-visibility:auto;contain-intrinsic-size:auto 320px}
.igrid.list .igrid-cell{contain-intrinsic-size:auto 76px}
.igrid-cell>.itile{height:100%}
/* Loading shimmer */
.igrid-skel{display:flex;flex-direction:column;gap:8px;padding:8px;background:var(--surface);border:var(--border-width,1px) solid var(--border);border-radius:var(--radius)}
.igrid-skel-pic,.igrid-skel-line{display:block;border-radius:var(--radius-sm);background:linear-gradient(100deg,var(--surface-2) 30%,color-mix(in srgb,var(--primary) 12%,var(--surface-2)) 50%,var(--surface-2) 70%);background-size:300% 100%;animation:igrid-shimmer 1.4s ease-in-out infinite}
.igrid-skel-pic{aspect-ratio:5/7}
.igrid-skel-line{height:12px}
.igrid-skel-line.short{width:55%}
.igrid.list .igrid-skel{flex-direction:row;align-items:center}
.igrid.list .igrid-skel-pic{width:56px;flex:0 0 56px}
.igrid.list .igrid-skel-line{flex:1}
@keyframes igrid-shimmer{from{background-position:100% 0}to{background-position:0 0}}
/* Empty state: a fanned hand of three theme-coloured cards that bob. */
.igrid-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:40px 16px;background:var(--surface);color:var(--ink);border:var(--border-width,1px) dashed var(--border);border-radius:var(--radius)}
.igrid-empty-art{position:relative;width:120px;height:110px;margin-bottom:8px}
.igrid-empty-art span{position:absolute;left:38px;top:6px;width:48px;height:68px;border-radius:var(--radius-sm);border:2px solid var(--surface);box-shadow:var(--shadow);transform-origin:50% 120%;animation:igrid-bob 3s ease-in-out infinite}
.igrid-empty-art span:nth-child(1){background:linear-gradient(135deg,var(--accent),var(--primary));transform:rotate(-18deg)}
.igrid-empty-art span:nth-child(2){background:linear-gradient(135deg,var(--primary),var(--accent));animation-delay:.2s;z-index:1}
.igrid-empty-art span:nth-child(3){background:linear-gradient(135deg,var(--primary-2,var(--primary)),var(--accent));transform:rotate(18deg);animation-delay:.4s}
@keyframes igrid-bob{0%,100%{translate:0 0}50%{translate:0 -6px}}
.igrid-empty-title{margin:0;font-family:var(--font-head);font-weight:var(--head-weight,700);font-size:1.2rem}
.igrid-empty-text{margin:0;color:var(--muted);max-width:32ch}
.igrid-more{display:flex;justify-content:center;padding:16px 0}
@media (prefers-reduced-motion:reduce){.igrid-skel-pic,.igrid-skel-line,.igrid-empty-art span{animation:none}}