/*
 * 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, motion.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 class names are load-bearing: motion.css animates .ex-livebar,
 * .ex-nft-card and friends BY NAME, and components.css spaces .ex-nft-grid
 * the same way. Renaming a local class here silently opts the explorer out
 * of the estate's entrances and hovers - the exact trap pepper's Layout
 * docblock names. So existing pieces keep their ex-* names verbatim, and
 * only genuinely NEW pieces (the footer plate, the pager) take the exp-*
 * prefix. New keyframes are exp-* too: keyframe names are global, and this
 * file once shadowed the estate's flash lift with a same-named keyframe.
 *
 * Load order: tokens.css -> base.css -> components.css -> motion.css -> this.
 */

/* ================================================================= live bar
 * Sticky directly under the navigation bar. Height is the bar token, never a
 * hand-counted value; figures are white because the accent points at things,
 * it is never the ground. Ruled segments between items, as on pepper.
 */

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

.ex-livebar::-webkit-scrollbar { height: 0; }

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

/* A hairline between items, not before the ring (the ring is not an
 * .ex-live-item, so the sibling selector skips it by construction). */
.ex-live-item + .ex-live-item {
  border-left: 1px solid var(--pickle-line);
  padding-left: var(--pickle-space-5);
}

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

/* White, and tabular. Seven mint numerals in a strip under a mint pill made the
 * accent the GROUND of the bar rather than its mark; the contract paints figures
 * white and keeps mint for the one thing being pointed at. Tabular digits so a
 * block number that ticks every 250ms does not shove its neighbours sideways. */
