/* ==========================================================================
   Set pages — the element. Cool wash ground, one gradient band, cards on
   white. Each set is free to diverge from here; what must not diverge is
   the card itself. Loaded after styles.css.
   ========================================================================== */

.page-set { background: var(--wash); color: var(--ink-white); }
.page-set ::selection { background: var(--navy); color: #fff; }

/* --------------------------------------------------------------- crumb bar */

.crumb {
  background: var(--white);
  border-bottom: 1px solid var(--rule-white);
}
.crumb__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 3.4rem;
}
.crumb a {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--muted);
}
.crumb a { white-space: nowrap; }
.crumb a:hover { color: var(--navy); }
.crumb__mark { width: 0.9rem; height: auto; fill: currentColor; }
.crumb__spacer { margin-left: auto; }

/* The way back, said as a control rather than a trail. A breadcrumb reads as
   decoration to plenty of people; an arrow and a destination do not. */
.crumb__back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--rule-white);
  border-radius: 999px;
  background: #fff;
  white-space: nowrap;
}
.crumb__back:hover { border-color: var(--navy); }

/* Three crumbs will not sit on one narrow line without wrapping into stacks.
   The middle one is the least useful of the three — the gate is one tap from
   the brand link — so it goes. */
@media (max-width: 34rem) {
  .crumb__inner { gap: 0.75rem; }
  .crumb a.is-hideable { display: none; }
}

/* ------------------------------------------------------------------ banner */
/* The set's own field. Same gradient, same white leaf, larger register. */

.setband {
  position: relative;
  overflow: hidden;
  background: var(--grad);
  color: #fff;
}
.setband__inner {
  position: relative;
  padding-block: clamp(2.75rem, 7vw, 5rem);
}
.setband__leaf {
  position: absolute;
  right: 4%;
  top: 50%;
  translate: 0 -50%;
  height: min(115%, 20rem);
  width: auto;
  fill: #fff;
  color: #fff;
  opacity: 0.14;
  pointer-events: none;
}
/* Ghost leaves, same trick as the game tiles: huge, faint, running off the
   edges. It is what makes a flat gradient feel like somewhere. */
.setband__ghosts {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: #fff;
  opacity: 0.055;
  pointer-events: none;
}
.setband__eyebrow { color: var(--cyan-quiet); margin-bottom: 1rem; }
.setband h1 {
  font-size: clamp(2.1rem, 5.5vw, 3.6rem);
  margin: 0 0 1.15rem;
  max-width: 22ch;
}
.setband__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 0;
  padding: 1.15rem 0 0;
  border-top: 1px solid var(--rule-navy);
  max-width: 34rem;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.86);
}
/* dl for the semantics, not for the layout: the browser's own dd indent
   would push the facts off the left edge every other element sits on. */
.setband__facts dt, .setband__facts dd { margin: 0; }
.setband__facts b {
  font-weight: 600;
  font-variant-numeric: lining-nums;
  color: #fff;
}
/* The card trio, echoing the banner and the tiles. */
.setband__trio {
  position: absolute;
  left: var(--gutter);
  bottom: 1.4rem;
  width: 1.7rem;
  height: auto;
  color: #fff;
  opacity: 0.4;
}
@media (max-width: 46rem) { .setband__trio { display: none; } }

/* ----------------------------------------------------------------- toolbar */

.tools {
  position: sticky;
  /* Below the masthead, not under it: both are sticky, and the toolbar is the
     one that has to stay readable while the grid scrolls past. */
  top: 4.25rem;
  z-index: 30;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule-white);
}
.tools__inner {
  display: flex;
  align-items: center;
  gap: 0.75rem 1.25rem;
  flex-wrap: wrap;
  padding-block: 0.8rem;
}
.tools__count {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: auto;
}
.tools__count b { color: var(--navy-deep); font-variant-numeric: lining-nums; }

.minisearch {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border: 1px solid var(--rule-white);
  background: var(--white);
  padding: 0.45rem 0.8rem;
  min-width: 14rem;
}
.minisearch svg { width: 0.95rem; height: 0.95rem; stroke: var(--navy); flex: none; }
.minisearch input {
  border: 0;
  outline: 0;
  background: none;
  font: inherit;
  font-size: 1rem;
  min-width: 0;
  flex: 1;
  color: var(--ink-white);
}
.minisearch input::placeholder { color: #93a0ad; }
.minisearch:focus-within { border-color: var(--navy); }
.minisearch:has(input:disabled) { opacity: 0.55; }

.tools select {
  font: inherit;
  font-size: 0.88rem;
  color: var(--ink-white);
  background: var(--white);
  border: 1px solid var(--rule-white);
  padding: 0.5rem 0.7rem;
}
.tools select:disabled { opacity: 0.55; }
.tools__note { flex-basis: 100%; margin: 0; font-size: 0.8rem; color: var(--muted); }

/* -------------------------------------------------------------------- grid */

.shelf { padding-block: clamp(2rem, 4vw, 3.25rem); }

.shelf__head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: 1.5rem;
}
.shelf__head h2 { font-size: 1.35rem; color: var(--navy-deep); margin-right: auto; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
}
/* Two up on a phone. One card per row at this ratio is a full screen of a
   single card, which is a gallery, not a shelf. */
@media (max-width: 30rem) {
  .grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
  .card__body { padding: 0.65rem 0.7rem 0.75rem; }
}

