/* ============================================================================
   Vibe Dashboard v2 — Points screen (Sep-2026 mock, VIB-396 / S2)
   Spec: docs/design/design-upgrade/handoff-src/Vibe Dashboard.dc.html
   (data-screen-label="Points"). Builds on the styles/v2-shell.css kit
   (.v2-card/.v2-card-head/.v2-table/.v2-empty/.v2-loading/.v2-error) and the
   --v-* tokens in styles/vibe-tokens.css. No hardcoded hex: mock values that
   have no token yet are derived with color-mix() from the nearest token and
   annotated "mock:" so S8 can swap them for canonical tokens.
   ============================================================================ */

.pts-view {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ---- shared overlines / badges ---- */
.pts-overline {
  font-family: var(--v-font-mono);
  font-size: 10.5px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--v-text-2);
}
.pts-overline.is-head { font-size: 11px; color: var(--v-text-overline); }
.pts-overline.is-small { font-size: 10px; }
.pts-overline.is-total { font-size: 10.5px; letter-spacing: 1.4px; color: var(--v-text-overline); }

/* ENDED / LIVE status badge (mock: mono 9.5px / 1.3px, radius 5, 3px 8px). */
.pts-status {
  display: inline-flex;
  align-items: center;
  font-family: var(--v-font-mono);
  font-size: 9.5px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--v-text-2);
  /* mock: rgba(255,255,255,.12) */
  border: 1px solid color-mix(in srgb, var(--v-white) 12%, transparent);
  border-radius: var(--v-r-badge);
  padding: 3px 8px;
  white-space: nowrap;
}
.pts-status.is-live {
  color: var(--v-green);
  /* mock: rgba(47,190,138,.35) */
  border-color: color-mix(in srgb, var(--v-green) 35%, transparent);
}

/* TALLYING / SETTLING AT TGE chip (mock: mono 10px / 1.4px, radius 6, 4px 9px). */
.pts-chip {
  align-self: flex-start;
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  font-family: var(--v-font-mono);
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 4px 9px;
  white-space: nowrap;
}
.pts-chip.is-amber {
  color: var(--v-amber);
  border-color: var(--v-border-amber);                                  /* rgba(224,162,60,.3) */
  background: color-mix(in srgb, var(--v-amber) 7%, transparent);       /* mock: rgba(224,162,60,.07) */
}
/* FINAL tag on a settled breakdown (D8 B4 B5): green twin of the amber chip */
.pts-chip.is-green {
  color: var(--v-green);
  border-color: color-mix(in srgb, var(--v-green) 35%, transparent);
  background: color-mix(in srgb, var(--v-green) 7%, transparent);
}
.pts-chip.is-blue {
  color: var(--v-link);
  border-color: color-mix(in srgb, var(--v-link) 30%, transparent);     /* mock: rgba(79,147,255,.3) */
  background: color-mix(in srgb, var(--v-blue) 8%, transparent);        /* mock: rgba(47,107,255,.08) */
}

/* Outlined text-link CTA (mock: 13px/600, 7px 13px, radius 8). */
.pts-outline-link {
  align-self: flex-start;
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--v-border-blue);
  color: var(--v-link);
  font-weight: 600;
  font-size: 13px;
  padding: 7px 13px;
  border-radius: var(--v-r-btn);
  text-decoration: none;
  cursor: pointer;
}
.pts-outline-link:hover { background: var(--v-blue-tint); border-color: var(--v-blue); }
.pts-outline-link span { font-size: 12px; }

/* Shared empty state nested inside a card: drop the kit's own frame. */
.pts-inline-empty { border: 0; border-radius: 0; background: transparent; padding: 36px 22px; }

