/*
 * Homepage entry composition.
 *
 * This file is intentionally scoped to the empty upload stage and loaded last
 * so the entry visual can evolve without disturbing the editor, admin pages,
 * or the existing upload state machine.
 */
:root[data-theme="dark"]:has(body.studio-upload-active) {
  --studio-dot-alpha: 4%;
}

:root:has(body.studio-upload-active) {
  --studio-dot-alpha: 6%;
  overflow-x: hidden;
  background-color: var(--bg);
  background-image: var(--studio-dot-grid);
  background-size: var(--studio-dot-size) var(--studio-dot-size);
}

body.studio-upload-active {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  background-color: transparent;
}

body.studio-upload-active::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: var(--bg);
  background-image: var(--studio-dot-grid);
  background-size: var(--studio-dot-size) var(--studio-dot-size);
}

#studioBackground { display: none; }
body.studio-upload-active.studio-active #studioBackground {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

body.studio-upload-active #mainContent.page {
  position: relative;
  z-index: 1;
  isolation: auto;
  overflow-x: clip;
  background-color: transparent;
}

body.studio-upload-active #studioView { overflow-x: clip; }

body.studio-upload-active #studioView[data-stage="upload"] .hero {
  position: relative;
  z-index: 1;
  display: block;
  max-width: 760px;
  margin: clamp(28px, 5vh, 52px) auto clamp(8px, 1.4vh, 14px);
  padding-inline: 16px;
}

body.studio-upload-active #studioView[data-stage="upload"] .hero h1 {
  font-size: clamp(38px, 4.2vw, 62px);
  font-weight: 650;
  line-height: 1.17;
  letter-spacing: -.04em;
}

body.studio-upload-active #studioView[data-stage="upload"] .hero p {
  flex: none;
  max-width: none;
  margin: 12px auto 0;
  color: var(--muted-strong);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  text-align: center;
}

body.studio-upload-active #studioView .workspace {
  position: relative;
  z-index: 1;
  max-width: min(760px, calc(100% - 32px));
  gap: 22px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

body.studio-upload-active #studioView:not(:has(#remixCard:not(.hidden))) #inputPanel {
  width: min(560px, 100%);
  max-width: 560px;
  margin-inline: auto;
  padding: 0;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
}

body.studio-upload-active #studioView #dropzone.upload {
  position: relative;
  height: 310px;
  min-height: 310px;
  max-height: 310px;
  aspect-ratio: auto;
  padding: 16px;
  border: 2px dashed color-mix(in srgb, var(--border-strong) 92%, transparent);
  border-radius: 24px;
  background: var(--card);
  transition: border-color 160ms ease, background-color 160ms ease;
}

body.studio-upload-active #studioView #dropInner {
  border: 0;
  border-radius: 16px;
  background: transparent;
}

body.studio-upload-active .drop-icon {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  margin: 0 0 20px;
  place-items: center;
  border: 0;
  border-radius: 0;
  color: var(--text);
  background: transparent;
}

body.studio-upload-active .drop-icon .ri-icon {
  display: block;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
}

body.studio-upload-active .drop-title {
  font-size: clamp(18px, 1.7vw, 22px);
  font-weight: 600;
  letter-spacing: -.015em;
}

body.studio-upload-active .drop-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 9px;
  color: var(--muted-strong);
  font-size: 14px;
}

body.studio-upload-active .drop-hint kbd {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  border: 0;
  border-radius: 8px;
  color: inherit;
  background: var(--field);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
}

body.studio-upload-active .upload-select {
  width: min(250px, 100%);
  min-height: 50px;
  margin: 26px 0 11px;
  font-size: 15px;
  font-weight: 600;
}

body.studio-upload-active .upload-select:not(:disabled) {
  color: #ffffff;
  background: #09090b;
  border-color: #09090b;
  box-shadow: none;
}

body.studio-upload-active .upload-select:hover:not(:disabled) {
  color: #ffffff;
  background: #18181b;
  border-color: #18181b;
}

body.studio-upload-active .upload-select:active:not(:disabled) {
  background: #27272a;
  border-color: #27272a;
}

:root[data-theme="dark"] body.studio-upload-active .upload-select:not(:disabled) {
  color: #09090b;
  background: #fafafa;
  border-color: #fafafa;
}

:root[data-theme="dark"] body.studio-upload-active .upload-select:hover:not(:disabled) {
  color: #09090b;
  background: #ececee;
  border-color: #ececee;
}

body.studio-upload-active .upload-formats {
  color: var(--muted);
  font-size: 12px;
}

body.studio-upload-active #studioView #dropzone.upload:hover,
body.studio-upload-active #studioView #dropzone.upload.dragging {
  border-color: var(--mark, #ff5a00);
  background: var(--card);
}

/* Dragging anywhere on the upload home uses the approved focused state. */
body.studio-upload-active #studioView #dropzone.upload.dragging {
  border: 1px solid var(--mark, #ff5a00);
  border-style: solid;
  background: color-mix(in srgb, var(--accent-soft) 56%, var(--card));
  box-shadow: none;
  transform: none;
}
body.studio-upload-active #studioView #dropzone.upload.dragging .drop-icon,
body.studio-upload-active #studioView #dropzone.upload.dragging .drop-title,
body.studio-upload-active #studioView #dropzone.upload.dragging .upload-select,
body.studio-upload-active #studioView #dropzone.upload.dragging .upload-formats {
  display: none;
}
body.studio-upload-active #studioView #dropzone.upload.dragging .drop-hint {
  margin: 0;
  color: var(--text);
  font-size: 16px;
  font-weight: 700;
}