/* --------------------------------------------------------------- the card */
/* This component is the one thing every set page shares. Image well at the
   trading-card ratio, then name, number, price. When the catalogue is
   imported only the contents change. */

.card {
  /* Positioned because two of its children are: the stretched link that makes
     the whole tile clickable, and the stack button in the corner. See the
     'stacking from a tile' note in catalogue.css. */
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--rule-white);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.22s var(--ease), transform 0.22s var(--ease),
              box-shadow 0.22s var(--ease);
}
/* focus-within, not focus-visible: the focusable thing is the link inside the
   tile now, not the tile itself. */
.card:hover, .card:focus-within {
  border-color: var(--navy);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -18px rgba(7, 40, 74, 0.55);
}

.card__well {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 5 / 7;
  overflow: hidden;
  background: linear-gradient(165deg, #fbfcfe 0%, var(--wash) 55%, var(--wash-deep) 100%);
  border-bottom: 1px solid var(--rule-white);
}
.card__well img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
/* Placeholder ghost, shown until a photograph exists. */
.card__ghost {
  width: 38%;
  height: auto;
  fill: var(--navy);
  color: var(--navy);
  opacity: 0.11;
}

.card__body { padding: 0.85rem 0.9rem 0.95rem; display: grid; gap: 0.45rem; }
.card__name {
  font-size: 0.98rem;
  line-height: 1.25;
  color: var(--navy-deep);
}
.card__meta {
  font-size: 0.63rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.card__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--rule-white);
}
.card__price {
  font-size: 1rem;
  font-variant-numeric: lining-nums;
  color: var(--navy-deep);
}
.card__cond {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cyan-on-paper);
}

/* Skeleton lines. Deliberately visible as structure, not as a loading trick:
   no shimmer, no pulse — the shape of the information that is coming. */
.sk {
  display: block;
  height: 0.5rem;
  background: var(--rule-white);
}
.sk--name  { width: 78%; }
.sk--meta  { width: 46%; height: 0.4rem; }
.sk--price { width: 3.2rem; }
.sk--cond  { width: 2.4rem; height: 0.4rem; }

@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
  .card:hover, .card:focus-within { transform: none; }
}

/* ------------------------------------------------------------ card anatomy */
/* Pre-launch only: shows how a listing will read once the import runs.
   Delete this section, and its markup, when real cards land. */

.anatomy {
  background: var(--white);
  border-block: 1px solid var(--rule-white);
}
.anatomy__inner {
  display: grid;
  grid-template-columns: 13rem 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
  padding-block: clamp(2.25rem, 5vw, 3.75rem);
}
@media (max-width: 44rem) {
  .anatomy__inner { grid-template-columns: 1fr; }
  .anatomy__demo { max-width: 13rem; }
}
.anatomy__lead { max-width: 30rem; }
.anatomy__lead h2 { font-size: 1.35rem; color: var(--navy-deep); margin-bottom: 0.75rem; }
.anatomy__lead p { color: var(--muted); margin: 0 0 1rem; }
.anatomy__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.55rem; }
.anatomy__list li {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 0.9rem;
  font-size: 0.9rem;
  color: var(--ink-soft);
  padding-top: 0.55rem;
  border-top: 1px solid var(--rule-white);
}
.anatomy__list b {
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy);
  padding-top: 0.15rem;
}

/* ------------------------------------------------------------------- funnel */

.funnel { padding-block: clamp(2.5rem, 5vw, 4rem); }
.funnel__head { padding-bottom: 1.75rem; }
.funnel__head h2 { font-size: 1.35rem; color: var(--navy-deep); }
.steps3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
}
@media (max-width: 46rem) { .steps3 { grid-template-columns: 1fr; } }
.step3 { padding-top: 1rem; border-top: 1px solid var(--rule-paper); }
.step3__no {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--cyan-on-paper);
  margin-bottom: 0.6rem;
  font-variant-numeric: lining-nums;
}
.step3 h3 { font-size: 1.06rem; color: var(--navy-deep); margin-bottom: 0.4rem; }
.step3 p { margin: 0; font-size: 0.92rem; color: var(--ink-soft); }

/* ------------------------------------------------------------------ pages */
/* The shelf ships every card, so paging is a matter of what is on screen
   rather than what was downloaded: turning a page is instant and so is asking
   for all of them. The control says where you are before it says where you can
   go, because that is the question somebody halfway down a set is asking. */
.pager {
  display: flex;
  align-items: center;
  gap: 0.6rem 0.9rem;
  flex-wrap: wrap;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule-white);
}
.pager__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.42rem 0.9rem;
  border: 1px solid var(--rule-white);
  border-radius: 999px;
  background: #fff;
  font: inherit;
  font-size: 0.92rem;
  color: var(--navy-deep);
  cursor: pointer;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.pager__btn:hover:not(:disabled) { border-color: var(--navy); }
.pager__btn:disabled { opacity: 0.4; cursor: default; }
.pager__at {
  margin: 0;
  font-size: 0.86rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  font-variant-numeric: lining-nums;
}
.pager__spacer { flex: 1 1 auto; }
.pager select { font-size: 0.9rem; }

/* On an element page the pager belongs to the element, like everything else
   between the band and the footer. */
.page-element .pager { border-top-color: var(--el-rule); }
.page-element .pager__btn { color: var(--el-deep); border-color: var(--el-rule); }
.page-element .pager__btn:hover:not(:disabled) { border-color: var(--el-accent); }