/* Mobile-specific experiment detail layout fixes. Loaded after styles.css. */

.image-stage-stack {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.scan-layout,
.simplified-scan,
.scan-table-grid,
.scan-parameter-panel,
.scan-parameter-panel .argument-list,
.scan-parameter-panel .argument-row,
.scan-tab-plot,
.scan-tab-plot .live-display-head,
.scan-tab-plot .live-display-actions,
.scan-tab-plot .scan-controls.compact,
.live-scan-plot,
.plot-frame,
.surface-plot-layer {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
}

.scan-summary-line {
  overflow-wrap: anywhere;
}

.scan-tab-plot .live-scan-plot {
  overflow: hidden;
}

.scan-tab-plot .live-display-head {
  grid-template-columns: minmax(0, 1fr) minmax(0, auto);
}

.scan-tab-plot .live-display-actions,
.scan-tab-plot .scan-controls.compact {
  flex-wrap: wrap;
}

.scan-tab-plot .scan-controls.compact .field {
  flex: 1 1 120px;
  min-width: min(100%, 120px);
}

.scan-tab-plot .scan-controls.compact select {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.scan-tab-plot .surface-plot-layer {
  aspect-ratio: 1 / 1;
}

.scan-tab-plot .surface-plot-layer canvas,
.scan-tab-plot .surface-plot-layer svg {
  height: 100%;
}

.scan-table-grid .table-wrap {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.scan-table-grid,
.scan-table-grid > * {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.scan-table-grid table {
  min-width: max(560px, 100%);
}

@media (max-width: 720px) {
  .tabs {
    flex-wrap: nowrap;
    gap: 2px;
    min-width: 0;
    overflow: hidden;
  }

  .tab-button {
    flex: 1 1 0;
    min-width: 0;
    padding-right: 2px;
    padding-left: 2px;
    overflow: hidden;
    font-size: clamp(10px, 2.7vw, 13px);
    letter-spacing: -0.01em;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (max-width: 860px) {
  .overview-grid,
  .overview-columns {
    grid-template-columns: minmax(0, 1fr);
  }

  .image-hero {
    display: contents;
  }

  .image-stage-stack {
    order: 10;
  }

  .image-carousel {
    max-width: 100%;
    grid-auto-columns: minmax(92px, 124px);
  }

  .image-meta {
    order: 20;
  }
}

@media (max-width: 860px) {
  .live-display-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .live-display,
  .live-scan-display,
  .live-scan-plot {
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
  }

  .live-scan-display .live-display-head {
    grid-template-columns: minmax(0, 1fr);
  }

  .live-scan-display .live-display-actions,
  .live-scan-display .plot-selector-fields,
  .scan-tab-plot .scan-controls.compact {
    width: 100%;
    min-width: 0;
    flex-wrap: wrap;
    justify-content: start;
  }

  .scan-tab-plot .scan-controls.compact .field,
  .live-scan-display .plot-select-field {
    flex: 1 1 9rem;
    min-width: min(100%, 9rem);
    max-width: none;
  }

  .live-scan-display .plot-select-field select {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .scan-tab-plot .scan-controls.compact {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .scan-tab-plot .scan-controls.compact .checkbox-field {
    width: 100%;
  }

  .scan-tab-plot .scan-controls.compact select {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .scan-parameter-panel .argument-row.parameter-grid-row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 6px;
  }

  .scan-parameter-panel .parameter-main,
  .scan-parameter-panel .parameter-description {
    padding-left: 0;
  }

  .scan-parameter-panel .parameter-description,
  .scan-parameter-panel .parameter-description.full,
  .scan-parameter-panel .parameter-bounds {
    grid-column: auto;
  }

  .scan-parameter-panel .parameter-values {
    max-width: 100%;
  }

  .live-scan-display .checkbox-field {
    white-space: normal;
  }

  .rtio-iframe-wrap {
    height: calc(100dvh - 148px);
    overscroll-behavior: contain;
  }
}

@media (max-width: 520px) {
  .tab-button {
    letter-spacing: -0.02em;
  }

  .scan-tab-plot .scan-controls.compact .field,
  .live-scan-display .plot-select-field {
    flex-basis: 100%;
    min-width: 0;
  }

  .rtio-iframe-wrap {
    height: calc(100dvh - 132px);
  }
}