/* ═══ views-market.css ══════════════════════════════════════════════════════
   View-specific styles for the market views: rankings (home), market, coin,
   convert, treasury. Base building blocks (.table, .btn, .badge, .seg, .hint,
   .empty, .skel ...) come from app.css and are only USED here, never redefined.

   MUST be linked AFTER app.css: the rankings grid below overrides the legacy
   column sets app.css still carries for .table-rankings. */

/* ── rankings table ─────────────────────────────────────────────────────────
   Default: rank | coin | per person | market cap | price | 24h | 7d.
   Comparison adds only at-benchmark after the reader opts in; its clearly
   labelled picker lives above the table. Head and rows share --cols. */
.table-rankings {
  --cols: 2.5rem minmax(11rem, 1fr) 13.5rem 6rem 8rem 5rem 8.5rem;
  position: relative;
}
.table-rankings.benchmark-on {
  --cols: 2.5rem minmax(11rem, 1fr) 13.5rem 6rem 8rem 5rem 8.5rem 7.5rem;
}

/* First-time visitors keep the full editorial promise. Once a holding exists,
   the same signature becomes a compact personal preface instead of occupying
   most of the first viewport on every visit. */
.home-hero.has-holdings {
  justify-items: start; text-align: start;
  padding: var(--s-5) var(--s-6); margin-block-end: var(--s-5);
  border: 1px solid color-mix(in srgb, var(--brand-indigo) 16%, var(--line));
}
.home-hero.has-holdings > .view-hook {
  max-width: 32ch; margin-block: 0 var(--s-2);
  font-size: clamp(30px, 3vw, 44px); line-height: 1.08;
}
.home-hero.has-holdings > .view-lede {
  max-width: 60ch; font-size: var(--fs-md); line-height: 1.55;
}

.ranking-tools {
  display: flex; align-items: center; justify-content: flex-end;
  gap: var(--s-2); flex-wrap: wrap;
}
.ranking-tools .input { width: clamp(190px, 26vw, 300px); }
.bench-optin .icon { color: var(--accent); }

/* Names may WRAP but are never truncated: a cut name is the one loss this
   table must never take (docs/REDESIGN.md mobile rule, applied everywhere). */
.table-rankings .row-id .row-link {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  line-height: 1.25;
}

/* ── benchmark mode: explicit picker, reading, close ─────────────────────── */
.bench-bar {
  display: grid; grid-template-columns: minmax(12rem, 18rem) minmax(14rem, 1fr) auto;
  align-items: center; gap: var(--s-3);
  margin-block-start: var(--s-3);
  padding: 10px 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--line2));
  border-radius: var(--r-card);
  background: color-mix(in srgb, var(--accent-soft) 72%, var(--surface));
}
.bench-picker { display: grid; gap: 4px; min-inline-size: 0; }
.bench-picker-label {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--accent-text); font-size: var(--fs-xs); font-weight: 700;
}
.bench-select { inline-size: 100%; min-inline-size: 0; }
.bench-summary { display: grid; gap: 2px; min-inline-size: 0; font-size: var(--fs-sm); }
.bench-cap { color: var(--text); font-weight: 600; }
.bench-bar .btn { justify-self: end; }
.benchmark-source-badge { color: var(--accent-text); background: var(--accent-soft); }

/* Desktop uses the real sortable column headers. The segment is the compact
   replacement on phones, where several headers necessarily disappear. */
.sort-meta {
  display: flex; align-items: center; justify-content: flex-end;
  gap: var(--s-3); flex-wrap: wrap;
  margin-block-start: var(--s-3);
}
.sort-row { display: none; align-items: center; gap: 8px; }
.sort-label { font-size: var(--fs-sm); }
.sort-meta .hint { margin: 0; }

.th-btn {
  display: inline-flex; align-items: center; gap: 4px; max-width: 100%;
  border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; color: inherit; letter-spacing: inherit;
  text-transform: inherit; text-align: inherit;
}
.th-btn:hover { color: var(--text); }
.th-btn > span:first-child { min-inline-size: 0; }
.table-head [aria-sort] { color: var(--text); }
.sort-arrow { display: inline-flex; flex: none; color: var(--accent-text); }

