/* ============================================================================
   NEAR MINT — The Shelf

   Homage: Uncanny X-Men #141. That cover is a wall of wanted posters, each with
   a face, a name, and a status stamp across it. This is the same wall, except
   the posters are comics and the stamps are real collection status.

   There are no cover images in this collection (verified: 0 of 932), so the
   poster is typographic. The issue number is the face.
   ========================================================================== */

/* --- controls ------------------------------------------------------------ */

.shelf__controls {
  position: sticky;
  top: 48px;
  z-index: 30;
  background: var(--paper);
  border-bottom: var(--rule) solid var(--ink);
  padding: 10px 0 9px;
  margin-bottom: 14px;
}

.shelf__row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  flex-wrap: wrap;
}

.shelf__search { flex: 1 1 240px; min-width: 180px; }
.shelf__field  { flex: 0 1 138px; min-width: 108px; }

.shelf__toggles { display: flex; gap: 6px; flex-wrap: wrap; }

.shelf__toggle {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  padding: 6px 10px;
  background: var(--paper-hi);
  border: var(--rule) solid var(--ink);
  border-radius: var(--radius);
  cursor: pointer;
  white-space: nowrap;
}

.shelf__toggle[aria-pressed='true'] { background: var(--ink); color: var(--yellow); }

/* --- count line ---------------------------------------------------------- */

.shelf__count {
  display: flex;
  gap: 14px;
  align-items: baseline;
  flex-wrap: wrap;
  margin: 10px 0 12px;
  font-size: 0.8rem;
}

.shelf__count strong {
  font-family: var(--display);
  font-weight: 900;
  font-size: 1.5rem;
  line-height: 1;
}

/* --- the wall ------------------------------------------------------------ */

.shelf__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: var(--gutter);
}

/* --- a poster ------------------------------------------------------------ */

.poster {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 132px;
  padding: 7px 8px 6px;
  background: var(--paper-hi);
  border: var(--rule) solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 3px 3px 0 var(--ink);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: transform 0.09s, box-shadow 0.09s;
  /* the ink bar down the left edge is the grade, so the wall reads as warmth */
  border-left: 7px solid var(--g-none);
  overflow: hidden;
}

.poster:hover  { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); }
.poster:active { transform: translate(1px, 1px);   box-shadow: 2px 2px 0 var(--ink); }

.poster--nm   { border-left-color: var(--g-nm); }
.poster--vfnm { border-left-color: var(--g-vfnm); }
.poster--vf   { border-left-color: var(--g-vf); }
.poster--fn   { border-left-color: var(--g-fn); }
.poster--vg   { border-left-color: var(--g-vg); }
.poster--gd   { border-left-color: var(--g-gd); }
.poster--pr   { border-left-color: var(--g-pr); }

.poster__series {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.82rem;
  line-height: 0.98;
  letter-spacing: 0.01em;
  /* two lines then clip — series names run long and the grid must stay even */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 1.96em;
}

/* keep the title clear of the KEY/SIG badges instead of running underneath them */
.poster--marked .poster__series { padding-right: 40px; }

.poster__issue {
  font-family: var(--display);
  font-weight: 900;
  font-size: 2.6rem;
  line-height: 0.82;
  margin: 3px 0 auto;
  letter-spacing: -0.02em;
}

.poster__issue::before { content: '#'; font-size: 0.5em; vertical-align: 0.42em; margin-right: 1px; opacity: 0.55; }

.poster__issue--none { font-size: 1.3rem; opacity: 0.45; }
.poster__issue--none::before { content: ''; }

.poster__foot {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.poster__year { font-size: 0.72rem; font-weight: 600; opacity: 0.72; }

.poster__box {
  font-family: var(--body);
  font-weight: 700;
  font-size: 0.6rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 2px 4px;
  border: 1.5px solid var(--ink);
  border-radius: var(--radius);
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.poster__box--none { border-style: dashed; opacity: 0.5; }

/* marks in the top-right — key, signed */
.poster__marks {
  position: absolute;
  top: 5px;
  right: 5px;
  display: flex;
  gap: 3px;
}

.poster__mark {
  font-family: var(--display);
  font-weight: 900;
  font-size: 0.62rem;
  line-height: 1;
  padding: 2px 3px;
  border-radius: var(--radius);
  border: 1.5px solid var(--ink);
}

.poster__mark--key    { background: var(--yellow); }
.poster__mark--signed { background: var(--cyan); color: var(--paper-hi); }

/* The stamp, rotated the way UXM 141 does it — but in normal flow with its own
   space. Absolutely positioning it looked right on an empty card and covered the
   grade and year on a real one. */
.poster__stamp {
  align-self: flex-start;
  margin: 4px 0 0 -2px;
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: 0.72rem;
  line-height: 1.1;
  letter-spacing: 0.06em;
  padding: 1px 5px;
  border: 2px solid currentColor;
  transform: rotate(-4deg);
  pointer-events: none;
}

.poster__stamp--wanted { color: var(--red); }
.poster__stamp--loaned { color: var(--cyan); }
.poster__stamp--sold   { color: var(--ink-soft); }

/* --- selection ----------------------------------------------------------- */

.poster[aria-pressed='true'] {
  background: var(--yellow);
  box-shadow: 3px 3px 0 var(--ink), inset 0 0 0 2px var(--ink);
}

.shelf--selecting .poster { cursor: copy; }

/* --- variant / title line ------------------------------------------------ */

.poster__variant {
  font-size: 0.62rem;
  font-style: italic;
  opacity: 0.7;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- sentinel for progressive rendering ---------------------------------- */

.shelf__more { height: 1px; }

@media (max-width: 640px) {
  .shelf__controls { top: 44px; }
  .shelf__grid { grid-template-columns: repeat(auto-fill, minmax(106px, 1fr)); gap: 9px; }
  .poster { min-height: 116px; padding: 6px 6px 5px; border-left-width: 6px; }
  .poster__issue { font-size: 2rem; }
  .poster__series { font-size: 0.76rem; }
  .shelf__field { flex: 1 1 44%; }

  /* At ~106px wide the grade chip and year wrapped onto separate lines, which
     doubled every card's height and dragged the whole grid row with it. */
  .poster .nm-grade { font-size: 0.7rem; padding: 2px 4px; }
  .poster__year { font-size: 0.66rem; }
  .poster__box { font-size: 0.55rem; padding: 1px 3px; }
  .poster__foot { gap: 4px; margin-top: 4px; }
  .poster--marked .poster__series { padding-right: 34px; }

  .shelf__count { gap: 10px; margin: 8px 0 10px; }
  .shelf__count strong { font-size: 1.15rem; }
}

/* ── homage art ────────────────────────────────────────────────────────────
   The wall of notices sits behind the real grid at very low strength — the
   posters on this page are the comics, not the backdrop. Folder comes from
   nm-art.js, so the source can be switched without touching this file. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  background: var(--art-backdrop-desktop) center / cover no-repeat;
  mix-blend-mode: multiply;
  opacity: 0.17;
  pointer-events: none;
}
.nm-header, .nm-shell, .drawer, .scrim, .nm-toast { position: relative; z-index: 1; }
.nm-header { z-index: 40; }