/*
 * Explorer-only styles, in the Pickle editorial language.
 *
 * Everything shared with the other six sites lives in shared-ui
 * (tokens.css, base.css, components.css). This file covers only what the
 * explorer alone renders: the live bar, the timing rings, search, address and
 * token identity, and the NFT views. Flat surfaces, one hairline, 2px radius,
 * no glows - the ring arc lost its blur filter along with every other effect.
 *
 * Load order: tokens.css -> base.css -> components.css -> this file.
 */

/* ================================================================= live bar
 * Sticky directly under the navigation bar; offset is the sum of the two
 * bar-height tokens, never a hand-counted pixel value.
 */

.ex-livebar {
  position: sticky;
  top: var(--banx-nav-h);
  z-index: var(--banx-z-bar);
  display: flex;
  gap: var(--banx-space-5);
  align-items: center;
  height: 3.75rem;
  padding-inline: max(var(--banx-gutter), calc((100vw - var(--banx-content)) / 2));
  overflow-x: auto;
  overflow-y: hidden;
  background: var(--banx-bg-deep);
  border-bottom: 1px solid var(--banx-line);
  scrollbar-width: none;
}

.ex-livebar::-webkit-scrollbar { height: 0; }
/* The nav is one row now, so the live bar sits directly under it. */
.ex-nav.stack ~ .ex-livebar { top: var(--banx-nav-h); }

.ex-live-item { flex: 0 0 auto; }

.ex-live-item small {
  display: block;
  color: var(--banx-subtle);
  font-family: var(--banx-font-mono);
  font-size: .6rem;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.ex-live-item b {
  color: var(--banx-accent-text);
  font-family: var(--banx-font-mono);
  font-size: var(--banx-text-sm);
  font-weight: 500;
}

.ex-live-on {
  display: flex;
  gap: 8px;
  align-items: center;
  flex: 0 0 auto;
  margin-left: auto;
  padding-left: var(--banx-space-4);
  color: var(--banx-accent-text);
  font-family: var(--banx-font-mono);
  font-size: var(--banx-text-2xs);
  letter-spacing: .13em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ============================================================ timing rings */

.ex-circle-card {
  display: flex;
  flex-direction: column;
  gap: var(--banx-space-3);
  align-items: center;
  justify-content: center;
  padding: var(--banx-space-5) var(--banx-space-4);
  text-align: center;
}

.ex-circle-card p { color: var(--banx-muted); font-size: var(--banx-text-sm); }

.ex-ring {
  position: relative;
  width: 9.5rem;
  height: 9.5rem;
}

.ex-ring.sm { flex: 0 0 auto; width: 2.5rem; height: 2.5rem; }
.ex-ring.sm .arc, .ex-ring.sm .track { stroke-width: 9; }

.ex-ring svg { display: block; width: 100%; height: 100%; }
.ex-ring .track { fill: none; stroke: var(--banx-line); stroke-width: 5; }

/* Flat arc at the real cadence - the motion carries the information, so it
 * needs no glow to be noticed. */
.ex-ring .arc {
  fill: none;
  stroke: var(--banx-mint);
  stroke-width: 5;
  stroke-linecap: butt;
  stroke-dasharray: 339.292;
  stroke-dashoffset: 339.292;
  animation: ex-tick 1s linear infinite;
}

.ex-ring .arc.evm { animation-duration: 250ms; }
.ex-ring .arc.mini { animation-duration: 220ms; }

@keyframes ex-tick {
  from { stroke-dashoffset: 339.292; }
  to { stroke-dashoffset: 0; }
}

.ex-ring-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.ex-ring-inner strong {
  color: var(--banx-text);
  font-family: var(--banx-font-display);
  font-size: var(--banx-text-2xl);
  font-weight: 600;
  letter-spacing: -.02em;
}

.ex-ring-inner small {
  margin-top: 2px;
  color: var(--banx-subtle);
  font-family: var(--banx-font-mono);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.ex-chart-card { padding: var(--banx-space-5); }
.ex-chart-card canvas { display: block; width: 100%; height: 10.5rem; }

/* ============================================================ block cadence
 * The production-time panel on the Blocks and Mini-blocks pages.
 */

.ex-cadence {
  margin-bottom: var(--banx-space-4);
  padding: var(--banx-space-5);
  background: var(--banx-surface-1);
  border: 1px solid var(--banx-line);
  border-radius: var(--banx-radius);
}

.ex-cadence-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--banx-space-4);
  margin-bottom: var(--banx-space-4);
}

.ex-cadence-head .ex-kicker { margin-bottom: 10px; }

.ex-cadence-head h3 {
  font-family: var(--banx-font-display);
  font-size: var(--banx-text-xl);
  font-weight: 600;
  letter-spacing: var(--banx-tracking-tight);
}

.ex-cadence canvas {
  display: block;
  width: 100%;
  height: 11rem;
}

.ex-cadence-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--banx-space-4);
  margin-top: var(--banx-space-4);
  padding-top: var(--banx-space-4);
  border-top: 1px solid var(--banx-line);
}

