@layer features {
  .nav-builder {
    display: grid;
    gap: var(--lumi-section-gap);
  }

  .nav-builder-page-header {
    align-items: flex-start;
    margin: 0;
  }

  .nav-builder-settings {
    padding: var(--lumi-space-4);
    border: 1px solid var(--lumi-border);
    border-radius: var(--lumi-radius-md);
    background: var(--lumi-surface-subtle);
  }

  .nav-builder-settings > legend {
    padding-inline: var(--lumi-space-2);
    font: var(--lumi-weight-bold) var(--lumi-font-size-lg)/var(--lumi-line-height-tight) var(--lumi-font-display);
  }

  .nav-builder-setting-grid,
  .nav-builder-unassigned-settings {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--lumi-space-4);
  }

  .nav-builder-unassigned-settings {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: var(--lumi-space-4);
  }

  .nav-builder-setting-grid .switch {
    align-items: center;
    min-height: var(--lumi-touch-target);
    padding: var(--lumi-space-3);
    border: 1px solid var(--lumi-border);
    border-radius: var(--lumi-radius-md);
    background: var(--lumi-surface);
  }

  .nav-builder-setting-grid .switch > span:last-child {
    display: grid;
    gap: var(--lumi-space-1);
  }

  .nav-builder-workspace {
    display: grid;
    gap: var(--lumi-space-4);
  }

  .nav-toolbar,
  .nav-item-actions,
  .nav-section-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--lumi-space-2);
  }

  .nav-builder-body {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(18rem, 1fr);
    gap: var(--lumi-space-5);
    align-items: start;
  }

  .nav-builder-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--lumi-space-3);
    margin-bottom: var(--lumi-space-3);
  }

  .nav-builder-header h2,
  .nav-builder-header p {
    margin-block: 0;
  }

  .nav-section-list {
    display: grid;
    gap: var(--lumi-space-4);
  }

  .nav-section-card,
  .nav-pool-card,
  .nav-advanced {
    padding: var(--lumi-space-4);
    border: 1px solid var(--lumi-border);
    border-radius: var(--lumi-radius-md);
    background: var(--lumi-surface-subtle);
  }

  .nav-section-card[data-drag-state="over"],
  .nav-dd-list.drag-over {
    border-color: var(--lumi-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--lumi-primary) 20%, transparent);
  }

  .nav-section-header {
    display: grid;
    grid-template-columns: minmax(10rem, 1.2fr) minmax(8rem, 1fr) minmax(8rem, 1fr) auto;
    gap: var(--lumi-space-3);
    align-items: end;
    margin-bottom: var(--lumi-space-3);
  }

  .nav-section-header .field {
    min-width: 0;
  }

  .nav-section-actions {
    justify-content: flex-end;
  }

  .nav-section-actions .icon-button,
  .nav-item-actions .icon-button {
    width: var(--lumi-touch-target);
    min-width: var(--lumi-touch-target);
    min-height: var(--lumi-touch-target);
  }

  .nav-dd-list {
    display: grid;
    gap: var(--lumi-space-2);
    min-height: 4rem;
    padding: var(--lumi-space-2);
    border: 1px dashed var(--lumi-border-strong);
    border-radius: var(--lumi-radius-md);
    background: var(--lumi-surface-raised);
  }

  .nav-dd-list:empty::before {
    content: "No items in this group.";
    align-self: center;
    padding: var(--lumi-space-3);
    color: var(--lumi-text-muted);
    text-align: center;
  }

  .nav-dd-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--lumi-space-3);
    align-items: center;
    padding: var(--lumi-space-2) var(--lumi-space-3);
    border: 1px solid var(--lumi-border);
    border-radius: var(--lumi-radius-md);
    background: var(--lumi-surface);
    box-shadow: var(--lumi-shadow-sm);
  }

  .nav-dd-item[draggable="true"] {
    cursor: grab;
  }

  .nav-dd-item.dragging {
    opacity: 0.55;
  }

  .nav-dd-handle {
    color: var(--lumi-text-muted);
    font-family: var(--lumi-font-mono);
    user-select: none;
  }

  .nav-dd-meta {
    display: grid;
    gap: var(--lumi-space-1);
    min-width: 0;
  }

  .nav-dd-meta span {
    overflow: hidden;
    color: var(--lumi-text-muted);
    font-size: var(--lumi-font-size-sm);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .nav-item-actions {
    flex-wrap: nowrap;
  }

  .nav-advanced {
    display: grid;
    gap: var(--lumi-space-4);
  }

  .nav-advanced[hidden] {
    display: none;
  }

  .nav-actions {
    margin-top: 0;
  }

  .nav-actions .inline-form {
    margin: 0;
  }

  .nav-builder-status {
    min-height: 1.5rem;
  }

  .nav-builder[data-dirty="true"] .nav-builder-status {
    color: var(--lumi-warning);
    font-weight: var(--lumi-weight-medium);
  }

  @media (min-width: 901px) and (min-height: 720px) {
    .nav-pool-card {
      position: sticky;
      top: var(--lumi-space-4);
    }
  }

  @media (max-width: 1100px) {
    .nav-section-header {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .nav-section-actions {
      grid-column: 1 / -1;
      justify-content: flex-start;
    }
  }

  @media (max-width: 900px) {
    .nav-builder-body,
    .nav-builder-setting-grid,
    .nav-builder-unassigned-settings {
      grid-template-columns: 1fr;
    }

    .nav-pool-card {
      order: -1;
    }
  }

  @media (max-width: 560px) {
    .nav-section-header,
    .nav-dd-item {
      grid-template-columns: 1fr;
    }

    .nav-item-actions,
    .nav-section-actions {
      justify-content: flex-start;
    }

    .nav-dd-handle {
      display: none;
    }

    .nav-dd-meta span {
      white-space: normal;
    }
  }
}
