/* The map deck picker (/v2/your-map/, hb-rojbt). Phone first: 390 and 360 px. */
.ym { max-width: 720px; }
.ym-hero { padding: var(--s4) 0 var(--s2); }
.ym-pick { display: grid; gap: var(--s4); min-width: 0; }
.ym-label { display: block; font-weight: 600; margin-bottom: var(--s1); }
.ym-label output { font-weight: 400; color: var(--ink-2); margin-left: var(--s1); }
.ym-input {
  width: 100%; min-width: 0; box-sizing: border-box;
  font: inherit; font-size: 16px; color: var(--ink);
  background: var(--card); border: 1.5px solid var(--line); border-radius: var(--radius-m);
  padding: 10px 12px; min-height: var(--tap, 44px);
}
.ym-find { display: flex; gap: var(--s2); }
.ym-find .ym-input { flex: 1 1 auto; }
.ym-find .btn { flex: 0 0 auto; }
.ym-found { list-style: none; margin: var(--s2) 0 0; padding: 0; display: grid; gap: var(--s1); }
.ym-found button {
  width: 100%; text-align: left; font: inherit; font-size: var(--text-s); color: var(--ink);
  background: var(--paper-2); border: 0; border-radius: var(--radius-s); padding: 8px 10px; cursor: pointer;
  overflow-wrap: anywhere;
}
.ym-presets { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }
.ym-presets .chip { white-space: nowrap; }

.ym-mapwrap { position: relative; overflow: hidden; border-radius: var(--radius-l); }
.ym-map {
  width: 100%; height: min(62vh, 440px); min-height: 280px;
  border-radius: var(--radius-l); overflow: hidden; background: var(--paper-2);
}
/* the frame: 13 cards across, 4 down, fixed at the map's centre; the map moves under it */
.ym-frame {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  pointer-events: none; box-shadow: 0 0 0 9999px rgba(31, 29, 26, 0.28);
  outline: 2.5px solid var(--ink); border-radius: 2px;
}
.ym-frame i {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(31, 29, 26, 0.35) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(31, 29, 26, 0.35) 1px, transparent 1px);
  background-size: calc(100% / 13) 100%, 100% 25%;
}
.ym-mapwrap .ym-map { margin-bottom: 0; }
.ym-maphint { margin: calc(-1 * var(--s2)) 0 0; }

.ym-width input[type="range"] { width: 100%; accent-color: var(--accent); }
.ym-width .tiny { margin: var(--s1) 0 0; }
.ym-check { margin: 0; min-height: 1.5em; font-weight: 600; }
.ym-check.is-ok { color: var(--good); }
.ym-check.is-no { color: var(--accent-press); }
.ym-styles { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--s3); }
.ym-styles legend { padding: 0; }
.ym-style { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap, 44px); }
.ym-qty select { max-width: 8em; }
.ym-qty .tiny { margin: var(--s1) 0 0; }
.ym-error { margin: 0; color: var(--accent-press); }
.ym-thanks { padding: var(--s5); margin: var(--s4) 0; }
.ym .p-terms ul { margin: 0; padding-left: 1.1em; }
.ym .p-terms li { margin: 0 0 var(--s1); }

/* the proof page */
.ym-proof img { display: block; width: 100%; height: auto; border-radius: var(--radius-m); box-shadow: var(--shadow-card); }
.ym-proof .ym-actions { display: grid; gap: var(--s3); margin-top: var(--s4); }
.ym-proof textarea { min-height: 5em; resize: vertical; }