/* Collection, single token, reveal and mixer pages. */

.counters { padding: 0 var(--gutter) 34px; }
.counters .numbers { max-width: none; }
.toolbar { display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: center; padding: 18px var(--gutter); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.toolbar input[type=search], .toolbar select {
  font: inherit; font-size: 13px; color: var(--fg); background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px;
}
.toolbar input[type=search] { min-width: 210px; }
.toolbar input[type=search]::placeholder { color: var(--faint); }
.toolbar .grow { flex: 1; }
.select-bar { position: sticky; bottom: 0; z-index: 30; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px var(--gutter); background: var(--bg); border-top: 1px solid var(--line); }
.select-bar[hidden] { display: none; }

.notice { padding: 22px var(--gutter) 0; }

.tgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px; }
.tcard { position: relative; display: flex; flex-direction: column; gap: 10px; text-align: left; }
.tcard .frame { aspect-ratio: 1; outline: 1px solid var(--hair); background: var(--frame); transition: outline-color 0.2s; }
.tcard .frame svg { width: 100%; height: 100%; }
.tcard:hover .frame { outline-color: var(--faint); }
.tcard b { font-weight: 400; font-size: 13px; line-height: 1.35; }
.tcard small { display: block; font-size: 12px; color: var(--faint); margin-top: 2px; }
.qty { position: absolute; top: 8px; right: 8px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; padding: 3px 7px; border-radius: 999px; background: var(--bg); color: var(--fg); outline: 1px solid var(--line); }
.selecting .tcard .frame { outline-style: dashed; }
.tcard[aria-pressed='true'] .frame { outline: 2px solid var(--fg); }
.tcard.blocked { opacity: 0.3; pointer-events: none; }

.groups .group .tgrid { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); }
.flat { padding: 28px var(--gutter); }

.empty-state { padding: 40px var(--gutter) 120px; display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.empty-state .actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* single token */
.token-page { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 96px); padding: 130px var(--gutter) 60px; max-width: 1280px; margin: 0 auto; align-items: start; }
.token-page .art .frame { aspect-ratio: 1; outline: 1px solid var(--hair); background: var(--frame); }
.token-page .art .frame svg { width: 100%; height: 100%; }
.token-page .art .under { display: flex; justify-content: space-between; margin-top: 12px; font-size: 12px; color: var(--faint); }
.token-page .back { font-size: 13px; color: var(--dim); display: inline-block; margin-bottom: 26px; }
.token-page h1 { font-size: clamp(30px, 3.2vw, 44px); font-weight: 400; letter-spacing: -0.02em; line-height: 1.1; }
/* The main action full width, the others in an even row beneath it: square to both edges. */
.token-page .actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.token-page .actions > :first-child { grid-column: 1 / -1; }
.token-page .actions > :nth-child(2):last-child { grid-column: 1 / -1; }
.token-page .actions .button { width: 100%; }
.contains { border-top: 1px solid var(--line); }
.contains li { list-style: none; display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--hair); font-size: 14px; }
.contains li i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.contains li.missing { color: var(--faint); }
.contains li.missing i { background: transparent; box-shadow: inset 0 0 0 1px var(--c); }
.contains li span:last-child { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.contains li.in span:last-child { color: var(--fg); }
.meta-table { border-top: 1px solid var(--line); font-size: 13px; }
.meta-table div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--hair); }
.meta-table dt { color: var(--faint); }
.meta-table dd { overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.meta-table a { border-bottom: 1px solid var(--line); }

.player { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
.player .track { position: relative; flex: 1; height: 34px; cursor: pointer; }
.player canvas { width: 100%; height: 100%; }
.player .track::after { content: ""; position: absolute; top: -4px; bottom: -4px; left: var(--p, 0); width: 1px; background: var(--fg); }
.player .time { min-width: 0; }

.time { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
.btn { font-size: 12px; letter-spacing: 0.04em; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line); transition: border-color 0.2s, background 0.2s; }
.btn:hover { border-color: var(--faint); }

/* the unrevealed artwork breathes on the page (the token image itself stays still) */
.breathing svg circle { animation: breathe 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes breathe { 0%, 100% { opacity: 0.35; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.25); } }
@media (prefers-reduced-motion: reduce) { .breathing svg circle { animation: none; } }

/* reveal */
.reveal-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px; margin-top: 28px; }

/* mixer */
.mixer-list { padding: 0 var(--gutter); }

@media (max-width: 960px) {
  .token-page { grid-template-columns: 1fr; }
}

/* collect (the /mint address, now the mint is over) */
.object .actions, #reveal .actions { display: flex; flex-wrap: wrap; gap: 10px; }
.stem-buy b { display: flex; align-items: center; gap: 7px; }
.stem-buy b i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); flex: none; }
.stem-buy .links { display: flex; gap: 14px; font-size: 12px; }
.stem-buy .links a { color: var(--dim); border-bottom: 1px solid var(--line); }
.stem-buy .links a:hover { color: var(--fg); }
.stem-buy.playing .frame { outline-color: var(--fg); }
.stem-buy.held .frame { outline: 1px solid var(--faint); }
#need .group .dots { margin-top: 12px; }