.ex-cadence-stats span {
  display: block;
  color: var(--banx-subtle);
  font-family: var(--banx-font-mono);
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.ex-cadence-stats b {
  display: block;
  margin-top: 4px;
  color: var(--banx-text);
  font-family: var(--banx-font-mono);
  font-size: var(--banx-text-md);
  font-weight: 500;
}

.ex-cadence-stats b.p { color: var(--banx-accent-text); }

@media (max-width: 659px) {
  .ex-cadence-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ex-cadence canvas { height: 9rem; }
}

/* ==================================================================== search */

.ex-search {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 44rem;
  margin: 0 auto var(--banx-space-6);
  overflow: hidden;
  background: var(--banx-surface-input);
  border: 1px solid var(--banx-line);
  border-radius: var(--banx-radius);
  transition: border-color var(--banx-fast) var(--banx-ease);
}

.ex-search:focus-within { border-color: var(--banx-mint); }

.ex-search input {
  flex: 1;
  min-width: 0;
  padding: var(--banx-space-3) var(--banx-space-4);
  color: var(--banx-text);
  font: inherit;
  font-family: var(--banx-font-mono);
  font-size: var(--banx-text-sm);
  background: transparent;
  border: 0;
  outline: none;
}

.ex-search button {
  flex: 0 0 auto;
  min-width: var(--banx-tap);
  min-height: var(--banx-tap);
  padding-inline: var(--banx-space-4);
  color: var(--banx-muted);
  font-size: var(--banx-text-lg);
  cursor: pointer;
  background: transparent;
  border: 0;
}

.ex-search button:hover { color: var(--banx-accent-text); }

/* ====================================================== address / token head */

.ex-addr.contract .ex-panel,
.ex-addr.token .ex-panel,
.ex-addr.nft .ex-panel { border-color: var(--banx-line); }

.ex-addrhead {
  display: flex;
  flex-wrap: wrap;
  gap: var(--banx-space-4);
  align-items: center;
  margin: 0 0 var(--banx-space-5);
}

.ex-addrhead-main { flex: 1; min-width: 0; }

.ex-addrline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--banx-space-2);
  align-items: center;
  min-width: 0;
}

.ex-addrline .mono {
  color: var(--banx-text);
  font-size: var(--banx-text-sm);
  overflow-wrap: anywhere;
}

.ex-kind { font-family: var(--banx-font-display); font-size: var(--banx-text-md); font-weight: 600; }

.ex-addrline .ex-token-id .ex-kind,
.ex-addrline .ex-token-id b,
.ex-addrline .ex-token-id .ex-token-name { font-size: var(--banx-text-md); }

.ex-desc {
  max-width: 58rem;
  margin: var(--banx-space-2) 0 var(--banx-space-5);
  color: var(--banx-muted);
  line-height: 1.65;
}

/* ======================================================= token / NFT identity */

.ex-logo {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  object-fit: cover;
  background: var(--banx-surface-3);
  border: 1px solid var(--banx-line);
  border-radius: var(--banx-radius);
}

.ex-logo.lg { width: 3rem; height: 3rem; }

.ex-logo.ph {
  display: inline-block;
  background: var(--banx-surface-3);
}

.ex-token-cell { display: flex; gap: var(--banx-space-3); align-items: center; }

