/* /shop/create/ — the merch flow's ONLY styles.
   Classes are mk-* : .mc-* in refined-create.css belongs to MUSIC create
   (.mc-form, .mc-result, .mc-song-title), the same namespace the i18n keys
   collided in earlier this session.
   ---------------------------------------------------------------------------
   Everything structural comes from assets/refined-create.css: the screen head,
   rc-entry, the mood pills, the swatch row, the primary button, the crosslink.
   This file adds the one thing the poster flow does not need — a stage for a
   garment — plus three small contact bits. If a rule here could have been an
   rc-* class, it is a bug: use the class. */

/* ---- the studio backdrop -------------------------------------------------
   THE BUG THIS FIXES: a charcoal shirt was drawn on a charcoal panel on a dark
   page and disappeared. A poster carries its own plate colour and needs no
   backdrop; a garment IS the colour being chosen, so it needs a surface behind
   it that is never close to it. This is seamless studio paper: one warm neutral
   in BOTH themes, because a backdrop that flipped with the theme would be dark
   again in dark mode and the bug would come back at night. */
.mk-slot {
  width: min(100%, 380px);
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  background: radial-gradient(120% 90% at 50% 8%, #ffffff 0%, #f3f1ec 46%, #e4e0d8 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  overflow: hidden;
}
.mk-stage__svg { width: 100%; height: 100%; display: block; }

/* Only the art fades while a new phrase is being set, so the garment never
   flickers underneath it. */
[data-kcmc].is-measuring .mk-stage__svg svg[x] { opacity: .3; transition: opacity .18s ease; }
[data-kcmc].is-busy .rc-primary { pointer-events: none; opacity: .6; }

/* ---- contact ------------------------------------------------------------- */
.mk-contact { margin-top: 18px; }
.mk-email {
  width: min(100%, 340px);
  margin-top: 6px;
  padding: 11px 14px;
  border: 1px solid var(--rc-rule);
  border-radius: 9px;
  background: var(--rc-panel-deep);
  color: var(--rc-ink);
  font: 15px/1.3 inherit;
}
/* ONE focus indicator on a field: the border turns green. An outline on top
   draws a second ring, which is the defect most often reported here. */
.mk-email:focus, .mk-email:focus-visible {
  outline: none; box-shadow: none; border-color: var(--rc-accent);
}
.mk-linkbtn {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-weight: 700; color: var(--rc-accent);
  text-decoration: none; min-height: 24px;
}
.mk-linkbtn:hover { text-decoration: underline; text-underline-offset: 3px; }
.mk-linkbtn:focus-visible { outline: 2px solid var(--rc-accent); outline-offset: 3px; }
.mk-check { display: flex; gap: 9px; align-items: flex-start; margin-top: 12px; cursor: pointer; }
.mk-check input { margin: 2px 0 0; width: 16px; height: 16px; accent-color: var(--rc-accent); flex: 0 0 auto; }
.mk-legal { margin-top: 12px; font-size: 12.5px; }

/* ---- the song offer on the created screen -------------------------------- */
.mk-song {
  margin-top: 22px; padding: 18px;
  border: 1px solid var(--rc-rule); border-radius: 12px;
  background: var(--rc-panel-deep);
  display: grid; gap: 8px; justify-items: start;
}

@media (prefers-reduced-motion: reduce) {
  [data-kcmc].is-measuring .mk-stage__svg svg[x] { transition: none; }
}

/* The "When it is ready" section. It is a rc-fieldset like "Try it on:", so it
   only needs the spacing that separates it from the Create row above. */
.mk-ready { margin-top: clamp(20px, 3vw, 30px); }
.mk-ready .rc-helper { max-width: 58ch; }

/* The primary sits at the foot of the panel, after the section that asks where
   to send the finished thing. Full width on a phone, like every other create
   flow's final action. */
.mk-go { margin-top: clamp(18px, 2.6vw, 26px); justify-content: flex-start; }
@media (max-width: 560px) { .mk-go { justify-content: stretch; } .mk-go .rc-primary { width: 100%; } }

/* The SMS disclosure. Hidden until the box is ticked, so somebody who does not
   want texts is not made to read the TCPA copy to get past it. */
.mk-smscopy { margin-top: 8px; font-size: 12px; line-height: 1.5; max-width: 58ch; }