/* ============================================================================
   moonmars-profile.css — one account screen, worn by every MoonMars app.

   CANONICAL SOURCE: moonmars/shared/moonmars-profile.css
   Copies are written by moonmars/tools/sync-frame.sh. Edit this, run that.

   The profile button is already the same circle in the same corner on all four
   domains. What it opens was four different things: a page, a screen, a panel
   that slides in and a block at the foot of a section. This is the one screen
   behind all four.

   It borrows --mm-signature from the frame, so it wears the app's colour
   without knowing which app it is. Structure and wording are identical
   everywhere; only the extras block differs, because .io knows about wallets,
   MoonQR knows which code is yours and the museum asks for an organisation.
   ========================================================================= */

.mmp {
  font-family: var(--mm-font, 'Plus Jakarta Sans', system-ui, sans-serif);
  color: inherit;
  max-width: 460px;
}

.mmp h2 {
  font-size: clamp(1.5rem, 4.5vw, 2rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.02em;
  margin: 0 0 10px;
}
.mmp__intro {
  font-size: .92rem;
  line-height: 1.65;
  opacity: .72;
  margin: 0 0 22px;
}
.mmp__intro strong { opacity: 1; font-weight: 700; }

/* ── signed out ──────────────────────────────────────────────────────────── */

.mmp__ways { display: flex; flex-direction: column; gap: 10px; }

.mmp__btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-family: inherit; font-size: .95rem; font-weight: 600;
  color: inherit; background: transparent;
  border: 1px solid rgba(128, 128, 128, .38);
  border-radius: 100px; padding: 13px 24px;
  cursor: pointer; transition: border-color .2s, color .2s;
  -webkit-tap-highlight-color: transparent;
}
.mmp__btn:hover { border-color: var(--mm-signature, currentColor); color: var(--mm-signature, inherit); }
.mmp__btn[hidden] { display: none; }
.mmp__btn svg { width: 18px; height: 18px; flex: none; }

/* Revealed by "Continue with email" rather than shown from the start: two
   fields and two buttons at once reads as a form to fill in, when the usual
   answer here is one tap on Google. */
.mmp__email { display: flex; flex-direction: column; gap: 10px; }
.mmp__email[hidden] { display: none; }
.mmp__email input {
  font-family: inherit; font-size: .95rem; color: inherit;
  background: transparent;
  border: 1px solid rgba(128, 128, 128, .38);
  border-radius: 10px; padding: 12px 14px; width: 100%;
}
.mmp__email input::placeholder { color: inherit; opacity: .45; }
.mmp__email input:focus { outline: none; border-color: var(--mm-signature, currentColor); }

.mmp__send {
  font-family: inherit; font-size: .95rem; font-weight: 700;
  color: #fff; background: var(--mm-signature, #0E0E0E);
  border: 0; border-radius: 100px; padding: 13px 26px;
  cursor: pointer; transition: opacity .2s;
}
.mmp__send:hover { opacity: .88; }
.mmp__send:disabled { opacity: .5; cursor: default; }

