/* Coin board (Home + Explore): toolbar (search with dropdown, sort, filter popover), cards with the embossed ticker disc,
 * card menu, pagination. Values follow the reference board component. */
.board{grid-column:span 12; width:100%; padding-bottom:64px}
.tb{margin-bottom:10px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 12px}
.tb .grow{min-width:0; flex:1}
.tb .sortg{display:flex; flex:none; align-items:center; gap:6px}
.tb .sortl{font-size:11px; color:var(--muted)}
.srch{position:relative; width:100%}
.srch .box{display:flex; height:34px; width:100%; align-items:center; gap:8px; border-radius:999px; border:1px solid var(--line); background:var(--paper-2); padding:0 8px 0 12px; color:var(--muted)}
.srch input{min-width:0; flex:1; background:transparent; font-size:12px; color:var(--ink); outline:none}
.srch input::placeholder{color:color-mix(in srgb,var(--muted) 70%,transparent)}
.srch input::-webkit-search-cancel-button,.srch input::-webkit-search-decoration{-webkit-appearance:none; appearance:none; display:none}
.srch .clr{display:grid; place-items:center; width:20px; height:20px; flex:none; border-radius:999px; font-size:12px; color:var(--muted)}
.srch .clr:hover{background:var(--well); color:var(--ink)}
.srch .dd{position:absolute; left:0; right:0; z-index:30; margin-top:6px; overflow:hidden; border-radius:12px; border:1px solid var(--frame); background:var(--paper); padding:4px 0; box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a}
.srch .dd .row{display:flex; width:100%; align-items:center; gap:10px; padding:6px 10px; text-align:left}
.srch .dd .row:hover,.srch .dd .row[aria-selected=true]{background:var(--well)}
.srch .dd .av{width:24px; height:24px; flex:none}
.srch .dd b{display:block; font-size:12px; font-weight:600; line-height:1.25}
.srch .dd small{display:block; font-size:10px; line-height:1.25; color:var(--muted)}
.srch .dd .kind{flex:none; border-radius:999px; background:var(--well); padding:1px 6px; font-size:9px; font-weight:500; color:var(--muted)}
.srch .dd .msg{padding:10px 12px; font-size:11px; color:var(--muted)}
.srch .dd .more{border-top:1px solid color-mix(in srgb,var(--line) 60%,transparent); padding:6px 10px 4px; font-size:9.5px; color:color-mix(in srgb,var(--muted) 70%,transparent)}
.fbtn{position:relative}
.fbtn>button{display:flex; height:34px; align-items:center; gap:6px; white-space:nowrap; border-radius:999px; border:1px solid var(--line); background:var(--card); padding:0 14px; font-size:12px; font-weight:600; color:var(--muted)}
.fbtn>button:hover{color:var(--ink); border-color:var(--frame)}
.fbtn>button.on{color:var(--ink); padding-right:6px}
.fbtn .clrf{display:grid; place-items:center; width:17px; height:17px; border-radius:999px; background:color-mix(in srgb,var(--head) 15%,transparent); font-size:11px; color:color-mix(in srgb,var(--ink) 75%,transparent)}
.pop{position:absolute; right:0; top:calc(100% + 6px); z-index:30; width:262px; overflow:hidden; border-radius:6px; background:var(--card); padding:6px; box-shadow:var(--pop),0 0 0 1px var(--line)}
.pop .sec{padding:8px 10px 4px; font-size:9.5px; text-transform:uppercase; letter-spacing:.14em; color:color-mix(in srgb,var(--muted) 50%,transparent)}
.pop input{width:100%; border-radius:8px; background:var(--track); padding:8px 10px; font-size:11.5px; outline:none}
.pop .lst{margin-top:4px; max-height:300px; overflow-y:auto}
.pop .opt{display:flex; width:100%; align-items:center; justify-content:space-between; gap:8px; border-radius:8px; padding:8px 10px; text-align:left; font-size:11.5px}
.pop .opt:hover,.pop .opt[aria-pressed=true]{background:var(--track)}
.pop .opt .l{display:flex; min-width:0; align-items:center; gap:8px}
.pop .opt .co{color:color-mix(in srgb,var(--muted) 70%,transparent); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pop .opt .ct{flex:none; color:var(--head)}

.cards{display:grid; grid-template-columns:1fr; gap:12px}
.card{position:relative; cursor:pointer; overflow:hidden; border-radius:6px; border:1px solid var(--line); background:var(--card); transition:transform .2s ease-out,border-color .2s,box-shadow .2s; will-change:transform}
.card:hover{transform:translateY(-2px); border-color:var(--frame); box-shadow:var(--lift)}
.card .in{position:relative; display:flex; min-height:150px; flex-direction:column; justify-content:space-between; padding:16px 132px 16px 16px}
.card .av{width:36px; height:36px}
.card .sym{margin-top:12px; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.card .mc{margin-top:2px; font-size:26px; font-weight:700; line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.card .pays{margin-top:10px; display:flex; align-items:center; gap:6px; font-size:11px; color:var(--muted); min-width:0}
.card .pays b{font-weight:600; color:color-mix(in srgb,var(--ink) 85%,transparent); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.card .kb{position:absolute; right:12px; top:12px; z-index:10}
.kebab{display:flex; width:24px; height:24px; align-items:center; justify-content:center; border-radius:4px; border:1px solid var(--line); background:var(--card); color:var(--muted)}
.kebab:hover{border-color:var(--frame); color:var(--ink)}
.kmenu{position:absolute; right:0; top:100%; z-index:30; margin-top:4px; width:190px; overflow:hidden; border-radius:6px; border:1px solid var(--line); background:var(--card); padding:4px; box-shadow:var(--pop)}
.kmenu button{display:flex; width:100%; align-items:center; justify-content:space-between; gap:12px; border-radius:4px; padding:8px 10px; text-align:left; font-size:12.5px; font-weight:500}
.kmenu button:hover{background:var(--well)}
.kmenu small{font:400 11px var(--mono); color:var(--muted)}
.card.filler{visibility:hidden}
.card.skel-c{height:150px; padding:16px; cursor:default}
.card.skel-c:hover{transform:none; box-shadow:none; border-color:var(--line)}

/* the embossed disc: the stock's bStocks token logo; a VT323 ticker monogram when there is no logo */
.disc{pointer-events:none; position:absolute; right:16px; top:50%; width:100px; height:100px; transform:translateY(-50%); border-radius:999px; padding:3px; opacity:.32;
  background:var(--disc-ring); box-shadow:0 0 0 1px rgb(26 26 24/.10),0 10px 22px -8px rgb(26 26 24/.35),0 2px 4px rgb(26 26 24/.08); transition:opacity .3s,transform .3s}
.card:hover .disc{opacity:.5; transform:translateY(-50%) scale(1.03)}
.disc .face{position:relative; display:grid; width:100%; height:100%; place-items:center; overflow:hidden; border-radius:999px}
.disc .mono-t{font-family:var(--crt); font-size:34px; line-height:1; color:#fff; letter-spacing:.02em; text-shadow:0 0 6px rgb(255 255 255/.35)}
.disc .face::after{content:""; position:absolute; inset:0; background:repeating-linear-gradient(0deg,rgb(0 0 0/.12) 0 1px,transparent 1px 3px)}
.disc.basket .face{background:transparent !important}
.tick{position:relative; display:inline-grid; place-items:center; flex:none; border-radius:999px; color:#fff; font-weight:600; line-height:1; overflow:hidden}
.tick>img,.disc .face>img{position:absolute; inset:0; display:block; width:100%; height:100%; max-width:none; border-radius:999px; object-fit:cover}
.tick.logo,.disc .face.logo{background:transparent !important; color:transparent}
.disc .face.logo .mono-t{visibility:hidden} .disc .face.logo::after{display:none}
.tick.s14{width:14px; height:14px; font-size:8px} .tick.s15{width:15px; height:15px; font-size:8px} .tick.s16{width:16px; height:16px; font-size:8.5px} .tick.s18{width:18px; height:18px; font-size:9px}
.tick.s20{width:20px; height:20px; font-size:9.5px} .tick.s24{width:24px; height:24px; font-size:10px} .tick.s26{width:26px; height:26px; font-size:10.5px}
.tick.s32{width:32px; height:32px; font-size:12px} .tick.s40{width:40px; height:40px; font-size:14px}
.ticks{display:inline-flex} .ticks .tick{box-shadow:0 0 0 1.5px var(--card)} .ticks .tick+.tick{margin-left:-4px}
.avatar{display:block; flex:none; overflow:hidden; border-radius:999px; border:1px solid var(--line); background:var(--paper-2); image-rendering:pixelated}

.pager{margin-top:12px; display:flex; align-items:center; justify-content:flex-end; gap:6px}
.pager button,.pager span{display:inline-flex; height:30px; min-width:30px; align-items:center; justify-content:center; border-radius:8px; padding:0 8px; font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums}
.pager button:hover:not(:disabled){color:var(--ink)}
.pager button[aria-current]{border:1px solid var(--frame); background:var(--card); color:var(--ink); font-weight:600}
.pager button:disabled{opacity:.5; cursor:default}
.pager .gap{color:color-mix(in srgb,var(--muted) 60%,transparent); min-width:0; padding:0 4px}

@media (min-width:640px){.srch{width:300px} .cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* phones: one row like the original; the search folds into a 34 px magnifier and opens across the row when tapped */
@media (max-width:639px){
  .tb{flex-wrap:nowrap; column-gap:10px} .tb .grow{flex:1 1 0%; min-width:24px} .tb .seg button{padding:6px 12px} .fbtn>button{padding:0 12px}
  .tb:not(.open) .srch .box{padding:0; justify-content:center; cursor:pointer} .tb:not(.open) .srch input,.tb:not(.open) .srch .clr{display:none}
  .tb.open .sortg{display:none}
}
@media (max-width:379px){.tb .sortl{display:none} .tb .seg button{padding:6px 10px} .fbtn>button{padding:0 10px}}