/* ---- header row: title/subtitle + CURRENT VERSION block (A30 A37) ---- */
.pts-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 6px;
}
.pts-head-title {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -.6px;
  color: var(--v-heading);
}
.pts-head-sub { font-size: 14.5px; color: var(--v-text-2); margin-top: 5px; }
.pts-current { text-align: right; flex-shrink: 0; }
.pts-current-overline {
  font-family: var(--v-font-mono);
  font-size: 10.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--v-text-2);
}
.pts-current-row { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.pts-current-name { font-size: 16px; font-weight: 600; color: var(--v-text); }

/* ---- version cards V1 / V1.5 / V2 (A31) ---- */
.pts-versions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
/* D8-LEGACY: "Show legacy eras" OFF leaves the gamma card alone (mock ptsVerCols 1fr). */
.pts-versions.is-single { grid-template-columns: 1fr; }
.pts-version {
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* mock: border-color rgba(47,190,138,.3) on the live card */
.pts-version.is-live { border-color: color-mix(in srgb, var(--v-green) 30%, transparent); }
.pts-version-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pts-version-total {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -1.2px;
  line-height: 1;
  color: var(--v-heading);
  font-variant-numeric: tabular-nums;
  margin-top: 4px;
}
.pts-version-unit { font-size: 16px; font-weight: 600; letter-spacing: 0; color: var(--v-text-2); }
.pts-version-headline {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.4px;
  line-height: 1.2;
  margin-top: 8px;
  white-space: normal;
  overflow-wrap: anywhere;
  /* FIX1.6b: two-line headlines (e.g. the zero-pending copy) break balanced,
     never leaving one orphan word on the last line. */
  text-wrap: balance;
}
/* P2: one line once the card has room (≥1280 the 3-up cards hold ~252px of text) —
   the size eases from 22px down to fit, never truncates; narrower cards wrap. */
.pts-version { container-type: inline-size; }
@container (min-width: 245px) {
  .pts-version-headline { font-size: clamp(18px, calc(100cqi / 13.4), 22px); }
}
.pts-version-headline.is-amber { color: var(--v-amber); }
.pts-version-headline.is-muted { color: var(--v-text-2); }
.pts-version-headline.is-green { color: var(--v-green); }
.pts-version-body { font-size: 13px; color: var(--v-text-2); line-height: 1.5; }
.pts-version-link {
  align-self: flex-start;
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--v-link);
  cursor: pointer;
}
.pts-version-link:hover { color: var(--v-link-hover); }
.pts-version-chevron { font-size: 11px; }

/* ---- merge explainer card (D1) ---- */
.pts-merge { padding: 12px 16px; gap: 8px; }
.pts-merge-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
}
.pts-merge-title { font-size: 13.5px; font-weight: 600; color: var(--v-text-table); }
.pts-merge-head:hover .pts-merge-title { color: var(--v-text); }
.pts-merge-body { font-size: 13px; color: var(--v-text-2); line-height: 1.6; }

/* ---- open-panel highlight (D5): the card whose panel is open ---- */
.pts-version.is-open {
  /* mock: rgba(79,147,255,.45) */
  border-color: color-mix(in srgb, var(--v-link) 45%, transparent);
}

/* ---- detached-panel notch (D5): diamond under the open card ---- */
.pts-panelwrap { position: relative; margin-top: -6px; }
.pts-notch {
  position: absolute;
  top: -6px;
  width: 11px;
  height: 11px;
  transform: translateX(-50%) rotate(45deg);
  background: var(--v-surface);
  /* mock: 1px rgba(79,147,255,.45) top + left, card border shows the rest */
  border-left: 1px solid color-mix(in srgb, var(--v-link) 45%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--v-link) 45%, transparent);
  z-index: 1;
}
/* notch x = open-card centre: alpha 16.66%, beta 50% (mock M2:851, M2:875) */
.pts-notch--alpha { left: 16.66%; }
.pts-notch--beta { left: 50%; }

/* ---- version-card LP sub-row (D8 B2, mock 10) ----
   One row under the caption: hairlines top + bottom, label 13px, value
   mono 13px. */
.pts-lp-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 0;
  border-top: 1px solid var(--v-border-soft);
  border-bottom: 1px solid var(--v-border-soft);
}
.pts-lp-label { font-size: 13px; color: var(--v-text-table); }
.pts-lp-value {
  font-family: var(--v-font-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--v-text);
}

/* ---- breakdown panels, one frame (D8 B4 B5 B7, mock 11 + 12) ----
   Closed alpha and beta share it: breakdown | activity. The heads share one
   grid row, so both bottom rules sit on the same track line whatever each
   head contains. */
