/* /me/<n> (js/pages/setup.js): drop setup, a port of design/drop/page.html. The 100 artworks on a grey plate
   on the left, Apple's configurator on the right: a heading over each choice and air between them. On a phone
   the plate stays in sight under the bar while the settings scroll, so every change shows. All under .p-setup:
   app.css has its own .drop, .stage, .field, .cta and .link. */
.p-setup { --line-hover: #86868b; --ease: cubic-bezier(.32, .72, 0, 1); }
.p-setup .su-main { display: grid; gap: 28px; padding-top: 20px; }
@media (min-width: 960px) {
  .p-setup .su-main, .p-setup .su-page { grid-template-columns: minmax(0, 1fr) 360px; column-gap: 72px; align-items: start; }
  .p-setup .su-stage { position: sticky; top: 92px; }
}
/* The prototype's page is 1136 wide inside, the site's 1076: a wide screen gives this page the 60 back, so the
   plate is as big as there. */
@media (min-width: 1120px) {
  .p-setup { margin-inline: max(-30px, (1120px - 100vw) / 2); }
}

/* The collection: 100 white tiles on a soft grey plate, sized as in the prototype: the whole column, or the
   screen's height less the bar and some air when that is less. */
.p-setup .su-stage { display: grid; justify-items: center; }
.p-setup .su-frame { position: relative; width: min(100%, calc(100svh - 150px)); min-width: min(100%, 420px); aspect-ratio: 1; background: var(--tint); border-radius: var(--radius); padding: 14px; }
.p-setup .su-tiles { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; height: 100%; transition: opacity .3s; }
.p-setup .su-tile { display: block; aspect-ratio: 1; padding: 0; background: #fff; border-radius: 6px; overflow: hidden; line-height: 0; cursor: zoom-in; transition: transform .25s var(--ease), box-shadow .25s; }
.p-setup .su-tile:hover { background: #fff; }
.p-setup .su-tile canvas.art { height: 100%; }
.p-setup .su-zoom { position: absolute; inset: 14px; display: grid; place-items: center; background: #fff; border-radius: 16px; overflow: hidden; transform-origin: 0 0; }
.p-setup .su-close { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; padding: 0; border-radius: 50%; background: rgba(29, 29, 31, .06); display: grid; place-items: center; transition: background .15s; }
.p-setup .su-close:hover { background: rgba(29, 29, 31, .12); }
.p-setup .su-close svg { width: 12px; height: 12px; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; }

/* The settings. */
.p-setup .su-side .eyebrow { margin-bottom: 6px; }
.p-setup .su-side h1 { margin: 0 0 40px; overflow-wrap: anywhere; }
.p-setup .su-group + .su-group { margin-top: 36px; }
.p-setup .su-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.p-setup .su-head h2 { margin: 0; font-size: var(--t-l); line-height: 1.47; letter-spacing: -.01em; }
.p-setup .su-shuffle { padding: 0; border-radius: 0; background: none; font-size: var(--t-m); color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.p-setup .su-shuffle:hover { background: none; color: var(--muted); }
.p-setup .su-note { margin: 10px 0 0; font-size: var(--t-s); color: var(--muted); }
.p-setup .su-note:empty { display: none; }
.p-setup .su-note.su-bad { color: var(--error); }
.p-setup .su-form.su-locked { opacity: .55; pointer-events: none; }

/* A word, a day or a time: a plain box. A select has a chevron and on a phone opens the system's own picker. */
.p-setup .su-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.p-setup .su-when { margin-top: 10px; }
.p-setup .su-input { display: block; width: 100%; min-width: 0; height: 48px; border: 1px solid var(--line); border-radius: 12px; background-color: #fff; color: var(--ink); padding: 0 14px; font-size: 17px; transition: border-color .15s; }
.p-setup .su-input:hover { border-color: var(--line-hover); }
.p-setup .su-input:focus-visible { outline: 0; border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.p-setup select.su-input { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 36px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%236e6e73' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center / 11px 8px; }
.p-setup textarea.su-input { height: auto; padding: 12px 14px; font-family: var(--sans); line-height: 1.4; resize: vertical; }

/* Colors: each dot is one palette, its four colors in their shares. */
.p-setup .su-swatches { display: grid; grid-template-columns: repeat(8, 28px); justify-content: space-between; row-gap: 14px; }
.p-setup .su-swatch { width: 28px; height: 28px; padding: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); outline: 2px solid transparent; outline-offset: 2px; transition: outline-color .2s, transform .2s var(--ease); }
.p-setup .su-swatch[aria-checked=true] { outline-color: var(--ink); }
.p-setup .su-swatch:focus-visible { outline-color: var(--ink); }
/* Only where there is a pointer to hover with: a tap on a phone would leave its tile or dot grown. */
@media (hover: hover) {
  .p-setup .su-tile:hover { transform: scale(1.08); position: relative; z-index: 1; box-shadow: 0 6px 18px rgba(0, 0, 0, .1); }
  .p-setup .su-swatch:hover { transform: scale(1.1); }
}

/* Choices in a row: plain cards, the picked one outlined in black. A price card has its ETH under the dollars. */
.p-setup .su-options { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; }
.p-setup .su-option { height: 48px; padding: 0; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); font-size: 17px; font-weight: 500; transition: border-color .15s, box-shadow .15s; }
.p-setup .su-option:hover { background: #fff; border-color: var(--line-hover); }
.p-setup .su-option[aria-checked=true] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.p-setup .su-prices .su-option { height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.p-setup .su-option b { font-weight: 600; }
.p-setup .su-option small { min-height: 18px; font-size: var(--t-s); line-height: 18px; font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Random and Customize under the price: two plain pills, Customize outlined in black while the rest is open. */
.p-setup .su-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 28px; }
.p-setup .su-act { height: 48px; padding: 0; border: 1px solid var(--line); border-radius: var(--pill); background: #fff; color: var(--ink); font-size: 17px; font-weight: 500; transition: border-color .15s, box-shadow .15s, transform .15s; }
.p-setup .su-act:hover { background: #fff; border-color: var(--line-hover); }
.p-setup .su-act:active { transform: scale(.98); }
.p-setup .su-act[aria-expanded=true] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.p-setup .su-more { margin-top: 36px; }

.p-setup .su-fine { margin: 44px 0 12px; font-size: var(--t-s); color: var(--muted); text-align: center; }
.p-setup .su-form + .su-fine[hidden] + .su-go { margin-top: 44px; }
.p-setup .su-go { display: flex; align-items: center; justify-content: center; width: 100%; height: 52px; padding: 0; border-radius: var(--pill); background: var(--ink); color: #fff; font-size: 17px; font-weight: 500; text-decoration: none; transition: background .15s, transform .15s; }
.p-setup .su-go:hover { background: #000; }
.p-setup .su-go:active { transform: scale(.98); }
.p-setup .su-go[aria-disabled=true]:active { transform: none; }
/* The network fee under the button: the dollars in ink, the ETH muted. */
.p-setup .su-fee { min-height: 20px; margin: 10px 0 0; font-size: var(--t-s); line-height: 20px; color: var(--muted); text-align: center; font-variant-numeric: tabular-nums; }
.p-setup .su-fee span { white-space: nowrap; }
.p-setup .su-fee b { font-weight: 600; color: var(--ink); }
.p-setup .su-fee.su-bad { color: var(--error); }

/* Before a mint that starts now: one sentence and the button again. */
.p-setup dialog.su-confirm { width: min(360px, calc(100% - 32px)); text-align: center; }
.p-setup .su-confirm p { margin: 4px 0 24px; font-size: 17px; line-height: 1.4; font-weight: 500; }
.p-setup .su-cancel { width: 100%; height: 44px; margin-top: 8px; padding: 0; background: none; color: var(--ink); font-size: 17px; }
.p-setup .su-cancel:hover { background: none; color: var(--muted); }

/* After the start: where the drop stands. */
.p-setup .su-progress { display: block; height: 4px; margin: -16px 0 24px; border-radius: 2px; background: var(--tint-2); overflow: hidden; }
.p-setup .su-progress i { display: block; height: 100%; border-radius: 2px; background: var(--ink); transition: width .8s ease; }
.p-setup .su-facts { margin: 0; border-top: 1px solid var(--tint-2); }
.p-setup .su-facts div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--tint-2); }
.p-setup .su-facts dt { font-size: var(--t-m); color: var(--muted); }
.p-setup .su-facts dd { margin: 0; font-size: 17px; font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
.p-setup .su-facts dd b { font-weight: 600; }
.p-setup .su-facts dd span { margin-left: 8px; font-size: var(--t-m); font-weight: 400; color: var(--muted); white-space: nowrap; }

/* The holder's page, under the configurator. */
.p-setup .su-page { display: grid; gap: 20px; margin-top: 96px; padding-top: 48px; border-top: 1px solid var(--tint-2); }
.p-setup .su-page h2 { margin: 0 0 6px; }
.p-setup .su-page-head p { margin: 0; font-size: var(--t-m); }
.p-setup .su-page-form { display: grid; gap: 16px; min-width: 0; }
.p-setup .su-page-form label { gap: 8px; }
.p-setup .su-page-form .su-note { margin: -6px 0 0; }
.p-setup .su-prefixed { display: flex; align-items: center; height: 48px; border: 1px solid var(--line); border-radius: 12px; background: #fff; transition: border-color .15s; }
.p-setup .su-prefixed:hover { border-color: var(--line-hover); }
.p-setup .su-prefixed:focus-within { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.p-setup .su-prefixed span { padding-left: 14px; font-size: 17px; color: var(--muted); }
.p-setup .su-prefixed input { height: 100%; padding: 0 14px 0 1px; border: 0; background: transparent; font-size: 17px; }
.p-setup .su-prefixed input:focus-visible { outline: 0; }
.p-setup .su-save { width: 100%; height: 52px; padding: 0; font-size: 17px; font-weight: 500; }
.p-setup .su-page-form .status, .p-setup .su-page-form .alert { margin-top: -6px; }
.p-setup .su-page-form .status:empty, .p-setup .su-page-form .alert:empty { margin: -16px 0 0; }

/* The gate: one line and a button. */
.p-setup .su-gate { padding-block: 96px 72px; }
.p-setup .su-gate h1 { margin-bottom: 12px; }
.p-setup .su-gate + .su-page { margin-top: 0; }

/* On a phone or a tablet the plate stays under the bar while the settings scroll by. */
@media (max-width: 959px) {
  .p-setup .su-main { padding-top: 0; gap: 20px; }
  /* Out to the screen's edges past .wrap's padding, which grows to the notch's inset on a phone held sideways. */
  .p-setup .su-stage { position: sticky; top: 44px; z-index: 5; background: rgba(255, 255, 255, .96);
    margin-inline: calc(-1 * max(22px, env(safe-area-inset-left))) calc(-1 * max(22px, env(safe-area-inset-right)));
    padding: 12px max(22px, env(safe-area-inset-right)) 12px max(22px, env(safe-area-inset-left));
    backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); }
  .p-setup .su-frame { width: min(100%, 36svh); min-width: 0; padding: 10px; border-radius: 18px; }
  .p-setup .su-tiles { gap: 4px; }
  .p-setup .su-tile { border-radius: 4px; }
  .p-setup .su-zoom { inset: 10px; border-radius: 12px; }
  .p-setup .su-close { top: 8px; right: 8px; width: 28px; height: 28px; }
  .p-setup .su-side h1 { margin-bottom: 28px; }
  .p-setup .su-page { margin-top: 72px; padding-top: 40px; }
}
@media (max-width: 640px) {
  .p-setup .su-stage { top: 48px; margin-inline: calc(-1 * max(16px, env(safe-area-inset-left))) calc(-1 * max(16px, env(safe-area-inset-right)));
    padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right)); }
  .p-setup .su-gate { padding-block: 64px 48px; }
}
@media (prefers-reduced-motion: reduce) { .p-setup * { transition: none !important; } }