/* ── benchmark column: repriced value over its factor ────────────────────── */
.col-bench { display: grid; justify-items: end; gap: 1px; }
.table-head .col-bench { display: block; } /* header keeps the normal label flow */
.bench-val { white-space: nowrap; }
.bench-x { font-size: var(--fs-xs); }

/* ── 7d cell: hairline plus its number ───────────────────────────────────── */
.table-rankings .col-spark {
  display: flex; align-items: center; justify-content: flex-end; gap: 6px;
}
.table-rankings .col-spark .spark { flex: none; }
.spark-pct { font-size: var(--fs-xs); }
.spark-pct .unit { margin-inline-start: 0.15em; }

/* ── compact asset identity ─────────────────────────────────────────────────
   One quiet semantic line answers coin vs token vs stablecoin and, for tokens,
   names the visible host chain. It wraps instead of adding table columns. */
.row-tick { display: inline-flex; align-items: center; gap: 6px; min-inline-size: 0; }
.row-asset-facts {
  display: flex; align-items: baseline; gap: 0; flex-wrap: wrap;
  overflow: visible; text-overflow: clip;
  color: var(--ink3); font-size: 11px; line-height: 1.35;
}
.asset-mini + .asset-mini::before {
  content: '·'; margin-inline: 5px; color: var(--line2);
}
.asset-kind, .asset-stable {
  display: inline-flex; align-items: center; min-block-size: 20px;
  padding: 2px 7px; border: 1px solid; border-radius: var(--r-pill);
  font-size: 10px; font-weight: 750; letter-spacing: 0.02em;
}
.asset-kind.asset-coin {
  color: var(--brand-cyan);
  border-color: color-mix(in srgb, var(--brand-cyan) 52%, var(--line));
  background: color-mix(in srgb, var(--brand-cyan) 17%, transparent);
}
.asset-kind.asset-token {
  --asset-token: color-mix(in srgb, var(--brand-indigo) 72%, var(--brand-violet));
  color: var(--asset-token);
  border-color: color-mix(in srgb, var(--asset-token) 54%, var(--line));
  background: color-mix(in srgb, var(--asset-token) 17%, transparent);
}
.asset-network { color: var(--brand-cyan); font-weight: 620; }
.asset-stable {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}
.asset-age {
  position: relative; z-index: 3; display: inline-flex; overflow: visible;
}
.asset-mini.tip-open { z-index: 69; }
.asset-fact-trigger {
  appearance: none;
  position: relative; display: inline-flex; align-items: center;
  min-block-size: 24px; margin-block: -3px; padding: 2px 6px;
  border: 1px solid transparent; border-radius: var(--r-pill);
  background: none;
  color: inherit;
  font: inherit; line-height: inherit;
  cursor: help;
}
.asset-age .asset-fact-trigger {
  margin-block: -5px; padding-inline: 0; border: 0; border-radius: 0;
  color: var(--brand-violet);
  text-decoration: underline dotted color-mix(in srgb, var(--brand-violet) 48%, transparent);
  text-underline-offset: 3px;
}
.asset-fact-tip {
  position: absolute; z-index: 4; pointer-events: none;
  inset-inline-start: 0; inset-block-end: calc(100% + 7px);
  inline-size: max-content; max-inline-size: min(20rem, calc(100vw - 32px));
  padding: 5px 8px; border: 1px solid var(--line2); border-radius: var(--r-s);
  background: var(--surface); color: var(--ink);
  box-shadow: var(--shadow-pop); white-space: normal;
  font-size: var(--fs-xs); font-weight: 650; line-height: 1.3;
  opacity: 0; transform: translateY(3px);
  transition: opacity var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.asset-fact-tip:not([hidden]) { display: grid; gap: 5px; }
.asset-fact-tip[hidden] { display: none; }
.asset-mini:hover .asset-fact-tip,
.asset-mini:focus-within .asset-fact-tip {
  opacity: 1; transform: translateY(0);
}
.asset-explainer {
  margin-block-start: var(--s-3);
  border-block: 1px solid var(--line);
}
.asset-explainer summary {
  display: flex; align-items: center; gap: 7px;
  min-block-size: 38px; color: var(--ink2);
  font-size: var(--fs-sm); font-weight: 650; cursor: pointer;
  list-style: none;
}
.asset-explainer summary::-webkit-details-marker { display: none; }
.asset-explainer summary::after {
  content: '+'; margin-inline-start: auto;
  color: var(--accent); font-size: 18px; font-weight: 500;
}
.asset-explainer[open] summary::after { content: '\2212'; }
.asset-explainer summary .icon { color: var(--accent); }
.asset-explainer-body {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-3); padding-block: var(--s-2) var(--s-4);
}
.asset-explainer-body p {
  margin: 0; font-size: var(--fs-sm); line-height: 1.55;
}
.asset-type-card {
  --asset-type-color: var(--brand-cyan);
  display: grid; align-content: start; gap: var(--s-2); min-inline-size: 0;
  padding: var(--s-3); border: 1px solid color-mix(in srgb, var(--asset-type-color) 50%, var(--line));
  border-radius: var(--r); background: color-mix(in srgb, var(--asset-type-color) 15%, var(--surface));
}
.asset-type-token {
  --asset-type-color: color-mix(in srgb, var(--brand-indigo) 72%, var(--brand-violet));
}
.asset-type-stable { --asset-type-color: var(--accent); }
.asset-type-card h3, .asset-type-card h4 { margin: 0; }
.asset-type-card h3 {
  color: var(--asset-type-color); font-size: var(--fs-md); font-weight: 750;
}
.asset-type-def { color: var(--ink2); }
.asset-type-why {
  display: grid; gap: 3px; margin-block-start: var(--s-1);
  padding-block-start: var(--s-2);
  border-block-start: 1px solid color-mix(in srgb, var(--asset-type-color) 38%, var(--line));
}
.asset-type-why h4 {
  color: var(--asset-type-color); font-size: var(--fs-xs); font-weight: 750;
  letter-spacing: 0.025em;
}
.asset-data-note {
  grid-column: 1 / -1; padding-inline: var(--s-1);
}

