/* ============================================================================
   Vibe Dashboard v2 — Volume screen
   Sep-2026 design refresh R4 (VIB-430): docs/design/dashboard-refresh-sep15/
   mock/volume.html (data-screen-label="Volume"). All-version hero, version
   selector, page-level venue toggle, scoped hairline tiles, one tabbed card.
   Builds on styles/v2-shell.css's shared kit (.v2-card, .v2-badge, .v2-empty/
   .v2-loading/.v2-error). Tokens only from styles/vibe-tokens.css.
   ============================================================================ */

.v2-volume-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 16px;
  margin-bottom: 6px;
}
.v2-volume-head-copy { flex: 1 1 260px; min-width: 0; }
.v2-volume-title {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -.6px;
  color: var(--v-heading);
}
.v2-volume-subtitle { font-size: 14.5px; color: var(--v-text-2); margin-top: 5px; }
.v2-volume-snapshot { text-align: right; flex-shrink: 0; }
.v2-volume-snapshot-label {
  font-family: var(--v-font-mono);
  font-size: 10.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--v-text-2);
}
.v2-volume-snapshot-value { font-size: 16px; font-weight: 600; color: var(--v-text); margin-top: 3px; }

/* ---------- hairline stat rows: hero (CV3/CV15) + scoped tiles (CV6) ---------- */