.pts-bd { overflow: hidden; border: 1px solid color-mix(in srgb, var(--v-link) 45%, transparent); }
.pts-bd-cols {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  grid-template-areas: "lhead rhead" "lbody rbody";
}
.pts-bd-head {
  min-height: 52px;
  box-sizing: border-box;
  padding: 10px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--v-border-soft);
}
.pts-bd-head .pts-chip { margin-top: 0; }
.pts-bd-head.is-left { grid-area: lhead; }
.pts-bd-head.is-right { grid-area: rhead; border-left: 1px solid var(--v-border-soft); }
.pts-bd-lbody { grid-area: lbody; display: flex; flex-direction: column; min-width: 0; }
.pts-bd-rbody { grid-area: rbody; border-left: 1px solid var(--v-border-soft); display: flex; flex-direction: column; min-width: 0; }
.pts-bd-sub, .pts-bd-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 22px;
  border-bottom: 1px solid var(--v-border-row);
}
.pts-bd-sub {
  padding: 10px 22px;
  font-family: var(--v-font-mono);
  font-size: 10px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--v-text-3);
  /* mock: rgba(255,255,255,.05) */
  border-bottom-color: color-mix(in srgb, var(--v-white) 5%, transparent);
}
.pts-bd-source { font-size: 13.5px; color: var(--v-text-bright); }
/* raw × rate sits left of the points on one line (mono 11.5px, muted) */
.pts-bd-points { display: flex; align-items: baseline; justify-content: flex-end; gap: 16px; white-space: nowrap; }
/* min-width keeps the raw × rate formulas in one column (mock 11/12) */
.pts-bd-value {
  display: inline-block;
  min-width: 7ch;
  text-align: right;
  font-family: var(--v-font-mono);
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
  color: var(--v-text);
}
.pts-bd-formula {
  font-family: var(--v-font-mono);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  color: var(--v-text-3);
}
.pts-bd-formula.is-sub { display: none; }
/* zero rows dim: label #8B93A7, value #5C6577 */
.pts-bd-row.is-zero .pts-bd-source { color: var(--v-text-2); }
.pts-bd-row.is-zero .pts-bd-value { color: var(--v-text-3); }
/* TOTAL row on #1C244A, pinned to the column bottom */
.pts-bd-total {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 22px;
  background: var(--v-surface-total);
}
.pts-bd-total-value {
  font-family: var(--v-font-mono);
  font-size: 14px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--v-text);
}
.pts-bd-empty, .pts-bd-note { padding: 14px 22px; font-size: 12.5px; color: var(--v-text-3); line-height: 1.55; }
.pts-bd-activity { display: grid; grid-template-columns: 1fr 1fr; }
.pts-bd-cell {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  border-bottom: 1px solid var(--v-border-soft);
}
.pts-bd-cell:nth-child(odd) { border-right: 1px solid var(--v-border-soft); }
.pts-bd-cellvalue {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-family: var(--v-font-mono);
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  color: var(--v-text);
  overflow-wrap: anywhere;
}
.pts-bd-cellvalue.is-green { color: var(--v-green); }
.pts-bd-cellvalue.is-amber { color: var(--v-amber); }
.pts-bd-cellvalue.is-muted { color: var(--v-text-2); }
.pts-bd-cellvalue.is-dash { color: var(--v-text-3); }
.pts-bd-footnote { margin-top: auto; padding: 16px 22px; font-size: 12.5px; color: var(--v-text-3); line-height: 1.55; }

/* ---- gamma breakdown, inline in the card (D4, mock M2:836-844) ---- */
.pts-gamma-panel {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--v-border-soft);
  display: flex;
  flex-direction: column;
}
.pts-gamma-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--v-border-row);
}
.pts-gamma-row.is-total { border-bottom: 0; }
.pts-gamma-label { font-size: 13px; color: var(--v-text-table); }
.pts-gamma-row.is-total .pts-gamma-label { font-weight: 600; color: var(--v-text); }
.pts-gamma-value {
  font-family: var(--v-font-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--v-text);
}
.pts-gamma-note { font-size: 12px; color: var(--v-text-3); line-height: 1.5; margin-top: 2px; }


/* ---- segmented toggle (A33) ---- */
.pts-tabs-row {
  margin-top: 14px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.pts-tabs {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  border-radius: 9px;
  background: var(--v-inset);
  border: 1px solid var(--v-border);
}
.pts-tab {
  padding: 7px 14px;
  border-radius: 7px;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--v-text-2);
  cursor: pointer;
  white-space: nowrap;
}
.pts-tab:hover { color: var(--v-text); }
.pts-tab.is-active { background: var(--v-blue); color: var(--v-white); }
.pts-tab:focus-visible { outline: 2px solid var(--v-blue); outline-offset: 2px; }

/* ---- tab panel wrapper: transparent, keeps the page's vertical rhythm ---- */
.pts-panel { display: flex; flex-direction: column; gap: 18px; }

/* ---- section intros (activity / onboarding) ---- */
.pts-section-intro { display: flex; flex-direction: column; }
.pts-section-title { font-size: 20px; font-weight: 700; letter-spacing: -.3px; color: var(--v-heading); }
.pts-section-sub { font-size: 13.5px; color: var(--v-text-2); margin-top: 4px; }

