/* Liminal Wallet — Editorial
   Tokens transcribed from the app's DesignSystem, not invented here:
   Palette.swift, Typography.swift, Spacing.swift, CornerRadius.swift.
   Near-monochrome paper and ink, one muted indigo accent, muted money hues.
   Numbers are the hero, so color is used sparingly. */

:root {
  --bg:        #FCFCFA;  /* Palette.background */
  --surface:   #FFFFFF;  /* Palette.surface    */
  --ink:       #16161A;
  --ink-2:     #6B6B72;  /* Palette.inkSecondary */
  --accent:    #3D4585;  /* Palette.accent, muted indigo */
  --pos:       #29704D;  /* Palette.moneyPositive */
  --neg:       #9E3833;  /* Palette.moneyNegative */
  --hair:      rgba(0, 0, 0, 0.10);   /* Palette.hairline */

  /* Spacing.swift */
  --xs: 4px; --sm: 8px; --md: 12px; --lg: 16px; --xl: 24px; --xxl: 32px;
  /* CornerRadius.swift */
  --r-sm: 8px; --r-lg: 16px;

  --sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:      #121214;
    --surface: #1F1F21;
    --ink:     #F2F2F0;
    --ink-2:   #9A9AA2;
    --accent:  #9EA8F5;
    --pos:     #70C78F;
    --neg:     #E6857A;
    --hair:    rgba(255, 255, 255, 0.14);
  }
}

:root[data-theme="dark"] {
  --bg:      #121214;
  --surface: #1F1F21;
  --ink:     #F2F2F0;
  --ink-2:   #9A9AA2;
  --accent:  #9EA8F5;
  --pos:     #70C78F;
  --neg:     #E6857A;
  --hair:    rgba(255, 255, 255, 0.14);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.page {
  max-width: 26rem;
  margin: 0 auto;
  padding: clamp(3rem, 12vh, 6rem) var(--xl) var(--xxl);
  display: flex;
  flex-direction: column;
  gap: var(--xl);
}

/* ---------- head ---------- */

.head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sm); }
.icon { border-radius: 12px; display: block; }

h1 {
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
}

/* The tracked-out caps label is a signature of the direction (SectionLabel.swift). */
.label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0;
}

.lede { margin: 0; color: var(--ink-2); text-wrap: pretty; }

/* ---------- card ---------- */

.card {
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  padding: var(--lg);
  display: flex;
  flex-direction: column;
  gap: var(--xs);
}

/* Typography.hero — 52pt bold, tabular */
.hero {
  font-size: 2.6rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: var(--xs) 0 0;
}

.delta {
  font-size: 0.9rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
  margin: 0;
}
.delta.up { color: var(--pos); }

.rule { border: 0; border-top: 1px solid var(--hair); margin: var(--lg) 0 var(--sm); }

.row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--sm);
  padding: var(--sm) 0;
  border-bottom: 1px solid var(--hair);
}
.row:last-child { border-bottom: 0; }

/* CategoryDot.swift */
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--tint); flex: none; }

.name { font-size: 0.95rem; }

.amt {
  font-size: 0.95rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--neg);
  white-space: nowrap;
}
.amt.up { color: var(--pos); }

/* ---------- foot ---------- */

.foot { display: flex; flex-direction: column; gap: var(--sm); }
.foot p { margin: 0; }
.fine { font-size: 0.8rem; color: var(--ink-2); line-height: 1.6; }
a { color: var(--accent); text-underline-offset: 3px; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }