/* ══ THE MARKET TERMINAL ═══════════════════════════════════════════════════
   The homepage's first screen as a live view of the market (owner, 08/11/2026). On /market since 09/11/2026.
   Tokens only, logical properties only; the numbers carry the page, so they are the largest type on it.
   ════════════════════════════════════════════════════════════════════════ */

.v2-term { align-items: center; }
.v2-term-intro { display: grid; gap: var(--s-4); align-content: center; }
.v2-term-h1 {
  font-family: var(--font-display); font-size: var(--t-3xl); font-weight: 700; line-height: 1.2;
  color: var(--ink); margin: 0; max-width: 18ch; text-wrap: balance;
}
.v2-term-lede { margin: 0; color: var(--ink-body); font-size: var(--t-md); line-height: 1.6; max-width: 46ch; }
.v2-term .v2-askbar { margin: 0; }

/* ── The panel ── */
.v2-term-panel {
  background: var(--surface-card); border: 1px solid var(--rule); border-radius: var(--radius-lg);
  padding: var(--s-5); display: grid; gap: var(--s-4); min-inline-size: 0;
}
.v2-term-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); font-size: var(--t-sm); }
.v2-term-live { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: 700; color: var(--accent); letter-spacing: .04em; }
.v2-term-live i {
  inline-size: 9px; block-size: 9px; border-radius: 50%; background: var(--live);
  box-shadow: inset 0 0 0 1.5px var(--live-edge);   /* still: a dot that pulsed for ever is motion nobody can stop (WCAG 2.2.2; research 08/11/2026) */
}
.v2-term-upd { color: var(--ink-dim); }
.v2-term-more { margin-inline-start: auto; color: var(--accent); font-weight: 600; min-block-size: 44px; display: inline-flex; align-items: center; }

.v2-term-window { margin: 0; font-size: var(--t-sm); color: var(--ink-dim); }
.v2-term-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--s-5); }
.v2-term-stat { display: grid; gap: var(--s-1); }
.v2-term-stat b { font-family: var(--font-display); font-size: var(--t-3xl); line-height: 1; color: var(--ink); font-weight: 700; }
.v2-term-stat span { font-size: var(--t-sm); color: var(--ink-body); line-height: 1.4; }
.v2-term-reach {
  margin: 0; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); font-size: var(--t-sm); color: var(--ink-body);
  padding-block-start: var(--s-3); border-block-start: 1px dashed var(--rule);
}
.v2-term-reach b { color: var(--ink); }

.v2-term-grid { display: grid; gap: var(--s-5); }
.v2-term-block { display: grid; gap: var(--s-3); min-inline-size: 0; }
.v2-term-block h2 { font-size: var(--t-base); margin: 0; }
.v2-term-block h2 a { color: var(--ink); min-block-size: 44px; display: inline-flex; align-items: center; }

/* Every name and title wraps whole: a place's name is a name, and half of one is a different place.
   Every link is a 44px target, the size a thumb needs (UI/UX Pro Max «truncation-strategy», «touch-target-size»). */

/* Where buyers are asking: name, bar, count. */
.v2-term-asked { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-1); }
.v2-term-asked li { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: var(--s-3); align-items: center; font-size: var(--t-sm); }
.v2-term-asked a { color: var(--ink-body); line-height: 1.35; overflow-wrap: break-word; min-block-size: 44px; display: flex; align-items: center; }
.v2-term-bar { block-size: 8px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--accent) 12%, transparent); overflow: hidden; }
.v2-term-bar i { display: block; block-size: 100%; border-radius: inherit; background: var(--accent); }

/* The price band: asking, buyers, sold — one scale, low end on the left (dir="ltr", as /prices draws it). */
.v2-term-band { display: grid; gap: var(--s-3); }
.v2-term-band-row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.2fr); gap: var(--s-1) var(--s-3); align-items: center; font-size: var(--t-sm); }
.v2-term-band-label { color: var(--ink-body); }
.v2-term-band-range { grid-column: 1 / -1; color: var(--ink-dim); font-size: var(--t-xs); text-align: end; }
.v2-term-band-track { position: relative; block-size: 10px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--ink) 7%, transparent); }
.v2-term-band-track i { position: absolute; inset-block: 0; border-radius: inherit; background: var(--accent); }
.v2-term-band-row.is-buyers .v2-term-band-track i { background: var(--live); box-shadow: inset 0 0 0 1.5px var(--live-edge); }
.v2-term-band-row.is-sold .v2-term-band-track i { background: var(--ink); }

/* What just arrived. */
.v2-term-feed { list-style: none; margin: 0; padding: var(--s-3) 0 0; border-block-start: 1px dashed var(--rule); display: grid; gap: var(--s-2); }
/* On a phone the tag and the age share a line and the title takes the full width under them. */
.v2-term-feed li {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "tag ago" "title title";
  gap: 0 var(--s-3); align-items: center; font-size: var(--t-sm);
}
.v2-term-feed .v2-tag { grid-area: tag; justify-self: start; }
.v2-term-feed a { grid-area: title; color: var(--ink); line-height: 1.4; overflow-wrap: break-word; min-block-size: 44px; display: flex; align-items: center; }
.v2-term-ago { grid-area: ago; justify-self: end; color: var(--ink-dim); font-size: var(--t-xs); white-space: nowrap; }

/* ── Desktop: the headline and the search on one side, the market on the other ── */
@media (min-width: 1024px) {
  .v2-hero.is-terminal .v2-hero-in.v2-term {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr); gap: var(--s-10); padding-block: var(--s-10);
  }
  .v2-term-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .v2-term-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-6); }
  .v2-term .v2-quick { grid-column: auto; }
  .v2-term-feed li { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "tag title ago"; gap: var(--s-3); }
}