/* Profile page — parchment manuscript style */

/* The parchment itself, the nav, flash messages and buttons: pages/parchment.css */

/* ── Layout ── */
/* From the top, not centred: centred in 80vh, the box sat at a different
   height on every page it is used on (profile, out of tokens, survey), and
   the page jumped between them. */
.profile-screen {
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 2.5rem 1rem 2rem;
}
/* In rem, not px: 420px of box less 3rem of padding a side at the desktop's
   125% root left about 300px for the text. */
.profile-box {
  border: 1px solid rgba(138, 115, 84, 0.3);
  background: rgba(239, 227, 205, 0.35);
  padding: 2rem 2.25rem;
  max-width: 34rem;
  width: 100%;
  animation: riseIn 0.8s ease-out both;
}


/* ── Heading ── */
.profile-heading {
  font-family: 'Cinzel', 'Palatino Linotype', serif;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: #3a2a14;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  text-shadow: 0 1px 0 rgba(255, 245, 220, 0.5);
}

/* ── Fields ── */
.profile-field {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.55rem 0;
  border-bottom: 1px solid rgba(138, 115, 84, 0.2);
}
.profile-label {
  font-family: 'Cinzel', serif;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  color: var(--ink-muted);
  text-transform: uppercase;
}
.profile-value {
  font-family: 'Lora', Georgia, serif;
  font-size: 0.85rem;
  color: #3a2a14;
}
.profile-hint {
  width: 100%;
  text-align: right;
  font-family: 'Lora', Georgia, serif;
  font-size: 0.7rem;
  color: var(--ink-muted);
  font-style: italic;
}

/* ── Divider ── */
.profile-divider {
  border: none;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent 0%,
    #a0895e 20%,
    #8a7354 50%,
    #a0895e 80%,
    transparent 100%
  );
  margin: 1.75rem 0 1.25rem;
  opacity: 0.5;
}

/* ── Out of tokens ── */
.oot-message {
  font-family: 'Lora', Georgia, serif;
  font-size: 0.85rem;
  color: #5a4a30;
  margin-bottom: 1.5rem;
  line-height: 1.6;
}
.oot-options {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.oot-option {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid rgba(138, 115, 84, 0.2);
}
.oot-option-action { align-self: flex-start; margin-top: 0.35rem; }
.oot-back {
  margin-top: 1.25rem;
  text-align: center;
}
hr.profile-divider + .oot-back {
  margin-top: 0;
}

/* ── Actions ── */
.profile-actions {
  text-align: center;
  margin-bottom: 0;
}

/* ── Danger zone ── */
.profile-danger-zone {
  text-align: center;
}

/* ── The Android app's settings (native-only on Profile) ── */
.profile-locale {
  background: transparent;
  border: 1px solid rgba(138, 115, 84, 0.45);
  color: #3a2a14;
  padding: 0.35rem 0.6rem;
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
}
.profile-legal {
  margin: 1rem 0 0.5rem;
  font-family: 'Lora', Georgia, serif;
  font-style: italic;
  font-size: 0.78rem;
  line-height: 2;
}
.profile-legal a { color: #4a4030; text-decoration: none; white-space: nowrap; }

/* ── Responsive ── */
@media (max-width: 480px) {
  .profile-screen { padding: 1.5rem 0.5rem 1.5rem; }
  /* Room for the Hints row's label, state and button on one line at 320px. */
  .profile-label { letter-spacing: 0.1em; }
  .profile-box {
    padding: 1.5rem 1.1rem;
  }
}