.fourier-lab {
  width: 1120px;
  max-width: calc(100vw - 2rem);
  margin: var(--zenbu-sys-padding-xl) auto;
}

.fourier-intro {
  box-sizing: border-box;
  width: 100%;
  max-width: min(48rem, calc(100vw - 2rem));
}

.fourier-kicker {
  margin-bottom: var(--zenbu-sys-padding-xs);
  color: var(--zenbu-sys-color-text-secondary);
  font-family: var(--zenbu-sys-type-code-family);
  font-size: var(--zenbu-sys-font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.fourier-upload {
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  gap: var(--zenbu-sys-padding-md);
  margin-block: var(--zenbu-sys-padding-xl) var(--zenbu-sys-padding-md);
}

.fourier-upload h2,
.fourier-upload p {
  flex-basis: 100%;
  margin: 0;
}

.fourier-upload zen-input {
  flex: 1 1 20rem;
  min-width: 0;
}

.fourier-upload input[type="file"] {
  box-sizing: border-box;
  width: 100%;
  min-height: var(--zenbu-control-height);
  padding: var(--zenbu-control-padding-block) var(--zenbu-control-padding-inline);
  border: var(--zenbu-sys-stroke-width-emphasis) dashed
    var(--zenbu-sys-color-border-default);
  border-radius: var(--zenbu-sys-radius-control);
  background: var(--zenbu-sys-color-surface-default);
  color: var(--zenbu-sys-color-text-primary);
  font-size: var(--zenbu-control-font-size);
}

.fourier-status {
  min-height: 1.5em;
  margin-block: var(--zenbu-sys-padding-md);
  color: var(--zenbu-sys-color-text-secondary);
  font-weight: var(--zenbu-sys-type-label-weight);
}

.fourier-status[data-state="working"] {
  color: var(--zenbu-sys-color-warning-foreground);
}

.fourier-status[data-state="ready"] {
  color: var(--zenbu-sys-color-success-foreground);
}

.fourier-status[data-state="error"] {
  color: var(--zenbu-sys-color-danger-foreground);
}

.fourier-plane-navigation {
  display: none;
}

.fourier-planes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--zenbu-sys-padding-lg);
}

.fourier-planes figure {
  min-width: 0;
  margin: 0;
}

.fourier-planes figcaption {
  display: grid;
  gap: var(--zenbu-sys-padding-xs);
  min-height: 4.5rem;
  margin-bottom: var(--zenbu-sys-padding-sm);
}

.fourier-planes figcaption span {
  color: var(--zenbu-sys-color-text-secondary);
  font-size: var(--zenbu-sys-font-size-sm);
}

.fourier-planes canvas {
  --zenbu-fourier-selection-color: var(--zenbu-sys-color-focus-outer);
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border: var(--zenbu-sys-stroke-width-emphasis) solid
    var(--zenbu-sys-color-border-strong);
  border-radius: var(--zenbu-sys-radius-control-small);
  background: var(--zenbu-sys-color-surface-sunken);
  image-rendering: pixelated;
  touch-action: none;
}

.fourier-planes canvas[aria-disabled="false"]:hover {
  cursor: crosshair;
}

.fourier-planes canvas:focus-visible {
  outline: var(--zenbu-sys-focus-width) solid
    var(--zenbu-sys-color-focus-outer);
  outline-offset: var(--zenbu-sys-focus-offset);
}

.fourier-filter-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--zenbu-sys-padding-xl);
  margin-top: var(--zenbu-sys-padding-xl);
}

.fourier-filter-grid fieldset {
  min-width: 0;
  padding: var(--zenbu-sys-padding-lg) 0 0;
  border: 0;
  border-top: var(--zenbu-sys-stroke-width-emphasis) solid
    var(--zenbu-sys-color-border-subtle);
}

.fourier-filter-grid legend {
  padding: 0 var(--zenbu-sys-padding-sm) 0 0;
  font-size: var(--zenbu-sys-font-size-lg);
  font-weight: var(--zenbu-sys-type-title-weight);
}

.fourier-filter-grid p {
  color: var(--zenbu-sys-color-text-secondary);
  font-size: var(--zenbu-sys-font-size-sm);
}

.fourier-filter-grid zen-checkbox label {
  display: inline-flex;
  align-items: center;
  gap: var(--zenbu-sys-padding-xs);
}

.fourier-coordinates {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--zenbu-sys-padding-sm);
  margin-top: var(--zenbu-sys-padding-md);
}

.fourier-coordinates zen-field,
.fourier-coordinates label,
.fourier-coordinates input {
  min-width: 0;
}

.fourier-coordinates label {
  display: block;
  margin-bottom: var(--zenbu-sys-padding-xs);
  color: var(--zenbu-sys-color-text-secondary);
  font-size: var(--zenbu-sys-font-size-xs);
}

.fourier-coordinates input {
  box-sizing: border-box;
  width: 100%;
  min-height: var(--zenbu-control-height);
  padding: var(--zenbu-control-padding-block) var(--zenbu-control-padding-inline);
  border: var(--zenbu-sys-stroke-width) solid
    var(--zenbu-sys-color-border-default);
  border-radius: var(--zenbu-sys-radius-control-small);
  background: var(--zenbu-sys-color-surface-default);
  color: var(--zenbu-sys-color-text-primary);
  font-size: var(--zenbu-control-font-size);
}

.fourier-notes {
  max-width: 48rem;
  margin-top: var(--zenbu-sys-padding-xl);
}

@media (max-width: 800px) {
  .fourier-plane-navigation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--zenbu-sys-padding-sm);
    margin-bottom: var(--zenbu-sys-padding-sm);
  }

  .fourier-plane-navigation span {
    flex: 1;
    color: var(--zenbu-sys-color-text-secondary);
    font-size: var(--zenbu-sys-font-size-sm);
    text-align: center;
  }

  .fourier-planes {
    grid-template-columns: none;
    grid-auto-columns: min(82vw, 22rem);
    grid-auto-flow: column;
    gap: var(--zenbu-sys-padding-md);
    padding-bottom: var(--zenbu-sys-padding-sm);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    scrollbar-width: thin;
  }

  .fourier-planes figure {
    width: auto;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .fourier-planes figcaption {
    min-height: 5.5rem;
  }

  .fourier-filter-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .fourier-lab {
    max-width: calc(100vw - 1rem);
    margin-block: var(--zenbu-sys-padding-lg);
  }

  .fourier-upload {
    gap: var(--zenbu-sys-padding-sm);
    margin-block: var(--zenbu-sys-padding-lg) var(--zenbu-sys-padding-sm);
  }

  .fourier-upload zen-button,
  .fourier-upload zen-button > button {
    width: 100%;
  }

  .fourier-status {
    margin-block: var(--zenbu-sys-padding-sm) var(--zenbu-sys-padding-md);
  }

  .fourier-filter-grid {
    gap: var(--zenbu-sys-padding-lg);
    margin-top: var(--zenbu-sys-padding-lg);
  }

  .fourier-filter-grid fieldset {
    padding-top: var(--zenbu-sys-padding-md);
  }

  .fourier-coordinates {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fourier-notes {
    margin-top: var(--zenbu-sys-padding-lg);
  }
}

@media (forced-colors: active) {
  .fourier-planes canvas {
    --zenbu-fourier-selection-color: Highlight;
  }
}