/* ---- activity totals (A34) ---- */
.pts-totals {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.pts-total {
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pts-total-value {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -.8px;
  line-height: 1;
  color: var(--v-heading);
  font-variant-numeric: tabular-nums;
}
.pts-total-sub { font-size: 12.5px; color: var(--v-text-2); }
.pts-total-sub .is-green { color: var(--v-green); }

/* ---- BY VERSION table (A35) ---- */
.pts-byver { overflow: hidden; }
.pts-byver-head {
  padding: 16px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--v-border-soft);
}
.pts-byver-meta { font-size: 12.5px; color: var(--v-text-2); }
.pts-byver-meta strong { color: var(--v-text); font-weight: 400; }
.pts-byver-scroll { overflow-x: auto; }
.pts-byver-cols, .pts-byver-row {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr 1fr;
  align-items: center;
  min-width: 640px;
}
.pts-byver-cols {
  padding: 11px 22px;
  font-family: var(--v-font-mono);
  font-size: 10px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--v-text-3);
  border-bottom: 1px solid color-mix(in srgb, var(--v-white) 5%, transparent);
}
.pts-byver-row { padding: 14px 22px; border-bottom: 1px solid var(--v-border-row); }
.pts-byver-row.is-total {
  border-bottom: 0;
  background: var(--v-surface-total);                                   /* mock: flat rgb(28,36,74) — VIB-446 */
}
.is-right, .pts-byver-num { text-align: right; }
.pts-byver-version { display: flex; align-items: center; gap: 9px; min-width: 0; }
.pts-byver-name { font-size: 13.5px; font-weight: 600; color: var(--v-text-2); }
.pts-byver-row.is-live .pts-byver-name { color: var(--v-text); }
.pts-byver-tag { font-family: var(--v-font-mono); font-size: 11px; color: var(--v-text-3); }
.pts-byver-num {
  font-family: var(--v-font-mono);
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
  color: var(--v-text-table);
}
.pts-byver-num.is-bright { color: var(--v-text); }
.pts-byver-num.is-dash { color: var(--v-text-3); }
.pts-byver-num.is-total { font-size: 14px; font-weight: 500; color: var(--v-text); }
.pts-byver-num.is-total.is-dash { color: var(--v-text-3); font-weight: 400; }

.pts-footnote { font-size: 12.5px; color: var(--v-text-3); line-height: 1.6; }
.pts-trade-link { margin-top: 2px; }

