/* The coin directory (/coins): every coin born on PSI, as cards that open each coin's own page. Tokens live in site.css. */
.coins { padding-top: calc(64px + 56px + env(safe-area-inset-top, 0px)); padding-bottom: 96px; min-height: 100svh; }
.coins-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: end; padding-bottom: 36px; border-bottom: 1px solid var(--line); }
.coins-head h1 { margin: 18px 0 0; font-weight: 500; font-size: clamp(36px, 5vw, 72px); line-height: 1; letter-spacing: -0.045em; text-wrap: balance; }
.coins-count { display: grid; justify-items: end; gap: 6px; }
.coins-count b { font-weight: 500; font-size: clamp(32px, 4vw, 56px); line-height: 1; letter-spacing: -0.02em; color: var(--ink); }
.coins-count span { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }

.coins-bar { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; margin: 28px 0 20px; }
.coins-search { position: relative; flex: 1 1 320px; max-width: 460px; display: block; }
.coins-search svg { position: absolute; left: 14px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--dim); pointer-events: none; }
.coins-search input { width: 100%; height: 44px; padding: 0 14px 0 40px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); color: var(--ink); font: 400 14px var(--sans); outline: none; transition: border-color var(--t-snap) var(--snap), box-shadow var(--t-snap) var(--snap); }
.coins-search input::placeholder { color: var(--dim); }
.coins-search input:focus { border-color: #2C3038; box-shadow: 0 0 0 3px rgba(46, 230, 255, .08); }
.coins-sort { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); }
.coins-sort button { height: 36px; padding: 0 14px; border: 0; border-radius: 4px; background: transparent; color: var(--muted); font: 500 13px var(--sans); cursor: pointer; transition: color var(--t-snap) var(--snap), background var(--t-snap) var(--snap); }
.coins-sort button:hover { color: var(--ink); }
.coins-sort button[aria-selected="true"] { background: #15171B; color: var(--ink); box-shadow: inset 0 0 0 1px #23262D; }

.coins-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 12px; }
.coin-card { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 14px; padding: 16px; height: 100%; border: 1px solid var(--line); border-radius: var(--r); background: var(--glass); color: inherit; text-decoration: none; transition: border-color var(--t-snap) var(--snap), background var(--t-snap) var(--snap), transform var(--t-snap) var(--snap); }
.coin-card:hover { border-color: #2C3038; background: rgba(16, 17, 21, .9); }
.coin-card:active { transform: scale(.99); }
.coin-card:focus-visible { outline: 1px solid var(--cherenkov); outline-offset: 2px; }
.coin-card img { width: 56px; height: 56px; border-radius: var(--r); object-fit: cover; background: var(--panel); border: 1px solid var(--line); }
.coin-main { min-width: 0; display: grid; gap: 4px; align-content: start; }
.coin-top { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.coin-top b { font-weight: 500; font-size: 16px; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.coin-top .sym { font: 500 12px var(--mono); color: var(--muted); flex: none; }
.coin-top .mc { margin-left: auto; font: 500 13px var(--mono); color: var(--ink); flex: none; font-variant-numeric: tabular-nums; }
.coin-ca { font: 400 12px var(--mono); color: var(--muted); letter-spacing: .02em; }
.coin-ca .tail { text-shadow: none; }
.coin-card:hover .coin-ca .tail { text-shadow: 0 0 12px var(--cherenkov-glow); }
.coin-desc { margin: 6px 0 0; font-size: 13px; line-height: 1.45; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.coin-foot { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 8px; font: 400 11px var(--mono); letter-spacing: .04em; color: var(--dim); }
.coin-foot .v { color: var(--muted); }
.coin-card.new { animation: born 900ms var(--snap); }
@keyframes born { 0% { border-color: var(--cherenkov); box-shadow: 0 0 0 1px rgba(46, 230, 255, .35), 0 0 32px -6px var(--cherenkov-glow); } 100% { border-color: var(--line); box-shadow: none; } }

/* loading: cards in superposition */
.coin-card.ghost { pointer-events: none; }
.coin-card.ghost .ph { display: block; height: 10px; border-radius: 3px; background: linear-gradient(90deg, var(--panel), var(--line), var(--panel)); background-size: 200% 100%; animation: sk 1.4s linear infinite; }
.coin-card.ghost .ph.img { width: 56px; height: 56px; border-radius: var(--r); }
@keyframes sk { to { background-position: -200% 0; } }

.coins-empty { display: grid; justify-items: start; gap: 4px; padding: clamp(48px, 8vw, 96px) 0 24px; }
.coins-empty-ca { font-size: clamp(14px, 2vw, 24px); letter-spacing: .02em; color: var(--muted); overflow-wrap: anywhere; min-height: 1.3em; }
.coins-empty-ca .q { filter: blur(1.4px); opacity: .55; }
.coins-empty-ca .tail { filter: none; opacity: 1; }
.coins-empty h2 { max-width: 20ch; }
.coins-empty .btn { margin-top: 24px; }
.coins-more { display: flex; justify-content: center; margin-top: 28px; }

@media (max-width: 720px) {
  .coins-head { grid-template-columns: minmax(0, 1fr); }
  .coins-count { justify-items: start; grid-auto-flow: column; align-items: baseline; justify-content: start; gap: 10px; }
  .coins-search { max-width: none; }
  .coins-sort { width: 100%; }
  .coins-sort button { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .coin-card.new, .coin-card.ghost .ph { animation: none; }
}