/* me.css — storyarc Me tab (design screen 09). STORY_ARC.md §7b/§7c.
 *
 * Two variants share the same page frame: a guest upsell (eyebrow +
 * serif headline + italic dek + settings list with Notifications dimmed
 * + warm-bg Sign-in row that lands on /login/) and the signed-in card
 * (52px avatar + name + email + 3-up activity strip + settings +
 * Sign-out as a text link).
 *
 * §7c replaced the §7b inline Google CTA with the Sign-in row — /login/
 * is the single sign-in surface and owns the §5j native Google bridge.
 *
 * Activity-strip values are rendered "—" placeholders — real per-user
 * reading-event tracking lands in §7e (see STORY_ARC.md). Reads only
 * tokens.css custom properties.
 */

/* ── Page frame ──────────────────────────────────────────────────── */

.me {
  max-width: 600px;
  margin-inline: auto;
  padding: 20px 20px 24px;
}

/* ── Signed-in profile card ──────────────────────────────────────── */

.me__profile {
  padding-bottom: 18px;
  border-bottom: 1px solid var(--rule);
}

.me__profile-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.me__avatar {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: oklch(0.78 0.10 60);
  color: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1;
  overflow: hidden;
}

.me__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.me__profile-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.me__name {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.375rem;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--text-1);
  overflow-wrap: anywhere;
}

.me__email {
  margin: 0;
  /* `.eyebrow` already supplies mono + caps + 0.6875rem + text-3. */
}

/* ── Activity strip — 3-up. Values stubbed at "—" until §7e. ─────── */

.me__activity {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.me__activity-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.me__activity-value {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--text-1);
}

.me__activity-label {
  /* Smaller than the default `.eyebrow` (0.6875rem) — matches the JSX. */
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  line-height: 1.2;
}

/* ── Settings list ───────────────────────────────────────────────── */

.me__settings {
  margin-top: 26px;
}

.me__settings-title {
  display: block;
  margin: 0 0 8px;
}

.me__settings-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.me__settings-row {
  border-top: 1px solid var(--rule);
}

.me__settings-row:first-child {
  border-top: none;
}

.me__settings-row--dimmed {
  opacity: 0.5;
}

.me__settings-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 0;
  text-decoration: none;
  color: inherit;
  transition: background-color 120ms ease;
}

.me__settings-link:active {
  background: var(--surface-1);
}

@media (hover: hover) {
  .me__settings-link:hover {
    background: var(--surface-1);
  }
}

.me__settings-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.me__settings-label {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--text-1);
}

.me__settings-sub {
  /* `.eyebrow` supplies the mono/caps base. */
}

.me__settings-caret {
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: 0.875rem;
  color: var(--text-3);
  line-height: 1;
}

/* ── Sign-out — text link, never destructive red. ────────────────── */

.me__signout-form {
  margin-top: 28px;
}

.me__signout {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--text-2);
  padding: 4px 0;
  background: none;
  border: 0;
  cursor: pointer;
}

.me__signout:hover,
.me__signout:active {
  color: var(--text-1);
}

.me__joined {
  display: block;
  margin-top: 4px;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
}

/* ── Guest variant ───────────────────────────────────────────────── */

.me--guest {
  /* same frame as .me */
}

.me__head {
  padding-bottom: 0;
}

.me__eyebrow {
  display: block;
}

.me__title {
  margin: 8px 0 0;
  font-family: var(--serif);
  font-size: 1.875rem;
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--text-1);
  text-wrap: balance;
}

.me__dek {
  margin: 10px 0 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text-2);
  text-wrap: pretty;
}

.me__settings--guest {
  margin-top: 32px;
}

/* ── Sign-in row — guest primary CTA (§7c) ───────────────────────── */

/* Neutral card fill — rust text + chevron carry the CTA signal without
   the warning-color association of accent-soft. The Me page has no
   other cards, so being the only card on the page still reads as the
   primary action. Routes to /login/, which owns the Google sign-in
   surface and §5j native bridge. */
