/* Defaults: any rule directly in ed-utilities wins (nested layer);
   :where() keeps them at zero specificity as a safety net. */
@layer ed-utilities.defaults {
  /* Not a dialog or popover: the user-agent margin: auto is what centers them. */
  [class*='ed-grid'] > :not(:where(dialog, [popover])) {
    margin-block: 0;
    margin-inline: 0;
  }

  :where([class*='ed-grid']) {
    gap: var(--ed-space-4);
  }
}

@layer ed-utilities {
  [class*='ed-grid'] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(var(--ed-grid-min-column-size, 20ch), 100%), 1fr));

    --ed-grid-min-column-size: initial;
  }

  /* The display above beats the user-agent [hidden] rule. until-found hides by content-visibility
     and keeps its box. */
  [class*='ed-grid'][hidden]:not([hidden='until-found' i]) {
    display: none;
  }

  /* Matches the rule above too (class*='ed-grid') and comes after it, so only the repeat mode changes:
     auto-fill keeps empty tracks, so a short row of items stays one column wide instead of stretching. */
  .ed-grid-fill {
    grid-template-columns: repeat(auto-fill, minmax(min(var(--ed-grid-min-column-size, 20ch), 100%), 1fr));
  }

  .ed-span-grid {
    grid-column: 1 / -1;
  }

  /*
    The 12-column grid. A child with a span class turns the grid into twelve equal tracks and into
    the container its steps are measured on; without one it stays the intrinsic grid above. The
    full row, ed-span-grid, switches nothing, and a class only counts when it starts with ed-span-.
    The specificity also outweighs ed-grid-fill.
  */
  [class*='ed-grid']:has(> :is([class^='ed-span-'], [class*=' ed-span-']):not(.ed-span-grid)) {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    container: ed-grid / inline-size;
  }

  /* Below its first step a child takes the full row. Zero specificity, so every span class wins. */
  :where([class*='ed-grid']:has(> :is([class^='ed-span-'], [class*=' ed-span-']):not(.ed-span-grid))) > * {
    grid-column: span 12;
  }

  .ed-span-1 {
    grid-column: span 1;
  }
  .ed-span-2 {
    grid-column: span 2;
  }
  .ed-span-3 {
    grid-column: span 3;
  }
  .ed-span-4 {
    grid-column: span 4;
  }
  .ed-span-5 {
    grid-column: span 5;
  }
  .ed-span-6 {
    grid-column: span 6;
  }
  .ed-span-7 {
    grid-column: span 7;
  }
  .ed-span-8 {
    grid-column: span 8;
  }
  .ed-span-9 {
    grid-column: span 9;
  }
  .ed-span-10 {
    grid-column: span 10;
  }
  .ed-span-11 {
    grid-column: span 11;
  }
  .ed-span-12 {
    grid-column: span 12;
  }

  /*
    The steps sit where n fields of a comfortable 12rem and their 1rem gaps fit: two at sm, three at
    md, four at lg, six at xl. At md four fields sit on the 8.75rem field floor. A child without a
    span class takes the step's default; a step class wins over the base class and the steps before
    it because it comes after them. The defaults ask for a parent in 12-column mode: an intrinsic
    grid nested in a 12-column one would otherwise find the outer container.
  */
  @container ed-grid (min-width: 25rem) {
    :where([class*='ed-grid']:has(> :is([class^='ed-span-'], [class*=' ed-span-']):not(.ed-span-grid)))
      > :not([class^='ed-span-'], [class*=' ed-span-']) {
      grid-column: span 6;
    }
    .ed-span-sm-1 {
      grid-column: span 1;
    }
    .ed-span-sm-2 {
      grid-column: span 2;
    }
    .ed-span-sm-3 {
      grid-column: span 3;
    }
    .ed-span-sm-4 {
      grid-column: span 4;
    }
    .ed-span-sm-5 {
      grid-column: span 5;
    }
    .ed-span-sm-6 {
      grid-column: span 6;
    }
    .ed-span-sm-7 {
      grid-column: span 7;
    }
    .ed-span-sm-8 {
      grid-column: span 8;
    }
    .ed-span-sm-9 {
      grid-column: span 9;
    }
    .ed-span-sm-10 {
      grid-column: span 10;
    }
    .ed-span-sm-11 {
      grid-column: span 11;
    }
    .ed-span-sm-12 {
      grid-column: span 12;
    }
  }

  @container ed-grid (min-width: 38rem) {
    :where([class*='ed-grid']:has(> :is([class^='ed-span-'], [class*=' ed-span-']):not(.ed-span-grid)))
      > :not([class^='ed-span-'], [class*=' ed-span-']) {
      grid-column: span 4;
    }
    .ed-span-md-1 {
      grid-column: span 1;
    }
    .ed-span-md-2 {
      grid-column: span 2;
    }
    .ed-span-md-3 {
      grid-column: span 3;
    }
    .ed-span-md-4 {
      grid-column: span 4;
    }
    .ed-span-md-5 {
      grid-column: span 5;
    }
    .ed-span-md-6 {
      grid-column: span 6;
    }
    .ed-span-md-7 {
      grid-column: span 7;
    }
    .ed-span-md-8 {
      grid-column: span 8;
    }
    .ed-span-md-9 {
      grid-column: span 9;
    }
    .ed-span-md-10 {
      grid-column: span 10;
    }
    .ed-span-md-11 {
      grid-column: span 11;
    }
    .ed-span-md-12 {
      grid-column: span 12;
    }
  }

  @container ed-grid (min-width: 51rem) {
    :where([class*='ed-grid']:has(> :is([class^='ed-span-'], [class*=' ed-span-']):not(.ed-span-grid)))
      > :not([class^='ed-span-'], [class*=' ed-span-']) {
      grid-column: span 3;
    }
    .ed-span-lg-1 {
      grid-column: span 1;
    }
    .ed-span-lg-2 {
      grid-column: span 2;
    }
    .ed-span-lg-3 {
      grid-column: span 3;
    }
    .ed-span-lg-4 {
      grid-column: span 4;
    }
    .ed-span-lg-5 {
      grid-column: span 5;
    }
    .ed-span-lg-6 {
      grid-column: span 6;
    }
    .ed-span-lg-7 {
      grid-column: span 7;
    }
    .ed-span-lg-8 {
      grid-column: span 8;
    }
    .ed-span-lg-9 {
      grid-column: span 9;
    }
    .ed-span-lg-10 {
      grid-column: span 10;
    }
    .ed-span-lg-11 {
      grid-column: span 11;
    }
    .ed-span-lg-12 {
      grid-column: span 12;
    }
  }

  @container ed-grid (min-width: 77rem) {
    :where([class*='ed-grid']:has(> :is([class^='ed-span-'], [class*=' ed-span-']):not(.ed-span-grid)))
      > :not([class^='ed-span-'], [class*=' ed-span-']) {
      grid-column: span 2;
    }
    .ed-span-xl-1 {
      grid-column: span 1;
    }
    .ed-span-xl-2 {
      grid-column: span 2;
    }
    .ed-span-xl-3 {
      grid-column: span 3;
    }
    .ed-span-xl-4 {
      grid-column: span 4;
    }
    .ed-span-xl-5 {
      grid-column: span 5;
    }
    .ed-span-xl-6 {
      grid-column: span 6;
    }
    .ed-span-xl-7 {
      grid-column: span 7;
    }
    .ed-span-xl-8 {
      grid-column: span 8;
    }
    .ed-span-xl-9 {
      grid-column: span 9;
    }
    .ed-span-xl-10 {
      grid-column: span 10;
    }
    .ed-span-xl-11 {
      grid-column: span 11;
    }
    .ed-span-xl-12 {
      grid-column: span 12;
    }
  }
}