.uploads-new-container {
  max-width: 42rem; /* Note: bespoke value */
  margin-inline: auto;

  & > h1 { margin-bottom: var(--spacing-8); }
  & > p  { margin-bottom: var(--spacing-32); }
}

.uploads-new-dropzone {
  display: flex;
  justify-content: center;
  padding-inline: var(--spacing-24);
  padding-top: var(--spacing-16);
  padding-bottom: var(--spacing-24);
  border: var(--stroke-weight-2) dashed var(--border-default);
  border-radius: var(--corner-radius-sm);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  cursor: pointer;

  &:hover { background-color: var(--background-surface-1); }

  /* Re-render after a submit with no file chosen: the dashed outline picks up
     the warning tone. Cleared by upload_controller once a file is selected. */
  &.is-invalid { border-color: var(--border-warning); }
}

.uploads-new-dropzone-inner {
  text-align: center;

  & > * + * { margin-top: var(--spacing-4); }
}

.uploads-new-dropzone-icon {
  margin-inline: auto;
  height: var(--spacing-48);
  width: var(--spacing-48);
  color: var(--symbol-default);
}

.uploads-new-dropzone-prompt {
  display: flex;
  justify-content: center;
  color: var(--text-secondary);
}

.uploads-new-dropzone-label {
  position: relative;
  cursor: pointer;
  border-radius: var(--corner-radius-sm);
  font-weight: var(--font-weight-500);
  color: var(--text-primary);

  &:hover { color: var(--text-hover); }
}
html.theme-dark .uploads-new-dropzone-label,
html.theme-dark .uploads-new-dropzone-label:hover { color: var(--text-hover); }

.uploads-new-dropzone-or { padding-left: var(--spacing-4); }

.uploads-new-dropzone-formats,
.uploads-new-dropzone-filename {
  color: var(--text-tertiary);
}

.uploads-new-file-input {
  position: absolute;
  width: var(--stroke-weight-1);
  height: var(--stroke-weight-1);
  padding: var(--spacing-0);
  margin: -1px; /* Note: negative stroke for sr-only */
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ============ Consent + store boxes ============ */
/* Both are the default greyscale card — .surface-card in the markup, which
   brings the surface-1 fill, no border, and 24px → 32px responsive padding.
   Only their inner slots are styled here. */

/* Re-render after a submit with the consent box unticked — .surface-card is
   borderless, so the solid warning stroke only ever appears in this state.
   Cleared by consent_controller once the box is ticked. */
.uploads-new-consent-card.is-invalid {
  border: var(--stroke-weight-2) solid var(--border-warning);
}

.uploads-new-consent-header,
.uploads-new-store-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  margin-bottom: var(--spacing-12);
}

.uploads-new-consent-badge,
.uploads-new-store-badge {
  display: inline-flex;
  align-items: center;
  font-size: var(--font-size-12);
  /* Uppercase-only label: no line-height of its own — the inherited body
     leading is what sits the glyphs centred in the pill; a 1rem or 1 line
     box both pushed them off. Height comes from the 4px block padding. */
  font-weight: var(--font-weight-700);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding-inline: var(--spacing-8);
  padding-block: var(--spacing-4);
  border-radius: var(--corner-radius-xs);
  color: var(--text-secondary);
  background-color: var(--background-surface-2);
}

.uploads-new-consent-heading,
.uploads-new-store-heading {
  font-size: var(--font-size-16);
  line-height: 1.25;
  font-weight: var(--font-weight-600);
  color: var(--text-primary);
}

.uploads-new-consent-lede,
.uploads-new-store-lede {
  color: var(--text-primary);
  margin-bottom: var(--spacing-12);
}

.uploads-new-consent-list {
  color: var(--text-secondary);
  margin-bottom: var(--spacing-16);
  margin-left: var(--spacing-4);

  & > * + * { margin-top: var(--spacing-4); }
}

.uploads-new-consent-list-item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-8);
}

.uploads-new-consent-bullet {
  color: var(--text-primary);
  margin-top: var(--spacing-2);
}

.uploads-new-consent-fine,
.uploads-new-store-fine {
  color: var(--text-tertiary);
  margin-bottom: var(--spacing-16);
}

.uploads-new-consent-toggle-label,
.uploads-new-store-toggle-label {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-12);
  cursor: pointer;
}

/* Shared .checkbox control (objects/checkbox.css). It fills with surface-1
   for the dropdown menus, which sit on surface-2; on these surface-1 cards
   it takes the next surface up, and an inset --border-strong outline (an
   inset shadow, so the box stays 20px and the checkmark stays put), because
   a surface step alone was too faint to see in either theme. The outline
   goes when checked, where the brand gradient carries the box.
   Scoped through the label so it outranks the object — objects/ is served
   after components/. */
.uploads-new-consent-toggle-label .checkbox,
.uploads-new-store-toggle-label .checkbox {
  margin-top: var(--spacing-2);
  background-color: var(--background-surface-2);
  box-shadow: inset 0 0 0 var(--stroke-weight-2) var(--border-strong);
}
.uploads-new-consent-toggle-label .checkbox:checked,
.uploads-new-store-toggle-label .checkbox:checked {
  box-shadow: none;
}

.uploads-new-consent-toggle-text,
.uploads-new-store-toggle-text {
  font-size: var(--font-size-16);
  line-height: 1.5rem;
  font-weight: var(--font-weight-500);
  color: var(--text-primary);
  user-select: none;
}
.group:hover .uploads-new-consent-toggle-text { color: var(--text-hover); }
html.theme-dark .group:hover .uploads-new-consent-toggle-text { color: var(--text-hover); }
.group:hover .uploads-new-store-toggle-text { color: var(--text-primary); }

/* The submit button stays disabled until a file is chosen and the consent box
   is ticked (upload_controller#syncSubmit). Dimmed, and the .button--filled
   hover gradient and glow are cancelled, so a disabled button never answers
   the pointer. */
.uploads-new-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.uploads-new-submit:disabled:hover {
  background-image: var(--brand-gradient);
  filter: none;
}