/* Atlas / saved mods — page-specific layer.
   Loads after atlas-core.css, which supplies the tokens, the canvas and the
   browse surface: the card, the grid and the pager all come from there.

   The idea: a saved list is a personal shelf, so it should look like the rest
   of the catalogue rather than a different kind of page. Everything here is
   only what a saved card carries that a browse card does not — which game it
   came from, when it was saved, and the one control that removes it. */

/* Repeated from core on purpose; see the note there. Guarded per file by
   tests/smoke/design-system-hidden-guard.test.mjs. */
[hidden],
.hidden { display: none !important; }

body.am { --am-shell: 82rem; --am-floor: .7; }

/* --------------------------------------------------------------- ambient */
.am-ambient { height: 38vh; }

.am-ambient__img {
  background-position: center 25%;
  filter: blur(110px) saturate(1.6) brightness(.42);
}

.am-ambient__veil {
  background:
    radial-gradient(85% 60% at 50% 0%, transparent 0%, rgba(6, 8, 11, .64) 70%, rgba(6, 8, 11, .9) 100%),
    linear-gradient(180deg,
      rgba(6, 8, 11, .7) 0%,
      rgba(6, 8, 11, .56) 32%,
      var(--am-void) 90%);
}

/* ------------------------------------------------------------------ head */
.am-saves { padding-block: .6rem 0; }

.am-saves__title {
  margin: 0;
  font-family: var(--am-display);
  font-size: 1.9rem;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.15;
}

.am-saves__sub {
  margin-top: .45rem;
  font-family: var(--am-mono);
  font-size: .625rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--am-ink-3);
}

.am-saves__message {
  margin: .9rem 0 0;
  max-width: 42rem;
  font-size: .8125rem;
  line-height: 1.7;
  color: var(--am-ink-2);
}
.am-saves__message:empty { display: none; }

.am-saves__cta { margin-top: 1.1rem; height: 2.4rem; padding-inline: 1.1rem; }

/* --------------------------------------------------------------- filters */
.am-saves__filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .55rem;
  padding-block: 1.4rem .3rem;
}

.am-saves__filters label {
  font-family: var(--am-mono);
  font-size: .625rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--am-ink-3);
}

/* A select rather than the counted segments the profile page uses: the option
   list comes from /api/games, so it lists every game rather than only the ones
   with something saved. Segments would promise counts this page cannot supply.
   See the note in the redesign doc. */
.am-saves__filters .am-select { min-width: 9rem; }

.am-saves__status {
  font-size: .75rem;
  color: var(--am-ink-3);
}
.am-saves__status:empty { display: none; }

/* ------------------------------------------------------------------ grid */
.am-saves__grid { padding-block: 1.2rem 0; }

/* The line a browse card has no use for: which game this came from and when it
   was put here. One row, so a saved card is no taller than any other. */
.am-card__saved {
  display: flex;
  align-items: center;
  gap: .35rem;
  margin-top: .2rem;
  font-family: var(--am-mono);
  font-size: .5625rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--am-ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.am-card__game { color: var(--am-accent); }
.am-card__game:empty { display: none; }
.am-card__game:empty + .am-card__dot { display: none; }

.am-card__dot { opacity: .5; }

/* Sits in the footer where the browse card puts its like button, and inherits
   that slot's z-index so the stretched card link never swallows the click. */
.am-card__like .save-toggle {
  display: inline-flex;
  align-items: center;
  height: 1.55rem;
  padding-inline: .55rem;
  border: 1px solid var(--am-line);
  border-radius: 999px;
  background: rgba(0, 0, 0, .25);
  color: var(--am-ink-3);
  font-family: var(--am-mono);
  font-size: .5625rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: color .18s var(--am-ease), border-color .18s var(--am-ease), background .18s var(--am-ease);
}
.am-card__like .save-toggle:hover:not(:disabled) {
  color: var(--am-danger);
  border-color: rgba(244, 120, 140, .5);
  background: rgba(244, 120, 140, .1);
}
.am-card__like .save-toggle:disabled { opacity: .5; cursor: not-allowed; }

.am-saves__foot { padding-bottom: 2.5rem; }

@media (max-width: 47.99rem) {
  .am-saves__filters { padding-top: 1.1rem; }
  .am-saves__filters .am-select { flex: 1 1 auto; }
}