/*
  PonsGuy mint site - single mint page, glassmorphism.

  Design language from the reference shot (dribbble.com/shots/27023284):
  frosted translucent panels over a colourful backdrop, a pill nav, a chunky
  uppercase headline with one cyan accent word, gradient CTA pills.

  Hard rules for this build:
    - one page, one purpose: mint. No gallery/traits/FAQ routes.
    - every icon is an inline SVG symbol (see the sprite in index.html). No
      emoji, no icon font, no dingbat glyphs.
    - no em-dash in copy.
    - glass fill is DARK translucent (solve_glass.py): a white fill leaks
      backdrop luminance into the text background and forces the backdrop near
      black, killing the glass look. A dark fill holds contrast AND lets the
      colourful backdrop show through.
*/

/* ----------------------------------------------------------- tokens */
:root {
  --bg-0:       #17140d;   /* warm near-black behind everything */
  --blue:       #385edb;
  --cyan:       #55c2f3;
  /* Gradient end used UNDER dark ink. Reference blue #385edb gives only
     3.40:1 with #06121f; #417ce2 clears 4.5 while staying in-family. */
  --blue-ink:   #417ce2;
  --cream:      #dcd9d2;

  /* glass steps - DARK translucent fill. Base (16,18,28); at these alphas the
     lightest text tier clears WCAG AA with the backdrop capped at gray ~107,
     while >=48% of the colourful backdrop still shows through the blur. */
  --glass:        rgba(16, 18, 28, 0.42);
  --glass-2:      rgba(16, 18, 28, 0.52);
  --glass-strong: rgba(20, 24, 38, 0.66);
  --rim:          rgba(255, 255, 255, 0.30);
  --rim-soft:     rgba(255, 255, 255, 0.14);

  /* type on glass, measured against the composited glass-over-backdrop. */
  --ink:        #ffffff;
  --ink-2:      rgba(255, 255, 255, 0.90);
  --ink-3:      rgba(255, 255, 255, 0.66);

  --ok:         #46d38a;
  --warn:       #f0a53a;

  --r-lg: 26px;
  --r-md: 18px;
  --r-sm: 12px;
  --maxw: 1120px;
  --pad: clamp(16px, 4vw, 34px);

  --font: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg-0);
  line-height: 1.5;
  min-height: 100vh;
  overflow-x: hidden;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* backdrop image the panels blur. object-fit cover, fixed so it does not
   scroll away on the short single page. */
.bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: url('img/backdrop.jpg') center / cover no-repeat, var(--bg-0);
}

.ico { width: 20px; height: 20px; display: inline-block; vertical-align: middle;
       flex: none; }
.ico.sm { width: 15px; height: 15px; }

a { color: inherit; }

/* ----------------------------------------------------------- shell */
.shell {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(14px, 3vw, 26px) var(--pad) 40px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 3vw, 26px);
}

/* glass surface used by main + modals */
.glass {
  background: var(--glass);
  border: 1px solid var(--rim-soft);
  border-radius: var(--r-lg);
  -webkit-backdrop-filter: blur(26px) saturate(1.3);
  backdrop-filter: blur(26px) saturate(1.3);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45),
              inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* ----------------------------------------------------------- nav */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 9px 9px 16px;
  background: var(--glass);
  border: 1px solid var(--rim-soft);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  backdrop-filter: blur(20px) saturate(1.3);
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-weight: 800;
  letter-spacing: 0.14em;
  font-size: 15px;
}
.logo img { border-radius: 9px; display: block; }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--rim);
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink);
  font: 600 14px var(--font);
  cursor: pointer;
  white-space: nowrap;
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.12); }
.btn-ghost .ico { width: 17px; height: 17px; }

/* --- social links in the nav ---
   Same glass pill language as .btn-ghost so the row reads as one control
   group. The label is hidden below 620px (see media query) and the pill
   collapses to an icon-only square, which keeps the header on one line at
   320px instead of wrapping. */
.nav-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.social {
  display: flex;
  align-items: center;
  gap: 8px;
}
.soc {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 15px;
  border-radius: 999px;
  border: 1px solid var(--rim);
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink);
  font: 600 14px var(--font);
  text-decoration: none;
  white-space: nowrap;
}
.soc:hover { background: rgba(255, 255, 255, 0.12); }
.soc .ico { width: 17px; height: 17px; }