body.studio-upload-active #studioView #dropzone.upload:hover .drop-icon,
body.studio-upload-active #studioView #dropzone.upload:hover .drop-title,
body.studio-upload-active #studioView #dropzone.upload.dragging .drop-icon,
body.studio-upload-active #studioView #dropzone.upload.dragging .drop-title {
  color: var(--text);
}

body.studio-upload-active #studioView #dropzone.upload:hover #dropInner,
body.studio-upload-active #studioView #dropzone.upload.dragging #dropInner {
  background: transparent;
}

body.studio-upload-active #studioView #inputPanel,
body.studio-upload-active #studioView #homepageSuggestions,
body.studio-upload-active #studioView #newcomerBanner {
  margin-inline: auto;
}

body.studio-upload-active #studioView #inputPanel,
body.studio-upload-active #studioView #newcomerBanner {
  width: min(560px, 100%);
  max-width: 560px;
}

body.studio-upload-active #studioView #homepageSuggestions {
  width: min(580px, 100%);
  max-width: 580px;
}

body.studio-upload-active #studioView #homepageSuggestions { align-self: center; }

@media (max-width: 820px) {
  body.studio-upload-active #studioView[data-stage="upload"] .hero {
    margin-top: 34px;
  }

  body.studio-upload-active #studioView #inputPanel {
    padding: 0;
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.studio-upload-active #studioView #dropzone.upload {
    height: 300px;
    min-height: 300px;
    max-height: 300px;
    border-radius: 20px;
  }
}

@media (max-width: 600px) {
  body.studio-upload-active #studioView[data-stage="upload"] .hero {
    margin-top: 26px;
    margin-bottom: 12px;
  }

  body.studio-upload-active #studioView[data-stage="upload"] .hero h1 {
    font-size: min(34px, calc((100vw - 32px) / 12));
    letter-spacing: -.035em;
  }

  body.studio-upload-active #studioView[data-stage="upload"] .hero p {
    margin-top: 10px;
    font-size: 14px;
  }

  body.studio-upload-active #studioView .workspace {
    max-width: calc(100% - 24px);
  }

  body.studio-upload-active #studioView #dropzone.upload {
    height: 280px;
    min-height: 280px;
    max-height: 280px;
  }

  body.studio-upload-active .drop-icon {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
    margin-bottom: 16px;
  }

  body.studio-upload-active .drop-icon .ri-icon {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
  }

  body.studio-upload-active .upload-select {
    margin-top: 22px;
  }

}

/* Size and position the primary upload entry independently of example images.
   Short windows retain the compact layout and normal document scrolling. */
@media (min-width: 1600px) and (min-height: 900px) {
  body.studio-upload-active {
    --entry-title-size: clamp(62px, 3vw, 76px);
    --entry-panel-width: clamp(560px, 30vw, 760px);
    --entry-panel-height: clamp(310px, 17vw, 410px);
  }
  body.studio-upload-active:has(#studioView.active[data-stage="upload"]) #mainContent.page {
    flex: 1 0 auto;
    display: block;
    padding-block: clamp(32px, 8dvh, 180px) 24px;
  }
  body.studio-upload-active #studioView[data-stage="upload"] .hero {
    max-width: min(960px, 100%);
    margin: 0 auto;
  }
  body.studio-upload-active #studioView[data-stage="upload"] .hero h1 {
    font-size: var(--entry-title-size);
  }
  body.studio-upload-active #studioView[data-stage="upload"] .hero p {
    font-size: clamp(15px, .8vw, 18px);
  }
  body.studio-upload-active #studioView .workspace {
    max-width: min(960px, calc(100% - 32px));
  }
  body.studio-upload-active #studioView:not(:has(#remixCard:not(.hidden))) #inputPanel,
  body.studio-upload-active #studioView #newcomerBanner {
    width: min(var(--entry-panel-width), 100%);
    max-width: var(--entry-panel-width);
  }
  body.studio-upload-active #studioView #homepageSuggestions {
    width: min(var(--entry-panel-width), 100%);
    max-width: var(--entry-panel-width);
  }
  body.studio-upload-active #studioView #dropzone.upload {
    height: var(--entry-panel-height);
    min-height: var(--entry-panel-height);
    max-height: var(--entry-panel-height);
  }
  body.studio-upload-active .drop-icon {
    width: clamp(40px, 2vw, 50px);
    height: clamp(40px, 2vw, 50px);
    flex-basis: clamp(40px, 2vw, 50px);
  }
  body.studio-upload-active .drop-icon .ri-icon {
    width: clamp(32px, 1.65vw, 42px);
    height: clamp(32px, 1.65vw, 42px);
    flex-basis: clamp(32px, 1.65vw, 42px);
  }
  body.studio-upload-active .drop-title { font-size: clamp(22px, 1.05vw, 26px); }
  body.studio-upload-active .drop-hint { font-size: clamp(14px, .72vw, 18px); }
  body.studio-upload-active .drop-hint kbd,
  body.studio-upload-active .upload-formats { font-size: clamp(12px, .6vw, 15px); }
  body.studio-upload-active .upload-select {
    width: min(clamp(250px, 12vw, 300px), 100%);
    min-height: clamp(50px, 2.4vw, 60px);
    font-size: clamp(15px, .72vw, 18px);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.studio-upload-active #studioView #dropzone.upload {
    transition: none;
  }
}