@scope (grid-ui) {
  :where(:scope) {
    /* Read `--a-gap` so the universal `[gap="N"]` rules (tokens.css)
       reach the grid; defaults to `--a-gap-md` at :root. */
    --grid-gap-default:        var(--a-gap);
    --grid-column-gap-default: var(--grid-gap, var(--grid-gap-default));
    --grid-row-gap-default:    var(--grid-gap, var(--grid-gap-default));
  }

  :scope {
    box-sizing: border-box;
    display: grid;
    /* Default: auto 1fr columns — as many equal columns as children */
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    column-gap: var(--grid-column-gap, var(--grid-column-gap-default));
    row-gap: var(--grid-row-gap, var(--grid-row-gap-default));
    /* Universal [padding] / [margin] opt-in — see tokens.css for scale. */
    padding: var(--a-padding, 0);
    margin: var(--a-margin, 0);
  }

  /* Explicit column count — switches to template mode */
  :scope[columns="1"] { grid-auto-flow: row; grid-template-columns: 1fr; grid-auto-columns: auto; }
  :scope[columns="2"] { grid-auto-flow: row; grid-template-columns: repeat(2, 1fr); grid-auto-columns: auto; }
  :scope[columns="3"] { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); grid-auto-columns: auto; }
  :scope[columns="4"] { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); grid-auto-columns: auto; }
  :scope[columns="5"] { grid-auto-flow: row; grid-template-columns: repeat(5, 1fr); grid-auto-columns: auto; }
  :scope[columns="6"] { grid-auto-flow: row; grid-template-columns: repeat(6, 1fr); grid-auto-columns: auto; }

  /* Responsive presets */
  :scope[columns="auto-fill"] { grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }
  :scope[columns="auto-fit"]  { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }

  /* Column span — children can span multiple columns */
  & > [span="2"] { grid-column: span 2; }
  & > [span="3"] { grid-column: span 3; }
  & > [span="4"] { grid-column: span 4; }
  & > [span="5"] { grid-column: span 5; }
  & > [span="6"] { grid-column: span 6; }
  & > [span="full"] { grid-column: 1 / -1; }
}
