/* Discover and token-page design layer (owner: Claude, design/discover-token).
   Loads after style.css. Selectors stay scoped to the site header, #discover-view, #pair-catalog, #pair-token,
   #detail-view and the footer. Design only: no element is added or removed here, and box sizes that layout tests
   pin (toolbar row count, card body height, bonding strip height) are kept. */

:root {
  --dz-surface: #141414;
  --dz-surface-2: #1a1a1a;
  --dz-hover: #1d1d1f;
  --dz-line: #2a2a2c;
  --dz-line-strong: #3a3a3d;
  /* One "selected" look for every chip, tab and segmented control. */
  --dz-sel-bg: color-mix(in srgb, var(--accent) 15%, #141414);
  --dz-sel-ring: color-mix(in srgb, var(--accent) 62%, transparent);
  --dz-sel-ink: #fff3e8;
  --dz-ring: 0 0 0 2px #080808, 0 0 0 4px var(--accent);
  --dz-ease: cubic-bezier(.2, .7, .2, 1);
}






/* ---------- Shared control language (my views only) ---------- */
:is(#discover-view, #detail-view, #pair-catalog, #pair-token) :is(button, a, input):focus-visible {
  outline: none; box-shadow: var(--dz-ring);
}
@media (prefers-reduced-motion: no-preference) {
  :is(#discover-view, #detail-view) :is(.card-chips button, .explore-views button, .explorer-tabs button,
    .chart-frames button, .trade-chips button, .trade-tabs button, .pagination button, .mint-chip) {
    transition: background-color .16s var(--dz-ease), border-color .16s var(--dz-ease), color .16s var(--dz-ease),
      box-shadow .16s var(--dz-ease), transform .16s var(--dz-ease);
  }
  :is(#discover-view, #detail-view) :is(.card-chips button, .trade-chips button, .pagination button):active:not(:disabled) {
    transform: scale(.97);
  }
}

/* ---------- Explore head ---------- */
#discover-view .explore-head h1 { font-weight: 760; letter-spacing: -1.4px; }
#discover-view .explore-head .subtitle { font-size: 15px; color: #a3a3ab; }

/* Tokens / Discover switch: quiet segmented control instead of a solid orange pill. */
#discover-view .explore-views { padding: 4px; gap: 2px; border-color: var(--dz-line); background: #0f0f10; box-shadow: inset 0 1px 0 #ffffff08; }
#discover-view .explore-views button { min-height: 36px; padding: 0 18px; color: #9d9da6; font-weight: 600; }
#discover-view .explore-views button:hover:not([aria-selected=true]) { color: var(--ink); background: var(--dz-hover); }
#discover-view .explore-views button[aria-selected=true] {
  background: var(--dz-sel-bg); color: var(--dz-sel-ink); box-shadow: inset 0 0 0 1px var(--dz-sel-ring);
}

/* ---------- Filter chips ---------- */
#discover-view .card-chips button {
  display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 14px;
  border-color: var(--dz-line); background: var(--dz-surface); color: #a8a8b0; font-weight: 560;
}
#discover-view .card-chips button .ic { opacity: .9; }
#discover-view .card-chips button:hover:not([aria-pressed=true]) { color: var(--ink); border-color: var(--dz-line-strong); background: var(--dz-hover); }
#discover-view .card-chips button[aria-pressed=true] {
  background: var(--dz-sel-bg); border-color: var(--dz-sel-ring); color: var(--dz-sel-ink);
}
#discover-view .chip-count { font-variant-numeric: tabular-nums; }

/* Search: same height and surface as the chips. */
#discover-view :is(.card-search, .search) { border-color: var(--dz-line); background: var(--dz-surface); }
#discover-view :is(.card-search, .search):focus-within { border-color: var(--dz-sel-ring); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
#discover-view :is(.card-search, .search) input:focus-visible { box-shadow: none; }
#discover-view .cards-status { color: #8e8e97; letter-spacing: .1px; }

