@layer components {
  /* Import upload page */
  .import-upload {
    max-inline-size: 36rem;
    margin-inline: auto;
    padding: var(--block-space) var(--inline-space);
  }

  .import-upload__header {
    margin-block-end: var(--block-space-double);
  }

  .import-upload__subtitle {
    color: var(--color-ink-secondary);
    font-size: var(--text-small);
    margin-block-start: var(--block-space-half);
  }

  .import-upload__dropzone {
    --dropzone-border: oklch(var(--lch-ink-light));

    align-items: center;
    border: 2px dashed var(--dropzone-border);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    gap: var(--block-space-half);
    justify-content: center;
    min-block-size: 12rem;
    padding: var(--block-space-double) var(--inline-space);
    text-align: center;
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
  }

  .import-upload__dropzone--active {
    --dropzone-border: var(--color-link);

    background-color: oklch(var(--lch-link) / 0.05);
  }

  .import-upload__dropzone-content {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: var(--block-space-half);
  }

  .import-upload__dropzone-text {
    color: var(--color-ink-secondary);
  }

  .import-upload__file-input {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .import-upload__hint {
    color: var(--color-ink-muted);
    font-size: var(--text-xs);
  }

  .import-upload__file-list {
    margin-block-start: var(--block-space);
  }

  .import-upload__list-heading {
    font-size: var(--text-small);
    font-weight: 600;
    margin-block-end: var(--block-space-half);
  }

  .import-upload__file-item {
    color: var(--color-ink-secondary);
    font-size: var(--text-small);
    padding-block: 0.25rem;
  }

  .import-upload__actions {
    display: flex;
    gap: var(--inline-space);
    margin-block-start: var(--block-space-double);
  }

  /* Import preparation screen */
  .import-prep {
    max-inline-size: 48rem;
    margin-inline: auto;
    padding: var(--block-space) var(--inline-space);
  }

  .import-prep__header {
    margin-block-end: var(--block-space-double);
  }

  .import-prep__subtitle {
    color: var(--color-ink-secondary);
    font-size: var(--text-small);
    margin-block-start: var(--block-space-half);
  }

  .import-prep__list {
    border: var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }

  .import-prep__list-header {
    background-color: var(--color-surface);
    border-block-end: var(--border);
    color: var(--color-ink-muted);
    display: grid;
    font-size: var(--text-xs);
    font-weight: 600;
    gap: var(--inline-space);
    grid-template-columns: 2ch 1fr 10rem 3rem;
    padding: var(--block-space-half) var(--inline-space);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .import-prep__col-file { grid-column: 2; }
  .import-prep__col-type { grid-column: 3; }
  .import-prep__col-actions { grid-column: 4; }

  /* Individual file row */
  .import-file {
    border-block-end: var(--border);
    display: grid;
    gap: var(--inline-space);
    grid-template-columns: 2ch 1fr 10rem 3rem;
    align-items: center;
    padding: var(--block-space-half) var(--inline-space);
  }

  .import-file:last-child {
    border-block-end: none;
  }

  .import-file__drag {
    cursor: grab;
    color: var(--color-ink-muted);
    font-size: var(--text-small);
    text-align: center;
  }

  .import-file__drag:active {
    cursor: grabbing;
  }

  .import-file__drag-icon {
    user-select: none;
  }

  .import-file__name {
    font-size: var(--text-small);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .import-file__type .select {
    font-size: var(--text-xs);
    padding: 0.25rem 2rem 0.25rem 0.5rem;
  }

  .import-file__actions {
    text-align: center;
  }

  .import-prep__actions {
    display: flex;
    gap: var(--inline-space);
    margin-block-start: var(--block-space);
  }

  .import-prep__add-file {
    margin-block-start: var(--block-space);
    padding: var(--block-space) var(--inline-space);
    border: var(--border);
    border-radius: var(--radius);
  }

  .import-prep__add-form {
    display: flex;
    align-items: flex-end;
    gap: var(--inline-space);
  }

  .import-prep__add-form .field {
    flex: 1;
    margin-block-end: 0;
  }

  .import-prep__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-block-start: var(--block-space-double);
    padding-block-start: var(--block-space);
    border-block-start: var(--border);
  }

  .import-prep__footer-hint {
    color: var(--color-ink-muted);
    font-size: var(--text-xs);
  }

  .import-prep__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--block-space);
    padding: var(--block-space-double);
    text-align: center;
    color: var(--color-ink-secondary);
  }

  /* SortableJS ghost states (shared with outline) */
  .import-file.sortable-ghost {
    opacity: 0.4;
  }

  .import-file.sortable-chosen {
    background-color: var(--color-surface);
  }

  /* Mobile adjustments */
  @media (max-width: 600px) {
    .import-prep__list-header {
      grid-template-columns: 2ch 1fr 3rem;
    }

    .import-prep__col-type { display: none; }

    .import-file {
      grid-template-columns: 2ch 1fr 3rem;
    }

    .import-file__type {
      grid-column: 1 / -1;
      padding-inline-start: 3ch;
    }
  }
}