/* ============ Screen: tx — transaction detail ============ */

.tx-screen { position: relative; }

/* Full-bleed gradient hero behind the detail bar + hero block */
.tx-hero-bg {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 420px;
  z-index: 0;
  pointer-events: none;
}
.tx-hero-bg--dd   { background: linear-gradient(180deg, #4A2530 0%, #2A202A 48%, var(--color-bg) 100%); }
.tx-hero-bg--pot  { background: linear-gradient(180deg, #4A3320 0%, #2A2722 48%, var(--color-bg) 100%); }
.tx-hero-bg--card { background: linear-gradient(180deg, #2A3A44 0%, #1A2A34 48%, var(--color-bg) 100%); }

.tx-body { position: relative; z-index: 1; }

/* Detail bar */
.tx-bar { padding-top: 16px; }
.tx-bar-title { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }

/* Hero */
.tx-hero { padding-top: 30px; margin-bottom: 34px; }
.tx-hero-sq {
  font-weight: 800;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12), 0 6px 20px rgba(0,0,0,0.35);
}
.tx-hero-sq .sq__mono { font-weight: 800; font-size: 22px; letter-spacing: -0.01em; }
.tx-hero-sq--pot { background: var(--color-surface-raised); }
.tx-hero-emoji { font-size: 34px; line-height: 1; }
.tx-hero .sq__badge { width: 24px; height: 24px; border-radius: 8px; right: -8px; bottom: -8px; }
.tx-hero .sq__badge svg { width: 14px; height: 14px; }

.tx-hero-row {
  display: flex; align-items: flex-start; gap: 16px;
  margin-top: 28px;
}
.tx-hero-name {
  flex: 1; min-width: 0;
  font-size: 26px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.15;
  padding-top: 5px;
  overflow-wrap: break-word;
}
.tx-hero-right { text-align: right; flex: none; }
.tx-hero-amt .amount { font-size: var(--text-3xl); }
.tx-hero-sub { font-size: 16px; font-weight: 500; color: var(--color-text-muted); margin-top: 3px; }
.tx-hero-note { margin-top: 12px; font-size: 13.5px; font-weight: 600; }
.tx-hero-note--success { color: var(--color-success); }
.tx-hero-note--error { color: var(--color-error); }

/* Menu rows (blue squircle tiles) */
.tx-menu { padding: 5px 18px; }
.tx-menu .row { padding: 15px 0; }
.tx-menu .row__title { font-size: 16px; }
.tx-screen .row__body { min-width: 0; }
.tx-screen .row__title,
.tx-screen .row__sub { display: block; text-align: left; }

/* History header */
.tx-history-title { margin: 26px 2px 10px; font-weight: 600; }

/* Stat card */
.tx-stats { padding: 5px 18px; }
.tx-stat {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 15px 0;
}
.tx-stat + .tx-stat { border-top: 1px solid var(--color-border); }
.tx-stat-left { min-width: 0; }
.tx-stat-label { display: block; font-size: 16.5px; font-weight: 600; }
.tx-stat-sub { display: block; font-size: 13px; color: var(--color-text-muted); margin-top: 2px; }
.tx-stat-value { font-size: 17px; font-weight: 400; color: var(--color-text-muted); white-space: nowrap; }

/* Link rows card (dd) */
.tx-links { padding: 5px 18px; }
.tx-links .row { padding: 16px 0; }
.tx-link-label { display: block; text-align: left; font-size: 16px; font-weight: 600; }
.tx-link-label--link { color: var(--color-link); }
.tx-link-label--error { color: var(--color-error); }

/* Footer (dd) */
.tx-footer {
  margin-top: 24px;
  text-align: center;
  font-size: 13px; line-height: 1.7;
  color: var(--color-text-muted);
}

/* Category card (default variant) */
.tx-cat { padding: 5px 18px; }
.tx-cat .row { padding: 13px 0; }
.tx-change { font-size: 15.5px; font-weight: 600; color: var(--color-link); }

/* Sheets */
.tx-sheet-copy { color: var(--color-text-muted); margin-bottom: 20px; }
.tx-sheet-field { margin-bottom: 16px; }