@media (max-width: 720px) {
  .asset-explainer-body { grid-template-columns: 1fr; }
  .asset-data-note { grid-column: auto; }
  /* Fixed mobile placement cannot run outside either viewport edge and remains
     above the bottom tab bar; desktop keeps the tooltip beside its trigger. */
  .asset-fact-tip {
    position: fixed; z-index: 68;
    inset-inline: var(--s-4); inset-block: auto calc(var(--nav-h) + var(--s-4));
    inline-size: auto; max-inline-size: none;
  }
}

/* per-person as a sub-line under the name; only while its column is folded */
.row-per { display: none; }

/* Cumulative whole-market sections. A two-pixel logical-start rail connects
   the real data rows without consuming a grid track (and therefore moves to
   the right in RTL). Six calm hue families plus rising intensity distinguish
   the cap bands; the
   crossing row still owns the horizontal notch and label, so lazy chunks and
   ARIA row indexes remain intact. */
.table-rankings .row[data-cap-band] {
  --cap-band-color: var(--brand-cyan);
  --cap-band-rail: color-mix(in srgb, var(--cap-band-color) 56%, transparent);
  --cap-band-start: -1px;
  --cap-band-end: -1px;
}
.table-rankings .row[data-cap-band='1'] {
  --cap-band-color: var(--accent);
  --cap-band-rail: color-mix(in srgb, var(--cap-band-color) 62%, transparent);
}
.table-rankings .row[data-cap-band='2'] {
  --cap-band-color: var(--brand-indigo);
  --cap-band-rail: color-mix(in srgb, var(--cap-band-color) 68%, transparent);
}
.table-rankings .row[data-cap-band='3'] {
  --cap-band-color: var(--brand-violet);
  --cap-band-rail: color-mix(in srgb, var(--cap-band-color) 74%, transparent);
}
.table-rankings .row[data-cap-band='4'] {
  --cap-band-color: var(--rarity);
  --cap-band-rail: color-mix(in srgb, var(--cap-band-color) 80%, transparent);
}
.table-rankings .row[data-cap-band='5'] {
  --cap-band-color: var(--warn);
  --cap-band-rail: color-mix(in srgb, var(--cap-band-color) 86%, transparent);
}
.table-rankings .row[data-cap-band]::before {
  content: ''; position: absolute; z-index: 1; pointer-events: none;
  inset-inline-start: 0;
  inset-block-start: var(--cap-band-start);
  inset-block-end: var(--cap-band-end);
  inline-size: 2px;
  background: var(--cap-band-rail);
}
.table-rankings .row[data-cap-band].cap-threshold-row { --cap-band-end: -10px; }
.table-rankings .cap-threshold-row + .row[data-cap-band] { --cap-band-start: -9px; }
.table-rankings .cap-threshold-row { margin-block-end: 18px; }
.table-rankings .cap-threshold-row::after {
  content: ''; position: absolute; pointer-events: none;
  inset-inline-start: 0; inset-block-end: -10px;
  inline-size: 12px; block-size: 1px; background: var(--cap-band-color);
}
.cap-thresholds {
  position: absolute; z-index: 2; pointer-events: none;
  inset-inline-start: 16px; inset-block-end: -16px;
  display: inline-flex; align-items: center; gap: 5px;
  padding-inline: 3px; border-radius: 2px;
  background: var(--bg); white-space: nowrap;
}
.cap-threshold {
  color: var(--cap-band-color); font-size: 10px; font-weight: 700;
  line-height: 1; letter-spacing: 0.03em;
}