.mmp__consent {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: .82rem; line-height: 1.6; opacity: .78;
  cursor: pointer; margin-top: 6px;
}
.mmp__consent input {
  flex: none; width: 15px; height: 15px; margin-top: 3px;
  accent-color: var(--mm-signature, #0E0E0E); cursor: pointer;
}
.mmp__consent a { color: var(--mm-signature, inherit); }

/* ── signed in ───────────────────────────────────────────────────────────── */

.mmp__who {
  display: flex; align-items: center; gap: 14px;
  padding-bottom: 20px; margin-bottom: 20px;
  border-bottom: 1px solid rgba(128, 128, 128, .22);
}
.mmp__ring {
  width: 46px; height: 46px; border-radius: 50%; flex: none;
  background-size: cover; background-position: center; overflow: hidden;
  border: 2px solid var(--mm-signature, currentColor);
  color: var(--mm-signature, inherit);
  display: grid; place-items: center;
  font-size: 1.05rem; font-weight: 800;
}
.mmp__name { display: block; font-size: 1rem; font-weight: 700; line-height: 1.25; }
.mmp__mail { display: block; font-size: .82rem; opacity: .62; margin-top: 2px; word-break: break-all; }

.mmp__field { margin: 0 0 14px; }
.mmp__field label {
  display: block; font-size: .68rem; letter-spacing: .12em;
  text-transform: uppercase; font-weight: 700; opacity: .6; margin: 0 0 6px;
}
.mmp__field input {
  width: 100%; font-family: inherit; font-size: .95rem; color: inherit;
  background: transparent;
  border: 1px solid rgba(128, 128, 128, .38);
  border-radius: 10px; padding: 12px 14px;
}
.mmp__field input:focus { outline: none; border-color: var(--mm-signature, currentColor); }

/* Whatever this app knows that the others do not: a wallet on .io, your code on
   MoonQR, your role on .com. One shared shell, one honest slot for the rest. */
.mmp__extras {
  margin: 22px 0 0; padding-top: 20px;
  border-top: 1px solid rgba(128, 128, 128, .22);
}
.mmp__extras:empty { display: none; }
.mmp__row {
  display: flex; align-items: baseline; gap: 12px;
  font-size: .88rem; padding: 7px 0;
}
.mmp__row dt {
  flex: none; min-width: 108px;
  font-size: .66rem; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 700; opacity: .6;
}
.mmp__row dd { margin: 0; }
.mmp__row dd b { color: var(--mm-signature, inherit); font-weight: 800; }

.mmp__save {
  font-family: inherit; font-size: .95rem; font-weight: 700;
  color: #fff; background: var(--mm-signature, #0E0E0E);
  border: 0; border-radius: 100px; padding: 13px 30px;
  cursor: pointer; transition: opacity .2s; margin-top: 4px;
}
.mmp__save:hover { opacity: .88; }
.mmp__save:disabled { opacity: .5; cursor: default; }

.mmp__out {
  display: block; margin-top: 24px;
  font-family: inherit; font-size: .82rem;
  color: inherit; opacity: .55;
  background: none; border: 0; padding: 0;
  text-decoration: underline; cursor: pointer;
}
.mmp__out:hover { opacity: 1; }

/* One status line for everything: connecting, sent, saved, failed. */
.mmp__note {
  margin-top: 14px; font-size: .84rem; line-height: 1.6;
  opacity: .72; min-height: 1px;
}
.mmp__note.is-ok    { color: #1f7a4d; opacity: 1; }
.mmp__note.is-error { color: #b3261e; opacity: 1; }

/* On a dark surface the two status colours have to lift off the background
   rather than sink into it. .io's mint screen is the reason this exists. */
.mmp--dark .mmp__note.is-ok    { color: #7ee0a5; }
.mmp--dark .mmp__note.is-error { color: #ff9b8a; }
.mmp--dark .mmp__send,
.mmp--dark .mmp__save { color: #0b0b12; background: #fff; }

/* Een keuzelijst moet dezelfde doos zijn als een invoerveld, anders valt hij
   uit de rij. Het pijltje tekenen we zelf, want de systeemversie verschilt per
   browser en per besturingssysteem. */
.mmp__field select {
  width: 100%; font-family: inherit; font-size: .95rem; color: inherit;
  background: transparent;
  border: 1px solid rgba(128, 128, 128, .38);
  border-radius: 10px; padding: 12px 34px 12px 14px;
  -webkit-appearance: none; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 17px center, right 12px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.mmp__field select:focus { outline: none; border-color: var(--mm-signature, currentColor); }
.mmp__field option { color: #0E0E0E; }

.mmp__hint { display: block; margin-top: 6px; font-size: .76rem; opacity: .55; }

/* "of" tussen twee manieren om hetzelfde in te vullen. */
.mmp__or {
  display: flex; align-items: center; gap: 12px; margin: 4px 0 14px;
  font-size: .66rem; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 700; opacity: .45;
}
.mmp__or::before, .mmp__or::after {
  content: ''; flex: 1; height: 1px; background: rgba(128, 128, 128, .3);
}

/* Rolknoppen: je kunt kunstenaar én verzamelaar zijn, dus het zijn schakelaars
   en geen keuzerondjes. Aan = de signatuurkleur van de app. */
.mmp__toggles { display: flex; flex-wrap: wrap; gap: 8px; }
.mmp__toggle {
  font-family: inherit; font-size: .84rem; font-weight: 600;
  color: inherit; background: transparent;
  border: 1px solid rgba(128, 128, 128, .38);
  border-radius: 100px; padding: 9px 18px;
  cursor: pointer; transition: border-color .18s, color .18s, background .18s;
  -webkit-tap-highlight-color: transparent;
}
.mmp__toggle:hover { border-color: var(--mm-signature, currentColor); }
.mmp__toggle[aria-pressed="true"] {
  border-color: var(--mm-signature, currentColor);
  color: var(--mm-signature, inherit);
  background: color-mix(in srgb, var(--mm-signature, #0E0E0E) 10%, transparent);
}

.mmp__check {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: .86rem; line-height: 1.6; cursor: pointer;
}
.mmp__check input {
  flex: none; width: 15px; height: 15px; margin-top: 3px;
  accent-color: var(--mm-signature, #0E0E0E); cursor: pointer;
}

/* ── Je foto ──
   Links het rondje, rechts de twee knoppen. Geen foto: de eerste letter van je
   naam, precies zoals in de kop rechtsboven, zodat het leeg-zijn er ook uitziet
   als iets in plaats van als een gat. */
.mmp__photo { display: flex; align-items: center; gap: 16px; }
.mmp__shot {
  width: 72px; height: 72px; border-radius: 50%; flex: none;
  border: 2px solid var(--mm-signature, currentColor);
  color: var(--mm-signature, inherit);
  display: grid; place-items: center;
  font-size: 1.5rem; font-weight: 800;
  background-size: cover; background-position: center;
  overflow: hidden;
}
.mmp__photo-do { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.mmp__pick {
  font-family: inherit; font-size: .84rem; font-weight: 600; color: inherit;
  border: 1px solid rgba(128, 128, 128, .38); border-radius: 100px;
  padding: 8px 18px; cursor: pointer; transition: border-color .18s, color .18s;
}
.mmp__pick:hover { border-color: var(--mm-signature, currentColor); color: var(--mm-signature, inherit); }
.mmp__drop {
  font-family: inherit; font-size: .76rem; color: inherit; opacity: .55;
  background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer;
}
.mmp__drop:hover { opacity: 1; }
.mmp__drop[hidden] { display: none; }

/* Verwijderen is de enige onomkeerbare knop op dit scherm, dus hij staat apart
   en onderaan, en hij verkondigt zichzelf niet. Deze regels stonden in
   moonmars.com's eigen profile.html toen de knop daar alleen stond; nu de knop
   uit de gedeelde component komt, komt zijn stijl daar ook vandaan. */
.mmp__danger { margin-top: 26px; }
.mmp__danger button {
  font-family: inherit; font-size: .8rem; color: #b3261e;
  background: none; border: 0; padding: 0;
  text-decoration: underline; cursor: pointer;
}
.mmp__danger button[disabled] { opacity: .5; cursor: default; }