/* ==========================================================================
   Hay Ink, logo placement tool
   Page specific bits only. Tokens, reset, buttons, eyebrow, nav and footer
   come from ../css/style.css. The header, breadcrumb and send block reuse
   product.css, which loads second. This file only adds the tool.
   Prefix: .mk-  |  Mobile first: base rules are the phone layout.
   ========================================================================== */

/* Visually hidden, still read out. The tool section needs a heading, but a
   printed one would duplicate the h1 sitting right above it. */
.mk-sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   1. HEADER
   Same plate as the product hero, shorter, because the tool follows straight
   after and should be reachable without a scroll on a laptop.
   -------------------------------------------------------------------------- */
.mk-head { padding-bottom: clamp(26px, 3vw, 40px); }
.mk-head-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(18px, 2.4vw, 40px);
  align-items: end;
}
.mk-head .pd-lead { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   2. TOOL LAYOUT
   -------------------------------------------------------------------------- */
.mk-tool { background: var(--ink); padding-bottom: var(--sec-y); }

.mk-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 3.2vw, 44px);
  align-items: start;
}

/* --------------------------------------------------------------------------
   3. STAGE
   The renders are 1024 square on a cream ground, so the stage is a square
   light box on the ink page. Everything inside is positioned in percent of
   this box, which keeps the placement identical at every screen size and
   identical again on the downloaded canvas.
   -------------------------------------------------------------------------- */
.mk-stagecol { display: flex; flex-direction: column; gap: 14px; }

.mk-stage {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--panel-2);
  border: 1px solid var(--hair-dark);
}
.mk-garment {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* Printable area guide. Yellow reads on a black tee and on a cream tee, and
   it is the one accent already used for actions on this site. Shown while the
   stage is empty and while the logo is being moved, hidden otherwise so the
   preview is clean when you download it. */
.mk-area {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed rgba(255, 214, 10, .9);
  opacity: 0;
  transition: opacity .3s var(--ease);
  pointer-events: none;
}
.mk-stage.is-empty .mk-area,
.mk-stage.is-active .mk-area { opacity: 1; }

.mk-area-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cream);
  background: rgba(12, 12, 12, .82);
  padding: 7px 12px;
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.mk-stage.is-empty .mk-area-label { opacity: 1; }

/* The placed logo.
   Sized so its longest side is exactly the stage side, then driven purely by
   transform: nothing here reads or writes layout during a drag. */
.mk-logo {
  position: absolute;
  left: 50%; top: 50%;
  transform-origin: 50% 50%;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  will-change: transform;
}
/* ../css/style.css sets `img { display: block }`, which outranks the UA rule
   behind the hidden attribute, so the empty logo would show its alt text. */
.mk-logo[hidden] { display: none; }
.mk-logo:active { cursor: grabbing; }
/* The outline is inside the same transform as the logo, so it would shrink
   with it. mockup.js divides the width back out by the current scale. */
.mk-logo:focus-visible {
  outline: 2px solid var(--cta);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   4. SIDE TOGGLE AND HINT
   -------------------------------------------------------------------------- */
.mk-side {
  display: flex;
  gap: 1px;
  background: var(--hair-dark);
  border: 1px solid var(--hair-dark);
  align-self: flex-start;
}
.mk-side-btn {
  padding: 11px 24px;
  background: var(--panel-2);
  border: 0;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--on-dark-soft);
  transition: background .25s var(--ease), color .25s var(--ease);
}
.mk-side-btn:hover { color: var(--on-dark); }
.mk-side-btn.is-on { background: var(--cream); color: #17130f; }

.mk-hint {
  font-size: 13px;
  line-height: 1.65;
  color: var(--on-dark-mute);
  max-width: 52ch;
}

/* --------------------------------------------------------------------------
   5. PANEL
   -------------------------------------------------------------------------- */
.mk-panel { display: flex; flex-direction: column; gap: clamp(16px, 1.8vw, 22px); }

/* The arrow sits directly above the drop zone and points into it, on every
   breakpoint, so it never has to guess where the zone ended up. */
.mk-cue {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--cta);
  transition: opacity .3s var(--ease), visibility 0s;
}
/* Faded out is not gone: at opacity 0 a screen reader still read "Start here"
   long after the logo had been placed. visibility takes it out of the
   accessibility tree, delayed so the fade still plays. */
.mk-cue.is-off {
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s var(--ease), visibility 0s linear .3s;
}
.mk-cue-arrow {
  width: 20px; height: 20px;
  flex: 0 0 auto;
  stroke: currentColor; stroke-width: 1.8; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
  animation: mkNudge 2.4s var(--ease) infinite;
}
@keyframes mkNudge {
  0%, 62%, 100% { transform: translateY(0); }
  76%           { transform: translateY(4px); }
}

/* Drop zone. The file input is stretched over the whole box, so the box is
   clickable everywhere and still reachable by keyboard as a real control. */
.mk-drop {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 7px;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 152px;
  padding: 26px 22px;
  background: rgba(246, 244, 240, .02);
  border: 1px dashed rgba(246, 244, 240, .28);
  transition: border-color .28s var(--ease), background .28s var(--ease);
}
.mk-drop:hover { border-color: rgba(246, 244, 240, .5); }
.mk-drop:focus-within { border-color: var(--cta); }
.mk-drop.is-over {
  border-color: var(--cta);
  border-style: solid;
  background: rgba(255, 214, 10, .1);
}
.mk-drop.is-loaded { border-style: solid; border-color: var(--hair-dark); }

