/* Card editor (namecard app only): builds on global.css tokens and the "Card details" sheet */

.transfer-edit {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.edit-mode {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.edit-mode button {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.edit-mode button span {
  padding: 8px 4px;
}

.edit-mode [aria-pressed="true"] span {
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 0 0 1px var(--line);
}

.edit-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.edit-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.edit-group > .set-label {
  margin-bottom: 0;
}

.edit-role {
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.edit-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.edit-field > span {
  font-family: var(--font-mono);
  font-size: 0.65625rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.edit-field input {
  width: 100%;
  min-width: 0;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  color: var(--ink);
  font: 500 16px var(--font-sans); /* 16px stops iOS zooming in on focus */
}

.edit-field input:focus {
  outline: 2px solid var(--accent-2);
  outline-offset: 1px;
}

.edit-field input[aria-invalid="true"] {
  border-color: #D0021B;
  box-shadow: 0 0 0 1px #D0021B;
}

.edit-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.edit-remove {
  padding: 2px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: none;
  color: var(--muted);
  font: 600 0.625rem var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}

.edit-remove:hover {
  border-color: #D0021B;
  color: #D0021B;
}

.edit-add {
  align-self: flex-start;
}

.edit-buttons {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 44px;
}

/* Logo designs, previewed with your initials on a white tile (the logo sits on the white QR plate) */
.logo-tiles {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.logo-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-width: 0;
  padding: 9px 4px 6px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #FFFFFF;
  cursor: pointer;
  transition: box-shadow 0.2s ease, transform 0.2s var(--ease-out);
}

.logo-tile:active { transform: scale(0.96); }

.logo-tile svg {
  width: 100%;
  max-width: 40px;
  aspect-ratio: 1;
  overflow: visible;
}

.logo-tile small {
  font: 600 0.5625rem var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #7A7A85;
}

.logo-tile[aria-pressed="true"] {
  box-shadow: 0 0 0 2px var(--accent-2);
}

@media (max-width: 360px) {
  .logo-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.bg-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bg-thumb {
  flex: none;
  width: 56px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel) center / cover no-repeat;
}

.bg-thumb.is-empty {
  background-image: repeating-linear-gradient(45deg, var(--line) 0 6px, transparent 6px 12px);
}

.bg-text {
  flex: 1;
  min-width: 0;
  font-size: 0.8125rem;
  color: var(--ink-2);
}

.edit-md {
  width: 100%;
  height: min(56svh, 480px);
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  color: var(--ink);
  font: 400 0.8125rem/1.55 var(--font-mono);
  white-space: pre;
  overflow: auto;
  resize: vertical;
  tab-size: 2;
}

.edit-md:focus {
  outline: 2px solid var(--accent-2);
  outline-offset: 1px;
}

/* Save stays in reach while the form scrolls */
.edit-actions {
  position: sticky;
  bottom: 0;
  z-index: 1;
  padding: 12px 0 4px;
  background: var(--card);
}

/* First use: a big hand-drawn arrow points at the edit button (overlay, no layout change) */
.first-hint {
  position: absolute;
  z-index: 3;
  top: calc(max(6px, calc(var(--pad-y) - 8px)) + 30px);
  left: calc(max(6px, calc(var(--pad-x) - 10px)) + 18px);
  width: 200px;
  height: 130px;
  pointer-events: none;
}

.first-hint.is-bobbing {
  animation: hintBob 1.5s ease-in-out infinite;
}

@keyframes hintBob {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-7px, -7px); }
}

.first-hint-arrow {
  position: absolute;
  top: 0;
  left: 0;
  width: 112px;
  height: 94px;
  overflow: visible;
}

.first-hint-arrow path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.first-hint-arrow .shaft { stroke-dasharray: 1 1.2; }
.first-hint-arrow .halo path { stroke: var(--card); stroke-width: 11; }
.first-hint-arrow .ink path { stroke: var(--accent-2); stroke-width: 5; }

.first-hint-label {
  position: absolute;
  top: 84px;
  left: 62px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 15px 9px 12px;
  border: 0;
  border-radius: 999px;
  background: var(--accent-gradient);
  color: var(--on-accent);
  font: 700 0.875rem/1 var(--font-display);
  letter-spacing: -0.01em;
  white-space: nowrap;
  box-shadow: 0 0 0 3px var(--card), 0 12px 26px -8px rgba(var(--accent-rgb), 0.65);
  pointer-events: auto;
  cursor: pointer;
}

.first-hint-label svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ...and the edit button itself pulses */
.card-transfer.is-hinting {
  color: var(--accent-ink);
}

.card-transfer.is-hinting::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  animation: editHint 1.6s ease-out 4;
}

@keyframes editHint {
  from { box-shadow: 0 0 0 0 rgba(var(--accent-2-rgb), 0.55); }
  to { box-shadow: 0 0 0 12px rgba(var(--accent-2-rgb), 0); }
}