/* ── stale/aged marks ──────────────────────────────────────────────────────
   The stale banner and .stale-dim live in app.css (state blocks); this file
   only adds the warn variant of the base badge, used by the aged size-anchor
   line on the coin page. */
.badge-warn {
  background: color-mix(in srgb, var(--warn) 14%, transparent);
  color: var(--warn);
}
/* value change colours also step back while numbers are stale */
.stale-dim .delta.up, .stale-dim .delta.down { color: var(--text-muted); }

/* ── coin page ─────────────────────────────────────────────────────────────
   7d tag now carries the change next to the line. */
.spark-tag { display: inline-flex; align-items: baseline; gap: 8px; }

.asset-facts-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-4);
}
.asset-fact { display: grid; gap: 5px; min-inline-size: 0; }
.asset-fact > strong { font-size: var(--fs-md); overflow-wrap: anywhere; }
.asset-kind-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.coin-asset-kind {
  color: var(--brand-indigo);
}
.coin-asset-stable {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border: 1px solid color-mix(in srgb, var(--accent) 36%, var(--line));
  border-radius: var(--r-pill); background: var(--accent-soft);
  color: var(--accent); font-size: var(--fs-xs);
}

@media (max-width: 720px) {
  .asset-facts-grid { grid-template-columns: 1fr; }
}

/* not-found: a designed state with a way forward */
.nf-mean { margin: var(--s-4) 0 0; }
.nf-search { max-inline-size: 28rem; }
.nf-list { margin-block-start: var(--s-3); }
.nf-chip { padding-block: 5px; }

/* ── responsive column sets ────────────────────────────────────────────────
   The default table starts with seven purposeful columns. Comparison mode owns
   one extra result column, so its template is adjusted independently at every
   breakpoint; hidden cells and tracks always disappear together. */
@media (max-width: 1179px) {
  .table-rankings .col-spark { display: none; }
  .table-rankings {
    --cols: 2.5rem minmax(10rem, 1fr) 12rem 6rem 7.5rem 5rem;
  }
  .table-rankings.benchmark-on {
    --cols: 2.5rem minmax(10rem, 1fr) 12rem 6rem 7.5rem 5rem 7.5rem;
  }
  .table-rankings .col-per .unit { inline-size: 3.5rem; }
}

