/* Your account. Same press as the rest: warm paper, ink type, one 2px radius,
   one hard offset. Colour fills areas, never tints type.

   Tokens come from ../styles.css, which this page loads first. */

body{
  background:var(--ground);
  color:var(--ink);
  font-family:var(--ui);
  margin:0;
}

.you{
  max-width:520px;
  margin:0 auto;
  /* The top padding clears the phone's status bar, which device.css draws 59px
     tall over the top of the screen on desktop. Matched to the signup page so
     the two sit at the same height. On a real phone the safe-area inset does
     the same job. */
  padding:calc(clamp(72px,10vh,96px) + env(safe-area-inset-top))
          var(--pad)
          calc(var(--pad) * 2 + env(safe-area-inset-bottom));
}

.you-head{ margin-bottom:clamp(20px,5vh,34px); }

.you-back{
  display:inline-block;
  font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-2); text-decoration:none;
  border-bottom:1.5px solid var(--ink);
  padding-bottom:2px;
}

.you-mark{
  font-family:var(--display); font-weight:900;
  font-size:clamp(30px,9vw,44px); letter-spacing:.01em;
  margin:18px 0 0;
}

.you-lead{ color:var(--ink-2); margin:0 0 18px; }

/* ── status ─────────────────────────────────────────────────────
   The one place colour floods. Free is paper with a rule; premium is a solid
   ink field, so the difference reads from across the room rather than needing
   the label to be understood. */
.stat{
  display:block;
  padding:clamp(18px,4.5vw,26px);
  border:1.5px solid var(--ink);
  border-radius:var(--r);
  background:var(--paper);
  box-shadow:var(--offset) var(--offset) 0 var(--ink);
  margin-bottom:clamp(18px,4vh,28px);
}
.stat.is-premium{
  background:var(--ink);
  color:var(--paper);
  box-shadow:var(--offset) var(--offset) 0 var(--joy);
}

.stat-kicker{
  display:block;
  font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-3);
}
.stat.is-premium .stat-kicker{ color:var(--joy); }

.stat-value{
  display:block;
  font-family:var(--display); font-weight:900;
  font-size:clamp(28px,8vw,40px); line-height:1.05;
  margin:8px 0 6px;
}

.stat-note{ display:block; font-size:14px; color:var(--ink-2); }
.stat.is-premium .stat-note{ color:var(--ground); }

/* ── facts ─────────────────────────────────────────────────────── */
.facts{ margin:0 0 clamp(18px,4vh,28px); }

.fact{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:11px 0;
  border-bottom:1.5px solid var(--ink);
}
.fact:first-child{ border-top:1.5px solid var(--ink); }

.fact dt{
  font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-2);
}
.fact dd{
  margin:0; text-align:right;
  font-family:var(--display); font-weight:600; font-size:17px;
  overflow-wrap:anywhere;
}

/* ── blocks ────────────────────────────────────────────────────── */
.block{ margin-bottom:clamp(18px,4vh,28px); }

.block-title{
  font-family:var(--display); font-weight:700;
  font-size:19px; margin:0 0 5px;
}
.block-body{ margin:0 0 12px; font-size:14px; color:var(--ink-2); }

.linkrow{ display:flex; gap:8px; }

.linkbox{
  flex:1 1 auto; min-width:0;
  padding:12px 13px;
  border:1.5px solid var(--ink); border-radius:var(--r);
  background:var(--paper); color:var(--ink);
  font-family:var(--ui); font-size:14px;
}

.you-primary,
.you-ghost{
  display:inline-block;
  padding:12px 17px;
  border:1.5px solid var(--ink); border-radius:var(--r);
  font-family:var(--ui); font-weight:700;
  font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  text-decoration:none; cursor:pointer;
  background:var(--paper); color:var(--ink);
  transition:background .18s var(--ease), color .18s var(--ease);
}
.you-primary{ background:var(--ink); color:var(--paper); }
.you-ghost.is-done{ background:var(--ink); color:var(--paper); }
.you-ghost.is-off{ color:var(--ink-2); }

/* ── ledger ────────────────────────────────────────────────────── */
.ledger{ list-style:none; margin:0; padding:0; }

.ledger li{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding:9px 0;
  border-bottom:1px solid var(--ink-3);
  font-size:14px;
}
.ledger li:last-child{ border-bottom:0; }

.ledger .when{ color:var(--ink-3); font-size:12px; }
.ledger .amount{ font-family:var(--display); font-weight:700; white-space:nowrap; }
.ledger .none{ color:var(--ink-3); }

/* ── dev ───────────────────────────────────────────────────────── */
.dev{
  padding:clamp(14px,3.5vw,20px);
  border:1.5px dashed var(--ink-3);
  border-radius:var(--r);
}
.devrow{ display:flex; flex-wrap:wrap; gap:8px; }