/* Final ndscan geometry for the submission dialog. Loaded after the general
 * compact submission rules so the core editor can keep its existing DOM and
 * value/payload handling. */

/* Treat a value + unit as one control, matching the GUI control treatment.
 * The wrapper owns the border/background; the actual input is borderless. */
.experiment-submit-panel .argument-input-unit {
  display: flex;
  grid-template-columns: none;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  height: var(--submission-input-height);
  min-height: var(--submission-input-height);
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
}

.experiment-submit-panel .argument-input-unit > .argument-input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  padding-right: 4px;
}

.experiment-submit-panel .argument-input-unit > span:last-child {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  padding: 0 8px 0 3px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

.experiment-submit-panel .argument-input-unit:focus-within {
  border-color: var(--accent);
  outline: 2px solid color-mix(in srgb, var(--accent) 28%, transparent);
  outline-offset: 1px;
}

.experiment-submit-panel .argument-input-unit:has(> .argument-input:disabled) {
  opacity: 0.65;
}

.experiment-submit-panel .scan-field-values .argument-input-unit {
  width: 100%;
}

.experiment-submit-panel .scan-field-values .argument-input-unit > textarea.argument-input {
  overflow-x: auto;
  overflow-y: auto;
  resize: none;
  white-space: nowrap;
}

/* Deterministic scan layouts. JS classifies the number of visible value fields
 * so this does not depend on :has()/nth-child behaviour or the hidden randomise
 * control. Three-input modes are always three equal columns. */
.experiment-submit-panel .ndscan-scan-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px 6px;
  width: 100%;
  min-width: 0;
  align-items: end;
}

.experiment-submit-panel .ndscan-scan-fields.scan-field-count-1 {
  grid-template-columns: minmax(0, 1fr);
}

.experiment-submit-panel .ndscan-scan-fields.scan-field-count-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.experiment-submit-panel .ndscan-scan-fields .scan-field {
  width: 100%;
  min-width: 0;
  max-width: none;
  flex: none;
}

.experiment-submit-panel .ndscan-scan-fields .scan-field-values {
  grid-column: 1 / -1;
  width: 100%;
}

@media (max-width: 620px) {
  /* The mode control is pinned to the physical top-right. The row reserves
   * space for it so long labels cannot push or overlap the selector. */
  .experiment-submit-panel .ndscan-parameter-row {
    position: relative;
    display: block;
    min-width: 0;
    padding-top: 0;
  }

  .experiment-submit-panel .ndscan-parameter-label {
    display: block;
    min-width: 0;
    min-height: var(--submission-input-height);
    padding-right: min(44%, 136px);
  }

  .experiment-submit-panel .ndscan-parameter-mode {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    width: min(42%, 128px);
    max-width: 128px;
    min-width: 108px;
    margin: 0;
  }

  .experiment-submit-panel .ndscan-parameter-value {
    display: block;
    width: 100%;
    min-width: 0;
    margin-top: 4px;
  }

  .experiment-submit-panel .argument-input-unit > span:last-child {
    padding-right: 6px;
    font-size: 10px;
  }

  /* Mobile scan parameters stay on one horizontal line. Flex is used here
   * deliberately rather than grid so inherited grid placement cannot make a
   * field span the whole row. Every visible field receives the same basis. */
  .experiment-submit-panel .ndscan-scan-fields,
  .experiment-submit-panel .ndscan-scan-fields.scan-field-count-1,
  .experiment-submit-panel .ndscan-scan-fields.scan-field-count-2,
  .experiment-submit-panel .ndscan-scan-fields.scan-field-count-3 {
    display: flex;
    flex-flow: row nowrap;
    align-items: flex-end;
    gap: 5px;
    width: 100%;
    min-width: 0;
  }

  .experiment-submit-panel .ndscan-scan-fields > .scan-field:not(.scan-field-randomise) {
    flex: 1 1 0;
    width: 0;
    min-width: 0;
    max-width: none;
    grid-column: auto;
  }

  .experiment-submit-panel .ndscan-scan-fields > .scan-field:not(.scan-field-randomise) > * {
    min-width: 0;
    max-width: 100%;
  }

  /* Explicit-list scans are intentionally a single full-width field. */
  .experiment-submit-panel .ndscan-scan-fields > .scan-field-values {
    flex: 1 1 100%;
    width: 100%;
  }
}

@media (max-width: 380px) {
  .experiment-submit-panel .ndscan-parameter-label {
    padding-right: min(45%, 130px);
  }

  .experiment-submit-panel .ndscan-parameter-mode {
    width: min(43%, 122px);
    min-width: 104px;
    max-width: 122px;
  }
}