.v2-volume-hairline {
  display: grid;
  gap: 1px;
  background: var(--v-border-soft);
  border: 1px solid var(--v-border);
  border-radius: var(--v-r-card);
  overflow: hidden;
}
.v2-volume-hero { grid-template-columns: 1.4fr 1fr; }
.v2-volume-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.v2-volume-tiles.is-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.v2-volume-cell {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
  padding: 18px 20px;
  background: var(--v-surface);
}
.v2-volume-cell.is-hero { padding: 22px 24px; }
.v2-volume-cell-label {
  font-family: var(--v-font-mono);
  font-size: 10.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--v-text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v2-volume-cell-value {
  height: 28px;
  display: flex;
  align-items: center;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.6px;
  color: var(--v-heading);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.v2-volume-cell.is-hero .v2-volume-cell-value {
  height: auto;
  font-size: 40px;
  letter-spacing: -1.2px;
  line-height: 1.1;
}
.v2-volume-cell-value.is-muted { color: var(--v-text-3); }
.v2-volume-cell-sub {
  font-size: 12px;
  color: var(--v-text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v2-volume-cell.is-hero .v2-volume-cell-sub { font-size: 12.5px; color: var(--v-text-2); white-space: normal; }
/* L13 FIX1: the scoped tiles' subs wrap instead of clipping at EVERY width,
   so the inline basis chip (ESTIMATED on the TVL tiles, MEASURED on volume)
   never vanishes behind the ellipsis. The ≤760 block still puts the chip on
   its own line. */
.v2-volume-tiles .v2-volume-cell-sub { white-space: normal; overflow: visible; text-overflow: clip; }

/* ---------- version selector (CV1/CV2) ---------- */

.v2-volume-versions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.v2-volume-version {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--v-border);
  border-radius: var(--v-r-card);
  background: var(--v-surface);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.v2-volume-version:hover { border-color: var(--v-border-well); }
.v2-volume-version:focus-visible { outline: 2px solid var(--v-link); outline-offset: 2px; }
.v2-volume-version.is-picked {
  border-color: color-mix(in srgb, var(--v-link) 50%, transparent);
  background: var(--v-blue-tint);
}
.v2-volume-version-badge {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--v-border-well);
  border-radius: 10px;
  background: var(--v-inset);
  font-family: var(--v-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  color: var(--v-text-2);
}
.v2-volume-version.is-picked .v2-volume-version-badge { color: var(--v-link); }
.v2-volume-version-copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.v2-volume-version-line { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
.v2-volume-version-name { font-size: 15px; font-weight: 600; color: var(--v-text-table); }
.v2-volume-version.is-picked .v2-volume-version-name { color: var(--v-text); }
.v2-volume-version-pill {
  font-family: var(--v-font-mono);
  font-size: 9.5px;
  letter-spacing: 1.3px;
  color: var(--v-text-2);
  border: 1px solid color-mix(in srgb, var(--v-white) 12%, transparent);
  border-radius: var(--v-r-badge);
  padding: 3px 8px;
}
.v2-volume-version-pill.is-live {
  color: var(--v-green);
  border-color: color-mix(in srgb, var(--v-green) 35%, transparent);
}
.v2-volume-version-window { font-family: var(--v-font-mono); font-size: 11px; line-height: 1.4; color: var(--v-text-3); }

/* ---------- page-level Majors | Vibecaps toggle + scope note (CV5) ---------- */

.v2-volume-scope-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}
.v2-volume-venue-toggle {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--v-border);
  border-radius: 9px;
  background: var(--v-inset);
}
.v2-volume-venue {
  appearance: none;
  border: 0;
  border-radius: var(--v-r-icon);
  padding: 7px 14px;
  background: transparent;
  color: var(--v-text-2);
  font-family: var(--v-font);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: color .15s ease, background .15s ease;
}
.v2-volume-venue:hover { color: var(--v-text); }
.v2-volume-venue.is-active { background: var(--v-blue); color: var(--v-white); }
.v2-volume-venue:focus-visible { outline: 2px solid var(--v-link); outline-offset: 1px; }
.v2-volume-scope-note { font-size: 12.5px; color: var(--v-text-3); }

/* ENDED reads quieter than LIVE — kept for other .v2-badge users. */
.v2-badge.is-muted {
  color: var(--v-text-3);
  border-color: color-mix(in srgb, var(--v-white) 12%, transparent);
  background: transparent;
}

/* ---------- the tabbed card (CV7) ---------- */

.v2-volume-tab-card { border-radius: var(--v-r-card); }
.v2-volume-tab-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 20px;
  padding: 0 22px;
  border-bottom: 1px solid var(--v-border-soft);
}
.v2-volume-tabs { display: flex; align-items: center; gap: 22px; }
.v2-volume-tab {
  appearance: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 16px 0 14px;
  background: transparent;
  color: var(--v-text-2);
  font-family: var(--v-font);
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.v2-volume-tab:hover { color: var(--v-text); }
.v2-volume-tab.is-active { color: var(--v-text); border-bottom-color: var(--v-link); }
.v2-volume-tab:focus-visible { outline: 2px solid var(--v-link); outline-offset: 2px; }
.v2-volume-tab-scope { font-size: 12.5px; color: var(--v-text-2); padding: 8px 0; }

/* Grid tables (CV11): mono 10px heads, 13.5px mono cells, 22px side padding. */
.v2-volume-grid-head,
.v2-volume-grid-row {
  display: grid;
  align-items: center;
  gap: 0 12px;
  padding: 13px 22px;
  border-bottom: 1px solid var(--v-border-row);
}
.v2-volume-grid-head {
  padding-top: 11px;
  padding-bottom: 11px;
  font-family: var(--v-font-mono);
  font-size: 10px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--v-text-3);
  border-bottom-color: color-mix(in srgb, var(--v-white) 5%, transparent);
}
.v2-volume-grid .is-right { text-align: right; }
.v2-volume-levels-grid .v2-volume-grid-head,
.v2-volume-levels-grid .v2-volume-grid-row { grid-template-columns: 0.8fr 1fr 1.2fr 1fr; }
.v2-volume-wallets-grid .v2-volume-grid-head,
.v2-volume-wallets-grid .v2-volume-grid-row { grid-template-columns: 0.5fr 1.7fr 1fr 0.7fr 0.9fr; }
.v2-volume-days-grid .v2-volume-grid-head,
.v2-volume-days-grid .v2-volume-grid-row { grid-template-columns: 1.2fr 1fr 1fr; }
.v2-volume-days-grid.has-tvl .v2-volume-grid-head,
.v2-volume-days-grid.has-tvl .v2-volume-grid-row { grid-template-columns: 1.2fr 1fr 1fr 1fr 1fr; }
.v2-volume-grid > * > span { min-width: 0; }

.v2-volume-num {
  text-align: right;
  font-family: var(--v-font-mono);
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
  color: var(--v-text-table);
}
.v2-volume-num.is-left { text-align: left; }
.v2-volume-num.is-strong { color: var(--v-text); }
.v2-volume-num.is-complete { color: var(--v-green); }
.v2-volume-num.is-muted { color: var(--v-text-3); }

.v2-volume-account {
  overflow: hidden;
  font-size: 13.5px;
  color: var(--v-text);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.v2-volume-snapshot-cell { font-size: 13px; color: var(--v-text-2); }
.v2-volume-muted { color: var(--v-text-3); }
.v2-volume-mono { font-family: var(--v-font-mono); font-size: 12.5px; color: var(--v-text-2); }

.v2-volume-amount {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}
.v2-volume-amount-value {
  font-family: var(--v-font-mono);
  font-size: 13.5px;
  color: var(--v-text);
  font-variant-numeric: tabular-nums;
}
.v2-volume-amount-value.is-zero { color: var(--v-text-3); }

/* Level chip (CV18) — L1/L2 tinted, L3+ transparent. */
.v2-level-chip {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: var(--v-r-badge);
  font-family: var(--v-font-mono);
  font-size: 10.5px;
  letter-spacing: .8px;
}
.v2-level-chip-l1 {
  color: var(--v-link);
  border-color: color-mix(in srgb, var(--v-link) 30%, transparent);
  background: color-mix(in srgb, var(--v-blue) 8%, transparent);
}
.v2-level-chip-l2 {
  color: var(--v-link-hover);
  border-color: color-mix(in srgb, var(--v-link-hover) 30%, transparent);
  background: color-mix(in srgb, var(--v-link-hover) 6%, transparent);
}
.v2-level-chip-l3 {
  color: var(--v-text-3);
  border-color: color-mix(in srgb, var(--v-white) 10%, transparent);
  background: transparent;
}

/* Card foot (CV12) and the wallets range + pager (CV9). */
.v2-volume-card-foot { padding: 14px 22px; font-size: 12.5px; color: var(--v-text-3); }
.v2-volume-card-foot.is-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.v2-volume-pager { display: flex; align-items: center; gap: 6px; }
.v2-volume-page-btn {
  appearance: none;
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  border: 1px solid var(--v-border-well);
  border-radius: var(--v-r-btn);
  background: transparent;
  color: var(--v-text-2);
  font-family: var(--v-font-mono);
  font-size: 13px;
  cursor: pointer;
}
.v2-volume-page-btn:hover:not(:disabled) { color: var(--v-text); border-color: var(--v-border-blue); }
.v2-volume-page-btn.is-active {
  color: var(--v-text);
  border-color: color-mix(in srgb, var(--v-link) 50%, transparent);
  background: var(--v-blue-tint);
}
.v2-volume-page-btn:disabled { color: var(--v-text-3); cursor: default; opacity: .6; }
.v2-volume-page-btn:focus-visible { outline: 2px solid var(--v-link); outline-offset: 1px; }
.v2-volume-page-gap { padding: 0 4px; color: var(--v-text-3); }

/* A failed scoped load: the shell's .v2-error, flattened into the tab card. */
.v2-volume-tab-card .v2-error { border: 0; border-radius: 0; background: transparent; }

/* Daily history empty state (CV10). */
.v2-volume-history-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 56px 24px 60px;
  text-align: center;
}
.v2-volume-chip {
  margin-bottom: 4px;
  padding: 4px 9px;
  border: 1px solid color-mix(in srgb, var(--v-white) 12%, transparent);
  border-radius: var(--v-r-badge);
  font-family: var(--v-font-mono);
  font-size: 10px;
  letter-spacing: 1.3px;
  color: var(--v-text-2);
}
.v2-volume-history-title { font-size: 14px; font-weight: 600; color: var(--v-text-table); }
.v2-volume-history-sub { max-width: 420px; font-size: 12.5px; line-height: 1.6; color: var(--v-text-3); }

/* Closing TGE/multiplier footnote (VIB-451): the shared PointsDisclaimer
   (ui.jsx, .v2-disclaimer in v2-shell.css) — no page-local rule. */

/* Kept intentionally (F4): the hook the ≤760 block used to hide. The stacked-list
   markup is gone, so this matches nothing — restoring it keeps the desktop
   stylesheet byte-identical outside the media block. */
.v2-volume-mobile-list { display: none; }

/* ---------- mobile app (≤760px) — matches network/tasks' single breakpoint (B12) ---------- */
@media (max-width: 760px) {
  .v2-volume-head { display: block; }
  /* B11: LAST SNAPSHOT stays visible and wraps below the title, left-aligned —
     it must never go display:none. */
  .v2-volume-snapshot { text-align: left; margin-top: 10px; }
  /* P-VL-1: page font (never the nav font), 30px/700 title, 14.5px sub. */
  .v2-volume-title { font-family: var(--v-font); font-size: 30px; font-weight: 700; letter-spacing: -.6px; }
  .v2-volume-subtitle { margin-top: 5px; font-size: 14.5px; }

  /* P-VL-3: hero value 40px/700 page font, cell pad 22px 24px, gap 7. */
  .v2-volume-hero { grid-template-columns: 1fr; }
  .v2-volume-cell.is-hero { padding: 22px 24px; }
  .v2-volume-cell.is-hero .v2-volume-cell-value { font-family: var(--v-font); font-size: 40px; font-weight: 700; letter-spacing: -1.2px; }
  /* P-VL-7: tiles pad 18px 20px, value 24px in an h28 row (page font), gap 7, sub 12px. */
  .v2-volume-tiles.is-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v2-volume-cell { padding: 18px 20px; gap: 7px; }
  .v2-volume-cell-value { height: 28px; font-family: var(--v-font); font-size: 24px; letter-spacing: -.6px; }
  .v2-volume-cell-sub { font-size: 12px; }
  /* P-VL-4: keep the badge, re-skinned as its OWN LINE under the value at the
     mock chip spec (h22, 10px mono, ls 1.3). Block-level flex + fit-content
     forces the line break; the hook class is added in basis-badge.jsx:18. */
  .v2-volume-cell-sub .v2-basis-chip {
    display: flex;
    width: fit-content;
    align-items: center;
    height: 22px;
    margin-top: 7px;
    padding: 0 8px;
    font-family: var(--v-font-mono);
    font-size: 10px;
    letter-spacing: 1.3px;
  }

  /* P-VL-5: versions gap 12, card pad 14px 16px. */
  .v2-volume-versions { grid-template-columns: 1fr; gap: 12px; }
  .v2-volume-version { padding: 14px 16px; }
  /* P-VL-6: the pill must NOT stretch — width auto, fixed-size buttons; the
     scope note stays on the row, right-aligned (the row itself wraps). */
  .v2-volume-venue-toggle { width: auto; }
  .v2-volume-venue { flex: none; padding: 7px 14px; }
  .v2-volume-scope-note { margin-left: auto; font-size: 12.5px; text-align: right; }

  /* P-VL-9: card r12, head pad 0 22px, tabs gap 22 with NO scroll (short
     labels fit), tab 13.5px pad 16/14, foot pad 14px 22px. */
  .v2-volume-tab-card { overflow: hidden; border-radius: 12px; }
  .v2-volume-tab-head { padding: 0 22px; }
  .v2-volume-tabs { column-gap: 22px; row-gap: 0; flex-wrap: wrap; overflow-x: auto; }
  .v2-volume-tab { font-size: 13.5px; padding: 16px 0 14px; }
  .v2-volume-card-foot { padding: 14px 22px; }

  /* P-VL-10 / P-VL-11 (F4): the desktop grids stay — 4-col levels and 5-col
     wallets render WITH their mono header rows inside an overflow-x:auto
     scroller with a min-width so no cell clips. The stacked-list markup and
     its rules are deleted (see volume.jsx). */
  .v2-volume-table-scroll { overflow-x: auto; }
  .v2-volume-levels-grid { min-width: 560px; }
  .v2-volume-wallets-grid { min-width: 640px; }
  .v2-volume-daily { overflow-x: auto; }
  .v2-volume-days-grid { min-width: 420px; }

  /* P-VL-11: pager buttons are 32px squares; the foot keeps the range note +
     pager right-aligned in ONE wrapping row. */
  .v2-volume-card-foot.is-pager { gap: 12px 20px; }
  .v2-volume-pager { gap: 4px; }
  .v2-volume-page-btn { min-width: 32px; width: 32px; height: 32px; padding: 0; font-size: 12px; }

  /* P-VL-12: null-empty at mock metrics — pad 56px 22px centred, chip at
     h22/10px/mono spec. Title/sub sizes already match the mock. */
  .v2-volume-history-empty { padding: 56px 22px; gap: 10px; }
  .v2-volume-chip { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; font-size: 10px; }

  .v2-volume-tab-card .v2-empty { font-size: 12.5px; }
}

/* CELL-STATES (2026-09-22): HistoryTab Points column tracks. Desktop only —
   the ≤760px block above is untouched (the scroller absorbs the column). */
.v2-volume-days-grid.has-points .v2-volume-grid-head,
.v2-volume-days-grid.has-points .v2-volume-grid-row { grid-template-columns: 1.2fr 1fr 1fr 0.9fr; }
.v2-volume-days-grid.has-points.has-tvl .v2-volume-grid-head,
.v2-volume-days-grid.has-points.has-tvl .v2-volume-grid-row { grid-template-columns: 1.2fr 1fr 1fr 1fr 1fr 0.9fr; }