/* ===== UX OVERHAUL — iOS HIG fidelity layer ===== */

/* Prefer system SF over Inter when available */
:root {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
    "Helvetica Neue", system-ui, sans-serif;
  --touch: 44px;
  --list-pad-x: 16px;
  --list-gap: 0px; /* grouped lists share one card */
  --row-min-h: 52px;
  --spring: cubic-bezier(0.32, 0.72, 0, 1);
}

body {
  font-family: var(--font);
  letter-spacing: -0.022em;
  text-rendering: optimizeLegibility;
}

.device {
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Screens: slide from right for sub-pages */
.screen {
  animation: none;
  will-change: transform, opacity;
}
.screen.active {
  display: block;
  animation: screenIn 0.38s var(--spring) both;
}
.screen.sub.active {
  animation: pushIn 0.4s var(--spring) both;
}

@keyframes screenIn {
  from { opacity: 0.6; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@keyframes pushIn {
  from { opacity: 0.85; transform: translateX(28px); }
  to { opacity: 1; transform: none; }
}

/* Large title — true iOS */
.large-title {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--label);
}

/* Grouped list (UITableView insetGrouped) */
.group {
  margin: 0 var(--list-pad-x) 28px;
  background: var(--card);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: none;
  border: 0.5px solid var(--separator);
}
.group .row {
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  min-height: var(--row-min-h);
  padding: 11px 16px;
  background: transparent;
  border-bottom: 0.5px solid var(--separator);
  gap: 12px;
}
.group .row:last-child { border-bottom: none; }
.group .row:active {
  background: rgba(0, 0, 0, 0.04);
  transform: none;
}

/* Standalone rows still soft-card for Explore tiles etc */
.row {
  min-height: var(--row-min-h);
  -webkit-user-select: none;
  user-select: none;
}
.row:active {
  background: rgba(0, 0, 0, 0.03);
}

/* Icon containers — tighter, more iOS */
.glyph {
  width: 30px;
  height: 30px;
  border-radius: 7px;
}
.glyph svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.6;
}
.glyph.lg {
  width: 40px;
  height: 40px;
  border-radius: 10px;
}
.glyph.lg svg {
  width: 20px;
  height: 20px;
}

/* Typography scale closer to iOS */
.row-body strong {
  font-size: 17px;
  font-weight: 400;
  letter-spacing: -0.022em;
  color: var(--label);
}
.row-body span {
  font-size: 15px;
  font-weight: 400;
  color: var(--secondary-label);
  margin-top: 1px;
  letter-spacing: -0.016em;
}

.section {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: -0.08px;
  text-transform: none;
  color: var(--secondary-label);
  padding: 0 4px 7px 20px;
  margin-top: 8px;
}

.footnote, .caption {
  letter-spacing: -0.016em;
}

/* Tab bar — true iOS */
.tabs {
  height: calc(49px + var(--safe-b));
  padding: 0 0 var(--safe-b);
  align-items: stretch;
  background: rgba(247, 246, 243, 0.92);
  border-top: 0.5px solid rgba(0, 0, 0, 0.12);
}
.tab {
  padding-top: 6px;
  gap: 1px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: -0.08px;
  min-height: 49px;
}
.tab svg {
  width: 25px;
  height: 25px;
  stroke-width: 1.5;
}
.tab.on {
  color: var(--orange);
}
.tab.on svg {
  stroke-width: 1.75;
}

/* Fix content under tab */
.screen {
  padding-bottom: calc(49px + var(--safe-b) + 12px);
}
.screen.sub {
  padding-bottom: calc(20px + var(--safe-b));
}
.device.sub-mode .tabs {
  display: none;
}

/* Nav bar — minimal, blur */
.nav {
  min-height: 44px;
  padding: 0 8px 8px 8px;
  background: rgba(247, 246, 243, 0.86);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}
.back {
  width: 36px;
  height: 36px;
  min-width: 36px;
  background: transparent;
  box-shadow: none;
  color: var(--orange);
}
.back:active {
  opacity: 0.5;
  transform: none;
}
.back svg {
  width: 22px;
  height: 22px;
  stroke-width: 2.25;
}
.nav-meta h1 {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.022em;
  text-align: center;
}
.nav-meta p {
  display: none; /* iOS nav is title-only; subtitle is noisy */
}

/* Cards: less shadow, more border like iOS */
.card, .card-lg, .mkt, .plan, .stat, .tile, .cap {
  box-shadow: none;
  border: 0.5px solid var(--separator);
}

.balance {
  border: none;
  box-shadow: 0 8px 24px rgba(48, 176, 122, 0.22);
}

/* Buttons — 50pt height feel / 44 min */
.btn {
  min-height: 50px;
  border-radius: 12px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.022em;
}
.btn:active {
  opacity: 0.72;
  transform: none;
}

/* Chips */
.chip {
  min-height: 32px;
  padding: 6px 14px;
  font-size: 15px;
  font-weight: 500;
  box-shadow: none;
  border: 0.5px solid var(--separator);
  background: var(--card);
}
.chip.on, .chip.on-accent, .chip.on-purple {
  border-color: transparent;
}

/* Search — iOS style */
.search {
  background: rgba(118, 118, 128, 0.12);
  box-shadow: none;
  border-radius: 10px;
  padding: 8px 10px;
  min-height: 36px;
}
.search input {
  font-size: 17px;
  letter-spacing: -0.022em;
}

/* Status bar less heavy */
.status {
  height: 48px;
  padding: 0 22px 6px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.3px;
}
.status .dyn {
  width: 110px;
  height: 32px;
}

/* Hero less exaggerated */
.orb {
  width: 100px;
  height: 100px;
  box-shadow:
    0 12px 32px rgba(59, 130, 246, 0.28),
    0 4px 12px rgba(249, 115, 22, 0.15);
}
.hero h1 {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.hero {
  padding: 20px 24px 12px;
}

/* Composer */
.composer {
  bottom: calc(49px + var(--safe-b) + 6px);
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  border: 0.5px solid var(--separator);
  border-radius: 22px;
  padding: 6px 6px 6px 14px;
}
.composer input {
  font-size: 17px;
}
.composer .send {
  width: 34px;
  height: 34px;
}

/* Reduce visual noise: softer assist */
.assist {
  font-size: 13px;
  font-weight: 400;
  padding: 10px 14px;
  border-radius: 10px;
}

/* Profile avatar scale */
.avatar {
  width: 80px;
  height: 80px;
}
.avatar > svg {
  width: 32px;
  height: 32px;
}

/* Tiles */
.tiles {
  gap: 8px;
}
.tile {
  border: 0.5px solid var(--separator);
  padding: 14px 6px 12px;
}
.tile strong {
  font-size: 13px;
  font-weight: 600;
}
.tile span {
  font-size: 11px;
}

/* Cap cards */
.cap {
  border: 0.5px solid var(--separator);
  margin-bottom: 10px;
}

/* Empty states quieter */
.empty {
  border: 0.5px solid var(--separator);
  box-shadow: none;
}

/* Prevent layout jump */
.px { padding-left: 16px; padding-right: 16px; }

/* Scroll bounce on iOS */
.screen {
  overscroll-behavior-y: contain;
}

/* Kill artificial scale transforms that feel cheap */
.tile:active,
.cap:active,
.row:active {
  transform: none;
}