/* Collect · Finish a song: the stems you hold, and the ones still missing, dimmed. */
.stem-buy.missing .frame { opacity: 0.32; filter: grayscale(0.7); transition: opacity 0.2s, filter 0.2s; }
.stem-buy.missing:hover .frame, .stem-buy.missing.playing .frame { opacity: 0.8; filter: none; }
.stem-buy.missing b { color: var(--dim); }
.stem-buy.missing b i { background: transparent; box-shadow: inset 0 0 0 1px var(--c); }

/* Token page: actions, then quieter links out. */
.token-page .ext-links { display: flex; gap: 22px; margin-top: 18px; font-size: 13px; }
.token-page .ext-links a { color: var(--dim); border-bottom: 1px solid var(--line); padding-bottom: 2px; transition: color 0.2s, border-color 0.2s; }
.token-page .ext-links a:hover { color: var(--fg); border-color: var(--faint); }
.play-btn { display: inline-flex; align-items: center; gap: 10px; flex: none; padding: 8px 16px 8px 9px; border-radius: 999px; border: 1px solid var(--line); font-size: 13px; transition: border-color 0.2s; }
.play-btn:hover { border-color: var(--faint); }
.play-btn .ico { position: relative; width: 26px; height: 26px; border-radius: 50%; background: var(--fg); flex: none; }
.play-btn .ico::before { content: ''; position: absolute; left: 10px; top: 8px; border-left: 8px solid var(--bg); border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.play-btn.on .ico::before { box-sizing: border-box; left: 8px; top: 7px; width: 10px; height: 12px; border: 0; border-left: 3px solid var(--bg); border-right: 3px solid var(--bg); }

/* Phone: the collection toolbar as a tidy stack: view, search, the four filters two by two, then select. */
@media (max-width: 700px) {
  .toolbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .toolbar .seg { grid-column: 1 / -1; margin-bottom: 4px; }
  .toolbar input[type=search] { grid-column: 1 / -1; order: 1; min-width: 0; width: 100%; }
  .toolbar .dd { order: 2; min-width: 0; }
  .toolbar .dd-btn { width: 100%; justify-content: space-between; padding: 10px 16px; }
  .toolbar .dd:nth-child(odd) .dd-list { left: auto; right: 0; } /* the right-hand column opens leftwards, inside the screen */
  .toolbar input[type=search] { font-size: 16px; padding: 10px 16px; } /* 16px stops iOS zooming in on focus */
  .toolbar .grow { display: none; }
  .toolbar #select { order: 3; grid-column: 1 / -1; width: 100%; padding: 12px 16px; margin-top: 4px; }
}