@media (max-width: 1039px) {
  .table-rankings.benchmark-on .col-price { display: none; }
  .table-rankings.benchmark-on {
    --cols: 2.25rem minmax(9rem, 1fr) 12rem 6rem 5rem 7.5rem;
  }
}

@media (max-width: 859px) {
  .table-rankings .col-price { display: none; }
  .table-rankings {
    --cols: 2.25rem minmax(8rem, 1fr) 12rem 6rem 4.75rem;
  }
  .table-rankings.benchmark-on {
    --cols: 2.1rem minmax(7rem, 1fr) 10rem 5.5rem 4.5rem 6.25rem;
  }
}

@media (max-width: 720px) {
  .home-hero.has-holdings {
    padding: var(--s-4); margin-block-end: var(--s-4);
  }
  .home-hero.has-holdings > .view-hook {
    font-size: clamp(26px, 8vw, 34px);
  }

  /* On a phone, per-person becomes the gold subline directly below the coin.
     Normal mode keeps rank, cap and 24h; comparison mode deliberately swaps cap
     and 24h for the repriced value it was opened to inspect. */
  .table-rankings .col-price,
  .table-rankings .col-spark,
  .table-rankings .col-per { display: none; }
  .table-rankings .col-cap,
  .table-rankings .col-chg { display: block; }
  .table-rankings {
    --cols: 1.6rem minmax(0, 1fr) 5.2rem 3rem;
  }
  .table-rankings.benchmark-on .col-cap,
  .table-rankings.benchmark-on .col-chg { display: none; }
  .table-rankings.benchmark-on {
    --cols: 1.6rem minmax(0, 1fr) 6.25rem;
  }

  .table-rankings .row {
    margin-block-start: 6px; padding: 10px 8px;
    border: 1px solid var(--line2); border-radius: var(--r);
    background: var(--surface); box-shadow: var(--shadow-control);
  }
  .table-rankings .row[data-cap-band] + .row[data-cap-band] { --cap-band-start: -7px; }
  .table-rankings .cap-threshold-row + .row[data-cap-band] { --cap-band-start: -15px; }
  .table-rankings .row + .row { border-block-start-color: var(--line2); }
  .table-rankings .row:hover { background: var(--surface2); }
  .table-rankings .row.on {
    box-shadow: inset 2px 0 0 var(--accent), var(--shadow-control);
  }
  [dir='rtl'] .table-rankings .row.on {
    box-shadow: inset -2px 0 0 var(--accent), var(--shadow-control);
  }
  .table-rankings .row-id { gap: 2px; }
  .table-rankings .row-per {
    display: block; overflow: visible;
    color: var(--rarity); font-size: var(--fs-xs); font-weight: 650;
    white-space: normal; text-overflow: clip;
  }
  .table-rankings .col-num { font-size: var(--fs-sm); }
  .table-rankings .col-cap .unit { inline-size: auto; }

  .sort-meta { justify-content: space-between; }
  .sort-row {
    display: flex; flex: 1 1 100%; min-inline-size: 0;
    max-inline-size: 100%; flex-wrap: nowrap;
  }
  .sort-label { flex: none; }
  .sort-seg {
    flex: 1 1 auto; min-inline-size: 0; max-inline-size: 100%;
    overflow-x: auto; scrollbar-width: thin;
  }
  .sort-seg button { white-space: nowrap; }

  .bench-bar {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 10px;
  }
  .bench-picker { grid-column: 1 / -1; }
  .bench-bar .btn { align-self: end; }
}

@media (max-width: 520px) {
  .ranking-tools {
    inline-size: 100%; display: grid; grid-template-columns: minmax(0, 1fr);
  }
  .ranking-tools .input,
  .ranking-tools .bench-optin { inline-size: 100%; width: 100%; }
}