.ex-token-cell > div {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.ex-token-cell small { color: var(--banx-muted); font-size: var(--banx-text-xs); font-weight: 400; }

.ex-token-id {
  display: inline-flex;
  gap: var(--banx-space-2);
  align-items: center;
  min-width: 0;
  line-height: 1.25;
}

.ex-token-id b,
.ex-token-id .ex-kind,
.ex-token-name {
  overflow: hidden;
  color: inherit;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ex-token-name:hover { color: var(--banx-accent-text); }

.ex-tick {
  display: inline-flex;
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  color: var(--banx-accent-text);
  vertical-align: middle;
}

.ex-tick svg { display: block; width: 100%; height: 100%; }

/* =================================================================== traits */

.ex-attrs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr));
  gap: 1px;
  padding: 0;
  margin-top: var(--banx-space-3);
  background: var(--banx-line);
  border: 1px solid var(--banx-line);
  border-radius: var(--banx-radius);
  overflow: hidden;
}

.ex-attr {
  padding: var(--banx-space-3);
  background: var(--banx-surface-1);
}

.ex-attr small {
  display: block;
  color: var(--banx-subtle);
  font-family: var(--banx-font-mono);
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.ex-attr b { font-size: var(--banx-text-sm); font-weight: 500; }

/* ====================================================================== NFTs */

.ex-nft-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 10.5rem), 1fr));
  gap: var(--banx-space-3);
}

.ex-nft-card {
  display: block;
  overflow: hidden;
  color: inherit;
  background: var(--banx-surface-1);
  border: 1px solid var(--banx-line);
  border-radius: var(--banx-radius);
  transition: border-color var(--banx-fast) var(--banx-ease);
}

.ex-nft-card:hover { color: inherit; border-color: var(--banx-mint-line); }

.ex-nft-img,
.ex-nft-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  background: var(--banx-bg-deep);
}

.ex-nft-img img,
.ex-nft-hero img { width: 100%; height: 100%; object-fit: cover; }

.ex-nft-ph { color: var(--banx-faint); font-family: var(--banx-font-mono); font-weight: 500; }

.ex-nft-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--banx-space-3);
  font-size: var(--banx-text-sm);
}

.ex-nft-meta > span { color: var(--banx-muted); }
.ex-nft-card:not(:has(.ex-nft-img)) .ex-nft-meta { padding-top: var(--banx-space-4); }

.ex-nft-detail {
  display: grid;
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  gap: var(--banx-space-5);
  align-items: start;
  margin-bottom: var(--banx-space-5);
}

.ex-nft-detail.text-only { grid-template-columns: minmax(0, 1fr); }

.ex-nft-hero {
  overflow: hidden;
  border: 1px solid var(--banx-line);
  border-radius: var(--banx-radius);
}

.ex-meta { display: grid; gap: var(--banx-space-3); }
.ex-meta h3 { margin: 0; }

/* ============================================================ mini-block chips */

.ex-minis {
  display: flex;
  flex-wrap: wrap;
  gap: var(--banx-space-2);
  padding: var(--banx-space-3) 0 0;
}

.ex-mini-chip {
  display: inline-flex;
  gap: var(--banx-space-2);
  align-items: center;
  padding: 5px 10px;
  color: var(--banx-text);
  font-family: var(--banx-font-mono);
  font-size: var(--banx-text-2xs);
  background: transparent;
  border: 1px solid var(--banx-line);
  border-radius: var(--banx-radius);
}

.ex-mini-chip:hover { color: var(--banx-accent-text); border-color: var(--banx-mint-line); }
.ex-mini-chip .n { color: var(--banx-accent-text); font-weight: 500; }

/* =============================================================== responsive */

@media (max-width: 1023px) {
  .ex-nft-detail { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
  .ex-livebar { gap: var(--banx-space-4); }
  .ex-ring { width: 8rem; height: 8rem; }
  .ex-live-item:nth-of-type(n + 6) { display: none; }
}

@media (max-width: 420px) {
  .ex-livebar .ex-ring { display: none; }
  .ex-live-item:nth-of-type(n + 4) { display: none; }
}