/* Explore → Tokens card grid (D64). Dark brand palette; each card gets a soft accent from its artwork or mint hue. */
.explore-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;margin:28px 0 18px}
.explore-head h1{margin:0 0 4px}
.explore-head .subtitle{margin:0;color:var(--muted)}
.explore-views{display:inline-flex;gap:4px;padding:4px;border:1px solid var(--line);border-radius:999px;background:var(--card)}
.explore-views button{border:0;background:none;color:var(--muted);padding:7px 18px;border-radius:999px;font-weight:600}
.explore-views button[aria-selected=true]{background:var(--accent);color:#120800}
.card-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.card-chips{display:flex;flex-wrap:wrap;gap:8px}
.card-chips button{border:1px solid var(--line);background:var(--card);color:var(--muted);padding:7px 14px;border-radius:999px;font-weight:550;transition:transform .15s ease,border-color .15s ease,color .15s ease}
.card-chips button:hover{color:var(--ink);border-color:#555}
.card-chips button[aria-pressed=true]{color:var(--ink);border-color:var(--accent);background:#2a1b10}
.card-search{min-width:240px;border-radius:999px}
.card-search input{border:0;background:none;color:var(--ink);padding:9px 0;width:100%;outline:none}
.cards-status{margin:0 0 14px;min-height:20px;color:var(--muted);font-size:12px}
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
.tcard{--card-accent:hsl(var(--card-hue,24) 85% 62%);position:relative;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:18px;background:var(--card);overflow:hidden;color:var(--ink);transition:transform .18s cubic-bezier(.3,1.4,.5,1),border-color .18s ease,box-shadow .18s ease}
.tcard:hover,.tcard:focus-visible{transform:translateY(-5px) rotate(-.6deg);border-color:var(--card-accent);box-shadow:0 14px 34px -14px var(--card-accent)}
.tcard:active{transform:translateY(-2px) scale(.99)}
.tcard-art{position:relative;aspect-ratio:1;display:grid;place-items:center;background:radial-gradient(120% 90% at 30% 15%,color-mix(in srgb,var(--card-accent) 55%,transparent),transparent 70%),linear-gradient(160deg,hsl(var(--card-hue,24) 45% 18%),#101010)}
.tcard-art img{width:100%;height:100%;object-fit:cover;display:block}
.tcard-monogram{font-size:clamp(30px,5vw,46px);font-weight:800;letter-spacing:-1.5px;color:#fff;text-shadow:0 4px 18px #0008;text-transform:uppercase}
.tcard-badge{position:absolute;top:10px;left:10px;padding:4px 10px;border-radius:999px;background:#000b;backdrop-filter:blur(6px);font-size:11px;font-weight:650;color:#fff}
.tcard-badge-example{background:#efc16a;color:#1a1200}
.tcard-body{display:flex;flex-direction:column;gap:8px;padding:12px 14px 14px}
.tcard-id{display:flex;align-items:baseline;gap:6px;min-width:0}
.tcard-name{font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.tcard-sym{color:var(--muted);font-size:12px;flex:none}
.tcard-cap{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.tcard-cap span{color:var(--muted);font-size:11px}
.tcard-cap b{font-size:17px;font-weight:750;letter-spacing:-.3px}
.tcard-bar{height:8px;border-radius:999px;background:var(--soft);overflow:hidden}
.tcard-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--accent),#ffc06b)}
.tcard-bar-label{margin-top:-4px;color:var(--muted);font-size:11px}
.tcard-foot{display:flex;justify-content:space-between;gap:8px;color:var(--muted);font-size:11px}
.tcard-foot .tcard-age{margin-left:auto}
.tcard[data-stage=graduated]{border-color:#3d3423}
.tcard[data-stage=graduated] .tcard-art::after{content:'';position:absolute;inset:0;background:conic-gradient(from 210deg,#ffd76a22,transparent 30%,#ff7f1122 60%,transparent 85%);pointer-events:none}
.tcard[data-hot=true] .tcard-bar i{animation:tcard-glow 1.6s ease-in-out 2}
@keyframes tcard-glow{50%{filter:brightness(1.35);box-shadow:0 0 10px #ff9d3b}}
.tcard-skeleton{pointer-events:none}
.tcard-skeleton .tcard-art,.tcard-skeleton .tcard-body{background:linear-gradient(90deg,#161616 0,#202020 40%,#161616 80%);background-size:300% 100%;animation:tcard-shimmer 1.3s linear infinite}
.tcard-skeleton .tcard-body{height:92px}
@keyframes tcard-shimmer{to{background-position:-300% 0}}
.cards-empty{text-align:center;padding:48px 16px;color:var(--muted)}
.cards-empty span{font-size:36px}
.cards-empty h2{margin:8px 0 4px;color:var(--ink);font-size:18px}
.cards-more{display:flex;justify-content:center;padding:20px 0 8px;min-height:1px}
.launch-about{margin:0 0 24px}
.launch-about .launch-steps{margin-top:12px}
@media (max-width:1100px){.card-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1101px){.card-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media (max-width:720px){.card-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.card-search{min-width:0;flex:1 1 100%}.card-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px}.card-chips button{flex:none}.tcard{border-radius:14px}.tcard-body{padding:10px 10px 12px;gap:6px}.tcard-cap b{font-size:15px}.explore-head{margin-top:18px}}
@media (prefers-reduced-motion:reduce){.tcard,.card-chips button{transition:none}.tcard:hover,.tcard:focus-visible,.tcard:active{transform:none}.tcard[data-hot=true] .tcard-bar i,.tcard-skeleton .tcard-art,.tcard-skeleton .tcard-body{animation:none}}
.tcard-body{flex:1}
.tcard-foot{margin-top:auto}
.tcard-bar-done i{width:100%;background:linear-gradient(90deg,#ffd76a,#ff9d3b,#ffd76a)}
@media (min-width:1600px){.card-grid{grid-template-columns:repeat(6,minmax(0,1fr))}}

/* ---- D65 upgrade ---- */
/* Initial view chosen before paint (explore-boot.js) and reserved height so the footer never jumps. */
html[data-explore-mode=discover] #explore-tokens{display:none}
html[data-explore-mode=discover] #explore-discover[hidden]{display:block!important}
#discover-view{min-height:calc(100vh - 88px)}
.explore-head{margin:24px 0 14px}
.explore-head h1{font-size:clamp(30px,3.4vw,40px);letter-spacing:-1.2px;line-height:1.1}
/* Card = article with one full-size link plus a separate info button (no nested interactive content). */
.tcard-link{display:flex;flex-direction:column;flex:1;color:inherit;border-radius:inherit;outline:none}
.tcard:has(.tcard-link:focus-visible){border-color:var(--card-accent);box-shadow:0 0 0 2px var(--card-accent),0 14px 34px -14px var(--card-accent);transform:translateY(-5px) rotate(-.6deg)}
.tcard:focus-visible{transform:none}
.tcard-info{position:absolute;top:10px;right:10px;z-index:2;width:28px;height:28px;display:grid;place-items:center;padding:0;border:1px solid #ffffff2e;border-radius:50%;background:#000a;backdrop-filter:blur(6px);color:#fff;font:italic 700 13px/1 Georgia,serif;opacity:0;transform:scale(.85);transition:opacity .15s ease,transform .15s ease}
.tcard:hover .tcard-info,.tcard:focus-within .tcard-info,.tcard-info[aria-expanded=true]{opacity:1;transform:none}
.tcard-info:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (hover:none){.tcard-info{opacity:1;transform:none}}
.tcard-art img{opacity:0;transition:opacity .25s ease}
.tcard-art img[data-loaded=true]{opacity:1}
.tcard-monogram{font-size:clamp(28px,4.4vw,44px);background:linear-gradient(180deg,#fff,hsl(var(--card-hue,24) 70% 86%));-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 4px 14px #0009)}
.tcard-art::before{content:'';position:absolute;inset:0;background-image:radial-gradient(#ffffff14 1px,transparent 1.5px);background-size:14px 14px;mask-image:radial-gradient(circle at 50% 45%,#000 30%,transparent 75%);pointer-events:none}
.tcard-identicon{width:46%;height:46%;fill:hsl(var(--card-hue,24) 80% 72%);filter:drop-shadow(0 6px 16px #000a)}
.tcard-name mark{background:color-mix(in srgb,var(--accent) 35%,transparent);color:inherit;border-radius:3px;padding:0 1px}
.tcard-mint{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px}
.tcard[data-flash]{animation:tcard-flash 2.4s ease-out 1}
.tcard[data-flash=new]::after{content:'New';position:absolute;top:10px;right:46px;padding:3px 9px;border-radius:999px;background:var(--accent);color:#120800;font-size:11px;font-weight:700;animation:tcard-fade 4s ease-out forwards}
@keyframes tcard-flash{0%{box-shadow:0 0 0 2px var(--accent),0 0 30px -4px var(--accent)}100%{box-shadow:none}}
@keyframes tcard-fade{0%,70%{opacity:1}100%{opacity:0}}
/* Toolbar sticks while scrolling the grid; chip counts. */
.card-toolbar{position:sticky;top:0;z-index:20;margin:0 -12px 6px;padding:10px 12px;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-radius:0 0 14px 14px}
.chip-count{margin-left:6px;padding:1px 7px;border-radius:999px;background:#ffffff14;color:var(--muted);font-size:11px;font-weight:650}
.card-chips button[aria-pressed=true] .chip-count{background:#ff7f1133;color:#ffc58f}
.card-search{position:relative}
.card-search input::-webkit-search-cancel-button{display:none}
.card-search-key{padding:1px 7px;border:1px solid var(--line);border-radius:5px;color:var(--muted);font:600 11px/1.5 ui-monospace,monospace}
.card-search:focus-within .card-search-key,.card-search:has(input:not(:placeholder-shown)) .card-search-key{display:none}
.card-search-clear{border:0;background:none;color:var(--muted);font-size:18px;line-height:1;padding:4px 2px}
.card-search-clear:hover{color:var(--ink)}
.card-search:focus-within{border-color:#5a5a5a}
.cards-statusline{display:flex;align-items:center;gap:12px;min-height:30px;margin-bottom:12px}
.cards-statusline .cards-status{margin:0}
.cards-updates{margin-left:auto;padding:6px 14px;border:1px solid var(--accent);border-radius:999px;background:#2a1b10;color:#ffc58f;font-weight:650;font-size:12px;animation:tcard-pop .3s cubic-bezier(.3,1.5,.5,1)}
@keyframes tcard-pop{from{transform:scale(.8);opacity:0}}
.cards-end{margin:0;color:var(--muted);font-size:12px}
.cards-end:empty{display:none}
.cards-empty p{margin:0 0 14px}
.cards-action{margin-top:4px}
/* Peek popover. */
.card-peek{position:fixed;inset:auto;margin:0;padding:14px;border:1px solid #3d3d3d;border-radius:14px;background:#161616;color:var(--ink);box-shadow:0 18px 50px #000c;font-size:13px}
.card-peek:not([popover]){z-index:60}
.peek-head{display:flex;align-items:baseline;gap:6px;margin-bottom:10px}
.peek-head strong{font-size:15px}
.peek-head span{color:var(--muted);font-size:12px}
.peek-close{margin-left:auto;border:0;background:none;color:var(--muted);font-size:20px;line-height:1;padding:0 2px}
.card-peek dl{display:grid;gap:7px;margin:0 0 12px}
.card-peek dl>div{display:flex;justify-content:space-between;gap:12px}
.card-peek dt{color:var(--muted)}
.card-peek dd{margin:0;display:flex;align-items:center;gap:8px;text-align:right}
.card-peek code{font-size:12px}
.peek-copy{padding:2px 8px;border:1px solid var(--line);border-radius:6px;background:var(--soft);color:var(--ink);font-size:11px}
.peek-go{display:block;text-align:center}
@media (max-width:720px){.card-toolbar{margin:0 -16px 6px;padding:8px 16px;border-radius:0}.card-search-key{display:none}}
/* Real-use pass F03: the toolbar never changes its row count when the chip counts arrive (768px used to jump 0.42 as
   the wider chips wrapped the search onto a new line). Chips stay on one scrollable row; up to 1100px the search
   always has its own row, above that it shares the row and the chips shrink and scroll instead of wrapping. */
.card-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;min-width:0;padding-block:4px;margin-block:-4px}
.card-chips::-webkit-scrollbar{display:none}
.card-chips button{flex:none}
@media (max-width:1100px){.card-search{min-width:0;flex:1 1 100%}}
@media (min-width:1101px){.card-toolbar{flex-wrap:nowrap}.card-chips{flex:0 1 auto}.card-search{flex:0 0 auto}}
@media (prefers-reduced-motion:reduce){.tcard-info,.tcard-art img{transition:none}.tcard[data-flash],.tcard[data-flash=new]::after,.cards-updates{animation:none}.tcard:has(.tcard-link:focus-visible){transform:none}}
/* Discover table, restyled to match the cards (D65). Same data, sorting, paging and honesty rules. */
#explore-discover .toolbar{border-bottom:0;padding-bottom:6px}
#explore-discover .explorer-tabs{display:inline-flex;gap:4px;padding:4px;border:1px solid var(--line);border-radius:999px;background:var(--card)}
#explore-discover .explorer-tabs button{border-radius:999px;padding:7px 14px;font-weight:550}
#explore-discover .explorer-tabs button[aria-pressed=true]{background:#2a1b10;border-color:var(--accent);color:var(--ink)}
#explore-discover .search{border-radius:999px}
#explore-discover .market-wrap{border-radius:18px;background:var(--card)}
#explore-discover #market-table th{background:#121212;font-size:11px;letter-spacing:.02em}
#explore-discover #market-table th[aria-sort=descending] button::after,#explore-discover #market-table th[aria-sort=ascending] button::after{color:var(--accent)}
#explore-discover #market-table td{border-bottom-color:#232323}
#explore-discover .token-row{transition:background .12s ease}
#explore-discover .token-row:hover{background:#1b1b1b}
#explore-discover .token-row:has(a:focus-visible){background:#1f1a15}
#explore-discover .coin-wrap img,.coin-avatar{width:42px;height:42px;flex:0 0 42px;border-radius:12px}
.coin-avatar{display:grid;place-items:center;background:radial-gradient(120% 90% at 30% 15%,hsl(var(--card-hue,24) 80% 55% / .6),transparent 70%),linear-gradient(160deg,hsl(var(--card-hue,24) 45% 20%),#101010);color:#fff;font-weight:800;font-size:14px;text-transform:uppercase;border:1px solid #ffffff1a}
#explore-discover .coin-identity a{font-weight:650;font-size:13px}
#explore-discover .row-stage{display:inline-flex;align-items:center;gap:6px;padding:1px 8px;border-radius:999px;font-size:10px}
#explore-discover .row-stage[data-stage=graduated]{border-color:#6b5420;background:#2a2210;color:#ffd76a}
.row-progress{display:inline-block;width:38px;height:4px;border-radius:999px;background:linear-gradient(90deg,var(--accent) var(--p),#333 var(--p))}
#explore-discover .pagination button{border:1px solid var(--line);border-radius:999px;padding:6px 14px}
@media (max-width:900px){#explore-discover .coin-wrap img,.coin-avatar{width:34px;height:34px;flex-basis:34px;border-radius:10px}#explore-discover .policy-badge{display:none}}
/* No jump when the first rows arrive (D65): the status line has a fixed height and the controls below the table stay
   invisible (not removed) until rows exist; the reserved page height keeps the footer below the fold. */
#explore-discover:has(#market-rows:empty) :is(.pagination,#coverage-note){visibility:hidden}
#explore-discover .collection-line{min-height:22px}
@media (max-width:900px){#explore-discover .collection-line{min-height:44px;align-items:flex-start}}
/* Legible table text on phones (old rules went down to 9–10px). */
@media (max-width:900px){#explore-discover #market-table{font-size:12px}#explore-discover #market-table th{font-size:11px}#explore-discover .coin-meta,#explore-discover .row-stage,#explore-discover .row-mint,#explore-discover .explorer-context,#explore-discover .collection-line,#explore-discover .pagination,#explore-discover .fine,#explore-discover #explorer-status,#explore-discover .explorer-tabs button,#explore-discover #market-table th button{font-size:12px}#explore-discover .coin-identity a{font-size:13px}}
@media (max-width:900px){#explore-discover .explorer-context{flex-direction:column;gap:4px;min-height:44px}#explore-discover .explorer-context>*{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}

/* ---- Token page (D66): hero in the Explore card language ---- */
#detail-view .detail-head{--card-accent:hsl(var(--card-hue,24) 85% 62%);display:flex;align-items:center;gap:22px;padding-bottom:6px}
.detail-art{position:relative;flex:0 0 132px;width:132px;height:132px;display:grid;place-items:center;border-radius:28px;overflow:hidden;border:1px solid #ffffff1f;background:radial-gradient(120% 90% at 30% 15%,color-mix(in srgb,var(--card-accent) 55%,transparent),transparent 70%),linear-gradient(160deg,hsl(var(--card-hue,24) 45% 18%),#101010);box-shadow:0 18px 40px -18px var(--card-accent)}
.detail-art img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .25s ease}
.detail-art img[data-loaded=true]{opacity:1}
.detail-art .tcard-identicon{width:58%;height:58%}
.detail-art .tcard-monogram{font-size:40px}
.detail-title{min-width:0}
.detail-title h1{margin:8px 0 6px;font-size:clamp(28px,4vw,44px);overflow-wrap:anywhere}
.detail-sub{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.detail-sub .symbol{color:var(--muted);font-weight:600}
.mint-chip{padding:4px 11px;border:1px solid var(--line);border-radius:999px;background:var(--soft);color:var(--ink);font:500 12px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace}
.mint-chip:hover{border-color:#5a5a5a}
.detail-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:20px 0 4px}
.detail-facts>div{padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:#111}
.detail-facts dt{color:var(--muted);font-size:12px}
.detail-facts dd{margin:4px 0 0}
.detail-facts .fact-value{display:block;font-size:18px;font-weight:700;letter-spacing:-.3px}
.detail-facts small{display:block;margin-top:2px;color:var(--muted);font-size:12px}
.detail-bar{height:8px;margin-top:8px;border-radius:999px;background:var(--soft);overflow:hidden}
.detail-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--accent),#ffc06b)}
.detail-bar.done i{width:100%!important;background:linear-gradient(90deg,#ffd76a,#ff9d3b,#ffd76a)}
.detail-story:empty{display:none}
/* No history yet: a compact honest state instead of a tall empty chart. */
.token-chart[data-status=unavailable] .chart-plot,.token-chart[data-status=empty] .chart-plot{min-height:0;height:auto;padding:28px 0}
/* D149: keep Refresh visible so people can retry */.token-chart[data-status=unavailable] :is(.chart-frames,.chart-reset,.chart-marks-btn,.chart-price,.chart-units),.token-chart[data-status=empty] :is(.chart-price,.chart-units){display:none}
@media (max-width:720px){#detail-view .detail-head{gap:14px}.detail-art{flex-basis:88px;width:88px;height:88px;border-radius:20px}.detail-art .tcard-monogram{font-size:28px}.detail-facts{grid-template-columns:1fr 1fr;gap:8px}.detail-facts .fact-value{font-size:16px}}
@media (prefers-reduced-motion:reduce){.detail-art img{transition:none}}
.token-chart[data-status=unavailable] .chart-plot{display:none}
@media (max-width:720px){.detail-facts>div:last-child:nth-child(odd){grid-column:span 2}}
/* Pre-paint route choice (explore-boot.js): show the right page from the first frame and keep the footer below the fold
   while the token loads. */
html[data-route=token] #discover-view,html[data-route=launch] #discover-view,html[data-route=rewards] #discover-view{display:none!important}
html[data-route=rewards] #rewards-view[hidden]{display:block!important}
html[data-route=token] #detail-view[hidden]{display:block!important}
html[data-route=launch] #launch-view[hidden]{display:block!important}
html[data-route=token] #token-detail{min-height:calc(100vh - 160px)}

/* D158 Part 4: identicon in the white + orange icon style */
.tcard-identicon{fill:none;filter:drop-shadow(0 6px 16px #000a)}
.tcard-identicon .ti-plate{fill:#17171a;stroke:#2a2a2f;stroke-width:.08}
.tcard-identicon .ti-cell{fill:var(--icon-base,#fff)}
.tcard-identicon .ti-accent{fill:var(--icon-accent,#FF7F11)}
/* Design QA 2026-10-27 (D158 checklist): hit targets reach 40 px on phones. */
@media(max-width:700px){.card-search input{min-height:40px}}