/* The wrappers provide the visual interest; only the selected pack gets gold. */
.pack-catalog { min-width: 0; }
.pack-catalog-controls { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(170px, 220px) auto; gap: 10px; align-items: center; }
.pack-catalog-query, .pack-catalog-era, .pack-catalog-favorites { min-width: 0; min-height: 44px; padding: 10px 13px; border: 1px solid var(--pack-line); border-radius: 9px; background: var(--pack-surface); color: var(--pack-text); font: inherit; font-size: 13px; }
.pack-catalog-query { width: 100%; }
.pack-catalog-query::placeholder { color: var(--pack-quiet); opacity: 1; }
.pack-catalog-era { width: 100%; color-scheme: dark; }
.pack-catalog-favorites { display: flex; align-items: center; justify-content: center; gap: 7px; }
.pack-catalog-favorites:hover { background: var(--pack-hover); }
.pack-catalog-favorites[aria-pressed="true"] { color: var(--pack-gold); border-color: #f3c65c70; background: #f3c65c09; }
.pack-catalog-favorites[aria-pressed="true"] svg { fill: currentColor; }
.pack-catalog .pack-catalog-status { margin: 10px 0 16px; color: var(--pack-quiet); font-size: 12px; min-height: 19px; }
.pack-catalog-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.pack-catalog-tile { position: relative; min-width: 0; border-radius: 11px; background: var(--pack-surface); }
.pack-catalog-choice { position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; min-width: 0; padding: 0; border: 1px solid var(--pack-line); border-radius: inherit; background: transparent; color: var(--pack-text); text-align: left; -webkit-tap-highlight-color: transparent; transition: border-color .18s, background-color .18s; }
.pack-catalog-choice:hover:not(:disabled) { border-color: #ffffff42; background: #ffffff04; }
.pack-catalog-choice[aria-pressed="true"], .pack-catalog-choice[aria-pressed="true"]:hover:not(:disabled) { border-color: #f3c65cbb; background: #f3c65c06; }
.pack-app .pack-catalog-choice:disabled { opacity: .8; }
.pack-catalog-art { position: relative; display: grid; place-items: center; height: 195px; padding: 28px 28px 12px; overflow: hidden; }
.pack-catalog-art img { display: block; width: auto; height: 155px; max-width: 100%; object-fit: contain; position: relative; transform: rotate(-3deg); filter: drop-shadow(4px 8px 6px #0007); transition: transform .2s var(--pack-ease); }
.pack-catalog-tile:nth-child(even) .pack-catalog-art img { transform: rotate(3deg); }
.pack-catalog-choice:hover:not(:disabled) .pack-catalog-art img, .pack-catalog-choice[aria-pressed="true"] .pack-catalog-art img { transform: rotate(0deg) translateY(-2px); }
.pack-catalog-art-fallback { position: absolute; inset: 32px 30px 14px; display: grid; place-items: center; border: 1px solid var(--pack-line); border-radius: 4px; padding: 8px; font-size: 12px; text-align: center; color: var(--pack-muted); background: var(--pack-raised); }
.pack-catalog-description { display: flex; flex-direction: column; min-width: 0; flex: 1; padding: 8px 14px 15px; }
.pack-catalog-name { min-height: 2.7em; font-size: 14px; font-weight: 570; line-height: 1.35; overflow-wrap: anywhere; }
.pack-catalog-size, .pack-catalog-progress { display: block; font-size: 11px; line-height: 1.6; color: var(--pack-muted); }
.pack-catalog-size { margin-top: 7px; }
.pack-catalog-progress { color: var(--pack-quiet); font-variant-numeric: tabular-nums; }
.pack-catalog-selected { position: absolute; top: 12px; left: 11px; display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; background: var(--pack-gold); color: #201a0c; }
.pack-catalog-selected .pack-icon { width: 14px; height: 14px; stroke-width: 2.5; }
.pack-catalog-save { position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--pack-quiet); -webkit-tap-highlight-color: transparent; }
.pack-catalog-save:hover:not(:disabled) { color: var(--pack-text); background: #ffffff09; }
.pack-catalog-save[aria-pressed="true"] { color: var(--pack-gold); }
.pack-catalog-save[aria-pressed="true"] svg { fill: currentColor; }
.pack-catalog-save .pack-icon { width: 18px; height: 18px; }
.pack-catalog-empty { padding: 42px 20px 46px; border: 1px dashed var(--pack-line); border-radius: 11px; text-align: center; }
.pack-catalog-empty strong { font-size: 16px; font-weight: 570; }
.pack-catalog-empty p { margin-top: 5px; color: var(--pack-muted); font-size: 13px; }
.pack-catalog-reset { margin-top: 18px; }
.pack-catalog [hidden] { display: none !important; }
@media (max-width: 1050px) {
  .pack-catalog-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 780px) {
  .pack-catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pack-catalog-controls { grid-template-columns: minmax(0, 1fr) auto; }
  .pack-catalog-query { grid-column: 1 / -1; }
}
@media (max-width: 540px) {
  .pack-catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .pack-catalog-art { height: 170px; padding: 29px 22px 6px; }
  .pack-catalog-art img { height: 135px; }
  .pack-catalog-description { padding: 8px 11px 13px; }
  .pack-catalog-name { font-size: 13px; }
  .pack-catalog-query, .pack-catalog-era, .pack-catalog-favorites { font-size: 13px; }
  .pack-catalog .pack-catalog-status { margin-bottom: 12px; }
}
@media (max-width: 359px) {
  .pack-catalog-art { height: 151px; padding-inline: 17px; }
  .pack-catalog-art img { height: 118px; }
  .pack-catalog-name { font-size: 12px; }
  .pack-catalog-size, .pack-catalog-progress { font-size: 10px; }
  .pack-catalog-description { padding-inline: 9px; }
  .pack-catalog-selected { left: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .pack-catalog-choice, .pack-catalog-art img { transition: none; }
}