.me__signin {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 28px;
  padding: 16px 18px;
  background: var(--surface-1);
  border-radius: 4px;
  text-decoration: none;
  color: inherit;
  transition: opacity 120ms ease;
}

.me__signin:active {
  opacity: 0.85;
}

@media (hover: hover) {
  .me__signin:hover {
    opacity: 0.9;
  }
}

.me__signin-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.me__signin-label {
  font-family: var(--serif);
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--accent-ink);
}

.me__signin-sub {
  color: var(--accent-ink);
  opacity: 0.72;
}

.me__signin-caret {
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: 0.9375rem;
  color: var(--accent-ink);
  line-height: 1;
}

/* ── Me sub-pages — shared structural shell (Reading, About) ─────── */

.me-subpage {
  max-width: 600px;
  margin-inline: auto;
  padding: 20px 20px 24px;
}

.me-subpage__back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  color: var(--accent-ink);
  font-family: var(--sans);
  font-size: 0.875rem;
  letter-spacing: -0.005em;
  padding: 4px 0;
}

.me-subpage__back-caret {
  font-family: var(--mono);
  font-size: 1.0625rem;
  line-height: 1;
}

.me-subpage__title {
  margin: 8px 0 24px;
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--text-1);
}

.me-subpage__section {
  margin-top: 24px;
}

.me-subpage__section-label {
  margin: 0 0 10px;
  display: block;
}

/* ── Me → Reading sub-page (TWEAKS §4) ────────────────────────────── */

/* Segmented control — three pills sharing one border-radius so they
   read as one control rather than three independent buttons. */
.me-reading__theme {
  display: flex;
  border: 1px solid var(--rule);
  border-radius: 6px;
  overflow: hidden;
  background: var(--surface-1);
}

.me-reading__theme-option {
  flex: 1;
  appearance: none;
  background: transparent;
  border: 0;
  border-left: 1px solid var(--rule);
  padding: 11px 8px;
  font-family: var(--sans);
  font-size: 0.9375rem;
  color: var(--text-2);
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}

.me-reading__theme-option:first-child {
  border-left: 0;
}

.me-reading__theme-option.is-active {
  background: var(--surface-2);
  color: var(--text-1);
  font-weight: 500;
}

@media (hover: hover) {
  .me-reading__theme-option:hover:not(.is-active) {
    background: var(--surface-2);
    color: var(--text-1);
  }
}

.me-reading__hint {
  margin: 10px 0 0;
  color: var(--text-3);
}

/* ── Me → About sub-page (TWEAKS §7) ──────────────────────────────── */

.me-about__body {
  margin: 0;
  color: var(--text-2);
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.55;
}

/* Contact email — card-like so the mailto target is obvious to thumb
   and to a Play reviewer scanning for "easy to find" contact info. */
.me-about__contact {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 12px;
  padding: 14px 16px;
  background: var(--surface-1);
  border-radius: 4px;
  text-decoration: none;
  color: inherit;
}

.me-about__contact-label {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 500;
  color: var(--accent-ink);
  word-break: break-all;
}

.me-about__contact-sub {
  color: var(--text-3);
}

.me-about__hint {
  margin: 10px 0 0;
  color: var(--text-3);
}

.me-about__version {
  color: var(--text-3);
}

/* TWEAK 3 diagnostic — collapsed by default; muted + monospaced so token
   tails read as data, not prose. */
.me-about__diag {
  opacity: 0.7;
}

.me-about__diag-summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.me-about__diag-summary::-webkit-details-marker { display: none; }
.me-about__diag-summary h2 { margin: 0; }
.me-about__diag-summary::after {
  content: "›";
  margin-left: auto;
  color: var(--text-3);
  transition: transform 0.15s ease;
}
.me-about__diag-details[open] .me-about__diag-summary::after {
  transform: rotate(90deg);
}

.me-about__diag-list {
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.me-about__diag-list dt {
  margin: 0;
  color: var(--text-3);
}

.me-about__diag-list dd {
  margin: 2px 0 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85rem;
  color: var(--text-2);
  word-break: break-all;
}