/* Studio intake: the console's own type, surfaces and native disclosures. */
.studio-intake { max-height: calc(80vh - 140px); overflow-y: auto; overscroll-behavior: contain; scroll-padding-block: var(--space-3); padding-right: var(--space-2); }
.studio-intake .studio-intake-types { margin: 0 0 var(--space-2); }
/* Keep the source area compact without shrinking its text or its native file target. */
.studio-intake > .field { margin-bottom: var(--space-3); }
.studio-intake > .field:first-of-type { margin-bottom: var(--space-2); }
.studio-intake .dropzone {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  column-gap: var(--space-3);
  row-gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  text-align: left;
}
.studio-intake .dropzone > svg { grid-column: 1; grid-row: 1 / span 2; justify-self: center; }
.studio-intake .dropzone-lead,
.studio-intake .dropzone-name { grid-column: 2; }
/* The folder action and reading help share one row when there is room. File/error lists
   retain their ordinary block flow, so choosing material never obscures its receipt. */
.studio-intake .dropzone-folder {
  display: inline-flex;
  max-width: 100%;
  margin: 0 var(--space-3) var(--space-2) 0;
  vertical-align: middle;
}
.studio-intake .dropzone-folder .btn { min-height: 44px; }
.studio-intake .studio-intake-help {
  display: inline-block;
  max-width: 100%;
  margin: 0 0 var(--space-2);
  vertical-align: middle;
}
.studio-intake .studio-intake-help[open] { display: block; }
.studio-intake-disclosure { margin: var(--space-2) 0 var(--space-4); }
.studio-intake-disclosure > summary,
.studio-intake-options details > summary {
  box-sizing: border-box;
  min-height: 44px;
  padding: var(--space-3) 0;
  cursor: pointer;
  color: var(--text-dim);
  font-size: var(--fs-small);
  line-height: var(--lh);
}
.studio-intake-options { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.studio-intake-options > summary > span:first-child { color: var(--text); font-weight: var(--fw-semibold); }
.studio-intake-options-summary { display: block; margin-top: var(--space-1); overflow-wrap: anywhere; }
.studio-intake-disclosure-body { padding: 0 0 var(--space-2); }
.studio-intake-disclosure-body > p { margin-top: 0; }
.studio-intake-options .row { gap: var(--space-4); }
.studio-intake-options .grow { min-width: 0; }
@media (max-width: 560px) {
  .studio-intake .dropzone { grid-template-columns: minmax(0, 1fr); min-height: 44px; padding: var(--space-1) var(--space-3); }
  .studio-intake .dropzone > svg { display: none; }
  .studio-intake .dropzone-lead,
  .studio-intake .dropzone-name { grid-column: 1; }
  .studio-intake-options .row { flex-direction: column; gap: var(--space-2); }
  .studio-intake-options .row > .grow { width: 100%; }
}

/* One scroll surface between a stable heading and action bar. Only the upload
   sheet changes; browsers without :has retain the existing native dialog. */
@media (max-width: 600px), (max-height: 500px) and (pointer: coarse) {
  .modal-backdrop:has(> .modal > .modal-body > .studio-intake) {
    padding: 0;
    align-items: flex-end;
  }
  .modal:has(> .modal-body > .studio-intake) {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 12px);
    max-height: calc(100dvh - 12px);
    padding: 0;
  }
  .modal:has(> .modal-body > .studio-intake) .modal-head {
    flex: none;
    padding: 16px 16px 12px 20px;
  }
  .modal:has(> .modal-body > .studio-intake) .modal-head h2 {
    font-size: 20px;
    line-height: 1.3;
  }
  .modal:has(> .modal-body > .studio-intake) .modal-close {
    flex: none;
    min-width: 44px;
    min-height: 44px;
  }
  .modal:has(> .modal-body > .studio-intake) .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-padding-block: 16px;
    padding: 0 20px 16px;
  }
  .modal:has(> .modal-body > .studio-intake) .studio-intake {
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }
  .studio-intake .dropzone { min-height: 120px; padding: 16px; align-content: center; }
  .studio-intake input:not([type="file"]), .studio-intake select {
    min-height: 48px;
    max-width: 100%;
    font-size: 16px;
  }
  .studio-intake select { width: 100%; }
  .modal:has(> .modal-body > .studio-intake) .modal-foot {
    flex: none;
    position: static;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px));
  }
  .modal:has(> .modal-body > .studio-intake) .modal-foot .btn {
    min-height: 48px;
    font-size: 16px;
    white-space: normal;
  }
}