/* varioshin.xyz — the name card, what the QR code opens. */

.frame--card { padding-top: 16px; }

.card-name { margin-top: 12px; font-size: clamp(30px, 9vw, 36px); }

/* Contact list ------------------------------------------------------- */
.contact {
  margin-top: 22px;
  width: 100%;
  padding: 6px 16px;
  background: var(--surface);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-chip);
  text-align: left;
}

.contact__row {
  min-height: 70px;
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
}
.contact__row + .contact__row { border-top: 1px solid var(--divider); }

.contact__icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: var(--r-tile);
  background: var(--tile);
  color: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact__text { flex: 1; min-width: 0; }
.contact__label { display: block; font-size: 12px; font-weight: 500; color: var(--label); }
.contact__value {
  display: block;
  margin-top: 2px;
  font-size: 17px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.contact__value--email { font-size: 16px; }

/* Actions ------------------------------------------------------------ */
.actions {
  margin-top: 12px;
  width: 100%;
  display: flex;
  gap: 10px;
}

.action {
  min-height: 58px;
  border-radius: var(--r-button);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s ease, filter 0.15s ease;
}
.action:active { transform: translateY(1px); }

.action--save {
  flex: 1;
  background: var(--green);
  border: 1px solid var(--green);
  color: var(--surface);
}
.action--save:hover { filter: brightness(1.08); color: var(--surface); }

.action--share {
  width: 58px;
  flex-shrink: 0;
  background: var(--surface);
  border: 1px solid var(--hairline);
  color: var(--ink);
}
.action--share:hover { background: var(--tile); }

/* The design is drawn at 390px. Narrower phones (iPhone SE, 375px) lose just
   enough room to wrap the email onto a second line, so claw some back from the
   row's own padding rather than shrinking the type everyone else reads. */
@media (max-width: 389px) {
  .contact { padding-inline: 12px; }
  .contact__row { gap: 10px; }
  .contact__value--email { font-size: 15px; }
}

/* Share feedback. It is the live region for screen readers and the visible
   confirmation for everyone else — the two must not be separate elements,
   or one audience silently gets nothing. */
.toast {
  /* Takes the slack, so it sits just above the buttons and the pair stays
     pinned to the bottom of the frame. */
  margin-top: auto;
  padding-top: 24px;
  min-height: 1.4em;
  font-size: 14px;
  font-weight: 500;
  color: var(--green);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.toast[data-visible] {
  opacity: 1;
  transform: none;
}