/* Catalogue feature styles: sets index, set page, card page, search, safety guide.
   Reuses the tokens and components from poke.css; no inline styles anywhere. */

/* Sets index */
.series-group { margin-bottom: 26px; }
.series-group .section-head h2 { display: flex; align-items: center; gap: 10px; }
.set-tile { position: relative; transition: transform 0.12s ease, box-shadow 0.12s ease; }
.set-tile:hover { box-shadow: 0 10px 28px rgba(22, 25, 43, 0.12); }
.set-tile-logo { display: flex; align-items: center; justify-content: center; height: 56px; margin-bottom: 6px; }
.set-tile-logo img { max-height: 44px; width: auto; max-width: 100%; margin: 0; }
.set-tile-logo-text { font-weight: 800; font-size: 1.1rem; letter-spacing: 0.08em; color: var(--muted); }
.set-tile-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.set-symbol { width: 18px; height: 18px; object-fit: contain; }
.pill-row-tight { margin: 4px 0 0; gap: 6px; }

/* Set page header */
.set-header { display: grid; gap: 20px; grid-template-columns: 200px minmax(0, 1fr) 240px; align-items: start; }
.set-header-logo { display: flex; align-items: center; justify-content: center; min-height: 90px; background: var(--surface-2); border-radius: var(--radius-sm); padding: 12px; }
.set-header-logo img { max-height: 90px; width: auto; }
.set-header-body h1 { margin-bottom: 10px; }
.set-kv dd code { font-size: 0.85em; background: var(--surface-2); padding: 1px 6px; border-radius: 4px; }
.set-progress { background: var(--surface-2); border-radius: var(--radius-sm); padding: 14px 16px; display: grid; gap: 6px; }
.set-progress-count { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; margin: 0; }
.set-progress-count strong { color: var(--green); }
.set-progress-note { margin: 0; font-size: 0.85rem; }
.progress { height: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.progress-bar { height: 100%; background: linear-gradient(90deg, var(--green), #46c47a); border-radius: 999px; width: 0; transition: width 0.3s ease; }
.pct-0 { width: 0; } .pct-5 { width: 5%; } .pct-10 { width: 10%; } .pct-15 { width: 15%; } .pct-20 { width: 20%; }
.pct-25 { width: 25%; } .pct-30 { width: 30%; } .pct-35 { width: 35%; } .pct-40 { width: 40%; } .pct-45 { width: 45%; }
.pct-50 { width: 50%; } .pct-55 { width: 55%; } .pct-60 { width: 60%; } .pct-65 { width: 65%; } .pct-70 { width: 70%; }
.pct-75 { width: 75%; } .pct-80 { width: 80%; } .pct-85 { width: 85%; } .pct-90 { width: 90%; } .pct-95 { width: 95%; } .pct-100 { width: 100%; }
@media (max-width: 900px) {
  .set-header { grid-template-columns: 1fr; }
  .set-header-logo { min-height: 70px; }
}

/* Set page filters and grid */
.set-filters { position: sticky; top: 60px; z-index: 5; background: var(--bg); padding: 8px 0 2px; }
.set-filters .pill-row { margin: 0 0 6px; }
.set-filters .pill { cursor: pointer; font: inherit; font-size: 0.85rem; font-weight: 600; }
.set-filters .pill .badge { padding: 0 6px; font-size: 0.7rem; }
.set-filters .pill.is-active .badge { background: rgba(255, 255, 255, 0.2); color: #fff; }
.pill-missing.is-active { background: var(--red); border-color: var(--red); }
.set-filter-note { margin: 0 0 8px; font-size: 0.85rem; }
.tile-wrap { display: flex; }
.tile-wrap > .card-tile { flex: 1; }
.tile-wrap.is-hidden { display: none; }
.grid-cards-compact { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }

/* Card page */
.card-detail { display: grid; gap: 28px; grid-template-columns: minmax(220px, 360px) minmax(0, 1fr); align-items: start; }
.card-detail-art { margin: 0; }
.card-detail-art a { display: block; }
.card-detail-art img { width: 100%; height: auto; border-radius: 16px; box-shadow: 0 14px 40px rgba(22, 25, 43, 0.22); background: var(--surface-2); }
.card-detail-art figcaption { font-size: 0.78rem; margin-top: 10px; }
.card-detail-placeholder { border-radius: 16px; }
.card-detail-title { margin-bottom: 6px; }
.card-detail-alt { font-weight: 500; font-size: 0.6em; }
.card-detail-sub { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.card-detail-sub code { font-size: 0.8rem; }
.card-kv { margin-bottom: 18px; }
.card-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.btn.is-on { border-color: var(--green); color: var(--green); background: var(--green-soft); }
.card-collectors { margin: 6px 0 14px; font-size: 0.92rem; }
.card-collectors strong { color: var(--ink); }
.card-neighbours { display: flex; gap: 8px; flex-wrap: wrap; }
.card-blocks { padding-top: 8px; }
.card-block { margin-bottom: 20px; }
.card-block .section-head { margin-bottom: 10px; }
.card-block .section-head h2 { display: flex; align-items: center; gap: 8px; font-size: 1.15rem; }
.card-block .empty { padding: 16px; font-size: 0.92rem; }
.listings-table .price, .sales-table .price { white-space: nowrap; }
.price-block-sgd { font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 10px; }
.price-kv { margin-bottom: 12px; }
.price-kv small { font-size: 0.8em; }
.price-note { font-size: 0.78rem; margin: 0; border-top: 1px solid var(--line); padding-top: 10px; }
.safety-mini { margin: 0 0 10px; padding-left: 18px; font-size: 0.9rem; display: grid; gap: 4px; }
@media (max-width: 760px) {
  .card-detail { grid-template-columns: 1fr; }
  .card-detail-art { max-width: 320px; margin: 0 auto; }
}

/* Search */
.search-form { display: flex; gap: 8px; margin: 12px 0 18px; max-width: 640px; }
.search-form .input { border-radius: 999px; padding: 12px 16px; }
.search-empty { text-align: left; }
.search-empty p:last-child { margin-bottom: 0; }
.search-suggest { margin: 12px 0 0; }
.search-tips { max-width: 640px; }
.search-tip-list { margin: 0; padding-left: 18px; display: grid; gap: 6px; }

/* Safety guide */
.safety-page { max-width: 820px; }
.safety-page .lead { margin-bottom: 14px; }
.safety-section h2 { margin-bottom: 10px; }
.safety-section ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.safety-section p:last-of-type { margin-bottom: 10px; }
.safety-scam { border-color: var(--red); border-width: 2px; }
.safety-scam h2 { color: var(--red); }

/* Progressive images: blurred thumbnail, then the full-size file fades in. */
.img-progressive { transition: filter 0.3s ease; }
.img-progressive.is-loading { filter: blur(6px); }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.card-detail-art a:has(.is-loading), .listing-photo.is-catalogue:has(.is-loading) { background: linear-gradient(90deg, #eef0f6 25%, #f7f8fb 50%, #eef0f6 75%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }