@layer components {
  /* Shared */
  .dd-student-wrap {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  .dd-student-wrap--reorder { max-inline-size: 32rem; }

  /* A draggable item. States only set --dd-item-*. */
  .dd-item {
    --dd-item-border-color: var(--color-border);
    --dd-item-cursor: grab;
    --dd-item-opacity: 1;
    --dd-item-shadow: none;

    align-items: center;
    background: var(--exam-bg-colour, var(--color-surface));
    border: 1px solid var(--dd-item-border-color);
    border-radius: 0.375rem;
    box-shadow: var(--dd-item-shadow);
    cursor: var(--dd-item-cursor);
    display: flex;
    gap: 0.5rem;
    opacity: var(--dd-item-opacity);
    padding: 0.625rem 0.75rem;
    transition: box-shadow 200ms, opacity 200ms, border-color 200ms;
    user-select: none;

    &.dd-item--dragging { --dd-item-opacity: 0.4; }
    &.dd-item--selected {
      --dd-item-border-color: var(--color-primary);
      --dd-item-shadow: 0 0 0 2px rgba(99, 102, 241, 0.3);
    }
    &.dd-item--touch-clone {
      --dd-item-border-color: var(--color-primary);
      --dd-item-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    }
    &.dd-item--reorder {
      --dd-item-cursor: default;

      position: relative;
    }
    &.dd-item--grabbed {
      --dd-item-border-color: var(--color-primary);
      --dd-item-cursor: grabbing;
      --dd-item-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
      --dd-reorder-handle-cursor: grabbing;

      z-index: 9999;
    }
    /* Last, so it wins over every state above as it always has. */
    &:hover {
      --dd-item-border-color: var(--color-primary);
      --dd-item-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    }
  }
  .dd-item-label {
    color: var(--exam-font-colour, inherit);
    flex: 1;
    font-size: calc(1rem * var(--exam-font-scale, 1));
  }

  /* Reorder */
  .dd-reorder-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }
  .dd-reorder-handle {
    --dd-reorder-handle-color: var(--color-text-muted);

    align-items: center;
    color: var(--dd-reorder-handle-color);
    cursor: var(--dd-reorder-handle-cursor, grab);
    display: flex;
    flex-shrink: 0;
    font-size: 1.1rem;
    inline-size: 1.5rem;
    justify-content: center;
    touch-action: none;

    &:hover { --dd-reorder-handle-color: var(--color-text); }
    &:active { --dd-reorder-handle-cursor: grabbing; }
  }
  .dd-reorder-placeholder {
    background: rgba(99, 102, 241, 0.06);
    border: 2px dashed var(--color-primary);
    border-radius: 0.375rem;
    transform-origin: top;
    transition: transform 200ms;
  }

  /* Drop targets: the student pool and zones, and the author's mapping zones. The active
     state only sets --dd-target-*. */
  .dd-pool,
  .dd-zone,
  .dd-drop-zone {
    --dd-target-background: var(--color-surface-sunken);
    --dd-target-border-color: var(--color-border);

    background: var(--dd-target-background);
    border: 2px dashed var(--dd-target-border-color);
    display: flex;
    flex-wrap: wrap;
    transition: border-color 200ms, background 200ms;
  }
  .dd-zone--active,
  .dd-drop-zone--active {
    --dd-target-background: rgba(99, 102, 241, 0.06);
    --dd-target-border-color: var(--color-primary);
  }

  /* Pool / zones (single & multi) */
  .dd-pool {
    border-radius: 0.5rem;
    gap: 0.5rem;
    min-block-size: 3rem;
    padding: 0.75rem;
  }
  .dd-zones {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
  }
  .dd-zone {
    border-radius: 0.5rem;
    flex: 1 1 12rem;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0.5rem;
    min-block-size: 4rem;
    padding: 0.75rem;
  }
  .dd-zone-label {
    color: var(--exam-font-colour, var(--color-text-muted));
    font-size: calc(0.8rem * var(--exam-font-scale, 1));
    font-weight: 600;
    margin: 0;
  }

  /* Author form */
  .dd-author-wrap {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  .dd-section {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  .dd-section-header {
    align-items: center;
    display: flex;
    justify-content: space-between;
  }
  .dd-section-label {
    font-size: 0.875rem;
    font-weight: 600;
  }
  .dd-author-row {
    align-items: center;
    display: flex;
    gap: 0.5rem;
    padding: 0.25rem 0;

    &.dd-author-row--dragging { opacity: 0.4; }
  }
  .dd-row-number {
    color: var(--color-text-muted);
    flex-shrink: 0;
    font-size: 0.8rem;
    inline-size: 1.5rem;
    text-align: end;
  }
  .dd-checkbox-label {
    align-items: center;
    display: flex;
    font-size: 0.875rem;
    gap: 0.5rem;
  }

  /* Author mapping area */
  .dd-mapping-pool,
  .dd-mapping-buckets {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-block-end: 0.5rem;
  }
  .dd-mapping-pool-label {
    color: var(--color-text-muted);
    font-size: 0.8rem;
    font-weight: 600;
    inline-size: 100%;
    margin: 0;
  }
  .dd-drop-zone {
    --dd-target-background: transparent;

    align-content: flex-start;
    border-radius: 0.375rem;
    flex: 1 1 10rem;
    gap: 0.375rem;
    min-block-size: 3rem;
    padding: 0.5rem;

    &.dd-drop-zone--pool { --dd-target-background: var(--color-surface-sunken); }
    &.dd-drop-zone--active { --dd-target-background: rgba(99, 102, 241, 0.06); }
  }
  .dd-drop-zone-label {
    color: var(--color-text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    inline-size: 100%;
    margin: 0;
  }
  .dd-mapping-chip {
    align-items: center;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0.25rem;
    cursor: grab;
    display: inline-flex;
    font-size: 0.8rem;
    padding: 0.25rem 0.625rem;
    transition: box-shadow 150ms;
    user-select: none;

    &:hover { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); }
    &.dd-mapping-chip--dragging { opacity: 0.4; }
  }

  /* Preview and readonly (marking view) share one layout. Chip states only set --dd-chip-*. */
  .dd-preview {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  .dd-preview-label {
    color: var(--color-text-muted);
    font-size: 0.8rem;
    font-weight: 600;
    margin: 0;
  }
  .dd-preview-pool {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
  }
  .dd-preview-buckets,
  .dd-readonly-buckets {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
  }
  .dd-preview-bucket,
  .dd-readonly-bucket {
    border: 1px solid var(--color-border);
    border-radius: 0.375rem;
    flex: 1 1 10rem;
    padding: 0.5rem;
  }
  .dd-preview-bucket-label,
  .dd-readonly-bucket-label {
    color: var(--color-text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    margin: 0 0 0.375rem;
  }
  .dd-preview-chip,
  .dd-readonly-chip {
    --dd-chip-background: transparent;
    --dd-chip-border-color: var(--color-border);
    --dd-chip-border-style: solid;
    --dd-chip-color: inherit;

    background: var(--dd-chip-background);
    border: 1px var(--dd-chip-border-style) var(--dd-chip-border-color);
    border-radius: 0.25rem;
    color: var(--dd-chip-color);
    display: inline-flex;
    font-size: 0.8rem;
    padding: 0.2rem 0.5rem;
  }
  .dd-preview-chip { --dd-chip-background: var(--color-surface); }
  .dd-preview-chip--correct {
    --dd-chip-background: rgba(34, 197, 94, 0.1);
    --dd-chip-border-color: var(--color-success);
  }
  .dd-readonly-chip--correct {
    --dd-chip-background: rgba(34, 197, 94, 0.1);
    --dd-chip-border-color: var(--color-success);
    --dd-chip-color: var(--color-success);
  }
  .dd-readonly-chip--incorrect {
    --dd-chip-background: rgba(239, 68, 68, 0.1);
    --dd-chip-border-color: var(--color-danger);
    --dd-chip-color: var(--color-danger);
  }
  .dd-preview-chip--empty,
  .dd-readonly-chip--empty {
    --dd-chip-border-style: dashed;
    --dd-chip-color: var(--color-text-muted);
  }
  .dd-preview-order,
  .dd-readonly-order {
    margin: 0;
    padding-inline-start: 1.25rem;
  }
  .dd-preview-order-item,
  .dd-readonly-order-item { padding: 0.25rem 0; }
  .dd-readonly-order-item--correct { color: var(--color-success); }
  .dd-readonly-order-item--incorrect { color: var(--color-danger); }
}