/* Profile view (mockup 08) — signed-in-as, starting brand, practice mode,
   password cards in a 2-up grid, footer note below. */

.profile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  max-width: 900px;
}

.profile-signed-in-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.profile-avatar {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent-gradient);
  color: #ffffff;
  font-weight: 800;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-signed-in-name {
  font-weight: 700;
  margin: 0;
}

.profile-signed-in-status {
  margin: 0;
  font-size: 0.85rem;
  color: var(--success-ink);
}

/* Practice mode switch — the same segmented pair as the pin card's
   Picture | Video pick, profile-scoped so neither screen can move the
   other. The filled half is the one that is on right now. */
.profile-switch {
  display: flex;
  margin: var(--space-3) 0;
}

.profile-switchbtn {
  font: inherit;
  font-size: 0.85rem;
  padding: 0.45em 1em;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--primary-ink);
}

.profile-switchbtn:first-child {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.profile-switchbtn:last-child {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  border-left: 0;
}

.profile-switchon {
  background: var(--primary);
  color: #ffffff;
  border-color: var(--primary);
}

.profile-switchbtn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* The one change that can really post asks first, right here in the card. */
.profile-practice-confirm {
  margin-top: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--danger);
  border-radius: var(--radius-md);
  background: var(--bg-sunken);
}

.profile-practice-ask {
  margin: 0 0 var(--space-3);
  font-size: 0.9rem;
}

.profile-practice-confirmrow {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.profile-practice-danger {
  background: var(--danger);
  color: #ffffff;
}

.profile-practice-error {
  color: var(--danger-ink);
}

.profile-footnote {
  text-align: center;
  margin-top: var(--space-6);
}

@media (max-width: 720px) {
  .profile-grid {
    grid-template-columns: 1fr;
  }
}

/* Practice or real posting — one row per switch (pin-calendar, U3). */
.profile-togglerow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border);
}

.profile-togglerow:last-of-type {
  border-bottom: none;
}

.profile-togglelbl {
  display: block;
  font-weight: 700;
  font-size: 0.92rem;
}

.profile-togglewhy {
  display: block;
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* The two questions that appear in the card itself, never as a pop-up. */
.profile-practice-warn {
  margin-top: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--sunny);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--sunny) 25%, transparent);
  color: var(--sunny-ink);
}