/* ---------- Token cards ---------- */
#discover-view .card-grid { gap: 14px; }
#discover-view .tcard {
  border-radius: var(--radius); border-color: var(--dz-line); background: linear-gradient(180deg, #161617, #121213);
  box-shadow: 0 1px 0 #ffffff06 inset;
}
@media (prefers-reduced-motion: no-preference) {
  #discover-view .tcard { transition: transform .22s var(--dz-ease), border-color .22s var(--dz-ease), box-shadow .22s var(--dz-ease); }
  /* A calm lift; the old tilt read as a gimmick next to market data. */
  #discover-view .tcard:hover,
  #discover-view .tcard:has(.tcard-link:focus-visible) { transform: translateY(-3px); }
}
#discover-view .tcard:hover { border-color: color-mix(in srgb, var(--card-accent) 55%, var(--dz-line)); box-shadow: 0 18px 40px -22px var(--card-accent); }
#discover-view .tcard:has(.tcard-link:focus-visible) { box-shadow: var(--dz-ring); }
#discover-view .tcard-link:focus-visible { box-shadow: none; }
#discover-view .tcard-art { border-bottom: 1px solid #ffffff0d; }
/* Fix: icons.css `.with-ic{position:relative}` loads later and pulled the badge into the art's grid flow, pushing
   the card body down on graduated / almost-there cards. Pin it back to the art's top-left corner. */
#discover-view .tcard-art > .tcard-badge { position: absolute; top: 10px; left: 10px; z-index: 1; }
#discover-view .tcard-badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border: 1px solid #ffffff1f;
  background: #0b0b0cd9; font-size: 11px; font-weight: 650; letter-spacing: .15px;
}
#discover-view .tcard[data-stage=graduated] .tcard-badge { color: #ffd98a; border-color: #ffd76a40; }
#discover-view .tcard-name { font-weight: 680; letter-spacing: -.15px; }
#discover-view .tcard-sym { color: #8e8e97; font-weight: 550; letter-spacing: .3px; }
#discover-view .tcard-cap span { color: #8e8e97; font-size: 12px; }
#discover-view .tcard-cap b { font-variant-numeric: tabular-nums; letter-spacing: -.4px; }
#discover-view .tcard-bar { height: 6px; background: #232325; box-shadow: inset 0 0 0 1px #ffffff08; }
#discover-view .tcard-bar-label,
#discover-view .tcard-foot { color: #8e8e97; font-size: 12px; font-variant-numeric: tabular-nums; }
#discover-view .tcard-foot .ic { opacity: .85; }
#discover-view .tcard-info { border-color: #ffffff26; background: #0b0b0ccc; }
#discover-view .tcard-info:hover { background: #1b1b1d; }

/* Load more / empty state */
#discover-view .cards-more :is(button, .button) { min-height: 40px; padding: 0 22px; border-radius: 999px; }
#discover-view .cards-empty h2 { letter-spacing: -.2px; }

/* ---------- Discover table ---------- */
#explore-discover .explorer-tabs { border-color: var(--dz-line); background: #0f0f10; gap: 2px; }
#explore-discover .explorer-tabs button { min-height: 36px; border: 1px solid transparent; color: #a3a3ab; font-weight: 580; }
#explore-discover .explorer-tabs button:hover:not([aria-pressed=true]) { color: var(--ink); background: var(--dz-hover); }
#explore-discover .explorer-tabs button[aria-pressed=true] { background: var(--dz-sel-bg); border-color: var(--dz-sel-ring); color: var(--dz-sel-ink); }
#explore-discover .market-wrap { border-color: var(--dz-line); background: #121213; }
#explore-discover #market-table th { background: #0f0f10; color: #8e8e97; font-weight: 600; text-transform: none; }
#explore-discover #market-table th button:hover { color: var(--ink); }
#explore-discover #market-table td { font-variant-numeric: tabular-nums; }
#explore-discover .token-row:hover { background: #18181a; }
#explore-discover .pagination button { min-height: 38px; border-color: var(--dz-line); background: var(--dz-surface); }
#explore-discover .pagination button:hover:not(:disabled) { border-color: var(--dz-line-strong); background: var(--dz-hover); }
#explore-discover .pagination button:disabled { opacity: .45; }

/* ---------- Token page ---------- */
#detail-view > .text-link { display: inline-flex; align-items: center; gap: 6px; color: #a3a3ab; font-weight: 550; }
#detail-view > .text-link:hover { color: var(--ink); }
#detail-view .th .th-back { width: 34px; height: 34px; border-radius: 10px; border-color: var(--dz-line); background: var(--dz-surface); }
#detail-view .th .th-back:hover { border-color: var(--dz-line-strong); background: var(--dz-hover); }
#detail-view .mint-chip { border-color: var(--dz-line); background: var(--dz-surface); }
#detail-view .mint-chip:hover { border-color: var(--dz-line-strong); background: var(--dz-hover); }
#detail-view .detail-facts > div { border-color: var(--dz-line); background: #111112; }
#detail-view .detail-facts .fact-value { font-variant-numeric: tabular-nums; }

