@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);
    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-accent);

    background-color: oklch(var(--lch-accent) / 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);
  }

  /* Full-page headings: the story's face, quiet. */
  :is(.import-upload__header, .import-prep__header) h1 {
    font-family: var(--font-prose);
    font-size: var(--text-large);
    font-weight: 500;
    line-height: 1.3;
  }

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

  .import-prep__list {
    border-block: var(--border);
  }

  .import-prep__list-header {
    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 auto minmax(0, 1fr) 10rem 3rem;
    padding-block: var(--block-space-half);
  }

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

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

  .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;
  }

  /* Move up and Move down, beside the drag handle as the Outline has them.
     The first file's Move up and the last file's Move down keep their place
     but are hidden, so the rule follows the list through a drag or a removal. */
  .import-file__moves {
    display: flex;
  }

  .import-file__move-btn {
    align-items: center;
    background: transparent;
    border: none;
    border-radius: var(--radius);
    color: oklch(var(--lch-ink-medium));
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    min-block-size: var(--touch-target-min);
    min-inline-size: var(--touch-target-min);
    padding: 0;
  }

  @media (hover: hover) {
    .import-file__move-btn:hover {
      background: var(--color-surface);
      color: var(--color-ink);
    }
  }

  .import-file__move-btn:active {
    background: var(--color-surface);
    color: var(--color-ink);
  }

  .import-file:first-child .import-file__move-btn--up,
  .import-file:last-child .import-file__move-btn--down {
    visibility: hidden;
  }

  @media (max-width: 799px), (pointer: coarse) {
    .import-file__move-btn {
      min-block-size: 44px;
      min-inline-size: 44px;
    }
  }

  .import-file__info {
    min-inline-size: 0;
  }

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

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

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

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

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

  .import-results {
    display: grid;
    gap: var(--block-space-half);
    margin-block: var(--block-space) var(--block-space-double);
  }

  .import-results dt { font-weight: 600; }
  .import-results dd { color: var(--color-ink-secondary); font-size: var(--text-small); margin: 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 auto minmax(0, 1fr) 3rem;
    }

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

    .import-prep__col-actions { grid-column: 4; }

    .import-file {
      grid-template-columns: 2ch auto minmax(0, 1fr) 3rem;
      row-gap: var(--block-space-quarter);
    }

    .import-file__drag,
    .import-file__moves {
      grid-row: 1 / span 2;
    }

    .import-file__moves {
      flex-direction: column;
    }

    .import-file__actions {
      grid-column: 4;
      grid-row: 1;
    }

    .import-file__type {
      grid-column: 3 / -1;
    }
  }
}