.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block;
       flex: none; }
.dot-off  { background: #6b7280; }
.dot-idle { background: #6b7280; }
.dot-on   { background: var(--ok);   box-shadow: 0 0 0 3px rgba(70,211,138,.22); }
.dot-warn { background: var(--warn); box-shadow: 0 0 0 3px rgba(240,165,58,.22); }

/* ----------------------------------------------------------- mint layout */
.mint {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(20px, 3vw, 40px);
  padding: clamp(22px, 3.5vw, 44px);
  flex: 1;
}

/* ---- left column: art + copy ---- */
.mint-left { min-width: 0; display: flex; flex-direction: column; }

.art {
  margin: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  background: linear-gradient(180deg, #4b3bcf 0%, #3f7fe0 52%, #5fd0e8 100%);
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 420px;
}
.art img,
.art .art-media { width: 100%; height: 100%; object-fit: cover; display: block; }

.art-cap {
  margin: 10px 2px 0;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.mint-left h1 {
  margin: 22px 0 0;
  font-size: clamp(30px, 5vw, 46px);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.mint-left h1 span {
  color: var(--cyan);
  text-shadow: 0 0 26px rgba(85, 194, 243, 0.5);
}

.lede {
  margin: 14px 0 0;
  max-width: 46ch;
  color: var(--ink-2);
  font-size: 15px;
}

/* ---- right column: mint control ---- */
.mint-right {
  min-width: 0;
  background: var(--glass-2);
  border: 1px solid var(--rim-soft);
  border-radius: var(--r-md);
  padding: clamp(18px, 2.4vw, 26px);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.run { text-align: left; }
.run-count { margin: 0; display: flex; align-items: baseline; gap: 8px; }
.run-count b { font-size: 34px; font-weight: 800; letter-spacing: -0.01em; }
.run-cap { font-size: 13px; color: var(--ink-3); }
.run-sub { margin: 2px 0 0; font-size: 13px; color: var(--ink-2); }

/* ---- continuous progress bar ----
   Retired markup: the strip/bar/bar-meta nodes were removed from
   index.html post-mint (at 10,000/10,000 the gauge reads 100% forever and
   pushes the market row and buy CTA off the fold). Their rules are deleted
   here rather than commented out, so a stale cached stylesheet cannot
   repaint a node a future markup change reintroduces.
*/

/* ---- live mint toasts ----
   Fires when the polled counter advances. Bottom-right on desktop, and pinned
   full width at the bottom on narrow screens where a floating corner card would
   crowd the mint controls. */
.toast-wrap {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  pointer-events: none;   /* never blocks the mint button underneath */
}
.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 15px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(16, 18, 28, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
  font-size: 13px;
  color: var(--ink-2);
  max-width: min(88vw, 320px);
  /* Starts offset and transparent; app.js flips .in on the next frame so the
     entrance actually transitions instead of appearing already settled. */
  opacity: 0;
  transform: translateY(10px) scale(0.98);
  transition: opacity 260ms ease, transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.toast.in { opacity: 1; transform: translateY(0) scale(1); }
.toast.out { opacity: 0; transform: translateY(-6px) scale(0.99); }
.toast b { color: var(--ink); font-weight: 800; }
.toast .toast-dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--cyan);
  box-shadow: 0 0 0 4px rgba(85, 194, 243, 0.16);
}

@media (max-width: 560px) {
  .toast-wrap { left: 12px; right: 12px; bottom: 12px; align-items: stretch; }
  .toast { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .toast { transition: none; opacity: 1; transform: none; }
}

/* ---- review modal: affordability warning ----
   Advisory, not a block. Gas is an estimate, so the mint button stays live and
   this row only tells the visitor what the numbers look like. */
.rv-warn {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(232, 168, 60, 0.34);
  background: rgba(232, 168, 60, 0.10);
  font-size: 12.5px;
  line-height: 1.45;
  color: #f0d9ae;
}
.rv-warn .ico { width: 15px; height: 15px; flex: none; margin-top: 1px; }
.rv-warn b { color: #ffe9c4; font-weight: 700; }

/* ---- share after mint ---- */
.share-row { margin-top: 12px; }
.share-row .btn-ghost {
  justify-content: center;
  text-decoration: none;
}

/* Respect a reduced-motion preference: keep the value updates, drop the
   animation and the travelling sheen. */
@media (prefers-reduced-motion: reduce) {
  /* bar/strip rules retired with their markup; nothing animated here now */
}

.order-tag { margin: 0 0 4px; font-size: 12px; letter-spacing: 0.06em;
             text-transform: uppercase; color: var(--ink-3); }

/* ---- quantity: drag slider ----
   A native range input, fully repainted. The track is drawn with a gradient
   whose hard stop sits at --fill (set from JS), so the filled portion works
   identically in every engine instead of relying on ::-moz-range-progress. */
.qty-slider { display: flex; flex-direction: column; gap: 10px; }

.qty-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.qty-now {
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.qty-limit { font-size: 12px; color: var(--ink-3); }
.qty-limit b { color: var(--ink-2); font-weight: 700; }

.qty-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  /* tall enough that the whole strip is a comfortable drag/touch target */
  height: 34px;
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: grab;
  touch-action: none;      /* let horizontal drags move the thumb, not scroll */
  --fill: 0%;
}
.qty-range:active { cursor: grabbing; }

/* --- track --- */
.qty-range::-webkit-slider-runnable-track {
  height: 10px;
  border-radius: 999px;
  border: 1px solid var(--rim);
  background:
    linear-gradient(90deg, var(--cyan) 0%, var(--blue-ink) var(--fill),
                    rgba(255, 255, 255, 0.07) var(--fill),
                    rgba(255, 255, 255, 0.07) 100%);
}
.qty-range::-moz-range-track {
  height: 10px;
  border-radius: 999px;
  border: 1px solid var(--rim);
  background:
    linear-gradient(90deg, var(--cyan) 0%, var(--blue-ink) var(--fill),
                    rgba(255, 255, 255, 0.07) var(--fill),
                    rgba(255, 255, 255, 0.07) 100%);
}

/* --- thumb --- */
.qty-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid #06121f;
  background: linear-gradient(180deg, #ffffff, #d8e6f7);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  /* centre the 26px thumb on the 10px track: (10 - 26) / 2 */
  margin-top: -8px;
}
.qty-range::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid #06121f;
  background: linear-gradient(180deg, #ffffff, #d8e6f7);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

.qty-range:hover::-webkit-slider-thumb { transform: scale(1.06); }
.qty-range:hover::-moz-range-thumb { transform: scale(1.06); }
.qty-range:focus-visible::-webkit-slider-thumb {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}
.qty-range:focus-visible::-moz-range-thumb {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}
.qty-range:focus { outline: none; }

/* --- tick numbers under the track ---
   Two modes. With a small cap every value gets a label and flex spacing is
   enough. Past 12 values the labels are landmarks only (1, 5, 10, ... max) and
   each one is positioned by percentage so it sits over its actual value rather
   than being spread evenly, which would put "5" in the wrong place. */
.qty-scale {
  display: flex;
  justify-content: space-between;
  padding: 0 2px;
}
.qty-scale.is-sparse {
  display: block;
  position: relative;
  height: 14px;
  padding: 0;
}
.qty-tick {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.qty-scale.is-sparse .qty-tick {
  position: absolute;
  top: 0;
  /* The thumb is 22px wide and its centre travels from 11px to width-11px, so
     a label at 0% must sit 11px in from the left edge to line up with it. The
     translate keeps the label centred on that point. */
  transform: translateX(-50%);
  white-space: nowrap;
}

.ticket {
  margin: 4px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ticket > div { display: flex; align-items: baseline; justify-content: space-between;
                gap: 12px; }
.ticket dt { font-size: 13px; color: var(--ink-3); }
.ticket dd { margin: 0; font-size: 13px; font-weight: 600; color: var(--ink-2);
             text-align: right; overflow-wrap: anywhere; }

.ticket-total {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid var(--rim-soft);
}
.ticket-total span { font-size: 13px; color: var(--ink-3); }
.ticket-total b { font-size: 20px; font-weight: 800; }

/* primary CTA */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 22px;
  border: none;
  border-radius: var(--r-sm);
  color: #06121f;
  background: linear-gradient(100deg, var(--cyan), var(--blue-ink));
  font: 700 15px var(--font);
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(56, 94, 219, 0.34);
}
.btn-primary.block { width: 100%; }
/* Two stacked CTAs (the disabled MINT/SOLD OUT button above the always-live
   Buy on OpenSea link) have no margin of their own and would touch. */
.btn-primary + .btn-primary { margin-top: 12px; }
.btn-primary:hover { filter: brightness(1.05); }
.btn-primary:disabled {
  cursor: not-allowed;
  color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: none;
  filter: none;
}
.btn-primary:disabled .ico { opacity: 0.5; }

.mint-note { margin: 0; font-size: 12px; color: var(--ink-3); }

/* ----------------------------------------------------------- footer */
.foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  color: var(--ink-3);
  padding: 0 4px;
}
/* The contract address is one unbreakable 42-char token. At 320px it measured
   318px inside a padded row and pushed the page 18px wide, so it is allowed to
   break mid-string rather than force a horizontal scrollbar. */
#footContract {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.foot a { display: inline-flex; align-items: center; gap: 5px; color: var(--cyan);
          text-decoration: none; }
.foot a:hover { text-decoration: underline; }

/* Footer copy of the same two links, spelled out. The nav pills are compact
   and icon-led; here the full handle and destination are readable, which is
   what someone scanning the bottom of the page is looking for. */
.foot-links {
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 16px;
  width: 100%;
  order: 3;
}

/* ----------------------------------------------------------- modals */
.modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  padding: 20px;
}
.modal[hidden] { display: none; }
.modal-scrim {
  position: absolute;
  inset: 0;
  background: rgba(6, 8, 14, 0.66);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.modal-card {
  position: relative;
  width: 100%;
  max-width: min(440px, 100%);
  padding: 24px;
  background: var(--glass-strong);
}
.wallet-card { max-width: min(460px, 100%); }

.modal-top { display: flex; align-items: center; justify-content: space-between;
             gap: 12px; }
.modal-top h2 { margin: 0; font-size: 20px; font-weight: 700; }
.modal-x {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--rim);
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink);
  cursor: pointer;
  display: grid; place-items: center;
  flex: none;
}
.modal-x:hover { background: rgba(255, 255, 255, 0.14); }

.modal-sub { margin: 6px 0 16px; font-size: 13px; color: var(--ink-3); }
.modal-sub b { color: var(--ink-2); font-weight: 600; }

/* wallet rows */
.wallet-list { list-style: none; margin: 0; padding: 0; display: flex;
               flex-direction: column; gap: 8px; }
.wallet-row {
  width: 100%;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto 20px;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 14px;
  border: 1px solid var(--rim-soft);
  background: rgba(255, 255, 255, 0.05);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}
.wallet-row:hover { background: rgba(255, 255, 255, 0.12); }
.wlogo {
  width: 40px; height: 40px;
  border-radius: 11px;
  overflow: hidden;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.9);
  /* hairline ring so a dark brand tile (OKX black, Rainbow navy) keeps an edge
     against the dark row instead of merging into it. */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.wlogo img, .wlogo svg { width: 28px; height: 28px; display: block; }
.wname { min-width: 0; font-weight: 600; font-size: 15px;
         overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wstate {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--ink-3); white-space: nowrap;
}
.wstate .live { width: 8px; height: 8px; border-radius: 50%; background: var(--ok);
                box-shadow: 0 0 0 3px rgba(70,211,138,.22); }
.wstate-off { color: rgba(255, 255, 255, 0.4); }
.wchev { color: var(--ink-3); width: 18px; height: 18px; }

.modal-fine {
  margin: 16px 0 0;
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 12px; color: var(--ink-3);
  padding-top: 14px;
  border-top: 1px solid var(--rim-soft);
}
.modal-fine .ico { color: var(--ok); margin-top: 1px; }

/* review modal */
.review { margin: 16px 0 18px; display: flex; flex-direction: column; gap: 10px; }
.review > div { display: flex; align-items: baseline; justify-content: space-between;
                gap: 12px; }
.review dt { font-size: 13px; color: var(--ink-3); }
.review dd { margin: 0; font-size: 14px; font-weight: 600; }
.review-total { padding-top: 12px; border-top: 1px solid var(--rim-soft); }
.review-total dt { font-size: 15px; color: var(--ink-2); }
.review-total dd { font-size: 20px; font-weight: 800; }

/* ----------------------------------------------------------- responsive */
@media (max-width: 860px) {
  .mint { grid-template-columns: minmax(0, 1fr); }
  .art { max-width: 340px; margin: 0 auto; }
  .art-cap { text-align: center; }
  .mint-left h1 { text-align: center; }
  .lede { margin-left: auto; margin-right: auto; text-align: center; }
}

@media (max-width: 460px) {
  .nav { padding: 8px 8px 8px 14px; }
  .btn-ghost { padding: 9px 13px; }
}

/* Very narrow: collapse the connect button to an icon so the nav row cannot
   overflow. The dot + wallet icon still communicate state; the full label
   returns above 380px. */
/* Below 620px the social pills drop their word and become icon-only squares,
   so the header stays on one line down to 320px. The nav pills are decorative
   shortcuts; the footer keeps the fully spelled-out links for anyone who wants
   to read the destination. */
/* Below 620px the whole nav-right collapses to icon-only pills: two social
   marks plus the connect button. Measured at 390px, keeping the words gives
   nav-right 283px of content against a 390px viewport, which pushed the page
   83px wide. Icons alone fit down to 320px with room to spare. */
@media (max-width: 620px) {
  .soc .soc-label { display: none; }
  .soc { padding: 10px; }
  .btn-ghost #navConnectLabel { display: none; }
  .btn-ghost { padding: 10px; }
}

@media (max-width: 380px) {
  /* At 320px the icon row still ran 5px past the edge. Tighter gaps and
     slightly smaller pills bring it inside with margin to spare. */
  .nav-right { gap: 5px; }
  .social { gap: 5px; }
  .soc, .btn-ghost { padding: 9px; }
  .nav { padding: 8px 6px 8px 10px; gap: 8px; }
  .logo span { font-size: 14px; letter-spacing: 0.1em; }
}

@media (prefers-reduced-motion: no-preference) {
  .btn-primary, .chip, .wallet-row, .btn-ghost { transition: all 0.16s ease; }
}

/* ---- secondary market row ----
   Mint is over, so floor price is the collection's only live price. Three
   cells, even grid so no ragged row at any width. Tokens are hyphenated
   (--ink-2, --ink-3) to match :root; --ink2 would silently resolve to nothing.
   Hidden by default and revealed from JS only when a real number arrives. */
.mkt { margin-top: 14px; }

.mkt-tag { margin: 0 0 6px; font-size: 12px; letter-spacing: 0.06em;
           text-transform: uppercase; color: var(--ink-3); }

.mkt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

.mkt-cell {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 10px;
  border: 1px solid var(--rim-soft);
  border-radius: var(--r-sm, 10px);
  background: var(--glass);
  min-width: 0;                 /* let long values shrink instead of overflow */
}

.mkt-k { font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase;
         color: var(--ink-3); }

.mkt-v { font-size: 15px; font-weight: 700; color: var(--ink);
         white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Measured: at 3 columns "0.00699 ETH" was ellipsised at 390, 430, 1024, 1280
   and 1440 (the mint column is a fixed width, so desktop cells are no wider
   than mobile). Two fixes, both required. The unit moves to its own small line
   so the number owns the full cell width, and the single-column fallback
   triggers at 460 instead of 380. */
/* Two attempts at fitting "0.00698" + "ETH" side by side inside a 3-column
   grid both kept ellipsising at 900 and 1024, where the mint column is
   narrowest. Root cause is the side-by-side layout itself, not the spacing:
   a nowrap number plus a unit cannot fit that cell at any sane font size.
   The unit therefore goes on its OWN LINE, which gives the number the entire
   cell width and removes the constraint instead of negotiating with it. */
.mkt-u { display: block; font-size: 10px; font-weight: 600;
         letter-spacing: 0.04em; color: var(--ink-3); line-height: 1.2; }

.mkt-v { display: block; min-width: 0; }

.mkt-cell { padding: 8px 8px; }

@media (max-width: 460px) {
  .mkt-grid { grid-template-columns: 1fr; }
  /* Single column has room to spare, so put the unit back inline there. */
  .mkt-u { display: inline; margin-left: 4px; font-size: 11px; }
}