/* Chart interval selector: same selected look as Explore. */
#detail-view .chart-frames { border-color: var(--dz-line); }
#detail-view .chart-frames button { color: #a3a3ab; font-weight: 600; }
#detail-view .chart-frames button:hover:not([aria-pressed=true]):not([aria-checked=true]) { color: var(--ink); background: var(--dz-hover); }
#detail-view .chart-frames :is([aria-pressed=true], [aria-checked=true], [aria-selected=true]) {
  background: var(--dz-sel-bg); color: var(--dz-sel-ink); box-shadow: inset 0 0 0 1px var(--dz-sel-ring);
}

/* Trade panel: keep green / red meaning, refine the finish. */
#detail-view .trade-tabs { border-color: var(--dz-line); background: #0f0f10; }
#detail-view .trade-tabs button { min-height: 40px; letter-spacing: .2px; }
#detail-view .trade-tabs button:hover:not([aria-selected=true]) { color: var(--ink); background: var(--dz-hover); }
#detail-view .trade-tabs [data-side=buy][aria-selected=true] { background: linear-gradient(180deg, #23784e, #1c6542); box-shadow: inset 0 1px 0 #ffffff1f; }
#detail-view .trade-tabs [data-side=sell][aria-selected=true] { background: linear-gradient(180deg, #8a2b3a, #72222f); box-shadow: inset 0 1px 0 #ffffff1a; }
#detail-view .trade-chips button { min-height: 40px; border-color: var(--dz-line); background: var(--dz-surface); font-variant-numeric: tabular-nums; }
#detail-view .trade-chips button:hover:not(:disabled) { border-color: var(--dz-line-strong); background: var(--dz-hover); }
#detail-view .trade-seg button { border-color: var(--dz-line); }
#detail-view .trade-seg [aria-checked=true] { background: var(--dz-sel-bg); border-color: var(--dz-sel-ring); color: var(--dz-sel-ink); }

/* Trades / Holders / About */
#detail-view .token-tabs [role=tab] { font-weight: 600; color: #a3a3ab; }
#detail-view .token-tabs [role=tab]:hover:not([aria-selected=true]) { color: var(--ink); }
#detail-view .token-tabs [role=tab][aria-selected=true] { color: var(--ink); }

/* Bonding strip */
#detail-view .bond-progress .bp-bar { background: #232325; box-shadow: inset 0 0 0 1px #ffffff08; }



/* ---------- Touch targets ---------- */
@media (max-width: 700px) {
  #discover-view :is(.card-chips button, .explore-views button, .explorer-tabs button),
  #explore-discover .pagination button,
  #detail-view :is(.chart-frames button, .trade-chips button, .trade-tabs button, .th-back) { min-height: 44px; }
  #detail-view .th .th-back { width: 44px; height: 44px; }
  #discover-view .card-grid { gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  #discover-view .tcard:hover, #discover-view .tcard:has(.tcard-link:focus-visible) { transform: none; }
}
/* Audit 2026-10-24: the start-up "data unavailable" notice carries one retry. */
/* It floats over the page bottom (a toast), so it arriving late never pushes the page down. */
#notice[data-kind=load-error]{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;position:fixed;z-index:70;left:50%;bottom:16px;transform:translateX(-50%);width:min(560px,calc(100vw - 32px));margin:0;border:1px solid #5a3a1c;border-left:2px solid var(--accent);border-radius:10px;box-shadow:0 8px 28px rgba(0,0,0,.55)}
#notice .notice-retry{color:var(--accent);font-weight:600;padding:0;text-decoration:underline;text-underline-offset:3px}
/* Design QA 2026-10-27 (D158 checklist): hit targets reach 40 px on phones. Compact token-page controls keep their
   look and get an invisible 40 px hit area (::after), so the D151 header height budget is unchanged. */
@media (max-width: 700px) {
  #detail-view .th .th-back { flex: none; }
  #detail-view .chart-frames button { min-width: 40px; }
  #detail-view :is(.th .mint-chip, .bp-help, .sheet-close, .trade-gear > summary, .chart-data summary) { position: relative; }
  #detail-view :is(.th > .th-more, .sheet-close)::after { content: ""; position: absolute; inset: -6px; }
  #detail-view .bp-help::after { content: ""; position: absolute; inset: -9px; }
  #detail-view :is(.th .mint-chip, .trade-gear > summary, .chart-data summary)::after { content: ""; position: absolute; inset: -9px 0; }
  .tt-tx::after { content: ""; position: absolute; inset: -13px; }
  td > a.mono.with-ic::after { content: ""; position: absolute; inset: -11px 0; }
}