.ex-live-item b {
  color: var(--pickle-text);
  font-family: var(--pickle-font-mono);
  font-size: var(--pickle-text-sm);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

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

/* The dot goes idle with the feed: an unreachable indexer must not keep a
 * confident mint dot. Colour is not the only signal - the wording changes. */
.ex-live-on.off { color: var(--pickle-muted); }
.ex-live-on.off .ex-dot { background: var(--pickle-muted); animation: none; }

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

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

.ex-circle-card p { color: var(--pickle-muted); font-size: var(--pickle-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(--pickle-line); stroke-width: 5; }

/* Flat arc at the real cadence - the motion carries the information, so it
 * needs no glow to be noticed. JS overrides the sweep with the measured
 * cadence through the --sweep custom property, the estate's CSP-safe pattern
 * (see .ex-gauge's --fill); the class values are the scheduling-target
 * fallbacks for before the first measurement lands. */
.ex-ring .arc {
  fill: none;
  stroke: var(--pickle-mint);
  stroke-width: 5;
  stroke-linecap: butt;
  stroke-dasharray: 339.292;
  stroke-dashoffset: 339.292;
  animation: exp-arc-sweep 1s linear infinite;
  animation-duration: var(--sweep, 1s);
}

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

/* Named for what it is, with the app prefix: keyframe names are global, and a
 * shared name once silently replaced the estate's 4px flash lift. */
@keyframes exp-arc-sweep {
  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(--pickle-text);
  font-family: var(--pickle-font-display);
  font-size: var(--pickle-text-2xl);
  font-weight: 600;
  letter-spacing: -.02em;
}

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

.ex-chart-card { padding: var(--pickle-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(--pickle-space-4);
  padding: var(--pickle-space-5);
  background: var(--pickle-surface-1);
  border: 1px solid var(--pickle-line);
  border-radius: var(--pickle-radius);
}

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

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

.ex-cadence-head h3 {
  font-family: var(--pickle-font-display);
  font-size: var(--pickle-text-xl);
  font-weight: 600;
  letter-spacing: var(--pickle-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(--pickle-space-4);
  margin-top: var(--pickle-space-4);
  padding-top: var(--pickle-space-4);
  border-top: 1px solid var(--pickle-line);
}

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

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

.ex-cadence-stats b.p { color: var(--pickle-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(--pickle-space-6);
  overflow: hidden;
  background: var(--pickle-surface-input);
  border: 1px solid var(--pickle-line);
  border-radius: var(--pickle-radius);
  transition: border-color var(--pickle-fast) var(--pickle-ease);
}

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

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

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

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

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

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

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

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

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

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

.ex-kind { font-family: var(--pickle-font-display); font-size: var(--pickle-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(--pickle-text-md); }

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

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

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

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

.ex-token-cell { display: flex; gap: var(--pickle-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(--pickle-muted); font-size: var(--pickle-text-xs); font-weight: 400; }

.ex-token-id {
  display: inline-flex;
  gap: var(--pickle-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(--pickle-accent-text); }

/* The verified mark in the site's accent, never a foreign brand blue. */
.ex-tick {
  display: inline-flex;
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  color: var(--pickle-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(--pickle-space-3);
  background: var(--pickle-line);
  border: 1px solid var(--pickle-line);
  border-radius: var(--pickle-radius);
  /* clip, never hidden: hidden makes a scroll container and the arrival timelines
   * on the cells inside resolve against it and never run. See .ex-cells. */
  overflow: clip;
}

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

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

.ex-attr b { font-size: var(--pickle-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(--pickle-space-3);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ==================================================================== pager
 * New with the Next rebuild: every list page can walk the whole index now,
 * not just its newest fixed page. Estate buttons carry the action; this class
 * only lays the row out.
 */

.exp-pager {
  display: flex;
  gap: var(--pickle-space-3);
  align-items: center;
  justify-content: space-between;
  margin-top: var(--pickle-space-4);
}

.exp-pager .ex-more {
  color: var(--pickle-subtle);
  font-family: var(--pickle-font-mono);
  font-size: var(--pickle-text-2xs);
  letter-spacing: .13em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

.exp-pager div { display: flex; gap: var(--pickle-space-2); }

/* ============================================================== footer plate
 * Adapted from pepper's .pep-plate: honest prose on the left, the chain facts
 * as a mono <dl> on the right. Values keep their case - an uppercased hex
 * address reads as a typo.
 */

.exp-plate {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
  gap: var(--pickle-space-6);
  align-items: start;
  padding-top: var(--pickle-space-5);
}

.exp-plate dl {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px 14px;
  margin: 0;
  font-family: var(--pickle-font-mono);
  font-size: var(--pickle-text-2xs);
  letter-spacing: var(--pickle-tracking-caps);
  text-transform: uppercase;
}

.exp-plate dt { color: var(--pickle-subtle); }

.exp-plate dd {
  margin: 0;
  color: var(--pickle-text);
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  overflow-wrap: anywhere;
  text-transform: none;
}

@media (max-width: 767px) {
  .exp-plate { grid-template-columns: minmax(0, 1fr); }
}

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

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

/* The live bar drops its least urgent figures as the viewport narrows, and the
 * count in these selectors is deliberately one higher than the number of
 * figures kept: `nth-of-type` counts siblings of the same ELEMENT, and the
 * leading ring is a div like every figure, so it occupies slot 1. Written as
 * the plain count it hid one figure too many - which is what the pre-React
 * bar did, quietly showing two readings on a phone where it meant to show
 * three. Index lag sits last in the markup, so it is the first to go. */
@media (max-width: 767px) {
  .ex-livebar { gap: var(--pickle-space-4); }
  .ex-ring { width: 8rem; height: 8rem; }
  .ex-live-item:nth-of-type(n + 7) { display: none; }   /* keeps five */
}

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

/* ===================================================================== money
 * Dollars first, the native amount beside them in the mono face and a step
 * down in weight. `.stack` puts the two on separate lines, for table cells
 * where a single line would force the column wide.
 */

.exp-money { display: inline-flex; flex-wrap: wrap; gap: 0 var(--pickle-space-2); align-items: baseline; }
.exp-money.stack { flex-direction: column; gap: 1px; align-items: flex-start; }
.ex-table td.num .exp-money.stack { align-items: flex-end; }
.exp-usd { color: var(--pickle-text); font-variant-numeric: tabular-nums; font-weight: 500; white-space: nowrap; }
.exp-native {
  color: var(--pickle-muted);
  font-family: var(--pickle-font-mono);
  font-size: var(--pickle-text-xs);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.exp-big { font-family: var(--pickle-font-display); font-size: var(--pickle-text-lg); font-weight: 600; }

/* .ex-dl's label rule is `.ex-dl span`, and it reaches every span inside a
 * value as well as the label beside it: a dollar figure in a detail row came
 * out as a small uppercase caption. These put the value pieces back. */
.ex-dl b .exp-money,
.ex-dl b .exp-usd,
.ex-dl b .exp-muted,
.ex-dl b .exp-hash,
.ex-dl b .exp-token-inline {
  padding-top: 0;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  letter-spacing: normal;
  text-transform: none;
}
.ex-dl b .exp-usd { color: var(--pickle-text); }
.ex-dl b .exp-muted { color: var(--pickle-muted); }
.ex-dl b .exp-native,
.ex-dl b .exp-sig {
  padding-top: 0;
  color: var(--pickle-muted);
  font-family: var(--pickle-font-mono);
  font-size: var(--pickle-text-xs);
  letter-spacing: normal;
  text-transform: none;
}
.ex-dl b .exp-chip,
.ex-dl b .exp-status { padding-top: 2px; letter-spacing: normal; text-transform: none; }

/* ============================================================ section heads
 * The numbered head a page section opens with - Status, the front page's
 * Cadence, Fee sharing - written as <div class="ex-secrow"> around an
 * .ex-kicker and, optionally, an .ex-more aside on the right.
 *
 * components.css spaces .ex-secrow for the marketing page: 32px under it,
 * nothing above, and the kicker's own 22px on top of that. On an app page that
 * put a section's label nearer the panel ABOVE it than the one it names. Here
 * the head sits a step-7 away from what came before and a step-4 above its
 * own content. Block margins collapse, so the gap between sections is the
 * same whether the block above ends in an .ex-stats (32px margin) or an
 * .ex-panel (none), and an .ex-stack-top on the row is simply outranked.
 */

.ex-wrap .ex-secrow {
  gap: var(--pickle-space-2) var(--pickle-space-4);
  margin: var(--pickle-space-7) 0 var(--pickle-space-4);
}

.ex-secrow .ex-kicker { margin: 0; }

@media (max-width: 767px) {
  .ex-wrap .ex-secrow { margin-top: var(--pickle-space-6); }
}

/* A head's aside is .ex-more, which never wraps - right for a count, wrong for
 * a sentence. The Tokens page's "Prices from Pepper pools x the on-chain
 * ETH/USD feed" was 42px wider than a phone, and the whole page scrolled
 * sideways by that much. On a narrow screen an aside is allowed to break. */
@media (max-width: 767px) {
  .ex-pagehead > .ex-more,
  .ex-secrow > .ex-more { white-space: normal; }
}

/* A footnote straight under the page head (Tokens, NFTs) belongs to the head:
 * it had the component's 18px on top and nothing underneath, so it sat far
 * from the title it qualifies and flush against the table it does not. */
.ex-pagehead + .ex-footnote {
  max-width: 88ch;
  margin: calc(var(--pickle-space-2) * -1) 0 var(--pickle-space-5);
}

/* Under a panel or a table it is the panel's caption, a small step below it. */
.ex-panel + .ex-footnote { margin-top: var(--pickle-space-3); }
.ex-footnote + .ex-footnote { margin-top: var(--pickle-space-2); }

/* ===================================================================== tiles
 * .ex-sub is the quieter line under a figure in an .ex-stat - the native
 * amount under the dollars, a count, a destination - in the mono face, case
 * kept. It has to outrank `.ex-stat span`, which paints every span in a tile
 * as its uppercase label; before this rule existed the class was asked for
 * and styled nowhere, which is how the fee page's captions ended up as
 * uppercase labels in tiles and as body text glued to headings outside them.
 */

.ex-sub,
.ex-stat .ex-sub {
  color: var(--pickle-muted);
  font-family: var(--pickle-font-mono);
  font-size: var(--pickle-text-2xs);
  font-weight: 400;
  letter-spacing: .02em;
  line-height: 1.5;
  text-transform: none;
  overflow-wrap: anywhere;
}

.ex-stat .ex-sub + .ex-sub { margin-top: calc(var(--pickle-space-1) * -1); }
.ex-sub a { color: var(--pickle-muted); }
.ex-sub a:hover { color: var(--pickle-accent-text); }

/* The tile that sums the row takes the whole first line once the grid is down
 * to two columns, so five tiles read 1 + 2 + 2 rather than 2 + 2 + an orphan. */
@media (max-width: 767px) {
  .ex-stats > .ex-stat.lead { grid-column: 1 / -1; }
}

/* ================================================================ utilities */

.exp-muted { color: var(--pickle-muted); }
a.exp-muted:hover { color: var(--pickle-accent-text); }
.exp-nowrap { white-space: nowrap; }
.exp-break { overflow-wrap: anywhere; }
.exp-hash { display: inline-flex; gap: var(--pickle-space-2); align-items: center; }
.exp-copyrow { display: inline-flex; flex-wrap: wrap; gap: var(--pickle-space-2); align-items: center; }
.exp-eyebrow {
  margin: 0 0 var(--pickle-space-1);
  color: var(--pickle-subtle);
  font-family: var(--pickle-font-mono);
  font-size: var(--pickle-text-2xs);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.exp-eyebrow a { color: var(--pickle-muted); }
.exp-eyebrow a:hover { color: var(--pickle-accent-text); }

.exp-chip {
  display: inline-flex;
  align-items: center;
  margin-left: var(--pickle-space-2);
  padding: 2px 8px;
  color: var(--pickle-muted);
  font-family: var(--pickle-font-mono);
  font-size: var(--pickle-text-2xs);
  white-space: nowrap;
  border: 1px solid var(--pickle-line);
  border-radius: var(--pickle-radius);
}
.exp-feed-side .exp-chip { margin-left: 0; }

.exp-titlerow {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pickle-space-3) var(--pickle-space-4);
  align-items: center;
  justify-content: space-between;
  margin: 0 0 var(--pickle-space-4);
}
.exp-title { margin: 0; font-size: var(--pickle-text-2xl); }
.exp-stepper { display: flex; gap: var(--pickle-space-2); }

.exp-status {
  display: inline-flex;
  gap: var(--pickle-space-2);
  align-items: center;
  padding: 3px 10px;
  font-family: var(--pickle-font-mono);
  font-size: var(--pickle-text-xs);
  border: 1px solid var(--pickle-line);
  border-radius: var(--pickle-radius);
}
.exp-status.ok { color: var(--pickle-accent-text); border-color: var(--pickle-mint-line); background: var(--pickle-mint-soft); }
.exp-status.bad { color: var(--pickle-rose); border-color: var(--pickle-rose-line); background: var(--pickle-rose-soft); }
.exp-status .ex-status { border: 0; }

.exp-warn {
  margin: var(--pickle-space-3) 0;
  padding: var(--pickle-space-3) var(--pickle-space-4);
  color: var(--pickle-amber);
  font-size: var(--pickle-text-sm);
  background: var(--pickle-amber-soft);
  border: 1px solid var(--pickle-amber-line);
  border-radius: var(--pickle-radius);
}

.exp-method {
  display: inline-block;
  max-width: 9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

/* One line per transaction: a wrapped hash or address makes a table of a
 * hundred rows impossible to scan, and .ex-scroll already lets it scroll. */
.exp-txtable td { white-space: nowrap; }
.exp-dircell { width: 1%; text-align: center; }
.exp-dir {
  display: inline-block;
  min-width: 2.6rem;
  padding: 2px 6px;
  font-family: var(--pickle-font-mono);
  font-size: .6rem;
  letter-spacing: .12em;
  text-align: center;
  text-transform: uppercase;
  border: 1px solid var(--pickle-line);
  border-radius: var(--pickle-radius);
}
.exp-dir.in { color: var(--pickle-accent-text); border-color: var(--pickle-mint-line); }
.exp-dir.out { color: var(--pickle-amber); border-color: var(--pickle-amber-line); }
.exp-dir.self { color: var(--pickle-muted); }

/* ==================================================================== search
 * The compact bar on every page, and the hero on the front page. The
 * suggestion list hangs under either and is the only floating surface the
 * explorer draws.
 */

.exp-search { position: relative; width: 100%; max-width: 44rem; margin: 0 auto var(--pickle-space-6); }
.exp-search .ex-search { max-width: none; margin: 0; }
.exp-search.hero { max-width: 48rem; margin: var(--pickle-space-5) 0 var(--pickle-space-3); }
.exp-search.hero .ex-search { background: var(--pickle-bg-deep); }
.exp-search.hero .ex-search input { padding: var(--pickle-space-4) var(--pickle-space-5); font-size: var(--pickle-text-base); }
.exp-search.hero .ex-search button {
  display: inline-flex;
  gap: var(--pickle-space-2);
  align-items: center;
  align-self: stretch;
  min-height: 3.25rem;
  padding-inline: var(--pickle-space-5);
  color: var(--pickle-mint-ink);
  font-family: var(--pickle-font-mono);
  font-size: var(--pickle-text-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  background: var(--pickle-mint);
}
.exp-search.hero .ex-search button:hover { color: var(--pickle-mint-ink); background: var(--pickle-mint-strong); }
/* The sprite glyph takes the accent by default, which on the accent button
 * is no glyph at all. */
.exp-search.hero .ex-search button .ex-ico { width: 1.1rem; height: 1.1rem; color: var(--pickle-mint-ink); }
.exp-search-label { line-height: 1; }

.exp-suggest {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  left: 0;
  z-index: var(--pickle-z-menu);
  max-height: 22rem;
  margin: 0;
  padding: var(--pickle-space-1) 0;
  overflow-y: auto;
  list-style: none;
  background: var(--pickle-surface-2);
  border: 1px solid var(--pickle-line);
  border-radius: var(--pickle-radius);
}
.exp-suggest button {
  display: flex;
  gap: var(--pickle-space-3);
  align-items: center;
  width: 100%;
  min-height: var(--pickle-tap);
  padding: var(--pickle-space-2) var(--pickle-space-4);
  color: var(--pickle-text);
  font: inherit;
  font-size: var(--pickle-text-sm);
  text-align: left;
  cursor: pointer;
  background: transparent;
  border: 0;
}
.exp-suggest button.on { background: var(--pickle-surface-hover); }
.exp-suggest .ex-logo { width: 1.5rem; height: 1.5rem; }
.exp-suggest-main { display: inline-flex; flex: 1; gap: var(--pickle-space-2); align-items: center; min-width: 0; }
.exp-suggest-main b { overflow: hidden; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.exp-suggest-side { color: var(--pickle-muted); font-family: var(--pickle-font-mono); font-size: var(--pickle-text-2xs); }
.exp-suggest-direct { color: var(--pickle-accent-text); font-family: var(--pickle-font-mono); font-size: var(--pickle-text-xs); overflow-wrap: anywhere; }

/* ================================================================ front page */

.exp-hero {
  margin: calc(var(--pickle-space-6) * -1) 0 var(--pickle-space-5);
  padding: var(--pickle-space-6) 0 var(--pickle-space-5);
  border-bottom: 1px solid var(--pickle-line);
}
.exp-hero .ex-h { margin-bottom: 0; }
.exp-hero-hint { margin: 0; color: var(--pickle-muted); font-size: var(--pickle-text-sm); }
.exp-hero-hint a { color: var(--pickle-text); }
.exp-hero-hint a:hover { color: var(--pickle-accent-text); }

.exp-board {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
  margin-bottom: var(--pickle-space-5);
  overflow: clip;
  background: var(--pickle-surface-1);
  border: 1px solid var(--pickle-line);
  border-radius: var(--pickle-radius);
}
.exp-board-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--pickle-line);
  border-right: 1px solid var(--pickle-line);
}
.exp-card {
  display: flex;
  flex-direction: column;
  gap: var(--pickle-space-1);
  min-width: 0;
  padding: var(--pickle-space-4) var(--pickle-space-5);
  background: var(--pickle-surface-1);
}
.exp-card-k {
  color: var(--pickle-subtle);
  font-family: var(--pickle-font-mono);
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.exp-card-v {
  overflow: hidden;
  color: var(--pickle-text);
  font-family: var(--pickle-font-display);
  font-size: var(--pickle-text-xl);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.exp-card-v a { color: inherit; }
.exp-card-v a:hover { color: var(--pickle-accent-text); }
.exp-card-sub {
  overflow: hidden;
  color: var(--pickle-muted);
  font-family: var(--pickle-font-mono);
  font-size: var(--pickle-text-2xs);
  font-style: normal;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.exp-card-sub a { color: var(--pickle-muted); }
.exp-card-sub a:hover { color: var(--pickle-accent-text); }
.exp-board-chart { display: flex; padding: var(--pickle-space-4) var(--pickle-space-5); }

.exp-history { display: flex; flex: 1; flex-direction: column; gap: var(--pickle-space-2); min-width: 0; }
.exp-history-head { display: flex; gap: var(--pickle-space-3); align-items: baseline; justify-content: space-between; }
.exp-history-head span {
  color: var(--pickle-subtle);
  font-family: var(--pickle-font-mono);
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.exp-history-head b { font-family: var(--pickle-font-display); font-size: var(--pickle-text-lg); font-weight: 600; }
.exp-history-svg { display: block; width: 100%; height: 7.5rem; }
.exp-history-bar { fill: var(--pickle-mint); fill-opacity: .55; }
.exp-history-bar.today { fill-opacity: 1; }
.exp-history-bar:hover { fill-opacity: 1; }
.exp-history-rule { stroke: var(--pickle-line); stroke-width: 1; }
.exp-history-axis {
  display: flex;
  justify-content: space-between;
  color: var(--pickle-subtle);
  font-family: var(--pickle-font-mono);
  font-size: .6rem;
  letter-spacing: .08em;
}
.exp-history-empty { margin: auto 0; font-size: var(--pickle-text-sm); }

.exp-latest { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pickle-space-4); }
.exp-feed-panel { display: flex; flex-direction: column; padding: var(--pickle-space-5) var(--pickle-space-5) 0; }
.exp-feed-panel .ex-list-head { margin-bottom: 0; padding-bottom: var(--pickle-space-3); border-bottom: 1px solid var(--pickle-line); }
.exp-feed { flex: 1; margin: 0; padding: 0; list-style: none; }
.exp-feed-row {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) minmax(0, 1.5fr) auto;
  gap: var(--pickle-space-3);
  align-items: center;
  min-height: 4.1rem;
  padding: var(--pickle-space-3) 0;
  border-bottom: 1px solid var(--pickle-line);
}
.exp-feed-row:last-child { border-bottom: 0; }
.exp-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--pickle-muted);
  font-family: var(--pickle-font-mono);
  font-size: var(--pickle-text-xs);
  background: var(--pickle-surface-3);
  border-radius: var(--pickle-radius);
}
.exp-tile.bad { color: var(--pickle-rose); background: var(--pickle-rose-soft); }
.exp-feed-main,
.exp-feed-mid { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: var(--pickle-text-sm); }
.exp-feed-main > a { font-weight: 500; }
.exp-feed-main .exp-muted,
.exp-feed-mid .exp-muted { font-size: var(--pickle-text-xs); }
.exp-feed-mid > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.exp-feed-side { display: flex; justify-content: flex-end; text-align: right; }
.exp-feed-side .exp-money.stack { align-items: flex-end; }
.exp-fromto .ex-badge-link { vertical-align: middle; }
.exp-feed-all {
  display: block;
  margin: 0 calc(var(--pickle-space-5) * -1);
  padding: var(--pickle-space-3);
  color: var(--pickle-muted);
  font-family: var(--pickle-font-mono);
  font-size: var(--pickle-text-2xs);
  letter-spacing: .13em;
  text-align: center;
  text-transform: uppercase;
  background: var(--pickle-bg-deep);
  border-top: 1px solid var(--pickle-line);
}
.exp-feed-all:hover { color: var(--pickle-accent-text); }
.exp-feed .ex-skel { width: 60%; }

/* ======================================================= transaction page */

.exp-sig { margin-left: var(--pickle-space-2); font-size: var(--pickle-text-xs); overflow-wrap: anywhere; }
.exp-sig-line { margin: 0 0 var(--pickle-space-3); color: var(--pickle-muted); font-size: var(--pickle-text-xs); overflow-wrap: anywhere; }
.exp-xfers { margin: 0; padding: 0; list-style: none; }
.exp-xfers li {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pickle-space-1) var(--pickle-space-2);
  align-items: center;
  padding: var(--pickle-space-3) 0;
  font-size: var(--pickle-text-sm);
  border-bottom: 1px solid var(--pickle-line);
}
.exp-xfers li:last-child { border-bottom: 0; }
.exp-xfers.nft li { flex-wrap: nowrap; gap: var(--pickle-space-3); }
.exp-token-inline { display: inline-flex; gap: var(--pickle-space-2); align-items: center; }
.exp-token-inline .ex-logo { width: 1.25rem; height: 1.25rem; }

.exp-thumb {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  overflow: hidden;
  background: var(--pickle-bg-deep);
  border: 1px solid var(--pickle-line);
  border-radius: var(--pickle-radius);
}
.exp-thumb.sm { width: 2.25rem; height: 2.25rem; }
.exp-thumb img { width: 100%; height: 100%; object-fit: cover; }
.exp-thumb .exp-nft-ph span { font-size: .55rem; }
.exp-nft-inline { display: inline-flex; gap: var(--pickle-space-3); align-items: center; }

.exp-toggle {
  display: inline-flex;
  margin: 0 0 var(--pickle-space-3);
  border: 1px solid var(--pickle-line);
  border-radius: var(--pickle-radius);
}
.exp-toggle button {
  min-height: 2rem;
  padding: 0 var(--pickle-space-3);
  color: var(--pickle-muted);
  font-family: var(--pickle-font-mono);
  font-size: var(--pickle-text-2xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  background: transparent;
  border: 0;
}
.exp-toggle button + button { border-left: 1px solid var(--pickle-line); }
.exp-toggle button.on { color: var(--pickle-mint-ink); background: var(--pickle-mint); }
.exp-params td { vertical-align: top; }

.exp-logs { display: grid; gap: var(--pickle-space-3); }
.exp-log { padding: var(--pickle-space-5); }
.exp-log-head { display: flex; gap: var(--pickle-space-4); align-items: flex-start; margin-bottom: var(--pickle-space-3); }
.exp-log-head > div { min-width: 0; }
.exp-log-head p { margin: 0 0 var(--pickle-space-1); font-size: var(--pickle-text-sm); overflow-wrap: anywhere; }
.exp-log-n {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  color: var(--pickle-accent-text);
  font-family: var(--pickle-font-mono);
  font-size: var(--pickle-text-xs);
  border: 1px solid var(--pickle-mint-line);
  border-radius: var(--pickle-radius);
}
.exp-event { color: var(--pickle-text); font-weight: 600; }
.exp-details { margin-top: var(--pickle-space-3); }
.exp-details summary {
  color: var(--pickle-muted);
  font-family: var(--pickle-font-mono);
  font-size: var(--pickle-text-2xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}
.exp-details summary:hover { color: var(--pickle-accent-text); }
.exp-details > div { margin-top: var(--pickle-space-2); color: var(--pickle-muted); }

/* ============================================================== address page */

.exp-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: var(--pickle-space-4);
}
.exp-ov-card { padding: var(--pickle-space-5); }
.exp-ov-title { margin: 0 0 var(--pickle-space-3); font-family: var(--pickle-font-display); font-size: var(--pickle-text-base); font-weight: 600; }
.exp-ov { display: grid; gap: var(--pickle-space-3); margin: 0; }
.exp-ov-row { display: grid; gap: 2px; }
.exp-ov-row dt {
  color: var(--pickle-subtle);
  font-family: var(--pickle-font-mono);
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.exp-ov-row dd { margin: 0; font-size: var(--pickle-text-sm); overflow-wrap: anywhere; }

/* =============================================================== NFT views */

.exp-nft-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 2rem;
  background:
    linear-gradient(135deg, transparent 49.5%, var(--pickle-line) 49.5%, var(--pickle-line) 50.5%, transparent 50.5%),
    var(--pickle-bg-deep);
}
.exp-nft-ph span {
  padding: 2px 6px;
  color: var(--pickle-faint);
  font-family: var(--pickle-font-mono);
  font-size: var(--pickle-text-xs);
  font-weight: 500;
  background: var(--pickle-bg-deep);
}
.ex-nft-img .exp-nft-ph { aspect-ratio: 1; }
.exp-nft-col { display: inline-flex; gap: 4px; align-items: center; color: var(--pickle-subtle); font-size: var(--pickle-text-2xs); }
.exp-nft-name { overflow: hidden; color: var(--pickle-text); font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.exp-nft-name:hover { color: var(--pickle-accent-text); }
.exp-nft-sub { color: var(--pickle-muted); font-family: var(--pickle-font-mono); font-size: var(--pickle-text-2xs); }
.exp-nft-sub.warn { color: var(--pickle-amber); }

.exp-colhead {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: var(--pickle-space-5);
  align-items: start;
  margin-bottom: var(--pickle-space-5);
}
.exp-colcover {
  width: 7.5rem;
  height: 7.5rem;
  overflow: hidden;
  background: var(--pickle-bg-deep);
  border: 1px solid var(--pickle-line);
  border-radius: var(--pickle-radius);
}
.exp-colcover img { width: 100%; height: 100%; object-fit: cover; }
.exp-colinfo { min-width: 0; }
.exp-colinfo .ex-h { margin-bottom: var(--pickle-space-2); }
.exp-colinfo .ex-desc { margin-bottom: var(--pickle-space-2); }
.exp-links { display: flex; flex-wrap: wrap; gap: var(--pickle-space-2); margin: var(--pickle-space-3) 0 0; }

.exp-item {
  display: grid;
  grid-template-columns: minmax(0, 26rem) minmax(0, 1fr);
  gap: var(--pickle-space-6);
  align-items: start;
}
.exp-item-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--pickle-bg-deep);
  border: 1px solid var(--pickle-line);
  border-radius: var(--pickle-radius);
}
.exp-item-hero img { width: 100%; height: 100%; object-fit: contain; }
.exp-item-hero .exp-nft-ph span { font-size: var(--pickle-text-lg); }
.exp-item-body { min-width: 0; }
.exp-item-body .ex-h { margin-bottom: var(--pickle-space-2); overflow-wrap: anywhere; }
.exp-owner { margin: 0 0 var(--pickle-space-3); color: var(--pickle-muted); font-size: var(--pickle-text-sm); }
.exp-subhead {
  margin: 0 0 var(--pickle-space-3);
  font-family: var(--pickle-font-display);
  font-size: var(--pickle-text-base);
  font-weight: 600;
}
.exp-traits {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pickle-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.exp-trait {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 7rem;
  max-width: 100%;
  padding: var(--pickle-space-2) var(--pickle-space-3);
  background: var(--pickle-mint-soft);
  border: 1px solid var(--pickle-mint-line);
  border-radius: var(--pickle-radius);
}
.exp-trait small {
  color: var(--pickle-accent-text);
  font-family: var(--pickle-font-mono);
  font-size: .58rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.exp-trait b { color: var(--pickle-text); font-size: var(--pickle-text-sm); font-weight: 600; overflow-wrap: anywhere; }

.exp-colgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  gap: var(--pickle-space-4);
}
.exp-colcard {
  display: flex;
  flex-direction: column;
  overflow: clip;
  color: inherit;
  background: var(--pickle-surface-1);
  border: 1px solid var(--pickle-line);
  border-radius: var(--pickle-radius);
}
.exp-colcard:hover { color: inherit; border-color: var(--pickle-mint-line); }
.exp-colcard-img { display: flex; aspect-ratio: 16 / 10; overflow: hidden; background: var(--pickle-bg-deep); }
.exp-colcard-img img { width: 100%; height: 100%; object-fit: cover; }
.exp-colcard-body { display: flex; flex-direction: column; gap: var(--pickle-space-1); padding: var(--pickle-space-4); font-size: var(--pickle-text-sm); }
.exp-colcard-name { display: inline-flex; gap: var(--pickle-space-2); align-items: center; font-size: var(--pickle-text-base); }
.exp-colcard-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pickle-space-3);
  margin-top: var(--pickle-space-2);
  padding-top: var(--pickle-space-2);
  color: var(--pickle-muted);
  font-family: var(--pickle-font-mono);
  font-size: var(--pickle-text-2xs);
  border-top: 1px solid var(--pickle-line);
}
.exp-colcard-stats b { color: var(--pickle-text); font-weight: 500; }

/* ==================================================================== pager */

.exp-pager { flex-wrap: wrap; }
.exp-pager div { flex-wrap: wrap; align-items: center; }
.exp-page {
  padding: 0 var(--pickle-space-2);
  color: var(--pickle-muted);
  font-family: var(--pickle-font-mono);
  font-size: var(--pickle-text-2xs);
  white-space: nowrap;
}

/* ==================================================================== footer */

.exp-foot { background: var(--pickle-bg-deep); border-top: 1px solid var(--pickle-line); }
.exp-foot-inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pickle-space-4) var(--pickle-space-6);
  align-items: flex-start;
  justify-content: space-between;
  width: min(100%, var(--pickle-content));
  margin-inline: auto;
  padding: var(--pickle-space-6) var(--pickle-gutter);
  color: var(--pickle-muted);
  font-size: var(--pickle-text-sm);
}
.exp-foot-inner p { max-width: 32rem; margin: 0; }
.exp-foot-links { display: flex; flex-wrap: wrap; gap: var(--pickle-space-2) var(--pickle-space-4); margin: 0; padding: 0; list-style: none; }
.exp-foot-links a { color: var(--pickle-muted); font-family: var(--pickle-font-mono); font-size: var(--pickle-text-2xs); letter-spacing: .1em; text-transform: uppercase; }
.exp-foot-links a:hover { color: var(--pickle-accent-text); }

/* =================================================================== motion
 * Only for a reader who has not asked for less of it.
 */

@media (prefers-reduced-motion: no-preference) {
  .exp-suggest button,
  .exp-colcard,
  .exp-toggle button,
  .exp-feed-all { transition: background-color var(--pickle-fast) var(--pickle-ease), border-color var(--pickle-fast) var(--pickle-ease), color var(--pickle-fast) var(--pickle-ease); }
  .exp-history-bar { transition: fill-opacity var(--pickle-fast) var(--pickle-ease); }
  .exp-colcard img { transition: transform var(--pickle-slow) var(--pickle-ease); }
  .exp-colcard:hover img { transform: scale(1.03); }
  .exp-feed-row { animation: exp-row-in var(--pickle-base) var(--pickle-ease) both; }
  @keyframes exp-row-in {
    from { opacity: .4; }
    to { opacity: 1; }
  }
}

/* ============================================================ narrow screens */

@media (max-width: 1023px) {
  .exp-board { grid-template-columns: minmax(0, 1fr); }
  .exp-board-grid { border-right: 0; border-bottom: 1px solid var(--pickle-line); }
  .exp-latest { grid-template-columns: minmax(0, 1fr); }
  .exp-item { grid-template-columns: minmax(0, 1fr); gap: var(--pickle-space-5); }
  .exp-item-media { max-width: 30rem; }
}

@media (max-width: 767px) {
  .exp-board-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .exp-feed-row {
    grid-template-columns: 2.5rem minmax(0, 1fr) auto;
    grid-template-areas: "tile main side" "tile mid mid";
    row-gap: var(--pickle-space-1);
  }
  .exp-feed-row > .exp-tile { grid-area: tile; align-self: start; }
  .exp-feed-row > .exp-feed-main { grid-area: main; }
  .exp-feed-row > .exp-feed-mid { grid-area: mid; }
  .exp-feed-row > .exp-feed-side { grid-area: side; }
  .exp-colhead { grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--pickle-space-4); }
  .exp-colcover { width: 4.5rem; height: 4.5rem; }
  .exp-hero { padding-top: var(--pickle-space-5); }
  .exp-search.hero .exp-search-label { display: none; }
  .exp-search.hero .ex-search input { padding: var(--pickle-space-3) var(--pickle-space-4); font-size: var(--pickle-text-sm); }
  .exp-feed-panel { padding: var(--pickle-space-4) var(--pickle-space-4) 0; }
  .exp-feed-all { margin: 0 calc(var(--pickle-space-4) * -1); }
  .exp-card { padding: var(--pickle-space-3) var(--pickle-space-4); }
  .exp-card-v { font-size: var(--pickle-text-lg); }
}

@media (max-width: 420px) {
  .exp-pager { justify-content: center; }
}

/* A name's profile picture on /name/<label>, served same-origin by
   explorer-api's /avatar proxy. Square, cropped, never stretched. */
.ex-name-avatar {
  display: block;
  width: 72px;
  height: 72px;
  object-fit: cover;
  border: 1px solid var(--pickle-line);
  border-radius: var(--pickle-radius);
  background: var(--pickle-surface-1);
}