/* You and privacy: identity block, three stat tiles, the privacy switches.
 * The two tappable row shapes share their geometry and their hover ramp — one
 * starts on surface, the other a step lighter on neutral.
 */

.ro-me {
  background: var(--color-bg);
  padding: 66px 18px 14px;
  gap: 13px;
}

/* — header — */
.ro-me-head {
  display: flex;
  align-items: center;
  gap: 11px;
}
.ro-me-title {
  flex: 1;
  font-size: 21px;
}

/* — who you are — */
.ro-me-id {
  display: flex;
  align-items: center;
  gap: 14px;
}
.ro-me-idtext {
  flex: 1;
  min-width: 0;
}
.ro-me-name { font-size: 19px; }
.ro-me-since {
  font-size: 11.5px;
  color: var(--color-neutral-700);
  margin-top: 3px;
}

/* — three numbers — */
.ro-me-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 9px;
}
.ro-me-stat {
  background: var(--color-surface);
  border-radius: 22px;
  padding: 14px 12px;
  text-align: center;
}
.ro-me-statnum { font-size: 22px; }
.ro-me-statlabel {
  font-size: 10.5px;
  color: var(--color-neutral-700);
  margin-top: 2px;
}

.ro-me .ro-kicker { margin-top: 4px; }

/* — the switches, and the way back to the walkthrough — */
.ro-me-row,
.ro-me-again {
  display: flex;
  align-items: center;
  gap: 13px;
  border-radius: 24px;
  padding: 15px 17px;
}
.ro-me-row { background: var(--color-surface); }
.ro-me-again { background: var(--color-neutral-200); }
.ro-me-row:hover,
.ro-me-again:hover { background: var(--color-neutral-300); }
.ro-me-row:active,
.ro-me-again:active { background: var(--color-neutral-400); }

.ro-me-rowtext {
  flex: 1;
  min-width: 0;
}
.ro-me-rowtitle {
  font-size: 14px;
  font-weight: 600;
}
.ro-me-rownote {
  font-size: 11.5px;
  color: var(--color-neutral-700);
  margin-top: 2px;
}

.ro-me-againlabel {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-neutral-900);
}

.ro-me .ro-note {
  line-height: 1.65;
  padding: 8px 6px 0;
}

/* — deleting everything: an accent-tinted row, then a confirm that has to be
     read before either button is the easy one — */
.ro-me-wipe { background: var(--color-accent-100); }
.ro-me-wipe .ro-me-rowtitle { color: var(--color-accent-900); }
.ro-me-wipe .ro-me-rownote { color: var(--color-accent-800); }
.ro-me-wipe:hover { background: var(--color-accent-200); }
.ro-me-wipe:active { background: var(--color-accent-300); }

.ro-me-confirm {
  background: var(--color-accent-200);
  border-radius: 24px;
  padding: 17px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ro-me-confirmtitle {
  font-size: 17px;
  line-height: 1.2;
  color: var(--color-accent-900);
}
.ro-me-confirmnote {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--color-accent-800);
}
.ro-me-confirmacts { display: flex; gap: 8px; }
.ro-me-confirmyes {
  flex: 1;
  height: 44px;
  font-size: 13.5px;
  background: var(--color-accent-700);
  color: var(--color-bg);
}
.ro-me-confirmyes:hover { background: var(--color-accent-800); }
.ro-me-confirmyes:active { background: var(--color-accent-900); }
.ro-me-confirmno {
  height: 44px;
  padding-inline: 18px;
  font-size: 13.5px;
  margin: 0;
  border-color: var(--color-accent-600);
  color: var(--color-accent-900);
}

/* The current value, sitting right of the label. */
.ro-me-againvalue {
  font-size: 12.5px;
  color: var(--color-neutral-700);
  flex: none;
  margin-right: 2px;
}

/* Which build this is. Quiet, but there — so "am I looking at the current
   version?" is answerable by looking rather than by guessing. */
.ro-me-build {
  font: 11px var(--font-body);
  color: color-mix(in srgb, var(--color-text) 34%, transparent);
  text-align: center;
  padding-bottom: 4px;
}