@scope (fields-ui) {
  :where(:scope) {
    /* ── Tokens ── */
    --fields-gap:        var(--a-space-3);
    --fields-row-gap:    var(--fields-gap);
    --fields-column-gap: var(--fields-gap);
  }

  /* ── Base — 6-column grid ──
     Children are placed into the grid by their [rows="N"] attr (pure
     CSS, no JS). Default span (no attr) is the full row. The columns
     count is configurable via [columns="N"] on the host — defaults
     handle [columns] absent.

     `minmax(0, 1fr)` is required so children with overflow content
     (long labels, long select values) don't blow out the grid. */
  :scope {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(var(--fields-columns, 6), minmax(0, 1fr));
    column-gap: var(--fields-column-gap);
    row-gap: var(--fields-row-gap);
    align-items: start;
  }

  /* Per-instance column count from [columns="N"] — unrolled for the
     common values 1..12. Beyond 12 the host can set
     `--fields-columns: N` inline. */
  :scope[columns="1"]  { --fields-columns: 1; }
  :scope[columns="2"]  { --fields-columns: 2; }
  :scope[columns="3"]  { --fields-columns: 3; }
  :scope[columns="4"]  { --fields-columns: 4; }
  :scope[columns="5"]  { --fields-columns: 5; }
  :scope[columns="6"]  { --fields-columns: 6; }
  :scope[columns="8"]  { --fields-columns: 8; }
  :scope[columns="12"] { --fields-columns: 12; }

  /* ── field-ui spans ──
     `rows="N"` reads as "this field takes N grid cells". Without the
     attr, the field spans the full row (`grid-column: 1 / -1`) so
     authors can mix narrow + full-width fields without per-row
     wrappers. The attribute is exposed up to 12 to cover larger
     [columns] grids; 13+ also collapses to full-row. */
  :scope > field-ui {
    grid-column: 1 / -1;
    min-width: 0; /* allow children to shrink within the cell */
  }
  :scope > field-ui[rows="1"]  { grid-column: span 1;  }
  :scope > field-ui[rows="2"]  { grid-column: span 2;  }
  :scope > field-ui[rows="3"]  { grid-column: span 3;  }
  :scope > field-ui[rows="4"]  { grid-column: span 4;  }
  :scope > field-ui[rows="5"]  { grid-column: span 5;  }
  :scope > field-ui[rows="6"]  { grid-column: span 6;  }
  :scope > field-ui[rows="7"]  { grid-column: span 7;  }
  :scope > field-ui[rows="8"]  { grid-column: span 8;  }
  :scope > field-ui[rows="9"]  { grid-column: span 9;  }
  :scope > field-ui[rows="10"] { grid-column: span 10; }
  :scope > field-ui[rows="11"] { grid-column: span 11; }
  :scope > field-ui[rows="12"] { grid-column: span 12; }
}