.mk-file {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
  cursor: pointer;
}

.mk-drop-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -.02em;
  line-height: 1.3;
  color: var(--on-dark);
  overflow-wrap: anywhere;
}
.mk-drop-sub {
  font-size: 13px;
  line-height: 1.6;
  color: var(--on-dark-mute);
  max-width: 34ch;
}

.mk-privacy {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--on-dark-soft);
}
.mk-privacy .ico {
  width: 15px; height: 15px;
  flex: 0 0 auto;
  margin-top: 3px;
  color: var(--teal);
}

/* Status line. Never a silent failure: every rejected file lands here. */
.mk-msg {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--teal);
  border-left: 1px solid var(--teal);
  padding-left: 14px;
}
.mk-msg[data-tone="error"] { color: #f9a8d4; border-color: var(--magenta); }

/* Sliders ---------------------------------------------------------------- */
.mk-controls {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 22px;
  background: var(--panel-2);
  border: 1px solid var(--hair-dark);
  transition: opacity .3s var(--ease);
}
.mk-controls.is-off { opacity: .4; }

.mk-ctrl {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 12px;
  align-items: baseline;
}
.mk-ctrl label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--on-dark-soft);
}
.mk-ctrl output {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--on-dark);
  font-variant-numeric: tabular-nums;
}
.mk-ctrl input[type="range"] {
  grid-column: 1 / -1;
  width: 100%;
  height: 22px;
  accent-color: var(--cta);
  cursor: pointer;
}
.mk-ctrl input[type="range"]:disabled { cursor: default; }

/* Actions ---------------------------------------------------------------- */
.mk-actions { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.mk-actions .btn[disabled] { opacity: .45; cursor: not-allowed; }
.mk-actions .btn[disabled]:hover { background: var(--cta); }

.mk-reset {
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 13px;
  color: var(--on-dark-soft);
  border-bottom: 1px solid rgba(246, 244, 240, .3);
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.mk-reset:hover { color: var(--on-dark); border-color: var(--on-dark); }
.mk-reset[disabled] { opacity: .38; cursor: not-allowed; }
.mk-reset[disabled]:hover { color: var(--on-dark-soft); border-color: rgba(246, 244, 240, .3); }

/* --------------------------------------------------------------------------
   6. GARMENT PICKER
   Full width under both columns, so the upload step stays high on a phone.
   -------------------------------------------------------------------------- */
.mk-picker-head { margin-bottom: 16px; }

.mk-garments {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(8px, 1vw, 14px);
}
.mk-swatch {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  padding: 0 0 10px;
  background: none;
  border: 1px solid var(--hair-dark);
  cursor: pointer;
  text-align: left;
  transition: border-color .3s var(--ease), transform .4s var(--ease);
}
.mk-swatch:hover { border-color: rgba(246, 244, 240, .34); transform: translateY(-2px); }
.mk-swatch.is-on { border-color: var(--cta); }

.mk-swatch-media {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--cream-deep);
}
.mk-swatch-media img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.mk-swatch-name {
  padding: 0 10px;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--on-dark-soft);
}
.mk-swatch.is-on .mk-swatch-name { color: var(--on-dark); }

/* --------------------------------------------------------------------------
   7. SEND BLOCK
   Everything else in that section comes from product.css.
   -------------------------------------------------------------------------- */
.mk-note {
  margin-top: 16px;
  padding-left: 14px;
  border-left: 1px solid rgba(255, 214, 10, .55);
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--on-dark-soft);
  max-width: 44ch;
}

/* --------------------------------------------------------------------------
   8. UP, tablet and desktop
   -------------------------------------------------------------------------- */
@media (min-width: 700px) {
  /* Still one column here, so a full width square would push the controls
     most of a screen down. Cap it and let the gutter carry the rest. */
  .mk-stagecol { max-width: 480px; }
  .mk-garments { grid-template-columns: repeat(7, 1fr); }
  .mk-swatch-name { font-size: 12px; }
  .mk-actions { flex-direction: row; align-items: center; gap: 20px; }
  .mk-actions .btn { width: auto; flex: 0 0 auto; }
}

@media (min-width: 1000px) {
  .mk-head-grid { grid-template-columns: 6fr 6fr; }
  /* Capped tracks, not fractions: on a wide screen the stage would otherwise
     grow to half the page and leave the panel stranded beside it. Left
     aligned with the wrap, so it lines up with the headline above. */
  .mk-grid {
    grid-template-columns: minmax(0, 600px) minmax(0, 420px);
    justify-content: start;
  }
  .mk-stagecol { max-width: none; }   /* the grid track caps it from here on */
  /* the picker runs the full width under both columns */
  .mk-picker { grid-column: 1 / -1; margin-top: clamp(8px, 1vw, 18px); }
}

/* --------------------------------------------------------------------------
   9. REDUCED MOTION
   ../css/style.css flattens durations globally. This kills the one looping
   animation outright rather than leaving it running at 0.001ms.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .mk-cue-arrow { animation: none; }
  .mk-swatch:hover { transform: none; }
  .mk-area, .mk-area-label, .mk-cue, .mk-controls { transition: none; }
}