/* ---- onboarding: your points / network points farmed (A38 A40) ---- */
.pts-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
}
.pts-stat {
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pts-stat + .pts-stat { border-left: 1px solid var(--v-border-soft); }
.pts-stat-value {
  font-size: 52px;
  font-weight: 700;
  letter-spacing: -1.5px;
  line-height: 1;
  color: var(--v-heading);
  font-variant-numeric: tabular-nums;
}
.pts-stat-sub { font-size: 13px; color: var(--v-text-2); }
.pts-stat-sub strong { color: var(--v-text); font-weight: 600; }

/* ---- points ledger table (A41) ---- */
.pts-ledger-total { font-size: 13px; color: var(--v-text-2); }
.pts-ledger-total-value { color: var(--v-green); font-weight: 600; font-variant-numeric: tabular-nums; }

.pts-ledger-table { table-layout: fixed; }
.pts-col-type { width: 35%; }
.pts-col-amount { width: 18%; }
.pts-col-who { width: 30%; }
.pts-col-when { width: 17%; }
.pts-th-who, .v2-table .pts-td-who { padding-left: 24px; }

.pts-type-cell { display: flex; align-items: center; gap: 10px; }
.pts-mobile-meta, .pts-mobile-copy { display: none; }
.pts-dot { width: 7px; height: 7px; border-radius: var(--v-r-pill); flex-shrink: 0; }
.pts-dot.is-blue { background: var(--v-link); }
.pts-dot.is-magenta { background: var(--v-magenta); }
.pts-dot.is-muted { background: var(--v-text-3); }
.pts-type-copy > span:first-child { color: var(--v-text-bright); }

.pts-td-amount { font-family: var(--v-font-mono); font-size: 14px; color: var(--v-green); }
.pts-who-level { color: var(--v-text-table); }
.pts-who-muted { color: var(--v-text-3); }
.pts-td-when { color: var(--v-text-2); font-size: 12.5px; }

/* Era filter chips above the ledger table (kept: filters the ledger only;
   era subtotals now live on the version cards — A56). */
.pts-era-filter { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 20px 0; }
.pts-era-chip {
  font: inherit;
  font-size: 12.5px;
  padding: 6px 12px;
  border-radius: var(--v-r-pill);
  border: 1px solid var(--v-border-soft);
  background: transparent;
  color: var(--v-text-2);
  cursor: pointer;
}
.pts-era-chip:hover { color: var(--v-text); }
.pts-era-chip.is-active {
  background: var(--v-text);
  border-color: var(--v-text);
  color: var(--v-bg);
}
.pts-era-tag {
  margin-left: 8px;
  font-size: 11px;
  color: var(--v-text-3);
  white-space: nowrap;
}

/* ---- mobile (≤900px) — Vibe App (Mobile) ---- */
@media (max-width: 900px) {
  .pts-view, .pts-panel { gap: 15px; }
  .pts-head { display: block; margin: 0; }
  .pts-head-title { font-family: var(--v-font-nav); font-size: 25px; }
  .pts-head-sub { margin-top: 4px; font-size: 13.5px; }
  .pts-current { text-align: left; margin-top: 12px; }
  .pts-current-row { justify-content: flex-start; }

  .pts-versions { grid-template-columns: 1fr; }
  .pts-version { padding: 20px; }
  .pts-version-total { font-family: var(--v-font-nav); font-size: 36px; }

  .pts-notch { display: none; }
  .pts-panelwrap { margin-top: 0; }
  /* D8 B7: both breakdown panels stack — breakdown, then activity */
  .pts-bd-cols { grid-template-columns: 1fr; grid-template-areas: "lhead" "lbody" "rhead" "rbody"; }
  .pts-bd-head.is-right, .pts-bd-rbody { border-left: 0; }
  .pts-bd-head.is-right { border-top: 1px solid var(--v-border-soft); }
  /* FIX1.1 at 390px: the formula drops to a muted second line under the
     SOURCE label; the number keeps its own line. */
  .pts-bd-formula.is-inline { display: none; }
  .pts-bd-formula.is-sub { display: block; margin-top: 2px; }

  .pts-tabs-row { margin-top: 6px; }
  .pts-tabs { width: 100%; }
  .pts-tab { flex: 1; padding: 8px 10px; font-size: 12.5px; text-align: center; }

  .pts-section-title { font-size: 18px; }
  .pts-section-sub { font-size: 13px; }
  .pts-totals { grid-template-columns: 1fr 1fr; gap: 12px; }
  .pts-total { padding: 16px 18px; }
  .pts-total-value { font-size: 24px; }
  .pts-byver-head { flex-direction: column; align-items: flex-start; gap: 4px; }

  .pts-stats { grid-template-columns: 1fr; gap: 15px; overflow: visible; border: 0; border-radius: 0; background: transparent; }
  .pts-stat, .pts-stat + .pts-stat { gap: 8px; padding: 20px; border: 1px solid var(--v-border); border-radius: 14px; background: var(--v-surface); }
  .pts-stat:first-child .pts-stat-value { font-family: var(--v-font-nav); font-size: 46px; }
  .pts-stat:last-child .pts-stat-value { font-family: var(--v-font-nav); font-size: 38px; letter-spacing: -1.2px; }
  .pts-stat-sub { font-size: 12.5px; }
  .pts-desktop-copy { display: none; }
  .pts-mobile-copy { display: inline; }

  .pts-ledger { overflow: hidden; }
  .pts-ledger .v2-card-head { padding: 16px 18px; }
  .pts-ledger .v2-card-head-label { font-size: 10.5px; }
  .pts-ledger-total { font-size: 12.5px; }
  .pts-ledger-table { display: block; width: 100%; table-layout: auto; }
  .pts-ledger-table thead { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .pts-ledger-table tbody { display: block; }
  .pts-ledger-table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--v-border-row); }
  .pts-ledger-table tbody tr:last-child { border-bottom: 0; }
  .pts-ledger-table .v2-td { padding: 0; border: 0; background: transparent; }
  .pts-type-cell { align-items: flex-start; gap: 12px; min-width: 0; }
  .pts-dot { margin-top: 5px; }
  .pts-type-copy { display: flex; min-width: 0; flex-direction: column; color: var(--v-text-bright); font-size: 13.5px; }
  .pts-mobile-meta { display: block; margin-top: 2px; overflow: hidden; color: var(--v-text-2); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
  .pts-td-amount { font-size: 14px; }
  .pts-td-who, .pts-td-when { display: none; }
}